From 85b1f7c2306ae6d1fba2c92a9318407afe18f186 Mon Sep 17 00:00:00 2001
From: ksen0 <katie.kuksenok@gmail.com>
Date: Thu, 17 Apr 2025 19:11:50 +0200
Subject: [PATCH] Update 2.0 documentation
---
public/reference/data.json | 48768 ++++++++--------
public/search-indices/en.json | 2 +-
public/search-indices/es.json | 2 +-
public/search-indices/hi.json | 2 +-
public/search-indices/ko.json | 2 +-
public/search-indices/zh-Hans.json | 2 +-
.../en/creating_libraries.mdx | 2 +-
src/content/contributor-docs/en/jsdoc.mdx | 162 +
.../reference/en/p5.Amplitude/getLevel.mdx | 48 +-
.../reference/en/p5.Amplitude/setInput.mdx | 59 +-
.../reference/en/p5.Amplitude/smooth.mdx | 15 +-
.../en/p5.Amplitude/toggleNormalize.mdx | 29 -
src/content/reference/en/p5.AudioIn/amp.mdx | 17 +-
.../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 | 29 +-
src/content/reference/en/p5.AudioIn/stop.mdx | 8 +-
.../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.Biquad/freq.mdx | 19 +
src/content/reference/en/p5.Biquad/gain.mdx | 21 +
src/content/reference/en/p5.Biquad/res.mdx | 19 +
.../reference/en/p5.Biquad/setType.mdx | 21 +
src/content/reference/en/p5.Camera/camera.mdx | 87 +-
.../reference/en/p5.Camera/centerX.mdx | 27 +-
.../reference/en/p5.Camera/centerY.mdx | 27 +-
.../reference/en/p5.Camera/centerZ.mdx | 27 +-
src/content/reference/en/p5.Camera/eyeX.mdx | 27 +-
src/content/reference/en/p5.Camera/eyeY.mdx | 29 +-
src/content/reference/en/p5.Camera/eyeZ.mdx | 27 +-
.../reference/en/p5.Camera/frustum.mdx | 78 +-
src/content/reference/en/p5.Camera/lookAt.mdx | 39 +-
src/content/reference/en/p5.Camera/move.mdx | 78 +-
src/content/reference/en/p5.Camera/ortho.mdx | 75 +-
src/content/reference/en/p5.Camera/pan.mdx | 19 +-
.../reference/en/p5.Camera/perspective.mdx | 54 +-
src/content/reference/en/p5.Camera/roll.mdx | 82 -
src/content/reference/en/p5.Camera/set.mdx | 16 +-
.../reference/en/p5.Camera/setPosition.mdx | 27 +-
src/content/reference/en/p5.Camera/slerp.mdx | 30 +-
src/content/reference/en/p5.Camera/tilt.mdx | 19 +-
src/content/reference/en/p5.Camera/upX.mdx | 27 +-
src/content/reference/en/p5.Camera/upY.mdx | 27 +-
src/content/reference/en/p5.Camera/upZ.mdx | 27 +-
.../reference/en/p5.Color/setAlpha.mdx | 108 +-
src/content/reference/en/p5.Color/setBlue.mdx | 108 +-
.../reference/en/p5.Color/setGreen.mdx | 108 +-
src/content/reference/en/p5.Color/setRed.mdx | 104 +-
.../reference/en/p5.Color/toString.mdx | 171 +-
.../reference/en/p5.Compressor/attack.mdx | 28 -
.../reference/en/p5.Compressor/compressor.mdx | 20 -
.../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 | 23 +-
src/content/reference/en/p5.Delay/connect.mdx | 20 -
.../reference/en/p5.Delay/delayTime.mdx | 66 +-
.../reference/en/p5.Delay/disconnect.mdx | 16 -
.../reference/en/p5.Delay/feedback.mdx | 23 +-
src/content/reference/en/p5.Delay/filter.mdx | 31 -
.../reference/en/p5.Delay/leftDelay.mdx | 18 -
src/content/reference/en/p5.Delay/process.mdx | 32 +-
.../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 | 23 -
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 | 40 +-
.../reference/en/p5.Element/attribute.mdx | 20 +-
.../reference/en/p5.Element/center.mdx | 17 +-
.../en/{p5 => p5.Element}/changed.mdx | 20 +-
src/content/reference/en/p5.Element/child.mdx | 22 +-
src/content/reference/en/p5.Element/class.mdx | 18 +-
.../reference/en/p5.Element/doubleClicked.mdx | 20 +-
.../reference/en/p5.Element/dragLeave.mdx | 20 +-
.../reference/en/p5.Element/dragOver.mdx | 20 +-
.../reference/en/p5.Element/draggable.mdx | 17 +-
src/content/reference/en/p5.Element/drop.mdx | 24 +-
src/content/reference/en/p5.Element/elt.mdx | 5 +-
.../reference/en/p5.Element/hasClass.mdx | 22 +-
.../reference/en/p5.Element/height.mdx | 9 +-
src/content/reference/en/p5.Element/hide.mdx | 10 +-
src/content/reference/en/p5.Element/html.mdx | 24 +-
src/content/reference/en/p5.Element/id.mdx | 18 +-
.../reference/en/{p5 => p5.Element}/input.mdx | 22 +-
.../reference/en/p5.Element/mouseClicked.mdx | 20 +-
.../reference/en/p5.Element/mouseMoved.mdx | 20 +-
.../reference/en/p5.Element/mouseOut.mdx | 20 +-
.../reference/en/p5.Element/mouseOver.mdx | 20 +-
.../reference/en/p5.Element/mousePressed.mdx | 20 +-
.../reference/en/p5.Element/mouseReleased.mdx | 20 +-
.../reference/en/p5.Element/mouseWheel.mdx | 20 +-
.../reference/en/p5.Element/parent.mdx | 21 +-
.../reference/en/p5.Element/position.mdx | 48 +-
.../reference/en/p5.Element/remove.mdx | 13 +-
.../en/p5.Element/removeAttribute.mdx | 15 +-
.../reference/en/p5.Element/removeClass.mdx | 18 +-
src/content/reference/en/p5.Element/show.mdx | 10 +-
src/content/reference/en/p5.Element/size.mdx | 41 +-
src/content/reference/en/p5.Element/style.mdx | 21 +-
.../reference/en/p5.Element/toggleClass.mdx | 17 +-
.../reference/en/p5.Element/touchEnded.mdx | 53 -
.../reference/en/p5.Element/touchMoved.mdx | 53 -
.../reference/en/p5.Element/touchStarted.mdx | 55 -
src/content/reference/en/p5.Element/value.mdx | 15 +-
src/content/reference/en/p5.Element/width.mdx | 9 +-
src/content/reference/en/p5.Envelope/add.mdx | 28 -
.../reference/en/p5.Envelope/attackLevel.mdx | 15 -
.../reference/en/p5.Envelope/attackTime.mdx | 14 +-
.../reference/en/p5.Envelope/decayLevel.mdx | 15 -
.../reference/en/p5.Envelope/decayTime.mdx | 15 -
src/content/reference/en/p5.Envelope/mult.mdx | 28 -
src/content/reference/en/p5.Envelope/play.mdx | 71 +-
src/content/reference/en/p5.Envelope/ramp.mdx | 85 -
.../reference/en/p5.Envelope/releaseLevel.mdx | 15 -
.../reference/en/p5.Envelope/releaseTime.mdx | 14 +-
.../reference/en/p5.Envelope/scale.mdx | 40 -
src/content/reference/en/p5.Envelope/set.mdx | 80 -
.../reference/en/p5.Envelope/setADSR.mdx | 83 +-
.../reference/en/p5.Envelope/setExp.mdx | 23 -
.../reference/en/p5.Envelope/setInput.mdx | 18 +-
.../reference/en/p5.Envelope/setRange.mdx | 62 -
.../en/p5.Envelope/triggerAttack.mdx | 62 +-
.../en/p5.Envelope/triggerRelease.mdx | 60 +-
src/content/reference/en/p5.FFT/analyze.mdx | 81 +-
.../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 | 28 +-
src/content/reference/en/p5.File/data.mdx | 5 +-
src/content/reference/en/p5.File/file.mdx | 11 +-
src/content/reference/en/p5.File/name.mdx | 8 +-
src/content/reference/en/p5.File/size.mdx | 8 +-
src/content/reference/en/p5.File/subtype.mdx | 5 +-
src/content/reference/en/p5.File/type.mdx | 5 +-
.../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 | 17 -
.../reference/en/p5.Font/textBounds.mdx | 162 -
.../reference/en/p5.Font/textToContours.mdx | 119 +
.../reference/en/p5.Font/textToModel.mdx | 236 +
.../reference/en/p5.Font/textToPaths.mdx | 154 +
.../reference/en/p5.Font/textToPoints.mdx | 79 +-
.../reference/en/p5.Framebuffer/autoSized.mdx | 19 +-
.../reference/en/p5.Framebuffer/begin.mdx | 5 +-
.../reference/en/p5.Framebuffer/color.mdx | 3 +-
.../en/p5.Framebuffer/createCamera.mdx | 21 +-
.../reference/en/p5.Framebuffer/depth.mdx | 3 +-
.../reference/en/p5.Framebuffer/draw.mdx | 19 +-
.../reference/en/p5.Framebuffer/end.mdx | 5 +-
.../reference/en/p5.Framebuffer/get.mdx | 30 +-
.../en/p5.Framebuffer/loadPixels.mdx | 61 -
.../en/p5.Framebuffer/pixelDensity.mdx | 26 +-
.../reference/en/p5.Framebuffer/pixels.mdx | 3 +-
.../reference/en/p5.Framebuffer/remove.mdx | 12 +-
.../reference/en/p5.Framebuffer/resize.mdx | 20 +-
.../en/p5.Framebuffer/updatePixels.mdx | 66 -
src/content/reference/en/p5.Gain/amp.mdx | 25 +-
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/calculateBoundingBox.mdx | 14 +-
.../reference/en/p5.Geometry/clearColors.mdx | 13 +-
.../reference/en/p5.Geometry/computeFaces.mdx | 12 +-
.../en/p5.Geometry/computeNormals.mdx | 40 +-
.../reference/en/p5.Geometry/faces.mdx | 14 +-
.../reference/en/p5.Geometry/flipU.mdx | 18 +-
.../reference/en/p5.Geometry/flipV.mdx | 18 +-
.../en/p5.Geometry/makeEdgesFromFaces.mdx | 57 +
.../reference/en/p5.Geometry/normalize.mdx | 11 +-
src/content/reference/en/p5.Geometry/uvs.mdx | 11 +-
.../en/p5.Geometry/vertexNormals.mdx | 21 +-
.../en/p5.Geometry/vertexProperty.mdx | 148 +
.../reference/en/p5.Geometry/vertices.mdx | 9 +-
.../en/p5.Graphics/createFramebuffer.mdx | 88 +-
.../reference/en/p5.Graphics/remove.mdx | 12 +-
.../reference/en/p5.Graphics/reset.mdx | 5 +-
src/content/reference/en/p5.Image/blend.mdx | 533 +-
src/content/reference/en/p5.Image/copy.mdx | 346 +-
src/content/reference/en/p5.Image/delay.mdx | 226 +-
src/content/reference/en/p5.Image/filter.mdx | 615 +-
src/content/reference/en/p5.Image/get.mdx | 362 +-
.../reference/en/p5.Image/getCurrentFrame.mdx | 105 +-
src/content/reference/en/p5.Image/height.mdx | 15 +-
.../reference/en/p5.Image/loadPixels.mdx | 204 +-
src/content/reference/en/p5.Image/mask.mdx | 96 +-
.../reference/en/p5.Image/numFrames.mdx | 102 +-
src/content/reference/en/p5.Image/pause.mdx | 108 +-
.../reference/en/p5.Image/pixelDensity.mdx | 59 +-
src/content/reference/en/p5.Image/pixels.mdx | 3 +-
src/content/reference/en/p5.Image/play.mdx | 108 +-
src/content/reference/en/p5.Image/reset.mdx | 96 +-
src/content/reference/en/p5.Image/resize.mdx | 273 +-
src/content/reference/en/p5.Image/save.mdx | 146 +-
src/content/reference/en/p5.Image/set.mdx | 403 +-
.../reference/en/p5.Image/setFrame.mdx | 137 +-
.../reference/en/p5.Image/updatePixels.mdx | 276 +-
src/content/reference/en/p5.Image/width.mdx | 16 +-
.../reference/en/p5.MediaElement/addCue.mdx | 41 +-
.../reference/en/p5.MediaElement/autoplay.mdx | 17 +-
.../en/p5.MediaElement/clearCues.mdx | 10 +-
.../reference/en/p5.MediaElement/connect.mdx | 18 +-
.../en/p5.MediaElement/disconnect.mdx | 7 +-
.../reference/en/p5.MediaElement/duration.mdx | 13 +-
.../en/p5.MediaElement/hideControls.mdx | 13 +-
.../reference/en/p5.MediaElement/loop.mdx | 10 +-
.../reference/en/p5.MediaElement/noLoop.mdx | 7 +-
.../reference/en/p5.MediaElement/onended.mdx | 20 +-
.../reference/en/p5.MediaElement/pause.mdx | 7 +-
.../reference/en/p5.MediaElement/play.mdx | 10 +-
.../en/p5.MediaElement/removeCue.mdx | 18 +-
.../en/p5.MediaElement/showControls.mdx | 8 +-
.../reference/en/p5.MediaElement/speed.mdx | 17 +-
.../reference/en/p5.MediaElement/src.mdx | 8 +-
.../reference/en/p5.MediaElement/stop.mdx | 7 +-
.../reference/en/p5.MediaElement/time.mdx | 17 +-
.../reference/en/p5.MediaElement/volume.mdx | 17 +-
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/amp.mdx | 21 +
src/content/reference/en/p5.Noise/setType.mdx | 23 -
.../en/{p5.Score => p5.Noise}/start.mdx | 9 +-
.../en/{p5.Score => p5.Noise}/stop.mdx | 9 +-
src/content/reference/en/p5.Noise/type.mdx | 19 +
.../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 | 72 +-
.../reference/en/p5.Oscillator/connect.mdx | 21 -
.../reference/en/p5.Oscillator/disconnect.mdx | 16 -
.../reference/en/p5.Oscillator/freq.mdx | 56 +-
.../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 | 12 +-
.../reference/en/p5.Oscillator/scale.mdx | 40 -
.../reference/en/p5.Oscillator/setType.mdx | 13 +-
.../reference/en/p5.Oscillator/start.mdx | 39 +-
.../reference/en/p5.Oscillator/stop.mdx | 14 +-
src/content/reference/en/p5.Panner/pan.mdx | 21 +
.../reference/en/p5.Panner3D/maxDist.mdx | 14 +-
.../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 | 25 -
.../reference/en/p5.Panner3D/positionX.mdx | 14 +-
.../reference/en/p5.Panner3D/positionY.mdx | 14 +-
.../reference/en/p5.Panner3D/positionZ.mdx | 14 +-
.../reference/en/p5.Panner3D/process.mdx | 12 +-
.../reference/en/p5.Panner3D/rollof.mdx | 24 -
.../reference/en/p5.Panner3D/rolloff.mdx | 19 +
src/content/reference/en/p5.Panner3D/set.mdx | 25 +-
.../reference/en/p5.Panner3D/setFalloff.mdx | 13 +-
.../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 | 12 -
.../reference/en/p5.PeakDetect/onPeak.mdx | 84 -
.../reference/en/p5.PeakDetect/update.mdx | 24 -
.../reference/en/p5.Phrase/sequence.mdx | 20 -
.../reference/en/p5.PitchShifter/shift.mdx | 19 +
.../reference/en/p5.PolySynth/AudioVoice.mdx | 16 -
.../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 | 19 -
.../reference/en/p5.PolySynth/play.mdx | 70 -
.../reference/en/p5.PolySynth/polyvalue.mdx | 15 -
.../reference/en/p5.PolySynth/setADSR.mdx | 49 -
.../reference/en/p5.PrintWriter/clear.mdx | 53 -
.../reference/en/p5.PrintWriter/print.mdx | 68 -
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 -
src/content/reference/en/p5.Reverb/drywet.mdx | 21 +
.../reference/en/p5.Reverb/process.mdx | 39 -
src/content/reference/en/p5.Reverb/set.mdx | 26 +-
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 -
.../reference/en/p5.Shader/copyToContext.mdx | 22 +-
.../reference/en/p5.Shader/inspectHooks.mdx | 24 +-
src/content/reference/en/p5.Shader/modify.mdx | 52 +-
.../reference/en/p5.Shader/setUniform.mdx | 24 +-
.../reference/en/p5.Shader/version.mdx | 35 +
.../reference/en/p5.SoundFile/addCue.mdx | 82 -
src/content/reference/en/p5.SoundFile/amp.mdx | 19 +
.../reference/en/p5.SoundFile/channels.mdx | 13 +-
.../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 | 11 +-
.../reference/en/p5.SoundFile/frames.mdx | 38 +-
.../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 | 12 +-
.../reference/en/p5.SoundFile/isPaused.mdx | 20 -
.../reference/en/p5.SoundFile/isPlaying.mdx | 12 +-
.../reference/en/p5.SoundFile/jump.mdx | 27 +-
.../reference/en/p5.SoundFile/loop.mdx | 66 +-
.../reference/en/p5.SoundFile/onended.mdx | 52 +-
src/content/reference/en/p5.SoundFile/pan.mdx | 58 -
.../reference/en/p5.SoundFile/pause.mdx | 61 +-
.../reference/en/p5.SoundFile/play.mdx | 36 +-
.../reference/en/p5.SoundFile/playMode.mdx | 56 -
.../reference/en/p5.SoundFile/rate.mdx | 55 +-
.../reference/en/p5.SoundFile/removeCue.mdx | 22 -
.../en/p5.SoundFile/reverseBuffer.mdx | 40 -
.../reference/en/p5.SoundFile/sampleRate.mdx | 12 +-
.../reference/en/p5.SoundFile/save.mdx | 43 -
.../reference/en/p5.SoundFile/setBuffer.mdx | 23 -
.../reference/en/p5.SoundFile/setLoop.mdx | 33 +-
.../reference/en/p5.SoundFile/setPath.mdx | 56 +-
.../reference/en/p5.SoundFile/setVolume.mdx | 40 -
.../reference/en/p5.SoundFile/start.mdx | 15 +
.../reference/en/p5.SoundFile/stop.mdx | 16 +-
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 | 81 +-
src/content/reference/en/p5.Table/addRow.mdx | 92 +-
.../reference/en/p5.Table/clearRows.mdx | 76 +-
src/content/reference/en/p5.Table/columns.mdx | 45 +-
src/content/reference/en/p5.Table/findRow.mdx | 91 +-
.../reference/en/p5.Table/findRows.mdx | 89 +-
src/content/reference/en/p5.Table/get.mdx | 74 +-
.../reference/en/p5.Table/getArray.mdx | 49 +-
.../reference/en/p5.Table/getColumn.mdx | 71 +-
.../reference/en/p5.Table/getColumnCount.mdx | 56 +-
src/content/reference/en/p5.Table/getNum.mdx | 68 +-
.../reference/en/p5.Table/getObject.mdx | 40 +-
src/content/reference/en/p5.Table/getRow.mdx | 59 +-
.../reference/en/p5.Table/getRowCount.mdx | 56 +-
src/content/reference/en/p5.Table/getRows.mdx | 94 +-
.../reference/en/p5.Table/getString.mdx | 92 +-
.../reference/en/p5.Table/matchRow.mdx | 72 +-
.../reference/en/p5.Table/matchRows.mdx | 67 +-
.../reference/en/p5.Table/removeColumn.mdx | 80 +-
.../reference/en/p5.Table/removeRow.mdx | 63 +-
.../reference/en/p5.Table/removeTokens.mdx | 76 +-
src/content/reference/en/p5.Table/rows.mdx | 13 +-
src/content/reference/en/p5.Table/set.mdx | 82 +-
src/content/reference/en/p5.Table/setNum.mdx | 73 +-
.../reference/en/p5.Table/setString.mdx | 83 +-
src/content/reference/en/p5.Table/trim.mdx | 75 +-
src/content/reference/en/p5.TableRow/get.mdx | 89 +-
.../reference/en/p5.TableRow/getNum.mdx | 92 +-
.../reference/en/p5.TableRow/getString.mdx | 93 +-
src/content/reference/en/p5.TableRow/set.mdx | 99 +-
.../reference/en/p5.TableRow/setNum.mdx | 102 +-
.../reference/en/p5.TableRow/setString.mdx | 102 +-
.../reference/en/p5.TypedDict/clear.mdx | 29 -
.../reference/en/p5.TypedDict/create.mdx | 43 -
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 | 54 +-
.../reference/en/p5.Vector/angleBetween.mdx | 23 +-
src/content/reference/en/p5.Vector/array.mdx | 19 +-
.../reference/en/p5.Vector/clampToZero.mdx | 32 -
src/content/reference/en/p5.Vector/copy.mdx | 19 +-
src/content/reference/en/p5.Vector/cross.mdx | 22 +-
src/content/reference/en/p5.Vector/dist.mdx | 139 +-
src/content/reference/en/p5.Vector/div.mdx | 92 +-
src/content/reference/en/p5.Vector/dot.mdx | 38 +-
src/content/reference/en/p5.Vector/equals.mdx | 40 +-
.../reference/en/p5.Vector/fromAngle.mdx | 33 +-
.../reference/en/p5.Vector/fromAngles.mdx | 40 +-
.../reference/en/p5.Vector/getValue.mdx | 43 +
.../reference/en/p5.Vector/heading.mdx | 16 +-
src/content/reference/en/p5.Vector/lerp.mdx | 48 +-
src/content/reference/en/p5.Vector/limit.mdx | 29 +-
src/content/reference/en/p5.Vector/mag.mdx | 16 +-
src/content/reference/en/p5.Vector/magSq.mdx | 19 +-
src/content/reference/en/p5.Vector/mult.mdx | 284 +-
.../reference/en/p5.Vector/normalize.mdx | 21 +-
.../reference/en/p5.Vector/random2D.mdx | 13 +-
.../reference/en/p5.Vector/random3D.mdx | 13 +-
.../reference/en/p5.Vector/reflect.mdx | 32 +-
src/content/reference/en/p5.Vector/rem.mdx | 46 +-
src/content/reference/en/p5.Vector/rotate.mdx | 27 +-
src/content/reference/en/p5.Vector/set.mdx | 31 +-
.../reference/en/p5.Vector/setHeading.mdx | 15 +-
src/content/reference/en/p5.Vector/setMag.mdx | 29 +-
.../reference/en/p5.Vector/setValue.mdx | 39 +
src/content/reference/en/p5.Vector/slerp.mdx | 34 +-
src/content/reference/en/p5.Vector/sub.mdx | 49 +-
.../reference/en/p5.Vector/toString.mdx | 10 +-
src/content/reference/en/p5.Vector/x.mdx | 9 +-
src/content/reference/en/p5.Vector/y.mdx | 9 +-
src/content/reference/en/p5.Vector/z.mdx | 9 +-
src/content/reference/en/p5.XML/addChild.mdx | 24 +-
.../reference/en/p5.XML/getAttributeCount.mdx | 19 +-
src/content/reference/en/p5.XML/getChild.mdx | 32 +-
.../reference/en/p5.XML/getChildren.mdx | 34 +-
.../reference/en/p5.XML/getContent.mdx | 29 +-
src/content/reference/en/p5.XML/getName.mdx | 16 +-
src/content/reference/en/p5.XML/getNum.mdx | 41 +-
src/content/reference/en/p5.XML/getParent.mdx | 22 +-
src/content/reference/en/p5.XML/getString.mdx | 41 +-
.../reference/en/p5.XML/hasAttribute.mdx | 26 +-
.../reference/en/p5.XML/hasChildren.mdx | 24 +-
.../reference/en/p5.XML/listAttributes.mdx | 16 +-
.../reference/en/p5.XML/listChildren.mdx | 22 +-
.../reference/en/p5.XML/removeChild.mdx | 29 +-
src/content/reference/en/p5.XML/serialize.mdx | 16 +-
.../reference/en/p5.XML/setAttribute.mdx | 28 +-
.../reference/en/p5.XML/setContent.mdx | 72 -
src/content/reference/en/p5.XML/setName.mdx | 21 +-
.../reference/en/p5.sound/getAudioContext.mdx | 18 +
.../reference/en/p5.sound/loadSound.mdx | 56 +
.../reference/en/p5.sound/p5.Amplitude.mdx | 73 +-
.../reference/en/p5.sound/p5.AudioIn.mdx | 159 +-
.../reference/en/p5.sound/p5.AudioVoice.mdx | 25 -
.../reference/en/p5.sound/p5.BandPass.mdx | 15 +-
.../reference/en/p5.sound/p5.Biquad.mdx | 92 +
.../reference/en/p5.sound/p5.Compressor.mdx | 82 -
.../reference/en/p5.sound/p5.Convolver.mdx | 127 -
.../reference/en/p5.sound/p5.Delay.mdx | 116 +-
.../reference/en/p5.sound/p5.Distortion.mdx | 70 -
src/content/reference/en/p5.sound/p5.EQ.mdx | 121 -
.../reference/en/p5.sound/p5.Effect.mdx | 81 -
.../reference/en/p5.sound/p5.Envelope.mdx | 215 +-
src/content/reference/en/p5.sound/p5.FFT.mdx | 182 +-
.../reference/en/p5.sound/p5.Filter.mdx | 157 -
src/content/reference/en/p5.sound/p5.Gain.mdx | 104 +-
.../reference/en/p5.sound/p5.HighPass.mdx | 15 +-
.../reference/en/p5.sound/p5.LowPass.mdx | 15 +-
.../reference/en/p5.sound/p5.MonoSynth.mdx | 106 -
.../reference/en/p5.sound/p5.Noise.mdx | 64 +-
.../reference/en/p5.sound/p5.OnsetDetect.mdx | 32 -
.../reference/en/p5.sound/p5.Oscillator.mdx | 150 +-
.../reference/en/p5.sound/p5.Panner.mdx | 51 +
.../reference/en/p5.sound/p5.Panner3D.mdx | 169 +-
src/content/reference/en/p5.sound/p5.Part.mdx | 132 -
.../reference/en/p5.sound/p5.PeakDetect.mdx | 157 -
.../reference/en/p5.sound/p5.Phrase.mdx | 91 -
.../reference/en/p5.sound/p5.PitchShifter.mdx | 54 +
.../reference/en/p5.sound/p5.PolySynth.mdx | 137 -
.../reference/en/p5.sound/p5.Pulse.mdx | 68 -
.../reference/en/p5.sound/p5.Reverb.mdx | 101 +-
.../reference/en/p5.sound/p5.SawOsc.mdx | 15 +-
.../reference/en/p5.sound/p5.Score.mdx | 51 -
.../reference/en/p5.sound/p5.SinOsc.mdx | 15 +-
.../reference/en/p5.sound/p5.SoundFile.mdx | 336 +-
.../reference/en/p5.sound/p5.SoundLoop.mdx | 127 -
.../en/p5.sound/p5.SoundRecorder.mdx | 108 -
.../reference/en/p5.sound/p5.SqrOsc.mdx | 15 +-
.../reference/en/p5.sound/p5.TriOsc.mdx | 15 +-
.../reference/en/p5.sound/setAudioContext.mdx | 21 +
.../reference/en/p5.sound/userStartAudio.mdx | 17 +
.../reference/en/p5.sound/userStopAudio.mdx | 15 +
src/content/reference/en/p5/HSB.mdx | 22 +
src/content/reference/en/p5/HSL.mdx | 16 +
src/content/reference/en/p5/HWB.mdx | 16 +
src/content/reference/en/p5/LAB.mdx | 16 +
src/content/reference/en/p5/LCH.mdx | 16 +
src/content/reference/en/p5/OKLAB.mdx | 16 +
src/content/reference/en/p5/OKLCH.mdx | 16 +
src/content/reference/en/p5/RGB.mdx | 16 +
src/content/reference/en/p5/RGBA.mdx | 16 +
src/content/reference/en/p5/RGBHDR.mdx | 16 +
src/content/reference/en/p5/abs.mdx | 16 +-
src/content/reference/en/p5/accelerationX.mdx | 11 +-
src/content/reference/en/p5/accelerationY.mdx | 11 +-
src/content/reference/en/p5/accelerationZ.mdx | 11 +-
src/content/reference/en/p5/acos.mdx | 16 +-
src/content/reference/en/p5/addElement.mdx | 19 +
src/content/reference/en/p5/alpha.mdx | 21 +-
src/content/reference/en/p5/ambientLight.mdx | 67 +-
.../reference/en/p5/ambientMaterial.mdx | 42 +-
src/content/reference/en/p5/angleMode.mdx | 19 +-
src/content/reference/en/p5/append.mdx | 45 -
src/content/reference/en/p5/applyMatrix.mdx | 87 +-
src/content/reference/en/p5/arc.mdx | 90 +-
src/content/reference/en/p5/arrayCopy.mdx | 92 -
src/content/reference/en/p5/asin.mdx | 16 +-
src/content/reference/en/p5/atan.mdx | 16 +-
src/content/reference/en/p5/atan2.mdx | 23 +-
src/content/reference/en/p5/background.mdx | 91 +-
.../reference/en/p5/baseColorShader.mdx | 142 +-
.../reference/en/p5/baseFilterShader.mdx | 97 +
.../reference/en/p5/baseMaterialShader.mdx | 316 +-
.../reference/en/p5/baseNormalShader.mdx | 150 +-
.../reference/en/p5/baseStrokeShader.mdx | 228 +-
src/content/reference/en/p5/beginClip.mdx | 18 +-
src/content/reference/en/p5/beginContour.mdx | 15 +-
src/content/reference/en/p5/beginGeometry.mdx | 278 -
src/content/reference/en/p5/beginShape.mdx | 78 +-
src/content/reference/en/p5/bezier.mdx | 57 +-
src/content/reference/en/p5/bezierDetail.mdx | 118 -
src/content/reference/en/p5/bezierOrder.mdx | 102 +
src/content/reference/en/p5/bezierPoint.mdx | 46 +-
src/content/reference/en/p5/bezierTangent.mdx | 46 +-
src/content/reference/en/p5/bezierVertex.mdx | 169 +-
src/content/reference/en/p5/blend.mdx | 91 +-
src/content/reference/en/p5/blendMode.mdx | 351 +-
src/content/reference/en/p5/blue.mdx | 28 +-
src/content/reference/en/p5/boolean.mdx | 15 +-
src/content/reference/en/p5/box.mdx | 51 +-
src/content/reference/en/p5/brightness.mdx | 28 +-
src/content/reference/en/p5/buildGeometry.mdx | 16 +-
src/content/reference/en/p5/byte.mdx | 15 +-
src/content/reference/en/p5/camera.mdx | 87 +-
src/content/reference/en/p5/ceil.mdx | 16 +-
src/content/reference/en/p5/char.mdx | 15 +-
src/content/reference/en/p5/circle.mdx | 30 +-
src/content/reference/en/p5/class.mdx | 6 +-
src/content/reference/en/p5/clear.mdx | 84 +-
src/content/reference/en/p5/clearDepth.mdx | 21 +-
src/content/reference/en/p5/clearStorage.mdx | 5 +-
src/content/reference/en/p5/clip.mdx | 25 +-
.../en/{p5.PrintWriter => p5}/close.mdx | 12 +-
src/content/reference/en/p5/color.mdx | 65 +-
src/content/reference/en/p5/colorMode.mdx | 313 +-
src/content/reference/en/p5/concat.mdx | 51 -
src/content/reference/en/p5/cone.mdx | 51 +-
src/content/reference/en/p5/console.mdx | 18 +-
src/content/reference/en/p5/constants/ADD.mdx | 5 +-
src/content/reference/en/p5/constants/ALT.mdx | 5 +-
.../reference/en/p5/constants/ARROW.mdx | 5 +-
.../reference/en/p5/constants/AUTO.mdx | 13 +-
.../reference/en/p5/constants/AXES.mdx | 5 +-
.../reference/en/p5/constants/BACKSPACE.mdx | 5 +-
.../reference/en/p5/constants/BASELINE.mdx | 5 +-
.../reference/en/p5/constants/BEVEL.mdx | 5 +-
.../reference/en/p5/constants/BEZIER.mdx | 5 +-
.../reference/en/p5/constants/BLEND.mdx | 5 +-
.../reference/en/p5/constants/BLUR.mdx | 5 +-
.../reference/en/p5/constants/BOLD.mdx | 5 +-
.../reference/en/p5/constants/BOLDITALIC.mdx | 5 +-
.../reference/en/p5/constants/BOTTOM.mdx | 5 +-
.../reference/en/p5/constants/BURN.mdx | 5 +-
.../reference/en/p5/constants/CENTER.mdx | 5 +-
.../reference/en/p5/constants/CHAR.mdx | 5 +-
.../reference/en/p5/constants/CHORD.mdx | 5 +-
.../reference/en/p5/constants/CLAMP.mdx | 5 +-
.../reference/en/p5/constants/CLOSE.mdx | 5 +-
.../reference/en/p5/constants/CONTAIN.mdx | 5 +-
.../reference/en/p5/constants/CONTROL.mdx | 5 +-
.../reference/en/p5/constants/CORNER.mdx | 5 +-
.../reference/en/p5/constants/CORNERS.mdx | 5 +-
.../reference/en/p5/constants/COVER.mdx | 5 +-
.../reference/en/p5/constants/CROSS.mdx | 5 +-
.../reference/en/p5/constants/CURVE.mdx | 5 +-
.../reference/en/p5/constants/DARKEST.mdx | 5 +-
.../reference/en/p5/constants/DEGREES.mdx | 56 -
.../constants/{RADIANS.mdx => DEG_TO_RAD.mdx} | 8 +-
.../reference/en/p5/constants/DELETE.mdx | 5 +-
.../reference/en/p5/constants/DIFFERENCE.mdx | 5 +-
.../reference/en/p5/constants/DILATE.mdx | 5 +-
.../reference/en/p5/constants/DODGE.mdx | 5 +-
.../reference/en/p5/constants/DOWN_ARROW.mdx | 5 +-
.../reference/en/p5/constants/EMPTY_PATH.mdx | 16 +
.../reference/en/p5/constants/ENTER.mdx | 5 +-
.../reference/en/p5/constants/ERODE.mdx | 5 +-
.../reference/en/p5/constants/ESCAPE.mdx | 5 +-
.../reference/en/p5/constants/EXCLUDE.mdx | 18 +
.../reference/en/p5/constants/EXCLUSION.mdx | 5 +-
.../reference/en/p5/constants/FALLBACK.mdx | 5 +-
.../reference/en/p5/constants/FILL.mdx | 5 +-
.../reference/en/p5/constants/FLAT.mdx | 5 +-
.../reference/en/p5/constants/FLOAT.mdx | 5 +-
.../en/p5/constants/{RGB.mdx => FULL.mdx} | 8 +-
.../reference/en/p5/constants/GRAY.mdx | 5 +-
.../reference/en/p5/constants/GRID.mdx | 5 +-
.../reference/en/p5/constants/HALF_FLOAT.mdx | 5 +-
.../reference/en/p5/constants/HALF_PI.mdx | 4 +-
.../reference/en/p5/constants/HAND.mdx | 5 +-
.../reference/en/p5/constants/HARD_LIGHT.mdx | 5 +-
src/content/reference/en/p5/constants/HSB.mdx | 21 -
.../reference/en/p5/constants/IMAGE.mdx | 5 +-
.../reference/en/p5/constants/IMMEDIATE.mdx | 5 +-
.../reference/en/p5/constants/INCLUDE.mdx | 16 +
.../reference/en/p5/constants/INVERT.mdx | 5 +-
.../reference/en/p5/constants/ITALIC.mdx | 5 +-
.../reference/en/p5/constants/LABEL.mdx | 5 +-
.../reference/en/p5/constants/LANDSCAPE.mdx | 5 +-
.../reference/en/p5/constants/LEFT.mdx | 5 +-
.../reference/en/p5/constants/LEFT_ARROW.mdx | 5 +-
.../reference/en/p5/constants/LIGHTEST.mdx | 5 +-
.../reference/en/p5/constants/LINEAR.mdx | 5 +-
.../reference/en/p5/constants/LINES.mdx | 5 +-
.../reference/en/p5/constants/LINE_LOOP.mdx | 5 +-
.../reference/en/p5/constants/LINE_STRIP.mdx | 4 +-
.../reference/en/p5/constants/MIRROR.mdx | 5 +-
.../reference/en/p5/constants/MITER.mdx | 5 +-
.../reference/en/p5/constants/MOVE.mdx | 5 +-
.../reference/en/p5/constants/MULTIPLY.mdx | 5 +-
.../reference/en/p5/constants/NEAREST.mdx | 5 +-
.../reference/en/p5/constants/NORMAL.mdx | 5 +-
.../reference/en/p5/constants/OPAQUE.mdx | 5 +-
.../reference/en/p5/constants/OPEN.mdx | 5 +-
.../reference/en/p5/constants/OPTION.mdx | 5 +-
.../reference/en/p5/constants/OVERLAY.mdx | 5 +-
src/content/reference/en/p5/constants/P2D.mdx | 7 +-
.../en/p5/constants/{RGBA.mdx => PATH.mdx} | 9 +-
src/content/reference/en/p5/constants/PI.mdx | 4 +-
src/content/reference/en/p5/constants/PIE.mdx | 5 +-
.../reference/en/p5/constants/POINTS.mdx | 5 +-
.../reference/en/p5/constants/PORTRAIT.mdx | 5 +-
.../reference/en/p5/constants/POSTERIZE.mdx | 5 +-
.../reference/en/p5/constants/PROJECT.mdx | 5 +-
.../reference/en/p5/constants/QUADRATIC.mdx | 5 +-
.../reference/en/p5/constants/QUADS.mdx | 5 +-
.../reference/en/p5/constants/QUAD_STRIP.mdx | 5 +-
.../reference/en/p5/constants/QUARTER_PI.mdx | 4 +-
.../reference/en/p5/constants/RADIUS.mdx | 5 +-
.../reference/en/p5/constants/REMOVE.mdx | 5 +-
.../reference/en/p5/constants/REPEAT.mdx | 5 +-
.../reference/en/p5/constants/REPLACE.mdx | 5 +-
.../reference/en/p5/constants/RETURN.mdx | 5 +-
.../reference/en/p5/constants/RIGHT.mdx | 5 +-
.../reference/en/p5/constants/RIGHT_ARROW.mdx | 5 +-
.../reference/en/p5/constants/ROUND.mdx | 5 +-
.../reference/en/p5/constants/SCREEN.mdx | 5 +-
.../reference/en/p5/constants/SHIFT.mdx | 5 +-
.../en/p5/constants/{HSL.mdx => SIMPLE.mdx} | 8 +-
.../reference/en/p5/constants/SMOOTH.mdx | 5 +-
.../reference/en/p5/constants/SOFT_LIGHT.mdx | 5 +-
.../reference/en/p5/constants/SQUARE.mdx | 5 +-
.../reference/en/p5/constants/STROKE.mdx | 5 +-
.../reference/en/p5/constants/SUBTRACT.mdx | 5 +-
src/content/reference/en/p5/constants/TAB.mdx | 5 +-
src/content/reference/en/p5/constants/TAU.mdx | 4 +-
.../reference/en/p5/constants/TESS.mdx | 5 +-
.../reference/en/p5/constants/TEXT.mdx | 5 +-
.../reference/en/p5/constants/TEXTURE.mdx | 5 +-
.../reference/en/p5/constants/THRESHOLD.mdx | 5 +-
src/content/reference/en/p5/constants/TOP.mdx | 5 +-
.../reference/en/p5/constants/TRIANGLES.mdx | 5 +-
.../en/p5/constants/TRIANGLE_FAN.mdx | 5 +-
.../en/p5/constants/TRIANGLE_STRIP.mdx | 5 +-
.../reference/en/p5/constants/TWO_PI.mdx | 4 +-
.../en/p5/constants/UNSIGNED_BYTE.mdx | 5 +-
.../en/p5/constants/UNSIGNED_INT.mdx | 5 +-
.../reference/en/p5/constants/UP_ARROW.mdx | 5 +-
.../reference/en/p5/constants/VERSION.mdx | 7 +-
.../reference/en/p5/constants/WAIT.mdx | 5 +-
.../reference/en/p5/constants/WEBGL.mdx | 71 +-
.../reference/en/p5/constants/WEBGL2.mdx | 10 +-
.../reference/en/p5/constants/WORD.mdx | 5 +-
src/content/reference/en/p5/constrain.mdx | 33 +-
src/content/reference/en/p5/copy.mdx | 52 +-
src/content/reference/en/p5/cos.mdx | 26 +-
src/content/reference/en/p5/createA.mdx | 37 +-
src/content/reference/en/p5/createAudio.mdx | 67 +-
src/content/reference/en/p5/createButton.mdx | 25 +-
src/content/reference/en/p5/createCamera.mdx | 8 +-
src/content/reference/en/p5/createCanvas.mdx | 52 +-
src/content/reference/en/p5/createCapture.mdx | 52 +-
.../reference/en/p5/createCheckbox.mdx | 30 +-
.../reference/en/p5/createColorPicker.mdx | 39 +-
.../reference/en/p5/createConvolver.mdx | 75 -
src/content/reference/en/p5/createDiv.mdx | 19 +-
src/content/reference/en/p5/createElement.mdx | 25 +-
.../reference/en/p5/createFileInput.mdx | 25 +-
.../reference/en/p5/createFilterShader.mdx | 53 +-
.../reference/en/p5/createFramebuffer.mdx | 89 +-
.../reference/en/p5/createGraphics.mdx | 39 +-
src/content/reference/en/p5/createImage.mdx | 23 +-
src/content/reference/en/p5/createImg.mdx | 30 +-
src/content/reference/en/p5/createInput.mdx | 25 +-
src/content/reference/en/p5/createModel.mdx | 148 +-
.../reference/en/p5/createNumberDict.mdx | 54 -
src/content/reference/en/p5/createP.mdx | 18 +-
src/content/reference/en/p5/createRadio.mdx | 72 +-
src/content/reference/en/p5/createSelect.mdx | 70 +-
src/content/reference/en/p5/createShader.mdx | 71 +-
src/content/reference/en/p5/createSlider.mdx | 41 +-
src/content/reference/en/p5/createSpan.mdx | 19 +-
.../reference/en/p5/createStringDict.mdx | 53 -
src/content/reference/en/p5/createVector.mdx | 38 +-
src/content/reference/en/p5/createVideo.mdx | 30 +-
src/content/reference/en/p5/createWriter.mdx | 29 +-
src/content/reference/en/p5/cursor.mdx | 36 +-
src/content/reference/en/p5/curveDetail.mdx | 77 +-
.../reference/en/p5/curveTightness.mdx | 74 -
src/content/reference/en/p5/cylinder.mdx | 62 +-
src/content/reference/en/p5/day.mdx | 11 +-
src/content/reference/en/p5/debugMode.mdx | 107 +-
src/content/reference/en/p5/degrees.mdx | 16 +-
src/content/reference/en/p5/deltaTime.mdx | 3 +-
src/content/reference/en/p5/describe.mdx | 27 +-
.../reference/en/p5/describeElement.mdx | 34 +-
src/content/reference/en/p5/deviceMoved.mdx | 13 +-
.../reference/en/p5/deviceOrientation.mdx | 11 +-
src/content/reference/en/p5/deviceShaken.mdx | 11 +-
src/content/reference/en/p5/deviceTurned.mdx | 5 +-
.../reference/en/p5/directionalLight.mdx | 66 +-
.../reference/en/p5/disableFriendlyErrors.mdx | 3 +-
.../reference/en/p5/displayDensity.mdx | 11 +-
src/content/reference/en/p5/displayHeight.mdx | 3 +-
src/content/reference/en/p5/displayWidth.mdx | 3 +-
src/content/reference/en/p5/dist.mdx | 132 +-
src/content/reference/en/p5/doubleClicked.mdx | 39 +-
src/content/reference/en/p5/draw.mdx | 12 +-
.../reference/en/p5/drawingContext.mdx | 5 +-
src/content/reference/en/p5/ellipse.mdx | 46 +-
src/content/reference/en/p5/ellipseMode.mdx | 15 +-
src/content/reference/en/p5/ellipsoid.mdx | 57 +-
.../reference/en/p5/emissiveMaterial.mdx | 50 +-
src/content/reference/en/p5/endClip.mdx | 11 +-
src/content/reference/en/p5/endContour.mdx | 26 +-
src/content/reference/en/p5/endGeometry.mdx | 282 -
src/content/reference/en/p5/endShape.mdx | 64 +-
src/content/reference/en/p5/erase.mdx | 31 +-
.../reference/en/p5/exitPointerLock.mdx | 9 +-
src/content/reference/en/p5/exp.mdx | 22 +-
src/content/reference/en/p5/fill.mdx | 63 +-
src/content/reference/en/p5/filter.mdx | 122 +-
src/content/reference/en/p5/float.mdx | 15 +-
src/content/reference/en/p5/floor.mdx | 22 +-
src/content/reference/en/p5/focused.mdx | 3 +-
src/content/reference/en/p5/fontAscent.mdx | 70 +
src/content/reference/en/p5/fontBounds.mdx | 100 +
src/content/reference/en/p5/fontDescent.mdx | 70 +
src/content/reference/en/p5/fontWidth.mdx | 72 +
src/content/reference/en/p5/for.mdx | 79 +-
src/content/reference/en/p5/fract.mdx | 16 +-
src/content/reference/en/p5/frameCount.mdx | 3 +-
src/content/reference/en/p5/frameRate.mdx | 16 +-
src/content/reference/en/p5/freeGeometry.mdx | 13 +-
src/content/reference/en/p5/freqToMidi.mdx | 26 -
src/content/reference/en/p5/frustum.mdx | 78 +-
src/content/reference/en/p5/fullscreen.mdx | 18 +-
src/content/reference/en/p5/function.mdx | 6 +-
src/content/reference/en/p5/get.mdx | 52 +-
.../reference/en/p5/getAudioContext.mdx | 53 -
src/content/reference/en/p5/getItem.mdx | 16 +-
.../reference/en/p5/getOutputVolume.mdx | 22 -
.../reference/en/p5/getTargetFrameRate.mdx | 8 +-
src/content/reference/en/p5/getURL.mdx | 14 +-
src/content/reference/en/p5/getURLParams.mdx | 8 +-
src/content/reference/en/p5/getURLPath.mdx | 8 +-
src/content/reference/en/p5/green.mdx | 28 +-
src/content/reference/en/p5/gridOutput.mdx | 20 +-
src/content/reference/en/p5/height.mdx | 3 +-
src/content/reference/en/p5/hex.mdx | 23 +-
src/content/reference/en/p5/hour.mdx | 11 +-
src/content/reference/en/p5/httpDo.mdx | 91 +-
src/content/reference/en/p5/httpGet.mdx | 104 +-
src/content/reference/en/p5/httpPost.mdx | 91 +-
src/content/reference/en/p5/hue.mdx | 25 +-
src/content/reference/en/p5/if.mdx | 53 +-
src/content/reference/en/p5/image.mdx | 199 +-
src/content/reference/en/p5/imageLight.mdx | 21 +-
src/content/reference/en/p5/imageMode.mdx | 38 +-
src/content/reference/en/p5/imageShader.mdx | 165 +
src/content/reference/en/p5/int.mdx | 15 +-
src/content/reference/en/p5/isLooping.mdx | 10 +-
src/content/reference/en/p5/join.mdx | 67 -
src/content/reference/en/p5/key.mdx | 3 +-
src/content/reference/en/p5/keyCode.mdx | 60 +-
src/content/reference/en/p5/keyIsDown.mdx | 30 +-
src/content/reference/en/p5/keyIsPressed.mdx | 11 +-
src/content/reference/en/p5/keyPressed.mdx | 42 +-
src/content/reference/en/p5/keyReleased.mdx | 42 +-
src/content/reference/en/p5/keyTyped.mdx | 39 +-
src/content/reference/en/p5/lerp.mdx | 30 +-
src/content/reference/en/p5/lerpColor.mdx | 38 +-
src/content/reference/en/p5/let.mdx | 25 +-
src/content/reference/en/p5/lightFalloff.mdx | 27 +-
src/content/reference/en/p5/lightness.mdx | 28 +-
src/content/reference/en/p5/lights.mdx | 5 +-
src/content/reference/en/p5/line.mdx | 37 +-
.../reference/en/p5/linePerspective.mdx | 38 +-
src/content/reference/en/p5/loadBlob.mdx | 75 +
src/content/reference/en/p5/loadBytes.mdx | 90 +-
.../reference/en/p5/loadFilterShader.mdx | 62 +
src/content/reference/en/p5/loadFont.mdx | 160 +-
src/content/reference/en/p5/loadImage.mdx | 83 +-
src/content/reference/en/p5/loadJSON.mdx | 107 +-
src/content/reference/en/p5/loadModel.mdx | 202 +-
src/content/reference/en/p5/loadPixels.mdx | 56 +-
src/content/reference/en/p5/loadShader.mdx | 79 +-
src/content/reference/en/p5/loadSound.mdx | 75 -
src/content/reference/en/p5/loadStrings.mdx | 89 +-
src/content/reference/en/p5/loadTable.mdx | 131 +-
src/content/reference/en/p5/loadXML.mdx | 94 +-
src/content/reference/en/p5/log.mdx | 16 +-
src/content/reference/en/p5/loop.mdx | 5 +-
src/content/reference/en/p5/mag.mdx | 23 +-
src/content/reference/en/p5/map.mdx | 55 +-
src/content/reference/en/p5/match.mdx | 88 -
src/content/reference/en/p5/matchAll.mdx | 104 -
src/content/reference/en/p5/max.mdx | 18 +-
src/content/reference/en/p5/metalness.mdx | 19 +-
src/content/reference/en/p5/midiToFreq.mdx | 63 -
src/content/reference/en/p5/millis.mdx | 17 +-
src/content/reference/en/p5/min.mdx | 18 +-
src/content/reference/en/p5/minute.mdx | 11 +-
src/content/reference/en/p5/model.mdx | 20 +-
src/content/reference/en/p5/month.mdx | 11 +-
src/content/reference/en/p5/mouseButton.mdx | 40 +-
src/content/reference/en/p5/mouseClicked.mdx | 51 +-
src/content/reference/en/p5/mouseDragged.mdx | 51 +-
.../reference/en/p5/mouseIsPressed.mdx | 15 +-
src/content/reference/en/p5/mouseMoved.mdx | 40 +-
src/content/reference/en/p5/mousePressed.mdx | 51 +-
src/content/reference/en/p5/mouseReleased.mdx | 49 +-
src/content/reference/en/p5/mouseWheel.mdx | 41 +-
src/content/reference/en/p5/mouseX.mdx | 15 +-
src/content/reference/en/p5/mouseY.mdx | 15 +-
src/content/reference/en/p5/movedX.mdx | 7 +-
src/content/reference/en/p5/movedY.mdx | 7 +-
src/content/reference/en/p5/nf.mdx | 41 +-
src/content/reference/en/p5/nfc.mdx | 30 +-
src/content/reference/en/p5/nfp.mdx | 41 +-
src/content/reference/en/p5/nfs.mdx | 41 +-
src/content/reference/en/p5/noCanvas.mdx | 5 +-
src/content/reference/en/p5/noCursor.mdx | 8 +-
src/content/reference/en/p5/noDebugMode.mdx | 9 +-
src/content/reference/en/p5/noErase.mdx | 5 +-
src/content/reference/en/p5/noFill.mdx | 5 +-
src/content/reference/en/p5/noLights.mdx | 5 +-
src/content/reference/en/p5/noLoop.mdx | 5 +-
src/content/reference/en/p5/noSmooth.mdx | 16 +-
src/content/reference/en/p5/noStroke.mdx | 5 +-
src/content/reference/en/p5/noTint.mdx | 13 +-
src/content/reference/en/p5/noise.mdx | 42 +-
src/content/reference/en/p5/noiseDetail.mdx | 24 +-
src/content/reference/en/p5/noiseSeed.mdx | 13 +-
src/content/reference/en/p5/norm.mdx | 30 +-
src/content/reference/en/p5/normal.mdx | 33 +-
.../reference/en/p5/normalMaterial.mdx | 5 +-
src/content/reference/en/p5/orbitControl.mdx | 64 +-
src/content/reference/en/p5/ortho.mdx | 75 +-
src/content/reference/en/p5/outputVolume.mdx | 48 -
src/content/reference/en/p5/p5.Camera.mdx | 50 +-
src/content/reference/en/p5/p5.Color.mdx | 18 +-
src/content/reference/en/p5/p5.Element.mdx | 422 +-
src/content/reference/en/p5/p5.File.mdx | 20 +-
src/content/reference/en/p5/p5.Font.mdx | 179 +-
.../reference/en/p5/p5.Framebuffer.mdx | 120 +-
src/content/reference/en/p5/p5.Geometry.mdx | 271 +-
src/content/reference/en/p5/p5.Graphics.mdx | 117 +-
src/content/reference/en/p5/p5.Image.mdx | 45 +-
.../reference/en/p5/p5.MediaElement.mdx | 32 +-
src/content/reference/en/p5/p5.NumberDict.mdx | 60 -
.../reference/en/p5/p5.PrintWriter.mdx | 52 +-
src/content/reference/en/p5/p5.Renderer.mdx | 31 -
src/content/reference/en/p5/p5.Shader.mdx | 99 +-
src/content/reference/en/p5/p5.StringDict.mdx | 12 -
src/content/reference/en/p5/p5.Table.mdx | 160 +-
src/content/reference/en/p5/p5.TableRow.mdx | 59 +-
src/content/reference/en/p5/p5.TypedDict.mdx | 63 -
src/content/reference/en/p5/p5.Vector.mdx | 171 +-
src/content/reference/en/p5/p5.XML.mdx | 46 +-
src/content/reference/en/p5/p5.mdx | 25 +-
.../reference/en/p5/pAccelerationX.mdx | 9 +-
.../reference/en/p5/pAccelerationY.mdx | 9 +-
.../reference/en/p5/pAccelerationZ.mdx | 9 +-
src/content/reference/en/p5/pRotationX.mdx | 3 +-
src/content/reference/en/p5/pRotationY.mdx | 3 +-
src/content/reference/en/p5/pRotationZ.mdx | 3 +-
src/content/reference/en/p5/paletteLerp.mdx | 25 +-
src/content/reference/en/p5/panorama.mdx | 23 +-
src/content/reference/en/p5/perspective.mdx | 54 +-
src/content/reference/en/p5/pixelDensity.mdx | 18 +-
src/content/reference/en/p5/pixels.mdx | 3 +-
src/content/reference/en/p5/plane.mdx | 42 +-
src/content/reference/en/p5/pmouseX.mdx | 7 +-
src/content/reference/en/p5/pmouseY.mdx | 7 +-
src/content/reference/en/p5/point.mdx | 27 +-
src/content/reference/en/p5/pointLight.mdx | 67 +-
src/content/reference/en/p5/pop.mdx | 14 +-
src/content/reference/en/p5/pow.mdx | 23 +-
src/content/reference/en/p5/preload.mdx | 67 -
src/content/reference/en/p5/print.mdx | 66 +-
src/content/reference/en/p5/push.mdx | 14 +-
src/content/reference/en/p5/pwinMouseX.mdx | 7 +-
src/content/reference/en/p5/pwinMouseY.mdx | 7 +-
src/content/reference/en/p5/quad.mdx | 73 +-
.../reference/en/p5/quadraticVertex.mdx | 300 -
src/content/reference/en/p5/radians.mdx | 16 +-
src/content/reference/en/p5/random.mdx | 24 +-
.../reference/en/p5/randomGaussian.mdx | 27 +-
src/content/reference/en/p5/randomSeed.mdx | 13 +-
src/content/reference/en/p5/rect.mdx | 61 +-
src/content/reference/en/p5/rectMode.mdx | 15 +-
src/content/reference/en/p5/red.mdx | 28 +-
src/content/reference/en/p5/redraw.mdx | 16 +-
src/content/reference/en/p5/remove.mdx | 143 +-
.../reference/en/p5/removeElements.mdx | 5 +-
src/content/reference/en/p5/removeItem.mdx | 13 +-
.../reference/en/p5/requestPointerLock.mdx | 9 +-
src/content/reference/en/p5/resetMatrix.mdx | 8 +-
src/content/reference/en/p5/resetShader.mdx | 15 +-
src/content/reference/en/p5/resizeCanvas.mdx | 46 +-
src/content/reference/en/p5/reverse.mdx | 40 -
src/content/reference/en/p5/rotate.mdx | 25 +-
src/content/reference/en/p5/rotateX.mdx | 16 +-
src/content/reference/en/p5/rotateY.mdx | 16 +-
src/content/reference/en/p5/rotateZ.mdx | 16 +-
src/content/reference/en/p5/rotationX.mdx | 3 +-
src/content/reference/en/p5/rotationY.mdx | 3 +-
src/content/reference/en/p5/rotationZ.mdx | 3 +-
src/content/reference/en/p5/round.mdx | 25 +-
src/content/reference/en/p5/sampleRate.mdx | 23 -
src/content/reference/en/p5/saturation.mdx | 27 +-
src/content/reference/en/p5/save.mdx | 236 +-
src/content/reference/en/p5/saveCanvas.mdx | 32 +-
src/content/reference/en/p5/saveFrames.mdx | 68 +-
src/content/reference/en/p5/saveGif.mdx | 55 +-
src/content/reference/en/p5/saveJSON.mdx | 34 +-
.../en/{p5.Geometry => p5}/saveObj.mdx | 23 +-
src/content/reference/en/p5/saveSound.mdx | 32 -
.../en/{p5.Geometry => p5}/saveStl.mdx | 39 +-
src/content/reference/en/p5/saveStrings.mdx | 43 +-
src/content/reference/en/p5/saveTable.mdx | 78 +-
src/content/reference/en/p5/scale.mdx | 29 +-
src/content/reference/en/p5/screenToWorld.mdx | 68 +
src/content/reference/en/p5/second.mdx | 11 +-
src/content/reference/en/p5/select.mdx | 32 +-
src/content/reference/en/p5/selectAll.mdx | 32 +-
src/content/reference/en/p5/set.mdx | 40 +-
src/content/reference/en/p5/setAttributes.mdx | 19 +-
src/content/reference/en/p5/setBPM.mdx | 26 -
src/content/reference/en/p5/setCamera.mdx | 13 +-
.../reference/en/p5/setMoveThreshold.mdx | 21 +-
.../reference/en/p5/setShakeThreshold.mdx | 19 +-
src/content/reference/en/p5/setup.mdx | 18 +-
src/content/reference/en/p5/shader.mdx | 242 +-
src/content/reference/en/p5/shearX.mdx | 16 +-
src/content/reference/en/p5/shearY.mdx | 16 +-
src/content/reference/en/p5/shininess.mdx | 13 +-
src/content/reference/en/p5/shorten.mdx | 41 -
src/content/reference/en/p5/shuffle.mdx | 32 +-
src/content/reference/en/p5/sin.mdx | 22 +-
src/content/reference/en/p5/smooth.mdx | 15 +-
src/content/reference/en/p5/sort.mdx | 60 -
src/content/reference/en/p5/soundFormats.mdx | 48 -
src/content/reference/en/p5/soundOut.mdx | 23 -
src/content/reference/en/p5/specularColor.mdx | 56 +-
.../reference/en/p5/specularMaterial.mdx | 53 +-
src/content/reference/en/p5/sphere.mdx | 33 +-
src/content/reference/en/p5/splice.mdx | 55 -
.../reference/en/p5/{curve.mdx => spline.mdx} | 79 +-
.../en/p5/{curvePoint.mdx => splinePoint.mdx} | 78 +-
.../reference/en/p5/splineProperties.mdx | 32 +
.../reference/en/p5/splineProperty.mdx | 92 +
.../{curveTangent.mdx => splineTangent.mdx} | 82 +-
.../p5/{curveVertex.mdx => splineVertex.mdx} | 205 +-
src/content/reference/en/p5/split.mdx | 84 -
src/content/reference/en/p5/splitTokens.mdx | 32 +-
src/content/reference/en/p5/spotLight.mdx | 166 +-
src/content/reference/en/p5/sq.mdx | 16 +-
src/content/reference/en/p5/sqrt.mdx | 16 +-
src/content/reference/en/p5/square.mdx | 65 +-
src/content/reference/en/p5/storeItem.mdx | 20 +-
src/content/reference/en/p5/str.mdx | 16 +-
src/content/reference/en/p5/stroke.mdx | 65 +-
src/content/reference/en/p5/strokeCap.mdx | 15 +-
src/content/reference/en/p5/strokeJoin.mdx | 15 +-
src/content/reference/en/p5/strokeMode.mdx | 105 +
src/content/reference/en/p5/strokeShader.mdx | 185 +
src/content/reference/en/p5/strokeWeight.mdx | 15 +-
src/content/reference/en/p5/subset.mdx | 56 -
src/content/reference/en/p5/tan.mdx | 22 +-
src/content/reference/en/p5/text.mdx | 146 +-
src/content/reference/en/p5/textAlign.mdx | 34 +-
src/content/reference/en/p5/textAscent.mdx | 77 +-
src/content/reference/en/p5/textBounds.mdx | 97 +
src/content/reference/en/p5/textDescent.mdx | 77 +-
src/content/reference/en/p5/textDirection.mdx | 81 +
src/content/reference/en/p5/textFont.mdx | 49 +-
src/content/reference/en/p5/textLeading.mdx | 23 +-
src/content/reference/en/p5/textOutput.mdx | 20 +-
.../reference/en/p5/textProperties.mdx | 44 +
src/content/reference/en/p5/textProperty.mdx | 92 +
src/content/reference/en/p5/textSize.mdx | 64 +-
src/content/reference/en/p5/textStyle.mdx | 30 +-
src/content/reference/en/p5/textWeight.mdx | 103 +
src/content/reference/en/p5/textWidth.mdx | 74 +-
src/content/reference/en/p5/textWrap.mdx | 32 +-
src/content/reference/en/p5/texture.mdx | 35 +-
src/content/reference/en/p5/textureMode.mdx | 44 +-
src/content/reference/en/p5/textureWrap.mdx | 68 +-
src/content/reference/en/p5/tint.mdx | 82 +-
src/content/reference/en/p5/torus.mdx | 42 +-
src/content/reference/en/p5/touchEnded.mdx | 193 -
src/content/reference/en/p5/touchMoved.mdx | 195 -
src/content/reference/en/p5/touchStarted.mdx | 194 -
src/content/reference/en/p5/touches.mdx | 13 +-
src/content/reference/en/p5/translate.mdx | 25 +-
src/content/reference/en/p5/triangle.mdx | 50 +-
src/content/reference/en/p5/trim.mdx | 110 -
src/content/reference/en/p5/turnAxis.mdx | 9 +-
src/content/reference/en/p5/types/Array.mdx | 23 +-
src/content/reference/en/p5/types/Boolean.mdx | 56 +-
src/content/reference/en/p5/types/Number.mdx | 77 +-
src/content/reference/en/p5/types/Object.mdx | 5 +-
src/content/reference/en/p5/types/String.mdx | 90 +-
src/content/reference/en/p5/unchar.mdx | 15 +-
src/content/reference/en/p5/unhex.mdx | 15 +-
src/content/reference/en/p5/updatePixels.mdx | 99 +-
.../reference/en/p5/userStartAudio.mdx | 96 -
src/content/reference/en/p5/vertex.mdx | 102 +-
.../reference/en/p5/vertexProperty.mdx | 205 +
src/content/reference/en/p5/webglVersion.mdx | 35 +-
src/content/reference/en/p5/while.mdx | 25 +-
src/content/reference/en/p5/width.mdx | 3 +-
src/content/reference/en/p5/winMouseX.mdx | 7 +-
src/content/reference/en/p5/winMouseY.mdx | 7 +-
src/content/reference/en/p5/windowHeight.mdx | 3 +-
src/content/reference/en/p5/windowResized.mdx | 42 +-
src/content/reference/en/p5/windowWidth.mdx | 3 +-
src/content/reference/en/p5/worldToScreen.mdx | 147 +
.../en/{p5.PrintWriter => p5}/write.mdx | 20 +-
src/content/reference/en/p5/year.mdx | 11 +-
src/globals/p5-version.ts | 2 +-
1103 files changed, 43413 insertions(+), 52414 deletions(-)
create mode 100644 src/content/contributor-docs/en/jsdoc.mdx
delete mode 100644 src/content/reference/en/p5.Amplitude/toggleNormalize.mdx
delete mode 100644 src/content/reference/en/p5.AudioIn/amplitude.mdx
delete mode 100644 src/content/reference/en/p5.AudioIn/connect.mdx
delete mode 100644 src/content/reference/en/p5.AudioIn/currentSource.mdx
delete mode 100644 src/content/reference/en/p5.AudioIn/disconnect.mdx
delete mode 100644 src/content/reference/en/p5.AudioIn/enabled.mdx
delete mode 100644 src/content/reference/en/p5.AudioIn/getLevel.mdx
delete mode 100644 src/content/reference/en/p5.AudioIn/getSources.mdx
delete mode 100644 src/content/reference/en/p5.AudioIn/input.mdx
delete mode 100644 src/content/reference/en/p5.AudioIn/mediaStream.mdx
delete mode 100644 src/content/reference/en/p5.AudioIn/output.mdx
delete mode 100644 src/content/reference/en/p5.AudioIn/setSource.mdx
delete mode 100644 src/content/reference/en/p5.AudioIn/stream.mdx
delete mode 100644 src/content/reference/en/p5.AudioVoice/connect.mdx
delete mode 100644 src/content/reference/en/p5.AudioVoice/disconnect.mdx
create mode 100644 src/content/reference/en/p5.Biquad/freq.mdx
create mode 100644 src/content/reference/en/p5.Biquad/gain.mdx
create mode 100644 src/content/reference/en/p5.Biquad/res.mdx
create mode 100644 src/content/reference/en/p5.Biquad/setType.mdx
delete mode 100644 src/content/reference/en/p5.Camera/roll.mdx
delete mode 100644 src/content/reference/en/p5.Compressor/attack.mdx
delete mode 100644 src/content/reference/en/p5.Compressor/compressor.mdx
delete mode 100644 src/content/reference/en/p5.Compressor/knee.mdx
delete mode 100644 src/content/reference/en/p5.Compressor/process.mdx
delete mode 100644 src/content/reference/en/p5.Compressor/ratio.mdx
delete mode 100644 src/content/reference/en/p5.Compressor/reduction.mdx
delete mode 100644 src/content/reference/en/p5.Compressor/release.mdx
delete mode 100644 src/content/reference/en/p5.Compressor/set.mdx
delete mode 100644 src/content/reference/en/p5.Compressor/threshold.mdx
delete mode 100644 src/content/reference/en/p5.Convolver/addImpulse.mdx
delete mode 100644 src/content/reference/en/p5.Convolver/convolverNode.mdx
delete mode 100644 src/content/reference/en/p5.Convolver/impulses.mdx
delete mode 100644 src/content/reference/en/p5.Convolver/process.mdx
delete mode 100644 src/content/reference/en/p5.Convolver/resetImpulse.mdx
delete mode 100644 src/content/reference/en/p5.Convolver/toggleImpulse.mdx
delete mode 100644 src/content/reference/en/p5.Delay/connect.mdx
delete mode 100644 src/content/reference/en/p5.Delay/disconnect.mdx
delete mode 100644 src/content/reference/en/p5.Delay/filter.mdx
delete mode 100644 src/content/reference/en/p5.Delay/leftDelay.mdx
delete mode 100644 src/content/reference/en/p5.Delay/rightDelay.mdx
delete mode 100644 src/content/reference/en/p5.Delay/setType.mdx
delete mode 100644 src/content/reference/en/p5.Distortion/WaveShaperNode.mdx
delete mode 100644 src/content/reference/en/p5.Distortion/getAmount.mdx
delete mode 100644 src/content/reference/en/p5.Distortion/getOversample.mdx
delete mode 100644 src/content/reference/en/p5.Distortion/process.mdx
delete mode 100644 src/content/reference/en/p5.Distortion/set.mdx
delete mode 100644 src/content/reference/en/p5.EQ/bands.mdx
delete mode 100644 src/content/reference/en/p5.EQ/process.mdx
delete mode 100644 src/content/reference/en/p5.Effect/amp.mdx
delete mode 100644 src/content/reference/en/p5.Effect/chain.mdx
delete mode 100644 src/content/reference/en/p5.Effect/connect.mdx
delete mode 100644 src/content/reference/en/p5.Effect/disconnect.mdx
delete mode 100644 src/content/reference/en/p5.Effect/drywet.mdx
rename src/content/reference/en/{p5 => p5.Element}/changed.mdx (87%)
rename src/content/reference/en/{p5 => p5.Element}/input.mdx (84%)
delete mode 100644 src/content/reference/en/p5.Element/touchEnded.mdx
delete mode 100644 src/content/reference/en/p5.Element/touchMoved.mdx
delete mode 100644 src/content/reference/en/p5.Element/touchStarted.mdx
delete mode 100644 src/content/reference/en/p5.Envelope/add.mdx
delete mode 100644 src/content/reference/en/p5.Envelope/attackLevel.mdx
delete mode 100644 src/content/reference/en/p5.Envelope/decayLevel.mdx
delete mode 100644 src/content/reference/en/p5.Envelope/decayTime.mdx
delete mode 100644 src/content/reference/en/p5.Envelope/mult.mdx
delete mode 100644 src/content/reference/en/p5.Envelope/ramp.mdx
delete mode 100644 src/content/reference/en/p5.Envelope/releaseLevel.mdx
delete mode 100644 src/content/reference/en/p5.Envelope/scale.mdx
delete mode 100644 src/content/reference/en/p5.Envelope/set.mdx
delete mode 100644 src/content/reference/en/p5.Envelope/setExp.mdx
delete mode 100644 src/content/reference/en/p5.Envelope/setRange.mdx
delete mode 100644 src/content/reference/en/p5.FFT/getCentroid.mdx
delete mode 100644 src/content/reference/en/p5.FFT/getEnergy.mdx
delete mode 100644 src/content/reference/en/p5.FFT/getOctaveBands.mdx
delete mode 100644 src/content/reference/en/p5.FFT/linAverages.mdx
delete mode 100644 src/content/reference/en/p5.FFT/logAverages.mdx
delete mode 100644 src/content/reference/en/p5.FFT/setInput.mdx
delete mode 100644 src/content/reference/en/p5.FFT/smooth.mdx
delete mode 100644 src/content/reference/en/p5.Filter/biquadFilter.mdx
delete mode 100644 src/content/reference/en/p5.Filter/freq.mdx
delete mode 100644 src/content/reference/en/p5.Filter/gain.mdx
delete mode 100644 src/content/reference/en/p5.Filter/process.mdx
delete mode 100644 src/content/reference/en/p5.Filter/res.mdx
delete mode 100644 src/content/reference/en/p5.Filter/set.mdx
delete mode 100644 src/content/reference/en/p5.Filter/setType.mdx
delete mode 100644 src/content/reference/en/p5.Filter/toggle.mdx
delete mode 100644 src/content/reference/en/p5.Font/font.mdx
delete mode 100644 src/content/reference/en/p5.Font/textBounds.mdx
create mode 100644 src/content/reference/en/p5.Font/textToContours.mdx
create mode 100644 src/content/reference/en/p5.Font/textToModel.mdx
create mode 100644 src/content/reference/en/p5.Font/textToPaths.mdx
delete mode 100644 src/content/reference/en/p5.Framebuffer/loadPixels.mdx
delete mode 100644 src/content/reference/en/p5.Framebuffer/updatePixels.mdx
delete mode 100644 src/content/reference/en/p5.Gain/connect.mdx
delete mode 100644 src/content/reference/en/p5.Gain/disconnect.mdx
delete mode 100644 src/content/reference/en/p5.Gain/setInput.mdx
create mode 100644 src/content/reference/en/p5.Geometry/makeEdgesFromFaces.mdx
create mode 100644 src/content/reference/en/p5.Geometry/vertexProperty.mdx
delete mode 100644 src/content/reference/en/p5.MonoSynth/amp.mdx
delete mode 100644 src/content/reference/en/p5.MonoSynth/attack.mdx
delete mode 100644 src/content/reference/en/p5.MonoSynth/connect.mdx
delete mode 100644 src/content/reference/en/p5.MonoSynth/decay.mdx
delete mode 100644 src/content/reference/en/p5.MonoSynth/disconnect.mdx
delete mode 100644 src/content/reference/en/p5.MonoSynth/dispose.mdx
delete mode 100644 src/content/reference/en/p5.MonoSynth/play.mdx
delete mode 100644 src/content/reference/en/p5.MonoSynth/release.mdx
delete mode 100644 src/content/reference/en/p5.MonoSynth/setADSR.mdx
delete mode 100644 src/content/reference/en/p5.MonoSynth/sustain.mdx
delete mode 100644 src/content/reference/en/p5.MonoSynth/triggerAttack.mdx
delete mode 100644 src/content/reference/en/p5.MonoSynth/triggerRelease.mdx
create mode 100644 src/content/reference/en/p5.Noise/amp.mdx
delete mode 100644 src/content/reference/en/p5.Noise/setType.mdx
rename src/content/reference/en/{p5.Score => p5.Noise}/start.mdx (53%)
rename src/content/reference/en/{p5.Score => p5.Noise}/stop.mdx (52%)
create mode 100644 src/content/reference/en/p5.Noise/type.mdx
delete mode 100644 src/content/reference/en/p5.NumberDict/add.mdx
delete mode 100644 src/content/reference/en/p5.NumberDict/div.mdx
delete mode 100644 src/content/reference/en/p5.NumberDict/maxKey.mdx
delete mode 100644 src/content/reference/en/p5.NumberDict/maxValue.mdx
delete mode 100644 src/content/reference/en/p5.NumberDict/minKey.mdx
delete mode 100644 src/content/reference/en/p5.NumberDict/minValue.mdx
delete mode 100644 src/content/reference/en/p5.NumberDict/mult.mdx
delete mode 100644 src/content/reference/en/p5.NumberDict/sub.mdx
delete mode 100644 src/content/reference/en/p5.Oscillator/add.mdx
delete mode 100644 src/content/reference/en/p5.Oscillator/connect.mdx
delete mode 100644 src/content/reference/en/p5.Oscillator/disconnect.mdx
delete mode 100644 src/content/reference/en/p5.Oscillator/getAmp.mdx
delete mode 100644 src/content/reference/en/p5.Oscillator/getFreq.mdx
delete mode 100644 src/content/reference/en/p5.Oscillator/getPan.mdx
delete mode 100644 src/content/reference/en/p5.Oscillator/getType.mdx
delete mode 100644 src/content/reference/en/p5.Oscillator/mult.mdx
delete mode 100644 src/content/reference/en/p5.Oscillator/pan.mdx
delete mode 100644 src/content/reference/en/p5.Oscillator/scale.mdx
create mode 100644 src/content/reference/en/p5.Panner/pan.mdx
delete mode 100644 src/content/reference/en/p5.Panner3D/orient.mdx
delete mode 100644 src/content/reference/en/p5.Panner3D/orientX.mdx
delete mode 100644 src/content/reference/en/p5.Panner3D/orientY.mdx
delete mode 100644 src/content/reference/en/p5.Panner3D/orientZ.mdx
delete mode 100644 src/content/reference/en/p5.Panner3D/panner.mdx
delete mode 100644 src/content/reference/en/p5.Panner3D/rollof.mdx
create mode 100644 src/content/reference/en/p5.Panner3D/rolloff.mdx
delete mode 100644 src/content/reference/en/p5.Part/addPhrase.mdx
delete mode 100644 src/content/reference/en/p5.Part/getBPM.mdx
delete mode 100644 src/content/reference/en/p5.Part/getPhrase.mdx
delete mode 100644 src/content/reference/en/p5.Part/loop.mdx
delete mode 100644 src/content/reference/en/p5.Part/noLoop.mdx
delete mode 100644 src/content/reference/en/p5.Part/onStep.mdx
delete mode 100644 src/content/reference/en/p5.Part/pause.mdx
delete mode 100644 src/content/reference/en/p5.Part/removePhrase.mdx
delete mode 100644 src/content/reference/en/p5.Part/replaceSequence.mdx
delete mode 100644 src/content/reference/en/p5.Part/setBPM.mdx
delete mode 100644 src/content/reference/en/p5.Part/start.mdx
delete mode 100644 src/content/reference/en/p5.Part/stop.mdx
delete mode 100644 src/content/reference/en/p5.PeakDetect/isDetected.mdx
delete mode 100644 src/content/reference/en/p5.PeakDetect/onPeak.mdx
delete mode 100644 src/content/reference/en/p5.PeakDetect/update.mdx
delete mode 100644 src/content/reference/en/p5.Phrase/sequence.mdx
create mode 100644 src/content/reference/en/p5.PitchShifter/shift.mdx
delete mode 100644 src/content/reference/en/p5.PolySynth/AudioVoice.mdx
delete mode 100644 src/content/reference/en/p5.PolySynth/connect.mdx
delete mode 100644 src/content/reference/en/p5.PolySynth/disconnect.mdx
delete mode 100644 src/content/reference/en/p5.PolySynth/dispose.mdx
delete mode 100644 src/content/reference/en/p5.PolySynth/noteADSR.mdx
delete mode 100644 src/content/reference/en/p5.PolySynth/noteAttack.mdx
delete mode 100644 src/content/reference/en/p5.PolySynth/noteRelease.mdx
delete mode 100644 src/content/reference/en/p5.PolySynth/notes.mdx
delete mode 100644 src/content/reference/en/p5.PolySynth/play.mdx
delete mode 100644 src/content/reference/en/p5.PolySynth/polyvalue.mdx
delete mode 100644 src/content/reference/en/p5.PolySynth/setADSR.mdx
delete mode 100644 src/content/reference/en/p5.PrintWriter/clear.mdx
delete mode 100644 src/content/reference/en/p5.PrintWriter/print.mdx
delete mode 100644 src/content/reference/en/p5.Pulse/width.mdx
delete mode 100644 src/content/reference/en/p5.Reverb/amp.mdx
delete mode 100644 src/content/reference/en/p5.Reverb/connect.mdx
delete mode 100644 src/content/reference/en/p5.Reverb/disconnect.mdx
create mode 100644 src/content/reference/en/p5.Reverb/drywet.mdx
delete mode 100644 src/content/reference/en/p5.Reverb/process.mdx
delete mode 100644 src/content/reference/en/p5.Score/loop.mdx
delete mode 100644 src/content/reference/en/p5.Score/noLoop.mdx
delete mode 100644 src/content/reference/en/p5.Score/pause.mdx
delete mode 100644 src/content/reference/en/p5.Score/setBPM.mdx
create mode 100644 src/content/reference/en/p5.Shader/version.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/addCue.mdx
create mode 100644 src/content/reference/en/p5.SoundFile/amp.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/clearCues.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/connect.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/currentTime.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/disconnect.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/getBlob.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/getPan.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/getPeaks.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/isLoaded.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/isPaused.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/pan.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/playMode.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/removeCue.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/reverseBuffer.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/save.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/setBuffer.mdx
delete mode 100644 src/content/reference/en/p5.SoundFile/setVolume.mdx
create mode 100644 src/content/reference/en/p5.SoundFile/start.mdx
delete mode 100644 src/content/reference/en/p5.SoundLoop/bpm.mdx
delete mode 100644 src/content/reference/en/p5.SoundLoop/interval.mdx
delete mode 100644 src/content/reference/en/p5.SoundLoop/iterations.mdx
delete mode 100644 src/content/reference/en/p5.SoundLoop/maxIterations.mdx
delete mode 100644 src/content/reference/en/p5.SoundLoop/musicalTimeMode.mdx
delete mode 100644 src/content/reference/en/p5.SoundLoop/pause.mdx
delete mode 100644 src/content/reference/en/p5.SoundLoop/start.mdx
delete mode 100644 src/content/reference/en/p5.SoundLoop/stop.mdx
delete mode 100644 src/content/reference/en/p5.SoundLoop/syncedStart.mdx
delete mode 100644 src/content/reference/en/p5.SoundLoop/timeSignature.mdx
delete mode 100644 src/content/reference/en/p5.SoundRecorder/record.mdx
delete mode 100644 src/content/reference/en/p5.SoundRecorder/setInput.mdx
delete mode 100644 src/content/reference/en/p5.SoundRecorder/stop.mdx
delete mode 100644 src/content/reference/en/p5.TypedDict/clear.mdx
delete mode 100644 src/content/reference/en/p5.TypedDict/create.mdx
delete mode 100644 src/content/reference/en/p5.TypedDict/get.mdx
delete mode 100644 src/content/reference/en/p5.TypedDict/hasKey.mdx
delete mode 100644 src/content/reference/en/p5.TypedDict/print.mdx
delete mode 100644 src/content/reference/en/p5.TypedDict/remove.mdx
delete mode 100644 src/content/reference/en/p5.TypedDict/saveJSON.mdx
delete mode 100644 src/content/reference/en/p5.TypedDict/saveTable.mdx
delete mode 100644 src/content/reference/en/p5.TypedDict/set.mdx
delete mode 100644 src/content/reference/en/p5.TypedDict/size.mdx
delete mode 100644 src/content/reference/en/p5.Vector/clampToZero.mdx
create mode 100644 src/content/reference/en/p5.Vector/getValue.mdx
create mode 100644 src/content/reference/en/p5.Vector/setValue.mdx
delete mode 100644 src/content/reference/en/p5.XML/setContent.mdx
create mode 100644 src/content/reference/en/p5.sound/getAudioContext.mdx
create mode 100644 src/content/reference/en/p5.sound/loadSound.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.AudioVoice.mdx
create mode 100644 src/content/reference/en/p5.sound/p5.Biquad.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.Compressor.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.Convolver.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.Distortion.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.EQ.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.Effect.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.Filter.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.MonoSynth.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.OnsetDetect.mdx
create mode 100644 src/content/reference/en/p5.sound/p5.Panner.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.Part.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.PeakDetect.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.Phrase.mdx
create mode 100644 src/content/reference/en/p5.sound/p5.PitchShifter.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.PolySynth.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.Pulse.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.Score.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.SoundLoop.mdx
delete mode 100644 src/content/reference/en/p5.sound/p5.SoundRecorder.mdx
create mode 100644 src/content/reference/en/p5.sound/setAudioContext.mdx
create mode 100644 src/content/reference/en/p5.sound/userStartAudio.mdx
create mode 100644 src/content/reference/en/p5.sound/userStopAudio.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/HWB.mdx
create mode 100644 src/content/reference/en/p5/LAB.mdx
create mode 100644 src/content/reference/en/p5/LCH.mdx
create mode 100644 src/content/reference/en/p5/OKLAB.mdx
create mode 100644 src/content/reference/en/p5/OKLCH.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/RGBHDR.mdx
create mode 100644 src/content/reference/en/p5/addElement.mdx
delete mode 100644 src/content/reference/en/p5/append.mdx
delete mode 100644 src/content/reference/en/p5/arrayCopy.mdx
create mode 100644 src/content/reference/en/p5/baseFilterShader.mdx
delete mode 100644 src/content/reference/en/p5/beginGeometry.mdx
delete mode 100644 src/content/reference/en/p5/bezierDetail.mdx
create mode 100644 src/content/reference/en/p5/bezierOrder.mdx
rename src/content/reference/en/{p5.PrintWriter => p5}/close.mdx (89%)
delete mode 100644 src/content/reference/en/p5/concat.mdx
delete mode 100644 src/content/reference/en/p5/constants/DEGREES.mdx
rename src/content/reference/en/p5/constants/{RADIANS.mdx => DEG_TO_RAD.mdx} (96%)
create mode 100644 src/content/reference/en/p5/constants/EMPTY_PATH.mdx
create mode 100644 src/content/reference/en/p5/constants/EXCLUDE.mdx
rename src/content/reference/en/p5/constants/{RGB.mdx => FULL.mdx} (77%)
delete mode 100644 src/content/reference/en/p5/constants/HSB.mdx
create mode 100644 src/content/reference/en/p5/constants/INCLUDE.mdx
rename src/content/reference/en/p5/constants/{RGBA.mdx => PATH.mdx} (73%)
rename src/content/reference/en/p5/constants/{HSL.mdx => SIMPLE.mdx} (76%)
delete mode 100644 src/content/reference/en/p5/createConvolver.mdx
delete mode 100644 src/content/reference/en/p5/createNumberDict.mdx
delete mode 100644 src/content/reference/en/p5/createStringDict.mdx
delete mode 100644 src/content/reference/en/p5/curveTightness.mdx
delete mode 100644 src/content/reference/en/p5/endGeometry.mdx
create mode 100644 src/content/reference/en/p5/fontAscent.mdx
create mode 100644 src/content/reference/en/p5/fontBounds.mdx
create mode 100644 src/content/reference/en/p5/fontDescent.mdx
create mode 100644 src/content/reference/en/p5/fontWidth.mdx
delete mode 100644 src/content/reference/en/p5/freqToMidi.mdx
delete mode 100644 src/content/reference/en/p5/getAudioContext.mdx
delete mode 100644 src/content/reference/en/p5/getOutputVolume.mdx
create mode 100644 src/content/reference/en/p5/imageShader.mdx
delete mode 100644 src/content/reference/en/p5/join.mdx
create mode 100644 src/content/reference/en/p5/loadBlob.mdx
create mode 100644 src/content/reference/en/p5/loadFilterShader.mdx
delete mode 100644 src/content/reference/en/p5/loadSound.mdx
delete mode 100644 src/content/reference/en/p5/match.mdx
delete mode 100644 src/content/reference/en/p5/matchAll.mdx
delete mode 100644 src/content/reference/en/p5/midiToFreq.mdx
delete mode 100644 src/content/reference/en/p5/outputVolume.mdx
delete mode 100644 src/content/reference/en/p5/p5.NumberDict.mdx
delete mode 100644 src/content/reference/en/p5/p5.Renderer.mdx
delete mode 100644 src/content/reference/en/p5/p5.StringDict.mdx
delete mode 100644 src/content/reference/en/p5/p5.TypedDict.mdx
delete mode 100644 src/content/reference/en/p5/preload.mdx
delete mode 100644 src/content/reference/en/p5/quadraticVertex.mdx
delete mode 100644 src/content/reference/en/p5/reverse.mdx
delete mode 100644 src/content/reference/en/p5/sampleRate.mdx
rename src/content/reference/en/{p5.Geometry => p5}/saveObj.mdx (79%)
delete mode 100644 src/content/reference/en/p5/saveSound.mdx
rename src/content/reference/en/{p5.Geometry => p5}/saveStl.mdx (73%)
create mode 100644 src/content/reference/en/p5/screenToWorld.mdx
delete mode 100644 src/content/reference/en/p5/setBPM.mdx
delete mode 100644 src/content/reference/en/p5/shorten.mdx
delete mode 100644 src/content/reference/en/p5/sort.mdx
delete mode 100644 src/content/reference/en/p5/soundFormats.mdx
delete mode 100644 src/content/reference/en/p5/soundOut.mdx
delete mode 100644 src/content/reference/en/p5/splice.mdx
rename src/content/reference/en/p5/{curve.mdx => spline.mdx} (73%)
rename src/content/reference/en/p5/{curvePoint.mdx => splinePoint.mdx} (66%)
create mode 100644 src/content/reference/en/p5/splineProperties.mdx
create mode 100644 src/content/reference/en/p5/splineProperty.mdx
rename src/content/reference/en/p5/{curveTangent.mdx => splineTangent.mdx} (63%)
rename src/content/reference/en/p5/{curveVertex.mdx => splineVertex.mdx} (64%)
delete mode 100644 src/content/reference/en/p5/split.mdx
create mode 100644 src/content/reference/en/p5/strokeMode.mdx
create mode 100644 src/content/reference/en/p5/strokeShader.mdx
delete mode 100644 src/content/reference/en/p5/subset.mdx
create mode 100644 src/content/reference/en/p5/textBounds.mdx
create mode 100644 src/content/reference/en/p5/textDirection.mdx
create mode 100644 src/content/reference/en/p5/textProperties.mdx
create mode 100644 src/content/reference/en/p5/textProperty.mdx
create mode 100644 src/content/reference/en/p5/textWeight.mdx
delete mode 100644 src/content/reference/en/p5/touchEnded.mdx
delete mode 100644 src/content/reference/en/p5/touchMoved.mdx
delete mode 100644 src/content/reference/en/p5/touchStarted.mdx
delete mode 100644 src/content/reference/en/p5/trim.mdx
delete mode 100644 src/content/reference/en/p5/userStartAudio.mdx
create mode 100644 src/content/reference/en/p5/vertexProperty.mdx
create mode 100644 src/content/reference/en/p5/worldToScreen.mdx
rename src/content/reference/en/{p5.PrintWriter => p5}/write.mdx (84%)
diff --git a/public/reference/data.json b/public/reference/data.json
index 3c74ca8c1b..22eaaffed7 100644
--- a/public/reference/data.json
+++ b/public/reference/data.json
@@ -1,31486 +1,28540 @@
{
- "project": {
- "name": "p5",
- "description": "[](https://www.npmjs.com/package/p5)",
- "version": "1.11.5",
- "url": "https://github.com/processing/p5.js#readme"
- },
+ "project": {},
"files": {
- "src/accessibility/color_namer.js": {
- "name": "src/accessibility/color_namer.js",
+ "src/Amplitude.js": {
+ "name": "src/Amplitude.js",
"modules": {
- "Environment": 1
+ "p5.sound": 1
},
- "classes": {},
- "fors": {
- "p5": 1
+ "classes": {
+ "Amplitude": 1
},
- "namespaces": {}
- },
- "src/accessibility/describe.js": {
- "name": "src/accessibility/describe.js",
- "modules": {},
- "classes": {},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "Amplitude": 1
},
"namespaces": {}
},
- "src/accessibility/gridOutput.js": {
- "name": "src/accessibility/gridOutput.js",
+ "src/AudioIn.js": {
+ "name": "src/AudioIn.js",
"modules": {},
- "classes": {},
- "fors": {
- "p5": 1
+ "classes": {
+ "AudioIn": 1
},
- "namespaces": {}
- },
- "src/accessibility/outputs.js": {
- "name": "src/accessibility/outputs.js",
- "modules": {},
- "classes": {},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "AudioIn": 1
},
"namespaces": {}
},
- "src/accessibility/textOutput.js": {
- "name": "src/accessibility/textOutput.js",
+ "src/Biquad.js": {
+ "name": "src/Biquad.js",
"modules": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/color/color_conversion.js": {
- "name": "src/color/color_conversion.js",
- "modules": {
- "Color Conversion": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/color/creating_reading.js": {
- "name": "src/color/creating_reading.js",
- "modules": {
- "Creating & Reading": 1
+ "classes": {
+ "Biquad": 1,
+ "LowPass": 1,
+ "HighPass": 1,
+ "BandPass": 1
},
- "classes": {},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "Biquad": 1
},
"namespaces": {}
},
- "src/color/p5.Color.js": {
- "name": "src/color/p5.Color.js",
+ "src/Delay.js": {
+ "name": "src/Delay.js",
"modules": {},
"classes": {
- "p5.Color": 1
- },
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/color/setting.js": {
- "name": "src/color/setting.js",
- "modules": {
- "Setting": 1
+ "Delay": 1
},
- "classes": {},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "Delay": 1
},
"namespaces": {}
},
- "src/core/friendly_errors/fes_core.js": {
- "name": "src/core/friendly_errors/fes_core.js",
+ "src/Envelope.js": {
+ "name": "src/Envelope.js",
"modules": {},
- "classes": {},
- "fors": {
- "p5": 1
+ "classes": {
+ "Envelope": 1
},
- "namespaces": {}
- },
- "src/core/friendly_errors/file_errors.js": {
- "name": "src/core/friendly_errors/file_errors.js",
- "modules": {},
- "classes": {},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "Envelope": 1
},
"namespaces": {}
},
- "src/core/friendly_errors/sketch_reader.js": {
- "name": "src/core/friendly_errors/sketch_reader.js",
+ "src/FFT.js": {
+ "name": "src/FFT.js",
"modules": {},
- "classes": {},
- "fors": {
- "p5": 1
+ "classes": {
+ "FFT": 1
},
- "namespaces": {}
- },
- "src/core/friendly_errors/stacktrace.js": {
- "name": "src/core/friendly_errors/stacktrace.js",
- "modules": {},
- "classes": {},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "FFT": 1
},
"namespaces": {}
},
- "src/core/friendly_errors/validate_params.js": {
- "name": "src/core/friendly_errors/validate_params.js",
+ "src/Gain.js": {
+ "name": "src/Gain.js",
"modules": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/core/shape/2d_primitives.js": {
- "name": "src/core/shape/2d_primitives.js",
- "modules": {
- "2D Primitives": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/core/shape/attributes.js": {
- "name": "src/core/shape/attributes.js",
- "modules": {
- "Attributes": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/core/shape/curves.js": {
- "name": "src/core/shape/curves.js",
- "modules": {
- "Curves": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/core/shape/vertex.js": {
- "name": "src/core/shape/vertex.js",
- "modules": {
- "Vertex": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/core/constants.js": {
- "name": "src/core/constants.js",
- "modules": {
- "Constants": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
+ "classes": {
+ "Gain": 1
},
- "namespaces": {}
- },
- "src/core/environment.js": {
- "name": "src/core/environment.js",
- "modules": {},
- "classes": {},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "Gain": 1
},
"namespaces": {}
},
- "src/core/helpers.js": {
- "name": "src/core/helpers.js",
- "modules": {},
- "classes": {},
- "fors": {},
- "namespaces": {}
- },
- "src/core/init.js": {
- "name": "src/core/init.js",
- "modules": {},
- "classes": {},
- "fors": {},
- "namespaces": {}
- },
- "src/core/internationalization.js": {
- "name": "src/core/internationalization.js",
+ "src/Noise.js": {
+ "name": "src/Noise.js",
"modules": {},
- "classes": {},
- "fors": {},
- "namespaces": {}
- },
- "src/core/legacy.js": {
- "name": "src/core/legacy.js",
- "modules": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/core/main.js": {
- "name": "src/core/main.js",
- "modules": {
- "Structure": 1
- },
"classes": {
- "p5": 1
+ "Noise": 1
},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "Noise": 1
},
"namespaces": {}
},
- "src/core/p5.Element.js": {
- "name": "src/core/p5.Element.js",
- "modules": {
- "DOM": 1
- },
+ "src/Oscillator.js": {
+ "name": "src/Oscillator.js",
+ "modules": {},
"classes": {
- "p5.Element": 1
+ "Oscillator": 1,
+ "SawOsc": 1,
+ "SqrOsc": 1,
+ "TriOsc": 1,
+ "SinOsc": 1
},
"fors": {
- "p5.Element": 1
+ "p5.sound": 1,
+ "Oscillator": 1
},
"namespaces": {}
},
- "src/core/p5.Graphics.js": {
- "name": "src/core/p5.Graphics.js",
+ "src/Panner.js": {
+ "name": "src/Panner.js",
"modules": {},
"classes": {
- "p5.Graphics": 1
+ "Panner": 1
},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "Panner": 1
},
"namespaces": {}
},
- "src/core/p5.Renderer.js": {
- "name": "src/core/p5.Renderer.js",
+ "src/Panner3D.js": {
+ "name": "src/Panner3D.js",
"modules": {},
"classes": {
- "p5.Renderer": 1
+ "Panner3D": 1
},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "Panner3D": 1
},
"namespaces": {}
},
- "src/core/p5.Renderer2D.js": {
- "name": "src/core/p5.Renderer2D.js",
+ "src/PitchShifter.js": {
+ "name": "src/PitchShifter.js",
"modules": {},
- "classes": {},
- "fors": {},
- "namespaces": {}
- },
- "src/core/reference.js": {
- "name": "src/core/reference.js",
- "modules": {
- "Foundation": 1
+ "classes": {
+ "PitchShifter": 1
},
- "classes": {},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "PitchShifter": 1
},
"namespaces": {}
},
- "src/core/rendering.js": {
- "name": "src/core/rendering.js",
+ "src/Reverb.js": {
+ "name": "src/Reverb.js",
"modules": {},
- "classes": {},
- "fors": {
- "p5": 1
+ "classes": {
+ "Reverb": 1
},
- "namespaces": {}
- },
- "src/core/structure.js": {
- "name": "src/core/structure.js",
- "modules": {},
- "classes": {},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "Reverb": 1
},
"namespaces": {}
},
- "src/core/transform.js": {
- "name": "src/core/transform.js",
+ "src/SoundFile.js": {
+ "name": "src/SoundFile.js",
"modules": {
- "Transform": 1
+ "SoundFile": 1
+ },
+ "classes": {
+ "SoundFile": 1
},
- "classes": {},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "sound": 1,
+ "SoundFile": 1
},
"namespaces": {}
},
- "src/data/local_storage.js": {
- "name": "src/data/local_storage.js",
+ "src/Utils.js": {
+ "name": "src/Utils.js",
"modules": {
- "LocalStorage": 1
+ "Sound Utilities": 1
},
"classes": {},
"fors": {
- "p5": 1
+ "sound": 1
},
"namespaces": {}
- },
- "src/data/p5.TypedDict.js": {
- "name": "src/data/p5.TypedDict.js",
- "modules": {
- "Dictionary": 1
- },
- "classes": {
- "p5.TypedDict": 1,
- "p5.StringDict": 1,
- "p5.NumberDict": 1
- },
- "fors": {
- "p5.TypedDict": 1,
- "p5": 1
+ }
+ },
+ "modules": {
+ "Environment": {
+ "name": "Environment",
+ "submodules": {
+ "Environment": 1
},
- "namespaces": {}
+ "classes": {}
},
- "src/dom/dom.js": {
- "name": "src/dom/dom.js",
- "modules": {},
- "classes": {
- "p5.MediaElement": 1,
- "p5.File": 1
- },
- "fors": {
- "p5": 1,
- "p5.Element": 1
+ "Color": {
+ "name": "Color",
+ "submodules": {
+ "Color Conversion": 1,
+ "Creating & Reading": 1,
+ "Setting": 1
},
- "namespaces": {}
+ "classes": {}
},
- "src/events/acceleration.js": {
- "name": "src/events/acceleration.js",
- "modules": {
- "Events": 1,
- "Acceleration": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
+ "Constants": {
+ "name": "Constants",
+ "submodules": {
+ "Constants": 1
},
- "namespaces": {}
+ "classes": {}
},
- "src/events/keyboard.js": {
- "name": "src/events/keyboard.js",
- "modules": {
- "Keyboard": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
+ "Structure": {
+ "name": "Structure",
+ "submodules": {
+ "Structure": 1
},
- "namespaces": {}
+ "classes": {}
},
- "src/events/mouse.js": {
- "name": "src/events/mouse.js",
- "modules": {
- "Mouse": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
+ "Rendering": {
+ "name": "Rendering",
+ "submodules": {
+ "Rendering": 1
},
- "namespaces": {}
+ "classes": {}
},
- "src/events/touch.js": {
- "name": "src/events/touch.js",
- "modules": {
- "Touch": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
+ "Foundation": {
+ "name": "Foundation",
+ "submodules": {
+ "Foundation": 1
},
- "namespaces": {}
+ "classes": {}
},
- "src/image/filters.js": {
- "name": "src/image/filters.js",
- "modules": {},
- "classes": {},
- "fors": {},
- "namespaces": {}
- },
- "src/image/image.js": {
- "name": "src/image/image.js",
- "modules": {
- "Image": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
+ "Transform": {
+ "name": "Transform",
+ "submodules": {
+ "Transform": 1
},
- "namespaces": {}
+ "classes": {}
},
- "src/image/loading_displaying.js": {
- "name": "src/image/loading_displaying.js",
- "modules": {
- "Loading & Displaying": 1
+ "Data": {
+ "name": "Data",
+ "submodules": {
+ "LocalStorage": 1,
+ "Conversion": 1,
+ "Utility Functions": 1
},
- "classes": {},
- "fors": {
- "p5": 1
+ "classes": {}
+ },
+ "DOM": {
+ "name": "DOM",
+ "submodules": {
+ "DOM": 1
},
- "namespaces": {}
+ "classes": {}
},
- "src/image/p5.Image.js": {
- "name": "src/image/p5.Image.js",
- "modules": {},
- "classes": {
- "p5.Image": 1
+ "Events": {
+ "name": "Events",
+ "submodules": {
+ "Acceleration": 1,
+ "Keyboard": 1,
+ "Pointer": 1
},
- "fors": {},
- "namespaces": {}
+ "classes": {}
},
- "src/image/pixels.js": {
- "name": "src/image/pixels.js",
- "modules": {
+ "Image": {
+ "name": "Image",
+ "submodules": {
+ "Image": 1,
+ "Loading & Displaying": 1,
"Pixels": 1
},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
+ "classes": {}
},
- "src/io/files.js": {
- "name": "src/io/files.js",
- "modules": {
+ "IO": {
+ "name": "IO",
+ "submodules": {
"Input": 1,
- "Output": 1
- },
- "classes": {
- "p5.PrintWriter": 1
- },
- "fors": {
- "p5": 1
+ "Output": 1,
+ "Table": 1,
+ "Time & Date": 1
},
- "namespaces": {}
+ "classes": {}
},
- "src/io/p5.Table.js": {
- "name": "src/io/p5.Table.js",
- "modules": {
- "Table": 1
- },
- "classes": {
- "p5.Table": 1
+ "Math": {
+ "name": "Math",
+ "submodules": {
+ "Calculation": 1,
+ "Noise": 1,
+ "Random": 1,
+ "Trigonometry": 1,
+ "Quaternion": 1
},
- "fors": {},
- "namespaces": {}
+ "classes": {}
},
- "src/io/p5.TableRow.js": {
- "name": "src/io/p5.TableRow.js",
- "modules": {},
- "classes": {
- "p5.TableRow": 1
+ "Shape": {
+ "name": "Shape",
+ "submodules": {
+ "2D Primitives": 1,
+ "Attributes": 1,
+ "Curves": 1,
+ "Custom Shapes": 1,
+ "3D Primitives": 1,
+ "3D Models": 1
},
- "fors": {},
- "namespaces": {}
+ "classes": {}
},
- "src/io/p5.XML.js": {
- "name": "src/io/p5.XML.js",
- "modules": {},
- "classes": {
- "p5.XML": 1
- },
- "fors": {},
- "namespaces": {}
+ "Typography": {
+ "name": "Typography",
+ "submodules": {},
+ "classes": {}
},
- "src/math/calculation.js": {
- "name": "src/math/calculation.js",
- "modules": {
- "Calculation": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
+ "3D": {
+ "name": "3D",
+ "submodules": {
+ "Interaction": 1,
+ "Lights": 1,
+ "Material": 1,
+ "Camera": 1,
+ "ShaderGenerator": 1
},
- "namespaces": {}
+ "classes": {}
},
- "src/math/math.js": {
- "name": "src/math/math.js",
- "modules": {
- "Vector": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
+ "Color Conversion": {
+ "name": "Color Conversion",
+ "module": "Color",
+ "is_submodule": 1
},
- "src/math/noise.js": {
- "name": "src/math/noise.js",
- "modules": {
- "Noise": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
+ "Creating & Reading": {
+ "name": "Creating & Reading",
+ "module": "Color",
+ "is_submodule": 1
},
- "src/math/p5.Vector.js": {
- "name": "src/math/p5.Vector.js",
- "modules": {},
- "classes": {
- "p5.Vector": 1
- },
- "fors": {},
- "namespaces": {}
+ "Setting": {
+ "name": "Setting",
+ "module": "Color",
+ "is_submodule": 1
},
- "src/math/random.js": {
- "name": "src/math/random.js",
- "modules": {
- "Random": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
+ "LocalStorage": {
+ "name": "LocalStorage",
+ "module": "Data",
+ "is_submodule": 1
},
- "src/math/trigonometry.js": {
- "name": "src/math/trigonometry.js",
- "modules": {
- "Trigonometry": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
+ "Conversion": {
+ "name": "Conversion",
+ "module": "Data",
+ "is_submodule": 1
},
- "src/typography/attributes.js": {
- "name": "src/typography/attributes.js",
- "modules": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
+ "Utility Functions": {
+ "name": "Utility Functions",
+ "module": "Data",
+ "is_submodule": 1
},
- "src/typography/loading_displaying.js": {
- "name": "src/typography/loading_displaying.js",
- "modules": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
+ "Acceleration": {
+ "name": "Acceleration",
+ "module": "Events",
+ "is_submodule": 1
},
- "src/typography/p5.Font.js": {
- "name": "src/typography/p5.Font.js",
- "modules": {},
- "classes": {
- "p5.Font": 1
- },
- "fors": {},
- "namespaces": {}
+ "Keyboard": {
+ "name": "Keyboard",
+ "module": "Events",
+ "is_submodule": 1
},
- "src/utilities/array_functions.js": {
- "name": "src/utilities/array_functions.js",
- "modules": {
- "Array Functions": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
+ "Pointer": {
+ "name": "Pointer",
+ "module": "Events",
+ "is_submodule": 1
},
- "src/utilities/conversion.js": {
- "name": "src/utilities/conversion.js",
- "modules": {
- "Conversion": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
+ "Loading & Displaying": {
+ "name": "Loading & Displaying",
+ "module": "Image",
+ "is_submodule": 1
},
- "src/utilities/string_functions.js": {
- "name": "src/utilities/string_functions.js",
- "modules": {
- "String Functions": 1
+ "Pixels": {
+ "name": "Pixels",
+ "module": "Image",
+ "is_submodule": 1
+ },
+ "Input": {
+ "name": "Input",
+ "module": "IO",
+ "is_submodule": 1
+ },
+ "Output": {
+ "name": "Output",
+ "module": "IO",
+ "is_submodule": 1
+ },
+ "Table": {
+ "name": "Table",
+ "module": "IO",
+ "is_submodule": 1
+ },
+ "Time & Date": {
+ "name": "Time & Date",
+ "module": "IO",
+ "is_submodule": 1
+ },
+ "Calculation": {
+ "name": "Calculation",
+ "module": "Math",
+ "is_submodule": 1
+ },
+ "Noise": {
+ "name": "Noise",
+ "module": "Math",
+ "is_submodule": 1
+ },
+ "Random": {
+ "name": "Random",
+ "module": "Math",
+ "is_submodule": 1
+ },
+ "Trigonometry": {
+ "name": "Trigonometry",
+ "module": "Math",
+ "is_submodule": 1
+ },
+ "Quaternion": {
+ "name": "Quaternion",
+ "module": "Math",
+ "is_submodule": 1
+ },
+ "2D Primitives": {
+ "name": "2D Primitives",
+ "module": "Shape",
+ "is_submodule": 1
+ },
+ "Attributes": {
+ "name": "Attributes",
+ "module": "Shape",
+ "is_submodule": 1
+ },
+ "Curves": {
+ "name": "Curves",
+ "module": "Shape",
+ "is_submodule": 1
+ },
+ "Custom Shapes": {
+ "name": "Custom Shapes",
+ "module": "Shape",
+ "is_submodule": 1
+ },
+ "3D Primitives": {
+ "name": "3D Primitives",
+ "module": "Shape",
+ "is_submodule": 1
+ },
+ "3D Models": {
+ "name": "3D Models",
+ "module": "Shape",
+ "is_submodule": 1
+ },
+ "Interaction": {
+ "name": "Interaction",
+ "module": "3D",
+ "is_submodule": 1
+ },
+ "Lights": {
+ "name": "Lights",
+ "module": "3D",
+ "is_submodule": 1
+ },
+ "Material": {
+ "name": "Material",
+ "module": "3D",
+ "is_submodule": 1
+ },
+ "Camera": {
+ "name": "Camera",
+ "module": "3D",
+ "is_submodule": 1
+ },
+ "ShaderGenerator": {
+ "name": "ShaderGenerator",
+ "module": "3D",
+ "is_submodule": 1
+ },
+ "p5.sound": {
+ "name": "p5.sound",
+ "submodules": {
+ "SoundFile": 1
+ },
+ "elements": {},
+ "classes": {
+ "p5.sound": 1,
+ "Amplitude": 1,
+ "AudioIn": 1,
+ "Biquad": 1,
+ "LowPass": 1,
+ "HighPass": 1,
+ "BandPass": 1,
+ "Delay": 1,
+ "Envelope": 1,
+ "FFT": 1,
+ "Gain": 1,
+ "Noise": 1,
+ "Oscillator": 1,
+ "SawOsc": 1,
+ "SqrOsc": 1,
+ "TriOsc": 1,
+ "SinOsc": 1,
+ "Panner": 1,
+ "Panner3D": 1,
+ "PitchShifter": 1,
+ "Reverb": 1,
+ "sound": 1,
+ "SoundFile": 1
},
- "classes": {},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "Amplitude": 1,
+ "AudioIn": 1,
+ "Biquad": 1,
+ "Delay": 1,
+ "Envelope": 1,
+ "FFT": 1,
+ "Gain": 1,
+ "Noise": 1,
+ "Oscillator": 1,
+ "Panner": 1,
+ "Panner3D": 1,
+ "PitchShifter": 1,
+ "Reverb": 1,
+ "sound": 1,
+ "SoundFile": 1
},
- "namespaces": {}
+ "namespaces": {},
+ "module": "p5.sound",
+ "file": "src/SoundFile.js",
+ "line": 74,
+ "description": "Get the current volume of a sound."
},
- "src/utilities/time_date.js": {
- "name": "src/utilities/time_date.js",
- "modules": {
- "Time & Date": 1
+ "SoundFile": {
+ "name": "SoundFile",
+ "submodules": {},
+ "elements": {},
+ "classes": {
+ "sound": 1,
+ "SoundFile": 1
},
- "classes": {},
"fors": {
- "p5": 1
+ "p5.sound": 1,
+ "sound": 1,
+ "SoundFile": 1
},
- "namespaces": {}
+ "is_submodule": 1,
+ "namespaces": {},
+ "module": "p5.sound",
+ "namespace": "",
+ "file": "src/SoundFile.js",
+ "line": 74,
+ "description": "p5.sound.js extends p5.js with Web Audio functionality including audio input, playback, analysis and synthesis."
},
- "src/webgl/3d_primitives.js": {
- "name": "src/webgl/3d_primitives.js",
- "modules": {
- "3D Primitives": 1
+ "Sound": {
+ "name": "Sound",
+ "submodules": {
+ "Sound Utilities": 1
},
+ "elements": {},
"classes": {},
"fors": {
- "p5": 1
+ "sound": 1
},
"namespaces": {}
},
- "src/webgl/GeometryBuilder.js": {
- "name": "src/webgl/GeometryBuilder.js",
- "modules": {},
- "classes": {},
- "fors": {},
- "namespaces": {}
- },
- "src/webgl/interaction.js": {
- "name": "src/webgl/interaction.js",
- "modules": {
- "Interaction": 1
- },
+ "Sound Utilities": {
+ "name": "Sound Utilities",
+ "submodules": {},
+ "elements": {},
"classes": {},
"fors": {
- "p5": 1
+ "sound": 1
},
- "namespaces": {}
- },
- "src/webgl/light.js": {
- "name": "src/webgl/light.js",
- "modules": {
- "Lights": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/webgl/loading.js": {
- "name": "src/webgl/loading.js",
- "modules": {
- "3D Models": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/webgl/material.js": {
- "name": "src/webgl/material.js",
- "modules": {
- "Material": 1
- },
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/webgl/p5.Camera.js": {
- "name": "src/webgl/p5.Camera.js",
- "modules": {
- "Camera": 1
- },
- "classes": {
- "p5.Camera": 1
- },
- "fors": {
- "p5": 1,
- "p5.Camera": 1
+ "is_submodule": 1,
+ "namespaces": {},
+ "module": "Sound",
+ "namespace": "",
+ "file": "src/Utils.js",
+ "line": 1
+ }
+ },
+ "classes": {
+ "p5": {
+ "name": "p5",
+ "file": "src/scripts/parsers/in/p5.js/src/core/main.js",
+ "line": 32,
+ "description": "<p>This is the p5 instance constructor.</p>\n<p>A p5 instance holds all the properties and methods related to\na p5 sketch. It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node. The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>A p5 sketch can run in \"global\" or \"instance\" mode:\n\"global\" - all properties and methods are attached to the window\n\"instance\" - all properties and methods are bound to this p5 object</p>\n",
+ "example": [],
+ "params": [
+ {
+ "name": "sketch",
+ "description": "a closure that can set optional <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or <a href=\"#/p5/draw\">draw()</a> properties on the\ngiven p5 instance",
+ "type": "function(p5)"
+ },
+ {
+ "name": "node",
+ "description": "element to attach canvas to",
+ "optional": 1,
+ "type": "HTMLElement"
+ }
+ ],
+ "return": {
+ "description": "a p5 instance",
+ "type": "p5"
},
- "namespaces": {}
+ "is_constructor": 1,
+ "module": "Structure",
+ "submodule": "Structure"
},
- "src/webgl/p5.DataArray.js": {
- "name": "src/webgl/p5.DataArray.js",
- "modules": {},
- "classes": {},
- "fors": {},
- "namespaces": {}
+ "p5.Color": {
+ "name": "p5.Color",
+ "file": "src/scripts/parsers/in/p5.js/src/color/p5.Color.js",
+ "line": 688,
+ "description": "<p>A class to describe a color.</p>\n<p>Each <code>p5.Color</code> object stores the color mode\nand level maxes that were active during its construction. These values are\nused to interpret the arguments passed to the object's constructor. They\nalso determine output formatting such as when\n<a href=\"#/p5/saturation\">saturation()</a> is called.</p>\n<p>Color is stored internally as an array of ideal RGBA values in floating\npoint form, normalized from 0 to 1. These values are used to calculate the\nclosest screen colors, which are RGBA levels from 0 to 255. Screen colors\nare sent to the renderer.</p>\n<p>When different color representations are calculated, the results are cached\nfor performance. These values are normalized, floating-point numbers.</p>\n<p>Note: <a href=\"#/p5/color\">color()</a> is the recommended way to create an\ninstance of this class.</p>\n",
+ "example": [],
+ "params": [
+ {
+ "name": "pInst",
+ "description": "pointer to p5 instance.",
+ "optional": 1,
+ "type": "p5"
+ },
+ {
+ "name": "vals",
+ "description": "an array containing the color values\nfor red, green, blue and alpha channel\nor CSS color.",
+ "type": "Number[]|String"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
- "src/webgl/p5.Framebuffer.js": {
- "name": "src/webgl/p5.Framebuffer.js",
- "modules": {
- "Rendering": 1
- },
- "classes": {
- "p5.FramebufferCamera": 1,
- "p5.FramebufferTexture": 1,
- "p5.Framebuffer": 1
- },
- "fors": {
- "p5.Framebuffer": 1
- },
- "namespaces": {}
+ "p5.Graphics": {
+ "name": "p5.Graphics",
+ "file": "src/scripts/parsers/in/p5.js/src/core/p5.Graphics.js",
+ "line": 673,
+ "extends": "p5.Element",
+ "description": "<p>A class to describe a drawing surface that's separate from the main canvas.</p>\n<p>Each <code>p5.Graphics</code> object provides a dedicated drawing surface called a\ngraphics buffer. Graphics buffers are helpful when drawing should happen\noffscreen. For example, separate scenes can be drawn offscreen and\ndisplayed only when needed.</p>\n<p><code>p5.Graphics</code> objects have nearly all the drawing features of the main\ncanvas. For example, calling the method <code>myGraphics.circle(50, 50, 20)</code>\ndraws to the graphics buffer. The resulting image can be displayed on the\nmain canvas by passing the <code>p5.Graphics</code> object to the\n<a href=\"#/p5/image\">image()</a> function, as in <code>image(myGraphics, 0, 0)</code>.</p>\n<p>Note: <a href=\"#/p5/createGraphics\">createGraphics()</a> is the recommended\nway to create an instance of this class.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(50, 50);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(25, 25, 20);\n\n describe('A dark gray square with a white circle at its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the p5.Graphics object.\n image(pg, 25, 25);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the canvas to display the graphics buffer.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(50, 50);\n\n describe('A square appears on a gray background when the user presses the mouse. The square cycles between white and black.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the background color.\n let bg = frameCount % 255;\n\n // Draw to the p5.Graphics object.\n pg.background(bg);\n\n // Display the p5.Graphics object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(pg, 25, 25);\n }\n}\n</code>\n</div>"
+ ],
+ "params": [
+ {
+ "name": "w",
+ "description": "width width of the graphics buffer in pixels.",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "description": "height height of the graphics buffer in pixels.",
+ "type": "Number"
+ },
+ {
+ "name": "renderer",
+ "description": "the renderer to use, either P2D or WEBGL.",
+ "type": "P2D|WEBGL|P2DHDR"
+ },
+ {
+ "name": "pInst",
+ "description": "sketch instance.",
+ "optional": 1,
+ "type": "p5"
+ },
+ {
+ "name": "canvas",
+ "description": "existing <code><canvas></code> element to use.",
+ "optional": 1,
+ "type": "HTMLCanvasElement"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "Rendering",
+ "submodule": "Rendering"
},
- "src/webgl/p5.Geometry.js": {
- "name": "src/webgl/p5.Geometry.js",
- "modules": {},
- "classes": {
- "p5.Geometry": 1
- },
- "fors": {
- "p5": 1,
- "p5.Geometry": 1
- },
- "namespaces": {}
+ "p5.Element": {
+ "name": "p5.Element",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 2466,
+ "description": "<p>A class to describe an\n<a href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\" target=\"_blank\">HTML element</a>.</p>\n<p>Sketches can use many elements. Common elements include the drawing canvas,\nbuttons, sliders, webcam feeds, and so on.</p>\n<p>All elements share the methods of the <code>p5.Element</code> class. They're created\nwith functions such as <a href=\"#/p5/createCanvas\">createCanvas()</a> and\n<a href=\"#/p5/createButton\">createButton()</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button element and\n // place it beneath the canvas.\n let btn = createButton('change');\n btn.position(0, 100);\n\n // Call randomColor() when\n // the button is pressed.\n btn.mousePressed(randomColor);\n\n describe('A gray square with a button that says \"change\" beneath it. The square changes color when the user presses the button.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
+ ],
+ "params": [
+ {
+ "name": "elt",
+ "description": "wrapped DOM element.",
+ "type": "HTMLElement"
+ },
+ {
+ "name": "pInst",
+ "description": "pointer to p5 instance.",
+ "optional": 1,
+ "type": "p5"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "DOM",
+ "submodule": "DOM"
},
- "src/webgl/p5.Matrix.js": {
- "name": "src/webgl/p5.Matrix.js",
- "modules": {},
- "classes": {
- "p5.Matrix": 1
- },
- "fors": {},
- "namespaces": {}
+ "p5.File": {
+ "name": "p5.File",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.File.js",
+ "line": 150,
+ "description": "<p>A class to describe a file.</p>\n<p><code>p5.File</code> objects are used by\n<a href=\"#/p5.Element/drop\">myElement.drop()</a> and\ncreated by\n<a href=\"#/p5/createFileInput\">createFileInput</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayInfo() when the file loads.\n let input = createFileInput(displayInfo);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');\n}\n\n// Display the p5.File's info once it loads.\nfunction displayInfo(file) {\n background(200);\n\n // Display the p5.File's name.\n text(file.name, 10, 10, 80, 40);\n\n // Display the p5.File's type and subtype.\n text(`${file.type}/${file.subtype}`, 10, 70);\n\n // Display the p5.File's size in bytes.\n text(file.size, 10, 90);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Use the file input to select an image to\n// load and display.\nlet img;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a file input and place it beneath the canvas.\n // Call handleImage() when the file image loads.\n let input = createFileInput(handleImage);\n input.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the image if it's ready.\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\n// Use the p5.File's data once it loads.\nfunction handleImage(file) {\n // Check the p5.File's type.\n if (file.type === 'image') {\n // Create an image using using the p5.File's data.\n img = createImg(file.data, '');\n\n // Hide the image element so it doesn't appear twice.\n img.hide();\n } else {\n img = null;\n }\n}\n</code>\n</div>"
+ ],
+ "params": [
+ {
+ "name": "file",
+ "description": "wrapped file.",
+ "type": "File"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "DOM",
+ "submodule": "DOM"
},
- "src/webgl/p5.Quat.js": {
- "name": "src/webgl/p5.Quat.js",
- "modules": {
- "Quaternion": 1
- },
- "classes": {
- "p5.Quat": 1
- },
- "fors": {},
- "namespaces": {}
+ "p5.MediaElement": {
+ "name": "p5.MediaElement",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 1782,
+ "extends": "p5.Element",
+ "description": "<p>A class to handle audio and video.</p>\n<p><code>p5.MediaElement</code> extends <a href=\"#/p5.Element\">p5.Element</a> with\nmethods to handle audio and video. <code>p5.MediaElement</code> objects are created by\ncalling <a href=\"#/p5/createVideo\">createVideo</a>,\n<a href=\"#/p5/createAudio\">createAudio</a>, and\n<a href=\"#/p5/createCapture\">createCapture</a>.</p>\n",
+ "example": [
+ "<div class='notest'>\n<code>\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createCapture().\n capture = createCapture(VIDEO);\n capture.hide();\n\n describe('A webcam feed with inverted colors.');\n}\n\nfunction draw() {\n // Display the video stream and invert the colors.\n image(capture, 0, 0, width, width * capture.height / capture.width);\n filter(INVERT);\n}\n</code>\n</div>"
+ ],
+ "params": [
+ {
+ "name": "elt",
+ "description": "DOM node that is wrapped",
+ "type": "String"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "DOM",
+ "submodule": "DOM"
},
- "src/webgl/p5.RenderBuffer.js": {
- "name": "src/webgl/p5.RenderBuffer.js",
- "modules": {},
- "classes": {},
- "fors": {},
- "namespaces": {}
+ "p5.Image": {
+ "name": "p5.Image",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 2243,
+ "description": "<p>A class to describe an image.</p>\n<p>Images are rectangular grids of pixels that can be displayed and modified.</p>\n<p>Existing images can be loaded by calling\n<a href=\"#/p5/loadImage\">loadImage()</a>. Blank images can be created by\ncalling <a href=\"#/p5/createImage\">createImage()</a>. <code>p5.Image</code> objects\nhave methods for common tasks such as applying filters and modifying\npixel values.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the GRAY filter.\n img.filter(GRAY);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A grayscale image of a brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>"
+ ],
+ "params": [
+ {
+ "name": "width",
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "type": "Number"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "Image",
+ "submodule": "Image"
},
- "src/webgl/p5.RendererGL.Immediate.js": {
- "name": "src/webgl/p5.RendererGL.Immediate.js",
- "modules": {},
- "classes": {},
- "fors": {},
- "namespaces": {}
+ "p5.PrintWriter": {
+ "name": "p5.PrintWriter",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 1374,
+ "description": "<p>A class to describe a print stream.</p>\n<p>Each <code>p5.PrintWriter</code> object provides a way to save a sequence of text\ndata, called the print stream, to the user's computer. It's a low-level\nobject that enables precise control of text output. Functions such as\n<a href=\"#/p5/saveStrings\">saveStrings()</a> and\n<a href=\"#/p5/saveJSON\">saveJSON()</a> are easier to use for simple file\nsaving.</p>\n<p>Note: <a href=\"#/p5/createWriter\">createWriter()</a> is the recommended way\nto make an instance of this class.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('xo.txt');\n\n // Add some lines to the print stream.\n myWriter.print('XOO');\n myWriter.print('OXO');\n myWriter.print('OOX');\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n</code>\n</div>"
+ ],
+ "params": [
+ {
+ "name": "filename",
+ "description": "name of the file to create.",
+ "type": "String"
+ },
+ {
+ "name": "extension",
+ "description": "format to use for the file.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "IO",
+ "submodule": "Input"
},
- "src/webgl/p5.RendererGL.Retained.js": {
- "name": "src/webgl/p5.RendererGL.Retained.js",
- "modules": {},
- "classes": {},
- "fors": {},
- "namespaces": {}
+ "p5.Table": {
+ "name": "p5.Table",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 1360,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
+ "description": "<a href=\"#/p5.Table\">Table</a> objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.",
+ "example": [],
+ "params": [
+ {
+ "name": "rows",
+ "description": "An array of p5.TableRow objects",
+ "optional": 1,
+ "type": "p5.TableRow[]"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "IO",
+ "submodule": "Table"
},
- "src/webgl/p5.RendererGL.js": {
- "name": "src/webgl/p5.RendererGL.js",
- "modules": {},
- "classes": {
- "p5.RendererGL": 1
- },
- "fors": {
- "p5": 1
- },
- "namespaces": {}
+ "p5.TableRow": {
+ "name": "p5.TableRow",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
+ "line": 368,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
+ "description": "<p>A TableRow object represents a single row of data values,\nstored in columns, from a table.</p>\n<p>A Table Row contains both an ordered array, and an unordered\nJSON object.</p>\n",
+ "example": [],
+ "params": [
+ {
+ "name": "row",
+ "description": "optional: populate the row with an\narray of values",
+ "type": "any[]"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "IO",
+ "submodule": "Table"
},
- "src/webgl/p5.Shader.js": {
- "name": "src/webgl/p5.Shader.js",
- "modules": {},
- "classes": {
- "p5.Shader": 1
- },
- "fors": {
- "p5": 1
- },
- "namespaces": {}
+ "p5.XML": {
+ "name": "p5.XML",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 1290,
+ "description": "<p>A class to describe an XML object.</p>\n<p>Each <code>p5.XML</code> object provides an easy way to interact with XML data.\nExtensible Markup Language\n(<a href=\"https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction\" target=\"_blank\">XML</a>)\nis a standard format for sending data between applications. Like HTML, the\nXML format is based on tags and attributes, as in\n<code><time units=\"s\">1234</time></code>.</p>\n<p>Note: Use <a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal tags.\n let mammals = myXML.getChildren('mammal');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the mammals array.\n for (let i = 0; i < mammals.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the mammal's common name.\n let name = mammals[i].getContent();\n\n // Display the mammal's name.\n text(name, 20, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Zebra\" written on three separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>"
+ ],
+ "params": [],
+ "is_constructor": 1,
+ "module": "IO",
+ "submodule": "Input"
},
- "src/webgl/p5.Texture.js": {
- "name": "src/webgl/p5.Texture.js",
- "modules": {},
- "classes": {
- "p5.Texture": 1
- },
- "fors": {
- "p5": 1
- },
- "namespaces": {}
- },
- "src/webgl/text.js": {
- "name": "src/webgl/text.js",
- "modules": {},
- "classes": {
- "ImageInfos": 1,
- "FontInfo": 1,
- "Cubic": 1
- },
- "fors": {},
- "namespaces": {}
+ "p5.Vector": {
+ "name": "p5.Vector",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3904,
+ "description": "<p>A class to describe a two or three-dimensional vector.</p>\n<p>A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection.</p>\n<p><code>p5.Vector</code> objects are often used to program motion because they simplify\nthe math. For example, a moving ball has a position and a velocity.\nPosition describes where the ball is in space. The ball's position vector\nextends from the origin to the ball's center. Velocity describes the ball's\nspeed and the direction it's moving. If the ball is moving straight up, its\nvelocity vector points straight up. Adding the ball's velocity vector to\nits position vector moves it, as in <code>pos.add(vel)</code>. Vector math relies on\nmethods inside the <code>p5.Vector</code> class.</p>\n<p>Note: <a href=\"#/p5/createVector\">createVector()</a> is the recommended way\nto make an instance of this class.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(25, 25);\n let p2 = createVector(75, 75);\n\n // Style the points.\n strokeWeight(5);\n\n // Draw the first point using a p5.Vector.\n point(p1);\n\n // Draw the second point using a p5.Vector's components.\n point(p2.x, p2.y);\n\n describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pos;\nlet vel;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n pos = createVector(50, 100);\n vel = createVector(0, -1);\n\n describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');\n}\n\nfunction draw() {\n background(200);\n\n // Add velocity to position.\n pos.add(vel);\n\n // If the dot reaches the top of the canvas,\n // restart from the bottom.\n if (pos.y < 0) {\n pos.y = 100;\n }\n\n // Draw the dot.\n strokeWeight(5);\n point(pos);\n}\n</code>\n</div>"
+ ],
+ "params": [
+ {
+ "name": "x",
+ "description": "x component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "Math"
},
- "lib/addons/p5.sound.js": {
- "name": "lib/addons/p5.sound.js",
- "modules": {
- "p5.sound": 1
- },
- "classes": {
- "p5.SoundFile": 1,
- "p5.Amplitude": 1,
- "p5.FFT": 1,
- "p5.Oscillator": 1,
- "p5.SinOsc": 1,
- "p5.TriOsc": 1,
- "p5.SawOsc": 1,
- "p5.SqrOsc": 1,
- "p5.Envelope": 1,
- "p5.Noise": 1,
- "p5.Pulse": 1,
- "p5.AudioIn": 1,
- "p5.Effect": 1,
- "p5.Filter": 1,
- "p5.LowPass": 1,
- "p5.HighPass": 1,
- "p5.BandPass": 1,
- "p5.EQ": 1,
- "p5.Panner3D": 1,
- "p5.Delay": 1,
- "p5.Reverb": 1,
- "p5.Convolver": 1,
- "p5.Phrase": 1,
- "p5.Part": 1,
- "p5.Score": 1,
- "p5.SoundLoop": 1,
- "p5.Compressor": 1,
- "p5.PeakDetect": 1,
- "p5.SoundRecorder": 1,
- "p5.Distortion": 1,
- "p5.Gain": 1,
- "p5.AudioVoice": 1,
- "p5.MonoSynth": 1,
- "p5.OnsetDetect": 1,
- "p5.PolySynth": 1
- },
- "fors": {
- "p5.sound": 1,
- "p5": 1,
- "p5.SoundFile": 1,
- "p5.Amplitude": 1,
- "p5.FFT": 1,
- "p5.Oscillator": 1,
- "p5.Envelope": 1,
- "p5.AudioIn": 1,
- "p5.Effect": 1,
- "p5.EQ": 1,
- "p5.Panner3D": 1,
- "p5.Delay": 1,
- "p5.Reverb": 1,
- "p5.Convolver": 1,
- "p5.Part": 1,
- "p5.Score": 1,
- "p5.SoundLoop": 1,
- "p5.Compressor": 1,
- "p5.SoundRecorder": 1,
- "p5.Distortion": 1,
- "p5.Gain": 1,
- "p5.AudioVoice": 1,
- "p5.MonoSynth": 1,
- "p5.PolySynth": 1
- },
- "namespaces": {}
+ "p5.Font": {
+ "name": "p5.Font",
+ "file": "src/scripts/parsers/in/p5.js/src/type/p5.Font.js",
+ "line": 1149,
+ "description": "A class to describe fonts. Create through <a href=\"#/p5/loadFont\"><code>loadFont()</code></a>.",
+ "example": [],
+ "params": [],
+ "is_constructor": 1,
+ "module": "Typography"
},
- "lib/addons/p5.sound.min.js": {
- "name": "lib/addons/p5.sound.min.js",
- "modules": {},
- "classes": {},
- "fors": {},
- "namespaces": {}
- }
- },
- "modules": {
- "Environment": {
- "name": "Environment",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {},
- "module": "Environment",
- "file": "src/accessibility/color_namer.js",
- "line": 1,
- "requires": [
- "core"
- ]
+ "p5.Camera": {
+ "name": "p5.Camera",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 3957,
+ "description": "<p>A class to describe a camera for viewing a 3D sketch.</p>\n<p>Each <code>p5.Camera</code> object represents a camera that views a section of 3D\nspace. It stores information about the camera’s position, orientation, and\nprojection.</p>\n<p>In WebGL mode, the default camera is a <code>p5.Camera</code> object that can be\ncontrolled with the <a href=\"#/p5/camera\">camera()</a>,\n<a href=\"#/p5/perspective\">perspective()</a>,\n<a href=\"#/p5/ortho\">ortho()</a>, and\n<a href=\"#/p5/frustum\">frustum()</a> functions. Additional cameras can be\ncreated with <a href=\"#/p5/createCamera\">createCamera()</a> and activated\nwith <a href=\"#/p5/setCamera\">setCamera()</a>.</p>\n<p>Note: <code>p5.Camera</code>’s methods operate in two coordinate systems:</p>\n<ul><li>The “world” coordinate system describes positions in terms of their\nrelationship to the origin along the x-, y-, and z-axes. For example,\ncalling <code>myCamera.setPosition()</code> places the camera in 3D space using\n\"world\" coordinates.</li><li>The \"local\" coordinate system describes positions from the camera's point\nof view: left-right, up-down, and forward-backward. For example, calling\n<code>myCamera.move()</code> moves the camera along its own axes.</li></ul>",
+ "example": [
+ "<div>\n<code>\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn the camera left and right, called \"panning\".\n cam.pan(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>"
+ ],
+ "params": [
+ {
+ "name": "rendererGL",
+ "description": "instance of WebGL renderer",
+ "type": "rendererGL"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "3D",
+ "submodule": "Camera"
},
- "Color": {
- "name": "Color",
- "submodules": {
- "Color Conversion": 1,
- "Creating & Reading": 1,
- "Setting": 1
- },
- "elements": {},
- "classes": {
- "p5.Color": 1
- },
- "fors": {
- "p5": 1
- },
- "namespaces": {},
- "file": "src/color/p5.Color.js",
- "line": 318
+ "p5.Framebuffer": {
+ "name": "p5.Framebuffer",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 1650,
+ "description": "<p>A class to describe a high-performance drawing surface for textures.</p>\n<p>Each <code>p5.Framebuffer</code> object provides a dedicated drawing surface called\na framebuffer. They're similar to\n<a href=\"#/p5.Graphics\">p5.Graphics</a> objects but can run much faster.\nPerformance is improved because the framebuffer shares the same WebGL\ncontext as the canvas used to create it.</p>\n<p><code>p5.Framebuffer</code> objects have all the drawing features of the main\ncanvas. Drawing instructions meant for the framebuffer must be placed\nbetween calls to\n<a href=\"#/p5.Framebuffer/begin\">myBuffer.begin()</a> and\n<a href=\"#/p5.Framebuffer/end\">myBuffer.end()</a>. The resulting image\ncan be applied as a texture by passing the <code>p5.Framebuffer</code> object to the\n<a href=\"#/p5/texture\">texture()</a> function, as in <code>texture(myBuffer)</code>.\nIt can also be displayed on the main canvas by passing it to the\n<a href=\"#/p5/image\">image()</a> function, as in <code>image(myBuffer, 0, 0)</code>.</p>\n<p>Note: <a href=\"#/p5/createFramebuffer\">createFramebuffer()</a> is the\nrecommended way to create an instance of this class.</p>\n",
+ "example": [],
+ "params": [
+ {
+ "name": "target",
+ "description": "sketch instance or\n<a href=\"#/p5.Graphics\">p5.Graphics</a>\nobject.",
+ "type": "p5.Graphics|p5"
+ },
+ {
+ "name": "settings",
+ "description": "configuration options.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "Rendering"
},
- "Color Conversion": {
- "name": "Color Conversion",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Color",
- "namespace": "",
- "file": "src/color/color_conversion.js",
- "line": 1,
- "requires": [
- "core"
- ]
+ "p5.Geometry": {
+ "name": "p5.Geometry",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 2165,
+ "description": "<p>A class to describe a 3D shape.</p>\n<p>Each <code>p5.Geometry</code> object represents a 3D shape as a set of connected\npoints called vertices. All 3D shapes are made by connecting vertices to\nform triangles that are stitched together. Each triangular patch on the\ngeometry's surface is called a face. The geometry stores information\nabout its vertices and faces for use with effects such as lighting and\ntexture mapping.</p>\n<p>The first parameter, <code>detailX</code>, is optional. If a number is passed, as in\n<code>new p5.Geometry(24)</code>, it sets the number of triangle subdivisions to use\nalong the geometry's x-axis. By default, <code>detailX</code> is 1.</p>\n<p>The second parameter, <code>detailY</code>, is also optional. If a number is passed,\nas in <code>new p5.Geometry(24, 16)</code>, it sets the number of triangle\nsubdivisions to use along the geometry's y-axis. By default, <code>detailX</code> is\n1.</p>\n<p>The third parameter, <code>callback</code>, is also optional. If a function is passed,\nas in <code>new p5.Geometry(24, 16, createShape)</code>, it will be called once to add\nvertices to the new 3D shape.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = new p5.Geometry();\n\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(40, 0, 0);\n\n // Add the vertices to the p5.Geometry object's vertices array.\n myGeometry.vertices.push(v0, v1, v2);\n\n describe('A white triangle drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object using a callback function.\n myGeometry = new p5.Geometry(1, 1, createShape);\n\n describe('A white triangle drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(40, 0, 0);\n\n // \"this\" refers to the p5.Geometry object being created.\n\n // Add the vertices to the p5.Geometry object's vertices array.\n this.vertices.push(v0, v1, v2);\n\n // Add an array to list which vertices belong to the face.\n // Vertices are listed in clockwise \"winding\" order from\n // left to top to right.\n this.faces.push([0, 1, 2]);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object using a callback function.\n myGeometry = new p5.Geometry(1, 1, createShape);\n\n describe('A white triangle drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(40, 0, 0);\n\n // \"this\" refers to the p5.Geometry object being created.\n\n // Add the vertices to the p5.Geometry object's vertices array.\n this.vertices.push(v0, v1, v2);\n\n // Add an array to list which vertices belong to the face.\n // Vertices are listed in clockwise \"winding\" order from\n // left to top to right.\n this.faces.push([0, 1, 2]);\n\n // Compute the surface normals to help with lighting.\n this.computeNormals();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\n// Adapted from Paul Wheeler's wonderful p5.Geometry tutorial.\n// https://www.paulwheeler.us/articles/custom-3d-geometry-in-p5js/\n// CC-BY-SA 4.0\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n // Set detailX to 48 and detailY to 2.\n // >>> try changing them.\n myGeometry = new p5.Geometry(48, 2, createShape);\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n strokeWeight(0.2);\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n\nfunction createShape() {\n // \"this\" refers to the p5.Geometry object being created.\n\n // Define the Möbius strip with a few parameters.\n let spread = 0.1;\n let radius = 30;\n let stripWidth = 15;\n let xInterval = 4 * PI / this.detailX;\n let yOffset = -stripWidth / 2;\n let yInterval = stripWidth / this.detailY;\n\n for (let j = 0; j <= this.detailY; j += 1) {\n // Calculate the \"vertical\" point along the strip.\n let v = yOffset + yInterval * j;\n\n for (let i = 0; i <= this.detailX; i += 1) {\n // Calculate the angle of rotation around the strip.\n let u = i * xInterval;\n\n // Calculate the coordinates of the vertex.\n let x = (radius + v * cos(u / 2)) * cos(u) - sin(u / 2) * 2 * spread;\n let y = (radius + v * cos(u / 2)) * sin(u);\n if (u < TWO_PI) {\n y += sin(u) * spread;\n } else {\n y -= sin(u) * spread;\n }\n let z = v * sin(u / 2) + sin(u / 4) * 4 * spread;\n\n // Create a p5.Vector object to position the vertex.\n let vert = createVector(x, y, z);\n\n // Add the vertex to the p5.Geometry object's vertices array.\n this.vertices.push(vert);\n }\n }\n\n // Compute the faces array.\n this.computeFaces();\n\n // Compute the surface normals to help with lighting.\n this.computeNormals();\n}\n</code>\n</div>"
+ ],
+ "params": [
+ {
+ "name": "detailX",
+ "description": "number of vertices along the x-axis.",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "detailY",
+ "description": "number of vertices along the y-axis.",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "callback",
+ "description": "function to call once the geometry is created.",
+ "optional": 1,
+ "type": "function"
+ }
+ ],
+ "is_constructor": 1,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
- "Creating & Reading": {
- "name": "Creating & Reading",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.Color": 1
- },
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Color",
- "namespace": "",
- "file": "src/color/p5.Color.js",
- "line": 318,
- "requires": [
- "core",
- "constants"
+ "p5.Shader": {
+ "name": "p5.Shader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Shader.js",
+ "line": 1497,
+ "description": "<p>A class to describe a shader program.</p>\n<p>Each <code>p5.Shader</code> object contains a shader program that runs on the graphics\nprocessing unit (GPU). Shaders can process many pixels or vertices at the\nsame time, making them fast for many graphics tasks. They’re written in a\nlanguage called\n<a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\" target=\"_blank\">GLSL</a>\nand run along with the rest of the code in a sketch.</p>\n<p>A shader program consists of two files, a vertex shader and a fragment\nshader. The vertex shader affects where 3D geometry is drawn on the screen\nand the fragment shader affects color. Once the <code>p5.Shader</code> object is\ncreated, it can be used with the <a href=\"#/p5/shader\">shader()</a>\nfunction, as in <code>shader(myShader)</code>.</p>\n<p>A shader can optionally describe hooks, which are functions in GLSL that\nusers may choose to provide to customize the behavior of the shader. For the\nvertex or the fragment shader, users can pass in an object where each key is\nthe type and name of a hook function, and each value is a string with the\nparameter list and default implementation of the hook. For example, to let users\noptionally run code at the start of the vertex shader, the options object could\ninclude:</p>\n<pre><code class=\"language-js\">{\n vertex: {\n 'void beforeVertex': '() {}'\n }\n}</code></pre><p>Then, in your vertex shader source, you can run a hook by calling a function\nwith the same name prefixed by <code>HOOK_</code>:</p>\n<pre><code class=\"language-glsl\">void main() {\n HOOK_beforeVertex();\n // Add the rest ofy our shader code here!\n}</code></pre><p>Note: <a href=\"#/p5/createShader\">createShader()</a>,\n<a href=\"#/p5/createFilterShader\">createFilterShader()</a>, and\n<a href=\"#/p5/loadShader\">loadShader()</a> are the recommended ways to\ncreate an instance of this class.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(myShader);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\nasync function setup() {\n mandelbrot = await loadShader('assets/shader.vert', 'assets/shader.frag');\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n</code>\n</div>"
+ ],
+ "params": [
+ {
+ "name": "renderer",
+ "description": "WebGL context for this shader.",
+ "type": "p5.RendererGL"
+ },
+ {
+ "name": "vertSrc",
+ "description": "source code for the vertex shader program.",
+ "type": "String"
+ },
+ {
+ "name": "fragSrc",
+ "description": "source code for the fragment shader program.",
+ "type": "String"
+ },
+ {
+ "name": "options",
+ "description": "<p>An optional object describing how this shader can\nbe augmented with hooks. It can include:</p>\n<ul><li><code>vertex</code>: An object describing the available vertex shader hooks.</li><li><code>fragment</code>: An object describing the available frament shader hooks.</li></ul>",
+ "optional": 1,
+ "type": "Object"
+ }
],
- "description": "<p>A class to describe a color.</p>\n<p>Each <code>p5.Color</code> object stores the color mode\nand level maxes that were active during its construction. These values are\nused to interpret the arguments passed to the object's constructor. They\nalso determine output formatting such as when\n<a href=\"#/p5/saturation\">saturation()</a> is called.</p>\n<p>Color is stored internally as an array of ideal RGBA values in floating\npoint form, normalized from 0 to 1. These values are used to calculate the\nclosest screen colors, which are RGBA levels from 0 to 255. Screen colors\nare sent to the renderer.</p>\n<p>When different color representations are calculated, the results are cached\nfor performance. These values are normalized, floating-point numbers.</p>\n<p>Note: <a href=\"#/p5/color\">color()</a> is the recommended way to create an\ninstance of this class.</p>\n"
+ "is_constructor": 1,
+ "module": "3D",
+ "submodule": "Material"
},
- "Setting": {
- "name": "Setting",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Color",
+ "p5.p5.sound": {
+ "name": "p5.p5.sound",
+ "shortname": "p5.sound",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
+ "namespace": ""
+ },
+ "p5.Amplitude": {
+ "name": "p5.Amplitude",
+ "shortname": "Amplitude",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/color/setting.js",
- "line": 1,
- "requires": [
- "core",
- "constants"
+ "file": "src/Amplitude.js",
+ "line": 10,
+ "description": "Get the current volume of a sound.",
+ "is_constructor": 1,
+ "params": [
+ {
+ "name": "smoothing",
+ "description": "Smooth the amplitude analysis by averaging with the last analysis frame. 0.0 is no time averaging with the last analysis frame.",
+ "type": "Number",
+ "optional": true
+ }
+ ],
+ "example": [
+ "\n<div>\n<code>\nlet sound, amp, cnv;\n \nfunction preload() {\n //replace this sound with something local with rights to distribute\n sound = loadSound('/assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n textAlign(CENTER);\n fill(255);\n amp = new p5.Amplitude();\n sound.connect(amp);\n}\n\nfunction playSound() {\n sound.play();\n}\n\nfunction draw() {\n let level = amp.getLevel();\n level = map(level, 0, 0.2, 0, 255);\n background(level, 0, 0);\n text('tap to play', width/2, 20);\n describe('The color of the background changes based on the amplitude of the sound.');\n}\n</code>\n</div>"
]
},
- "Shape": {
- "name": "Shape",
- "submodules": {
- "2D Primitives": 1,
- "Curves": 1,
- "Vertex": 1,
- "3D Primitives": 1,
- "3D Models": 1
- },
- "elements": {},
- "classes": {
- "p5.Geometry": 1,
- "p5.Matrix": 1
- },
- "fors": {
- "p5": 1,
- "p5.Geometry": 1
- },
- "namespaces": {},
- "file": "src/webgl/p5.Matrix.js",
- "line": 19
- },
- "2D Primitives": {
- "name": "2D Primitives",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Shape",
+ "p5.AudioIn": {
+ "name": "p5.AudioIn",
+ "shortname": "AudioIn",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/core/shape/2d_primitives.js",
- "line": 1,
- "requires": [
- "core",
- "constants"
+ "file": "src/AudioIn.js",
+ "line": 11,
+ "description": "Get sound from an input source, typically a computer microphone.",
+ "is_constructor": 1,
+ "example": [
+ "\n<div>\n<code>\nlet mic, delay, filter;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(startMic);\n background(220);\n \n mic = new p5.AudioIn();\n delay = new p5.Delay(0.74, 0.1);\n filter = new p5.Biquad(600, \"bandpass\");\n \n mic.disconnect();\n mic.connect(delay);\n delay.disconnect();\n delay.connect(filter);\n \n textAlign(CENTER);\n textWrap(WORD);\n textSize(10);\n text('click to open mic, watch out for feedback', 0, 20, 100);\n describe('a sketch that accesses the user\\'s microphone and connects it to a delay line.')\n}\n\nfunction startMic() {\n mic.start();\n}\n\nfunction draw() {\n d = map(mouseX, 0, width, 0.0, 0.5);\n delay.delayTime(d);\n}\n</code>\n</div>"
]
},
- "Attributes": {
- "name": "Attributes",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Typography",
+ "p5.Biquad": {
+ "name": "p5.Biquad",
+ "shortname": "Biquad",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/core/shape/attributes.js",
- "line": 1,
- "requires": [
- "core",
- "constants"
+ "file": "src/Biquad.js",
+ "line": 11,
+ "description": "Filter the frequency range of a sound.",
+ "is_constructor": 1,
+ "params": [
+ {
+ "name": "cutoff",
+ "description": "cutoff frequency of the filter, a value between 0 and 24000.",
+ "type": "Number",
+ "optional": true
+ },
+ {
+ "name": "type",
+ "description": "filter type. Options: \"lowpass\", \n \"highpass\", \"bandpass\", \"lowshelf\",\n \"highshelf\", \"notch\", \"allpass\", \n \"peaking\"",
+ "type": "String",
+ "optional": true
+ }
+ ],
+ "example": [
+ "\n<div>\n<code>\n///kind of Karplus-Strong string synthesis using p5.sound.js\n\nlet noise, lowPass, hiPass, delay, env, gain;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textSize(9);\n text('click and drag mouse', width/2, height/2);\n \n noise = new p5.Noise('white');\n env = new p5.Envelope(0);\n lowPass = new p5.Biquad(1200, 'lowpass');\n hiPass = new p5.Biquad(55, 'highpass');\n delay = new p5.Delay(0.0005, 0.97);\n gain = new p5.Gain(0.5);\n noise.disconnect();\n noise.connect(hiPass);\n hiPass.disconnect();\n hiPass.connect(env);\n env.disconnect();\n env.connect(lowPass);\n lowPass.disconnect();\n lowPass.connect(delay);\n\n cnv.mousePressed(pluckStart);\n cnv.mouseReleased(pluckStop);\n cnv.mouseOut(pluckStop);\n describe('A sketch that synthesizes string sounds.');\n}\n\nfunction pluckStart() {\n background(0, 255, 255);\n text('release to trigger decay', width/2, height/2);\n let dtime = map(mouseX, 0, width, 0.009, 0.001);\n delay.delayTime(dtime, 0);\n noise.start();\n env.triggerAttack();\n}\n\nfunction pluckStop() {\n background(220);\n text('click to pluck', width/2, height/2);\n env.triggerRelease();\n}\n</code>\n</div>"
]
},
- "Curves": {
- "name": "Curves",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Shape",
+ "p5.LowPass": {
+ "name": "p5.LowPass",
+ "shortname": "LowPass",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/core/shape/curves.js",
- "line": 1,
- "requires": [
- "core"
+ "file": "src/Biquad.js",
+ "line": 136,
+ "description": "Creates a Lowpass Biquad filter.",
+ "is_constructor": 1,
+ "extends": "Biquad",
+ "params": [
+ {
+ "name": "freq",
+ "description": "Set the cutoff frequency of the filter",
+ "type": "Number",
+ "optional": true
+ }
]
},
- "Vertex": {
- "name": "Vertex",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Shape",
+ "p5.HighPass": {
+ "name": "p5.HighPass",
+ "shortname": "HighPass",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/core/shape/vertex.js",
- "line": 1,
- "requires": [
- "core",
- "constants"
+ "file": "src/Biquad.js",
+ "line": 150,
+ "description": "Creates a Highpass Biquad filter.",
+ "is_constructor": 1,
+ "extends": "Biquad",
+ "params": [
+ {
+ "name": "freq",
+ "description": "Set the cutoff frequency of the filter",
+ "type": "Number",
+ "optional": true
+ }
]
},
- "Constants": {
- "name": "Constants",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {},
- "module": "Constants",
- "file": "src/core/constants.js",
- "line": 1
- },
- "Structure": {
- "name": "Structure",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {},
- "module": "IO",
- "file": "src/core/main.js",
- "line": 1,
- "requires": [
- "constants"
+ "p5.BandPass": {
+ "name": "p5.BandPass",
+ "shortname": "BandPass",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
+ "namespace": "",
+ "file": "src/Biquad.js",
+ "line": 164,
+ "description": "Creates a Bandpass Biquad filter.",
+ "is_constructor": 1,
+ "extends": "Biquad",
+ "params": [
+ {
+ "name": "freq",
+ "description": "Set the cutoff frequency of the filter",
+ "type": "Number",
+ "optional": true
+ }
]
},
- "DOM": {
- "name": "DOM",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.Element": 1,
- "p5.MediaElement": 1,
- "p5.File": 1
- },
- "fors": {
- "p5.Element": 1,
- "p5": 1
- },
- "namespaces": {},
- "module": "DOM",
- "file": "src/dom/dom.js",
- "line": 5482,
- "description": "<p>The web is much more than just canvas and the DOM functionality makes it easy to interact\nwith other HTML5 objects, including text, hyperlink, image, input, video,\naudio, and webcam.\nThere is a set of creation methods, DOM manipulation methods, and\nan extended <a href=\"#/p5.Element\">p5.Element</a> that supports a range of HTML elements. See the\n<a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>\nbeyond the canvas tutorial</a> for a full overview of how this addon works.</p>\n<p>See <a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>tutorial: beyond the canvas</a>\nfor more info on how to use this library.</a></p>\n",
- "requires": [
- "p5"
+ "p5.Delay": {
+ "name": "p5.Delay",
+ "shortname": "Delay",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
+ "namespace": "",
+ "file": "src/Delay.js",
+ "line": 12,
+ "description": "A delay effect with parameters for feedback, and delay time.",
+ "is_constructor": 1,
+ "params": [
+ {
+ "name": "delayTime",
+ "description": "The delay time in seconds between 0 and 1. Defaults to 0.250.",
+ "type": "Number",
+ "optional": true
+ },
+ {
+ "name": "feedback",
+ "description": "The amount of feedback in the delay line between 0 and 1. Defaults to 0.2.",
+ "type": "Number",
+ "optional": true
+ }
+ ],
+ "example": [
+ "\n<div>\n<code>\nlet osc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n text('tap to play', width/2, height/2);\n\n osc = new p5.Oscillator('square');\n osc.amp(0.5);\n delay = new p5.Delay(0.12, 0.7);\n \n osc.disconnect();\n osc.connect(delay);\n\n cnv.mousePressed(oscStart);\n describe('Tap to play a square wave with delay effect.');\n}\n\nfunction oscStart() {\n osc.start();\n}\n\n</code>\n</div>\nfunction mouseReleased() {\n osc.stop();\n}"
]
},
- "Rendering": {
- "name": "Rendering",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.Graphics": 1,
- "p5.Renderer": 1,
- "p5.FramebufferCamera": 1,
- "p5.FramebufferTexture": 1,
- "p5.Framebuffer": 1,
- "p5.RendererGL": 1
- },
- "fors": {
- "p5": 1,
- "p5.Framebuffer": 1
- },
- "namespaces": {},
- "module": "Rendering",
- "file": "src/webgl/p5.RendererGL.js",
- "line": 948,
- "tag": "module",
- "description": "<p>A class to describe a drawing surface that's separate from the main canvas.</p>\n<p>Each <code>p5.Graphics</code> object provides a dedicated drawing surface called a\n<em>graphics buffer</em>. Graphics buffers are helpful when drawing should happen\noffscreen. For example, separate scenes can be drawn offscreen and\ndisplayed only when needed.</p>\n<p><code>p5.Graphics</code> objects have nearly all the drawing features of the main\ncanvas. For example, calling the method <code>myGraphics.circle(50, 50, 20)</code>\ndraws to the graphics buffer. The resulting image can be displayed on the\nmain canvas by passing the <code>p5.Graphics</code> object to the\n<a href=\"#/p5/image\">image()</a> function, as in <code>image(myGraphics, 0, 0)</code>.</p>\n<p>Note: <a href=\"#/p5/createGraphics\">createGraphics()</a> is the recommended\nway to create an instance of this class.</p>\n",
- "requires": [
- "constants"
+ "p5.Envelope": {
+ "name": "p5.Envelope",
+ "shortname": "Envelope",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
+ "namespace": "",
+ "file": "src/Envelope.js",
+ "line": 10,
+ "description": "Generate an amplitude envelope.",
+ "is_constructor": 1,
+ "params": [
+ {
+ "name": "attack",
+ "description": "how quickly the envelope reaches the maximum level",
+ "type": "Number",
+ "optional": true
+ },
+ {
+ "name": "decay",
+ "description": "how quickly the envelope reaches the sustain level",
+ "type": "Number",
+ "optional": true
+ },
+ {
+ "name": "sustain",
+ "description": "how long the envelope stays at the decay level",
+ "type": "Number",
+ "optional": true
+ },
+ {
+ "name": "release",
+ "description": "how quickly the envelope fades out after the sustain level",
+ "type": "Number",
+ "optional": true
+ }
+ ],
+ "example": [
+ "\n<div>\n<code>\nconsole.log('do an example here');\n</code>\n</div>"
]
},
- "Foundation": {
- "name": "Foundation",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {},
- "module": "Foundation",
- "file": "src/core/reference.js",
- "line": 1
+ "p5.FFT": {
+ "name": "p5.FFT",
+ "shortname": "FFT",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
+ "namespace": "",
+ "file": "src/FFT.js",
+ "line": 11,
+ "description": "Analyze the frequency spectrum and waveform of sounds.",
+ "is_constructor": 1,
+ "params": [
+ {
+ "name": "fftSize",
+ "description": "FFT analysis size. Must be a power of two between 16 and 1024. Defaults to 32.",
+ "type": "Number",
+ "optional": true
+ }
+ ],
+ "example": [
+ "\n<div>\n<code>\nlet osc;\n\nfunction setup(){\n let cnv = createCanvas(100,100);\n cnv.mouseClicked(togglePlay);\n fft = new p5.FFT(32);\n osc = new p5.TriOsc(440);\n osc.connect(fft);\n}\n\nfunction draw(){\n background(220);\n let spectrum = fft.analyze();\n noStroke();\n fill(255, 0, 0);\n\n for (let i = 0; i < spectrum.length; i++) {\n let x = map(i, 0, spectrum.length, 0, width); \n let h = -height + map(spectrum[i], 0, 0.1, height, 0);\n rect(x, height, width / spectrum.length, h )\n }\n\n let waveform = fft.waveform();\n noFill();\n beginShape();\n stroke(20);\n \n for (let i = 0; i < waveform.length; i++){\n let x = map(i, 0, waveform.length, 0, width);\n let y = map( waveform[i], -1, 1, 0, height);\n vertex(x,y);\n }\n endShape();\n \n textAlign(CENTER);\n text('tap to play', width/2, 20);\n osc.freq(map(mouseX, 0, width, 100, 2000));\n describe('The sketch displays the frequency spectrum and waveform of the sound that plays.');\n}\n\nfunction togglePlay() {\n osc.start();\n}\n</code>\n</div>"
+ ]
},
- "Transform": {
- "name": "Transform",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {},
- "module": "Transform",
- "file": "src/core/transform.js",
- "line": 1,
- "requires": [
- "core",
- "constants"
+ "p5.Gain": {
+ "name": "p5.Gain",
+ "shortname": "Gain",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
+ "namespace": "",
+ "file": "src/Gain.js",
+ "line": 10,
+ "description": "Generate a gain node to use for mixing and main volume.",
+ "is_constructor": 1,
+ "example": [
+ "\n<div>\n<code>\nlet cnv, soundFile, osc, gain;\n\nfunction preload() {\n soundFile = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n\n gain = new p5.Gain(0.74);\n osc = new p5.Oscillator();\n osc.amp(0.74);\n osc.disconnect();\n soundFile.loop();\n soundFile.disconnect();\n\n //connect both sound sources to gain node\n soundFile.connect(gain);\n osc.connect(gain);\n}\n\nfunction playSound() {\n soundFile.play();\n soundFile.play();\n}\n\nfunction draw() {\n background(220);\n let level = map(mouseX, 0, width, 0, 1);\n gain.amp(level);\n}\n</code>\n</div>"
]
},
- "Data": {
- "name": "Data",
- "submodules": {
- "LocalStorage": 1,
- "Dictionary": 1,
- "Array Functions": 1,
- "Conversion": 1,
- "String Functions": 1
- },
- "elements": {},
- "classes": {
- "p5.TypedDict": 1,
- "p5.StringDict": 1,
- "p5.NumberDict": 1
- },
- "fors": {
- "p5": 1,
- "p5.TypedDict": 1
- },
- "namespaces": {},
- "file": "src/data/p5.TypedDict.js",
- "line": 415
- },
- "LocalStorage": {
- "name": "LocalStorage",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Data",
+ "p5.Noise": {
+ "name": "p5.Noise",
+ "shortname": "Noise",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/data/local_storage.js",
- "line": 1,
- "requires": [
- "core\n\nThis module defines the p5 methods for working with local storage"
+ "file": "src/Noise.js",
+ "line": 11,
+ "description": "Generate a buffer with random values.",
+ "is_constructor": 1,
+ "params": [
+ {
+ "name": "type",
+ "description": "- the type of noise (white, pink, brown)",
+ "type": "String",
+ "optional": true
+ }
+ ],
+ "example": [
+ "\n<div>\n<code>\nlet noise, env, cnv;\nlet types = ['white', 'pink', 'brown'];\nlet noiseType = 'brown';\n\nfunction setup() {\n cnv = createCanvas(100, 100);\n textAlign(CENTER);\n cnv.mousePressed(start);\n noise = new p5.Noise(noiseType);\n env = new p5.Envelope(0.01, 0.1, 0.15, 0.5);\n noise.disconnect();\n noise.connect(env);\n noise.start();\n}\n\nfunction start() {\n noiseType = random(types);\n noise.type(noiseType);\n env.play();\n}\n\nfunction draw() {\n background(noiseType);\n text('tap to play', width/2, 20);\n let txt = 'type: ' + noiseType;\n text(txt, width/2, 40);\n}\n</code>\n</div>"
]
},
- "Dictionary": {
- "name": "Dictionary",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.TypedDict": 1,
- "p5.StringDict": 1,
- "p5.NumberDict": 1
- },
- "fors": {
- "p5.TypedDict": 1,
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Data",
+ "p5.Oscillator": {
+ "name": "p5.Oscillator",
+ "shortname": "Oscillator",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/data/p5.TypedDict.js",
- "line": 415,
- "requires": [
- "core\n\nThis module defines the p5 methods for the p5 Dictionary classes.\nThe classes StringDict and NumberDict are for storing and working\nwith key-value pairs."
- ],
- "description": "<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\n"
- },
- "Events": {
- "name": "Events",
- "submodules": {
- "Acceleration": 1,
- "Keyboard": 1,
- "Mouse": 1,
- "Touch": 1
- },
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "namespaces": {},
- "file": "src/events/acceleration.js",
- "line": 1,
- "requires": [
- "core"
+ "file": "src/Oscillator.js",
+ "line": 12,
+ "description": "Generate Sine, Triangle, Square and Sawtooth waveforms.",
+ "is_constructor": 1,
+ "params": [
+ {
+ "name": "frequency",
+ "description": "frequency defaults to 440Hz",
+ "type": "Number",
+ "optional": true
+ },
+ {
+ "name": "type",
+ "description": "type of oscillator. Options:\n 'sine' (default), 'triangle',\n 'sawtooth', 'square'",
+ "type": "String",
+ "optional": true
+ }
],
- "tag": "main",
- "itemtype": "main"
+ "example": [
+ "\n<div>\n<code>\nlet osc, playing, freq, amp;\n\nfunction setup() {\n describe(\"a sketch that demonstrates the frequency and amplitude parameters of an oscillator.\");\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playOscillator);\n osc = new p5.Oscillator();\n}\n\nfunction draw() {\n background(220)\n freq = constrain(map(mouseX, 0, width, 100, 500), 100, 500);\n //amp = constrain(map(mouseY, height, 0, 0, 1), 0, 1);\n text('tap to play', 20, 20);\n text('freq: ' + freq, 20, 40);\n //text('amp: ' + amp, 20, 60);\n\n if (playing) {\n // smooth the transitions by 0.1 seconds\n osc.freq(freq);\n //osc.amp(amp);\n }\n}\n\nfunction playOscillator() {\n // starting an oscillator on a user gesture will enable audio\n // in browsers that have a strict autoplay policy.\n osc.start();\n playing = true;\n}\n\nfunction mouseReleased() {\n // ramp amplitude to 0 over 0.5 seconds\n //osc.amp(0, 0.5);\n playing = false;\n}\n</code> \n</div>"
+ ]
},
- "Acceleration": {
- "name": "Acceleration",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Events",
+ "p5.SawOsc": {
+ "name": "p5.SawOsc",
+ "shortname": "SawOsc",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/events/acceleration.js",
- "line": 1,
- "requires": [
- "core"
- ],
- "tag": "main",
- "itemtype": "main"
+ "file": "src/Oscillator.js",
+ "line": 220,
+ "description": "Creates a sawtooth oscillator.",
+ "is_constructor": 1,
+ "extends": "Oscillator",
+ "params": [
+ {
+ "name": "freq",
+ "description": "Set the frequency",
+ "type": "Number",
+ "optional": true
+ }
+ ]
},
- "Keyboard": {
- "name": "Keyboard",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Events",
+ "p5.SqrOsc": {
+ "name": "p5.SqrOsc",
+ "shortname": "SqrOsc",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/events/keyboard.js",
- "line": 1,
- "requires": [
- "core"
+ "file": "src/Oscillator.js",
+ "line": 234,
+ "description": "Creates a square oscillator.",
+ "is_constructor": 1,
+ "extends": "Oscillator",
+ "params": [
+ {
+ "name": "freq",
+ "description": "Set the frequency",
+ "type": "Number",
+ "optional": true
+ }
]
},
- "Mouse": {
- "name": "Mouse",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Events",
+ "p5.TriOsc": {
+ "name": "p5.TriOsc",
+ "shortname": "TriOsc",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/events/mouse.js",
- "line": 1,
- "requires": [
- "core",
- "constants"
+ "file": "src/Oscillator.js",
+ "line": 248,
+ "description": "Creates a triangle oscillator.",
+ "is_constructor": 1,
+ "extends": "Oscillator",
+ "params": [
+ {
+ "name": "freq",
+ "description": "Set the frequency",
+ "type": "Number",
+ "optional": true
+ }
]
},
- "Touch": {
- "name": "Touch",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Events",
+ "p5.SinOsc": {
+ "name": "p5.SinOsc",
+ "shortname": "SinOsc",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/events/touch.js",
- "line": 1,
- "requires": [
- "core"
+ "file": "src/Oscillator.js",
+ "line": 262,
+ "description": "Creates a sine oscillator.",
+ "is_constructor": 1,
+ "extends": "Oscillator",
+ "params": [
+ {
+ "name": "freq",
+ "description": "Set the frequency",
+ "type": "Number",
+ "optional": true
+ }
]
},
- "Image": {
- "name": "Image",
- "submodules": {
- "Pixels": 1
- },
- "elements": {},
- "classes": {
- "p5.Image": 1
- },
- "fors": {
- "p5": 1
- },
- "namespaces": {},
- "module": "Image",
- "file": "src/image/p5.Image.js",
- "line": 21,
- "requires": [
- "core"
- ],
- "description": "<p>A class to describe an image.</p>\n<p>Images are rectangular grids of pixels that can be displayed and modified.</p>\n<p>Existing images can be loaded by calling\n<a href=\"#/p5/loadImage\">loadImage()</a>. Blank images can be created by\ncalling <a href=\"#/p5/createImage\">createImage()</a>. <code>p5.Image</code> objects\nhave methods for common tasks such as applying filters and modifying\npixel values.</p>\n"
- },
- "Loading & Displaying": {
- "name": "Loading & Displaying",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.Font": 1
- },
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Typography",
+ "p5.Panner": {
+ "name": "p5.Panner",
+ "shortname": "Panner",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/typography/p5.Font.js",
- "line": 13,
- "requires": [
- "core"
- ],
- "description": "<p>This module defines the <a href=\"#/p5.Font\">p5.Font</a> class and functions for\ndrawing text to the display canvas.</p>\n"
+ "file": "src/Panner.js",
+ "line": 11,
+ "description": "A panning effect.",
+ "is_constructor": 1,
+ "example": [
+ "\n<div>\n<code>\nlet panner, lfo, soundfile, cnv;\n\nfunction preload() {\n soundfile = loadSound('/assets/beat.mp3');\n}\n\nfunction setup() {\n cnv = createCanvas(100, 100);\n background(220);\n cnv.mousePressed(startSound);\n \n panner = new p5.Panner();\n lfo = new p5.Oscillator(1);\n //disconnect lfo from speakers because we don't want to hear it!\n lfo.disconnect();\n panner.pan(lfo);\n\n soundfile.loop();\n soundfile.disconnect();\n soundfile.connect(panner);\n \n}\n\nfunction startSound() {\n lfo.start();\n soundfile.start();\n}\n</code>\n</div>"
+ ]
},
- "Pixels": {
- "name": "Pixels",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Image",
+ "p5.Panner3D": {
+ "name": "p5.Panner3D",
+ "shortname": "Panner3D",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/image/pixels.js",
- "line": 1,
- "requires": [
- "core"
+ "file": "src/Panner3D.js",
+ "line": 10,
+ "description": "A 3D sound spatializer.",
+ "is_constructor": 1,
+ "example": [
+ "\n<div>\n<code>\nlet radius = 10 ; \nlet soundSource, spatializer;\nlet font;\nlet cnv;\n\nlet x = 0;\nlet y = 0;\nlet z = 100;\n\nlet vX;\nlet vY;\nlet vZ;\n\nfunction preload() {\n soundSource = loadSound('/assets/beat.mp3');\n font = loadFont('/assets/SourceSansPro-Regular.otf');\n}\n\nfunction setup() {\n describe(\n 'A 3D shape with a sound source attached to it. The sound source is spatialized using the Panner3D class. Click to play the sound.'\n );\n cnv = createCanvas(100, 100, WEBGL);\n cnv.mousePressed(playSound);\n\n camera(0, 0, 0, 0, 0, 1);\n \n textFont(font);\n textAlign(CENTER,CENTER);\n \n angleMode(DEGREES);\n\n vX = random(-0.5, 0.5);\n vY = random(-0.5, 0.5);\n vZ = random(-0.5, 0.5) * 1.5;\n\n spatializer = new p5.Panner3D();\n spatializer.maxDist(100);\n soundSource.loop();\n soundSource.disconnect();\n soundSource.connect(spatializer);\n}\n\nfunction playSound() {\n soundSource.play();\n}\n\nfunction draw() {\n background(220);\n push();\n textSize(5);\n fill(0);\n translate(0,0,100);\n //text('click to play', 0, 0);\n pop();\n // Update Box and Sound Source Position\n push();\n moveSoundBox();\n box(5, 5, 5);\n pop();\n}\n\n// Rotate 1 degree per frame along all three axes\nfunction moveSoundBox() {\n x = x + vX;\n y = y + vY;\n z = z + vZ;\n\n if (x > radius || x < -radius) {\n vX = -vX;\n }\n if (y > radius || y < -radius) {\n vY = -vY;\n }\n if (z > 250 || z < 80) {\n vZ = -vZ;\n }\n //set the position of the 3D panner\n spatializer.set(x, y, z);\n //set the postion of the box\n translate(x, y, z);\n rotateX(45 + frameCount);\n rotateZ(45);\n}\n</code>\n</div>"
]
},
- "IO": {
- "name": "IO",
- "submodules": {
- "Structure": 1,
- "Input": 1,
- "Output": 1,
- "Table": 1,
- "Time & Date": 1
- },
- "elements": {},
- "classes": {
- "p5": 1,
- "p5.PrintWriter": 1,
- "p5.Table": 1,
- "p5.TableRow": 1,
- "p5.XML": 1
- },
- "fors": {
- "p5": 1
- },
- "namespaces": {},
- "file": "src/io/p5.XML.js",
- "line": 9
- },
- "Input": {
- "name": "Input",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.XML": 1
- },
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "IO",
- "namespace": "",
- "file": "src/io/p5.XML.js",
- "line": 9,
- "requires": [
- "core"
- ],
- "description": "<p>A class to describe an XML object.</p>\n<p>Each <code>p5.XML</code> object provides an easy way to interact with XML data.\nExtensible Markup Language\n(<a href=\"https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction\" target=\"_blank\">XML</a>)\nis a standard format for sending data between applications. Like HTML, the\nXML format is based on tags and attributes, as in\n<code><time units=\"s\">1234</time></code>.</p>\n<p>Note: Use <a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files.</p>\n"
- },
- "Output": {
- "name": "Output",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5": 1,
- "p5.PrintWriter": 1
- },
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "IO",
+ "p5.PitchShifter": {
+ "name": "p5.PitchShifter",
+ "shortname": "PitchShifter",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/io/files.js",
- "line": 1565,
- "description": "<p>This is the p5 instance constructor.</p>\n<p>A p5 instance holds all the properties and methods related to\na p5 sketch. It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node. The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>A p5 sketch can run in \"global\" or \"instance\" mode:\n\"global\" - all properties and methods are attached to the window\n\"instance\" - all properties and methods are bound to this p5 object</p>\n"
+ "file": "src/PitchShifter.js",
+ "line": 10,
+ "description": "Change the pitch of a sound.",
+ "is_constructor": 1,
+ "example": [
+ "\n<div>\n<code>\n let cnv, soundFile, pitchShifter;\n \nfunction preload() {\n soundFile = loadSound('/assets/beatbox.mp3');\n}\n \nfunction setup() {\n cnv = createCanvas(100, 100);\n cnv.mousePressed(startSound);\n background(220);\n textAlign(CENTER);\n textSize(9);\n text('click to play sound', width/2, height/2);\n pitchShifter = new p5.PitchShifter();\n \n soundFile.disconnect();\n soundFile.connect(pitchShifter);\n //change the pitch and retrigger sample when done playing\n soundFile.onended(changePitch);\n}\n\nfunction startSound () {\n soundFile.play();\n}\n \nfunction changePitch () {\n let pitchValue = random(-12, 12);\n pitchShifter.shift(pitchValue);\n soundFile.play();\n}\n</code>\n</div>"
+ ]
},
- "Table": {
- "name": "Table",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.Table": 1,
- "p5.TableRow": 1
- },
- "fors": {},
- "is_submodule": 1,
- "namespaces": {},
- "module": "IO",
+ "p5.Reverb": {
+ "name": "p5.Reverb",
+ "shortname": "Reverb",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "p5.sound",
"namespace": "",
- "file": "src/io/p5.TableRow.js",
- "line": 9,
- "requires": [
- "core"
+ "file": "src/Reverb.js",
+ "line": 10,
+ "description": "Add reverb to a sound.",
+ "is_constructor": 1,
+ "params": [
+ {
+ "name": "decayTime",
+ "description": "Set the decay time of the reverb",
+ "type": "Number",
+ "optional": true
+ }
],
- "description": "<p><a href=\"#/p5.Table\">Table</a> objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.</p>\n"
- },
- "Math": {
- "name": "Math",
- "submodules": {
- "Calculation": 1,
- "Vector": 1,
- "Noise": 1,
- "Random": 1,
- "Trigonometry": 1,
- "Quaternion": 1
- },
- "elements": {},
- "classes": {
- "p5.Vector": 1,
- "p5.Quat": 1
- },
- "fors": {
- "p5": 1
- },
- "namespaces": {},
- "file": "src/webgl/p5.Quat.js",
- "line": 8
- },
- "Calculation": {
- "name": "Calculation",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Math",
- "namespace": "",
- "file": "src/math/calculation.js",
- "line": 1,
- "requires": [
- "core"
+ "example": [
+ "\n<div>\n<code>\nlet noise, osc, env, reverb;\nlet randomTime = 0;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n noise = new p5.Noise();\n env = new p5.Envelope();\n reverb = new p5.Reverb();\n noise.disconnect();\n noise.connect(env);\n env.disconnect();\n env.connect(reverb);\n noise.start();\n textAlign(CENTER);\n}\n\nfunction playSound() {\n randomTime = random(0.1, 3);\n reverb.set(randomTime); \n env.play();\n}\n\nfunction draw() {\n background(220);\n text('click to play', width/2, 20);\n text('decay ' + round(randomTime, 2), width/2, 40);\n describe('Click to play a sound with a random decay time.');\n}\n</code>\n</div>"
]
},
- "Vector": {
- "name": "Vector",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.Vector": 1
- },
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Math",
- "namespace": "",
- "file": "src/math/p5.Vector.js",
- "line": 11,
- "requires": [
- "core"
- ],
- "description": "<p>A class to describe a two or three-dimensional vector.</p>\n<p>A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection.</p>\n<p><code>p5.Vector</code> objects are often used to program motion because they simplify\nthe math. For example, a moving ball has a position and a velocity.\nPosition describes where the ball is in space. The ball's position vector\nextends from the origin to the ball's center. Velocity describes the ball's\nspeed and the direction it's moving. If the ball is moving straight up, its\nvelocity vector points straight up. Adding the ball's velocity vector to\nits position vector moves it, as in <code>pos.add(vel)</code>. Vector math relies on\nmethods inside the <code>p5.Vector</code> class.</p>\n<p>Note: <a href=\"#/p5/createVector\">createVector()</a> is the recommended way\nto make an instance of this class.</p>\n"
+ "p5.sound": {
+ "name": "p5.sound",
+ "shortname": "sound",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "SoundFile",
+ "namespace": ""
},
- "Noise": {
- "name": "Noise",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Math",
+ "p5.SoundFile": {
+ "name": "p5.SoundFile",
+ "shortname": "SoundFile",
+ "classitems": [],
+ "plugins": [],
+ "extensions": [],
+ "plugin_for": [],
+ "extension_for": [],
+ "module": "p5.sound",
+ "submodule": "SoundFile",
"namespace": "",
- "file": "src/math/noise.js",
- "line": 14,
- "requires": [
- "core"
+ "file": "src/SoundFile.js",
+ "line": 74,
+ "description": "Load and play sound files.",
+ "is_constructor": 1,
+ "example": [
+ "\n<div>\n<code>\nlet sound, amp, delay, cnv;\n\nfunction preload() {\n //replace this sound with something local with rights to distribute\n //need to fix local asset loading first though :) \n sound = loadSound('/assets/doorbell.mp3');\n}\n\nfunction setup() {\n cnv = createCanvas(100, 100);\n textAlign(CENTER);\n cnv.mousePressed(playSound);\n amp = new p5.Amplitude();\n delay = new p5.Delay();\n sound.disconnect();\n sound.connect(delay);\n delay.connect(amp);\n}\n\nfunction playSound() {\n sound.play();\n}\n\nfunction draw() {\n let dtime = map(mouseX, 0, width, 0, 1);\n delay.delayTime(dtime);\n let f = map(mouseY, 0, height, 0, .75);\n delay.feedback(f);\n let level = map(amp.getLevel(), 0, 0.5, 0, 255);\n background(level, 0, 0);\n fill(255);\n text('click to play', width/2, 20);\n }\n</code>\n</div>"
]
+ }
+ },
+ "classitems": [
+ {
+ "itemtype": "property",
+ "name": "RGB",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 16,
+ "description": "",
+ "module": "Color",
+ "submodule": "Creating & Reading",
+ "class": "p5"
},
- "Random": {
- "name": "Random",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Math",
- "namespace": "",
- "file": "src/math/random.js",
- "line": 1,
- "requires": [
- "core"
- ]
+ {
+ "itemtype": "property",
+ "name": "RGBHDR",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 22,
+ "description": "",
+ "module": "Color",
+ "submodule": "Creating & Reading",
+ "class": "p5"
},
- "Trigonometry": {
- "name": "Trigonometry",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Math",
- "namespace": "",
- "file": "src/math/trigonometry.js",
- "line": 1,
- "requires": [
- "core",
- "constants"
- ]
+ {
+ "itemtype": "property",
+ "name": "HSB",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 32,
+ "description": "HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\n<a href=\"https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html\">HSB</a>.",
+ "module": "Color",
+ "submodule": "Creating & Reading",
+ "class": "p5"
},
- "Typography": {
- "name": "Typography",
- "submodules": {
- "Attributes": 1,
- "Loading & Displaying": 1
- },
- "elements": {},
- "classes": {
- "p5.Font": 1
- },
- "fors": {
- "p5": 1
- },
- "namespaces": {},
- "file": "src/typography/p5.Font.js",
- "line": 13
+ {
+ "itemtype": "property",
+ "name": "HSL",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 38,
+ "description": "",
+ "module": "Color",
+ "submodule": "Creating & Reading",
+ "class": "p5"
},
- "Array Functions": {
- "name": "Array Functions",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Data",
- "namespace": "",
- "file": "src/utilities/array_functions.js",
- "line": 1,
- "requires": [
- "core"
- ]
+ {
+ "itemtype": "property",
+ "name": "HWB",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 44,
+ "description": "",
+ "module": "Color",
+ "submodule": "Creating & Reading",
+ "class": "p5"
},
- "Conversion": {
- "name": "Conversion",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Data",
- "namespace": "",
- "file": "src/utilities/conversion.js",
- "line": 1,
- "requires": [
- "core"
- ]
+ {
+ "itemtype": "property",
+ "name": "LAB",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 50,
+ "description": "",
+ "module": "Color",
+ "submodule": "Creating & Reading",
+ "class": "p5"
},
- "String Functions": {
- "name": "String Functions",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Data",
- "namespace": "",
- "file": "src/utilities/string_functions.js",
- "line": 1,
- "requires": [
- "core"
- ]
+ {
+ "itemtype": "property",
+ "name": "LCH",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 56,
+ "description": "",
+ "module": "Color",
+ "submodule": "Creating & Reading",
+ "class": "p5"
},
- "Time & Date": {
- "name": "Time & Date",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "IO",
- "namespace": "",
- "file": "src/utilities/time_date.js",
- "line": 1,
- "requires": [
- "core"
- ]
+ {
+ "itemtype": "property",
+ "name": "OKLAB",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 62,
+ "description": "",
+ "module": "Color",
+ "submodule": "Creating & Reading",
+ "class": "p5"
},
- "3D Primitives": {
- "name": "3D Primitives",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.Geometry": 1
- },
- "fors": {
- "p5": 1,
- "p5.Geometry": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Shape",
- "namespace": "",
- "file": "src/webgl/p5.Geometry.js",
- "line": 13,
- "requires": [
- "core",
- "p5.Geometry"
- ],
- "description": "<p>A class to describe a 3D shape.</p>\n<p>Each <code>p5.Geometry</code> object represents a 3D shape as a set of connected\npoints called <em>vertices</em>. All 3D shapes are made by connecting vertices to\nform triangles that are stitched together. Each triangular patch on the\ngeometry's surface is called a <em>face</em>. The geometry stores information\nabout its vertices and faces for use with effects such as lighting and\ntexture mapping.</p>\n<p>The first parameter, <code>detailX</code>, is optional. If a number is passed, as in\n<code>new p5.Geometry(24)</code>, it sets the number of triangle subdivisions to use\nalong the geometry's x-axis. By default, <code>detailX</code> is 1.</p>\n<p>The second parameter, <code>detailY</code>, is also optional. If a number is passed,\nas in <code>new p5.Geometry(24, 16)</code>, it sets the number of triangle\nsubdivisions to use along the geometry's y-axis. By default, <code>detailX</code> is\n1.</p>\n<p>The third parameter, <code>callback</code>, is also optional. If a function is passed,\nas in <code>new p5.Geometry(24, 16, createShape)</code>, it will be called once to add\nvertices to the new 3D shape.</p>\n"
+ {
+ "itemtype": "property",
+ "name": "OKLCH",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 68,
+ "description": "",
+ "module": "Color",
+ "submodule": "Creating & Reading",
+ "class": "p5"
},
- "3D": {
- "name": "3D",
- "submodules": {
- "Interaction": 1,
- "Lights": 1,
- "Material": 1,
- "Camera": 1
- },
- "elements": {},
- "classes": {
- "p5.Camera": 1,
- "p5.Shader": 1,
- "p5.Texture": 1,
- "ImageInfos": 1,
- "FontInfo": 1,
- "Cubic": 1
- },
- "fors": {
- "p5": 1,
- "p5.Camera": 1
- },
- "namespaces": {},
- "file": "src/webgl/text.js",
- "line": 279
+ {
+ "itemtype": "property",
+ "name": "RGBA",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 74,
+ "description": "",
+ "module": "Color",
+ "submodule": "Creating & Reading",
+ "class": "p5"
},
- "Interaction": {
- "name": "Interaction",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "3D",
- "namespace": "",
- "file": "src/webgl/interaction.js",
- "line": 1,
- "requires": [
- "core"
- ]
+ {
+ "itemtype": "property",
+ "name": "VERSION",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 14,
+ "type": "string",
+ "description": "Version of this p5.js.",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "Lights": {
- "name": "Lights",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "3D",
- "namespace": "",
- "file": "src/webgl/light.js",
- "line": 1,
- "requires": [
- "core"
- ]
+ {
+ "itemtype": "property",
+ "name": "P2D",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 23,
+ "type": "string",
+ "description": "The default, two-dimensional renderer.",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "3D Models": {
- "name": "3D Models",
- "submodules": {},
- "elements": {},
- "classes": {},
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "Shape",
- "namespace": "",
- "file": "src/webgl/loading.js",
- "line": 1,
- "requires": [
- "core",
- "p5.Geometry"
- ]
+ {
+ "itemtype": "property",
+ "name": "WEBGL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 48,
+ "type": "string",
+ "description": "<p>One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders.</p>\n<p><code>WEBGL</code> differs from the default <a href=\"/reference/p5/P2D\"><code>P2D</code></a> renderer in the following ways:</p>\n<ul><li>Coordinate System - 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/tutorials/coordinates-and-transformations/\">the tutorial page about coordinates and transformations</a>.</li><li>3D Shapes - <code>WEBGL</code> mode can be used to draw 3-dimensional shapes like <a href=\"#/p5/box\">box()</a>, <a href=\"#/p5/sphere\">sphere()</a>, <a href=\"#/p5/cone\">cone()</a>, and <a href=\"https://p5js.org/reference/#3D%20Primitives\">more</a>. See <a href=\"https://p5js.org/tutorials/custom-geometry/\">the tutorial page about custom geometry</a> to make more complex objects.</li><li>Shape Detail - 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>Textures - 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>Materials and Lighting - <code>WEBGL</code> offers different types of lights like <a href=\"#/p5/ambientLight\">ambientLight()</a> to place around a scene. Materials like <a href=\"#/p5/specularMaterial\">specularMaterial()</a> reflect the lighting to convey shape and depth. See <a href=\"https://p5js.org/tutorials/lights-camera-materials/\">the tutorial page for styling and appearance</a> to experiment with different combinations.</li><li>Camera - The viewport of a <code>WEBGL</code> sketch can be adjusted by changing camera attributes. See <a href=\"https://p5js.org/tutorials/lights-camera-materials#camera-and-view\">the tutorial page section about cameras</a> for an explanation of camera controls.</li><li>Text - <code>WEBGL</code> requires opentype/truetype font files to be preloaded using <a href=\"#/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>Shaders - Shaders are hardware accelerated programs that can be used for a variety of effects and graphics. See the <a href=\"https://p5js.org/tutorials/intro-to-shaders/\">introduction to shaders</a> to get started with shaders in p5.js.</li><li>Graphics Acceleration - <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/tutorials/#webgl\">all the interactive WEBGL tutorials</a> in the \"Tutorials\" 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>\n",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "Material": {
- "name": "Material",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.Shader": 1,
- "p5.Texture": 1
- },
- "fors": {
- "p5": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "3D",
- "namespace": "",
- "file": "src/webgl/p5.Texture.js",
- "line": 12,
- "requires": [
- "core"
+ {
+ "itemtype": "property",
+ "name": "WEBGL2",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 57,
+ "type": "string",
+ "description": "One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),\nwhich can be used to determine what capabilities the rendering environment\nhas.",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "ARROW",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 65,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "SIMPLE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 71,
+ "type": "string",
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "FULL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 76,
+ "type": "string",
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "CROSS",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 83,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "HAND",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 89,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "MOVE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 95,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "TEXT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 101,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "WAIT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 107,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "HALF_PI",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 199,
+ "description": "<p>A <code>Number</code> constant that's approximately 1.5708.</p>\n<p><code>HALF_PI</code> is half the value of the mathematical constant π. It's useful for\nmany tasks that involve rotation and oscillation. For example, calling\n<code>rotate(HALF_PI)</code> rotates the coordinate system <code>HALF_PI</code> radians, which is\na quarter turn (90˚).</p>\n<p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians equals 180˚, <code>HALF_PI</code>\nradians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to HALF_PI.\n arc(50, 50, 80, 80, 0, HALF_PI);\n\n describe('The bottom-right quarter of a circle drawn in white on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a quarter turn.\n rotate(HALF_PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('Two black lines on a gray background. One line extends from the center to the right. The other line extends from the center to the bottom.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + HALF_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n</code>\n</div>"
],
- "description": "<p>This module defines the p5.Shader class</p>\n"
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "Camera": {
- "name": "Camera",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.Camera": 1
- },
- "fors": {
- "p5": 1,
- "p5.Camera": 1
- },
- "is_submodule": 1,
- "namespaces": {},
- "module": "3D",
- "namespace": "",
- "file": "src/webgl/p5.Camera.js",
- "line": 723,
- "requires": [
- "core"
+ {
+ "itemtype": "property",
+ "name": "PI",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 288,
+ "description": "<p>A <code>Number</code> constant that's approximately 3.1416.</p>\n<p><code>PI</code> is the mathematical constant π. It's useful for many tasks that\ninvolve rotation and oscillation. For example, calling <code>rotate(PI)</code> rotates\nthe coordinate system <code>PI</code> radians, which is a half turn (180˚).</p>\n<p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians equals 180˚, <code>HALF_PI</code>\nradians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to PI.\n arc(50, 50, 80, 80, 0, PI);\n\n describe('The bottom half of a circle drawn in white on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a half turn.\n rotate(PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('A horizontal black line on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The circles drift apart, then meet in the middle, over and over again.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n</code>\n</div>"
],
- "description": "<p>A class to describe a camera for viewing a 3D sketch.</p>\n<p>Each <code>p5.Camera</code> object represents a camera that views a section of 3D\nspace. It stores information about the camera’s position, orientation, and\nprojection.</p>\n<p>In WebGL mode, the default camera is a <code>p5.Camera</code> object that can be\ncontrolled with the <a href=\"#/p5/camera\">camera()</a>,\n<a href=\"#/p5/perspective\">perspective()</a>,\n<a href=\"#/p5/ortho\">ortho()</a>, and\n<a href=\"#/p5/frustum\">frustum()</a> functions. Additional cameras can be\ncreated with <a href=\"#/p5/createCamera\">createCamera()</a> and activated\nwith <a href=\"#/p5/setCamera\">setCamera()</a>.</p>\n<p>Note: <code>p5.Camera</code>’s methods operate in two coordinate systems:</p>\n<ul>\n<li>The “world” coordinate system describes positions in terms of their\nrelationship to the origin along the x-, y-, and z-axes. For example,\ncalling <code>myCamera.setPosition()</code> places the camera in 3D space using\n\"world\" coordinates.</li>\n<li>The \"local\" coordinate system describes positions from the camera's point\nof view: left-right, up-down, and forward-backward. For example, calling\n<code>myCamera.move()</code> moves the camera along its own axes.</li>\n</ul>\n"
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "Quaternion": {
- "name": "Quaternion",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.Quat": 1
- },
- "fors": {},
- "is_submodule": 1,
- "namespaces": {},
- "module": "Math",
- "namespace": "",
- "file": "src/webgl/p5.Quat.js",
- "line": 8,
- "description": "<p>A class to describe a Quaternion\nfor vector rotations in the p5js webgl renderer.\nPlease refer the following link for details on the implementation\n<a href=\"https://danceswithcode.net/engineeringnotes/quaternions/quaternions.html\">https://danceswithcode.net/engineeringnotes/quaternions/quaternions.html</a></p>\n"
+ {
+ "itemtype": "property",
+ "name": "QUARTER_PI",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 378,
+ "description": "<p>A <code>Number</code> constant that's approximately 0.7854.</p>\n<p><code>QUARTER_PI</code> is one-fourth the value of the mathematical constant π. It's\nuseful for many tasks that involve rotation and oscillation. For example,\ncalling <code>rotate(QUARTER_PI)</code> rotates the coordinate system <code>QUARTER_PI</code>\nradians, which is an eighth of a turn (45˚).</p>\n<p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians equals 180˚, <code>HALF_PI</code>\nradians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to QUARTER_PI.\n arc(50, 50, 80, 80, 0, QUARTER_PI);\n\n describe('A one-eighth slice of a circle drawn in white on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate an eighth turn.\n rotate(QUARTER_PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('Two black lines that form a \"V\" opening towards the bottom-right corner of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + QUARTER_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n</code>\n</div>"
+ ],
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.sound": {
- "name": "p5.sound",
- "submodules": {},
- "elements": {},
- "classes": {
- "p5.sound": 1,
- "p5.SoundFile": 1,
- "p5.Amplitude": 1,
- "p5.FFT": 1,
- "p5.Oscillator": 1,
- "p5.SinOsc": 1,
- "p5.TriOsc": 1,
- "p5.SawOsc": 1,
- "p5.SqrOsc": 1,
- "p5.Envelope": 1,
- "p5.Noise": 1,
- "p5.Pulse": 1,
- "p5.AudioIn": 1,
- "p5.Effect": 1,
- "p5.Filter": 1,
- "p5.LowPass": 1,
- "p5.HighPass": 1,
- "p5.BandPass": 1,
- "p5.EQ": 1,
- "p5.Panner3D": 1,
- "p5.Delay": 1,
- "p5.Reverb": 1,
- "p5.Convolver": 1,
- "p5.Phrase": 1,
- "p5.Part": 1,
- "p5.Score": 1,
- "p5.SoundLoop": 1,
- "p5.Compressor": 1,
- "p5.PeakDetect": 1,
- "p5.SoundRecorder": 1,
- "p5.Distortion": 1,
- "p5.Gain": 1,
- "p5.AudioVoice": 1,
- "p5.MonoSynth": 1,
- "p5.OnsetDetect": 1,
- "p5.PolySynth": 1
- },
- "fors": {
- "p5.sound": 1,
- "p5": 1,
- "p5.SoundFile": 1,
- "p5.Amplitude": 1,
- "p5.FFT": 1,
- "p5.Oscillator": 1,
- "p5.Envelope": 1,
- "p5.AudioIn": 1,
- "p5.Effect": 1,
- "p5.EQ": 1,
- "p5.Panner3D": 1,
- "p5.Delay": 1,
- "p5.Reverb": 1,
- "p5.Convolver": 1,
- "p5.Part": 1,
- "p5.Score": 1,
- "p5.SoundLoop": 1,
- "p5.Compressor": 1,
- "p5.SoundRecorder": 1,
- "p5.Distortion": 1,
- "p5.Gain": 1,
- "p5.AudioVoice": 1,
- "p5.MonoSynth": 1,
- "p5.PolySynth": 1
- },
- "namespaces": {},
- "module": "p5.sound",
- "file": "lib/addons/p5.sound.js",
- "line": 11691,
- "description": "<p>p5.sound extends p5 with <a href=\"http://caniuse.com/audio-api\"\ntarget=\"_blank\">Web Audio</a> functionality including audio input,\nplayback, analysis and synthesis.\n</p>\n<ul>\n<li><a href=\"#/p5.SoundFile\"><b>p5.SoundFile</b></a>: Load and play sound files.</li>\n<li><a href=\"#/p5.Amplitude\"><b>p5.Amplitude</b></a>: Get the current volume of a sound.</li>\n<li><a href=\"#/p5.AudioIn\"><b>p5.AudioIn</b></a>: Get sound from an input source, typically\n a computer microphone.</li>\n<li><a href=\"#/p5.FFT\"><b>p5.FFT</b></a>: Analyze the frequency of sound. Returns\n results from the frequency spectrum or time domain (waveform).</li>\n<li><a href=\"#/p5.Oscillator\"><b>p5.Oscillator</b></a>: Generate Sine,\n Triangle, Square and Sawtooth waveforms. Base class of\n <li><a href=\"#/p5.Noise\">p5.Noise</a> and <a href=\"#/p5.Pulse\">p5.Pulse</a>.\n </li>\n<li>\n <a href=\"#/p5.MonoSynth\">p5.MonoSynth</a> and <a href=\"#/p5.PolySynth\">p5.PolySynth</a>: Play musical notes\n</li>\n<li><a href=\"#/p5.Envelope\"><b>p5.Envelope</b></a>: An Envelope is a series\n of fades over time. Often used to control an object's\n output gain level as an \"ADSR Envelope\" (Attack, Decay,\n Sustain, Release). Can also modulate other parameters.</li>\n<li><a href=\"#/p5.Delay\"><b>p5.Delay</b></a>: A delay effect with\n parameters for feedback, delayTime, and lowpass filter.</li>\n<li><a href=\"#/p5.Filter\"><b>p5.Filter</b></a>: Filter the frequency range of a\n sound.\n</li>\n<li><a href=\"#/p5.Reverb\"><b>p5.Reverb</b></a>: Add reverb to a sound by specifying\n duration and decay. </li>\n<b><li><a href=\"#/p5.Convolver\">p5.Convolver</a>:</b> Extends\n<a href=\"#/p5.Reverb\">p5.Reverb</a> to simulate the sound of real\n physical spaces through convolution.</li>\n<b><li><a href=\"#/p5.SoundRecorder\">p5.SoundRecorder</a></b>: Record sound for playback\n / save the .wav file.\n<b><li><a href=\"#/p5.SoundLoop\">p5.SoundLoop</a>, <a href=\"#/p5.Phrase\">p5.Phrase</a></b>, <b><a href=\"#/p5.Part\">p5.Part</a></b> and\n<b><a href=\"#/p5.Score\">p5.Score</a></b>: Compose musical sequences.\n</li>\n<li><a href=\"#/p5/userStartAudio\">userStartAudio</a>: Enable audio in a\nbrowser- and user-friendly way.</a>\n<p>p5.sound is on <a href=\"https://github.com/processing/p5.js-sound/\">GitHub</a>.\nDownload the latest version\n<a href=\"https://github.com/processing/p5.js-sound/blob/master/lib/p5.sound.js\">here</a>.</p>",
- "tag": "main",
- "itemtype": "main"
- }
- },
- "classes": {
- "p5": {
- "name": "p5",
- "shortname": "p5",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "IO",
- "submodule": "Output",
- "namespace": "",
- "file": "src/core/main.js",
- "line": 12,
- "description": "<p>This is the p5 instance constructor.</p>\n<p>A p5 instance holds all the properties and methods related to\na p5 sketch. It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node. The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>A p5 sketch can run in \"global\" or \"instance\" mode:\n\"global\" - all properties and methods are attached to the window\n\"instance\" - all properties and methods are bound to this p5 object</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "sketch",
- "description": "<p>a closure that can set optional <a href=\"#/p5/preload\">preload()</a>,\n <a href=\"#/p5/setup\">setup()</a>, and/or <a href=\"#/p5/draw\">draw()</a> properties on the\n given p5 instance</p>\n",
- "type": "Function(p5)"
- },
- {
- "name": "node",
- "description": "<p>element to attach canvas to</p>\n",
- "type": "HTMLElement",
- "optional": true
- }
+ {
+ "itemtype": "property",
+ "name": "TAU",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 473,
+ "description": "<p>A <code>Number</code> constant that's approximately 6.2382.</p>\n<p><code>TAU</code> is twice the value of the mathematical constant π. It's useful for\nmany tasks that involve rotation and oscillation. For example, calling\n<code>rotate(TAU)</code> rotates the coordinate system <code>TAU</code> radians, which is one\nfull turn (360˚). <code>TAU</code> and <code>TWO_PI</code> are equal.</p>\n<p>Note: <code>TAU</code> radians equals 360˚, <code>PI</code> radians equals 180˚, <code>HALF_PI</code>\nradians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to TAU.\n arc(50, 50, 80, 80, 0, TAU);\n\n describe('A white circle drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a full turn.\n rotate(TAU);\n\n // Style the second line.\n strokeWeight(5);\n\n // Draw the same line, shorter and rotated.\n line(0, 0, 20, 0);\n\n describe(\n 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle with a blue center oscillates from left to right on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + TAU);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator, smaller.\n fill(0, 0, 255);\n circle(x2, 0, 10);\n}\n</code>\n</div>"
],
- "return": {
- "description": "a p5 instance",
- "type": "P5"
- }
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Color": {
- "name": "p5.Color",
- "shortname": "p5.Color",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "Color",
- "submodule": "Creating & Reading",
- "namespace": "",
- "file": "src/color/p5.Color.js",
- "line": 318,
- "description": "<p>A class to describe a color.</p>\n<p>Each <code>p5.Color</code> object stores the color mode\nand level maxes that were active during its construction. These values are\nused to interpret the arguments passed to the object's constructor. They\nalso determine output formatting such as when\n<a href=\"#/p5/saturation\">saturation()</a> is called.</p>\n<p>Color is stored internally as an array of ideal RGBA values in floating\npoint form, normalized from 0 to 1. These values are used to calculate the\nclosest screen colors, which are RGBA levels from 0 to 255. Screen colors\nare sent to the renderer.</p>\n<p>When different color representations are calculated, the results are cached\nfor performance. These values are normalized, floating-point numbers.</p>\n<p>Note: <a href=\"#/p5/color\">color()</a> is the recommended way to create an\ninstance of this class.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "pInst",
- "description": "<p>pointer to p5 instance.</p>\n",
- "type": "P5",
- "optional": true
- },
- {
- "name": "vals",
- "description": "<p>an array containing the color values\n for red, green, blue and alpha channel\n or CSS color.</p>\n",
- "type": "Number[]|String"
- }
- ]
- },
- "p5.Element": {
- "name": "p5.Element",
- "shortname": "p5.Element",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "DOM",
- "submodule": "DOM",
- "namespace": "",
- "file": "src/core/p5.Element.js",
- "line": 9,
- "description": "<p>A class to describe an\n<a href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\" target=\"_blank\">HTML element</a>.</p>\n<p>Sketches can use many elements. Common elements include the drawing canvas,\nbuttons, sliders, webcam feeds, and so on.</p>\n<p>All elements share the methods of the <code>p5.Element</code> class. They're created\nwith functions such as <a href=\"#/p5/createCanvas\">createCanvas()</a> and\n<a href=\"#/p5/createButton\">createButton()</a>.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "elt",
- "description": "<p>wrapped DOM element.</p>\n",
- "type": "HTMLElement"
- },
- {
- "name": "pInst",
- "description": "<p>pointer to p5 instance.</p>\n",
- "type": "P5",
- "optional": true
- }
- ],
+ {
+ "itemtype": "property",
+ "name": "TWO_PI",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 568,
+ "description": "<p>A <code>Number</code> constant that's approximately 6.2382.</p>\n<p><code>TWO_PI</code> is twice the value of the mathematical constant π. It's useful for\nmany tasks that involve rotation and oscillation. For example, calling\n<code>rotate(TWO_PI)</code> rotates the coordinate system <code>TWO_PI</code> radians, which is\none full turn (360˚). <code>TWO_PI</code> and <code>TAU</code> are equal.</p>\n<p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians equals 180˚, <code>HALF_PI</code>\nradians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button element and\n // place it beneath the canvas.\n let btn = createButton('change');\n btn.position(0, 100);\n\n // Call randomColor() when\n // the button is pressed.\n btn.mousePressed(randomColor);\n\n describe('A gray square with a button that says \"change\" beneath it. The square changes color when the user presses the button.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
- ]
- },
- "p5.Graphics": {
- "name": "p5.Graphics",
- "shortname": "p5.Graphics",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "Rendering",
- "submodule": "Rendering",
- "namespace": "",
- "file": "src/core/p5.Graphics.js",
- "line": 10,
- "description": "<p>A class to describe a drawing surface that's separate from the main canvas.</p>\n<p>Each <code>p5.Graphics</code> object provides a dedicated drawing surface called a\n<em>graphics buffer</em>. Graphics buffers are helpful when drawing should happen\noffscreen. For example, separate scenes can be drawn offscreen and\ndisplayed only when needed.</p>\n<p><code>p5.Graphics</code> objects have nearly all the drawing features of the main\ncanvas. For example, calling the method <code>myGraphics.circle(50, 50, 20)</code>\ndraws to the graphics buffer. The resulting image can be displayed on the\nmain canvas by passing the <code>p5.Graphics</code> object to the\n<a href=\"#/p5/image\">image()</a> function, as in <code>image(myGraphics, 0, 0)</code>.</p>\n<p>Note: <a href=\"#/p5/createGraphics\">createGraphics()</a> is the recommended\nway to create an instance of this class.</p>\n",
- "is_constructor": 1,
- "extends": "p5.Element",
- "params": [
- {
- "name": "width",
- "description": "<p>width of the graphics buffer in pixels.</p>\n",
- "type": "Number"
- },
- {
- "name": "height",
- "description": "<p>height of the graphics buffer in pixels.</p>\n",
- "type": "Number"
- },
- {
- "name": "renderer",
- "description": "<p>renderer to use, either P2D or WEBGL.</p>\n",
- "type": "Constant"
- },
- {
- "name": "pInst",
- "description": "<p>sketch instance.</p>\n",
- "type": "P5",
- "optional": true
- },
- {
- "name": "canvas",
- "description": "<p>existing <code><canvas></code> element to use.</p>\n",
- "type": "HTMLCanvasElement",
- "optional": true
- }
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to TWO_PI.\n arc(50, 50, 80, 80, 0, TWO_PI);\n\n describe('A white circle drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a full turn.\n rotate(TWO_PI);\n\n // Style the second line.\n strokeWeight(5);\n\n // Draw the same line, shorter and rotated.\n line(0, 0, 20, 0);\n\n describe(\n 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle with a blue center oscillates from left to right on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + TWO_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator, smaller.\n fill(0, 0, 255);\n circle(x2, 0, 10);\n}\n</code>\n</div>"
],
- "example": [
- "\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(50, 50);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(25, 25, 20);\n\n describe('A dark gray square with a white circle at its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the p5.Graphics object.\n image(pg, 25, 25);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the canvas to display the graphics buffer.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(50, 50);\n\n describe('A square appears on a gray background when the user presses the mouse. The square cycles between white and black.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the background color.\n let bg = frameCount % 255;\n\n // Draw to the p5.Graphics object.\n pg.background(bg);\n\n // Display the p5.Graphics object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(pg, 25, 25);\n }\n}\n</code>\n</div>"
- ]
- },
- "p5.Renderer": {
- "name": "p5.Renderer",
- "shortname": "p5.Renderer",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "Rendering",
- "submodule": "Rendering",
- "namespace": "",
- "file": "src/core/p5.Renderer.js",
- "line": 10,
- "description": "<p>Main graphics and rendering context, as well as the base API\nimplementation for p5.js \"core\". To be used as the superclass for\nRenderer2D and Renderer3D classes, respectively.</p>\n",
- "is_constructor": 1,
- "extends": "p5.Element",
- "params": [
- {
- "name": "elt",
- "description": "<p>DOM node that is wrapped</p>\n",
- "type": "HTMLElement"
- },
- {
- "name": "pInst",
- "description": "<p>pointer to p5 instance</p>\n",
- "type": "P5",
- "optional": true
- },
- {
- "name": "isMainCanvas",
- "description": "<p>whether we're using it as main canvas</p>\n",
- "type": "Boolean",
- "optional": true
- }
- ]
- },
- "p5.TypedDict": {
- "name": "p5.TypedDict",
- "shortname": "p5.TypedDict",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "Data",
- "submodule": "Dictionary",
- "namespace": "",
- "file": "src/data/p5.TypedDict.js",
- "line": 82,
- "description": "<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\n",
- "is_constructor": 1
- },
- "p5.StringDict": {
- "name": "p5.StringDict",
- "shortname": "p5.StringDict",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "Data",
- "submodule": "Dictionary",
- "namespace": "",
- "file": "src/data/p5.TypedDict.js",
- "line": 397,
- "description": "<p>A simple Dictionary class for Strings.</p>\n",
- "extends": "p5.TypedDict"
- },
- "p5.NumberDict": {
- "name": "p5.NumberDict",
- "shortname": "p5.NumberDict",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "Data",
- "submodule": "Dictionary",
- "namespace": "",
- "file": "src/data/p5.TypedDict.js",
- "line": 415,
- "description": "<p>A simple Dictionary class for Numbers.</p>\n",
- "is_constructor": 1,
- "extends": "p5.TypedDict"
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.MediaElement": {
- "name": "p5.MediaElement",
- "shortname": "p5.MediaElement",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "DOM",
- "submodule": "DOM",
- "namespace": "",
- "file": "src/dom/dom.js",
- "line": 4099,
- "description": "<p>A class to handle audio and video.</p>\n<p><code>p5.MediaElement</code> extends <a href=\"#/p5.Element\">p5.Element</a> with\nmethods to handle audio and video. <code>p5.MediaElement</code> objects are created by\ncalling <a href=\"#/p5/createVideo\">createVideo</a>,\n<a href=\"#/p5/createAudio\">createAudio</a>, and\n<a href=\"#/p5/createCapture\">createCapture</a>.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "elt",
- "description": "<p>DOM node that is wrapped</p>\n",
- "type": "String"
- }
- ],
- "extends": "p5.Element",
+ {
+ "itemtype": "property",
+ "name": "DEG_TO_RAD",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 656,
+ "description": "<p>A <code>String</code> constant that's used to set the\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, functions such as <a href=\"#/p5/rotate\">rotate()</a> and\n<a href=\"#/p5/sin\">sin()</a> expect angles measured in units of radians.\nCalling <code>angleMode(DEGREES)</code> ensures that angles are measured in units of\ndegrees.</p>\n<p>Note: <code>TWO_PI</code> radians equals 360˚.</p>\n",
"example": [
- "\n<div class='notest'>\n<code>\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createCapture().\n capture = createCapture(VIDEO);\n capture.hide();\n\n describe('A webcam feed with inverted colors.');\n}\n\nfunction draw() {\n // Display the video stream and invert the colors.\n image(capture, 0, 0, width, width * capture.height / capture.width);\n filter(INVERT);\n}\n</code>\n</div>"
- ]
- },
- "p5.File": {
- "name": "p5.File",
- "shortname": "p5.File",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "DOM",
- "submodule": "DOM",
- "namespace": "",
- "file": "src/dom/dom.js",
- "line": 5482,
- "description": "<p>A class to describe a file.</p>\n<p><code>p5.File</code> objects are used by\n<a href=\"#/p5.Element/drop\">myElement.drop()</a> and\ncreated by\n<a href=\"#/p5/createFileInput\">createFileInput</a>.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "file",
- "description": "<p>wrapped file.</p>\n",
- "type": "File"
- }
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a red arc from 0 to HALF_PI radians.\n fill(255, 0, 0);\n arc(50, 50, 80, 80, 0, HALF_PI);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw a blue arc from 90˚ to 180˚.\n fill(0, 0, 255);\n arc(50, 50, 80, 80, 90, 180);\n\n describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');\n}\n</code>\n</div>"
],
- "example": [
- "\n<div>\n<code>\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayInfo() when the file loads.\n let input = createFileInput(displayInfo);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');\n}\n\n// Display the p5.File's info once it loads.\nfunction displayInfo(file) {\n background(200);\n\n // Display the p5.File's name.\n text(file.name, 10, 10, 80, 40);\n\n // Display the p5.File's type and subtype.\n text(`${file.type}/${file.subtype}`, 10, 70);\n\n // Display the p5.File's size in bytes.\n text(file.size, 10, 90);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Use the file input to select an image to\n// load and display.\nlet img;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a file input and place it beneath the canvas.\n // Call handleImage() when the file image loads.\n let input = createFileInput(handleImage);\n input.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the image if it's ready.\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\n// Use the p5.File's data once it loads.\nfunction handleImage(file) {\n // Check the p5.File's type.\n if (file.type === 'image') {\n // Create an image using using the p5.File's data.\n img = createImg(file.data, '');\n\n // Hide the image element so it doesn't appear twice.\n img.hide();\n } else {\n img = null;\n }\n}\n</code>\n</div>"
- ]
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Image": {
- "name": "p5.Image",
- "shortname": "p5.Image",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "Image",
- "submodule": "Image",
- "namespace": "",
- "file": "src/image/p5.Image.js",
- "line": 21,
- "description": "<p>A class to describe an image.</p>\n<p>Images are rectangular grids of pixels that can be displayed and modified.</p>\n<p>Existing images can be loaded by calling\n<a href=\"#/p5/loadImage\">loadImage()</a>. Blank images can be created by\ncalling <a href=\"#/p5/createImage\">createImage()</a>. <code>p5.Image</code> objects\nhave methods for common tasks such as applying filters and modifying\npixel values.</p>\n",
+ {
+ "itemtype": "property",
+ "name": "DEG_TO_RAD",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 656,
+ "description": "<p>A <code>String</code> constant that's used to set the\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, functions such as <a href=\"#/p5/rotate\">rotate()</a> and\n<a href=\"#/p5/sin\">sin()</a> expect angles measured in units of radians.\nCalling <code>angleMode(RADIANS)</code> ensures that angles are measured in units of\nradians. Doing so can be useful if the\n<a href=\"#/p5/angleMode\">angleMode()</a> has been set to\n<a href=\"#/p5/DEGREES\">DEGREES</a>.</p>\n<p>Note: <code>TWO_PI</code> radians equals 360˚.</p>\n",
"example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the GRAY filter.\n img.filter(GRAY);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A grayscale image of a brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw a red arc from 0˚ to 90˚.\n fill(255, 0, 0);\n arc(50, 50, 80, 80, 0, 90);\n\n // Use radians.\n angleMode(RADIANS);\n\n // Draw a blue arc from HALF_PI to PI.\n fill(0, 0, 255);\n arc(50, 50, 80, 80, HALF_PI, PI);\n\n describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');\n}\n</code>\n</div>"
],
- "is_constructor": 1,
- "params": [
- {
- "name": "width",
- "description": "",
- "type": "Number"
- },
- {
- "name": "height",
- "description": "",
- "type": "Number"
- }
- ]
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.PrintWriter": {
- "name": "p5.PrintWriter",
- "shortname": "p5.PrintWriter",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "IO",
- "submodule": "Output",
- "namespace": "",
- "file": "src/io/files.js",
- "line": 1565,
- "description": "<p>A class to describe a print stream.</p>\n<p>Each <code>p5.PrintWriter</code> object provides a way to save a sequence of text\ndata, called the <em>print stream</em>, to the user's computer. It's a low-level\nobject that enables precise control of text output. Functions such as\n<a href=\"#/p5/saveStrings\">saveStrings()</a> and\n<a href=\"#/p5/saveJSON\">saveJSON()</a> are easier to use for simple file\nsaving.</p>\n<p>Note: <a href=\"#/p5/createWriter\">createWriter()</a> is the recommended way\nto make an instance of this class.</p>\n",
- "params": [
- {
- "name": "filename",
- "description": "<p>name of the file to create.</p>\n",
- "type": "String"
- },
- {
- "name": "extension",
- "description": "<p>format to use for the file.</p>\n",
- "type": "String",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('xo.txt');\n\n // Add some lines to the print stream.\n myWriter.print('XOO');\n myWriter.print('OXO');\n myWriter.print('OOX');\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n</code>\n</div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "CORNER",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 665,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Table": {
- "name": "p5.Table",
- "shortname": "p5.Table",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "IO",
- "submodule": "Table",
- "namespace": "",
- "file": "src/io/p5.Table.js",
- "line": 33,
- "description": "<p><a href=\"#/p5.Table\">Table</a> objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "rows",
- "description": "<p>An array of p5.TableRow objects</p>\n",
- "type": "p5.TableRow[]",
- "optional": true
- }
- ]
+ {
+ "itemtype": "property",
+ "name": "CORNERS",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 671,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.TableRow": {
- "name": "p5.TableRow",
- "shortname": "p5.TableRow",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "IO",
- "submodule": "Table",
- "namespace": "",
- "file": "src/io/p5.TableRow.js",
- "line": 9,
- "description": "<p>A TableRow object represents a single row of data values,\nstored in columns, from a table.</p>\n<p>A Table Row contains both an ordered array, and an unordered\nJSON object.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "str",
- "description": "<p>optional: populate the row with a\n string of values, separated by the\n separator</p>\n",
- "type": "String",
- "optional": true
- },
- {
- "name": "separator",
- "description": "<p>comma separated values (csv) by default</p>\n",
- "type": "String",
- "optional": true
- }
- ]
+ {
+ "itemtype": "property",
+ "name": "RADIUS",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 677,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.XML": {
- "name": "p5.XML",
- "shortname": "p5.XML",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "IO",
- "submodule": "Input",
- "namespace": "",
- "file": "src/io/p5.XML.js",
- "line": 9,
- "description": "<p>A class to describe an XML object.</p>\n<p>Each <code>p5.XML</code> object provides an easy way to interact with XML data.\nExtensible Markup Language\n(<a href=\"https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction\" target=\"_blank\">XML</a>)\nis a standard format for sending data between applications. Like HTML, the\nXML format is based on tags and attributes, as in\n<code><time units=\"s\">1234</time></code>.</p>\n<p>Note: Use <a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files.</p>\n",
- "is_constructor": 1,
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal tags.\n let mammals = myXML.getChildren('mammal');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the mammals array.\n for (let i = 0; i < mammals.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the mammal's common name.\n let name = mammals[i].getContent();\n\n // Display the mammal's name.\n text(name, 20, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Zebra\" written on three separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "RIGHT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 683,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Vector": {
- "name": "p5.Vector",
- "shortname": "p5.Vector",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "Math",
- "submodule": "Vector",
- "namespace": "",
- "file": "src/math/p5.Vector.js",
- "line": 11,
- "description": "<p>A class to describe a two or three-dimensional vector.</p>\n<p>A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection.</p>\n<p><code>p5.Vector</code> objects are often used to program motion because they simplify\nthe math. For example, a moving ball has a position and a velocity.\nPosition describes where the ball is in space. The ball's position vector\nextends from the origin to the ball's center. Velocity describes the ball's\nspeed and the direction it's moving. If the ball is moving straight up, its\nvelocity vector points straight up. Adding the ball's velocity vector to\nits position vector moves it, as in <code>pos.add(vel)</code>. Vector math relies on\nmethods inside the <code>p5.Vector</code> class.</p>\n<p>Note: <a href=\"#/p5/createVector\">createVector()</a> is the recommended way\nto make an instance of this class.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "x",
- "description": "<p>x component of the vector.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "y",
- "description": "<p>y component of the vector.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "z",
- "description": "<p>z component of the vector.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(25, 25);\n let p2 = createVector(75, 75);\n\n // Style the points.\n strokeWeight(5);\n\n // Draw the first point using a p5.Vector.\n point(p1);\n\n // Draw the second point using a p5.Vector's components.\n point(p2.x, p2.y);\n\n describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pos;\nlet vel;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n pos = createVector(50, 100);\n vel = createVector(0, -1);\n\n describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');\n}\n\nfunction draw() {\n background(200);\n\n // Add velocity to position.\n pos.add(vel);\n\n // If the dot reaches the top of the canvas,\n // restart from the bottom.\n if (pos.y < 0) {\n pos.y = 100;\n }\n\n // Draw the dot.\n strokeWeight(5);\n point(pos);\n}\n</code>\n</div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "LEFT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 689,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Font": {
- "name": "p5.Font",
- "shortname": "p5.Font",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "Typography",
- "submodule": "Loading & Displaying",
- "namespace": "",
- "file": "src/typography/p5.Font.js",
- "line": 13,
- "description": "<p>A class to describe fonts.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "pInst",
- "description": "<p>pointer to p5 instance.</p>\n",
- "type": "P5",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\nlet font;\n\nfunction preload() {\n // Creates a p5.Font object.\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the text.\n fill('deeppink');\n textFont(font);\n textSize(36);\n\n // Display the text.\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a gray background.');\n}\n</code>\n</div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "CENTER",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 695,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Camera": {
- "name": "p5.Camera",
- "shortname": "p5.Camera",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "3D",
- "submodule": "Camera",
- "namespace": "",
- "file": "src/webgl/p5.Camera.js",
- "line": 723,
- "description": "<p>A class to describe a camera for viewing a 3D sketch.</p>\n<p>Each <code>p5.Camera</code> object represents a camera that views a section of 3D\nspace. It stores information about the camera’s position, orientation, and\nprojection.</p>\n<p>In WebGL mode, the default camera is a <code>p5.Camera</code> object that can be\ncontrolled with the <a href=\"#/p5/camera\">camera()</a>,\n<a href=\"#/p5/perspective\">perspective()</a>,\n<a href=\"#/p5/ortho\">ortho()</a>, and\n<a href=\"#/p5/frustum\">frustum()</a> functions. Additional cameras can be\ncreated with <a href=\"#/p5/createCamera\">createCamera()</a> and activated\nwith <a href=\"#/p5/setCamera\">setCamera()</a>.</p>\n<p>Note: <code>p5.Camera</code>’s methods operate in two coordinate systems:</p>\n<ul>\n<li>The “world” coordinate system describes positions in terms of their\nrelationship to the origin along the x-, y-, and z-axes. For example,\ncalling <code>myCamera.setPosition()</code> places the camera in 3D space using\n\"world\" coordinates.</li>\n<li>The \"local\" coordinate system describes positions from the camera's point\nof view: left-right, up-down, and forward-backward. For example, calling\n<code>myCamera.move()</code> moves the camera along its own axes.</li>\n</ul>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "rendererGL",
- "description": "<p>instance of WebGL renderer</p>\n",
- "type": "RendererGL"
- }
- ],
- "example": [
- "\n<div>\n<code>\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn the camera left and right, called \"panning\".\n cam.pan(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "TOP",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 701,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Framebuffer": {
- "name": "p5.Framebuffer",
- "shortname": "p5.Framebuffer",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "Rendering",
- "namespace": "",
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 76,
- "description": "<p>A class to describe a high-performance drawing surface for textures.</p>\n<p>Each <code>p5.Framebuffer</code> object provides a dedicated drawing surface called\na <em>framebuffer</em>. They're similar to\n<a href=\"#/p5.Graphics\">p5.Graphics</a> objects but can run much faster.\nPerformance is improved because the framebuffer shares the same WebGL\ncontext as the canvas used to create it.</p>\n<p><code>p5.Framebuffer</code> objects have all the drawing features of the main\ncanvas. Drawing instructions meant for the framebuffer must be placed\nbetween calls to\n<a href=\"#/p5.Framebuffer/begin\">myBuffer.begin()</a> and\n<a href=\"#/p5.Framebuffer/end\">myBuffer.end()</a>. The resulting image\ncan be applied as a texture by passing the <code>p5.Framebuffer</code> object to the\n<a href=\"#/p5/texture\">texture()</a> function, as in <code>texture(myBuffer)</code>.\nIt can also be displayed on the main canvas by passing it to the\n<a href=\"#/p5/image\">image()</a> function, as in <code>image(myBuffer, 0, 0)</code>.</p>\n<p>Note: <a href=\"#/p5/createFramebuffer\">createFramebuffer()</a> is the\nrecommended way to create an instance of this class.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "target",
- "description": "<p>sketch instance or\n <a href=\"#/p5.Graphics\">p5.Graphics</a>\n object.</p>\n",
- "type": "p5.Graphics|p5"
- },
- {
- "name": "settings",
- "description": "<p>configuration options.</p>\n",
- "type": "Object",
- "optional": true
- }
- ]
+ {
+ "itemtype": "property",
+ "name": "BOTTOM",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 707,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Geometry": {
- "name": "p5.Geometry",
- "shortname": "p5.Geometry",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "Shape",
- "submodule": "3D Primitives",
- "namespace": "",
- "file": "src/webgl/p5.Geometry.js",
- "line": 13,
- "description": "<p>A class to describe a 3D shape.</p>\n<p>Each <code>p5.Geometry</code> object represents a 3D shape as a set of connected\npoints called <em>vertices</em>. All 3D shapes are made by connecting vertices to\nform triangles that are stitched together. Each triangular patch on the\ngeometry's surface is called a <em>face</em>. The geometry stores information\nabout its vertices and faces for use with effects such as lighting and\ntexture mapping.</p>\n<p>The first parameter, <code>detailX</code>, is optional. If a number is passed, as in\n<code>new p5.Geometry(24)</code>, it sets the number of triangle subdivisions to use\nalong the geometry's x-axis. By default, <code>detailX</code> is 1.</p>\n<p>The second parameter, <code>detailY</code>, is also optional. If a number is passed,\nas in <code>new p5.Geometry(24, 16)</code>, it sets the number of triangle\nsubdivisions to use along the geometry's y-axis. By default, <code>detailX</code> is\n1.</p>\n<p>The third parameter, <code>callback</code>, is also optional. If a function is passed,\nas in <code>new p5.Geometry(24, 16, createShape)</code>, it will be called once to add\nvertices to the new 3D shape.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "detailX",
- "description": "<p>number of vertices along the x-axis.</p>\n",
- "type": "Integer",
- "optional": true
- },
- {
- "name": "detailY",
- "description": "<p>number of vertices along the y-axis.</p>\n",
- "type": "Integer",
- "optional": true
- },
- {
- "name": "callback",
- "description": "<p>function to call once the geometry is created.</p>\n",
- "type": "Function",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = new p5.Geometry();\n\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(40, 0, 0);\n\n // Add the vertices to the p5.Geometry object's vertices array.\n myGeometry.vertices.push(v0, v1, v2);\n\n describe('A white triangle drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object using a callback function.\n myGeometry = new p5.Geometry(1, 1, createShape);\n\n describe('A white triangle drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(40, 0, 0);\n\n // \"this\" refers to the p5.Geometry object being created.\n\n // Add the vertices to the p5.Geometry object's vertices array.\n this.vertices.push(v0, v1, v2);\n\n // Add an array to list which vertices belong to the face.\n // Vertices are listed in clockwise \"winding\" order from\n // left to top to right.\n this.faces.push([0, 1, 2]);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object using a callback function.\n myGeometry = new p5.Geometry(1, 1, createShape);\n\n describe('A white triangle drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(40, 0, 0);\n\n // \"this\" refers to the p5.Geometry object being created.\n\n // Add the vertices to the p5.Geometry object's vertices array.\n this.vertices.push(v0, v1, v2);\n\n // Add an array to list which vertices belong to the face.\n // Vertices are listed in clockwise \"winding\" order from\n // left to top to right.\n this.faces.push([0, 1, 2]);\n\n // Compute the surface normals to help with lighting.\n this.computeNormals();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\n// Adapted from Paul Wheeler's wonderful p5.Geometry tutorial.\n// https://www.paulwheeler.us/articles/custom-3d-geometry-in-p5js/\n// CC-BY-SA 4.0\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n // Set detailX to 48 and detailY to 2.\n // >>> try changing them.\n myGeometry = new p5.Geometry(48, 2, createShape);\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n strokeWeight(0.2);\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n\nfunction createShape() {\n // \"this\" refers to the p5.Geometry object being created.\n\n // Define the Möbius strip with a few parameters.\n let spread = 0.1;\n let radius = 30;\n let stripWidth = 15;\n let xInterval = 4 * PI / this.detailX;\n let yOffset = -stripWidth / 2;\n let yInterval = stripWidth / this.detailY;\n\n for (let j = 0; j <= this.detailY; j += 1) {\n // Calculate the \"vertical\" point along the strip.\n let v = yOffset + yInterval * j;\n\n for (let i = 0; i <= this.detailX; i += 1) {\n // Calculate the angle of rotation around the strip.\n let u = i * xInterval;\n\n // Calculate the coordinates of the vertex.\n let x = (radius + v * cos(u / 2)) * cos(u) - sin(u / 2) * 2 * spread;\n let y = (radius + v * cos(u / 2)) * sin(u);\n if (u < TWO_PI) {\n y += sin(u) * spread;\n } else {\n y -= sin(u) * spread;\n }\n let z = v * sin(u / 2) + sin(u / 4) * 4 * spread;\n\n // Create a p5.Vector object to position the vertex.\n let vert = createVector(x, y, z);\n\n // Add the vertex to the p5.Geometry object's vertices array.\n this.vertices.push(vert);\n }\n }\n\n // Compute the faces array.\n this.computeFaces();\n\n // Compute the surface normals to help with lighting.\n this.computeNormals();\n}\n</code>\n</div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "BASELINE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 713,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Shader": {
- "name": "p5.Shader",
- "shortname": "p5.Shader",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "3D",
- "submodule": "Material",
- "namespace": "",
- "file": "src/webgl/p5.Shader.js",
- "line": 11,
- "description": "<p>A class to describe a shader program.</p>\n<p>Each <code>p5.Shader</code> object contains a shader program that runs on the graphics\nprocessing unit (GPU). Shaders can process many pixels or vertices at the\nsame time, making them fast for many graphics tasks. They’re written in a\nlanguage called\n<a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\" target=\"_blank\">GLSL</a>\nand run along with the rest of the code in a sketch.</p>\n<p>A shader program consists of two files, a vertex shader and a fragment\nshader. The vertex shader affects where 3D geometry is drawn on the screen\nand the fragment shader affects color. Once the <code>p5.Shader</code> object is\ncreated, it can be used with the <a href=\"#/p5/shader\">shader()</a>\nfunction, as in <code>shader(myShader)</code>.</p>\n<p>A shader can optionally describe <em>hooks,</em> which are functions in GLSL that\nusers may choose to provide to customize the behavior of the shader. For the\nvertex or the fragment shader, users can pass in an object where each key is\nthe type and name of a hook function, and each value is a string with the\nparameter list and default implementation of the hook. For example, to let users\noptionally run code at the start of the vertex shader, the options object could\ninclude:</p>\n<pre><code class=\"language-js\">{\n vertex: {\n 'void beforeVertex': '() {}'\n }\n}\n</code></pre>\n<p>Then, in your vertex shader source, you can run a hook by calling a function\nwith the same name prefixed by <code>HOOK_</code>:</p>\n<pre><code class=\"language-glsl\">void main() {\n HOOK_beforeVertex();\n // Add the rest of your shader code here!\n}\n</code></pre>\n<p>Note: <a href=\"#/p5/createShader\">createShader()</a>,\n<a href=\"#/p5/createFilterShader\">createFilterShader()</a>, and\n<a href=\"#/p5/loadShader\">loadShader()</a> are the recommended ways to\ncreate an instance of this class.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "renderer",
- "description": "<p>WebGL context for this shader.</p>\n",
- "type": "p5.RendererGL"
- },
- {
- "name": "vertSrc",
- "description": "<p>source code for the vertex shader program.</p>\n",
- "type": "String"
- },
- {
- "name": "fragSrc",
- "description": "<p>source code for the fragment shader program.</p>\n",
- "type": "String"
- },
- {
- "name": "options",
- "description": "<p>An optional object describing how this shader can\nbe augmented with hooks. It can include:</p>\n<ul>\n<li><code>vertex</code>: An object describing the available vertex shader hooks.</li>\n<li><code>fragment</code>: An object describing the available frament shader hooks.</li>\n</ul>\n",
- "type": "Object",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(myShader);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n</code>\n</div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "POINTS",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 719,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.sound": {
- "name": "p5.sound",
- "shortname": "p5.sound",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": ""
+ {
+ "itemtype": "property",
+ "name": "LINES",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 725,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.SoundFile": {
- "name": "p5.SoundFile",
- "shortname": "p5.SoundFile",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 1405,
- "description": "<p>SoundFile object with a path to a file.</p>\n\n<p>The p5.SoundFile may not be available immediately because\nit loads the file information asynchronously.</p>\n\n<p>To do something with the sound as soon as it loads\npass the name of a function as the second parameter.</p>\n\n<p>Only one file path is required. However, audio file formats\n(i.e. mp3, ogg, wav and m4a/aac) are not supported by all\nweb browsers. If you want to ensure compatability, instead of a single\nfile path, you may include an Array of filepaths, and the browser will\nchoose a format that works.</p>",
- "is_constructor": 1,
- "params": [
- {
- "name": "path",
- "description": "<p>path to a sound file (String). Optionally,\n you may include multiple file formats in\n an array. Alternately, accepts an object\n from the HTML5 File API, or a p5.File.</p>\n",
- "type": "String|Array"
- },
- {
- "name": "successCallback",
- "description": "<p>Name of a function to call once file loads</p>\n",
- "type": "Function",
- "optional": true
- },
- {
- "name": "errorCallback",
- "description": "<p>Name of a function to call if file fails to\n load. This function will receive an error or\n XMLHttpRequest object with information\n about what went wrong.</p>\n",
- "type": "Function",
- "optional": true
- },
- {
- "name": "whileLoadingCallback",
- "description": "<p>Name of a function to call while file\n is loading. That function will\n receive progress of the request to\n load the sound file\n (between 0 and 1) as its first\n parameter. This progress\n does not account for the additional\n time needed to decode the audio data.</p>\n",
- "type": "Function",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet mySound;\nfunction preload() {\n soundFormats('mp3', 'ogg');\n mySound = loadSound('assets/doorbell');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap here to play', 10, 20);\n}\n\nfunction canvasPressed() {\n // playing a sound file on a user gesture\n // is equivalent to `userStartAudio()`\n mySound.play();\n}\n </code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "LINE_STRIP",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 731,
+ "type": "number",
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Amplitude": {
- "name": "p5.Amplitude",
- "shortname": "p5.Amplitude",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 3022,
- "description": "<p>Amplitude measures volume between 0.0 and 1.0.\nListens to all p5sound by default, or use setInput()\nto listen to a specific sound source. Accepts an optional\nsmoothing value, which defaults to 0.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "smoothing",
- "description": "<p>between 0.0 and .999 to smooth\n amplitude readings (defaults to 0)</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet sound, amplitude;\n\nfunction preload(){\n sound = loadSound('assets/beat.mp3');\n}\nfunction setup() {\n let cnv = createCanvas(100,100);\n cnv.mouseClicked(togglePlay);\n amplitude = new p5.Amplitude();\n}\n\nfunction draw() {\n background(220);\n text('tap to play', 20, 20);\n\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\n\nfunction togglePlay() {\n if (sound.isPlaying() ){\n sound.pause();\n } else {\n sound.loop();\n\t\tamplitude = new p5.Amplitude();\n\t\tamplitude.setInput(sound);\n }\n}\n\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "LINE_LOOP",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 737,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.FFT": {
- "name": "p5.FFT",
- "shortname": "p5.FFT",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 3347,
- "description": "<p>FFT (Fast Fourier Transform) is an analysis algorithm that\nisolates individual\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\">\naudio frequencies</a> within a waveform.</p>\n\n<p>Once instantiated, a p5.FFT object can return an array based on\ntwo types of analyses: <br> • <code>FFT.waveform()</code> computes\namplitude values along the time domain. The array indices correspond\nto samples across a brief moment in time. Each value represents\namplitude of the waveform at that sample of time.<br>\n• <code>FFT.analyze() </code> computes amplitude values along the\nfrequency domain. The array indices correspond to frequencies (i.e.\npitches), from the lowest to the highest that humans can hear. Each\nvalue represents amplitude at that slice of the frequency spectrum.\nUse with <code>getEnergy()</code> to measure amplitude at specific\nfrequencies, or within a range of frequencies. </p>\n\n<p>FFT analyzes a very short snapshot of sound called a sample\nbuffer. It returns an array of amplitude measurements, referred\nto as <code>bins</code>. The array is 1024 bins long by default.\nYou can change the bin array length, but it must be a power of 2\nbetween 16 and 1024 in order for the FFT algorithm to function\ncorrectly. The actual size of the FFT buffer is twice the\nnumber of bins, so given a standard sample rate, the buffer is\n2048/44100 seconds long.</p>",
- "is_constructor": 1,
- "params": [
- {
- "name": "smoothing",
- "description": "<p>Smooth results of Freq Spectrum.\n 0.0 < smoothing < 1.0.\n Defaults to 0.8.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "bins",
- "description": "<p>Length of resulting array.\n Must be a power of two between\n 16 and 1024. Defaults to 1024.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nfunction preload(){\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup(){\n let cnv = createCanvas(100,100);\n cnv.mouseClicked(togglePlay);\n fft = new p5.FFT();\n sound.amp(0.2);\n}\n\nfunction draw(){\n background(220);\n\n let spectrum = fft.analyze();\n noStroke();\n fill(255, 0, 255);\n for (let i = 0; i< spectrum.length; i++){\n let x = map(i, 0, spectrum.length, 0, width);\n let h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width / spectrum.length, h )\n }\n\n let waveform = fft.waveform();\n noFill();\n beginShape();\n stroke(20);\n for (let i = 0; i < waveform.length; i++){\n let x = map(i, 0, waveform.length, 0, width);\n let y = map( waveform[i], -1, 1, 0, height);\n vertex(x,y);\n }\n endShape();\n\n text('tap to play', 20, 20);\n}\n\nfunction togglePlay() {\n if (sound.isPlaying()) {\n sound.pause();\n } else {\n sound.loop();\n }\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "TRIANGLES",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 743,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Oscillator": {
- "name": "p5.Oscillator",
- "shortname": "p5.Oscillator",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 4060,
- "description": "<p>Creates a signal that oscillates between -1.0 and 1.0.\nBy default, the oscillation takes the form of a sinusoidal\nshape ('sine'). Additional types include 'triangle',\n'sawtooth' and 'square'. The frequency defaults to\n440 oscillations per second (440Hz, equal to the pitch of an\n'A' note).</p>\n\n<p>Set the type of oscillation with setType(), or by instantiating a\nspecific oscillator: <a href=\"/reference/#/p5.SinOsc\">p5.SinOsc</a>, <a\nhref=\"/reference/#/p5.TriOsc\">p5.TriOsc</a>, <a\nhref=\"/reference/#/p5.SqrOsc\">p5.SqrOsc</a>, or <a\nhref=\"/reference/#/p5.SawOsc\">p5.SawOsc</a>.\n</p>",
- "is_constructor": 1,
- "params": [
- {
- "name": "freq",
- "description": "<p>frequency defaults to 440Hz</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "type",
- "description": "<p>type of oscillator. Options:\n 'sine' (default), 'triangle',\n 'sawtooth', 'square'</p>\n",
- "type": "String",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet osc, playing, freq, amp;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playOscillator);\n osc = new p5.Oscillator('sine');\n}\n\nfunction draw() {\n background(220)\n freq = constrain(map(mouseX, 0, width, 100, 500), 100, 500);\n amp = constrain(map(mouseY, height, 0, 0, 1), 0, 1);\n\n text('tap to play', 20, 20);\n text('freq: ' + freq, 20, 40);\n text('amp: ' + amp, 20, 60);\n\n if (playing) {\n // smooth the transitions by 0.1 seconds\n osc.freq(freq, 0.1);\n osc.amp(amp, 0.1);\n }\n}\n\nfunction playOscillator() {\n // starting an oscillator on a user gesture will enable audio\n // in browsers that have a strict autoplay policy.\n // See also: userStartAudio();\n osc.start();\n playing = true;\n}\n\nfunction mouseReleased() {\n // ramp amplitude to 0 over 0.5 seconds\n osc.amp(0, 0.5);\n playing = false;\n}\n</code> </div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "TRIANGLE_FAN",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 749,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.SinOsc": {
- "name": "p5.SinOsc",
- "shortname": "p5.SinOsc",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 4602,
- "description": "<p>Constructor: <code>new p5.SinOsc()</code>.\nThis creates a Sine Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sine')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sine')</code>.\nSee p5.Oscillator for methods.</p>\n",
- "is_constructor": 1,
- "extends": "p5.Oscillator",
- "params": [
- {
- "name": "freq",
- "description": "<p>Set the frequency</p>\n",
- "type": "Number",
- "optional": true
- }
- ]
+ {
+ "itemtype": "property",
+ "name": "TRIANGLE_STRIP",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 755,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.TriOsc": {
- "name": "p5.TriOsc",
- "shortname": "p5.TriOsc",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 4629,
- "description": "<p>Constructor: <code>new p5.TriOsc()</code>.\nThis creates a Triangle Wave Oscillator and is\nequivalent to <code>new p5.Oscillator('triangle')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('triangle')</code>.\nSee p5.Oscillator for methods.</p>\n",
- "is_constructor": 1,
- "extends": "p5.Oscillator",
- "params": [
- {
- "name": "freq",
- "description": "<p>Set the frequency</p>\n",
- "type": "Number",
- "optional": true
- }
- ]
+ {
+ "itemtype": "property",
+ "name": "QUADS",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 761,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.SawOsc": {
- "name": "p5.SawOsc",
- "shortname": "p5.SawOsc",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 4656,
- "description": "<p>Constructor: <code>new p5.SawOsc()</code>.\nThis creates a SawTooth Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sawtooth')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sawtooth')</code>.\nSee p5.Oscillator for methods.</p>\n",
- "is_constructor": 1,
- "extends": "p5.Oscillator",
- "params": [
- {
- "name": "freq",
- "description": "<p>Set the frequency</p>\n",
- "type": "Number",
- "optional": true
- }
- ]
+ {
+ "itemtype": "property",
+ "name": "QUAD_STRIP",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 767,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.SqrOsc": {
- "name": "p5.SqrOsc",
- "shortname": "p5.SqrOsc",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 4683,
- "description": "<p>Constructor: <code>new p5.SqrOsc()</code>.\nThis creates a Square Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('square')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('square')</code>.\nSee p5.Oscillator for methods.</p>\n",
- "is_constructor": 1,
- "extends": "p5.Oscillator",
- "params": [
- {
- "name": "freq",
- "description": "<p>Set the frequency</p>\n",
- "type": "Number",
- "optional": true
- }
- ]
+ {
+ "itemtype": "property",
+ "name": "TESS",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 773,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Envelope": {
- "name": "p5.Envelope",
- "shortname": "p5.Envelope",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 4721,
- "description": "<p>Envelopes are pre-defined amplitude distribution over time.\nTypically, envelopes are used to control the output volume\nof an object, a series of fades referred to as Attack, Decay,\nSustain and Release (\n<a href=\"https://upload.wikimedia.org/wikipedia/commons/e/ea/ADSR_parameter.svg\">ADSR</a>\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can\ncontrol an Oscillator's frequency like this: <code>osc.freq(env)</code>.</p>\n<p>Use <code><a href=\"#/p5.Envelope/setRange\">setRange</a></code> to change the attack/release level.\nUse <code><a href=\"#/p5.Envelope/setADSR\">setADSR</a></code> to change attackTime, decayTime, sustainPercent and releaseTime.</p>\n<p>Use the <code><a href=\"#/p5.Envelope/play\">play</a></code> method to play the entire envelope,\nthe <code><a href=\"#/p5.Envelope/ramp\">ramp</a></code> method for a pingable trigger,\nor <code><a href=\"#/p5.Envelope/triggerAttack\">triggerAttack</a></code>/\n<code><a href=\"#/p5.Envelope/triggerRelease\">triggerRelease</a></code> to trigger noteOn/noteOff.</p>",
- "is_constructor": 1,
- "example": [
- "\n<div><code>\nlet t1 = 0.1; // attack time in seconds\nlet l1 = 0.7; // attack level 0.0 to 1.0\nlet t2 = 0.3; // decay time in seconds\nlet l2 = 0.1; // decay level 0.0 to 1.0\n\nlet env;\nlet triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n text('tap to play', 20, 20);\n cnv.mousePressed(playSound);\n\n env = new p5.Envelope(t1, l1, t2, l2);\n triOsc = new p5.Oscillator('triangle');\n}\n\nfunction playSound() {\n // starting the oscillator ensures that audio is enabled.\n triOsc.start();\n env.play(triOsc);\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "EMPTY_PATH",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 779,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Noise": {
- "name": "p5.Noise",
- "shortname": "p5.Noise",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 5620,
- "description": "<p>Noise is a type of oscillator that generates a buffer with random values.</p>\n",
- "extends": "p5.Oscillator",
- "is_constructor": 1,
- "params": [
- {
- "name": "type",
- "description": "<p>Type of noise can be 'white' (default),\n 'brown' or 'pink'.</p>\n",
- "type": "String"
- }
- ]
+ {
+ "itemtype": "property",
+ "name": "PATH",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 785,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Pulse": {
- "name": "p5.Pulse",
- "shortname": "p5.Pulse",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 5779,
- "description": "<p>Creates a Pulse object, an oscillator that implements\nPulse Width Modulation.\nThe pulse is created with two oscillators.\nAccepts a parameter for frequency, and to set the\nwidth between the pulses. See <a href=\"\nhttp://p5js.org/reference/#/p5.Oscillator\">\n<code>p5.Oscillator</code> for a full list of methods.</p>\n",
- "extends": "p5.Oscillator",
- "is_constructor": 1,
- "params": [
- {
- "name": "freq",
- "description": "<p>Frequency in oscillations per second (Hz)</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "w",
- "description": "<p>Width between the pulses (0 to 1.0,\n defaults to 0)</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet pulse;\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(startPulse);\n background(220);\n\n pulse = new p5.Pulse();\n pulse.amp(0.5);\n pulse.freq(220);\n}\nfunction startPulse() {\n pulse.start();\n pulse.amp(0.5, 0.02);\n}\nfunction mouseReleased() {\n pulse.amp(0, 0.2);\n}\nfunction draw() {\n background(220);\n text('tap to play', 5, 20, width - 20);\n let w = map(mouseX, 0, width, 0, 1);\n w = constrain(w, 0, 1);\n pulse.width(w);\n text('pulse width: ' + w, 5, height - 20);\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "CLOSE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 791,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.AudioIn": {
- "name": "p5.AudioIn",
- "shortname": "p5.AudioIn",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 6015,
- "description": "<p>Get audio from an input, i.e. your computer's microphone.</p>\n\n<p>Turn the mic on/off with the start() and stop() methods. When the mic\nis on, its volume can be measured with getLevel or by connecting an\nFFT object.</p>\n\n<p>If you want to hear the AudioIn, use the .connect() method.\nAudioIn does not connect to p5.sound output by default to prevent\nfeedback.</p>\n\n<p><em>Note: This uses the <a href=\"http://caniuse.com/stream\">getUserMedia/\nStream</a> API, which is not supported by certain browsers. Access in Chrome browser\nis limited to localhost and https, but access over http may be limited.</em></p>",
- "is_constructor": 1,
- "params": [
- {
- "name": "errorCallback",
- "description": "<p>A function to call if there is an error\n accessing the AudioIn. For example,\n Safari and iOS devices do not\n currently allow microphone access.</p>\n",
- "type": "Function",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet mic;\n\n function setup(){\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(userStartAudio);\n textAlign(CENTER);\n mic = new p5.AudioIn();\n mic.start();\n}\n\nfunction draw(){\n background(0);\n fill(255);\n text('tap to start', width/2, 20);\n\n micLevel = mic.getLevel();\n let y = height - micLevel * height;\n ellipse(width/2, y, 10, 10);\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "OPEN",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 797,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Effect": {
- "name": "p5.Effect",
- "shortname": "p5.Effect",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 6423,
- "description": "<p>Effect is a base class for audio effects in p5. <br>\nThis module handles the nodes and methods that are\ncommon and useful for current and future effects.</p>\n<p>This class is extended by <a href=\"/reference/#/p5.Distortion\">p5.Distortion</a>,\n<a href=\"/reference/#/p5.Compressor\">p5.Compressor</a>,\n<a href=\"/reference/#/p5.Delay\">p5.Delay</a>,\n<a href=\"/reference/#/p5.Filter\">p5.Filter</a>,\n<a href=\"/reference/#/p5.Reverb\">p5.Reverb</a>.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "ac",
- "description": "<p>Reference to the audio context of the p5 object</p>\n",
- "type": "Object",
- "optional": true
- },
- {
- "name": "input",
- "description": "<p>Gain Node effect wrapper</p>\n",
- "type": "AudioNode",
- "optional": true
- },
- {
- "name": "output",
- "description": "<p>Gain Node effect wrapper</p>\n",
- "type": "AudioNode",
- "optional": true
- },
- {
- "name": "_drywet",
- "description": "<p>Tone.JS CrossFade node (defaults to value: 1)</p>\n",
- "type": "Object",
- "optional": true
- },
- {
- "name": "wet",
- "description": "<p>Effects that extend this class should connect\n to the wet signal to this gain node, so that dry and wet\n signals are mixed properly.</p>\n",
- "type": "AudioNode",
- "optional": true
- }
- ]
+ {
+ "itemtype": "property",
+ "name": "CHORD",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 803,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Filter": {
- "name": "p5.Filter",
- "shortname": "p5.Filter",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 6628,
- "description": "<p>A p5.Filter uses a Web Audio Biquad Filter to filter\nthe frequency response of an input source. Subclasses\ninclude:</p>\n<a href=\"/reference/#/p5.LowPass\"><code>p5.LowPass</code></a>:\nAllows frequencies below the cutoff frequency to pass through,\nand attenuates frequencies above the cutoff.<br/>\n<a href=\"/reference/#/p5.HighPass\"><code>p5.HighPass</code></a>:\nThe opposite of a lowpass filter. <br/>\n<a href=\"/reference/#/p5.BandPass\"><code>p5.BandPass</code></a>:\nAllows a range of frequencies to pass through and attenuates\nthe frequencies below and above this frequency range.<br/>\n\n<p>The <code>.res()</code> method controls either width of the\nbandpass, or resonance of the low/highpass cutoff frequency.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n",
- "extends": "p5.Effect",
- "is_constructor": 1,
- "params": [
- {
- "name": "type",
- "description": "<p>'lowpass' (default), 'highpass', 'bandpass'</p>\n",
- "type": "String",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet fft, noise, filter;\n\nfunction setup() {\n let cnv = createCanvas(100,100);\n cnv.mousePressed(makeNoise);\n fill(255, 0, 255);\n\n filter = new p5.BandPass();\n noise = new p5.Noise();\n noise.disconnect();\n noise.connect(filter);\n\n fft = new p5.FFT();\n}\n\nfunction draw() {\n background(220);\n\n // set the BandPass frequency based on mouseX\n let freq = map(mouseX, 0, width, 20, 10000);\n freq = constrain(freq, 0, 22050);\n filter.freq(freq);\n // give the filter a narrow band (lower res = wider bandpass)\n filter.res(50);\n\n // draw filtered spectrum\n let spectrum = fft.analyze();\n noStroke();\n for (let i = 0; i < spectrum.length; i++) {\n let x = map(i, 0, spectrum.length, 0, width);\n let h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width/spectrum.length, h);\n }\n if (!noise.started) {\n text('tap here and drag to change frequency', 10, 20, width - 20);\n } else {\n text('Frequency: ' + round(freq)+'Hz', 20, 20, width - 20);\n }\n}\n\nfunction makeNoise() {\n // see also: `userStartAudio()`\n noise.start();\n noise.amp(0.5, 0.2);\n}\n\nfunction mouseReleased() {\n noise.amp(0, 0.2);\n}\n\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "PIE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 809,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.LowPass": {
- "name": "p5.LowPass",
- "shortname": "p5.LowPass",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 6914,
- "description": "<p>Constructor: <code>new p5.LowPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('lowpass')</code>.\nSee p5.Filter for methods.</p>\n",
- "is_constructor": 1,
- "extends": "p5.Filter"
+ {
+ "itemtype": "property",
+ "name": "PROJECT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 815,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.HighPass": {
- "name": "p5.HighPass",
- "shortname": "p5.HighPass",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 6938,
- "description": "<p>Constructor: <code>new p5.HighPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('highpass')</code>.\nSee p5.Filter for methods.</p>\n",
- "is_constructor": 1,
- "extends": "p5.Filter"
+ {
+ "itemtype": "property",
+ "name": "SQUARE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 821,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.BandPass": {
- "name": "p5.BandPass",
- "shortname": "p5.BandPass",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 6962,
- "description": "<p>Constructor: <code>new p5.BandPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('bandpass')</code>.\nSee p5.Filter for methods.</p>\n",
- "is_constructor": 1,
- "extends": "p5.Filter"
+ {
+ "itemtype": "property",
+ "name": "ROUND",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 827,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.EQ": {
- "name": "p5.EQ",
- "shortname": "p5.EQ",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 7105,
- "description": "<p>p5.EQ is an audio effect that performs the function of a multiband\naudio equalizer. Equalization is used to adjust the balance of\nfrequency compoenents of an audio signal. This process is commonly used\nin sound production and recording to change the waveform before it reaches\na sound output device. EQ can also be used as an audio effect to create\ninteresting distortions by filtering out parts of the spectrum. p5.EQ is\nbuilt using a chain of Web Audio Biquad Filter Nodes and can be\ninstantiated with 3 or 8 bands. Bands can be added or removed from\nthe EQ by directly modifying p5.EQ.bands (the array that stores filters).</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n",
- "is_constructor": 1,
- "extends": "p5.Effect",
- "params": [
- {
- "name": "_eqsize",
- "description": "<p>Constructor will accept 3 or 8, defaults to 3</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "return": {
- "description": "p5.EQ object",
- "type": "Object"
- },
- "example": [
- "\n<div><code>\nlet eq, soundFile\nlet eqBandIndex = 0;\nlet eqBandNames = ['lows', 'mids', 'highs'];\n\nfunction preload() {\n soundFormats('mp3', 'ogg');\n soundFile = loadSound('assets/beat');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(toggleSound);\n\n eq = new p5.EQ(eqBandNames.length);\n soundFile.disconnect();\n eq.process(soundFile);\n}\n\nfunction draw() {\n background(30);\n noStroke();\n fill(255);\n textAlign(CENTER);\n text('filtering ', 50, 25);\n\n fill(255, 40, 255);\n textSize(26);\n text(eqBandNames[eqBandIndex], 50, 55);\n\n fill(255);\n textSize(9);\n\n if (!soundFile.isPlaying()) {\n text('tap to play', 50, 80);\n } else {\n text('tap to filter next band', 50, 80)\n }\n}\n\nfunction toggleSound() {\n if (!soundFile.isPlaying()) {\n soundFile.play();\n } else {\n eqBandIndex = (eqBandIndex + 1) % eq.bands.length;\n }\n\n for (let i = 0; i < eq.bands.length; i++) {\n eq.bands[i].gain(0);\n }\n // filter the band we want to filter\n eq.bands[eqBandIndex].gain(-40);\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "BEVEL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 833,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Panner3D": {
- "name": "p5.Panner3D",
- "shortname": "p5.Panner3D",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 7602,
- "description": "<p>Panner3D is based on the <a title=\"Web Audio Panner docs\" href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a>.\nThis panner is a spatial processing node that allows audio to be positioned\nand oriented in 3D space.</p>\n<p>The position is relative to an <a title=\"Web Audio Listener docs\" href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/AudioListener\">\nAudio Context Listener</a>, which can be accessed\nby <code>p5.soundOut.audiocontext.listener</code></p>\n",
- "is_constructor": 1
+ {
+ "itemtype": "property",
+ "name": "MITER",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 839,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Delay": {
- "name": "p5.Delay",
- "shortname": "p5.Delay",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 7926,
- "description": "<p>Delay is an echo effect. It processes an existing sound source,\nand outputs a delayed version of that sound. The p5.Delay can\nproduce different effects depending on the delayTime, feedback,\nfilter, and type. In the example below, a feedback of 0.5 (the\ndefault value) will produce a looping delay that decreases in\nvolume by 50% each repeat. A filter will cut out the high\nfrequencies so that the delay does not sound as piercing as the\noriginal source.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n",
- "extends": "p5.Effect",
- "is_constructor": 1,
- "example": [
- "\n<div><code>\nlet osc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n text('tap to play', width/2, height/2);\n\n osc = new p5.Oscillator('square');\n osc.amp(0.5);\n delay = new p5.Delay();\n\n // delay.process() accepts 4 parameters:\n // source, delayTime (in seconds), feedback, filter frequency\n delay.process(osc, 0.12, .7, 2300);\n\n cnv.mousePressed(oscStart);\n}\n\nfunction oscStart() {\n osc.start();\n}\n\nfunction mouseReleased() {\n osc.stop();\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "AUTO",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 851,
+ "description": "AUTO allows us to automatically set the width or height of an element (but not both),\nbased on the current height and width of the element. Only one parameter can\nbe passed to the <a href=\"/reference/p5.Element/size\">size</a> function as AUTO, at a time.",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Reverb": {
- "name": "p5.Reverb",
- "shortname": "p5.Reverb",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 8308,
- "description": "<p>Reverb adds depth to a sound through a large number of decaying\nechoes. It creates the perception that sound is occurring in a\nphysical space. The p5.Reverb has paramters for Time (how long does the\nreverb last) and decayRate (how much the sound decays with each echo)\nthat can be set with the .set() or .process() methods. The p5.Convolver\nextends p5.Reverb allowing you to recreate the sound of actual physical\nspaces through convolution.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n",
- "extends": "p5.Effect",
- "is_constructor": 1,
- "example": [
- "\n<div><code>\nlet soundFile, reverb;\nfunction preload() {\n soundFile = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n\n reverb = new p5.Reverb();\n soundFile.disconnect(); // so we'll only hear reverb...\n\n // connect soundFile to reverb, process w/\n // 3 second reverbTime, decayRate of 2%\n reverb.process(soundFile, 3, 2);\n}\n\nfunction draw() {\n let dryWet = constrain(map(mouseX, 0, width, 0, 1), 0, 1);\n // 1 = all reverb, 0 = no reverb\n reverb.drywet(dryWet);\n\n background(220);\n text('tap to play', 10, 20);\n text('dry/wet: ' + round(dryWet * 100) + '%', 10, height - 20);\n}\n\nfunction playSound() {\n soundFile.play();\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "ALT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 858,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Convolver": {
- "name": "p5.Convolver",
- "shortname": "p5.Convolver",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 8549,
- "description": "<p>p5.Convolver extends p5.Reverb. It can emulate the sound of real\nphysical spaces through a process called <a href=\"\nhttps://en.wikipedia.org/wiki/Convolution_reverb#Real_space_simulation\">\nconvolution</a>.</p>\n\n<p>Convolution multiplies any audio input by an \"impulse response\"\nto simulate the dispersion of sound over time. The impulse response is\ngenerated from an audio file that you provide. One way to\ngenerate an impulse response is to pop a balloon in a reverberant space\nand record the echo. Convolution can also be used to experiment with\nsound.</p>\n\n<p>Use the method <code>createConvolution(path)</code> to instantiate a\np5.Convolver with a path to your impulse response audio file.</p>",
- "extends": "p5.Effect",
- "is_constructor": 1,
- "params": [
- {
- "name": "path",
- "description": "<p>path to a sound file</p>\n",
- "type": "String"
- },
- {
- "name": "callback",
- "description": "<p>function to call when loading succeeds</p>\n",
- "type": "Function",
- "optional": true
- },
- {
- "name": "errorCallback",
- "description": "<p>function to call if loading fails.\n This function will receive an error or\n XMLHttpRequest object with information\n about what went wrong.</p>\n",
- "type": "Function",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n\n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n text('tap to play', 20, 20);\n\n // disconnect from main output...\n sound.disconnect();\n\n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n}\n\nfunction playSound() {\n sound.play();\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "BACKSPACE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 865,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Phrase": {
- "name": "p5.Phrase",
- "shortname": "p5.Phrase",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 9103,
- "description": "<p>A phrase is a pattern of musical events over time, i.e.\na series of notes and rests.</p>\n\n<p>Phrases must be added to a p5.Part for playback, and\neach part can play multiple phrases at the same time.\nFor example, one Phrase might be a kick drum, another\ncould be a snare, and another could be the bassline.</p>\n\n<p>The first parameter is a name so that the phrase can be\nmodified or deleted later. The callback is a a function that\nthis phrase will call at every step—for example it might be\ncalled <code>playNote(value){}</code>. The array determines\nwhich value is passed into the callback at each step of the\nphrase. It can be numbers, an object with multiple numbers,\nor a zero (0) indicates a rest so the callback won't be called).</p>",
- "is_constructor": 1,
- "params": [
- {
- "name": "name",
- "description": "<p>Name so that you can access the Phrase.</p>\n",
- "type": "String"
- },
- {
- "name": "callback",
- "description": "<p>The name of a function that this phrase\n will call. Typically it will play a sound,\n and accept two parameters: a time at which\n to play the sound (in seconds from now),\n and a value from the sequence array. The\n time should be passed into the play() or\n start() method to ensure precision.</p>\n",
- "type": "Function"
- },
- {
- "name": "sequence",
- "description": "<p>Array of values to pass into the callback\n at each step of the phrase.</p>\n",
- "type": "Array"
- }
- ],
- "example": [
- "\n<div><code>\nlet mySound, myPhrase, myPart;\nlet pattern = [1,0,0,2,0,2,0,0];\n\nfunction preload() {\n mySound = loadSound('assets/beatbox.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playMyPart);\n background(220);\n text('tap to play', width/2, height/2);\n textAlign(CENTER, CENTER);\n\n myPhrase = new p5.Phrase('bbox', onEachStep, pattern);\n myPart = new p5.Part();\n myPart.addPhrase(myPhrase);\n myPart.setBPM(60);\n}\n\nfunction onEachStep(time, playbackRate) {\n mySound.rate(playbackRate);\n mySound.play(time);\n}\n\nfunction playMyPart() {\n userStartAudio();\n myPart.start();\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "CONTROL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 872,
+ "type": "|",
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Part": {
- "name": "p5.Part",
- "shortname": "p5.Part",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 9185,
- "description": "<p>A p5.Part plays back one or more p5.Phrases. Instantiate a part\nwith steps and tatums. By default, each step represents a 1/16th note.</p>\n\n<p>See p5.Phrase for more about musical timing.</p>",
- "is_constructor": 1,
- "params": [
- {
- "name": "steps",
- "description": "<p>Steps in the part</p>\n",
- "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>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet box, drum, myPart;\nlet boxPat = [1,0,0,2,0,2,0,0];\nlet drumPat = [0,1,1,0,2,0,1,0];\n\nfunction preload() {\n box = loadSound('assets/beatbox.mp3');\n drum = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playMyPart);\n background(220);\n textAlign(CENTER, CENTER);\n text('tap to play', width/2, height/2);\n\n let boxPhrase = new p5.Phrase('box', playBox, boxPat);\n let drumPhrase = new p5.Phrase('drum', playDrum, drumPat);\n myPart = new p5.Part();\n myPart.addPhrase(boxPhrase);\n myPart.addPhrase(drumPhrase);\n myPart.setBPM(60);\n}\n\nfunction playBox(time, playbackRate) {\n box.rate(playbackRate);\n box.play(time);\n}\n\nfunction playDrum(time, playbackRate) {\n drum.rate(playbackRate);\n drum.play(time);\n}\n\nfunction playMyPart() {\n userStartAudio();\n\n myPart.start();\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "DELETE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 879,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Score": {
- "name": "p5.Score",
- "shortname": "p5.Score",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 9493,
- "description": "<p>A Score consists of a series of Parts. The parts will\nbe played back in order. For example, you could have an\nA part, a B part, and a C part, and play them back in this order\n<code>new p5.Score(a, a, b, a, c)</code></p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "parts",
- "description": "<p>One or multiple parts, to be played in sequence.</p>\n",
- "type": "p5.Part",
- "optional": true,
- "multiple": true
- }
- ]
+ {
+ "itemtype": "property",
+ "name": "DOWN_ARROW",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 886,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.SoundLoop": {
- "name": "p5.SoundLoop",
- "shortname": "p5.SoundLoop",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 9673,
- "description": "<p>SoundLoop</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "callback",
- "description": "<p>this function will be called on each iteration of theloop</p>\n",
- "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>\n",
- "type": "Number|String",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\n let synth, soundLoop;\n let notePattern = [60, 62, 64, 67, 69, 72];\n\n function setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n colorMode(HSB);\n background(0, 0, 86);\n text('tap to start/stop', 10, 20);\n\n //the looper's callback is passed the timeFromNow\n //this value should be used as a reference point from\n //which to schedule sounds\n let intervalInSeconds = 0.2;\n soundLoop = new p5.SoundLoop(onSoundLoop, intervalInSeconds);\n\n synth = new p5.MonoSynth();\n}\n\nfunction canvasPressed() {\n // ensure audio is enabled\n userStartAudio();\n\n if (soundLoop.isPlaying) {\n soundLoop.stop();\n } else {\n // start the loop\n soundLoop.start();\n }\n}\n\nfunction onSoundLoop(timeFromNow) {\n let noteIndex = (soundLoop.iterations - 1) % notePattern.length;\n let note = midiToFreq(notePattern[noteIndex]);\n synth.play(note, 0.5, timeFromNow);\n background(noteIndex * 360 / notePattern.length, 50, 100);\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "ENTER",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 893,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Compressor": {
- "name": "p5.Compressor",
- "shortname": "p5.Compressor",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 10036,
- "description": "<p>Compressor is an audio effect class that performs dynamics compression\non an audio input source. This is a very commonly used technique in music\nand sound production. Compression creates an overall louder, richer,\nand fuller sound by lowering the volume of louds and raising that of softs.\nCompression can be used to avoid clipping (sound distortion due to\npeaks in volume) and is especially useful when many sounds are played\nat once. Compression can be used on indivudal sound sources in addition\nto the main output.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n",
- "is_constructor": 1,
- "extends": "p5.Effect"
+ {
+ "itemtype": "property",
+ "name": "ESCAPE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 900,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.PeakDetect": {
- "name": "p5.PeakDetect",
- "shortname": "p5.PeakDetect",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 10312,
- "description": "<p>PeakDetect works in conjunction with p5.FFT to\nlook for onsets in some or all of the frequency spectrum.\n</p>\n<p>\nTo use p5.PeakDetect, call <code>update</code> in the draw loop\nand pass in a p5.FFT object.\n</p>\n<p>\nYou can listen for a specific part of the frequency spectrum by\nsetting the range between <code>freq1</code> and <code>freq2</code>.\n</p>\n\n<p><code>threshold</code> is the threshold for detecting a peak,\nscaled between 0 and 1. It is logarithmic, so 0.1 is half as loud\nas 1.0.</p>\n\n<p>\nThe update method is meant to be run in the draw loop, and\n<b>frames</b> determines how many loops must pass before\nanother peak can be detected.\nFor example, if the frameRate() = 60, you could detect the beat of a\n120 beat-per-minute song with this equation:\n<code> framesPerPeak = 60 / (estimatedBPM / 60 );</code>\n</p>\n\n<p>\nBased on example contribtued by @b2renger, and a simple beat detection\nexplanation by <a\nhref=\"http://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/\"\ntarget=\"_blank\">Felix Turner</a>.\n</p>",
- "is_constructor": 1,
- "params": [
- {
- "name": "freq1",
- "description": "<p>lowFrequency - defaults to 20Hz</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "freq2",
- "description": "<p>highFrequency - defaults to 20000 Hz</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "threshold",
- "description": "<p>Threshold for detecting a beat between 0 and 1\n scaled logarithmically where 0.1 is 1/2 the loudness\n of 1.0. Defaults to 0.35.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "framesPerPeak",
- "description": "<p>Defaults to 20.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\n\nvar cnv, soundFile, fft, peakDetect;\nvar ellipseWidth = 10;\n\nfunction preload() {\n soundFile = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n background(0);\n noStroke();\n fill(255);\n textAlign(CENTER);\n\n // p5.PeakDetect requires a p5.FFT\n fft = new p5.FFT();\n peakDetect = new p5.PeakDetect();\n}\n\nfunction draw() {\n background(0);\n text('click to play/pause', width/2, height/2);\n\n // peakDetect accepts an fft post-analysis\n fft.analyze();\n peakDetect.update(fft);\n\n if ( peakDetect.isDetected ) {\n ellipseWidth = 50;\n } else {\n ellipseWidth *= 0.95;\n }\n\n ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\n}\n\n// toggle play/stop when canvas is clicked\nfunction mouseClicked() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n if (soundFile.isPlaying() ) {\n soundFile.stop();\n } else {\n soundFile.play();\n }\n }\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "LEFT_ARROW",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 907,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.SoundRecorder": {
- "name": "p5.SoundRecorder",
- "shortname": "p5.SoundRecorder",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 10559,
- "description": "<p>Record sounds for playback and/or to save as a .wav file.\nThe p5.SoundRecorder records all sound output from your sketch,\nor can be assigned a specific source with setInput().</p>\n<p>The record() method accepts a p5.SoundFile as a parameter.\nWhen playback is stopped (either after the given amount of time,\nor with the stop() method), the p5.SoundRecorder will send its\nrecording to that p5.SoundFile for playback.</p>",
- "is_constructor": 1,
- "example": [
- "\n<div><code>\nlet mic, recorder, soundFile;\nlet state = 0;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n textAlign(CENTER, CENTER);\n\n // create an audio in\n mic = new p5.AudioIn();\n\n // prompts user to enable their browser mic\n mic.start();\n\n // create a sound recorder\n recorder = new p5.SoundRecorder();\n\n // connect the mic to the recorder\n recorder.setInput(mic);\n\n // this sound file will be used to\n // playback & save the recording\n soundFile = new p5.SoundFile();\n\n text('tap to record', width/2, height/2);\n}\n\nfunction canvasPressed() {\n // ensure audio is enabled\n userStartAudio();\n\n // make sure user enabled the mic\n if (state === 0 && mic.enabled) {\n\n // record to our p5.SoundFile\n recorder.record(soundFile);\n\n background(255,0,0);\n text('Recording!', width/2, height/2);\n state++;\n }\n else if (state === 1) {\n background(0,255,0);\n\n // stop recorder and\n // send result to soundFile\n recorder.stop();\n\n text('Done! Tap to play and download', width/2, height/2, width - 20);\n state++;\n }\n\n else if (state === 2) {\n soundFile.play(); // play the result!\n save(soundFile, 'mySound.wav');\n state++;\n }\n}\n</div></code>"
- ]
+ {
+ "itemtype": "property",
+ "name": "OPTION",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 914,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Distortion": {
- "name": "p5.Distortion",
- "shortname": "p5.Distortion",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 10816,
- "description": "<p>A Distortion effect created with a Waveshaper Node,\nwith an approach adapted from\n<a href=\"http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion\">Kevin Ennis</a></p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n",
- "extends": "p5.Effect",
- "is_constructor": 1,
- "params": [
- {
- "name": "amount",
- "description": "<p>Unbounded distortion amount.\n Normal values range from 0-1.</p>\n",
- "type": "Number",
- "optional": true,
- "optdefault": "0.25"
- },
- {
- "name": "oversample",
- "description": "<p>'none', '2x', or '4x'.</p>\n",
- "type": "String",
- "optional": true,
- "optdefault": "'none'"
- }
- ]
+ {
+ "itemtype": "property",
+ "name": "RETURN",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 921,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.Gain": {
- "name": "p5.Gain",
- "shortname": "p5.Gain",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 10973,
- "description": "<p>A gain node is usefull to set the relative volume of sound.\nIt's typically used to build mixers.</p>\n",
- "is_constructor": 1,
- "example": [
- "\n<div><code>\n\n// load two soundfile and crossfade beetween them\nlet sound1,sound2;\nlet sound1Gain, sound2Gain, mixGain;\nfunction preload(){\n soundFormats('ogg', 'mp3');\n sound1 = loadSound('assets/Damscray_-_Dancing_Tiger_01');\n sound2 = loadSound('assets/beat');\n}\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(startSound);\n // create a 'mix' gain bus to which we will connect both soundfiles\n mixGain = new p5.Gain();\n mixGain.connect();\n sound1.disconnect(); // diconnect from p5 output\n sound1Gain = new p5.Gain(); // setup a gain node\n sound1Gain.setInput(sound1); // connect the first sound to its input\n sound1Gain.connect(mixGain); // connect its output to the final mix bus\n sound2.disconnect();\n sound2Gain = new p5.Gain();\n sound2Gain.setInput(sound2);\n sound2Gain.connect(mixGain);\n}\nfunction startSound() {\n sound1.loop();\n sound2.loop();\n loop();\n}\nfunction mouseReleased() {\n sound1.stop();\n sound2.stop();\n}\nfunction draw(){\n background(220);\n textAlign(CENTER);\n textSize(11);\n fill(0);\n if (!sound1.isPlaying()) {\n text('tap and drag to play', width/2, height/2);\n return;\n }\n // map the horizontal position of the mouse to values useable for volume * control of sound1\n var sound1Volume = constrain(map(mouseX,width,0,0,1), 0, 1);\n var sound2Volume = 1-sound1Volume;\n sound1Gain.amp(sound1Volume);\n sound2Gain.amp(sound2Volume);\n // map the vertical position of the mouse to values useable for 'output * volume control'\n var outputVolume = constrain(map(mouseY,height,0,0,1), 0, 1);\n mixGain.amp(outputVolume);\n text('output', width/2, height - outputVolume * height * 0.9)\n fill(255, 0, 255);\n textAlign(LEFT);\n text('sound1', 5, height - sound1Volume * height * 0.9);\n textAlign(RIGHT);\n text('sound2', width - 5, height - sound2Volume * height * 0.9);\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "RIGHT_ARROW",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 928,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.AudioVoice": {
- "name": "p5.AudioVoice",
- "shortname": "p5.AudioVoice",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 11149,
- "description": "<p>Base class for monophonic synthesizers. Any extensions of this class\nshould follow the API and implement the methods below in order to\nremain compatible with p5.PolySynth();</p>\n",
- "is_constructor": 1
- },
- "p5.MonoSynth": {
- "name": "p5.MonoSynth",
- "shortname": "p5.MonoSynth",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 11247,
- "description": "<p>A MonoSynth is used as a single voice for sound synthesis.\nThis is a class to be used in conjunction with the PolySynth\nclass. Custom synthetisers should be built inheriting from\nthis class.</p>\n",
- "is_constructor": 1,
- "example": [
- "\n<div><code>\nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n background(220);\n textAlign(CENTER);\n text('tap to play', width/2, height/2);\n\n monoSynth = new p5.MonoSynth();\n}\n\nfunction playSynth() {\n userStartAudio();\n\n let note = random(['Fb4', 'G4']);\n // note velocity (volume, from 0 to 1)\n let velocity = random();\n // time from now (in seconds)\n let time = 0;\n // note duration (in seconds)\n let dur = 1/6;\n\n monoSynth.play(note, velocity, time, dur);\n}\n</code></div>"
- ]
+ {
+ "itemtype": "property",
+ "name": "SHIFT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 935,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.OnsetDetect": {
- "name": "p5.OnsetDetect",
- "shortname": "p5.OnsetDetect",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 11624,
- "description": "<p>Listen for onsets (a sharp increase in volume) within a given\nfrequency range.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "freqLow",
- "description": "<p>Low frequency</p>\n",
- "type": "Number"
- },
- {
- "name": "freqHigh",
- "description": "<p>High frequency</p>\n",
- "type": "Number"
- },
- {
- "name": "threshold",
- "description": "<p>Amplitude threshold between 0 (no energy) and 1 (maximum)</p>\n",
- "type": "Number"
- },
- {
- "name": "callback",
- "description": "<p>Function to call when an onset is detected</p>\n",
- "type": "Function"
- }
- ]
+ {
+ "itemtype": "property",
+ "name": "TAB",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 942,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
- "p5.PolySynth": {
- "name": "p5.PolySynth",
- "shortname": "p5.PolySynth",
- "classitems": [],
- "plugins": [],
- "extensions": [],
- "plugin_for": [],
- "extension_for": [],
- "module": "p5.sound",
- "submodule": "p5.sound",
- "namespace": "",
- "file": "lib/addons/p5.sound.js",
- "line": 11691,
- "description": "<p>An AudioVoice is used as a single voice for sound synthesis.\nThe PolySynth class holds an array of AudioVoice, and deals\nwith voices allocations, with setting notes to be played, and\nparameters to be set.</p>\n",
- "is_constructor": 1,
- "params": [
- {
- "name": "synthVoice",
- "description": "<p>A monophonic synth voice inheriting\n the AudioVoice class. Defaults to p5.MonoSynth</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "maxVoices",
- "description": "<p>Number of voices, defaults to 8;</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet polySynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n background(220);\n text('click to play', 20, 20);\n\n polySynth = new p5.PolySynth();\n}\n\nfunction playSynth() {\n userStartAudio();\n\n // note duration (in seconds)\n let dur = 1.5;\n\n // time from now (in seconds)\n let time = 0;\n\n // velocity (volume, from 0 to 1)\n let vel = 0.1;\n\n // notes can overlap with each other\n polySynth.play('G2', vel, 0, dur);\n polySynth.play('C3', vel, time += 1/3, dur);\n polySynth.play('G3', vel, time += 1/3, dur);\n}\n</code></div>"
- ]
- }
- },
- "elements": {},
- "classitems": [
{
- "file": "src/accessibility/describe.js",
- "line": 18,
- "description": "<p>Creates a screen reader-accessible description of the canvas.</p>\n<p>The first parameter, <code>text</code>, is the description of the canvas.</p>\n<p>The second parameter, <code>display</code>, is optional. It determines how the\ndescription is displayed. If <code>LABEL</code> is passed, as in\n<code>describe('A description.', LABEL)</code>, the description will be visible in\na div element next to the canvas. If <code>FALLBACK</code> is passed, as in\n<code>describe('A description.', FALLBACK)</code>, the description will only be\nvisible to screen readers. This is the default mode.</p>\n<p>Read\n<a href=\"https://p5js.org/tutorials/writing-accessible-canvas-descriptions/\">Writing accessible canvas descriptions</a>\nto learn more about making sketches accessible.</p>\n",
- "itemtype": "method",
- "name": "describe",
- "params": [
- {
- "name": "text",
- "description": "<p>description of the canvas.</p>\n",
- "type": "String"
- },
- {
- "name": "display",
- "description": "<p>either LABEL or FALLBACK.</p>\n",
- "type": "Constant",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n background('pink');\n\n // Draw a heart.\n fill('red');\n noStroke();\n circle(67, 67, 20);\n circle(83, 67, 20);\n triangle(91, 73, 75, 95, 59, 73);\n\n // Add a general description of the canvas.\n describe('A pink square with a red heart in the bottom-right corner.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background('pink');\n\n // Draw a heart.\n fill('red');\n noStroke();\n circle(67, 67, 20);\n circle(83, 67, 20);\n triangle(91, 73, 75, 95, 59, 73);\n\n // Add a general description of the canvas\n // and display it for debugging.\n describe('A pink square with a red heart in the bottom-right corner.', LABEL);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n background(200);\n\n // The expression\n // frameCount % 100\n // causes x to increase from 0\n // to 99, then restart from 0.\n let x = frameCount % 100;\n\n // Draw the circle.\n fill(0, 255, 0);\n circle(x, 50, 40);\n\n // Add a general description of the canvas.\n describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n background(200);\n\n // The expression\n // frameCount % 100\n // causes x to increase from 0\n // to 99, then restart from 0.\n let x = frameCount % 100;\n\n // Draw the circle.\n fill(0, 255, 0);\n circle(x, 50, 40);\n\n // Add a general description of the canvas\n // and display it for debugging.\n describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "itemtype": "property",
+ "name": "UP_ARROW",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 949,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/accessibility/describe.js",
- "line": 162,
- "description": "<p>Creates a screen reader-accessible description of elements in the canvas.</p>\n<p>Elements are shapes or groups of shapes that create meaning together. For\nexample, a few overlapping circles could make an \"eye\" element.</p>\n<p>The first parameter, <code>name</code>, is the name of the element.</p>\n<p>The second parameter, <code>text</code>, is the description of the element.</p>\n<p>The third parameter, <code>display</code>, is optional. It determines how the\ndescription is displayed. If <code>LABEL</code> is passed, as in\n<code>describe('A description.', LABEL)</code>, the description will be visible in\na div element next to the canvas. Using <code>LABEL</code> creates unhelpful\nduplicates for screen readers. Only use <code>LABEL</code> during development. If\n<code>FALLBACK</code> is passed, as in <code>describe('A description.', FALLBACK)</code>, the\ndescription will only be visible to screen readers. This is the default\nmode.</p>\n<p>Read\n<a href=\"https://p5js.org/tutorials/writing-accessible-canvas-descriptions/\">Writing accessible canvas descriptions</a>\nto learn more about making sketches accessible.</p>\n",
- "itemtype": "method",
- "name": "describeElement",
- "params": [
- {
- "name": "name",
- "description": "<p>name of the element.</p>\n",
- "type": "String"
- },
- {
- "name": "text",
- "description": "<p>description of the element.</p>\n",
- "type": "String"
- },
- {
- "name": "display",
- "description": "<p>either LABEL or FALLBACK.</p>\n",
- "type": "Constant",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n background('pink');\n\n // Describe the first element\n // and draw it.\n describeElement('Circle', 'A yellow circle in the top-left corner.');\n noStroke();\n fill('yellow');\n circle(25, 25, 40);\n\n // Describe the second element\n // and draw it.\n describeElement('Heart', 'A red heart in the bottom-right corner.');\n fill('red');\n circle(66.6, 66.6, 20);\n circle(83.2, 66.6, 20);\n triangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n\n // Add a general description of the canvas.\n describe('A red heart and yellow circle over a pink background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background('pink');\n\n // Describe the first element\n // and draw it. Display the\n // description for debugging.\n describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);\n noStroke();\n fill('yellow');\n circle(25, 25, 40);\n\n // Describe the second element\n // and draw it. Display the\n // description for debugging.\n describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);\n fill('red');\n circle(66.6, 66.6, 20);\n circle(83.2, 66.6, 20);\n triangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n\n // Add a general description of the canvas.\n describe('A red heart and yellow circle over a pink background.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "itemtype": "property",
+ "name": "BLEND",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 957,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/accessibility/outputs.js",
- "line": 10,
- "description": "<p>Creates a screen reader-accessible description of shapes on the canvas.</p>\n<p><code>textOutput()</code> adds a general description, list of shapes, and\ntable of shapes to the web page. The general description includes the\ncanvas size, canvas color, and number of shapes. For example,\n<code>Your output is a, 100 by 100 pixels, gray canvas containing the following 2 shapes:</code>.</p>\n<p>A list of shapes follows the general description. The list describes the\ncolor, location, and area of each shape. For example,\n<code>a red circle at middle covering 3% of the canvas</code>. Each shape can be\nselected to get more details.</p>\n<p><code>textOutput()</code> uses its table of shapes as a list. The table describes the\nshape, color, location, coordinates and area. For example,\n<code>red circle location = middle area = 3%</code>. This is different from\n<a href=\"#/p5/gridOutput\">gridOutput()</a>, which uses its table as a grid.</p>\n<p>The <code>display</code> parameter is optional. It determines how the description is\ndisplayed. If <code>LABEL</code> is passed, as in <code>textOutput(LABEL)</code>, the description\nwill be visible in a div element next to the canvas. Using <code>LABEL</code> creates\nunhelpful duplicates for screen readers. Only use <code>LABEL</code> during\ndevelopment. If <code>FALLBACK</code> is passed, as in <code>textOutput(FALLBACK)</code>, the\ndescription will only be visible to screen readers. This is the default\nmode.</p>\n<p>Read\n<a href=\"https://p5js.org/tutorials/writing-accessible-canvas-descriptions/\">Writing accessible canvas descriptions</a>\nto learn more about making sketches accessible.</p>\n",
- "itemtype": "method",
- "name": "textOutput",
- "params": [
- {
- "name": "display",
- "description": "<p>either FALLBACK or LABEL.</p>\n",
- "type": "Constant",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n // Add the text description.\n textOutput();\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Add the text description and\n // display it for debugging.\n textOutput(LABEL);\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n // Add the text description.\n textOutput();\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n // Add the text description and\n // display it for debugging.\n textOutput(LABEL);\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "itemtype": "property",
+ "name": "REMOVE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 963,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/accessibility/outputs.js",
- "line": 144,
- "description": "<p>Creates a screen reader-accessible description of shapes on the canvas.</p>\n<p><code>gridOutput()</code> adds a general description, table of shapes, and list of\nshapes to the web page. The general description includes the canvas size,\ncanvas color, and number of shapes. For example,\n<code>gray canvas, 100 by 100 pixels, contains 2 shapes: 1 circle 1 square</code>.</p>\n<p><code>gridOutput()</code> uses its table of shapes as a grid. Each shape in the grid\nis placed in a cell whose row and column correspond to the shape's location\non the canvas. The grid cells describe the color and type of shape at that\nlocation. For example, <code>red circle</code>. These descriptions can be selected\nindividually to get more details. This is different from\n<a href=\"#/p5/textOutput\">textOutput()</a>, which uses its table as a list.</p>\n<p>A list of shapes follows the table. The list describes the color, type,\nlocation, and area of each shape. For example,\n<code>red circle, location = middle, area = 3 %</code>.</p>\n<p>The <code>display</code> parameter is optional. It determines how the description is\ndisplayed. If <code>LABEL</code> is passed, as in <code>gridOutput(LABEL)</code>, the description\nwill be visible in a div element next to the canvas. Using <code>LABEL</code> creates\nunhelpful duplicates for screen readers. Only use <code>LABEL</code> during\ndevelopment. If <code>FALLBACK</code> is passed, as in <code>gridOutput(FALLBACK)</code>, the\ndescription will only be visible to screen readers. This is the default\nmode.</p>\n<p>Read\n<a href=\"https://p5js.org/tutorials/writing-accessible-canvas-descriptions/\">Writing accessible canvas descriptions</a>\nto learn more about making sketches accessible.</p>\n",
- "itemtype": "method",
- "name": "gridOutput",
- "params": [
- {
- "name": "display",
- "description": "<p>either FALLBACK or LABEL.</p>\n",
- "type": "Constant",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n // Add the grid description.\n gridOutput();\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Add the grid description and\n // display it for debugging.\n gridOutput(LABEL);\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n // Add the grid description.\n gridOutput();\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n // Add the grid description and\n // display it for debugging.\n gridOutput(LABEL);\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "itemtype": "property",
+ "name": "ADD",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 969,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/color_conversion.js",
- "line": 8,
- "description": "<p>Conversions adapted from <a href=\"http://www.easyrgb.com/en/math.php\">http://www.easyrgb.com/en/math.php</a>.</p>\n<p>In these functions, hue is always in the range [0, 1], just like all other\ncomponents are in the range [0, 1]. 'Brightness' and 'value' are used\ninterchangeably.</p>\n",
- "class": "p5",
- "module": "Color",
- "submodule": "Color Conversion"
+ "itemtype": "property",
+ "name": "DARKEST",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 975,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/color_conversion.js",
- "line": 18,
- "description": "<p>Convert an HSBA array to HSLA.</p>\n",
- "class": "p5",
- "module": "Color",
- "submodule": "Color Conversion"
+ "itemtype": "property",
+ "name": "LIGHTEST",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 981,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/color_conversion.js",
- "line": 44,
- "description": "<p>Convert an HSBA array to RGBA.</p>\n",
- "class": "p5",
- "module": "Color",
- "submodule": "Color Conversion"
+ "itemtype": "property",
+ "name": "DIFFERENCE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 987,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/color_conversion.js",
- "line": 99,
- "description": "<p>Convert an HSLA array to HSBA.</p>\n",
- "class": "p5",
- "module": "Color",
- "submodule": "Color Conversion"
+ "itemtype": "property",
+ "name": "SUBTRACT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 993,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/color_conversion.js",
- "line": 122,
- "description": "<p>Convert an HSLA array to RGBA.</p>\n<p>We need to change basis from HSLA to something that can be more easily be\nprojected onto RGBA. We will choose hue and brightness as our first two\ncomponents, and pick a convenient third one ('zest') so that we don't need\nto calculate formal HSBA saturation.</p>\n",
- "class": "p5",
- "module": "Color",
- "submodule": "Color Conversion"
+ "itemtype": "property",
+ "name": "EXCLUSION",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 999,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/color_conversion.js",
- "line": 186,
- "description": "<p>Convert an RGBA array to HSBA.</p>\n",
- "class": "p5",
- "module": "Color",
- "submodule": "Color Conversion"
+ "itemtype": "property",
+ "name": "MULTIPLY",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1005,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/color_conversion.js",
- "line": 225,
- "description": "<p>Convert an RGBA array to HSLA.</p>\n",
- "class": "p5",
- "module": "Color",
- "submodule": "Color Conversion"
+ "itemtype": "property",
+ "name": "SCREEN",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1011,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/creating_reading.js",
- "line": 16,
- "description": "<p>Gets the alpha (transparency) value of a color.</p>\n<p><code>alpha()</code> extracts the alpha value from a\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n",
- "itemtype": "method",
- "name": "alpha",
- "params": [
- {
- "name": "color",
- "description": "<p><a href=\"#/p5.Color\">p5.Color</a> object, array of\n color components, or CSS color string.</p>\n",
- "type": "p5.Color|Number[]|String"
- }
- ],
- "return": {
- "description": "the alpha value.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(0, 126, 255, 102);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'alphaValue' to 102.\n let alphaValue = alpha(c);\n\n // Draw the right rectangle.\n fill(alphaValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [0, 126, 255, 102];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'alphaValue' to 102.\n let alphaValue = alpha(c);\n\n // Draw the left rectangle.\n fill(alphaValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgba(0, 126, 255, 0.4)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'alphaValue' to 102.\n let alphaValue = alpha(c);\n\n // Draw the right rectangle.\n fill(alphaValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "REPLACE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1017,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/creating_reading.js",
- "line": 117,
- "description": "<p>Gets the blue value of a color.</p>\n<p><code>blue()</code> extracts the blue value from a\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>By default, <code>blue()</code> returns a color's blue value in the range 0\nto 255. If the <a href=\"#/colorMode\">colorMode()</a> is set to RGB, it\nreturns the blue value in the given range.</p>\n",
- "itemtype": "method",
- "name": "blue",
- "params": [
- {
- "name": "color",
- "description": "<p><a href=\"#/p5.Color\">p5.Color</a> object, array of\n color components, or CSS color string.</p>\n",
- "type": "p5.Color|Number[]|String"
- }
- ],
- "return": {
- "description": "the blue value.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c = color(175, 100, 220);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 220.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [175, 100, 220];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 220.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgb(175, 100, 220)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 220.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Create a p5.Color object using RGB values.\n let c = color(69, 39, 86);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 86.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "OVERLAY",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1023,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/creating_reading.js",
- "line": 253,
- "description": "<p>Gets the brightness value of a color.</p>\n<p><code>brightness()</code> extracts the HSB brightness value from a\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>By default, <code>brightness()</code> returns a color's HSB brightness in the range 0\nto 100. If the <a href=\"#/colorMode\">colorMode()</a> is set to HSB, it\nreturns the brightness value in the given range.</p>\n",
- "itemtype": "method",
- "name": "brightness",
- "params": [
- {
- "name": "color",
- "description": "<p><a href=\"#/p5.Color\">p5.Color</a> object, array of\n color components, or CSS color string.</p>\n",
- "type": "p5.Color|Number[]|String"
- }
- ],
- "return": {
- "description": "the brightness value.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a p5.Color object.\n let c = color(0, 50, 100);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 100.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a color array.\n let c = [0, 50, 100];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 100.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 100.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color with values in the range 0-255.\n colorMode(HSB, 255);\n\n // Create a p5.Color object.\n let c = color(0, 127, 255);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 255.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "HARD_LIGHT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1029,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/creating_reading.js",
- "line": 398,
- "description": "<p>Creates a <a href=\"#/p5/p5.Color\">p5.Color</a> object.</p>\n<p>By default, the parameters are interpreted as RGB values. Calling\n<code>color(255, 204, 0)</code> will return a bright yellow color. The way these\nparameters are interpreted may be changed with the\n<a href=\"#/p5/colorMode\">colorMode()</a> function.</p>\n<p>The version of <code>color()</code> with one parameter interprets the value one of two\nways. If the parameter is a number, it's interpreted as a grayscale value.\nIf the parameter is a string, it's interpreted as a CSS color string.</p>\n<p>The version of <code>color()</code> with two parameters interprets the first one as a\ngrayscale value. The second parameter sets the alpha (transparency) value.</p>\n<p>The version of <code>color()</code> with three parameters interprets them as RGB, HSB,\nor HSL colors, depending on the current <code>colorMode()</code>.</p>\n<p>The version of <code>color()</code> with four parameters interprets them as RGBA, HSBA,\nor HSLA colors, depending on the current <code>colorMode()</code>. The last parameter\nsets the alpha (transparency) value.</p>\n",
- "itemtype": "method",
- "name": "color",
- "return": {
- "description": "resulting color.",
- "type": "p5.Color"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c = color(255, 204, 0);\n\n // Draw the square.\n fill(c);\n noStroke();\n square(30, 20, 55);\n\n describe('A yellow square on a gray canvas.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c1 = color(255, 204, 0);\n\n // Draw the left circle.\n fill(c1);\n noStroke();\n circle(25, 25, 80);\n\n // Create a p5.Color object using a grayscale value.\n let c2 = color(65);\n\n // Draw the right circle.\n fill(c2);\n circle(75, 75, 80);\n\n describe(\n 'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'\n );\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a named color.\n let c = color('magenta');\n\n // Draw the square.\n fill(c);\n noStroke();\n square(20, 20, 60);\n\n describe('A magenta square on a gray canvas.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a hex color code.\n let c1 = color('#0f0');\n\n // Draw the left rectangle.\n fill(c1);\n noStroke();\n rect(0, 10, 45, 80);\n\n // Create a p5.Color object using a hex color code.\n let c2 = color('#00ff00');\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two bright green rectangles on a gray canvas.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a RGB color string.\n let c1 = color('rgb(0, 0, 255)');\n\n // Draw the top-left square.\n fill(c1);\n square(10, 10, 35);\n\n // Create a p5.Color object using a RGB color string.\n let c2 = color('rgb(0%, 0%, 100%)');\n\n // Draw the top-right square.\n fill(c2);\n square(55, 10, 35);\n\n // Create a p5.Color object using a RGBA color string.\n let c3 = color('rgba(0, 0, 255, 1)');\n\n // Draw the bottom-left square.\n fill(c3);\n square(10, 55, 35);\n\n // Create a p5.Color object using a RGBA color string.\n let c4 = color('rgba(0%, 0%, 100%, 1)');\n\n // Draw the bottom-right square.\n fill(c4);\n square(55, 55, 35);\n\n describe('Four blue squares in the corners of a gray canvas.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a HSL color string.\n let c1 = color('hsl(160, 100%, 50%)');\n\n // Draw the left rectangle.\n noStroke();\n fill(c1);\n rect(0, 10, 45, 80);\n\n // Create a p5.Color object using a HSLA color string.\n let c2 = color('hsla(160, 100%, 50%, 0.5)');\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a HSB color string.\n let c1 = color('hsb(160, 100%, 50%)');\n\n // Draw the left rectangle.\n noStroke();\n fill(c1);\n rect(0, 10, 45, 80);\n\n // Create a p5.Color object using a HSBA color string.\n let c2 = color('hsba(160, 100%, 50%, 0.5)');\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c1 = color(50, 55, 100);\n\n // Draw the left rectangle.\n fill(c1);\n rect(0, 10, 45, 80);\n\n // Switch the color mode to HSB.\n colorMode(HSB, 100);\n\n // Create a p5.Color object using HSB values.\n let c2 = color(50, 55, 100);\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading",
- "overloads": [
- {
- "line": 398,
- "params": [
- {
- "name": "gray",
- "description": "<p>number specifying value between white and black.</p>\n",
- "type": "Number"
- },
- {
- "name": "alpha",
- "description": "<p>alpha value relative to current color range\n (default is 0-255).</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "return": {
- "description": "resulting color.",
- "type": "p5.Color"
- }
- },
- {
- "line": 652,
- "params": [
- {
- "name": "v1",
- "description": "<p>red or hue value relative to\n the current color range.</p>\n",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "<p>green or saturation value\n relative to the current color range.</p>\n",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "<p>blue or brightness value\n relative to the current color range.</p>\n",
- "type": "Number"
- },
- {
- "name": "alpha",
- "description": "",
- "type": "Number",
- "optional": true
- }
- ],
- "return": {
- "description": "",
- "type": "p5.Color"
- }
- },
- {
- "line": 664,
- "params": [
- {
- "name": "value",
- "description": "<p>a color string.</p>\n",
- "type": "String"
- }
- ],
- "return": {
- "description": "",
- "type": "p5.Color"
- }
- },
- {
- "line": 670,
- "params": [
- {
- "name": "values",
- "description": "<p>an array containing the red, green, blue,\n and alpha components of the color.</p>\n",
- "type": "Number[]"
- }
- ],
- "return": {
- "description": "",
- "type": "p5.Color"
- }
- },
- {
- "line": 677,
- "params": [
- {
- "name": "color",
- "description": "",
- "type": "p5.Color"
- }
- ],
- "return": {
- "description": "",
- "type": "p5.Color"
- }
- }
- ]
+ "itemtype": "property",
+ "name": "SOFT_LIGHT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1035,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/creating_reading.js",
- "line": 692,
- "description": "<p>Gets the green value of a color.</p>\n<p><code>green()</code> extracts the green value from a\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>By default, <code>green()</code> returns a color's green value in the range 0\nto 255. If the <a href=\"#/colorMode\">colorMode()</a> is set to RGB, it\nreturns the green value in the given range.</p>\n",
- "itemtype": "method",
- "name": "green",
- "params": [
- {
- "name": "color",
- "description": "<p><a href=\"#/p5.Color\">p5.Color</a> object, array of\n color components, or CSS color string.</p>\n",
- "type": "p5.Color|Number[]|String"
- }
- ],
- "return": {
- "description": "the green value.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(175, 100, 220);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 100.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [175, 100, 220];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 100.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgb(175, 100, 220)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 100.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Create a p5.Color object using RGB values.\n let c = color(69, 39, 86);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 39.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "DODGE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1041,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/creating_reading.js",
- "line": 828,
- "description": "<p>Gets the hue value of a color.</p>\n<p><code>hue()</code> extracts the hue value from a\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>Hue describes a color's position on the color wheel. By default, <code>hue()</code>\nreturns a color's HSL hue in the range 0 to 360. If the\n<a href=\"#/colorMode\">colorMode()</a> is set to HSB or HSL, it returns the hue\nvalue in the given mode.</p>\n",
- "itemtype": "method",
- "name": "hue",
- "params": [
- {
- "name": "color",
- "description": "<p><a href=\"#/p5.Color\">p5.Color</a> object, array of\n color components, or CSS color string.</p>\n",
- "type": "p5.Color|Number[]|String"
- }
- ],
- "return": {
- "description": "the hue value.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a p5.Color object.\n let c = color(0, 50, 100);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Set 'hueValue' to 0.\n let hueValue = hue(c);\n\n // Draw the right rectangle.\n fill(hueValue);\n rect(50, 20, 35, 60);\n\n describe(\n 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'\n );\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a color array.\n let c = [0, 50, 100];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Set 'hueValue' to 0.\n let hueValue = hue(c);\n\n // Draw the right rectangle.\n fill(hueValue);\n rect(50, 20, 35, 60);\n\n describe(\n 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'\n );\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Set 'hueValue' to 0.\n let hueValue = hue(c);\n\n // Draw the right rectangle.\n fill(hueValue);\n rect(50, 20, 35, 60);\n\n describe(\n 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'\n );\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "BURN",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1047,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/creating_reading.js",
- "line": 949,
- "description": "<p>Blends two colors to find a third color between them.</p>\n<p>The <code>amt</code> parameter specifies the amount to interpolate between the two\nvalues. 0 is equal to the first color, 0.1 is very near the first color,\n0.5 is halfway between the two colors, and so on. Negative numbers are set\nto 0. Numbers greater than 1 are set to 1. This differs from the behavior of\n<a href=\"#/p5/lerp\">lerp</a>. It's necessary because numbers outside of the\ninterval [0, 1] will produce strange and unexpected colors.</p>\n<p>The way that colors are interpolated depends on the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "itemtype": "method",
- "name": "lerpColor",
- "params": [
- {
- "name": "c1",
- "description": "<p>interpolate from this color (any value created by the color() function).</p>\n",
- "type": "p5.Color"
- },
- {
- "name": "c2",
- "description": "<p>interpolate to this color (any value created by the color() function).</p>\n",
- "type": "p5.Color"
- },
- {
- "name": "amt",
- "description": "<p>number between 0 and 1.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "interpolated color.",
- "type": "p5.Color"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Color objects to interpolate between.\n let from = color(218, 165, 32);\n let to = color(72, 61, 139);\n\n // Create intermediate colors.\n let interA = lerpColor(from, to, 0.33);\n let interB = lerpColor(from, to, 0.66);\n\n // Draw the left rectangle.\n noStroke();\n fill(from);\n rect(10, 20, 20, 60);\n\n // Draw the left-center rectangle.\n fill(interA);\n rect(30, 20, 20, 60);\n\n // Draw the right-center rectangle.\n fill(interB);\n rect(50, 20, 20, 60);\n\n // Draw the right rectangle.\n fill(to);\n rect(70, 20, 20, 60);\n\n describe(\n 'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'\n );\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "THRESHOLD",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1055,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/creating_reading.js",
- "line": 1079,
- "description": "<p>Blends multiple colors to find a color between them.</p>\n<p>The <code>amt</code> parameter specifies the amount to interpolate between the color\nstops which are colors at each <code>amt</code> value \"location\" with <code>amt</code> values\nthat are between 2 color stops interpolating between them based on its relative\ndistance to both.</p>\n<p>The way that colors are interpolated depends on the current\n<a href=\"#/colorMode\">colorMode()</a>.</p>\n",
- "itemtype": "method",
- "name": "paletteLerp",
- "params": [
- {
- "name": "colors_stops",
- "description": "<p>color stops to interpolate from</p>\n",
- "type": "[p5.Color, Number][]"
- },
- {
- "name": "amt",
- "description": "<p>number to use to interpolate relative to color stops</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "interpolated color.",
- "type": "p5.Color"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(400, 400);\n}\n\nfunction draw() {\n // The background goes from white to red to green to blue fill\n background(paletteLerp([\n ['white', 0],\n ['red', 0.05],\n ['green', 0.25],\n ['blue', 1]\n ], millis() / 10000 % 1));\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "GRAY",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1061,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/creating_reading.js",
- "line": 1134,
- "description": "<p>Gets the lightness value of a color.</p>\n<p><code>lightness()</code> extracts the HSL lightness value from a\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>By default, <code>lightness()</code> returns a color's HSL lightness in the range 0\nto 100. If the <a href=\"#/colorMode\">colorMode()</a> is set to HSL, it\nreturns the lightness value in the given range.</p>\n",
- "itemtype": "method",
- "name": "lightness",
- "params": [
- {
- "name": "color",
- "description": "<p><a href=\"#/p5.Color\">p5.Color</a> object, array of\n color components, or CSS color string.</p>\n",
- "type": "p5.Color|Number[]|String"
- }
- ],
- "return": {
- "description": "the lightness value.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a p5.Color object using HSL values.\n let c = color(0, 100, 75);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 75.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a color array.\n let c = [0, 100, 75];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 75.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 75.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color with values in the range 0-255.\n colorMode(HSL, 255);\n\n // Create a p5.Color object using HSL values.\n let c = color(0, 255, 191.5);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 191.5.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "OPAQUE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1067,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/creating_reading.js",
- "line": 1279,
- "description": "<p>Gets the red value of a color.</p>\n<p><code>red()</code> extracts the red value from a\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>By default, <code>red()</code> returns a color's red value in the range 0\nto 255. If the <a href=\"#/colorMode\">colorMode()</a> is set to RGB, it\nreturns the red value in the given range.</p>\n",
- "itemtype": "method",
- "name": "red",
- "params": [
- {
- "name": "color",
- "description": "<p><a href=\"#/p5.Color\">p5.Color</a> object, array of\n color components, or CSS color string.</p>\n",
- "type": "p5.Color|Number[]|String"
- }
- ],
- "return": {
- "description": "the red value.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(175, 100, 220);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 175.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [175, 100, 220];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 175.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgb(175, 100, 220)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 175.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Create a p5.Color object.\n let c = color(69, 39, 86);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 69.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "INVERT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1073,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/creating_reading.js",
- "line": 1415,
- "description": "<p>Gets the saturation value of a color.</p>\n<p><code>saturation()</code> extracts the saturation value from a\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>Saturation is scaled differently in HSB and HSL. By default, <code>saturation()</code>\nreturns a color's HSL saturation in the range 0 to 100. If the\n<a href=\"#/colorMode\">colorMode()</a> is set to HSB or HSL, it returns the\nsaturation value in the given mode.</p>\n",
- "itemtype": "method",
- "name": "saturation",
- "params": [
- {
- "name": "color",
- "description": "<p><a href=\"#/p5.Color\">p5.Color</a> object, array of\n color components, or CSS color string.</p>\n",
- "type": "p5.Color|Number[]|String"
- }
- ],
- "return": {
- "description": "the saturation value",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a p5.Color object.\n let c = color(0, 50, 100);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 50.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is dark gray.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a color array.\n let c = [0, 50, 100];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 100.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 100.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a p5.Color object.\n let c = color(0, 100, 75);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 100.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color with values in the range 0-255.\n colorMode(HSL, 255);\n\n // Create a p5.Color object.\n let c = color(0, 255, 191.5);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 255.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "POSTERIZE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1079,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/p5.Color.js",
- "line": 14,
- "description": "<p>CSS named colors.</p>\n",
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "DILATE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1085,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/p5.Color.js",
- "line": 168,
- "description": "<p>These regular expressions are used to build up the patterns for matching\nviable CSS color strings: fragmenting the regexes in this way increases the\nlegibility and comprehensibility of the code.</p>\n<p>Note that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.</p>\n",
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "ERODE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1091,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/p5.Color.js",
- "line": 181,
- "description": "<p>Full color string patterns. The capture groups are necessary.</p>\n",
- "class": "p5",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "BLUR",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1097,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/p5.Color.js",
- "line": 362,
- "description": "<p>Returns the color formatted as a <code>String</code>.</p>\n<p>Calling <code>myColor.toString()</code> can be useful for debugging, as in\n<code>print(myColor.toString())</code>. It's also helpful for using p5.js with other\nlibraries.</p>\n<p>The parameter, <code>format</code>, is optional. If a format string is passed, as in\n<code>myColor.toString('#rrggbb')</code>, it will determine how the color string is\nformatted. By default, color strings are formatted as <code>'rgba(r, g, b, a)'</code>.</p>\n",
- "itemtype": "method",
- "name": "toString",
- "params": [
- {
- "name": "format",
- "description": "<p>how the color string will be formatted.\nLeaving this empty formats the string as rgba(r, g, b, a).\n'#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.\n'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.\n'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.\n'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.</p>\n",
- "type": "String",
- "optional": true
- }
- ],
- "return": {
- "description": "the formatted string.",
- "type": "String"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let myColor = color('darkorchid');\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the text.\n text(myColor.toString('#rrggbb'), 50, 50);\n\n describe('The text \"#9932cc\" written in purple on a gray background.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Color",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "NORMAL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1105,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/p5.Color.js",
- "line": 572,
- "description": "<p>Sets the red component of a color.</p>\n<p>The range depends on the <a href=\"#/p5/colorMode\">colorMode()</a>. In the\ndefault RGB mode it's between 0 and 255.</p>\n",
- "itemtype": "method",
- "name": "setRed",
- "params": [
- {
- "name": "red",
- "description": "<p>the new red value.</p>\n",
- "type": "Number"
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the red value.\n c.setRed(64);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is teal.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Color",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "ITALIC",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1111,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/p5.Color.js",
- "line": 614,
- "description": "<p>Sets the green component of a color.</p>\n<p>The range depends on the <a href=\"#/p5/colorMode\">colorMode()</a>. In the\ndefault RGB mode it's between 0 and 255.</p>\n",
- "itemtype": "method",
- "name": "setGreen",
- "params": [
- {
- "name": "green",
- "description": "<p>the new green value.</p>\n",
- "type": "Number"
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the green value.\n c.setGreen(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is yellow.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Color",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "BOLD",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1117,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/p5.Color.js",
- "line": 656,
- "description": "<p>Sets the blue component of a color.</p>\n<p>The range depends on the <a href=\"#/p5/colorMode\">colorMode()</a>. In the\ndefault RGB mode it's between 0 and 255.</p>\n",
- "itemtype": "method",
- "name": "setBlue",
- "params": [
- {
- "name": "blue",
- "description": "<p>the new blue value.</p>\n",
- "type": "Number"
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the blue value.\n c.setBlue(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is pale fuchsia.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Color",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "BOLDITALIC",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1123,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/p5.Color.js",
- "line": 698,
- "description": "<p>Sets the alpha (transparency) value of a color.</p>\n<p>The range depends on the\n<a href=\"#/p5/colorMode\">colorMode()</a>. In the default RGB mode it's\nbetween 0 and 255.</p>\n",
- "itemtype": "method",
- "name": "setAlpha",
- "params": [
- {
- "name": "alpha",
- "description": "<p>the new alpha value.</p>\n",
- "type": "Number"
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the alpha value.\n c.setAlpha(128);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Color",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "CHAR",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1129,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/p5.Color.js",
- "line": 789,
- "description": "<p>Hue is the same in HSB and HSL, but the maximum value may be different.\nThis function will return the HSB-normalized saturation when supplied with\nan HSB color object, but will default to the HSL-normalized saturation\notherwise.</p>\n",
- "class": "p5.Color",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "WORD",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1135,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/p5.Color.js",
- "line": 820,
- "description": "<p>Saturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object, but will default\nto the HSL saturation otherwise.</p>\n",
- "class": "p5.Color",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "LINEAR",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1148,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/p5.Color.js",
- "line": 1048,
- "description": "<p>For HSB and HSL, interpret the gray level as a brightness/lightness\nvalue (they are equivalent when chroma is zero). For RGB, normalize the\ngray level according to the blue maximum.</p>\n",
- "class": "p5.Color",
- "module": "Color",
- "submodule": "Creating & Reading"
+ "itemtype": "property",
+ "name": "QUADRATIC",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1154,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
},
{
- "file": "src/color/setting.js",
- "line": 13,
- "description": "<p>Starts defining a shape that will mask any shapes drawn afterward.</p>\n<p>Any shapes drawn between <code>beginClip()</code> and\n<a href=\"#/p5/endClip\">endClip()</a> will add to the mask shape. The mask\nwill apply to anything drawn after <a href=\"#/p5/endClip\">endClip()</a>.</p>\n<p>The parameter, <code>options</code>, is optional. If an object with an <code>invert</code>\nproperty is passed, as in <code>beginClip({ invert: true })</code>, it will be used to\nset the masking mode. <code>{ invert: true }</code> inverts the mask, creating holes\nin shapes that are masked. <code>invert</code> is <code>false</code> by default.</p>\n<p>Masks can be contained between the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.\nDoing so allows unmasked shapes to be drawn after masked shapes.</p>\n<p>Masks can also be defined in a callback function that's passed to\n<a href=\"#/p5/clip\">clip()</a>.</p>\n",
- "itemtype": "method",
- "name": "beginClip",
- "params": [
- {
- "name": "options",
- "description": "<p>an object containing clip settings.</p>\n",
- "type": "Object",
- "optional": true
- }
- ],
+ "itemtype": "property",
+ "name": "BEZIER",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1160,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "CURVE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1166,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "STROKE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1174,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "FILL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1180,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "TEXTURE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1186,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "IMMEDIATE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1192,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "IMAGE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1201,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "NEAREST",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1210,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "REPEAT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1216,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "CLAMP",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1222,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "MIRROR",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1228,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "FLAT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1236,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "SMOOTH",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1242,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "LANDSCAPE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1250,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "PORTRAIT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1256,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "GRID",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1267,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "AXES",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1274,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "LABEL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1281,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "FALLBACK",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1287,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "CONTAIN",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1294,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "COVER",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1301,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "UNSIGNED_BYTE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1308,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "UNSIGNED_INT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1315,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "FLOAT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1322,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "HALF_FLOAT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1329,
+ "description": "",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "INCLUDE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1338,
+ "description": "The <code>splineProperty('ends')</code> mode where splines curve through\ntheir first and last points.",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "EXCLUDE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1347,
+ "description": "The <code>splineProperty('ends')</code> mode where the first and last points in a spline\naffect the direction of the curve, but are not rendered.",
+ "module": "Constants",
+ "submodule": "Constants",
+ "class": "p5"
+ },
+ {
+ "itemtype": "property",
+ "name": "disableFriendlyErrors",
+ "file": "src/scripts/parsers/in/p5.js/src/core/main.js",
+ "line": 671,
+ "type": "Boolean",
+ "module": "Structure",
+ "submodule": "Structure",
+ "class": "p5",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a mask.\n beginClip();\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white triangle and circle on a gray background.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an inverted mask.\n beginClip({ invert: true });\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n noStroke();\n\n // Draw a masked shape.\n push();\n // Create a mask.\n beginClip();\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw an inverted masked shape.\n push();\n // Create an inverted mask.\n beginClip({ invert: true });\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored fuchsia.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n beginClip();\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n endClip();\n\n // Draw a backing shape.\n noStroke();\n fill('fuchsia');\n plane(100);\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n beginClip();\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n endClip();\n\n // Draw a backing shape.\n noStroke();\n beginShape(QUAD_STRIP);\n fill(0, 255, 255);\n vertex(-width / 2, -height / 2);\n vertex(width / 2, -height / 2);\n fill(100, 0, 100);\n vertex(-width / 2, height / 2);\n vertex(width / 2, height / 2);\n endShape();\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Disable the FES.\np5.disableFriendlyErrors = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // The circle() function requires three arguments. The\n // next line would normally display a friendly error that\n // points this out. Instead, nothing happens and it fails\n // silently.\n circle(50, 50);\n\n describe('A gray square.');\n}\n</code>\n</div>"
],
+ "description": "<p>Turns off the parts of the Friendly Error System (FES) that impact performance.</p>\n<p>The <a href=\"https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md\" target=\"_blank\">FES</a>\ncan cause sketches to draw slowly because it does extra work behind the\nscenes. For example, the FES checks the arguments passed to functions,\nwhich takes time to process. Disabling the FES can significantly improve\nperformance by turning off these checks.</p>\n"
+ },
+ {
+ "itemtype": "property",
+ "name": "RGB",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 16,
+ "type": "RGB",
+ "module": "Color",
+ "submodule": "Creating & Reading",
"class": "p5",
+ "example": [],
+ "description": ""
+ },
+ {
+ "itemtype": "property",
+ "name": "RGBHDR",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 22,
+ "type": "RGBHDR",
"module": "Color",
- "submodule": "Setting"
+ "submodule": "Creating & Reading",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/color/setting.js",
- "line": 190,
- "description": "<p>Ends defining a mask that was started with\n<a href=\"#/p5/beginClip\">beginClip()</a>.</p>\n",
- "itemtype": "method",
- "name": "endClip",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a mask.\n beginClip();\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white triangle and circle on a gray background.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "HSB",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 32,
+ "type": "HSB",
+ "module": "Color",
+ "submodule": "Creating & Reading",
"class": "p5",
+ "example": [],
+ "description": "HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\n<a href=\"https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html\">HSB</a>."
+ },
+ {
+ "itemtype": "property",
+ "name": "HSL",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 38,
+ "type": "HSL",
"module": "Color",
- "submodule": "Setting"
+ "submodule": "Creating & Reading",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/color/setting.js",
- "line": 222,
- "description": "<p>Defines a shape that will mask any shapes drawn afterward.</p>\n<p>The first parameter, <code>callback</code>, is a function that defines the mask.\nAny shapes drawn in <code>callback</code> will add to the mask shape. The mask\nwill apply to anything drawn after <code>clip()</code> is called.</p>\n<p>The second parameter, <code>options</code>, is optional. If an object with an <code>invert</code>\nproperty is passed, as in <code>beginClip({ invert: true })</code>, it will be used to\nset the masking mode. <code>{ invert: true }</code> inverts the mask, creating holes\nin shapes that are masked. <code>invert</code> is <code>false</code> by default.</p>\n<p>Masks can be contained between the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.\nDoing so allows unmasked shapes to be drawn after masked shapes.</p>\n<p>Masks can also be defined with <a href=\"#/p5/beginClip\">beginClip()</a>\nand <a href=\"#/p5/endClip\">endClip()</a>.</p>\n",
- "itemtype": "method",
- "name": "clip",
- "params": [
- {
- "name": "callback",
- "description": "<p>a function that draws the mask shape.</p>\n",
- "type": "Function"
- },
- {
- "name": "options",
- "description": "<p>an object containing clip settings.</p>\n",
- "type": "Object",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white triangle and circle on a gray background.');\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an inverted mask.\n clip(mask, { invert: true });\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n noStroke();\n\n // Draw a masked shape.\n push();\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw an inverted masked shape.\n push();\n // Create an inverted mask.\n clip(mask, { invert: true });\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored fuchsia.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n noStroke();\n fill('fuchsia');\n plane(100);\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n noStroke();\n beginShape(QUAD_STRIP);\n fill(0, 255, 255);\n vertex(-width / 2, -height / 2);\n vertex(width / 2, -height / 2);\n fill(100, 0, 100);\n vertex(-width / 2, height / 2);\n vertex(width / 2, height / 2);\n endShape();\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "HWB",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 44,
+ "type": "HWB",
+ "module": "Color",
+ "submodule": "Creating & Reading",
"class": "p5",
+ "example": [],
+ "description": ""
+ },
+ {
+ "itemtype": "property",
+ "name": "LAB",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 50,
+ "type": "LAB",
"module": "Color",
- "submodule": "Setting"
+ "submodule": "Creating & Reading",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/color/setting.js",
- "line": 414,
- "description": "<p>Sets the color used for the background of the canvas.</p>\n<p>By default, the background is transparent. <code>background()</code> is typically used\nwithin <a href=\"#/p5/draw\">draw()</a> to clear the display window at the\nbeginning of each frame. It can also be used inside\n<a href=\"#/p5/setup\">setup()</a> to set the background on the first frame\nof animation.</p>\n<p>The version of <code>background()</code> with one parameter interprets the value one\nof four ways. If the parameter is a <code>Number</code>, it's interpreted as a grayscale\nvalue. If the parameter is a <code>String</code>, it's interpreted as a CSS color string.\nRGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the\nparameter is a <a href=\"#/p5.Color\">p5.Color</a> object, it will be used as\nthe background color. If the parameter is a\n<a href=\"#/p5.Image\">p5.Image</a> object, it will be used as the background\nimage.</p>\n<p>The version of <code>background()</code> with two parameters interprets the first one\nas a grayscale value. The second parameter sets the alpha (transparency)\nvalue.</p>\n<p>The version of <code>background()</code> with three parameters interprets them as RGB,\nHSB, or HSL colors, depending on the current\n<a href=\"#/p5/colorMode\">colorMode()</a>. By default, colors are specified\nin RGB values. Calling <code>background(255, 204, 0)</code> sets the background a bright\nyellow color.</p>\n",
- "itemtype": "method",
- "name": "background",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // A grayscale value.\n background(51);\n\n describe('A canvas with a dark charcoal gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // A grayscale value and an alpha value.\n background(51, 0.4);\n describe('A canvas with a transparent gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // R, G & B values.\n background(255, 204, 0);\n\n describe('A canvas with a yellow background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use HSB color.\n colorMode(HSB);\n\n // H, S & B values.\n background(255, 204, 100);\n\n describe('A canvas with a royal blue background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // A CSS named color.\n background('red');\n\n describe('A canvas with a red background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Three-digit hex RGB notation.\n background('#fae');\n\n describe('A canvas with a pink background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Six-digit hex RGB notation.\n background('#222222');\n\n describe('A canvas with a black background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Integer RGB notation.\n background('rgb(0, 255, 0)');\n\n describe('A canvas with a bright green background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Integer RGBA notation.\n background('rgba(0, 255, 0, 0.25)');\n\n describe('A canvas with a transparent green background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Percentage RGB notation.\n background('rgb(100%, 0%, 10%)');\n\n describe('A canvas with a red background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Percentage RGBA notation.\n background('rgba(100%, 0%, 100%, 0.5)');\n\n describe('A canvas with a transparent purple background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // A p5.Color object.\n let c = color(0, 0, 255);\n background(c);\n\n describe('A canvas with a blue background.');\n}\n</code>\n</div>\n"
- ],
+ "itemtype": "property",
+ "name": "LCH",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 56,
+ "type": "LCH",
+ "module": "Color",
+ "submodule": "Creating & Reading",
"class": "p5",
+ "example": [],
+ "description": ""
+ },
+ {
+ "itemtype": "property",
+ "name": "OKLAB",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 62,
+ "type": "OKLAB",
"module": "Color",
- "submodule": "Setting",
- "overloads": [
- {
- "line": 414,
- "params": [
- {
- "name": "color",
- "description": "<p>any value created by the <a href=\"#/p5/color\">color()</a> function</p>\n",
- "type": "p5.Color"
- }
- ],
- "chainable": 1
- },
- {
- "line": 608,
- "params": [
- {
- "name": "colorstring",
- "description": "<p>color string, possible formats include: integer\n rgb() or rgba(), percentage rgb() or rgba(),\n 3-digit hex, 6-digit hex.</p>\n",
- "type": "String"
- },
- {
- "name": "a",
- "description": "<p>opacity of the background relative to current\n color range (default is 0-255).</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 618,
- "params": [
- {
- "name": "gray",
- "description": "<p>specifies a value between white and black.</p>\n",
- "type": "Number"
- },
- {
- "name": "a",
- "description": "",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 625,
- "params": [
- {
- "name": "v1",
- "description": "<p>red value if color mode is RGB, or hue value if color mode is HSB.</p>\n",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "<p>green value if color mode is RGB, or saturation value if color mode is HSB.</p>\n",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "<p>blue value if color mode is RGB, or brightness value if color mode is HSB.</p>\n",
- "type": "Number"
- },
- {
- "name": "a",
- "description": "",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 634,
- "params": [
- {
- "name": "values",
- "description": "<p>an array containing the red, green, blue\n and alpha components of the color.</p>\n",
- "type": "Number[]"
- }
- ],
- "chainable": 1
- },
- {
- "line": 641,
- "params": [
- {
- "name": "image",
- "description": "<p>image created with <a href=\"#/p5/loadImage\">loadImage()</a>\n or <a href=\"#/p5/createImage\">createImage()</a>,\n to set as background.\n (must be same size as the sketch window).</p>\n",
- "type": "p5.Image"
- },
- {
- "name": "a",
- "description": "",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- }
- ]
+ "submodule": "Creating & Reading",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/color/setting.js",
- "line": 655,
- "description": "<p>Clears the pixels on the canvas.</p>\n<p><code>clear()</code> makes every pixel 100% transparent. Calling <code>clear()</code> doesn't\nclear objects created by <code>createX()</code> functions such as\n<a href=\"#/p5/createGraphics\">createGraphics()</a>,\n<a href=\"#/p5/createVideo\">createVideo()</a>, and\n<a href=\"#/p5/createImg\">createImg()</a>. These objects will remain\nunchanged after calling <code>clear()</code> and can be redrawn.</p>\n<p>In WebGL mode, this function can clear the screen to a specific color. It\ninterprets four numeric parameters as normalized RGBA color values. It also\nclears the depth buffer. If you are not using the WebGL renderer, these\nparameters will have no effect.</p>\n",
- "itemtype": "method",
- "name": "clear",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A gray square. White circles are drawn as the user moves the mouse. The circles disappear when the user presses the mouse.');\n}\n\nfunction draw() {\n circle(mouseX, mouseY, 20);\n}\n\nfunction mousePressed() {\n clear();\n background(200);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n\n pg = createGraphics(60, 60);\n pg.background(200);\n pg.noStroke();\n pg.circle(pg.width / 2, pg.height / 2, 15);\n image(pg, 20, 20);\n\n describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.');\n}\n\nfunction mousePressed() {\n clear();\n image(pg, 20, 20);\n}\n</code>\n</div>"
- ],
- "params": [
- {
- "name": "r",
- "description": "<p>normalized red value.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "g",
- "description": "<p>normalized green value.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "b",
- "description": "<p>normalized blue value.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "a",
- "description": "<p>normalized alpha value.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
+ "itemtype": "property",
+ "name": "OKLCH",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 68,
+ "type": "OKLCH",
+ "module": "Color",
+ "submodule": "Creating & Reading",
"class": "p5",
+ "example": [],
+ "description": ""
+ },
+ {
+ "itemtype": "property",
+ "name": "RGBA",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 74,
+ "type": "RGBA",
"module": "Color",
- "submodule": "Setting"
+ "submodule": "Creating & Reading",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/color/setting.js",
- "line": 733,
- "description": "<p>Changes the way color values are interpreted.</p>\n<p>By default, the <code>Number</code> parameters for <a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/background\">background()</a>, and\n<a href=\"#/p5/color\">color()</a> are defined by values between 0 and 255\nusing the RGB color model. This is equivalent to calling\n<code>colorMode(RGB, 255)</code>. Pure red is <code>color(255, 0, 0)</code> in this model.</p>\n<p>Calling <code>colorMode(RGB, 100)</code> sets colors to use RGB color values\nbetween 0 and 100. Pure red is <code>color(100, 0, 0)</code> in this model.</p>\n<p>Calling <code>colorMode(HSB)</code> or <code>colorMode(HSL)</code> changes to HSB or HSL system\ninstead of RGB. Pure red is <code>color(0, 100, 100)</code> in HSB and\n<code>color(0, 100, 50)</code> in HSL.</p>\n<p><a href=\"#/p5.Color\">p5.Color</a> objects remember the mode that they were\ncreated in. Changing modes doesn't affect their appearance.</p>\n",
- "itemtype": "method",
- "name": "colorMode",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Fill with pure red.\n fill(255, 0, 0);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Fill with pure red.\n fill(100, 0, 0);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Fill with pure red.\n fill(0, 100, 100);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Fill with pure red.\n fill(0, 100, 50);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n for (let x = 0; x < 100; x += 1) {\n for (let y = 0; y < 100; y += 1) {\n stroke(x, y, 0);\n point(x, y);\n }\n }\n\n describe(\n 'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use HSB color with values in the range 0-100.\n colorMode(HSB, 100);\n\n for (let x = 0; x < 100; x += 1) {\n for (let y = 0; y < 100; y += 1) {\n stroke(x, y, 100);\n point(x, y);\n }\n }\n\n describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let myColor = color(180, 175, 230);\n background(myColor);\n\n // Use RGB color with values in the range 0-1.\n colorMode(RGB, 1);\n\n // Get the red, green, and blue color components.\n let redValue = red(myColor);\n let greenValue = green(myColor);\n let blueValue = blue(myColor);\n\n // Round the color components for display.\n redValue = round(redValue, 2);\n greenValue = round(greenValue, 2);\n blueValue = round(blueValue, 2);\n\n // Display the color components.\n text(`Red: ${redValue}`, 10, 10, 80, 80);\n text(`Green: ${greenValue}`, 10, 40, 80, 80);\n text(`Blue: ${blueValue}`, 10, 70, 80, 80);\n\n describe('A purple canvas with the red, green, and blue decimal values of the color written on it.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Use RGB color with alpha values in the range 0-1.\n colorMode(RGB, 255, 255, 255, 1);\n\n noFill();\n strokeWeight(4);\n stroke(255, 0, 10, 0.3);\n circle(40, 40, 50);\n circle(50, 60, 50);\n\n describe('Two overlapping translucent pink circle outlines.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "ARROW",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 65,
+ "type": "ARROW",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color",
- "submodule": "Setting",
- "overloads": [
- {
- "line": 733,
- "params": [
- {
- "name": "mode",
- "description": "<p>either RGB, HSB or HSL, corresponding to\n Red/Green/Blue and Hue/Saturation/Brightness\n (or Lightness).</p>\n",
- "type": "Constant"
- },
- {
- "name": "max",
- "description": "<p>range for all values.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 938,
- "params": [
- {
- "name": "mode",
- "description": "",
- "type": "Constant"
- },
- {
- "name": "max1",
- "description": "<p>range for the red or hue depending on the\n current color mode.</p>\n",
- "type": "Number"
- },
- {
- "name": "max2",
- "description": "<p>range for the green or saturation depending\n on the current color mode.</p>\n",
- "type": "Number"
- },
- {
- "name": "max3",
- "description": "<p>range for the blue or brightness/lightness\n depending on the current color mode.</p>\n",
- "type": "Number"
- },
- {
- "name": "maxA",
- "description": "<p>range for the alpha.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/color/setting.js",
- "line": 982,
- "description": "<p>Sets the color used to fill shapes.</p>\n<p>Calling <code>fill(255, 165, 0)</code> or <code>fill('orange')</code> means all shapes drawn\nafter the fill command will be filled with the color orange.</p>\n<p>The version of <code>fill()</code> with one parameter interprets the value one of\nthree ways. If the parameter is a <code>Number</code>, it's interpreted as a grayscale\nvalue. If the parameter is a <code>String</code>, it's interpreted as a CSS color\nstring. A <a href=\"#/p5.Color\">p5.Color</a> object can also be provided to\nset the fill color.</p>\n<p>The version of <code>fill()</code> with three parameters interprets them as RGB, HSB,\nor HSL colors, depending on the current\n<a href=\"#/p5/colorMode\">colorMode()</a>. The default color space is RGB,\nwith each value in the range from 0 to 255.</p>\n",
- "itemtype": "method",
- "name": "fill",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A grayscale value.\n fill(51);\n square(20, 20, 60);\n\n describe('A dark charcoal gray square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // R, G & B values.\n fill(255, 204, 0);\n square(20, 20, 60);\n\n describe('A yellow square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(100);\n\n // Use HSB color.\n colorMode(HSB);\n\n // H, S & B values.\n fill(255, 204, 100);\n square(20, 20, 60);\n\n describe('A royal blue square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A CSS named color.\n fill('red');\n square(20, 20, 60);\n\n describe('A red square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Three-digit hex RGB notation.\n fill('#fae');\n square(20, 20, 60);\n\n describe('A pink square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Six-digit hex RGB notation.\n fill('#A251FA');\n square(20, 20, 60);\n\n describe('A purple square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGB notation.\n fill('rgb(0, 255, 0)');\n square(20, 20, 60);\n\n describe('A bright green square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGBA notation.\n fill('rgba(0, 255, 0, 0.25)');\n square(20, 20, 60);\n\n describe('A soft green rectange with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGB notation.\n fill('rgb(100%, 0%, 10%)');\n square(20, 20, 60);\n\n describe('A red square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGBA notation.\n fill('rgba(100%, 0%, 100%, 0.5)');\n square(20, 20, 60);\n\n describe('A dark fuchsia square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A p5.Color object.\n let c = color(0, 0, 255);\n fill(c);\n square(20, 20, 60);\n\n describe('A blue square with a black outline.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "CROSS",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 83,
+ "type": "CROSS",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color",
- "submodule": "Setting",
- "overloads": [
- {
- "line": 982,
- "params": [
- {
- "name": "v1",
- "description": "<p>red value if color mode is RGB or hue value if color mode is HSB.</p>\n",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "<p>green value if color mode is RGB or saturation value if color mode is HSB.</p>\n",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "<p>blue value if color mode is RGB or brightness value if color mode is HSB.</p>\n",
- "type": "Number"
- },
- {
- "name": "alpha",
- "description": "<p>alpha value, controls transparency (0 - transparent, 255 - opaque).</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 1187,
- "params": [
- {
- "name": "value",
- "description": "<p>a color string.</p>\n",
- "type": "String"
- }
- ],
- "chainable": 1
- },
- {
- "line": 1193,
- "params": [
- {
- "name": "gray",
- "description": "<p>a grayscale value.</p>\n",
- "type": "Number"
- },
- {
- "name": "alpha",
- "description": "",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 1200,
- "params": [
- {
- "name": "values",
- "description": "<p>an array containing the red, green, blue &\n and alpha components of the color.</p>\n",
- "type": "Number[]"
- }
- ],
- "chainable": 1
- },
- {
- "line": 1207,
- "params": [
- {
- "name": "color",
- "description": "<p>the fill color.</p>\n",
- "type": "p5.Color"
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/color/setting.js",
- "line": 1219,
- "description": "<p>Disables setting the fill color for shapes.</p>\n<p>Calling <code>noFill()</code> is the same as making the fill completely transparent,\nas in <code>fill(0, 0)</code>. If both <a href=\"#/p5/noStroke\">noStroke()</a> and\n<code>noFill()</code> are called, nothing will be drawn to the screen.</p>\n",
- "itemtype": "method",
- "name": "noFill",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the top square.\n square(32, 10, 35);\n\n // Draw the bottom square.\n noFill();\n square(32, 55, 35);\n\n describe('A white square on above an empty square. Both squares have black outlines.');\n}\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A purple cube wireframe spinning on a black canvas.');\n}\n\nfunction draw() {\n background(0);\n\n // Style the box.\n noFill();\n stroke(100, 100, 240);\n\n // Rotate the coordinates.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Draw the box.\n box(45);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "HAND",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 89,
+ "type": "HAND",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color",
- "submodule": "Setting"
+ "example": [],
+ "description": ""
},
{
- "file": "src/color/setting.js",
- "line": 1279,
- "description": "<p>Disables drawing points, lines, and the outlines of shapes.</p>\n<p>Calling <code>noStroke()</code> is the same as making the stroke completely transparent,\nas in <code>stroke(0, 0)</code>. If both <code>noStroke()</code> and\n<a href=\"#/p5/noFill\">noFill()</a> are called, nothing will be drawn to the\nscreen.</p>\n",
- "itemtype": "method",
- "name": "noStroke",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n noStroke();\n square(20, 20, 60);\n\n describe('A white square with no outline.');\n}\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A pink cube with no edge outlines spinning on a black canvas.');\n}\n\nfunction draw() {\n background(0);\n\n // Style the box.\n noStroke();\n fill(240, 150, 150);\n\n // Rotate the coordinates.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Draw the box.\n box(45);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "MOVE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 95,
+ "type": "MOVE",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color",
- "submodule": "Setting"
+ "example": [],
+ "description": ""
},
{
- "file": "src/color/setting.js",
- "line": 1335,
- "description": "<p>Sets the color used to draw points, lines, and the outlines of shapes.</p>\n<p>Calling <code>stroke(255, 165, 0)</code> or <code>stroke('orange')</code> means all shapes drawn\nafter calling <code>stroke()</code> will be filled with the color orange. The way\nthese parameters are interpreted may be changed with the\n<a href=\"#/p5/colorMode\">colorMode()</a> function.</p>\n<p>The version of <code>stroke()</code> with one parameter interprets the value one of\nthree ways. If the parameter is a <code>Number</code>, it's interpreted as a grayscale\nvalue. If the parameter is a <code>String</code>, it's interpreted as a CSS color\nstring. A <a href=\"#/p5.Color\">p5.Color</a> object can also be provided to\nset the stroke color.</p>\n<p>The version of <code>stroke()</code> with two parameters interprets the first one as a\ngrayscale value. The second parameter sets the alpha (transparency) value.</p>\n<p>The version of <code>stroke()</code> with three parameters interprets them as RGB, HSB,\nor HSL colors, depending on the current <code>colorMode()</code>.</p>\n<p>The version of <code>stroke()</code> with four parameters interprets them as RGBA, HSBA,\nor HSLA colors, depending on the current <code>colorMode()</code>. The last parameter\nsets the alpha (transparency) value.</p>\n",
- "itemtype": "method",
- "name": "stroke",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A grayscale value.\n strokeWeight(4);\n stroke(51);\n square(20, 20, 60);\n\n describe('A white square with a dark charcoal gray outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // R, G & B values.\n stroke(255, 204, 0);\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a yellow outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // H, S & B values.\n strokeWeight(4);\n stroke(255, 204, 100);\n square(20, 20, 60);\n\n describe('A white square with a royal blue outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A CSS named color.\n stroke('red');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a red outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Three-digit hex RGB notation.\n stroke('#fae');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a pink outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Six-digit hex RGB notation.\n stroke('#222222');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGB notation.\n stroke('rgb(0, 255, 0)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A whiite square with a bright green outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGBA notation.\n stroke('rgba(0, 255, 0, 0.25)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a soft green outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGB notation.\n stroke('rgb(100%, 0%, 10%)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a red outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGBA notation.\n stroke('rgba(100%, 0%, 100%, 0.5)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a dark fuchsia outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A p5.Color object.\n stroke(color(0, 0, 255));\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a blue outline.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "TEXT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 101,
+ "type": "TEXT",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color",
- "submodule": "Setting",
- "overloads": [
- {
- "line": 1335,
- "params": [
- {
- "name": "v1",
- "description": "<p>red value if color mode is RGB or hue value if color mode is HSB.</p>\n",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "<p>green value if color mode is RGB or saturation value if color mode is HSB.</p>\n",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "<p>blue value if color mode is RGB or brightness value if color mode is HSB.</p>\n",
- "type": "Number"
- },
- {
- "name": "alpha",
- "description": "<p>alpha value, controls transparency (0 - transparent, 255 - opaque).</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 1558,
- "params": [
- {
- "name": "value",
- "description": "<p>a color string.</p>\n",
- "type": "String"
- }
- ],
- "chainable": 1
- },
- {
- "line": 1564,
- "params": [
- {
- "name": "gray",
- "description": "<p>a grayscale value.</p>\n",
- "type": "Number"
- },
- {
- "name": "alpha",
- "description": "",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 1571,
- "params": [
- {
- "name": "values",
- "description": "<p>an array containing the red, green, blue,\n and alpha components of the color.</p>\n",
- "type": "Number[]"
- }
- ],
- "chainable": 1
- },
- {
- "line": 1578,
- "params": [
- {
- "name": "color",
- "description": "<p>the stroke color.</p>\n",
- "type": "p5.Color"
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/color/setting.js",
- "line": 1591,
- "description": "<p>Starts using shapes to erase parts of the canvas.</p>\n<p>All drawing that follows <code>erase()</code> will subtract from the canvas, revealing\nthe web page underneath. The erased areas will become transparent, allowing\nthe content behind the canvas to show through. The\n<a href=\"#/p5/fill\">fill()</a>, <a href=\"#/p5/stroke\">stroke()</a>, and\n<a href=\"#/p5/blendMode\">blendMode()</a> have no effect once <code>erase()</code> is\ncalled.</p>\n<p>The <code>erase()</code> function has two optional parameters. The first parameter\nsets the strength of erasing by the shape's interior. A value of 0 means\nthat no erasing will occur. A value of 255 means that the shape's interior\nwill fully erase the content underneath. The default value is 255\n(full strength).</p>\n<p>The second parameter sets the strength of erasing by the shape's edge. A\nvalue of 0 means that no erasing will occur. A value of 255 means that the\nshape's edge will fully erase the content underneath. The default value is\n255 (full strength).</p>\n<p>To cancel the erasing effect, use the <a href=\"#/p5/noErase\">noErase()</a>\nfunction.</p>\n<p><code>erase()</code> has no effect on drawing done with the\n<a href=\"#/p5/image\">image()</a> and\n<a href=\"#/p5/background\">background()</a> functions.</p>\n",
- "itemtype": "method",
- "name": "erase",
- "params": [
- {
- "name": "strengthFill",
- "description": "<p>a number (0-255) for the strength of erasing under a shape's interior.\n Defaults to 255, which is full strength.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "strengthStroke",
- "description": "<p>a number (0-255) for the strength of erasing under a shape's edge.\n Defaults to 255, which is full strength.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(100, 100, 250);\n\n // Draw a pink square.\n fill(250, 100, 100);\n square(20, 20, 60);\n\n // Erase a circular area.\n erase();\n circle(25, 30, 30);\n noErase();\n\n describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a hole.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(100, 100, 250);\n\n // Draw a pink square.\n fill(250, 100, 100);\n square(20, 20, 60);\n\n // Erase a circular area.\n strokeWeight(5);\n erase(150, 255);\n circle(25, 30, 30);\n noErase();\n\n describe('A purple canvas with a pink square in the middle. A circle at the top-left partially erases its interior and a fully erases its outline.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "WAIT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 107,
+ "type": "WAIT",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color",
- "submodule": "Setting"
+ "example": [],
+ "description": ""
},
{
- "file": "src/color/setting.js",
- "line": 1678,
- "description": "<p>Ends erasing that was started with <a href=\"#/p5/erase\">erase()</a>.</p>\n<p>The <a href=\"#/p5/fill\">fill()</a>, <a href=\"#/p5/stroke\">stroke()</a>, and\n<a href=\"#/p5/blendMode\">blendMode()</a> settings will return to what they\nwere prior to calling <a href=\"#/p5/erase\">erase()</a>.</p>\n",
- "itemtype": "method",
- "name": "noErase",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(235, 145, 15);\n\n // Draw the left rectangle.\n noStroke();\n fill(30, 45, 220);\n rect(30, 10, 10, 80);\n\n // Erase a circle.\n erase();\n circle(50, 50, 60);\n noErase();\n\n // Draw the right rectangle.\n rect(70, 10, 10, 80);\n\n 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.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "CORNER",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 665,
+ "type": "CORNER",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color",
- "submodule": "Setting"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/friendly_errors/fes_core.js",
- "line": 1,
- "requires": [
- "core\n\nThis is the main file for the Friendly Error System (FES)",
- "containing\nthe core as well as miscellaneous functionality of the FES. Here is a\nbrief outline of the functions called in this system.\n\nThe FES may be invoked by a call to either\n(1) _validateParameters",
- "(2) _friendlyFileLoadError",
- "(3) _friendlyError",
- "(4) helpForMisusedAtTopLevelCode",
- "or (5) _fesErrorMonitor.\n\n_validateParameters is located in validate_params.js along with other code\nused for parameter validation.\n_friendlyFileLoadError is located in file_errors.js along with other code\nused for dealing with file load errors.\nApart from this",
- "there's also a file stacktrace.js",
- "which contains the code\nto parse the error stack",
- "borrowed from:\nhttps://github.com/stacktracejs/stacktrace.js\n\nFor more detailed information on the FES functions",
- "including the call\nsequence of each function",
- "please look at the FES Reference + Dev Notes:\nhttps://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md"
- ],
+ "itemtype": "property",
+ "name": "CORNERS",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 671,
+ "type": "CORNERS",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/friendly_errors/fes_core.js",
- "line": 932,
- "description": "<p>Prints out all the colors in the color pallete with white text.\nFor color blindness testing.</p>\n",
+ "itemtype": "property",
+ "name": "RADIUS",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 677,
+ "type": "RADIUS",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/friendly_errors/file_errors.js",
- "line": 1,
- "requires": [
- "core"
- ],
+ "itemtype": "property",
+ "name": "RIGHT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 683,
+ "type": "RIGHT",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/friendly_errors/sketch_reader.js",
- "line": 1,
- "requires": [
- "core"
- ],
+ "itemtype": "property",
+ "name": "LEFT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 689,
+ "type": "LEFT",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/friendly_errors/stacktrace.js",
- "line": 1,
- "requires": [
- "core"
- ],
+ "itemtype": "property",
+ "name": "CENTER",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 695,
+ "type": "CENTER",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/friendly_errors/validate_params.js",
- "line": 1,
- "requires": [
- "core"
- ],
+ "itemtype": "property",
+ "name": "TOP",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 701,
+ "type": "TOP",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Color"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/2d_primitives.js",
- "line": 16,
- "description": "<p>This function does 3 things:</p>\n<ol>\n<li><p>Bounds the desired start/stop angles for an arc (in radians) so that:</p>\n<pre><code>0 <= start < TWO_PI ; start <= stop < start + TWO_PI\n</code></pre>\n<p>This means that the arc rendering functions don't have to be concerned\nwith what happens if stop is smaller than start, or if the arc 'goes\nround more than once', etc.: they can just start at start and increase\nuntil stop and the correct arc will be drawn.</p>\n</li>\n<li><p>Optionally adjusts the angles within each quadrant to counter the naive\nscaling of the underlying ellipse up from the unit circle. Without\nthis, the angles become arbitrary when width != height: 45 degrees\nmight be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on\na 'tall' ellipse.</p>\n</li>\n<li><p>Flags up when start and stop correspond to the same place on the\nunderlying ellipse. This is useful if you want to do something special\nthere (like rendering a whole ellipse instead).</p>\n</li>\n</ol>\n",
+ "itemtype": "property",
+ "name": "BOTTOM",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 707,
+ "type": "BOTTOM",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "2D Primitives"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/2d_primitives.js",
- "line": 102,
- "description": "<p>Draws an arc.</p>\n<p>An arc is a section of an ellipse defined by the <code>x</code>, <code>y</code>, <code>w</code>, and\n<code>h</code> parameters. <code>x</code> and <code>y</code> set the location of the arc's center. <code>w</code> and\n<code>h</code> set the arc's width and height. See\n<a href=\"#/p5/ellipse\">ellipse()</a> and\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a> for more details.</p>\n<p>The fifth and sixth parameters, <code>start</code> and <code>stop</code>, set the angles\nbetween which to draw the arc. Arcs are always drawn clockwise from\n<code>start</code> to <code>stop</code>. The fifth and sixth parameters, start and stop, set the\nangles between which to draw the arc. Arcs are always drawn clockwise from\nstart to stop. By default, angles are given in radians, but if angleMode\n(DEGREES) is set, the function interprets the values in degrees.</p>\n<p>The seventh parameter, <code>mode</code>, is optional. It determines the arc's fill\nstyle. The fill modes are a semi-circle (<code>OPEN</code>), a closed semi-circle\n(<code>CHORD</code>), or a closed pie segment (<code>PIE</code>).</p>\n<p>The eighth parameter, <code>detail</code>, is also optional. It determines how many\nvertices are used to draw the arc in WebGL mode. The default value is 25.</p>\n",
- "itemtype": "method",
- "name": "arc",
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate of the arc's ellipse.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the arc's ellipse.</p>\n",
- "type": "Number"
- },
- {
- "name": "w",
- "description": "<p>width of the arc's ellipse by default.</p>\n",
- "type": "Number"
- },
- {
- "name": "h",
- "description": "<p>height of the arc's ellipse by default.</p>\n",
- "type": "Number"
- },
- {
- "name": "start",
- "description": "<p>angle to start the arc, specified in radians.</p>\n",
- "type": "Number"
- },
- {
- "name": "stop",
- "description": "<p>angle to stop the arc, specified in radians.</p>\n",
- "type": "Number"
- },
- {
- "name": "mode",
- "description": "<p>optional parameter to determine the way of drawing\n the arc. either CHORD, PIE, or OPEN.</p>\n",
- "type": "Constant",
- "optional": true
- },
- {
- "name": "detail",
- "description": "<p>optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the arc. Default value is 25. Won't\n draw a stroke for a detail of more than 50.</p>\n",
- "type": "Integer",
- "optional": true
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n arc(50, 50, 80, 80, 0, PI + HALF_PI);\n\n describe('A white circle on a gray canvas. The top-right quarter of the circle is missing.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n arc(50, 50, 80, 40, 0, PI + HALF_PI);\n\n describe('A white ellipse on a gray canvas. The top-right quarter of the ellipse is missing.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Bottom-right.\n arc(50, 55, 50, 50, 0, HALF_PI);\n\n noFill();\n\n // Bottom-left.\n arc(50, 55, 60, 60, HALF_PI, PI);\n\n // Top-left.\n arc(50, 55, 70, 70, PI, PI + QUARTER_PI);\n\n // Top-right.\n arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n\n describe(\n 'A shattered outline of an circle with a quarter of a white circle at the bottom-right.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Default fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n\n describe('A white circle with the top-right third missing. The bottom is outlined in black.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // OPEN fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n\n describe(\n 'A white circle missing a section from the top-right. The bottom is outlined in black.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // CHORD fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n\n describe('A white circle with a black outline missing a section from the top-right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // PIE fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n\n describe('A white circle with a black outline. The top-right third is missing.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // PIE fill mode.\n arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE);\n\n describe('A white circle with a black outline. The top-right third is missing.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // PIE fill mode with 5 vertices.\n arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE, 5);\n\n describe('A white circle with a black outline. The top-right third is missing.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A yellow circle on a black background. The circle opens and closes its mouth.');\n}\n\nfunction draw() {\n background(0);\n\n // Style the arc.\n noStroke();\n fill(255, 255, 0);\n\n // Update start and stop angles.\n let biteSize = PI / 16;\n let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;\n let endAngle = TWO_PI - startAngle;\n\n // Draw the arc.\n arc(50, 50, 80, 80, startAngle, endAngle, PIE);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "BASELINE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 713,
+ "type": "BASELINE",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "2D Primitives"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/2d_primitives.js",
- "line": 372,
- "description": "<p>Draws an ellipse (oval).</p>\n<p>An ellipse is a round shape defined by the <code>x</code>, <code>y</code>, <code>w</code>, and\n<code>h</code> parameters. <code>x</code> and <code>y</code> set the location of its center. <code>w</code> and\n<code>h</code> set its width and height. See\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a> for other ways to set\nits position.</p>\n<p>If no height is set, the value of width is used for both the width and\nheight. If a negative height or width is specified, the absolute value is\ntaken.</p>\n<p>The fifth parameter, <code>detail</code>, is also optional. It determines how many\nvertices are used to draw the ellipse in WebGL mode. The default value is\n25.</p>\n",
- "itemtype": "method",
- "name": "ellipse",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n ellipse(50, 50, 80, 80);\n\n describe('A white circle on a gray canvas.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n ellipse(50, 50, 80);\n\n describe('A white circle on a gray canvas.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n ellipse(50, 50, 80, 40);\n\n describe('A white ellipse on a gray canvas.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n ellipse(0, 0, 80, 40);\n\n describe('A white ellipse on a gray canvas.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Use 6 vertices.\n ellipse(0, 0, 80, 40, 6);\n\n describe('A white hexagon on a gray canvas.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "POINTS",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 719,
+ "type": "POINTS",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "2D Primitives",
- "overloads": [
- {
- "line": 372,
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate of the center of the ellipse.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the center of the ellipse.</p>\n",
- "type": "Number"
- },
- {
- "name": "w",
- "description": "<p>width of the ellipse.</p>\n",
- "type": "Number"
- },
- {
- "name": "h",
- "description": "<p>height of the ellipse.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 473,
- "params": [
- {
- "name": "x",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "",
- "type": "Number"
- },
- {
- "name": "w",
- "description": "",
- "type": "Number"
- },
- {
- "name": "h",
- "description": "",
- "type": "Number"
- },
- {
- "name": "detail",
- "description": "<p>optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the ellipse. Default value is 25. Won't\n draw a stroke for a detail of more than 50.</p>\n",
- "type": "Integer",
- "optional": true
- }
- ]
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/2d_primitives.js",
- "line": 489,
- "description": "<p>Draws a circle.</p>\n<p>A circle is a round shape defined by the <code>x</code>, <code>y</code>, and <code>d</code> parameters.\n<code>x</code> and <code>y</code> set the location of its center. <code>d</code> sets its width and height (diameter).\nEvery point on the circle's edge is the same distance, <code>0.5 * d</code>, from its center.\n<code>0.5 * d</code> (half the diameter) is the circle's radius.\nSee <a href=\"#/p5/ellipseMode\">ellipseMode()</a> for other ways to set its position.</p>\n",
- "itemtype": "method",
- "name": "circle",
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate of the center of the circle.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the center of the circle.</p>\n",
- "type": "Number"
- },
- {
- "name": "d",
- "description": "<p>diameter of the circle.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n circle(50, 50, 25);\n\n describe('A white circle with black outline in the middle of a gray canvas.');\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n circle(0, 0, 25);\n\n describe('A white circle with black outline in the middle of a gray canvas.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "LINES",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 725,
+ "type": "LINES",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "2D Primitives"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/2d_primitives.js",
- "line": 565,
- "description": "<p>Draws a straight line between two points.</p>\n<p>A line's default width is one pixel. The version of <code>line()</code> with four\nparameters draws the line in 2D. To color a line, use the\n<a href=\"#/p5/stroke\">stroke()</a> function. To change its width, use the\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a> function. A line\ncan't be filled, so the <a href=\"#/p5/fill\">fill()</a> function won't\naffect the line's color.</p>\n<p>The version of <code>line()</code> with six parameters allows the line to be drawn in\n3D space. Doing so requires adding the <code>WEBGL</code> argument to\n<a href=\"#/p5/createCanvas\">createCanvas()</a>.</p>\n",
- "itemtype": "method",
- "name": "line",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n line(30, 20, 85, 75);\n\n describe(\n 'A black line on a gray canvas running from top-center to bottom-right.'\n );\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n stroke('magenta');\n strokeWeight(5);\n\n line(30, 20, 85, 75);\n\n describe(\n 'A thick, magenta line on a gray canvas running from top-center to bottom-right.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n line(30, 20, 85, 20);\n\n // Right.\n stroke(126);\n line(85, 20, 85, 75);\n\n // Bottom.\n stroke(255);\n line(85, 75, 30, 75);\n\n describe(\n 'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'\n );\n}\n</code>\n</div>",
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n line(-20, -30, 35, 25);\n\n describe(\n 'A black line on a gray canvas running from top-center to bottom-right.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black line connecting two spheres. The scene spins slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw a line.\n line(0, 0, 0, 30, 20, -10);\n\n // Draw the center sphere.\n sphere(10);\n\n // Translate to the second point.\n translate(30, 20, -10);\n\n // Draw the bottom-right sphere.\n sphere(10);\n}\n</code>\n</div>\n"
- ],
+ "itemtype": "property",
+ "name": "LINE_LOOP",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 737,
+ "type": "LINE_LOOP",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "2D Primitives",
- "overloads": [
- {
- "line": 565,
- "params": [
- {
- "name": "x1",
- "description": "<p>the x-coordinate of the first point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y1",
- "description": "<p>the y-coordinate of the first point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x2",
- "description": "<p>the x-coordinate of the second point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y2",
- "description": "<p>the y-coordinate of the second point.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 697,
- "params": [
- {
- "name": "x1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z1",
- "description": "<p>the z-coordinate of the first point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z2",
- "description": "<p>the z-coordinate of the second point.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/2d_primitives.js",
- "line": 722,
- "description": "<p>Draws a single point in space.</p>\n<p>A point's default width is one pixel. To color a point, use the\n<a href=\"#/p5/stroke\">stroke()</a> function. To change its width, use the\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a> function. A point\ncan't be filled, so the <a href=\"#/p5/fill\">fill()</a> function won't\naffect the point's color.</p>\n<p>The version of <code>point()</code> with two parameters allows the point's location to\nbe set with its x- and y-coordinates, as in <code>point(10, 20)</code>.</p>\n<p>The version of <code>point()</code> with three parameters allows the point to be drawn\nin 3D space with x-, y-, and z-coordinates, as in <code>point(10, 20, 30)</code>.\nDoing so requires adding the <code>WEBGL</code> argument to\n<a href=\"#/p5/createCanvas\">createCanvas()</a>.</p>\n<p>The version of <code>point()</code> with one parameter allows the point's location to\nbe set with a <a href=\"#/p5/p5.Vector\">p5.Vector</a> object.</p>\n",
- "itemtype": "method",
- "name": "point",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n point(30, 20);\n\n // Top-right.\n point(85, 20);\n\n // Bottom-right.\n point(85, 75);\n\n // Bottom-left.\n point(30, 75);\n\n describe(\n 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n point(30, 20);\n\n // Top-right.\n point(70, 20);\n\n // Style the next points.\n stroke('purple');\n strokeWeight(10);\n\n // Bottom-right.\n point(70, 80);\n\n // Bottom-left.\n point(30, 80);\n\n describe(\n 'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let a = createVector(30, 20);\n point(a);\n\n // Top-right.\n let b = createVector(70, 20);\n point(b);\n\n // Bottom-right.\n let c = createVector(70, 80);\n point(c);\n\n // Bottom-left.\n let d = createVector(30, 80);\n point(d);\n\n describe(\n 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two purple points drawn on a gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the points.\n stroke('purple');\n strokeWeight(10);\n\n // Top-left.\n point(-20, -30);\n\n // Bottom-right.\n point(20, 30);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two purple points drawn on a gray canvas. The scene spins slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Style the points.\n stroke('purple');\n strokeWeight(10);\n\n // Top-left.\n point(-20, -30, 0);\n\n // Bottom-right.\n point(20, 30, -50);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "TRIANGLES",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 743,
+ "type": "TRIANGLES",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "2D Primitives",
- "overloads": [
- {
- "line": 722,
- "params": [
- {
- "name": "x",
- "description": "<p>the x-coordinate.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>the y-coordinate.</p>\n",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "<p>the z-coordinate (for WebGL mode).</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 886,
- "params": [
- {
- "name": "coordinateVector",
- "description": "<p>the coordinate vector.</p>\n",
- "type": "p5.Vector"
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/2d_primitives.js",
- "line": 914,
- "description": "<p>Draws a quadrilateral (four-sided shape).</p>\n<p>Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The\nfirst pair of parameters <code>(x1, y1)</code> sets the quad's first point. The next\nthree pairs of parameters set the coordinates for its next three points\n<code>(x2, y2)</code>, <code>(x3, y3)</code>, and <code>(x4, y4)</code>. Points should be added in either\nclockwise or counter-clockwise order.</p>\n<p>The version of <code>quad()</code> with twelve parameters allows the quad to be drawn\nin 3D space. Doing so requires adding the <code>WEBGL</code> argument to\n<a href=\"#/p5/createCanvas\">createCanvas()</a>.</p>\n<p>The thirteenth and fourteenth parameters are optional. In WebGL mode, they\nset the number of segments used to draw the quadrilateral in the x- and\ny-directions. They're both 2 by default.</p>\n",
- "itemtype": "method",
- "name": "quad",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(20, 20, 80, 20, 80, 80, 20, 80);\n\n describe('A white square with a black outline drawn on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(20, 30, 80, 30, 80, 70, 20, 70);\n\n describe('A white rectangle with a black outline drawn on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(50, 62, 86, 50, 50, 38, 14, 50);\n\n describe('A white rhombus with a black outline drawn on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(20, 50, 80, 30, 80, 70, 20, 70);\n\n describe('A white trapezoid with a black outline drawn on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n quad(-30, -30, 30, -30, 30, 30, -30, 30);\n\n describe('A white square with a black outline drawn on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A wavy white surface spins around on gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the quad.\n quad(-30, -30, 0, 30, -30, 0, 30, 30, 20, -30, 30, -20);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "TRIANGLE_FAN",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 749,
+ "type": "TRIANGLE_FAN",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "2D Primitives",
- "overloads": [
- {
- "line": 914,
- "params": [
- {
- "name": "x1",
- "description": "<p>the x-coordinate of the first point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y1",
- "description": "<p>the y-coordinate of the first point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x2",
- "description": "<p>the x-coordinate of the second point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y2",
- "description": "<p>the y-coordinate of the second point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x3",
- "description": "<p>the x-coordinate of the third point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y3",
- "description": "<p>the y-coordinate of the third point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x4",
- "description": "<p>the x-coordinate of the fourth point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y4",
- "description": "<p>the y-coordinate of the fourth point.</p>\n",
- "type": "Number"
- },
- {
- "name": "detailX",
- "description": "<p>number of segments in the x-direction.</p>\n",
- "type": "Integer",
- "optional": true
- },
- {
- "name": "detailY",
- "description": "<p>number of segments in the y-direction.</p>\n",
- "type": "Integer",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 1034,
- "params": [
- {
- "name": "x1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z1",
- "description": "<p>the z-coordinate of the first point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z2",
- "description": "<p>the z-coordinate of the second point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z3",
- "description": "<p>the z-coordinate of the third point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x4",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y4",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z4",
- "description": "<p>the z-coordinate of the fourth point.</p>\n",
- "type": "Number"
- },
- {
- "name": "detailX",
- "description": "",
- "type": "Integer",
- "optional": true
- },
- {
- "name": "detailY",
- "description": "",
- "type": "Integer",
- "optional": true
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/2d_primitives.js",
- "line": 1077,
- "description": "<p>Draws a rectangle.</p>\n<p>A rectangle is a four-sided shape defined by the <code>x</code>, <code>y</code>, <code>w</code>, and <code>h</code>\nparameters. <code>x</code> and <code>y</code> set the location of its top-left corner. <code>w</code> sets\nits width and <code>h</code> sets its height. Every angle in the rectangle measures\n90˚. See <a href=\"#/p5/rectMode\">rectMode()</a> for other ways to define\nrectangles.</p>\n<p>The version of <code>rect()</code> with five parameters creates a rounded rectangle. The\nfifth parameter sets the radius for all four corners.</p>\n<p>The version of <code>rect()</code> with eight parameters also creates a rounded\nrectangle. Each of the last four parameters set the radius of a corner. The\nradii start with the top-left corner and move clockwise around the\nrectangle. If any of these parameters are omitted, they are set to the\nvalue of the last radius that was set.</p>\n",
- "itemtype": "method",
- "name": "rect",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rect(30, 20, 55, 55);\n\n describe('A white square with a black outline on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rect(30, 20, 55, 40);\n\n describe('A white rectangle with a black outline on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give all corners a radius of 20.\n rect(30, 20, 55, 50, 20);\n\n describe('A white rectangle with a black outline and round edges on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give each corner a unique radius.\n rect(30, 20, 55, 50, 20, 15, 10, 5);\n\n describe('A white rectangle with a black outline and round edges of different radii.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n rect(-20, -30, 55, 55);\n\n describe('A white square with a black outline on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around on gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the rectangle.\n rect(-20, -30, 55, 55);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "TRIANGLE_STRIP",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 755,
+ "type": "TRIANGLE_STRIP",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "2D Primitives",
- "overloads": [
- {
- "line": 1077,
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate of the rectangle.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the rectangle.</p>\n",
- "type": "Number"
- },
- {
- "name": "w",
- "description": "<p>width of the rectangle.</p>\n",
- "type": "Number"
- },
- {
- "name": "h",
- "description": "<p>height of the rectangle.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "tl",
- "description": "<p>optional radius of top-left corner.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "tr",
- "description": "<p>optional radius of top-right corner.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "br",
- "description": "<p>optional radius of bottom-right corner.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "bl",
- "description": "<p>optional radius of bottom-left corner.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 1200,
- "params": [
- {
- "name": "x",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "",
- "type": "Number"
- },
- {
- "name": "w",
- "description": "",
- "type": "Number"
- },
- {
- "name": "h",
- "description": "",
- "type": "Number"
- },
- {
- "name": "detailX",
- "description": "<p>number of segments in the x-direction (for WebGL mode).</p>\n",
- "type": "Integer",
- "optional": true
- },
- {
- "name": "detailY",
- "description": "<p>number of segments in the y-direction (for WebGL mode).</p>\n",
- "type": "Integer",
- "optional": true
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/2d_primitives.js",
- "line": 1215,
- "description": "<p>Draws a square.</p>\n<p>A square is a four-sided shape defined by the <code>x</code>, <code>y</code>, and <code>s</code>\nparameters. <code>x</code> and <code>y</code> set the location of its top-left corner. <code>s</code> sets\nits width and height. Every angle in the square measures 90˚ and all its\nsides are the same length. See <a href=\"#/p5/rectMode\">rectMode()</a> for\nother ways to define squares.</p>\n<p>The version of <code>square()</code> with four parameters creates a rounded square.\nThe fourth parameter sets the radius for all four corners.</p>\n<p>The version of <code>square()</code> with seven parameters also creates a rounded\nsquare. Each of the last four parameters set the radius of a corner. The\nradii start with the top-left corner and move clockwise around the\nsquare. If any of these parameters are omitted, they are set to the\nvalue of the last radius that was set.</p>\n",
- "itemtype": "method",
- "name": "square",
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate of the square.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the square.</p>\n",
- "type": "Number"
- },
- {
- "name": "s",
- "description": "<p>side size of the square.</p>\n",
- "type": "Number"
- },
- {
- "name": "tl",
- "description": "<p>optional radius of top-left corner.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "tr",
- "description": "<p>optional radius of top-right corner.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "br",
- "description": "<p>optional radius of bottom-right corner.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "bl",
- "description": "<p>optional radius of bottom-left corner.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n square(30, 20, 55);\n\n describe('A white square with a black outline in on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give all corners a radius of 20.\n square(30, 20, 55, 20);\n\n describe(\n 'A white square with a black outline and round edges on a gray canvas.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give each corner a unique radius.\n square(30, 20, 55, 20, 15, 10, 5);\n\n describe('A white square with a black outline and round edges of different radii.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n square(-20, -30, 55);\n\n describe('A white square with a black outline in on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around on gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the square.\n square(-20, -30, 55);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "QUADS",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 761,
+ "type": "QUADS",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "2D Primitives"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/2d_primitives.js",
- "line": 1371,
- "description": "<p>Draws a triangle.</p>\n<p>A triangle is a three-sided shape defined by three points. The\nfirst two parameters specify the triangle's first point <code>(x1, y1)</code>. The\nmiddle two parameters specify its second point <code>(x2, y2)</code>. And the last two\nparameters specify its third point <code>(x3, y3)</code>.</p>\n",
- "itemtype": "method",
- "name": "triangle",
- "params": [
- {
- "name": "x1",
- "description": "<p>x-coordinate of the first point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y1",
- "description": "<p>y-coordinate of the first point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x2",
- "description": "<p>x-coordinate of the second point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y2",
- "description": "<p>y-coordinate of the second point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x3",
- "description": "<p>x-coordinate of the third point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y3",
- "description": "<p>y-coordinate of the third point.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n triangle(30, 75, 58, 20, 86, 75);\n\n describe('A white triangle with a black outline on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n triangle(-20, 25, 8, -30, 36, 25);\n\n describe('A white triangle with a black outline on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white triangle spins around on a gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the triangle.\n triangle(-20, 25, 8, -30, 36, 25);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "QUAD_STRIP",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 767,
+ "type": "QUAD_STRIP",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "2D Primitives"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/attributes.js",
- "line": 12,
- "description": "<p>Changes where ellipses, circles, and arcs are drawn.</p>\n<p>By default, the first two parameters of\n<a href=\"#/p5/ellipse\">ellipse()</a>, <a href=\"#/p5/circle\">circle()</a>,\nand <a href=\"#/p5/arc\">arc()</a>\nare the x- and y-coordinates of the shape's center. The next parameters set\nthe shape's width and height. This is the same as calling\n<code>ellipseMode(CENTER)</code>.</p>\n<p><code>ellipseMode(RADIUS)</code> also uses the first two parameters to set the x- and\ny-coordinates of the shape's center. The next parameters are half of the\nshapes's width and height. Calling <code>ellipse(0, 0, 10, 15)</code> draws a shape\nwith a width of 20 and height of 30.</p>\n<p><code>ellipseMode(CORNER)</code> uses the first two parameters as the upper-left\ncorner of the shape. The next parameters are its width and height.</p>\n<p><code>ellipseMode(CORNERS)</code> uses the first two parameters as the location of one\ncorner of the ellipse's bounding box. The next parameters are the location\nof the opposite corner.</p>\n<p>The argument passed to <code>ellipseMode()</code> must be written in ALL CAPS because\nthe constants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>, and <code>CORNERS</code> are defined this\nway. JavaScript is a case-sensitive language.</p>\n",
- "itemtype": "method",
- "name": "ellipseMode",
- "params": [
- {
- "name": "mode",
- "description": "<p>either CENTER, RADIUS, CORNER, or CORNERS</p>\n",
- "type": "Constant"
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // White ellipse.\n ellipseMode(RADIUS);\n fill(255);\n ellipse(50, 50, 30, 30);\n\n // Gray ellipse.\n ellipseMode(CENTER);\n fill(100);\n ellipse(50, 50, 30, 30);\n\n describe('A white circle with a gray circle at its center. Both circles have black outlines.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // White ellipse.\n ellipseMode(CORNER);\n fill(255);\n ellipse(25, 25, 50, 50);\n\n // Gray ellipse.\n ellipseMode(CORNERS);\n fill(100);\n ellipse(25, 25, 50, 50);\n\n describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "TESS",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 773,
+ "type": "TESS",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Attributes"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/attributes.js",
- "line": 100,
- "description": "<p>Draws certain features with jagged (aliased) edges.</p>\n<p><a href=\"#/p5/smooth\">smooth()</a> is active by default. In 2D mode,\n<code>noSmooth()</code> is helpful for scaling up images without blurring. The\nfunctions don't affect shapes or fonts.</p>\n<p>In WebGL mode, <code>noSmooth()</code> causes all shapes to be drawn with jagged\n(aliased) edges. The functions don't affect images or fonts.</p>\n",
- "itemtype": "method",
- "name": "noSmooth",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nlet heart;\n\n// Load a pixelated heart image from an image data string.\nfunction preload() {\n heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Antialiased hearts.\n image(heart, 10, 10);\n image(heart, 20, 10, 16, 16);\n image(heart, 40, 10, 32, 32);\n\n // Aliased hearts.\n noSmooth();\n image(heart, 10, 60);\n image(heart, 20, 60, 16, 16);\n image(heart, 40, 60, 32, 32);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A white circle on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Disable smoothing.\n noSmooth();\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A pixelated white circle on a gray background.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "EMPTY_PATH",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 779,
+ "type": "EMPTY_PATH",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Attributes"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/attributes.js",
- "line": 184,
- "description": "<p>Changes where rectangles and squares are drawn.</p>\n<p>By default, the first two parameters of\n<a href=\"#/p5/rect\">rect()</a> and <a href=\"#/p5/square\">square()</a>,\nare the x- and y-coordinates of the shape's upper left corner. The next parameters set\nthe shape's width and height. This is the same as calling\n<code>rectMode(CORNER)</code>.</p>\n<p><code>rectMode(CORNERS)</code> also uses the first two parameters as the location of\none of the corners. The next parameters are the location of the opposite\ncorner. This mode only works for <a href=\"#/p5/rect\">rect()</a>.</p>\n<p><code>rectMode(CENTER)</code> uses the first two parameters as the x- and\ny-coordinates of the shape's center. The next parameters are its width and\nheight.</p>\n<p><code>rectMode(RADIUS)</code> also uses the first two parameters as the x- and\ny-coordinates of the shape's center. The next parameters are\nhalf of the shape's width and height.</p>\n<p>The argument passed to <code>rectMode()</code> must be written in ALL CAPS because the\nconstants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>, and <code>CORNERS</code> are defined this way.\nJavaScript is a case-sensitive language.</p>\n",
- "itemtype": "method",
- "name": "rectMode",
- "params": [
- {
- "name": "mode",
- "description": "<p>either CORNER, CORNERS, CENTER, or RADIUS</p>\n",
- "type": "Constant"
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(CORNER);\n fill(255);\n rect(25, 25, 50, 50);\n\n rectMode(CORNERS);\n fill(100);\n rect(25, 25, 50, 50);\n\n describe('A small gray square drawn at the top-left corner of a white square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(RADIUS);\n fill(255);\n rect(50, 50, 30, 30);\n\n rectMode(CENTER);\n fill(100);\n rect(50, 50, 30, 30);\n\n describe('A small gray square drawn at the center of a white square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(CORNER);\n fill(255);\n square(25, 25, 50);\n\n describe('A white square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(RADIUS);\n fill(255);\n square(50, 50, 30);\n\n rectMode(CENTER);\n fill(100);\n square(50, 50, 30);\n\n describe('A small gray square drawn at the center of a white square.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "PATH",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 785,
+ "type": "PATH",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Attributes"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/attributes.js",
- "line": 303,
- "description": "<p>Draws certain features with smooth (antialiased) edges.</p>\n<p><code>smooth()</code> is active by default. In 2D mode,\n<a href=\"#/p5/noSmooth\">noSmooth()</a> is helpful for scaling up images\nwithout blurring. The functions don't affect shapes or fonts.</p>\n<p>In WebGL mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> causes all shapes to\nbe drawn with jagged (aliased) edges. The functions don't affect images or\nfonts.</p>\n",
- "itemtype": "method",
- "name": "smooth",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nlet heart;\n\n// Load a pixelated heart image from an image data string.\nfunction preload() {\n heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Antialiased hearts.\n image(heart, 10, 10);\n image(heart, 20, 10, 16, 16);\n image(heart, 40, 10, 32, 32);\n\n // Aliased hearts.\n noSmooth();\n image(heart, 10, 60);\n image(heart, 20, 60, 16, 16);\n image(heart, 40, 60, 32, 32);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A white circle on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Disable smoothing.\n noSmooth();\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A pixelated white circle on a gray background.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "CLOSE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 791,
+ "type": "CLOSE",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Attributes"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/attributes.js",
- "line": 388,
- "description": "<p>Sets the style for rendering the ends of lines.</p>\n<p>The caps for line endings are either rounded (<code>ROUND</code>), squared\n(<code>SQUARE</code>), or extended (<code>PROJECT</code>). The default cap is <code>ROUND</code>.</p>\n<p>The argument passed to <code>strokeCap()</code> must be written in ALL CAPS because\nthe constants <code>ROUND</code>, <code>SQUARE</code>, and <code>PROJECT</code> are defined this way.\nJavaScript is a case-sensitive language.</p>\n",
- "itemtype": "method",
- "name": "strokeCap",
- "params": [
- {
- "name": "cap",
- "description": "<p>either ROUND, SQUARE, or PROJECT</p>\n",
- "type": "Constant"
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n strokeWeight(12);\n\n // Top.\n strokeCap(ROUND);\n line(20, 30, 80, 30);\n\n // Middle.\n strokeCap(SQUARE);\n line(20, 50, 80, 50);\n\n // Bottom.\n strokeCap(PROJECT);\n line(20, 70, 80, 70);\n\n describe(\n 'Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.'\n );\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "OPEN",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 797,
+ "type": "OPEN",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Attributes"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/attributes.js",
- "line": 442,
- "description": "<p>Sets the style of the joints that connect line segments.</p>\n<p>Joints are either mitered (<code>MITER</code>), beveled (<code>BEVEL</code>), or rounded\n(<code>ROUND</code>). The default joint is <code>MITER</code> in 2D mode and <code>ROUND</code> in WebGL\nmode.</p>\n<p>The argument passed to <code>strokeJoin()</code> must be written in ALL CAPS because\nthe constants <code>MITER</code>, <code>BEVEL</code>, and <code>ROUND</code> are defined this way.\nJavaScript is a case-sensitive language.</p>\n",
- "itemtype": "method",
- "name": "strokeJoin",
- "params": [
- {
- "name": "join",
- "description": "<p>either MITER, BEVEL, or ROUND</p>\n",
- "type": "Constant"
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n noFill();\n strokeWeight(10);\n strokeJoin(MITER);\n\n // Draw the line.\n beginShape();\n vertex(35, 20);\n vertex(65, 50);\n vertex(35, 80);\n endShape();\n\n describe('A right-facing arrowhead shape with a pointed tip in center of canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n noFill();\n strokeWeight(10);\n strokeJoin(BEVEL);\n\n // Draw the line.\n beginShape();\n vertex(35, 20);\n vertex(65, 50);\n vertex(35, 80);\n endShape();\n\n describe('A right-facing arrowhead shape with a flat tip in center of canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n noFill();\n strokeWeight(10);\n strokeJoin(ROUND);\n\n // Draw the line.\n beginShape();\n vertex(35, 20);\n vertex(65, 50);\n vertex(35, 80);\n endShape();\n\n describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "CHORD",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 803,
+ "type": "CHORD",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Attributes"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/attributes.js",
- "line": 541,
- "description": "<p>Sets the width of the stroke used for points, lines, and the outlines of\nshapes.</p>\n<p>Note: <code>strokeWeight()</code> is affected by transformations, especially calls to\n<a href=\"#/p5/scale\">scale()</a>.</p>\n",
- "itemtype": "method",
- "name": "strokeWeight",
- "params": [
- {
- "name": "weight",
- "description": "<p>the weight of the stroke (in pixels).</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n line(20, 20, 80, 20);\n\n // Middle.\n strokeWeight(4);\n line(20, 40, 80, 40);\n\n // Bottom.\n strokeWeight(10);\n line(20, 70, 80, 70);\n\n describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n line(20, 20, 80, 20);\n\n // Scale by a factor of 5.\n scale(5);\n\n // Bottom. Coordinates are adjusted for scaling.\n line(4, 8, 16, 8);\n\n describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "PIE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 809,
+ "type": "PIE",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Attributes"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/curves.js",
- "line": 13,
- "description": "<p>Draws a Bézier curve.</p>\n<p>Bézier curves can form shapes and curves that slope gently. They're defined\nby two anchor points and two control points. Bézier curves provide more\ncontrol than the spline curves created with the\n<a href=\"#/p5/curve\">curve()</a> function.</p>\n<p>The first two parameters, <code>x1</code> and <code>y1</code>, set the first anchor point. The\nfirst anchor point is where the curve starts.</p>\n<p>The next four parameters, <code>x2</code>, <code>y2</code>, <code>x3</code>, and <code>y3</code>, set the two control\npoints. The control points \"pull\" the curve towards them.</p>\n<p>The seventh and eighth parameters, <code>x4</code> and <code>y4</code>, set the last anchor\npoint. The last anchor point is where the curve ends.</p>\n<p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of\n<code>bezier()</code> has twelve arguments because each point has x-, y-,\nand z-coordinates.</p>\n",
- "itemtype": "method",
- "name": "bezier",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(85, 20);\n point(15, 80);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(10, 10);\n point(90, 90);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(85, 20, 10, 10, 90, 90, 15, 80);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(85, 20, 10, 10);\n line(15, 80, 90, 90);\n\n describe(\n 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the mouse near the red dot in the top-left corner\n// and drag to change the curve's shape.\n\nlet x2 = 10;\nlet y2 = 10;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(85, 20);\n point(15, 80);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x2, y2);\n point(90, 90);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(85, 20, x2, y2, 90, 90, 15, 80);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(85, 20, x2, y2);\n line(15, 80, 90, 90);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x2, y2) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x2 = mouseX;\n y2 = mouseY;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background('skyblue');\n\n // Draw the red balloon.\n fill('red');\n bezier(50, 60, 5, 15, 95, 15, 50, 60);\n\n // Draw the balloon string.\n line(50, 60, 50, 80);\n\n describe('A red balloon in a blue sky.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red balloon in a blue sky. The balloon rotates slowly, revealing that it is flat.');\n}\n\nfunction draw() {\n background('skyblue');\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the red balloon.\n fill('red');\n bezier(0, 0, 0, -45, -45, 0, 45, -45, 0, 0, 0, 0);\n\n // Draw the balloon string.\n line(0, 0, 0, 0, 20, 0);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "PROJECT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 815,
+ "type": "PROJECT",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Curves",
- "overloads": [
- {
- "line": 13,
- "params": [
- {
- "name": "x1",
- "description": "<p>x-coordinate of the first anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y1",
- "description": "<p>y-coordinate of the first anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x2",
- "description": "<p>x-coordinate of the first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y2",
- "description": "<p>y-coordinate of the first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x3",
- "description": "<p>x-coordinate of the second control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y3",
- "description": "<p>y-coordinate of the second control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x4",
- "description": "<p>x-coordinate of the second anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y4",
- "description": "<p>y-coordinate of the second anchor point.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 191,
- "params": [
- {
- "name": "x1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z1",
- "description": "<p>z-coordinate of the first anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z2",
- "description": "<p>z-coordinate of the first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z3",
- "description": "<p>z-coordinate of the second control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x4",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y4",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z4",
- "description": "<p>z-coordinate of the second anchor point.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/curves.js",
- "line": 221,
- "description": "<p>Sets the number of segments used to draw Bézier curves in WebGL mode.</p>\n<p>In WebGL mode, smooth shapes are drawn using many flat segments. Adding\nmore flat segments makes shapes appear smoother.</p>\n<p>The parameter, <code>detail</code>, is the number of segments to use while drawing a\nBézier curve. For example, calling <code>bezierDetail(5)</code> will use 5 segments to\ndraw curves with the <a href=\"#/p5/bezier\">bezier()</a> function. By\ndefault,<code>detail</code> is 20.</p>\n<p>Note: <code>bezierDetail()</code> has no effect in 2D mode.</p>\n",
- "itemtype": "method",
- "name": "bezierDetail",
- "params": [
- {
- "name": "detail",
- "description": "<p>number of segments to use. Defaults to 20.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Draw the original curve.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(85, 20);\n point(15, 80);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(10, 10);\n point(90, 90);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(85, 20, 10, 10, 90, 90, 15, 80);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(85, 20, 10, 10);\n line(15, 80, 90, 90);\n\n describe(\n 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\n// Draw the curve with less detail.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Set the curveDetail() to 5.\n bezierDetail(5);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(35, -30, 0);\n point(-35, 30, 0);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(-40, -40, 0);\n point(40, 40, 0);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(35, -30, 0, -40, -40, 0, 40, 40, 0, -35, 30, 0);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(35, -30, -40, -40);\n line(-35, 30, 40, 40);\n\n describe(\n 'A gray square with three curves. A black s-curve is drawn with jagged segments. Two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "SQUARE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 821,
+ "type": "SQUERE",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Curves"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/curves.js",
- "line": 324,
- "description": "<p>Calculates coordinates along a Bézier curve using interpolation.</p>\n<p><code>bezierPoint()</code> calculates coordinates along a Bézier curve using the\nanchor and control points. It expects points in the same order as the\n<a href=\"#/p5/bezier\">bezier()</a> function. <code>bezierPoint()</code> works one axis\nat a time. Passing the anchor and control points' x-coordinates will\ncalculate the x-coordinate of a point on the curve. Passing the anchor and\ncontrol points' y-coordinates will calculate the y-coordinate of a point on\nthe curve.</p>\n<p>The first parameter, <code>a</code>, is the coordinate of the first anchor point.</p>\n<p>The second and third parameters, <code>b</code> and <code>c</code>, are the coordinates of the\ncontrol points.</p>\n<p>The fourth parameter, <code>d</code>, is the coordinate of the last anchor point.</p>\n<p>The fifth parameter, <code>t</code>, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.</p>\n",
- "itemtype": "method",
- "name": "bezierPoint",
- "params": [
- {
- "name": "a",
- "description": "<p>coordinate of first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "b",
- "description": "<p>coordinate of first anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "c",
- "description": "<p>coordinate of second anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "d",
- "description": "<p>coordinate of second control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "t",
- "description": "<p>amount to interpolate between 0 and 1.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "coordinate of the point on the curve.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 85;\n let x2 = 10;\n let x3 = 90;\n let x4 = 15;\n let y1 = 20;\n let y2 = 10;\n let y3 = 90;\n let y4 = 80;\n\n // Style the curve.\n noFill();\n\n // Draw the curve.\n bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw circles along the curve's path.\n fill(255);\n\n // Top-right.\n let x = bezierPoint(x1, x2, x3, x4, 0);\n let y = bezierPoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Center.\n x = bezierPoint(x1, x2, x3, x4, 0.5);\n y = bezierPoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Bottom-left.\n x = bezierPoint(x1, x2, x3, x4, 1);\n y = bezierPoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n describe('A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black s-curve on a gray square. A white circle moves back and forth along the curve.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 85;\n let x2 = 10;\n let x3 = 90;\n let x4 = 15;\n let y1 = 20;\n let y2 = 10;\n let y3 = 90;\n let y4 = 80;\n\n // Draw the curve.\n noFill();\n bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Calculate the circle's coordinates.\n let t = 0.5 * sin(frameCount * 0.01) + 0.5;\n let x = bezierPoint(x1, x2, x3, x4, t);\n let y = bezierPoint(y1, y2, y3, y4, t);\n\n // Draw the circle.\n fill(255);\n circle(x, y, 5);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "ROUND",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 827,
+ "type": "ROUND",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Curves"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/curves.js",
- "line": 450,
- "description": "<p>Calculates coordinates along a line that's tangent to a Bézier curve.</p>\n<p>Tangent lines skim the surface of a curve. A tangent line's slope equals\nthe curve's slope at the point where it intersects.</p>\n<p><code>bezierTangent()</code> calculates coordinates along a tangent line using the\nBézier curve's anchor and control points. It expects points in the same\norder as the <a href=\"#/p5/bezier\">bezier()</a> function. <code>bezierTangent()</code>\nworks one axis at a time. Passing the anchor and control points'\nx-coordinates will calculate the x-coordinate of a point on the tangent\nline. Passing the anchor and control points' y-coordinates will calculate\nthe y-coordinate of a point on the tangent line.</p>\n<p>The first parameter, <code>a</code>, is the coordinate of the first anchor point.</p>\n<p>The second and third parameters, <code>b</code> and <code>c</code>, are the coordinates of the\ncontrol points.</p>\n<p>The fourth parameter, <code>d</code>, is the coordinate of the last anchor point.</p>\n<p>The fifth parameter, <code>t</code>, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.</p>\n",
- "itemtype": "method",
- "name": "bezierTangent",
- "params": [
- {
- "name": "a",
- "description": "<p>coordinate of first anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "b",
- "description": "<p>coordinate of first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "c",
- "description": "<p>coordinate of second control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "d",
- "description": "<p>coordinate of second anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "t",
- "description": "<p>amount to interpolate between 0 and 1.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "coordinate of a point on the tangent line.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 85;\n let x2 = 10;\n let x3 = 90;\n let x4 = 15;\n let y1 = 20;\n let y2 = 10;\n let y3 = 90;\n let y4 = 80;\n\n // Style the curve.\n noFill();\n\n // Draw the curve.\n bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw tangents along the curve's path.\n fill(255);\n\n // Top-right circle.\n stroke(0);\n let x = bezierPoint(x1, x2, x3, x4, 0);\n let y = bezierPoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Top-right tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n let tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0);\n let ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Center circle.\n stroke(0);\n x = bezierPoint(x1, x2, x3, x4, 0.5);\n y = bezierPoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Center tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0.5);\n ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0.5);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Bottom-left circle.\n stroke(0);\n x = bezierPoint(x1, x2, x3, x4, 1);\n y = bezierPoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n // Bottom-left tangent.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.1 * bezierTangent(x1, x2, x3, x4, 1);\n ty = 0.1 * bezierTangent(y1, y2, y3, y4, 1);\n line(x + tx, y + ty, x - tx, y - ty);\n\n describe(\n 'A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles. Red tangent lines extend from the white circles.'\n );\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "BEVEL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 833,
+ "type": "BEVEL",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Curves"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/curves.js",
- "line": 570,
- "description": "<p>Draws a curve using a Catmull-Rom spline.</p>\n<p>Spline curves can form shapes and curves that slope gently. They’re like\ncables that are attached to a set of points. Splines are defined by two\nanchor points and two control points.</p>\n<p>The first two parameters, <code>x1</code> and <code>y1</code>, set the first control point. This\npoint isn’t drawn and can be thought of as the curve’s starting point.</p>\n<p>The next four parameters, <code>x2</code>, <code>y2</code>, <code>x3</code>, and <code>y3</code>, set the two anchor\npoints. The anchor points are the start and end points of the curve’s\nvisible segment.</p>\n<p>The seventh and eighth parameters, <code>x4</code> and <code>y4</code>, set the last control\npoint. This point isn’t drawn and can be thought of as the curve’s ending\npoint.</p>\n<p>Spline curves can also be drawn in 3D using WebGL mode. The 3D version of\n<code>curve()</code> has twelve arguments because each point has x-, y-, and\nz-coordinates.</p>\n",
- "itemtype": "method",
- "name": "curve",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n curve(5, 26, 73, 24, 73, 61, 15, 65);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n curve(5, 26, 5, 26, 73, 24, 73, 61);\n curve(73, 24, 73, 61, 15, 65, 15, 65);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(73, 24);\n point(73, 61);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(5, 26);\n point(15, 65);\n\n describe(\n 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x1 = 5;\nlet y1 = 26;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n curve(x1, y1, 73, 24, 73, 61, 15, 65);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n curve(x1, y1, x1, y1, 73, 24, 73, 61);\n curve(73, 24, 73, 61, 15, 65, 15, 65);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(73, 24);\n point(73, 61);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x1, y1);\n point(15, 65);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x1, y1) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x1 = mouseX;\n y1 = mouseY;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background('skyblue');\n\n // Draw the red balloon.\n fill('red');\n curve(-150, 275, 50, 60, 50, 60, 250, 275);\n\n // Draw the balloon string.\n line(50, 60, 50, 80);\n\n describe('A red balloon in a blue sky.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red balloon in a blue sky.');\n}\n\nfunction draw() {\n background('skyblue');\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the red balloon.\n fill('red');\n curve(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0);\n\n // Draw the balloon string.\n line(0, 10, 0, 0, 30, 0);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "MITER",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 839,
+ "type": "MITER",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Curves",
- "overloads": [
- {
- "line": 570,
- "params": [
- {
- "name": "x1",
- "description": "<p>x-coordinate of the first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y1",
- "description": "<p>y-coordinate of the first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x2",
- "description": "<p>x-coordinate of the first anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y2",
- "description": "<p>y-coordinate of the first anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x3",
- "description": "<p>x-coordinate of the second anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y3",
- "description": "<p>y-coordinate of the second anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x4",
- "description": "<p>x-coordinate of the second control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y4",
- "description": "<p>y-coordinate of the second control point.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 746,
- "params": [
- {
- "name": "x1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z1",
- "description": "<p>z-coordinate of the first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z2",
- "description": "<p>z-coordinate of the first anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z3",
- "description": "<p>z-coordinate of the second anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x4",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y4",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z4",
- "description": "<p>z-coordinate of the second control point.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/curves.js",
- "line": 772,
- "description": "<p>Sets the number of segments used to draw spline curves in WebGL mode.</p>\n<p>In WebGL mode, smooth shapes are drawn using many flat segments. Adding\nmore flat segments makes shapes appear smoother.</p>\n<p>The parameter, <code>detail</code>, is the number of segments to use while drawing a\nspline curve. For example, calling <code>curveDetail(5)</code> will use 5 segments to\ndraw curves with the <a href=\"#/p5/curve\">curve()</a> function. By\ndefault,<code>detail</code> is 20.</p>\n<p>Note: <code>curveDetail()</code> has no effect in 2D mode.</p>\n",
- "itemtype": "method",
- "name": "curveDetail",
- "params": [
- {
- "name": "resolution",
- "description": "<p>number of segments to use. Defaults to 20.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n curve(5, 26, 73, 24, 73, 61, 15, 65);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n curve(5, 26, 5, 26, 73, 24, 73, 61);\n curve(73, 24, 73, 61, 15, 65, 15, 65);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(73, 24);\n point(73, 61);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(5, 26);\n point(15, 65);\n\n describe(\n 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Set the curveDetail() to 3.\n curveDetail(3);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n curve(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n curve(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0);\n curve(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(23, -26);\n point(23, 11);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(-45, -24);\n point(-35, 15);\n\n describe(\n 'A gray square with a jagged curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "AUTO",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 851,
+ "type": "AUTO",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Curves"
+ "example": [],
+ "description": "AUTO allows us to automatically set the width or height of an element (but not both),\nbased on the current height and width of the element. Only one parameter can\nbe passed to the <a href=\"/reference/p5.Element/size\">size</a> function as AUTO, at a time."
},
{
- "file": "src/core/shape/curves.js",
- "line": 875,
- "description": "<p>Adjusts the way <a href=\"#/p5/curve\">curve()</a> and\n<a href=\"#/p5/curveVertex\">curveVertex()</a> draw.</p>\n<p>Spline curves are like cables that are attached to a set of points.\n<code>curveTightness()</code> adjusts how tightly the cable is attached to the points.</p>\n<p>The parameter, <code>tightness</code>, determines how the curve fits to the vertex\npoints. By default, <code>tightness</code> is set to 0. Setting tightness to 1,\nas in <code>curveTightness(1)</code>, connects the curve's points using straight\nlines. Values in the range from –5 to 5 deform curves while leaving them\nrecognizable.</p>\n",
- "itemtype": "method",
- "name": "curveTightness",
- "params": [
- {
- "name": "amount",
- "description": "<p>amount of tightness.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Move the mouse left and right to see the curve change.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right');\n}\n\nfunction draw() {\n background(200);\n\n // Set the curve's tightness using the mouse.\n let t = map(mouseX, 0, 100, -5, 5, true);\n curveTightness(t);\n\n // Draw the curve.\n noFill();\n beginShape();\n curveVertex(10, 26);\n curveVertex(10, 26);\n curveVertex(83, 24);\n curveVertex(83, 61);\n curveVertex(25, 65);\n curveVertex(25, 65);\n endShape();\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "ALT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 858,
+ "type": "ALT",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Curves"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/curves.js",
- "line": 930,
- "description": "<p>Calculates coordinates along a spline curve using interpolation.</p>\n<p><code>curvePoint()</code> calculates coordinates along a spline curve using the\nanchor and control points. It expects points in the same order as the\n<a href=\"#/p5/curve\">curve()</a> function. <code>curvePoint()</code> works one axis\nat a time. Passing the anchor and control points' x-coordinates will\ncalculate the x-coordinate of a point on the curve. Passing the anchor and\ncontrol points' y-coordinates will calculate the y-coordinate of a point on\nthe curve.</p>\n<p>The first parameter, <code>a</code>, is the coordinate of the first control point.</p>\n<p>The second and third parameters, <code>b</code> and <code>c</code>, are the coordinates of the\nanchor points.</p>\n<p>The fourth parameter, <code>d</code>, is the coordinate of the last control point.</p>\n<p>The fifth parameter, <code>t</code>, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.</p>\n",
- "itemtype": "method",
- "name": "curvePoint",
- "params": [
- {
- "name": "a",
- "description": "<p>coordinate of first anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "b",
- "description": "<p>coordinate of first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "c",
- "description": "<p>coordinate of second control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "d",
- "description": "<p>coordinate of second anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "t",
- "description": "<p>amount to interpolate between 0 and 1.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "coordinate of a point on the curve.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 5;\n let y1 = 26;\n let x2 = 73;\n let y2 = 24;\n let x3 = 73;\n let y3 = 61;\n let x4 = 15;\n let y4 = 65;\n\n // Draw the curve.\n noFill();\n curve(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw circles along the curve's path.\n fill(255);\n\n // Top.\n let x = curvePoint(x1, x2, x3, x4, 0);\n let y = curvePoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Center.\n x = curvePoint(x1, x2, x3, x4, 0.5);\n y = curvePoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Bottom.\n x = curvePoint(x1, x2, x3, x4, 1);\n y = curvePoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black curve on a gray square. A white circle moves back and forth along the curve.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 5;\n let y1 = 26;\n let x2 = 73;\n let y2 = 24;\n let x3 = 73;\n let y3 = 61;\n let x4 = 15;\n let y4 = 65;\n\n // Draw the curve.\n noFill();\n curve(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Calculate the circle's coordinates.\n let t = 0.5 * sin(frameCount * 0.01) + 0.5;\n let x = curvePoint(x1, x2, x3, x4, t);\n let y = curvePoint(y1, y2, y3, y4, t);\n\n // Draw the circle.\n fill(255);\n circle(x, y, 5);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "BACKSPACE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 865,
+ "type": "BACKSPACE",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Curves"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/curves.js",
- "line": 1054,
- "description": "<p>Calculates coordinates along a line that's tangent to a spline curve.</p>\n<p>Tangent lines skim the surface of a curve. A tangent line's slope equals\nthe curve's slope at the point where it intersects.</p>\n<p><code>curveTangent()</code> calculates coordinates along a tangent line using the\nspline curve's anchor and control points. It expects points in the same\norder as the <a href=\"#/p5/curve\">curve()</a> function. <code>curveTangent()</code>\nworks one axis at a time. Passing the anchor and control points'\nx-coordinates will calculate the x-coordinate of a point on the tangent\nline. Passing the anchor and control points' y-coordinates will calculate\nthe y-coordinate of a point on the tangent line.</p>\n<p>The first parameter, <code>a</code>, is the coordinate of the first control point.</p>\n<p>The second and third parameters, <code>b</code> and <code>c</code>, are the coordinates of the\nanchor points.</p>\n<p>The fourth parameter, <code>d</code>, is the coordinate of the last control point.</p>\n<p>The fifth parameter, <code>t</code>, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.</p>\n",
- "itemtype": "method",
- "name": "curveTangent",
- "params": [
- {
- "name": "a",
- "description": "<p>coordinate of first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "b",
- "description": "<p>coordinate of first anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "c",
- "description": "<p>coordinate of second anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "d",
- "description": "<p>coordinate of second control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "t",
- "description": "<p>amount to interpolate between 0 and 1.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "coordinate of a point on the tangent line.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 5;\n let y1 = 26;\n let x2 = 73;\n let y2 = 24;\n let x3 = 73;\n let y3 = 61;\n let x4 = 15;\n let y4 = 65;\n\n // Draw the curve.\n noFill();\n curve(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw tangents along the curve's path.\n fill(255);\n\n // Top circle.\n stroke(0);\n let x = curvePoint(x1, x2, x3, x4, 0);\n let y = curvePoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Top tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n let tx = 0.2 * curveTangent(x1, x2, x3, x4, 0);\n let ty = 0.2 * curveTangent(y1, y2, y3, y4, 0);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Center circle.\n stroke(0);\n x = curvePoint(x1, x2, x3, x4, 0.5);\n y = curvePoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Center tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.2 * curveTangent(x1, x2, x3, x4, 0.5);\n ty = 0.2 * curveTangent(y1, y2, y3, y4, 0.5);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Bottom circle.\n stroke(0);\n x = curvePoint(x1, x2, x3, x4, 1);\n y = curvePoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n // Bottom tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.2 * curveTangent(x1, x2, x3, x4, 1);\n ty = 0.2 * curveTangent(y1, y2, y3, y4, 1);\n line(x + tx, y + ty, x - tx, y - ty);\n\n describe(\n 'A black curve on a gray square. A white circle moves back and forth along the curve.'\n );\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "CONTROL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 872,
+ "type": "CONTROL",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Curves"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/vertex.js",
- "line": 20,
- "description": "<p>Begins creating a hole within a flat shape.</p>\n<p>The <code>beginContour()</code> and <a href=\"#/p5/endContour\">endContour()</a>\nfunctions allow for creating negative space within custom shapes that are\nflat. <code>beginContour()</code> begins adding vertices to a negative space and\n<a href=\"#/p5/endContour\">endContour()</a> stops adding them.\n<code>beginContour()</code> and <a href=\"#/p5/endContour\">endContour()</a> must be\ncalled between <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a>.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a>\ndon't work between <code>beginContour()</code> and\n<a href=\"#/p5/endContour\">endContour()</a>. It's also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or\n<a href=\"#/p5/rect\">rect()</a>, between <code>beginContour()</code> and\n<a href=\"#/p5/endContour\">endContour()</a>.</p>\n<p>Note: The vertices that define a negative space must \"wind\" in the opposite\ndirection from the outer shape. First, draw vertices for the outer shape\nclockwise order. Then, draw vertices for the negative space in\ncounter-clockwise order.</p>\n",
- "itemtype": "method",
- "name": "beginContour",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(10, 10);\n vertex(90, 10);\n vertex(90, 90);\n vertex(10, 90);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(30, 30);\n vertex(30, 70);\n vertex(70, 70);\n vertex(70, 30);\n endContour();\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(-40, -40);\n vertex(40, -40);\n vertex(40, 40);\n vertex(-40, 40);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(-20, -20);\n vertex(-20, 20);\n vertex(20, 20);\n vertex(20, -20);\n endContour();\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "DELETE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 879,
+ "type": "DELETE",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Vertex"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/vertex.js",
- "line": 129,
- "description": "<p>Begins adding vertices to a custom shape.</p>\n<p>The <code>beginShape()</code> and <a href=\"#/p5/endShape\">endShape()</a> functions\nallow for creating custom shapes in 2D or 3D. <code>beginShape()</code> begins adding\nvertices to a custom shape and <a href=\"#/p5/endShape\">endShape()</a> stops\nadding them.</p>\n<p>The parameter, <code>kind</code>, sets the kind of shape to make. By default, any\nirregular polygon can be drawn. The available modes for kind are:</p>\n<ul>\n<li><code>POINTS</code> to draw a series of points.</li>\n<li><code>LINES</code> to draw a series of unconnected line segments.</li>\n<li><code>TRIANGLES</code> to draw a series of separate triangles.</li>\n<li><code>TRIANGLE_FAN</code> to draw a series of connected triangles sharing the first vertex in a fan-like fashion.</li>\n<li><code>TRIANGLE_STRIP</code> to draw a series of connected triangles in strip fashion.</li>\n<li><code>QUADS</code> to draw a series of separate quadrilaterals (quads).</li>\n<li><code>QUAD_STRIP</code> to draw quad strip using adjacent edges to form the next quad.</li>\n<li><code>TESS</code> to create a filling curve by explicit tessellation (WebGL only).</li>\n</ul>\n<p>After calling <code>beginShape()</code>, shapes can be built by calling\n<a href=\"#/p5/vertex\">vertex()</a>,\n<a href=\"#/p5/bezierVertex\">bezierVertex()</a>,\n<a href=\"#/p5/quadraticVertex\">quadraticVertex()</a>, and/or\n<a href=\"#/p5/curveVertex\">curveVertex()</a>. Calling\n<a href=\"#/p5/endShape\">endShape()</a> will stop adding vertices to the\nshape. Each shape will be outlined with the current stroke color and filled\nwith the current fill color.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>, and\n<a href=\"#/p5/scale\">scale()</a> don't work between <code>beginShape()</code> and\n<a href=\"#/p5/endShape\">endShape()</a>. It's also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or\n<a href=\"#/p5/rect\">rect()</a>, between <code>beginShape()</code> and\n<a href=\"#/p5/endShape\">endShape()</a>.</p>\n",
- "itemtype": "method",
- "name": "beginShape",
- "params": [
- {
- "name": "kind",
- "description": "<p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS.</p>\n",
- "type": "Constant",
- "optional": true
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Only draw the vertices (points).\n beginShape(POINTS);\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four black dots that form a square are drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Only draw lines between alternating pairs of vertices.\n beginShape(LINES);\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Two horizontal black lines on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Three black lines form a sideways U shape on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n // Connect the first and last vertices.\n endShape(CLOSE);\n\n describe('A black outline of a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of triangles.\n beginShape(TRIANGLES);\n\n // Left triangle.\n vertex(30, 75);\n vertex(40, 20);\n vertex(50, 75);\n\n // Right triangle.\n vertex(60, 20);\n vertex(70, 75);\n vertex(80, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Two white triangles drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of triangles.\n beginShape(TRIANGLE_STRIP);\n\n // Add vertices.\n vertex(30, 75);\n vertex(40, 20);\n vertex(50, 75);\n vertex(60, 20);\n vertex(70, 75);\n vertex(80, 20);\n vertex(90, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Five white triangles that are interleaved drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of triangles that share their first vertex.\n beginShape(TRIANGLE_FAN);\n\n // Add vertices.\n vertex(57.5, 50);\n vertex(57.5, 15);\n vertex(92, 50);\n vertex(57.5, 85);\n vertex(22, 50);\n vertex(57.5, 15);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four white triangles form a square are drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(QUADS);\n\n // Left rectangle.\n vertex(30, 20);\n vertex(30, 75);\n vertex(50, 75);\n vertex(50, 20);\n\n // Right rectangle.\n vertex(65, 20);\n vertex(65, 75);\n vertex(85, 75);\n vertex(85, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Two white rectangles drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(QUAD_STRIP);\n\n // Add vertices.\n vertex(30, 20);\n vertex(30, 75);\n vertex(50, 20);\n vertex(50, 75);\n vertex(65, 20);\n vertex(65, 75);\n vertex(85, 20);\n vertex(85, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Three white rectangles that share edges are drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(TESS);\n\n // Add the vertices.\n vertex(-30, -30, 0);\n vertex(30, -30, 0);\n vertex(30, -10, 0);\n vertex(-10, -10, 0);\n vertex(-10, 10, 0);\n vertex(30, 10, 0);\n vertex(30, 30, 0);\n vertex(-30, 30, 0);\n\n // Stop drawing the shape.\n // Connect the first and last vertices.\n endShape(CLOSE);\n\n describe('A blocky C shape drawn in white on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag with the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A blocky C shape drawn in red, blue, and green on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(TESS);\n\n // Add the vertices.\n fill('red');\n stroke('red');\n vertex(-30, -30, 0);\n vertex(30, -30, 0);\n vertex(30, -10, 0);\n fill('green');\n stroke('green');\n vertex(-10, -10, 0);\n vertex(-10, 10, 0);\n vertex(30, 10, 0);\n fill('blue');\n stroke('blue');\n vertex(30, 30, 0);\n vertex(-30, 30, 0);\n\n // Stop drawing the shape.\n // Connect the first and last vertices.\n endShape(CLOSE);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "DOWN_ARROW",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 886,
+ "type": "DOWN_ARROW",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Vertex"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/vertex.js",
- "line": 543,
- "description": "<p>Adds a Bézier curve segment to a custom shape.</p>\n<p><code>bezierVertex()</code> adds a curved segment to custom shapes. The Bézier curves\nit creates are defined like those made by the\n<a href=\"#/p5/bezier\">bezier()</a> function. <code>bezierVertex()</code> must be\ncalled between the\n<a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions. The curved segment uses\nthe previous vertex as the first anchor point, so there must be at least\none call to <a href=\"#/p5/vertex\">vertex()</a> before <code>bezierVertex()</code> can\nbe used.</p>\n<p>The first four parameters, <code>x2</code>, <code>y2</code>, <code>x3</code>, and <code>y3</code>, set the curve’s two\ncontrol points. The control points \"pull\" the curve towards them.</p>\n<p>The fifth and sixth parameters, <code>x4</code>, and <code>y4</code>, set the last anchor point.\nThe last anchor point is where the curve ends.</p>\n<p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of\n<code>bezierVertex()</code> has eight arguments because each point has x-, y-, and\nz-coordinates.</p>\n<p>Note: <code>bezierVertex()</code> won’t work when an argument is passed to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n",
- "itemtype": "method",
- "name": "bezierVertex",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n vertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(80, 0, 80, 75, 30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A black C curve on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(30, 20);\n point(30, 75);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(80, 0);\n point(80, 75);\n\n // Style the shape.\n noFill();\n stroke(0);\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n vertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(80, 0, 80, 75, 30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(30, 20, 80, 0);\n line(30, 75, 80, 75);\n\n describe(\n 'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the mouse near the red dot in the top-right corner\n// and drag to change the curve's shape.\n\nlet x2 = 80;\nlet y2 = 0;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(30, 20);\n point(30, 75);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x2, y2);\n point(80, 75);\n\n // Style the shape.\n noFill();\n stroke(0);\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n vertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(x2, y2, 80, 75, 30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(30, 20, x2, y2);\n line(30, 75, 80, 75);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x2, y2) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x2 = mouseX;\n y2 = mouseY;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n vertex(30, 20);\n\n // Add the Bézier vertices.\n bezierVertex(80, 0, 80, 75, 30, 75);\n bezierVertex(50, 80, 60, 25, 30, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A crescent moon shape drawn in white on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A crescent moon shape drawn in white on a blue background. When the user drags the mouse, the scene rotates and a second moon is revealed.');\n}\n\nfunction draw() {\n background('midnightblue');\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the moons.\n noStroke();\n fill('lemonchiffon');\n\n // Draw the first moon.\n beginShape();\n vertex(-20, -30, 0);\n bezierVertex(30, -50, 0, 30, 25, 0, -20, 25, 0);\n bezierVertex(0, 30, 0, 10, -25, 0, -20, -30, 0);\n endShape();\n\n // Draw the second moon.\n beginShape();\n vertex(-20, -30, -20);\n bezierVertex(30, -50, -20, 30, 25, -20, -20, 25, -20);\n bezierVertex(0, 30, -20, 10, -25, -20, -20, -30, -20);\n endShape();\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "ENTER",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 893,
+ "type": "ENTER",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Vertex",
- "overloads": [
- {
- "line": 543,
- "params": [
- {
- "name": "x2",
- "description": "<p>x-coordinate of the first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y2",
- "description": "<p>y-coordinate of the first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x3",
- "description": "<p>x-coordinate of the second control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y3",
- "description": "<p>y-coordinate of the second control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x4",
- "description": "<p>x-coordinate of the anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y4",
- "description": "<p>y-coordinate of the anchor point.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 792,
- "params": [
- {
- "name": "x2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z2",
- "description": "<p>z-coordinate of the first control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z3",
- "description": "<p>z-coordinate of the second control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x4",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y4",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z4",
- "description": "<p>z-coordinate of the anchor point.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/vertex.js",
- "line": 832,
- "description": "<p>Adds a spline curve segment to a custom shape.</p>\n<p><code>curveVertex()</code> adds a curved segment to custom shapes. The spline curves\nit creates are defined like those made by the\n<a href=\"#/p5/curve\">curve()</a> function. <code>curveVertex()</code> must be called\nbetween the <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions.</p>\n<p>Spline curves can form shapes and curves that slope gently. They’re like\ncables that are attached to a set of points. Splines are defined by two\nanchor points and two control points. <code>curveVertex()</code> must be called at\nleast four times between\n<a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> in order to draw a curve:</p>\n<pre><code class=\"language-js\">beginShape();\n\n// Add the first control point.\ncurveVertex(84, 91);\n\n// Add the anchor points to draw between.\ncurveVertex(68, 19);\ncurveVertex(21, 17);\n\n// Add the second control point.\ncurveVertex(32, 91);\n\nendShape();\n</code></pre>\n<p>The code snippet above would only draw the curve between the anchor points,\nsimilar to the <a href=\"#/p5/curve\">curve()</a> function. The segments\nbetween the control and anchor points can be drawn by calling\n<code>curveVertex()</code> with the coordinates of the control points:</p>\n<pre><code class=\"language-js\">beginShape();\n\n// Add the first control point and draw a segment to it.\ncurveVertex(84, 91);\ncurveVertex(84, 91);\n\n// Add the anchor points to draw between.\ncurveVertex(68, 19);\ncurveVertex(21, 17);\n\n// Add the second control point.\ncurveVertex(32, 91);\n\n// Uncomment the next line to draw the segment to the second control point.\n// curveVertex(32, 91);\n\nendShape();\n</code></pre>\n<p>The first two parameters, <code>x</code> and <code>y</code>, set the vertex’s location. For\nexample, calling <code>curveVertex(10, 10)</code> adds a point to the curve at\n<code>(10, 10)</code>.</p>\n<p>Spline curves can also be drawn in 3D using WebGL mode. The 3D version of\n<code>curveVertex()</code> has three arguments because each point has x-, y-, and\nz-coordinates. By default, the vertex’s z-coordinate is set to 0.</p>\n<p>Note: <code>curveVertex()</code> won’t work when an argument is passed to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n",
- "itemtype": "method",
- "name": "curveVertex",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point.\n curveVertex(32, 91);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point.\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(32, 91);\n point(84, 91);\n\n describe(\n 'A black curve drawn on a gray background. The curve has black dots at its ends. Two red dots appear near the bottom of the canvas.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n curveVertex(32, 91);\n curveVertex(32, 91);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point.\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(32, 91);\n point(84, 91);\n\n describe(\n 'A black curve drawn on a gray background. The curve passes through one red dot and two black dots. Another red dot appears near the bottom of the canvas.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n curveVertex(32, 91);\n curveVertex(32, 91);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point and draw a segment to it.\n curveVertex(84, 91);\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(32, 91);\n point(84, 91);\n\n describe(\n 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the mouse near the red dot in the bottom-left corner\n// and drag to change the curve's shape.\n\nlet x1 = 32;\nlet y1 = 91;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the shape.\n noFill();\n stroke(0);\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n curveVertex(x1, y1);\n curveVertex(x1, y1);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point and draw a segment to it.\n curveVertex(84, 91);\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x1, y1);\n point(84, 91);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x1, y1) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x1 = mouseX;\n y1 = mouseY;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n curveVertex(32, 91);\n curveVertex(32, 91);\n\n // Add the anchor points.\n curveVertex(21, 17);\n curveVertex(68, 19);\n\n // Add the second control point.\n curveVertex(84, 91);\n curveVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A ghost shape drawn in white on a gray background.');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "ESCAPE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 900,
+ "type": "ESCAPE",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Vertex",
- "overloads": [
- {
- "line": 832,
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate of the vertex</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the vertex</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 1160,
- "params": [
- {
- "name": "x",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "<p>z-coordinate of the vertex.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/vertex.js",
- "line": 1224,
- "description": "<p>Stops creating a hole within a flat shape.</p>\n<p>The <a href=\"#/p5/beginContour\">beginContour()</a> and <code>endContour()</code>\nfunctions allow for creating negative space within custom shapes that are\nflat. <a href=\"#/p5/beginContour\">beginContour()</a> begins adding vertices\nto a negative space and <code>endContour()</code> stops adding them.\n<a href=\"#/p5/beginContour\">beginContour()</a> and <code>endContour()</code> must be\ncalled between <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a>.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a>\ndon't work between <a href=\"#/p5/beginContour\">beginContour()</a> and\n<code>endContour()</code>. It's also not possible to use other shapes, such as\n<a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a>,\nbetween <a href=\"#/p5/beginContour\">beginContour()</a> and <code>endContour()</code>.</p>\n<p>Note: The vertices that define a negative space must \"wind\" in the opposite\ndirection from the outer shape. First, draw vertices for the outer shape\nclockwise order. Then, draw vertices for the negative space in\ncounter-clockwise order.</p>\n",
- "itemtype": "method",
- "name": "endContour",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(10, 10);\n vertex(90, 10);\n vertex(90, 90);\n vertex(10, 90);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(30, 30);\n vertex(30, 70);\n vertex(70, 70);\n vertex(70, 30);\n endContour();\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(-40, -40);\n vertex(40, -40);\n vertex(40, 40);\n vertex(-40, 40);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(-20, -20);\n vertex(-20, 20);\n vertex(20, 20);\n vertex(20, -20);\n endContour();\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "LEFT_ARROW",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 907,
+ "type": "LEFT_ARROW",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Vertex"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/vertex.js",
- "line": 1344,
- "description": "<p>Begins adding vertices to a custom shape.</p>\n<p>The <a href=\"#/p5/beginShape\">beginShape()</a> and <code>endShape()</code> functions\nallow for creating custom shapes in 2D or 3D.\n<a href=\"#/p5/beginShape\">beginShape()</a> begins adding vertices to a\ncustom shape and <code>endShape()</code> stops adding them.</p>\n<p>The first parameter, <code>mode</code>, is optional. By default, the first and last\nvertices of a shape aren't connected. If the constant <code>CLOSE</code> is passed, as\nin <code>endShape(CLOSE)</code>, then the first and last vertices will be connected.</p>\n<p>The second parameter, <code>count</code>, is also optional. In WebGL mode, it’s more\nefficient to draw many copies of the same shape using a technique called\n<a href=\"https://webglfundamentals.org/webgl/lessons/webgl-instanced-drawing.html\" target=\"_blank\">instancing</a>.\nThe <code>count</code> parameter tells WebGL mode how many copies to draw. For\nexample, calling <code>endShape(CLOSE, 400)</code> after drawing a custom shape will\nmake it efficient to draw 400 copies. This feature requires\n<a href=\"https://p5js.org/tutorials/intro-to-shaders/\" target=\"_blank\">writing a custom shader</a>.</p>\n<p>After calling <a href=\"#/p5/beginShape\">beginShape()</a>, shapes can be\nbuilt by calling <a href=\"#/p5/vertex\">vertex()</a>,\n<a href=\"#/p5/bezierVertex\">bezierVertex()</a>,\n<a href=\"#/p5/quadraticVertex\">quadraticVertex()</a>, and/or\n<a href=\"#/p5/curveVertex\">curveVertex()</a>. Calling\n<code>endShape()</code> will stop adding vertices to the\nshape. Each shape will be outlined with the current stroke color and filled\nwith the current fill color.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>, and\n<a href=\"#/p5/scale\">scale()</a> don't work between\n<a href=\"#/p5/beginShape\">beginShape()</a> and <code>endShape()</code>. It's also not\npossible to use other shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or\n<a href=\"#/p5/rect\">rect()</a>, between\n<a href=\"#/p5/beginShape\">beginShape()</a> and <code>endShape()</code>.</p>\n",
- "itemtype": "method",
- "name": "endShape",
- "params": [
- {
- "name": "mode",
- "description": "<p>use CLOSE to close the shape</p>\n",
- "type": "Constant",
- "optional": true
- },
- {
- "name": "count",
- "description": "<p>number of times you want to draw/instance the shape (for WebGL mode).</p>\n",
- "type": "Integer",
- "optional": true
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shapes.\n noFill();\n\n // Left triangle.\n beginShape();\n vertex(20, 20);\n vertex(45, 20);\n vertex(45, 80);\n endShape(CLOSE);\n\n // Right triangle.\n beginShape();\n vertex(50, 20);\n vertex(75, 20);\n vertex(75, 80);\n endShape();\n\n describe(\n 'Two sets of black lines drawn on a gray background. The three lines on the left form a right triangle. The two lines on the right form a right angle.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `#version 300 es\n\nprecision mediump float;\n\nin vec3 aPosition;\nflat out int instanceID;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nvoid main() {\n\n // Copy the instance ID to the fragment shader.\n instanceID = gl_InstanceID;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // gl_InstanceID represents a numeric value for each instance.\n // Using gl_InstanceID allows us to move each instance separately.\n // Here we move each instance horizontally by ID * 23.\n float xOffset = float(gl_InstanceID) * 23.0;\n\n // Apply the offset to the final position.\n gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -\n vec4(xOffset, 0.0, 0.0, 0.0));\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `#version 300 es\n\nprecision mediump float;\n\nout vec4 outColor;\nflat in int instanceID;\nuniform float numInstances;\n\nvoid main() {\n vec4 red = vec4(1.0, 0.0, 0.0, 1.0);\n vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);\n\n // Normalize the instance ID.\n float normId = float(instanceID) / numInstances;\n\n // Mix between two colors using the normalized instance ID.\n outColor = mix(red, blue, normId);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n background(220);\n\n // Compile and apply the p5.Shader.\n shader(myShader);\n\n // Set the numInstances uniform.\n myShader.setUniform('numInstances', 4);\n\n // Translate the origin to help align the drawing.\n translate(25, -10);\n\n // Style the shapes.\n noStroke();\n\n // Draw the shapes.\n beginShape();\n vertex(0, 0);\n vertex(0, 20);\n vertex(20, 20);\n vertex(20, 0);\n vertex(0, 0);\n endShape(CLOSE, 4);\n\n describe('A row of four squares. Their colors transition from purple on the left to red on the right');\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "OPTION",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 914,
+ "type": "OPTION",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Vertex"
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/vertex.js",
- "line": 1569,
- "description": "<p>Adds a quadratic Bézier curve segment to a custom shape.</p>\n<p><code>quadraticVertex()</code> adds a curved segment to custom shapes. The Bézier\ncurve segments it creates are similar to those made by the\n<a href=\"#/p5/bezierVertex\">bezierVertex()</a> function.\n<code>quadraticVertex()</code> must be called between the\n<a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions. The curved segment uses\nthe previous vertex as the first anchor point, so there must be at least\none call to <a href=\"#/p5/vertex\">vertex()</a> before <code>quadraticVertex()</code> can\nbe used.</p>\n<p>The first two parameters, <code>cx</code> and <code>cy</code>, set the curve’s control point.\nThe control point \"pulls\" the curve towards its.</p>\n<p>The last two parameters, <code>x3</code>, and <code>y3</code>, set the last anchor point. The\nlast anchor point is where the curve ends.</p>\n<p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of\n<code>bezierVertex()</code> has eight arguments because each point has x-, y-, and\nz-coordinates.</p>\n<p>Note: <code>quadraticVertex()</code> won’t work when an argument is passed to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n",
- "itemtype": "method",
- "name": "quadraticVertex",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the curve.\n noFill();\n\n // Draw the curve.\n beginShape();\n vertex(20, 20);\n quadraticVertex(80, 20, 50, 50);\n endShape();\n\n describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the curve.\n noFill();\n beginShape();\n vertex(20, 20);\n quadraticVertex(80, 20, 50, 50);\n endShape();\n\n // Draw red lines from the anchor points to the control point.\n stroke(255, 0, 0);\n line(20, 20, 80, 20);\n line(50, 50, 80, 20);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(20, 20);\n point(50, 50);\n\n // Draw the control point in red.\n stroke(255, 0, 0);\n point(80, 20);\n\n describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the mouse near the red dot in the top-right corner\n// and drag to change the curve's shape.\n\nlet x2 = 80;\nlet y2 = 20;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n\n // Draw the curve.\n beginShape();\n vertex(20, 20);\n quadraticVertex(x2, y2, 50, 50);\n endShape();\n\n // Draw red lines from the anchor points to the control point.\n stroke(255, 0, 0);\n line(20, 20, x2, y2);\n line(50, 50, x2, y2);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(20, 20);\n point(50, 50);\n\n // Draw the control point in red.\n stroke(255, 0, 0);\n point(x2, y2);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x2, y2) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x2 = mouseX;\n y2 = mouseY;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the curved segments.\n vertex(20, 20);\n quadraticVertex(80, 20, 50, 50);\n quadraticVertex(20, 80, 80, 80);\n\n // Add the straight segments.\n vertex(80, 10);\n vertex(20, 10);\n vertex(20, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A white puzzle piece drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white puzzle piece on a dark gray background. When the user clicks and drags the scene, the outline of a second puzzle piece is revealed.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the first puzzle piece.\n noStroke();\n fill(255);\n\n // Draw the first puzzle piece.\n beginShape();\n vertex(-30, -30, 0);\n quadraticVertex(30, -30, 0, 0, 0, 0);\n quadraticVertex(-30, 30, 0, 30, 30, 0);\n vertex(30, -40, 0);\n vertex(-30, -40, 0);\n vertex(-30, -30, 0);\n endShape();\n\n // Style the second puzzle piece.\n stroke(255);\n noFill();\n\n // Draw the second puzzle piece.\n beginShape();\n vertex(-30, -30, -20);\n quadraticVertex(30, -30, -20, 0, 0, -20);\n quadraticVertex(-30, 30, -20, 30, 30, -20);\n vertex(30, -40, -20);\n vertex(-30, -40, -20);\n vertex(-30, -30, -20);\n endShape();\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "RETURN",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 921,
+ "type": "RETURN",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Vertex",
- "overloads": [
- {
- "line": 1569,
- "params": [
- {
- "name": "cx",
- "description": "<p>x-coordinate of the control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "cy",
- "description": "<p>y-coordinate of the control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x3",
- "description": "<p>x-coordinate of the anchor point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y3",
- "description": "<p>y-coordinate of the anchor point.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 1801,
- "params": [
- {
- "name": "cx",
- "description": "",
- "type": "Number"
- },
- {
- "name": "cy",
- "description": "",
- "type": "Number"
- },
- {
- "name": "cz",
- "description": "<p>z-coordinate of the control point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z3",
- "description": "<p>z-coordinate of the anchor point.</p>\n",
- "type": "Number"
- }
- ]
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/vertex.js",
- "line": 1850,
- "description": "<p>Adds a vertex to a custom shape.</p>\n<p><code>vertex()</code> sets the coordinates of vertices drawn between the\n<a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions.</p>\n<p>The first two parameters, <code>x</code> and <code>y</code>, set the x- and y-coordinates of the\nvertex.</p>\n<p>The third parameter, <code>z</code>, is optional. It sets the z-coordinate of the\nvertex in WebGL mode. By default, <code>z</code> is 0.</p>\n<p>The fourth and fifth parameters, <code>u</code> and <code>v</code>, are also optional. They set\nthe u- and v-coordinates for the vertex’s texture when used with\n<a href=\"#/p5/endShape\">endShape()</a>. By default, <code>u</code> and <code>v</code> are both 0.</p>\n",
- "itemtype": "method",
- "name": "vertex",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n strokeWeight(3);\n\n // Start drawing the shape.\n // Only draw the vertices.\n beginShape(POINTS);\n\n // Add the vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four black dots that form a square are drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0);\n vertex(35, -30, 0);\n vertex(35, 25, 0);\n vertex(-20, 25, 0);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around slowly on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0);\n vertex(35, -30, 0);\n vertex(35, 25, 0);\n vertex(-20, 25, 0);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load an image to apply as a texture.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A photograph of a ceiling rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Style the shape.\n noStroke();\n\n // Apply the texture.\n texture(img);\n textureMode(NORMAL);\n\n // Start drawing the shape\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0, 0, 0);\n vertex(35, -30, 0, 1, 0);\n vertex(35, 25, 0, 1, 1);\n vertex(-20, 25, 0, 0, 1);\n\n // Stop drawing the shape.\n endShape();\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "RIGHT_ARROW",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 928,
+ "type": "RIGHT_ARROW",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Vertex",
- "overloads": [
- {
- "line": 1850,
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate of the vertex.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the vertex.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 2021,
- "params": [
- {
- "name": "x",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "<p>z-coordinate of the vertex. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 2028,
- "params": [
- {
- "name": "x",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "",
- "type": "Number",
- "optional": true
- },
- {
- "name": "u",
- "description": "<p>u-coordinate of the vertex's texture. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "v",
- "description": "<p>v-coordinate of the vertex's texture. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/shape/vertex.js",
- "line": 2066,
- "description": "<p>Sets the normal vector for vertices in a custom 3D shape.</p>\n<p>3D shapes created with <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> are made by connecting sets of\npoints called vertices. Each vertex added with\n<a href=\"#/p5/vertex\">vertex()</a> has a normal vector that points away\nfrom it. The normal vector controls how light reflects off the shape.</p>\n<p><code>normal()</code> can be called two ways with different parameters to define the\nnormal vector's components.</p>\n<p>The first way to call <code>normal()</code> has three parameters, <code>x</code>, <code>y</code>, and <code>z</code>.\nIf <code>Number</code>s are passed, as in <code>normal(1, 2, 3)</code>, they set the x-, y-, and\nz-components of the normal vector.</p>\n<p>The second way to call <code>normal()</code> has one parameter, <code>vector</code>. If a\n<a href=\"#/p5.Vector\">p5.Vector</a> object is passed, as in\n<code>normal(myVector)</code>, its components will be used to set the normal vector.</p>\n<p><code>normal()</code> changes the normal vector of vertices added to a custom shape\nwith <a href=\"#/p5/vertex\">vertex()</a>. <code>normal()</code> must be called between\nthe <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions, just like\n<a href=\"#/p5/vertex\">vertex()</a>. The normal vector set by calling\n<code>normal()</code> will affect all following vertices until <code>normal()</code> is called\nagain:</p>\n<pre><code class=\"language-js\">beginShape();\n\n// Set the vertex normal.\nnormal(-0.4, -0.4, 0.8);\n\n// Add a vertex.\nvertex(-30, -30, 0);\n\n// Set the vertex normal.\nnormal(0, 0, 1);\n\n// Add vertices.\nvertex(30, -30, 0);\nvertex(30, 30, 0);\n\n// Set the vertex normal.\nnormal(0.4, -0.4, 0.8);\n\n// Add a vertex.\nvertex(-30, 30, 0);\n\nendShape();\n</code></pre>\n",
- "itemtype": "method",
- "name": "normal",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the shape.\n normalMaterial();\n noStroke();\n\n // Draw the shape.\n beginShape();\n vertex(-30, -30, 0);\n vertex(30, -30, 0);\n vertex(30, 30, 0);\n vertex(-30, 30, 0);\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the shape.\n normalMaterial();\n noStroke();\n\n // Draw the shape.\n // Use normal() to set vertex normals.\n beginShape();\n normal(-0.4, -0.4, 0.8);\n vertex(-30, -30, 0);\n\n normal(0, 0, 1);\n vertex(30, -30, 0);\n vertex(30, 30, 0);\n\n normal(0.4, -0.4, 0.8);\n vertex(-30, 30, 0);\n endShape();\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the shape.\n normalMaterial();\n noStroke();\n\n // Create p5.Vector objects.\n let n1 = createVector(-0.4, -0.4, 0.8);\n let n2 = createVector(0, 0, 1);\n let n3 = createVector(0.4, -0.4, 0.8);\n\n // Draw the shape.\n // Use normal() to set vertex normals.\n beginShape();\n normal(n1);\n vertex(-30, -30, 0);\n\n normal(n2);\n vertex(30, -30, 0);\n vertex(30, 30, 0);\n\n normal(n3);\n vertex(-30, 30, 0);\n endShape();\n}\n</code>\n</div>"
- ],
+ "itemtype": "property",
+ "name": "SHIFT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 935,
+ "type": "SHIFT",
+ "module": "Constants",
+ "submodule": "Constants",
"class": "p5",
- "module": "Shape",
- "submodule": "Vertex",
- "overloads": [
- {
- "line": 2066,
- "params": [
- {
- "name": "vector",
- "description": "<p>vertex normal as a <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n",
- "type": "p5.Vector"
- }
- ],
- "chainable": 1
- },
- {
- "line": 2241,
- "params": [
- {
- "name": "x",
- "description": "<p>x-component of the vertex normal.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-component of the vertex normal.</p>\n",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "<p>z-component of the vertex normal.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- }
- ]
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 9,
- "description": "<p>Version of this p5.js.</p>\n",
"itemtype": "property",
- "name": "VERSION",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "TAB",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 942,
+ "type": "TAB",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 18,
- "description": "<p>The default, two-dimensional renderer.</p>\n",
"itemtype": "property",
- "name": "P2D",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "UP_ARROW",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 949,
+ "type": "UP_ARROW",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 24,
- "description": "<p>One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders.</p>\n<p><code>WEBGL</code> differs from the default <a href=\"/reference/p5/P2D\"><code>P2D</code></a> renderer in the following ways:</p>\n<ul>\n<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/tutorials/coordinates-and-transformations/\">the tutorial page about coordinates and transformations</a>.</li>\n<li><strong>3D Shapes</strong> - <code>WEBGL</code> mode can be used to draw 3-dimensional shapes like <a href=\"#/p5/box\">box()</a>, <a href=\"#/p5/sphere\">sphere()</a>, <a href=\"#/p5/cone\">cone()</a>, and <a href=\"https://p5js.org/reference/#3D%20Primitives\">more</a>. See <a href=\"https://p5js.org/tutorials/custom-geometry/\">the tutorial page about custom geometry</a> to make more complex objects.</li>\n<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>\n<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>\n<li><strong>Materials and Lighting</strong> - <code>WEBGL</code> offers different types of lights like <a href=\"#/p5/ambientLight\">ambientLight()</a> to place around a scene. Materials like <a href=\"#/p5/specularMaterial\">specularMaterial()</a> reflect the lighting to convey shape and depth. See <a href=\"https://p5js.org/tutorials/lights-camera-materials/\">the tutorial page for styling and appearance</a> to experiment with different combinations.</li>\n<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/tutorials/lights-camera-materials#camera-and-view\">the tutorial page section about cameras</a> for an explanation of camera controls.</li>\n<li><strong>Text</strong> - <code>WEBGL</code> requires opentype/truetype font files to be preloaded using <a href=\"#/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>\n<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/tutorials/intro-to-shaders/\">introduction to shaders</a> to get started with shaders in p5.js.</li>\n<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>\n</ul>\n<p>To learn more about WEBGL mode, check out <a href=\"https://p5js.org/tutorials/#webgl\">all the interactive WEBGL tutorials</a> in the \"Tutorials\" 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>\n",
"itemtype": "property",
- "name": "WEBGL",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "BLEND",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 957,
+ "type": "BLEND",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 45,
- "description": "<p>One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),\nwhich can be used to determine what capabilities the rendering environment\nhas.</p>\n",
"itemtype": "property",
- "name": "WEBGL2",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "REMOVE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 963,
+ "type": "REMOVE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 55,
"itemtype": "property",
- "name": "ARROW",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "ADD",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 969,
+ "type": "ADD",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 60,
"itemtype": "property",
- "name": "CROSS",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "DARKEST",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 975,
+ "type": "DARKEST",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 65,
"itemtype": "property",
- "name": "HAND",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "LIGHTEST",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 981,
+ "type": "LIGHTEST",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 70,
"itemtype": "property",
- "name": "MOVE",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "DIFFERENCE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 987,
+ "type": "DIFFERENCE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 75,
"itemtype": "property",
- "name": "TEXT",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "SUBTRACT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 993,
+ "type": "SUBTRACT",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 80,
"itemtype": "property",
- "name": "WAIT",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "EXCLUSION",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 999,
+ "type": "EXCLUSION",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 88,
- "description": "<p>A <code>Number</code> constant that's approximately 1.5708.</p>\n<p><code>HALF_PI</code> is half the value of the mathematical constant π. It's useful for\nmany tasks that involve rotation and oscillation. For example, calling\n<code>rotate(HALF_PI)</code> rotates the coordinate system <code>HALF_PI</code> radians, which is\na quarter turn (90˚).</p>\n<p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians equals 180˚, <code>HALF_PI</code>\nradians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>\n",
"itemtype": "property",
- "name": "HALF_PI",
- "type": "Number",
- "final": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to HALF_PI.\n arc(50, 50, 80, 80, 0, HALF_PI);\n\n describe('The bottom-right quarter of a circle drawn in white on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a quarter turn.\n rotate(HALF_PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('Two black lines on a gray background. One line extends from the center to the right. The other line extends from the center to the bottom.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + HALF_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n</code>\n</div>"
- ],
- "class": "p5",
+ "name": "MULTIPLY",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1005,
+ "type": "MULTIPLY",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 178,
- "description": "<p>A <code>Number</code> constant that's approximately 3.1416.</p>\n<p><code>PI</code> is the mathematical constant π. It's useful for many tasks that\ninvolve rotation and oscillation. For example, calling <code>rotate(PI)</code> rotates\nthe coordinate system <code>PI</code> radians, which is a half turn (180˚).</p>\n<p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians equals 180˚, <code>HALF_PI</code>\nradians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>\n",
"itemtype": "property",
- "name": "PI",
- "type": "Number",
- "final": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to PI.\n arc(50, 50, 80, 80, 0, PI);\n\n describe('The bottom half of a circle drawn in white on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a half turn.\n rotate(PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('A horizontal black line on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The circles drift apart, then meet in the middle, over and over again.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n</code>\n</div>"
- ],
- "class": "p5",
+ "name": "SCREEN",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1011,
+ "type": "SCREEN",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 267,
- "description": "<p>A <code>Number</code> constant that's approximately 0.7854.</p>\n<p><code>QUARTER_PI</code> is one-fourth the value of the mathematical constant π. It's\nuseful for many tasks that involve rotation and oscillation. For example,\ncalling <code>rotate(QUARTER_PI)</code> rotates the coordinate system <code>QUARTER_PI</code>\nradians, which is an eighth of a turn (45˚).</p>\n<p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians equals 180˚, <code>HALF_PI</code>\nradians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>\n",
"itemtype": "property",
- "name": "QUARTER_PI",
- "type": "Number",
- "final": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to QUARTER_PI.\n arc(50, 50, 80, 80, 0, QUARTER_PI);\n\n describe('A one-eighth slice of a circle drawn in white on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate an eighth turn.\n rotate(QUARTER_PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('Two black lines that form a \"V\" opening towards the bottom-right corner of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + QUARTER_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n</code>\n</div>"
- ],
- "class": "p5",
+ "name": "REPLACE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1017,
+ "type": "REPLACE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 357,
- "description": "<p>A <code>Number</code> constant that's approximately 6.2382.</p>\n<p><code>TAU</code> is twice the value of the mathematical constant π. It's useful for\nmany tasks that involve rotation and oscillation. For example, calling\n<code>rotate(TAU)</code> rotates the coordinate system <code>TAU</code> radians, which is one\nfull turn (360˚). <code>TAU</code> and <code>TWO_PI</code> are equal.</p>\n<p>Note: <code>TAU</code> radians equals 360˚, <code>PI</code> radians equals 180˚, <code>HALF_PI</code>\nradians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>\n",
"itemtype": "property",
- "name": "TAU",
- "type": "Number",
- "final": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to TAU.\n arc(50, 50, 80, 80, 0, TAU);\n\n describe('A white circle drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a full turn.\n rotate(TAU);\n\n // Style the second line.\n strokeWeight(5);\n\n // Draw the same line, shorter and rotated.\n line(0, 0, 20, 0);\n\n describe(\n 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle with a blue center oscillates from left to right on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + TAU);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator, smaller.\n fill(0, 0, 255);\n circle(x2, 0, 10);\n}\n</code>\n</div>"
- ],
- "class": "p5",
+ "name": "OVERLAY",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1023,
+ "type": "OVERLAY",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 452,
- "description": "<p>A <code>Number</code> constant that's approximately 6.2382.</p>\n<p><code>TWO_PI</code> is twice the value of the mathematical constant π. It's useful for\nmany tasks that involve rotation and oscillation. For example, calling\n<code>rotate(TWO_PI)</code> rotates the coordinate system <code>TWO_PI</code> radians, which is\none full turn (360˚). <code>TWO_PI</code> and <code>TAU</code> are equal.</p>\n<p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians equals 180˚, <code>HALF_PI</code>\nradians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>\n",
"itemtype": "property",
- "name": "TWO_PI",
- "type": "Number",
- "final": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to TWO_PI.\n arc(50, 50, 80, 80, 0, TWO_PI);\n\n describe('A white circle drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a full turn.\n rotate(TWO_PI);\n\n // Style the second line.\n strokeWeight(5);\n\n // Draw the same line, shorter and rotated.\n line(0, 0, 20, 0);\n\n describe(\n 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle with a blue center oscillates from left to right on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + TWO_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator, smaller.\n fill(0, 0, 255);\n circle(x2, 0, 10);\n}\n</code>\n</div>"
- ],
- "class": "p5",
+ "name": "HARD_LIGHT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1029,
+ "type": "HARD_LIGHT",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 547,
- "description": "<p>A <code>String</code> constant that's used to set the\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, functions such as <a href=\"#/p5/rotate\">rotate()</a> and\n<a href=\"#/p5/sin\">sin()</a> expect angles measured in units of radians.\nCalling <code>angleMode(DEGREES)</code> ensures that angles are measured in units of\ndegrees.</p>\n<p>Note: <code>TWO_PI</code> radians equals 360˚.</p>\n",
"itemtype": "property",
- "name": "DEGREES",
- "type": "String",
- "final": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a red arc from 0 to HALF_PI radians.\n fill(255, 0, 0);\n arc(50, 50, 80, 80, 0, HALF_PI);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw a blue arc from 90˚ to 180˚.\n fill(0, 0, 255);\n arc(50, 50, 80, 80, 90, 180);\n\n describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
+ "name": "SOFT_LIGHT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1035,
+ "type": "SOFT_LIGHT",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 587,
- "description": "<p>A <code>String</code> constant that's used to set the\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, functions such as <a href=\"#/p5/rotate\">rotate()</a> and\n<a href=\"#/p5/sin\">sin()</a> expect angles measured in units of radians.\nCalling <code>angleMode(RADIANS)</code> ensures that angles are measured in units of\nradians. Doing so can be useful if the\n<a href=\"#/p5/angleMode\">angleMode()</a> has been set to\n<a href=\"#/p5/DEGREES\">DEGREES</a>.</p>\n<p>Note: <code>TWO_PI</code> radians equals 360˚.</p>\n",
"itemtype": "property",
- "name": "RADIANS",
- "type": "String",
- "final": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw a red arc from 0˚ to 90˚.\n fill(255, 0, 0);\n arc(50, 50, 80, 80, 0, 90);\n\n // Use radians.\n angleMode(RADIANS);\n\n // Draw a blue arc from HALF_PI to PI.\n fill(0, 0, 255);\n arc(50, 50, 80, 80, HALF_PI, PI);\n\n describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
+ "name": "DODGE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1041,
+ "type": "DODGE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 635,
"itemtype": "property",
- "name": "CORNER",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "BURN",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1047,
+ "type": "BURN",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 640,
"itemtype": "property",
- "name": "CORNERS",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "THRESHOLD",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1055,
+ "type": "THRESHOLD",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 645,
"itemtype": "property",
- "name": "RADIUS",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "GRAY",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1061,
+ "type": "GRAY",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 650,
"itemtype": "property",
- "name": "RIGHT",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "OPAQUE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1067,
+ "type": "OPAQUE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 655,
"itemtype": "property",
- "name": "LEFT",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "INVERT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1073,
+ "type": "INVERT",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 660,
"itemtype": "property",
- "name": "CENTER",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "POSTERIZE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1079,
+ "type": "POSTERIZE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 665,
"itemtype": "property",
- "name": "TOP",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "DILATE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1085,
+ "type": "DILATE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 670,
"itemtype": "property",
- "name": "BOTTOM",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "ERODE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1091,
+ "type": "ERODE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 675,
"itemtype": "property",
- "name": "BASELINE",
- "type": "String",
- "final": 1,
- "default": "alphabetic",
- "class": "p5",
+ "name": "BLUR",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1097,
+ "type": "BLUR",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 681,
"itemtype": "property",
- "name": "POINTS",
- "type": "Number",
- "final": 1,
- "default": "0x0000",
- "class": "p5",
+ "name": "NORMAL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1105,
+ "type": "NORMAL",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 687,
"itemtype": "property",
- "name": "LINES",
- "type": "Number",
- "final": 1,
- "default": "0x0001",
- "class": "p5",
+ "name": "ITALIC",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1111,
+ "type": "ITALIC",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 693,
"itemtype": "property",
- "name": "LINE_STRIP",
- "type": "Number",
- "final": 1,
- "default": "0x0003",
- "class": "p5",
+ "name": "BOLD",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1117,
+ "type": "BOLD",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 699,
"itemtype": "property",
- "name": "LINE_LOOP",
- "type": "Number",
- "final": 1,
- "default": "0x0002",
- "class": "p5",
+ "name": "BOLDITALIC",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1123,
+ "type": "BOLDITALIC",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 705,
"itemtype": "property",
- "name": "TRIANGLES",
- "type": "Number",
- "final": 1,
- "default": "0x0004",
- "class": "p5",
+ "name": "CHAR",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1129,
+ "type": "CHAR",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 711,
"itemtype": "property",
- "name": "TRIANGLE_FAN",
- "type": "Number",
- "final": 1,
- "default": "0x0006",
- "class": "p5",
+ "name": "WORD",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1135,
+ "type": "WORD",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 717,
"itemtype": "property",
- "name": "TRIANGLE_STRIP",
- "type": "Number",
- "final": 1,
- "default": "0x0005",
- "class": "p5",
+ "name": "LINEAR",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1148,
+ "type": "LINEAR",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 723,
"itemtype": "property",
- "name": "QUADS",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "QUADRATIC",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1154,
+ "type": "QUADRATIC",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 728,
"itemtype": "property",
- "name": "QUAD_STRIP",
- "type": "String",
- "final": 1,
- "default": "quad_strip",
- "class": "p5",
+ "name": "BEZIER",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1160,
+ "type": "BEZIER",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 734,
"itemtype": "property",
- "name": "TESS",
- "type": "String",
- "final": 1,
- "default": "tess",
- "class": "p5",
+ "name": "CURVE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1166,
+ "type": "CURVE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 740,
"itemtype": "property",
- "name": "CLOSE",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "STROKE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1174,
+ "type": "STROKE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 745,
"itemtype": "property",
- "name": "OPEN",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "FILL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1180,
+ "type": "FILL",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 750,
"itemtype": "property",
- "name": "CHORD",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "TEXTURE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1186,
+ "type": "TEXTURE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 755,
"itemtype": "property",
- "name": "PIE",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "IMMEDIATE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1192,
+ "type": "IMMEDIATE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 760,
"itemtype": "property",
- "name": "PROJECT",
- "type": "String",
- "final": 1,
- "default": "square",
- "class": "p5",
+ "name": "IMAGE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1201,
+ "type": "IMAGE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 766,
"itemtype": "property",
- "name": "SQUARE",
- "type": "String",
- "final": 1,
- "default": "butt",
- "class": "p5",
+ "name": "NEAREST",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1210,
+ "type": "NEAREST",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 772,
"itemtype": "property",
- "name": "ROUND",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "REPEAT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1216,
+ "type": "REPEAT",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 777,
"itemtype": "property",
- "name": "BEVEL",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "CLAMP",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1222,
+ "type": "CLAMP",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 782,
"itemtype": "property",
- "name": "MITER",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "MIRROR",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1228,
+ "type": "MIRROR",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 789,
"itemtype": "property",
- "name": "RGB",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "FLAT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1236,
+ "type": "FLAT",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 794,
- "description": "<p>HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\n<a href=\"https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html\">HSB</a>.</p>\n",
"itemtype": "property",
- "name": "HSB",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "SMOOTH",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1242,
+ "type": "SMOOTH",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 803,
"itemtype": "property",
- "name": "HSL",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "LANDSCAPE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1250,
+ "type": "LANDSCAPE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 810,
- "description": "<p>AUTO allows us to automatically set the width or height of an element (but not both),\nbased on the current height and width of the element. Only one parameter can\nbe passed to the <a href=\"/reference/p5.Element/size\">size</a> function as AUTO, at a time.</p>\n",
"itemtype": "property",
- "name": "AUTO",
- "type": "String",
- "final": 1,
- "class": "p5",
+ "name": "PORTRAIT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1256,
+ "type": "PORTRAIT",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 820,
"itemtype": "property",
- "name": "ALT",
- "type": "Number",
- "final": 1,
- "class": "p5",
+ "name": "GRID",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1267,
+ "type": "GRID",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 826,
"itemtype": "property",
- "name": "BACKSPACE",
- "type": "Number",
- "final": 1,
- "class": "p5",
+ "name": "AXES",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1274,
+ "type": "AXES",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 831,
"itemtype": "property",
- "name": "CONTROL",
- "type": "Number",
- "final": 1,
- "class": "p5",
+ "name": "LABEL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1281,
+ "type": "LABEL",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 836,
"itemtype": "property",
- "name": "DELETE",
- "type": "Number",
- "final": 1,
- "class": "p5",
+ "name": "FALLBACK",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1287,
+ "type": "FALLBACK",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 841,
"itemtype": "property",
- "name": "DOWN_ARROW",
- "type": "Number",
- "final": 1,
- "class": "p5",
+ "name": "CONTAIN",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1294,
+ "type": "CONTAIN",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 846,
"itemtype": "property",
- "name": "ENTER",
- "type": "Number",
- "final": 1,
- "class": "p5",
+ "name": "COVER",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1301,
+ "type": "COVER",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 851,
"itemtype": "property",
- "name": "ESCAPE",
- "type": "Number",
- "final": 1,
- "class": "p5",
+ "name": "UNSIGNED_BYTE",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1308,
+ "type": "UNSIGNED_BYTE",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 856,
"itemtype": "property",
- "name": "LEFT_ARROW",
- "type": "Number",
- "final": 1,
- "class": "p5",
+ "name": "UNSIGNED_INT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1315,
+ "type": "UNSIGNED_INT",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 861,
"itemtype": "property",
- "name": "OPTION",
- "type": "Number",
- "final": 1,
- "class": "p5",
+ "name": "FLOAT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1322,
+ "type": "FLOAT",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 866,
"itemtype": "property",
- "name": "RETURN",
- "type": "Number",
- "final": 1,
- "class": "p5",
+ "name": "HALF_FLOAT",
+ "file": "src/scripts/parsers/in/p5.js/src/core/constants.js",
+ "line": 1329,
+ "type": "HALF_FLOAT",
"module": "Constants",
- "submodule": "Constants"
+ "submodule": "Constants",
+ "class": "p5",
+ "example": [],
+ "description": ""
},
{
- "file": "src/core/constants.js",
- "line": 871,
"itemtype": "property",
- "name": "RIGHT_ARROW",
- "type": "Number",
- "final": 1,
+ "name": "frameCount",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 123,
+ "type": "Integer",
+ "module": "Environment",
+ "submodule": "Environment",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the value of\n // frameCount.\n textSize(30);\n textAlign(CENTER, CENTER);\n text(frameCount, 50, 50);\n\n describe('The number 0 written in black in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the frameRate to 30.\n frameRate(30);\n\n textSize(30);\n textAlign(CENTER, CENTER);\n\n describe('A number written in black in the middle of a gray square. Its value increases rapidly.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the value of\n // frameCount.\n text(frameCount, 50, 50);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> variable that tracks the number of frames drawn since the sketch\nstarted.</p>\n<p><code>frameCount</code>'s value is 0 inside <a href=\"#/p5/setup\">setup()</a>. It\nincrements by 1 each time the code in <a href=\"#/p5/draw\">draw()</a>\nfinishes executing.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 876,
"itemtype": "property",
- "name": "SHIFT",
- "type": "Number",
- "final": 1,
+ "name": "deltaTime",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 173,
+ "type": "Integer",
+ "module": "Environment",
+ "submodule": "Environment",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nlet x = 0;\nlet speed = 0.05;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the frameRate to 30.\n frameRate(30);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Use deltaTime to calculate\n // a change in position.\n let deltaX = speed * deltaTime;\n\n // Update the x variable.\n x += deltaX;\n\n // Reset x to 0 if it's\n // greater than 100.\n if (x > 100) {\n x = 0;\n }\n\n // Use x to set the circle's\n // position.\n circle(x, 50, 20);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> variable that tracks the number of milliseconds it took to draw\nthe last frame.</p>\n<p><code>deltaTime</code> contains the amount of time it took\n<a href=\"#/p5/draw\">draw()</a> to execute during the previous frame. It's\nuseful for simulating physics.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 881,
"itemtype": "property",
- "name": "TAB",
- "type": "Number",
- "final": 1,
+ "name": "focused",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 208,
+ "type": "Boolean",
+ "module": "Environment",
+ "submodule": "Environment",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// Open this example in two separate browser\n// windows placed side-by-side to demonstrate.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square changes color from green to red when the browser window is out of focus.');\n}\n\nfunction draw() {\n // Change the background color\n // when the browser window\n // goes in/out of focus.\n if (focused === true) {\n background(0, 255, 0);\n } else {\n background(255, 0, 0);\n }\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Boolean</code> variable that's <code>true</code> if the browser is focused and <code>false</code> if\nnot.</p>\n<p>Note: The browser window can only receive input if it's focused.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 886,
"itemtype": "property",
- "name": "UP_ARROW",
- "type": "Number",
- "final": 1,
+ "name": "webglVersion",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 585,
+ "type": "WEBGL|WEBGL2",
+ "module": "Environment",
+ "submodule": "Environment",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n background(200);\n\n // Display the current WebGL version.\n text(webglVersion, 42, 54);\n\n describe('The text \"p2d\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet font;\n\nasync function setup() {\n // Load a font to use.\n font = await loadFont('assets/inconsolata.otf');\n\n // Create a canvas using WEBGL mode.\n createCanvas(100, 50, WEBGL);\n background(200);\n\n // Display the current WebGL version.\n fill(0);\n textFont(font);\n text(webglVersion, -15, 5);\n\n describe('The text \"webgl2\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet font;\n\nasync function setup() {\n // Load a font to use.\n font = await loadFont('assets/inconsolata.otf');\n\n // Create a canvas using WEBGL mode.\n createCanvas(100, 50, WEBGL);\n\n // Set WebGL to version 1.\n setAttributes({ version: 1 });\n\n background(200);\n\n // Display the current WebGL version.\n fill(0);\n textFont(font);\n text(webglVersion, -14, 5);\n\n describe('The text \"webgl\" written in black on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>String</code> variable with the WebGL version in use.</p>\n<p><code>webglVersion</code>'s value equals one of the following string constants:</p>\n<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\nWebGL version.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 893,
"itemtype": "property",
- "name": "BLEND",
- "type": "String",
- "final": 1,
- "default": "source-over",
+ "name": "displayWidth",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 616,
+ "type": "Number",
+ "module": "Environment",
+ "submodule": "Environment",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Set the canvas' width and height\n // using the display's dimensions.\n createCanvas(displayWidth, displayHeight);\n\n background(200);\n\n describe('A gray canvas that is the same size as the display.');\n}\n</code>\n</div>"
+ ],
+ "alt": "This example does not render anything.",
+ "description": "<p>A <code>Number</code> variable that stores the width of the screen display.</p>\n<p><code>displayWidth</code> is useful for running full-screen programs. Its value\ndepends on the current <a href=\"#/p5/pixelDensity\">pixelDensity()</a>.</p>\n<p>Note: The actual screen width can be computed as\n<code>displayWidth * pixelDensity()</code>.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 899,
"itemtype": "property",
- "name": "REMOVE",
- "type": "String",
- "final": 1,
- "default": "destination-out",
+ "name": "displayHeight",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 647,
+ "type": "Number",
+ "module": "Environment",
+ "submodule": "Environment",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Set the canvas' width and height\n // using the display's dimensions.\n createCanvas(displayWidth, displayHeight);\n\n background(200);\n\n describe('A gray canvas that is the same size as the display.');\n}\n</code>\n</div>"
+ ],
+ "alt": "This example does not render anything.",
+ "description": "<p>A <code>Number</code> variable that stores the height of the screen display.</p>\n<p><code>displayHeight</code> is useful for running full-screen programs. Its value\ndepends on the current <a href=\"#/p5/pixelDensity\">pixelDensity()</a>.</p>\n<p>Note: The actual screen height can be computed as\n<code>displayHeight * pixelDensity()</code>.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 905,
"itemtype": "property",
- "name": "ADD",
- "type": "String",
- "final": 1,
- "default": "lighter",
+ "name": "windowWidth",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 675,
+ "type": "Number",
+ "module": "Environment",
+ "submodule": "Environment",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Set the canvas' width and height\n // using the browser's dimensions.\n createCanvas(windowWidth, windowHeight);\n\n background(200);\n\n describe('A gray canvas that takes up the entire browser window.');\n}\n</code>\n</div>"
+ ],
+ "alt": "This example does not render anything.",
+ "description": "<p>A <code>Number</code> variable that stores the width of the browser's viewport.</p>\n<p>The <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport\" target=\"_blank\">layout viewport</a>\nis the area within the browser that's available for drawing.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 913,
"itemtype": "property",
- "name": "DARKEST",
- "type": "String",
- "final": 1,
+ "name": "windowHeight",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 703,
+ "type": "Number",
+ "module": "Environment",
+ "submodule": "Environment",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Set the canvas' width and height\n // using the browser's dimensions.\n createCanvas(windowWidth, windowHeight);\n\n background(200);\n\n describe('A gray canvas that takes up the entire browser window.');\n}\n</code>\n</div>"
+ ],
+ "alt": "This example does not render anything.",
+ "description": "<p>A <code>Number</code> variable that stores the height of the browser's viewport.</p>\n<p>The <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport\" target=\"_blank\">layout viewport</a>\nis the area within the browser that's available for drawing.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 918,
"itemtype": "property",
- "name": "LIGHTEST",
- "type": "String",
- "final": 1,
- "default": "lighten",
+ "name": "deviceOrientation",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 19,
+ "type": "LANDSCAPE|PORTRAIT",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [],
+ "description": "The system variable deviceOrientation always contains the orientation of\nthe device. The value of this variable will either be set 'landscape'\nor 'portrait'. If no data is available it will be set to 'undefined'.\neither LANDSCAPE or PORTRAIT."
},
{
- "file": "src/core/constants.js",
- "line": 924,
"itemtype": "property",
- "name": "DIFFERENCE",
- "type": "String",
- "final": 1,
+ "name": "accelerationX",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 42,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationX);\n describe('Magnitude of device acceleration is displayed as ellipse size.');\n}\n</code>\n</div>"
+ ],
+ "description": "The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared."
},
{
- "file": "src/core/constants.js",
- "line": 929,
"itemtype": "property",
- "name": "SUBTRACT",
- "type": "String",
- "final": 1,
+ "name": "accelerationY",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 64,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationY);\n describe('Magnitude of device acceleration is displayed as ellipse size');\n}\n</code>\n</div>"
+ ],
+ "description": "The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared."
},
{
- "file": "src/core/constants.js",
- "line": 934,
"itemtype": "property",
- "name": "EXCLUSION",
- "type": "String",
- "final": 1,
+ "name": "accelerationZ",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 87,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationZ);\n describe('Magnitude of device acceleration is displayed as ellipse size');\n}\n</code>\n</div>"
+ ],
+ "description": "The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared."
},
{
- "file": "src/core/constants.js",
- "line": 939,
"itemtype": "property",
- "name": "MULTIPLY",
- "type": "String",
- "final": 1,
+ "name": "pAccelerationX",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 97,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [],
+ "description": "The system variable pAccelerationX always contains the acceleration of the\ndevice along the x axis in the frame previous to the current frame. Value\nis represented as meters per second squared."
},
{
- "file": "src/core/constants.js",
- "line": 944,
"itemtype": "property",
- "name": "SCREEN",
- "type": "String",
- "final": 1,
+ "name": "pAccelerationY",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 107,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [],
+ "description": "The system variable pAccelerationY always contains the acceleration of the\ndevice along the y axis in the frame previous to the current frame. Value\nis represented as meters per second squared."
},
{
- "file": "src/core/constants.js",
- "line": 949,
"itemtype": "property",
- "name": "REPLACE",
- "type": "String",
- "final": 1,
- "default": "copy",
+ "name": "pAccelerationZ",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 117,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [],
+ "description": "The system variable pAccelerationZ always contains the acceleration of the\ndevice along the z axis in the frame previous to the current frame. Value\nis represented as meters per second squared."
},
{
- "file": "src/core/constants.js",
- "line": 955,
"itemtype": "property",
- "name": "OVERLAY",
- "type": "String",
- "final": 1,
+ "name": "rotationX",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 161,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n //rotateZ(radians(rotationZ));\n rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>The system variable rotationX always contains the rotation of the\ndevice along the x axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> is set to DEGREES, the value will be -180 to 180. If\nit is set to RADIANS, the value will be -PI to PI.</p>\n<p>Note: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 960,
"itemtype": "property",
- "name": "HARD_LIGHT",
- "type": "String",
- "final": 1,
+ "name": "rotationY",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 194,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n //rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>The system variable rotationY always contains the rotation of the\ndevice along the y axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> is set to DEGREES, the value will be -90 to 90. If\nit is set to RADIANS, the value will be -PI/2 to PI/2.</p>\n<p>Note: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 965,
"itemtype": "property",
- "name": "SOFT_LIGHT",
- "type": "String",
- "final": 1,
+ "name": "rotationZ",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 231,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>The system variable rotationZ always contains the rotation of the\ndevice along the z axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> is set to DEGREES, the value will be 0 to 360. If\nit is set to RADIANS, the value will be 0 to 2*PI.</p>\n<p>Unlike rotationX and rotationY, this variable is available for devices\nwith a built-in compass only.</p>\n<p>Note: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 970,
"itemtype": "property",
- "name": "DODGE",
- "type": "String",
- "final": 1,
- "default": "color-dodge",
+ "name": "pRotationX",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 275,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div class='norender'>\n<code>\n// A simple if statement looking at whether\n// rotationX - pRotationX < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nlet rX = rotationX + 180;\nlet pRX = pRotationX + 180;\n\nif ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {\n rotateDirection = 'clockwise';\n} else if (rX - pRX < 0 || rX - pRX > 270) {\n rotateDirection = 'counter-clockwise';\n}\n\nprint(rotateDirection);\ndescribe('no image to display.');\n</code>\n</div>"
+ ],
+ "description": "<p>The system variable pRotationX always contains the rotation of the\ndevice along the x axis in the frame previous to the current frame.\nIf the sketch <a href=\"#/p5/angleMode\"> angleMode()</a> is set to DEGREES,\nthe value will be -180 to 180. If it is set to RADIANS, the value will\nbe -PI to PI.</p>\n<p>pRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 976,
"itemtype": "property",
- "name": "BURN",
- "type": "String",
- "final": 1,
- "default": "color-burn",
+ "name": "pRotationY",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 318,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div class='norender'>\n<code>\n// A simple if statement looking at whether\n// rotationY - pRotationY < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nlet rY = rotationY + 180;\nlet pRY = pRotationY + 180;\n\nif ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {\n rotateDirection = 'clockwise';\n} else if (rY - pRY < 0 || rY - pRY > 270) {\n rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\ndescribe('no image to display.');\n</code>\n</div>"
+ ],
+ "description": "<p>The system variable pRotationY always contains the rotation of the\ndevice along the y axis in the frame previous to the current frame.\nIf the sketch <a href=\"#/p5/angleMode\"> angleMode()</a> is set to DEGREES,\nthe value will be -90 to 90. If it is set to RADIANS, the value will\nbe -PI/2 to PI/2.</p>\n<p>pRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 984,
"itemtype": "property",
- "name": "THRESHOLD",
- "type": "String",
- "final": 1,
+ "name": "pRotationZ",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 357,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div class='norender'>\n<code>\n// A simple if statement looking at whether\n// rotationZ - pRotationZ < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\nif (\n (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||\n rotationZ - pRotationZ < -270\n) {\n rotateDirection = 'clockwise';\n} else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {\n rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\ndescribe('no image to display.');\n</code>\n</div>"
+ ],
+ "description": "<p>The system variable pRotationZ always contains the rotation of the\ndevice along the z axis in the frame previous to the current frame.\nIf the sketch <a href=\"#/p5/angleMode\"> angleMode()</a> is set to DEGREES,\nthe value will be 0 to 360. If it is set to RADIANS, the value will\nbe 0 to 2*PI.</p>\n<p>pRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 989,
"itemtype": "property",
- "name": "GRAY",
+ "name": "turnAxis",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 411,
"type": "String",
- "final": 1,
+ "module": "Events",
+ "submodule": "Acceleration",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device turns`);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when x-axis turns`);\n}\nfunction deviceTurned() {\n if (turnAxis === 'X') {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n }\n}\n</code>\n</div>"
+ ],
+ "description": "When a device is rotated, the axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a>\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\nthe scope of deviceTurned()."
},
{
- "file": "src/core/constants.js",
- "line": 994,
"itemtype": "property",
- "name": "OPAQUE",
- "type": "String",
- "final": 1,
+ "name": "keyIsPressed",
+ "file": "src/scripts/parsers/in/p5.js/src/events/keyboard.js",
+ "line": 113,
+ "type": "Boolean",
+ "module": "Events",
+ "submodule": "Keyboard",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The white square turns black when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n if (keyIsPressed === true) {\n fill(0);\n } else {\n fill(255);\n }\n\n // Draw the square.\n square(25, 25, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The white square turns black when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n if (keyIsPressed) {\n fill(0);\n } else {\n fill(255);\n }\n\n // Draw the square.\n square(25, 25, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the word \"false\" at its center. The word switches to \"true\" when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the value of keyIsPressed.\n text(keyIsPressed, 50, 50);\n}\n</code>\n</div>"
+ ],
+ "description": "A <code>Boolean</code> system variable that's <code>true</code> if any key is currently pressed\nand <code>false</code> if not."
},
{
- "file": "src/core/constants.js",
- "line": 999,
"itemtype": "property",
- "name": "INVERT",
+ "name": "key",
+ "file": "src/scripts/parsers/in/p5.js/src/events/keyboard.js",
+ "line": 196,
"type": "String",
- "final": 1,
+ "module": "Events",
+ "submodule": "Keyboard",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The last key pressed is displayed at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the last key pressed.\n text(key, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses the keys \"w\", \"a\", \"s\", or \"d\". It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if a key is pressed.\n if (keyIsPressed === true) {\n if (key === 'w') {\n y -= 1;\n } else if (key === 's') {\n y += 1;\n } else if (key === 'a') {\n x -= 1;\n } else if (key === 'd') {\n x += 1;\n }\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle at (x, y).\n circle(x, y, 5);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>String</code> system variable that contains the value of the last key typed.</p>\n<p>The key variable is helpful for checking whether an\n<a href=\"https://en.wikipedia.org/wiki/ASCII#Printable_characters\" target=\"_blank\">ASCII</a>\nkey has been typed. For example, the expression <code>key === \"a\"</code> evaluates to\n<code>true</code> if the <code>a</code> key was typed and <code>false</code> if not. <code>key</code> doesn’t update\nfor special keys such as <code>LEFT_ARROW</code> and <code>ENTER</code>. Use keyCode instead for\nspecial keys. The <a href=\"#/p5/keyIsDown\">keyIsDown()</a> function should\nbe used to check for multiple different key presses at the same time.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1004,
"itemtype": "property",
- "name": "POSTERIZE",
- "type": "String",
- "final": 1,
+ "name": "keyCode",
+ "file": "src/scripts/parsers/in/p5.js/src/events/keyboard.js",
+ "line": 300,
+ "type": "Integer",
+ "module": "Events",
+ "submodule": "Keyboard",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The last key pressed and its code are displayed at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the last key pressed and its code.\n text(`${key} : ${keyCode}`, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if an arrow key is pressed.\n if (keyIsPressed === true) {\n if (keyCode === 38) { // Up arrow key\n y -= 1;\n } else if (keyCode === 40) { // Down arrow key\n y += 1;\n } else if (keyCode === 37) { // Left arrow key\n x -= 1;\n } else if (keyCode === 39) { // Right arrow key\n x += 1;\n }\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle at (x, y).\n circle(x, y, 5);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> system variable that contains the code of the last key pressed.</p>\n<p>Every key has a numeric key code. For example, the letter <code>a</code> key has the key code 65.\nUse this key code to determine which key was pressed by comparing it to the numeric value\nof the desired key.</p>\n<p>For example, to detect when the Enter key is pressed:</p>\n<pre><code class=\"language-js\">if (keyCode === 13) { // Enter key\n // Code to run if the Enter key was pressed.\n}</code></pre><p>Alternatively, you can use the <a href=\"#/p5/key\">key</a> function to directly compare the key value:</p>\n<pre><code class=\"language-js\">if (key === 'Enter') { // Enter key\n // Code to run if the Enter key was pressed.\n}</code></pre><p>Use the following numeric codes for the arrow keys:</p>\n<p>Up Arrow: 38Down Arrow: 40Left Arrow: 37Right Arrow: 39</p>\n<p>More key codes can be found at websites such as\n<a href=\"http://keycode.info/\">keycode.info</a>.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1009,
"itemtype": "property",
- "name": "DILATE",
- "type": "String",
- "final": 1,
+ "name": "movedX",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 55,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The text \">>\" appears when the user moves the mouse to the right. The text \"<<\" appears when the user moves the mouse to the left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display >> when movedX is positive and\n // << when it's negative.\n if (movedX > 0) {\n text('>>', 50, 50);\n } else if (movedX < 0) {\n text('<<', 50, 50);\n }\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> system variable that tracks the mouse's horizontal movement.</p>\n<p><code>movedX</code> tracks how many pixels the mouse moves left or right between\nframes. <code>movedX</code> will have a negative value if the mouse moves left between\nframes and a positive value if it moves right. <code>movedX</code> can be calculated\nas <code>mouseX - pmouseX</code>.</p>\n<p>Note: <code>movedX</code> continues updating even when\n<a href=\"#/p5/requestPointerLock\">requestPointerLock()</a> is active.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1014,
"itemtype": "property",
- "name": "ERODE",
- "type": "String",
- "final": 1,
+ "name": "movedY",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 100,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The text \"▲\" appears when the user moves the mouse upward. The text \"▼\" appears when the user moves the mouse downward.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display ▼ when movedY is positive and\n // ▲ when it's negative.\n if (movedY > 0) {\n text('▼', 50, 50);\n } else if (movedY < 0) {\n text('▲', 50, 50);\n }\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> system variable that tracks the mouse's vertical movement.</p>\n<p><code>movedY</code> tracks how many pixels the mouse moves up or down between\nframes. <code>movedY</code> will have a negative value if the mouse moves up between\nframes and a positive value if it moves down. <code>movedY</code> can be calculated\nas <code>mouseY - pmouseY</code>.</p>\n<p>Note: <code>movedY</code> continues updating even when\n<a href=\"#/p5/requestPointerLock\">requestPointerLock()</a> is active.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1019,
"itemtype": "property",
- "name": "BLUR",
- "type": "String",
- "final": 1,
+ "name": "mouseX",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 216,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A vertical black line moves left and right following the mouse's x-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Draw a vertical line that follows the mouse's x-coordinate.\n line(mouseX, 0, mouseX, 100);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A vertical black line moves left and right following the mouse's x-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let mx = mouseX - 50;\n\n // Draw the line.\n line(mx, -50, mx, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet font;\n\nasync function setup() {\n // Load a font for WebGL mode.\n font = await loadFont('assets/inconsolata.otf');\n\n createCanvas(100, 100, WEBGL);\n\n describe(\n \"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 0, 0);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> system variable that tracks the mouse's horizontal position.</p>\n<p>In 2D mode, <code>mouseX</code> keeps track of the mouse's position relative to the\ntop-left corner of the canvas. For example, if the mouse is 50 pixels from\nthe left edge of the canvas, then <code>mouseX</code> will be 50.</p>\n<p>In WebGL mode, <code>mouseX</code> keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse is 50 pixels to the right\nof the canvas' center, then <code>mouseX</code> will be 50.</p>\n<p>If touch is used instead of the mouse, then <code>mouseX</code> will hold the\nx-coordinate of the most recent touch point.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1026,
"itemtype": "property",
- "name": "NORMAL",
- "type": "String",
- "final": 1,
+ "name": "mouseY",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 325,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A horizontal black line moves up and down following the mouse's y-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Draw a horizontal line that follows the mouse's y-coordinate.\n line(0, mouseY, 100, mouseY);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A horizontal black line moves up and down following the mouse's y-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let my = mouseY - 50;\n\n // Draw the line.\n line(-50, my, 50, my);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet font;\n\nasync function setup() {\n // Load a font for WebGL mode.\n font = await loadFont('assets/inconsolata.otf');\n\n createCanvas(100, 100, WEBGL);\n\n describe(\n \"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 0, 0);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> system variable that tracks the mouse's vertical position.</p>\n<p>In 2D mode, <code>mouseY</code> keeps track of the mouse's position relative to the\ntop-left corner of the canvas. For example, if the mouse is 50 pixels from\nthe top edge of the canvas, then <code>mouseY</code> will be 50.</p>\n<p>In WebGL mode, <code>mouseY</code> keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse is 50 pixels below the\ncanvas' center, then <code>mouseY</code> will be 50.</p>\n<p>If touch is used instead of the mouse, then <code>mouseY</code> will hold the\ny-coordinate of the most recent touch point.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1031,
"itemtype": "property",
- "name": "ITALIC",
- "type": "String",
- "final": 1,
+ "name": "pmouseX",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 394,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n line(pmouseX, pmouseY, mouseX, mouseY);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let pmx = pmouseX - 50;\n let pmy = pmouseY - 50;\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Draw the line.\n line(pmx, pmy, mx, my);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> system variable that tracks the mouse's previous horizontal\nposition.</p>\n<p>In 2D mode, <code>pmouseX</code> keeps track of the mouse's position relative to the\ntop-left corner of the canvas. Its value is\n<a href=\"#/p5/mouseX\">mouseX</a> from the previous frame. For example, if\nthe mouse was 50 pixels from the left edge of the canvas during the last\nframe, then <code>pmouseX</code> will be 50.</p>\n<p>In WebGL mode, <code>pmouseX</code> keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse was 50 pixels to the right\nof the canvas' center during the last frame, then <code>pmouseX</code> will be 50.</p>\n<p>If touch is used instead of the mouse, then <code>pmouseX</code> will hold the\nx-coordinate of the last touch point.</p>\n<p>Note: <code>pmouseX</code> is reset to the current <a href=\"#/p5/mouseX\">mouseX</a>\nvalue at the start of each touch event.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1036,
"itemtype": "property",
- "name": "BOLD",
- "type": "String",
- "final": 1,
+ "name": "pmouseY",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 463,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n line(pmouseX, pmouseY, mouseX, mouseY);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let pmx = pmouseX - 50;\n let pmy = pmouseY - 50;\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Draw the line.\n line(pmx, pmy, mx, my);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> system variable that tracks the mouse's previous vertical\nposition.</p>\n<p>In 2D mode, <code>pmouseY</code> keeps track of the mouse's position relative to the\ntop-left corner of the canvas. Its value is\n<a href=\"#/p5/mouseY\">mouseY</a> from the previous frame. For example, if\nthe mouse was 50 pixels from the top edge of the canvas during the last\nframe, then <code>pmouseY</code> will be 50.</p>\n<p>In WebGL mode, <code>pmouseY</code> keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse was 50 pixels below the\ncanvas' center during the last frame, then <code>pmouseY</code> will be 50.</p>\n<p>If touch is used instead of the mouse, then <code>pmouseY</code> will hold the\ny-coordinate of the last touch point.</p>\n<p>Note: <code>pmouseY</code> is reset to the current <a href=\"#/p5/mouseY\">mouseY</a>\nvalue at the start of each touch event.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1041,
"itemtype": "property",
- "name": "BOLDITALIC",
- "type": "String",
- "final": 1,
+ "name": "winMouseX",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 504,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates within the browser window.\n text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> variable that tracks the mouse's horizontal position within the\nbrowser.</p>\n<p><code>winMouseX</code> keeps track of the mouse's position relative to the top-left\ncorner of the browser window. For example, if the mouse is 50 pixels from\nthe left edge of the browser, then <code>winMouseX</code> will be 50.</p>\n<p>On a touchscreen device, <code>winMouseX</code> will hold the x-coordinate of the most\nrecent touch point.</p>\n<p>Note: Use <a href=\"#/p5/mouseX\">mouseX</a> to track the mouse’s\nx-coordinate within the canvas.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1046,
"itemtype": "property",
- "name": "CHAR",
- "type": "String",
- "final": 1,
+ "name": "winMouseY",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 545,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates within the browser window.\n text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> variable that tracks the mouse's vertical position within the\nbrowser.</p>\n<p><code>winMouseY</code> keeps track of the mouse's position relative to the top-left\ncorner of the browser window. For example, if the mouse is 50 pixels from\nthe top edge of the browser, then <code>winMouseY</code> will be 50.</p>\n<p>On a touchscreen device, <code>winMouseY</code> will hold the y-coordinate of the most\nrecent touch point.</p>\n<p>Note: Use <a href=\"#/p5/mouseY\">mouseY</a> to track the mouse’s\ny-coordinate within the canvas.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1051,
"itemtype": "property",
- "name": "WORD",
- "type": "String",
- "final": 1,
+ "name": "pwinMouseX",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 616,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A gray square. A white circle at its center grows larger when the mouse moves horizontally.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's diameter.\n let d = winMouseX - pwinMouseX;\n\n // Draw the circle.\n circle(50, 50, d);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Create the canvas and set its position.\n let cnv = createCanvas(100, 100);\n cnv.position(20, 20);\n\n describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display pwinMouseX.\n text(pwinMouseX, 50, 50);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> variable that tracks the mouse's previous horizontal position\nwithin the browser.</p>\n<p><code>pwinMouseX</code> keeps track of the mouse's position relative to the top-left\ncorner of the browser window. Its value is\n<a href=\"#/p5/winMouseX\">winMouseX</a> from the previous frame. For\nexample, if the mouse was 50 pixels from\nthe left edge of the browser during the last frame, then <code>pwinMouseX</code> will\nbe 50.</p>\n<p>On a touchscreen device, <code>pwinMouseX</code> will hold the x-coordinate of the most\nrecent touch point. <code>pwinMouseX</code> is reset to the current\n<a href=\"#/p5/winMouseX\">winMouseX</a> value at the start of each touch\nevent.</p>\n<p>Note: Use <a href=\"#/p5/pmouseX\">pmouseX</a> to track the mouse’s previous\nx-coordinate within the canvas.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1063,
"itemtype": "property",
- "name": "LINEAR",
- "type": "String",
- "final": 1,
- "class": "p5",
- "module": "Constants",
- "submodule": "Constants"
- },
- {
- "file": "src/core/constants.js",
- "line": 1068,
- "itemtype": "property",
- "name": "QUADRATIC",
- "type": "String",
- "final": 1,
+ "name": "pwinMouseY",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 687,
+ "type": "Number",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A gray square. A white circle at its center grows larger when the mouse moves vertically.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's diameter.\n let d = winMouseY - pwinMouseY;\n\n // Draw the circle.\n circle(50, 50, d);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Create the canvas and set its position.\n let cnv = createCanvas(100, 100);\n cnv.position(20, 20);\n\n describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display pwinMouseY.\n text(pwinMouseY, 50, 50);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> variable that tracks the mouse's previous vertical position\nwithin the browser.</p>\n<p><code>pwinMouseY</code> keeps track of the mouse's position relative to the top-left\ncorner of the browser window. Its value is\n<a href=\"#/p5/winMouseY\">winMouseY</a> from the previous frame. For\nexample, if the mouse was 50 pixels from\nthe top edge of the browser during the last frame, then <code>pwinMouseY</code> will\nbe 50.</p>\n<p>On a touchscreen device, <code>pwinMouseY</code> will hold the y-coordinate of the most\nrecent touch point. <code>pwinMouseY</code> is reset to the current\n<a href=\"#/p5/winMouseY\">winMouseY</a> value at the start of each touch\nevent.</p>\n<p>Note: Use <a href=\"#/p5/pmouseY\">pmouseY</a> to track the mouse’s previous\ny-coordinate within the canvas.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1073,
"itemtype": "property",
- "name": "BEZIER",
- "type": "String",
- "final": 1,
+ "name": "mouseButton",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 762,
+ "type": "Object",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(200, 200);\n\n describe(\n 'A gray square with black text at its center. The text changes from 0 to either \"left\" or \"right\" when the user clicks a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the mouse button.\n text(`Left: ${mouseButton.left}`, width / 2, height / 2 - 20);\n text(`Right: ${mouseButton.right}`, width / 2, height / 2);\n text(`Center: ${mouseButton.center}`, width / 2, height / 2 + 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n \"A gray square. Different shapes appear at its center depending on the mouse button that's clicked.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n if (mouseIsPressed === true) {\n if (mouseButton.left) {\n circle(50, 50, 50);\n }\n if (mouseButton.right) {\n square(25, 25, 50);\n }\n if (mouseButton.center) {\n triangle(23, 75, 50, 20, 78, 75);\n }\n }\n}\n</code>\n</div>"
+ ],
+ "description": "<p>An object that tracks the current state of mouse buttons, showing which\nbuttons are pressed at any given moment.</p>\n<p>The <code>mouseButton</code> object has three properties:</p>\n<ul><li><code>left</code>: A boolean indicating whether the left mouse button is pressed.</li><li><code>right</code>: A boolean indicating whether the right mouse button is pressed.</li><li><code>center</code>: A boolean indicating whether the middle mouse button (scroll wheel button) is pressed.</li></ul><p>Note: Different browsers may track <code>mouseButton</code> differently. See\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\" target=\"_blank\">MDN</a>\nfor more information.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1078,
"itemtype": "property",
- "name": "CURVE",
- "type": "String",
- "final": 1,
+ "name": "touches",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 851,
+ "type": "Object[]",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. White circles appear where the user touches the square.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a circle at each touch point.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. Labels appear where the user touches the square, displaying the coordinates.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a label above each touch point.\n for (let touch of touches) {\n text(`${touch.x}, ${touch.y}`, touch.x, touch.y - 40);\n }\n}\n</code>\n</div>"
+ ],
+ "description": "<p>An <code>Array</code> of all the current touch points on a touchscreen device.</p>\n<p>The <code>touches</code> array is empty by default. When the user touches their\nscreen, a new touch point is tracked and added to the array. Touch points\nare <code>Objects</code> with the following properties:</p>\n<pre><code class=\"language-js\">// Iterate over the touches array.\nfor (let touch of touches) {\n // x-coordinate relative to the top-left\n // corner of the canvas.\n console.log(touch.x);\n\n // y-coordinate relative to the top-left\n // corner of the canvas.\n console.log(touch.y);\n\n // x-coordinate relative to the top-left\n // corner of the browser.\n console.log(touch.winX);\n\n // y-coordinate relative to the top-left\n // corner of the browser.\n console.log(touch.winY);\n\n // ID number\n console.log(touch.id);\n}</code></pre>"
},
{
- "file": "src/core/constants.js",
- "line": 1085,
"itemtype": "property",
- "name": "STROKE",
- "type": "String",
- "final": 1,
+ "name": "mouseIsPressed",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 911,
+ "type": "Boolean",
+ "module": "Events",
+ "submodule": "Pointer",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the word \"false\" at its center. The word changes to \"true\" when the user presses a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouseIsPressed variable.\n text(mouseIsPressed, 25, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square turns black when the user presses the mouse.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n if (mouseIsPressed === true) {\n fill(0);\n } else {\n fill(255);\n }\n\n // Draw the square.\n square(25, 25, 50);\n}\n</code>\n</div>"
+ ],
+ "description": "A <code>Boolean</code> system variable that's <code>true</code> if the mouse is pressed and\n<code>false</code> if not."
},
{
- "file": "src/core/constants.js",
- "line": 1090,
"itemtype": "property",
- "name": "FILL",
- "type": "String",
- "final": 1,
+ "name": "pixels",
+ "file": "src/scripts/parsers/in/p5.js/src/image/pixels.js",
+ "line": 271,
+ "type": "Number[]",
+ "module": "Image",
+ "submodule": "Pixels",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Load the pixels array.\n loadPixels();\n\n // Set the dot's coordinates.\n let x = 50;\n let y = 50;\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Set the pixel(s) at the center of the canvas black.\n for (let i = 0; i < d; i += 1) {\n for (let j = 0; j < d; j += 1) {\n let index = 4 * ((y * d + j) * width * d + (x * d + i));\n // Red.\n pixels[index] = 0;\n // Green.\n pixels[index + 1] = 0;\n // Blue.\n pixels[index + 2] = 0;\n // Alpha.\n pixels[index + 3] = 255;\n }\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A black dot in the middle of a gray rectangle.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Load the pixels array.\n loadPixels();\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Make the top half of the canvas red.\n for (let i = 0; i < halfImage; i += 4) {\n // Red.\n pixels[i] = 255;\n // Green.\n pixels[i + 1] = 0;\n // Blue.\n pixels[i + 2] = 0;\n // Alpha.\n pixels[i + 3] = 255;\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A red rectangle drawn above a gray rectangle.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let pink = color(255, 102, 204);\n\n // Load the pixels array.\n loadPixels();\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Make the top half of the canvas red.\n for (let i = 0; i < halfImage; i += 4) {\n pixels[i] = red(pink);\n pixels[i + 1] = green(pink);\n pixels[i + 2] = blue(pink);\n pixels[i + 3] = alpha(pink);\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A pink rectangle drawn above a gray rectangle.');\n}\n</code>\n</div>"
+ ],
+ "description": "<p>An array containing the color of each pixel on the canvas.</p>\n<p>Colors are stored as numbers representing red, green, blue, and alpha\n(RGBA) values. <code>pixels</code> is a one-dimensional array for performance reasons.</p>\n<p>Each pixel occupies four elements in the <code>pixels</code> array, one for each RGBA\nvalue. For example, the pixel at coordinates (0, 0) stores its RGBA values\nat <code>pixels[0]</code>, <code>pixels[1]</code>, <code>pixels[2]</code>, and <code>pixels[3]</code>, respectively.\nThe next pixel at coordinates (1, 0) stores its RGBA values at <code>pixels[4]</code>,\n<code>pixels[5]</code>, <code>pixels[6]</code>, and <code>pixels[7]</code>. And so on. The <code>pixels</code> array\nfor a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.</p>\n<p>Some displays use several smaller pixels to set the color at a single\npoint. The <a href=\"#/p5/pixelDensity\">pixelDensity()</a> function returns\nthe pixel density of the canvas. High density displays often have a\n<a href=\"#/p5/pixelDensity\">pixelDensity()</a> of 2. On such a display, the\n<code>pixels</code> array for a 100×100 canvas has 200 × 200 × 4 =\n160,000 elements.</p>\n<p>Accessing the RGBA values for a point on the canvas requires a little math\nas shown below. The <a href=\"#/p5/loadPixels\">loadPixels()</a> function\nmust be called before accessing the <code>pixels</code> array. The\n<a href=\"#/p5/updatePixels\">updatePixels()</a> function must be called\nafter any changes are made.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1095,
"itemtype": "property",
- "name": "TEXTURE",
- "type": "String",
- "final": 1,
+ "name": "width",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 876,
+ "type": "Number",
+ "module": "Environment",
+ "submodule": "Environment",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n background(200);\n\n // Display the canvas' width.\n text(width, 42, 54);\n\n describe('The number 100 written in black on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(50, 100);\n\n background(200);\n\n // Display the canvas' width.\n text(width, 21, 54);\n\n describe('The number 50 written in black on a gray rectangle.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the canvas' width.\n text(width, 42, 54);\n\n 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.');\n}\n\n// If the mouse is pressed, reisze\n// the canvas and display its new\n// width.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n resizeCanvas(50, 100);\n background(200);\n text(width, 21, 54);\n }\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> variable that stores the width of the canvas in pixels.</p>\n<p><code>width</code>'s default value is 100. Calling\n<a href=\"#/p5/createCanvas\">createCanvas()</a> or\n<a href=\"#/p5/resizeCanvas\">resizeCanvas()</a> changes the value of\n<code>width</code>. Calling <a href=\"#/p5/noCanvas\">noCanvas()</a> sets its value to\n0.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1100,
"itemtype": "property",
- "name": "IMMEDIATE",
- "type": "String",
- "final": 1,
+ "name": "height",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 949,
+ "type": "Number",
+ "module": "Environment",
+ "submodule": "Environment",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 54);\n\n describe('The number 100 written in black on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 50);\n\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 27);\n\n describe('The number 50 written in black on a gray rectangle.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 54);\n\n 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.');\n}\n\n// If the mouse is pressed, reisze\n// the canvas and display its new\n// height.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n resizeCanvas(100, 50);\n background(200);\n text(height, 42, 27);\n }\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A <code>Number</code> variable that stores the height of the canvas in pixels.</p>\n<p><code>height</code>'s default value is 100. Calling\n<a href=\"#/p5/createCanvas\">createCanvas()</a> or\n<a href=\"#/p5/resizeCanvas\">resizeCanvas()</a> changes the value of\n<code>height</code>. Calling <a href=\"#/p5/noCanvas\">noCanvas()</a> sets its value to\n0.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1108,
"itemtype": "property",
- "name": "IMAGE",
- "type": "String",
- "final": 1,
+ "name": "let",
+ "file": "src/scripts/parsers/in/p5.js/src/core/reference.js",
+ "line": 1,
+ "module": "Foundation",
+ "submodule": "Foundation",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(220);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Create the message variable.\n let message = 'Hello, 🌍!';\n\n // Display the message.\n text(message, 50, 50);\n\n describe('The text \"Hello, 🌍!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle moves from left to right against a gray background.');\n}\n\nfunction draw() {\n background(220);\n\n // Change the value of x.\n x += 1;\n\n circle(x, 50, 20);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>Declares a new variable.</p>\n<p>A variable is a container for a value. For example, a variable might\ncontain a creature's x-coordinate as a <code>Number</code> or its name as a\n<code>String</code>. Variables can change value by reassigning them as follows:</p>\n<pre><code class=\"language-js\">// Declare the variable x and assign it the value 10.\nlet x = 10;\n\n// Reassign x to 50.\nx = 50;</code></pre><p>Variables have block scope. When a variable is declared between curly\nbraces <code>{}</code>, it only exists within the block defined by those braces. For\nexample, the following code would throw a <code>ReferenceError</code> because <code>x</code> is\ndeclared within the <code>setup()</code> function's block:</p>\n<pre><code class=\"language-js\">function setup() {\n createCanvas(100, 100);\n\n let x = 50;\n}\n\nfunction draw() {\n background(200);\n\n // x was declared in setup(), so it can't be referenced here.\n circle(x, 50, 20);\n}</code></pre><p>Variables declared outside of all curly braces <code>{}</code> are in the global\nscope. A variable that's in the global scope can be used and changed\nanywhere in a sketch:</p>\n<pre><code class=\"language-js\">let x = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n}\n\nfunction draw() {\n background(200);\n\n // Change the value of x.\n x += 10;\n\n circle(x, 50, 20);\n}</code></pre>"
},
{
- "file": "src/core/constants.js",
- "line": 1116,
"itemtype": "property",
- "name": "NEAREST",
- "type": "String",
- "final": 1,
+ "name": "if",
+ "file": "src/scripts/parsers/in/p5.js/src/core/reference.js",
+ "line": 1,
+ "module": "Foundation",
+ "submodule": "Foundation",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// Click the mouse to show the circle.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse user clicks on the canvas.'\n );\n}\n\nfunction draw() {\n background(200);\n\n if (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the mouse to show different shapes.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white ellipse on a gray background. The ellipse becomes a circle when the user presses the mouse.'\n );\n}\n\nfunction draw() {\n background(200);\n\n if (mouseIsPressed === true) {\n circle(50, 50, 20);\n } else {\n ellipse(50, 50, 20, 50);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Move the mouse to change the background color.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A square changes color from white to black as the user moves the mouse from left to right.'\n );\n}\n\nfunction draw() {\n if (mouseX < 33) {\n background(255);\n } else if (mouseX < 67) {\n background(200);\n } else {\n background(0);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle drawn on a gray background. The circle changes color to red when the user presses the \"r\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n if (keyIsPressed === true) {\n if (key === 'r') {\n fill('red');\n }\n }\n\n circle(50, 50, 40);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A way to choose whether to run a block of code.</p>\n<p><code>if</code> statements are helpful for running a block of code based on a\ncondition. For example, an <code>if</code> statement makes it easy to express the\nidea \"Draw a circle if the mouse is pressed.\":</p>\n<pre><code class=\"language-js\">if (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n}</code></pre><p>The statement header begins with the keyword <code>if</code>. The expression in\nparentheses <code>mouseIsPressed === true</code> is a <code>Boolean</code> expression that's\neither <code>true</code> or <code>false</code>. The code between the curly braces <code>{}</code> is the if\nstatement's body. The body only runs if the <code>Boolean</code> expression is <code>true</code>.</p>\n<p>The <a href=\"#/p5/mouseIsPressed\">mouseIsPressed</a> system variable is\nalways <code>true</code> or <code>false</code>, so the code snippet above could also be written\nas follows:</p>\n<pre><code class=\"language-js\">if (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n}</code></pre><p>An <code>if</code>-<code>else</code> statement adds a block of code that runs if the <code>Boolean</code>\nexpression is <code>false</code>. For example, here's an <code>if</code>-<code>else</code> statement that\nexpresses the idea \"Draw a circle if the mouse is pressed. Otherwise,\ndisplay a message.\":</p>\n<pre><code class=\"language-js\">if (mouseIsPressed === true) {\n // When true.\n circle(mouseX, mouseY, 20);\n} else {\n // When false.\n text('Click me!', 50, 50);\n}</code></pre><p>There are two possible paths, or branches, in this code snippet. The\nprogram must follow one branch or the other.</p>\n<p>An <code>else</code>-<code>if</code> statement makes it possible to add more branches.\n<code>else</code>-<code>if</code> statements run different blocks of code under different\nconditions. For example, an <code>else</code>-<code>if</code> statement makes it easy to express\nthe idea \"If the mouse is on the left, paint the canvas white. If the mouse\nis in the middle, paint the canvas gray. Otherwise, paint the canvas\nblack.\":</p>\n<pre><code class=\"language-js\">if (mouseX < 33) {\n background(255);\n} else if (mouseX < 67) {\n background(200);\n} else {\n background(0);\n}</code></pre><p><code>if</code> statements can add as many <code>else</code>-<code>if</code> statements as needed. However,\nthere can only be one <code>else</code> statement and it must be last.</p>\n<p><code>if</code> statements can also check for multiple conditions at once. For\nexample, the <code>Boolean</code> operator <code>&&</code> (AND) checks whether two expressions\nare both <code>true</code>:</p>\n<pre><code class=\"language-js\">if (keyIsPressed === true && key === 'p') {\n text('You pressed the \"p\" key!', 50, 50);\n}</code></pre><p>If the user is pressing a key AND that key is <code>'p'</code>, then a message will\ndisplay.</p>\n<p>The <code>Boolean</code> operator <code>||</code> (OR) checks whether at least one of two\nexpressions is <code>true</code>:</p>\n<pre><code class=\"language-js\">if (keyIsPressed === true || mouseIsPressed === true) {\n text('You did something!', 50, 50);\n}</code></pre><p>If the user presses a key, or presses a mouse button, or both, then a\nmessage will display.</p>\n<p>The body of an <code>if</code> statement can contain another <code>if</code> statement. This is\ncalled a \"nested <code>if</code> statement.\" For example, nested <code>if</code> statements make\nit easy to express the idea \"If a key is pressed, then check if the key is\n<code>'r'</code>. If it is, then set the fill to red.\":</p>\n<pre><code class=\"language-js\">if (keyIsPressed === true) {\n if (key === 'r') {\n fill('red');\n }\n}</code></pre><p>See <a href=\"#/p5/Boolean\">Boolean</a> and <a href=\"#/p5/Number\">Number</a>\nto learn more about these data types and the operations they support.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1121,
"itemtype": "property",
- "name": "REPEAT",
- "type": "String",
- "final": 1,
+ "name": "function",
+ "file": "src/scripts/parsers/in/p5.js/src/core/reference.js",
+ "line": 1,
+ "module": "Foundation",
+ "submodule": "Foundation",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Call the drawFlower() function.\n drawFlower();\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower() {\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Draw a flower emoji.\n text('🌸', 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Call the drawFlower() function and pass values for\n // its position and size.\n drawFlower(50, 50, 20);\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower(x, y, size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n // Use the x and y parameters.\n text('🌸', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The message \"Hello, 🌍!\" written on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a greeting.\n let greeting = createGreeting('🌍');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the greeting.\n text(greeting, 50, 50);\n}\n\n// Return a string with a personalized greeting.\nfunction createGreeting(name) {\n let message = `Hello, ${name}!`;\n return message;\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A named group of statements.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions\" target=\"_blank\">Functions</a>\nhelp with organizing and reusing code. For example, functions make it easy\nto express the idea \"Draw a flower.\":</p>\n<pre><code class=\"language-js\">function drawFlower() {\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Draw a flower emoji.\n text('🌸', 50, 50);\n}</code></pre><p>The function header begins with the keyword <code>function</code>. The function's\nname, <code>drawFlower</code>, is followed by parentheses <code>()</code> and curly braces <code>{}</code>.\nThe code between the curly braces is called the function's body. The\nfunction's body runs when the function is called like so:</p>\n<pre><code class=\"language-js\">drawFlower();</code></pre><p>Functions can accept inputs by adding parameters to their headers.\nParameters are placeholders for values that will be provided when the\nfunction is called. For example, the <code>drawFlower()</code> function could include\na parameter for the flower's size:</p>\n<pre><code class=\"language-js\">function drawFlower(size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n text('🌸', 50, 50);\n}</code></pre><p>Parameters are part of the function's declaration. Arguments are provided\nby the code that calls a function. When a function is called, arguments are\nassigned to parameters:</p>\n<pre><code class=\"language-js\">// The argument 20 is assigned to the parameter size.\ndrawFlower(20);</code></pre><p>Functions can have multiple parameters separated by commas. Parameters\ncan have any type. For example, the <code>drawFlower()</code> function could accept\n<code>Number</code> parameters for the flower's x- and y-coordinates along with its\nsize:</p>\n<pre><code class=\"language-js\">function drawFlower(x, y, size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n // Use the x and y parameters.\n text('🌸', x, y);\n}</code></pre><p>Functions can also produce outputs by adding a <code>return</code> statement:</p>\n<pre><code class=\"language-js\">function double(x) {\n let answer = 2 * x;\n return answer;\n}</code></pre><p>The expression following <code>return</code> can produce an output that's used\nelsewhere. For example, the output of the <code>double()</code> function can be\nassigned to a variable:</p>\n<pre><code class=\"language-js\">let six = double(3);\ntext(`3 x 2 = ${six}`, 50, 50);</code></pre>"
},
{
- "file": "src/core/constants.js",
- "line": 1126,
"itemtype": "property",
- "name": "CLAMP",
- "type": "String",
- "final": 1,
+ "name": "Boolean",
+ "file": "src/scripts/parsers/in/p5.js/src/core/reference.js",
+ "line": 1,
+ "module": "Foundation",
+ "submodule": "Foundation",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. When the user presses the mouse, a circle appears at that location.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, draw a circle at that location.\n if (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. When the user presses the mouse, a circle appears at that location.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, draw a circle at that location.\n if (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square that turns pink when the user presses the mouse or a key.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, change the background color.\n if (mouseIsPressed === true || keyIsPressed === true) {\n background('deeppink');\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the canvas to begin detecting key presses.\n\n// Create a Boolean variable.\nlet isPlaying = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'The message \"Begin?\\nY or N\" written in green on a black background. The message \"Good luck!\" appears when they press the \"y\" key.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n fill(0, 255, 0);\n\n // Display a different message when the user begins playing.\n if (isPlaying === false) {\n text('Begin?', 50, 40);\n text('Y or N', 50, 60);\n } else {\n text('Good luck!', 50, 50);\n }\n}\n\n// Start playing when the user presses the 'y' key.\nfunction keyPressed() {\n if (key === 'y') {\n isPlaying = true;\n }\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A value that's either <code>true</code> or <code>false</code>.</p>\n<p><code>Boolean</code> values help to make decisions in code. They appear any time a\nlogical condition is checked. For example, the condition\n\"Is a mouse button being pressed?\" must be either <code>true</code> or\n<code>false</code>:</p>\n<pre><code class=\"language-js\">// If the user presses the mouse, draw a circle at\n// the mouse's location.\nif (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n}</code></pre><p>The <code>if</code> statement checks whether\n<a href=\"#/p5/mouseIsPressed\">mouseIsPressed</a> is <code>true</code> and draws a\ncircle if it is. <code>Boolean</code> expressions such as <code>mouseIsPressed === true</code>\nevaluate to one of the two possible <code>Boolean</code> values: <code>true</code> or <code>false</code>.</p>\n<p>The <code>===</code> operator (EQUAL) checks whether two values are equal. If they\nare, the expression evaluates to <code>true</code>. Otherwise, it evaluates to\n<code>false</code>.</p>\n<p>Note: There's also a <code>==</code> operator with two <code>=</code> instead of three. Don't use\nit.</p>\n<p>The <a href=\"#/p5/mouseIsPressed\">mouseIsPressed</a> system variable is\nalways <code>true</code> or <code>false</code>, so the code snippet above could also be written\nas follows:</p>\n<pre><code class=\"language-js\">if (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n}</code></pre><p>The <code>!==</code> operator (NOT EQUAL) checks whether two values are not equal, as\nin the following example:</p>\n<pre><code class=\"language-js\">if (2 + 2 !== 4) {\n text('War is peace.', 50, 50);\n}</code></pre><p>Starting from the left, the arithmetic expression <code>2 + 2</code> produces the\nvalue <code>4</code>. The <code>Boolean</code> expression <code>4 !== 4</code> evaluates to <code>false</code> because\n<code>4</code> is equal to itself. As a result, the <code>if</code> statement's body is skipped.</p>\n<p>Note: There's also a <code>!=</code> operator with one <code>=</code> instead of two. Don't use\nit.</p>\n<p>The <code>Boolean</code> operator <code>&&</code> (AND) checks whether two expressions are both\n<code>true</code>:</p>\n<pre><code class=\"language-js\">if (keyIsPressed === true && key === 'p') {\n text('You pressed the \"p\" key!', 50, 50);\n}</code></pre><p>If the user is pressing a key AND that key is <code>'p'</code>, then a message will\ndisplay.</p>\n<p>The <code>Boolean</code> operator <code>||</code> (OR) checks whether at least one of two\nexpressions is <code>true</code>:</p>\n<pre><code class=\"language-js\">if (keyIsPressed === true || mouseIsPressed === true) {\n text('You did something!', 50, 50);\n}</code></pre><p>If the user presses a key, or presses a mouse button, or both, then a\nmessage will display.</p>\n<p>The following truth table summarizes a few common scenarios with <code>&&</code> and\n<code>||</code>:</p>\n<pre><code class=\"language-js\">true && true // true\ntrue && false // false\nfalse && false // false\ntrue || true // true\ntrue || false // true\nfalse || false // false</code></pre><p>The relational operators <code>></code>, <code><</code>, <code>>=</code>, and <code><=</code> also produce <code>Boolean</code>\nvalues:</p>\n<pre><code class=\"language-js\">2 > 1 // true\n2 < 1 // false\n2 >= 2 // true\n2 <= 2 // true</code></pre><p>See <a href=\"#/p5/if\">if</a> for more information about <code>if</code> statements and\n<a href=\"#/p5/Number\">Number</a> for more information about <code>Number</code>s.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1131,
"itemtype": "property",
- "name": "MIRROR",
- "type": "String",
- "final": 1,
+ "name": "String",
+ "file": "src/scripts/parsers/in/p5.js/src/core/reference.js",
+ "line": 1,
+ "module": "Foundation",
+ "submodule": "Foundation",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Display a welcome message.\n text('Hello!', 50, 50);\n\n describe('The text \"Hello!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Create a string variable.\n let world = '🌍';\n\n // Display a welcome message using a template string.\n text(`Hello, ${world}!`, 50, 50);\n\n describe('The text \"Hello, 🌍!\" written on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A sequence of text characters.</p>\n<p>The <code>String</code> data type is helpful for working with text. For example, a\nstring could contain a welcome message:</p>\n<pre><code class=\"language-js\">// Use a string literal.\ntext('Hello!', 10, 10);</code></pre><pre><code class=\"language-js\">// Create a string variable.\nlet message = 'Hello!';\n\n// Use the string variable.\ntext(message, 10, 10);</code></pre><p>The most common way to create strings is to use some form of quotations as\nfollows:</p>\n<pre><code class=\"language-js\">text(\"hi\", 50, 50);</code></pre><pre><code class=\"language-js\">text('hi', 50, 50);</code></pre><pre><code class=\"language-js\">text(`hi`, 50, 50);</code></pre><p><code>\"hi\"</code>, <code>'hi'</code>, and <code>hi</code> are all string literals. A \"literal\" means a\nvalue was actually written, as in <code>text('hi', 50, 50)</code>. By contrast,\n<code>text(message, 50, 50)</code> uses the variable <code>message</code>, so it isn't a string\nliteral.</p>\n<p>Single quotes <code>''</code> and double quotes <code>\"\"</code> mean the same thing. It's nice to\nhave the option for cases when a string contains one type of quote:</p>\n<pre><code class=\"language-js\">text(\"What's up?\", 50, 50);</code></pre><pre><code class=\"language-js\">text('Air quotes make you look \"cool.\"', 50, 50);</code></pre><p>Backticks <code>``</code> create template literals. Template literals have many uses.\nFor example, they can contain both single and double quotes as needed:</p>\n<pre><code class=\"language-js\">text(`\"Don't you forget about me\"`, 10, 10);</code></pre><p>Template literals are helpful when strings are created from variables like\nso:</p>\n<pre><code class=\"language-js\">let size = random(10, 20);\ncircle(50, 50, size);\n\ntext(`The circle's diameter is ${size} pixels.`, 10, 10);</code></pre><p>The <code>size</code> variable's value will replace <code>${size}</code> when the string is\ncreated. <code>${}</code> is a placeholder for any value. That means an expression can\nbe used, as in <code>${round(PI, 3)}</code>. All of the following are valid template\nliterals:</p>\n<pre><code class=\"language-js\">text(`π is about ${round(PI, 2)} pixels.`, 10, 10);\ntext(`It's ${mouseX < width / 2} that I'm on the left half of the canvas.`, 10, 30);</code></pre><p>Template literals can include several variables:</p>\n<pre><code class=\"language-js\">let x = random(0, 100);\nlet y = random(0, 100);\nlet size = random(10, 20);\ncircle(x, y, size);\n\ntext(`The circle at (${x}, ${y}) has a diameter of ${size} pixels.`, 10, 10);</code></pre><p>Template literals are also helpful for creating multi-line text like so:</p>\n<pre><code class=\"language-js\">let poem = `My sketch doesn't run;\nit waits for me patiently\nwhile bugs point the way.`;\n\ntext(poem, 10, 10);</code></pre>"
},
{
- "file": "src/core/constants.js",
- "line": 1138,
"itemtype": "property",
- "name": "FLAT",
- "type": "String",
- "final": 1,
+ "name": "Number",
+ "file": "src/scripts/parsers/in/p5.js/src/core/reference.js",
+ "line": 1,
+ "module": "Foundation",
+ "submodule": "Foundation",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a circle at the center.\n circle(50, 50, 70);\n\n // Draw a smaller circle at the center.\n circle(width / 2, height / 2, 30);\n\n describe('Two concentric, white circles drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle travels from left to right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n circle(frameCount * 0.05, 50, 20);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A number that can be positive, negative, or zero.</p>\n<p>The <code>Number</code> data type is useful for describing values such as position,\nsize, and color. A number can be an integer such as 20 or a decimal number\nsuch as 12.34. For example, a circle's position and size can be described\nby three numbers:</p>\n<pre><code class=\"language-js\">circle(50, 50, 20);</code></pre><pre><code class=\"language-js\">circle(50, 50, 12.34);</code></pre><p>Numbers support basic arithmetic and follow the standard order of\noperations: Parentheses, Exponents, Multiplication, Division, Addition,\nand Subtraction (PEMDAS). For example, it's common to use arithmetic\noperators with p5.js' system variables that are numbers:</p>\n<pre><code class=\"language-js\">// Draw a circle at the center.\ncircle(width / 2, height / 2, 20);</code></pre><pre><code class=\"language-js\">// Draw a circle that moves from left to right.\ncircle(frameCount * 0.01, 50, 20);</code></pre><p>Here's a quick overview of the arithmetic operators:</p>\n<pre><code class=\"language-js\">1 + 2 // Add\n1 - 2 // Subtract\n1 * 2 // Multiply\n1 / 2 // Divide\n1 % 2 // Remainder\n1 ** 2 // Exponentiate</code></pre><p>It's common to update a number variable using arithmetic. For example, an\nobject's location can be updated like so:</p>\n<pre><code class=\"language-js\">x = x + 1;</code></pre><p>The statement above adds 1 to a variable <code>x</code> using the <code>+</code> operator. The\naddition assignment operator <code>+=</code> expresses the same idea:</p>\n<pre><code class=\"language-js\">x += 1;</code></pre><p>Here's a quick overview of the assignment operators:</p>\n<pre><code class=\"language-js\">x += 2 // Addition assignment\nx -= 2 // Subtraction assignment\nx *= 2 // Multiplication assignment\nx /= 2 // Division assignment\nx %= 2 // Remainder assignment</code></pre><p>Numbers can be compared using the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#relational_operators\" target=\"_blank\">relational operators</a>\n<code>></code>, <code><</code>, <code>>=</code>, <code><=</code>, <code>===</code>, and <code>!==</code>. For example, a sketch's\n<a href=\"#/p5/frameCount\">frameCount</a> can be used as a timer:</p>\n<pre><code class=\"language-js\">if (frameCount > 1000) {\n text('Game over!', 50, 50);\n}</code></pre><p>An expression such as <code>frameCount > 1000</code> evaluates to a <code>Boolean</code> value\nthat's either <code>true</code> or <code>false</code>. The relational operators all produce\n<code>Boolean</code> values:</p>\n<pre><code class=\"language-js\">2 > 1 // true\n2 < 1 // false\n2 >= 2 // true\n2 <= 2 // true\n2 === 2 // true\n2 !== 2 // false</code></pre><p>See <a href=\"#/p5/Boolean\">Boolean</a> for more information about comparisons and conditions.</p>\n<p>Note: There are also <code>==</code> and <code>!=</code> operators with one fewer <code>=</code>. Don't use them.</p>\n<p>Expressions with numbers can also produce special values when something\ngoes wrong:</p>\n<pre><code class=\"language-js\">sqrt(-1) // NaN\n1 / 0 // Infinity</code></pre><p>The value <code>NaN</code> stands for\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN\" target=\"_blank\">Not-A-Number</a>.\n<code>NaN</code> appears when calculations or conversions don't work. <code>Infinity</code> is a\nvalue that's larger than any number. It appears during certain\ncalculations.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1143,
"itemtype": "property",
- "name": "SMOOTH",
- "type": "String",
- "final": 1,
+ "name": "Object",
+ "file": "src/scripts/parsers/in/p5.js/src/core/reference.js",
+ "line": 1,
+ "module": "Foundation",
+ "submodule": "Foundation",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n circle(data.x, data.y, data.d);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\n// Add another property for color.\ndata.color = 'deeppink';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n fill(data.color);\n circle(data.x, data.y, data.d);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\n// Add another property for color.\ndata.color = 'deeppink';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n fill(data.color);\n circle(data.x, data.y, data.d);\n\n // Update the object's x and y properties.\n data.x += random(-1, 1);\n data.y += random(-1, 1);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A container for data that's stored as key-value pairs.</p>\n<p>Objects help to organize related data of any type, including other objects.\nA value stored in an object can be accessed by name, called its key. Each\nkey-value pair is called a \"property.\" Objects are similar to dictionaries\nin Python and maps in Java and Ruby.</p>\n<p>For example, an object could contain the location, size, and appearance of\na dog:</p>\n<pre><code class=\"language-js\">// Declare the dog variable and assign it an object.\nlet dog = { x: 50, y: 50, size: 20, emoji: '🐶' };\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(dog.size);\n\n// Draw the dog.\ntext(dog.emoji, dog.x, dog.y);</code></pre><p>The variable <code>dog</code> is assigned an object with four properties. Objects\nare declared with curly braces <code>{}</code>. Values can be accessed using the dot\noperator, as in <code>dog.size</code>. In the example above, the key <code>size</code>\ncorresponds to the value <code>20</code>. Objects can also be empty to start:</p>\n<pre><code class=\"language-js\">// Declare a cat variable and assign it an empty object.\nlet cat = {};\n\n// Add properties to the object.\ncat.x = 50;\ncat.y = 50;\ncat.size = 20;\ncat.emoji = '🐱';\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(cat.size);\n\n// Draw the cat.\ntext(cat.emoji, cat.x, cat.y);</code></pre><p>An object's data can be updated while a sketch runs. For example, the <code>cat</code>\ncould run away from the <code>dog</code> by updating its location:</p>\n<pre><code class=\"language-js\">// Run to the right.\ncat.x += 5;</code></pre><p>If needed, an object's values can be accessed using square brackets <code>[]</code>\nand strings instead of dot notation:</p>\n<pre><code class=\"language-js\">// Run to the right.\ncat[\"x\"] += 5;</code></pre><p>This syntax can be helpful when the key's name has spaces, as in\n<code>cat['height (m)']</code>.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1150,
"itemtype": "property",
- "name": "LANDSCAPE",
- "type": "String",
- "final": 1,
+ "name": "Array",
+ "file": "src/scripts/parsers/in/p5.js/src/core/reference.js",
+ "line": 1,
+ "module": "Foundation",
+ "submodule": "Foundation",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// Declare the variable xCoordinates and assign it an array\n// with three numeric elements.\nlet xCoordinates = [25, 50, 75];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Three white circles drawn in a horizontal line on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index 0, which is 25.\n circle(xCoordinates[0], 50, 20);\n\n // Access the element at index 1, which is 50.\n circle(xCoordinates[1], 50, 20);\n\n // Access the element at index 2, which is 75.\n circle(xCoordinates[2], 50, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an array with three numeric elements.\nlet xCoordinates = [20, 40, 60];\n\n// Add another element to the end of the array.\nxCoordinates.push(80);\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index 0, which is 20.\n circle(xCoordinates[0], 50, 20);\n\n // Access the element at index 1, which is 40.\n circle(xCoordinates[1], 50, 20);\n\n // Access the element at index 2, which is 60.\n circle(xCoordinates[2], 50, 20);\n\n // Access the element at index 3, which is 80.\n circle(xCoordinates[3], 50, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index i and use it to draw a circle.\n for (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access each element of the array and use it to draw a circle.\n for (let x of xCoordinates) {\n circle(x, 50, 20);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe(\n 'Four white circles in a horizontal line on a gray background. The circles move randomly.'\n );\n}\n\nfunction draw() {\n background(200);\n\n for (let i = 0; i < xCoordinates.length; i += 1) {\n // Update the element at index i.\n xCoordinates[i] += random(-1, 1);\n\n // Use the element at index i to draw a circle.\n circle(xCoordinates[i], 50, 20);\n }\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A list that keeps several pieces of data in order.</p>\n<p>Arrays are helpful for storing related data. They can contain data of any\ntype. For example, an array could contain a list of someone's favorite\ncolors as strings. Arrays are created as follows:</p>\n<pre><code class=\"language-js\">let myArray = ['deeppink', 'darkorchid', 'magenta'];</code></pre><p>Each piece of data in an array is called an element. Each element has an\naddress, or index, within its array. The variable <code>myArray</code> refers to an\narray with three <a href=\"#/p5/String\">String</a> elements, <code>'deeppink'</code>,\n<code>'darkorchid'</code>, and <code>'magenta'</code>. Arrays are zero-indexed, which means\nthat <code>'deeppink'</code> is at index 0, <code>'darkorchid'</code> is at index 1, and\n'<code>magenta'</code> is at index 2. Array elements can be accessed using their\nindices as follows:</p>\n<pre><code class=\"language-js\">let zeroth = myArray[0]; // 'deeppink'\nlet first = myArray[1]; // 'darkorchid'\nlet second = myArray[2]; // 'magenta'</code></pre><p>Elements can be added to the end of an array by calling the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\" target=\"_blank\">push()</a>\nmethod as follows:</p>\n<pre><code class=\"language-js\">myArray.push('lavender');\n\nlet third = myArray[3]; // 'lavender'</code></pre><p>See <a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays\" target=\"_blank\">MDN</a>\nfor more information about arrays.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1155,
"itemtype": "property",
- "name": "PORTRAIT",
- "type": "String",
- "final": 1,
+ "name": "class",
+ "file": "src/scripts/parsers/in/p5.js/src/core/reference.js",
+ "line": 1,
+ "module": "Foundation",
+ "submodule": "Foundation",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\n// Declare a frog variable.\nlet fifi;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variable a new Frog object.\n fifi = new Frog(50, 50, 20);\n\n describe('A frog face drawn on a blue background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frog.\n fifi.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n describe('Two frog faces drawn next to each other on a blue background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n // Slow the frame rate.\n frameRate(1);\n\n describe('Two frog faces on a blue background. The frogs hop around randomly.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n\n // Move the frogs.\n frog1.hop();\n frog2.hop();\n\n // Wrap around if they've hopped off the edge.\n frog1.checkEdges();\n frog2.checkEdges();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n\n hop() {\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n\n checkEdges() {\n if (this.x > width) {\n this.x = this.x - width;\n } else if (this.x < 0) {\n this.x = width - this.x;\n }\n\n if (this.y > height) {\n this.y = this.y - height;\n } else if (this.y < 0) {\n this.y = height - this.y;\n }\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Create an array that will hold frogs.\nlet frogs = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add Frog objects to the array.\n for (let i = 0; i < 5; i += 1) {\n // Calculate random coordinates and size.\n let x = random(0, 100);\n let y = random(0, 100);\n let s = random(2, 20);\n\n // Create a new Frog object.\n let frog = new Frog(x, y, s);\n\n // Add the Frog to the array.\n frogs.push(frog);\n }\n\n // Slow the frame rate.\n frameRate(1);\n\n describe(\n 'Five frog faces on a blue background. The frogs hop around randomly.'\n );\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n for (let frog of frogs) {\n // Show the frog.\n frog.show();\n\n // Move the frog.\n frog.hop();\n\n // Wrap around if they've hopped off the edge.\n frog.checkEdges();\n }\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n\n hop() {\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n\n checkEdges() {\n if (this.x > width) {\n this.x = this.x - width;\n } else if (this.x < 0) {\n this.x = width - this.x;\n }\n\n if (this.y > height) {\n this.y = this.y - height;\n } else if (this.y < 0) {\n this.y = height - this.y;\n }\n }\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A template for creating objects of a particular type.</p>\n<p>Classes can make it easier to program with objects. For example, a <code>Frog</code>\nclass could create objects that behave like frogs. Each object created\nusing a class is called an instance of that class. All instances of a class\nare the same type. Here's an example of creating an instance of a <code>Frog</code>\nclass:</p>\n<pre><code class=\"language-js\">let fifi = new Frog(50, 50, 20);</code></pre><p>The variable <code>fifi</code> refers to an instance of the <code>Frog</code> class. The keyword\n<code>new</code> is used to call the <code>Frog</code> class' constructor in the statement\n<code>new Frog()</code>. Altogether, a new <code>Frog</code> object was created and assigned to\nthe variable <code>fifi</code>. Classes are templates, so they can be used to create\nmore than one instance:</p>\n<pre><code class=\"language-js\">// First Frog instance.\nlet frog1 = new Frog(25, 50, 10);\n\n// Second Frog instance.\nlet frog2 = new Frog(75, 50, 10);</code></pre><p>A simple <code>Frog</code> class could be declared as follows:</p>\n<pre><code class=\"language-js\">class Frog {\n constructor(x, y, size) {\n // This code runs once when an instance is created.\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n // This code runs once when myFrog.show() is called.\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n\n hop() {\n // This code runs once when myFrog.hop() is called.\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n}</code></pre><p>Class declarations begin with the keyword <code>class</code> followed by the class\nname, such as <code>Frog</code>, and curly braces <code>{}</code>. Class names should use\n<code>PascalCase</code> and can't have spaces in their names. For example, naming a\nclass <code>Kermit The Frog</code> with spaces between each word would throw a\n<code>SyntaxError</code>. The code between the curly braces <code>{}</code> defines the class.</p>\n<p>Functions that belong to a class are called methods. <code>constructor()</code>,\n<code>show()</code>, and <code>hop()</code> are methods in the <code>Frog</code> class. Methods define an\nobject's behavior. Methods can accept parameters and return values, just\nlike functions. Note that methods don't use the <code>function</code> keyword.</p>\n<p><code>constructor()</code> is a special method that's called once when an instance of\nthe class is created. The statement <code>new Frog()</code> calls the <code>Frog</code> class'\n<code>constructor()</code> method.</p>\n<p>A class definition is a template for instances. The keyword <code>this</code> refers\nto an instance's data and methods. For example, each <code>Frog</code> instance has\nunique coordinates stored in <code>this.x</code> and <code>this.y</code>. The <code>show()</code> method\nuses those coordinates to draw the frog. The <code>hop()</code> method updates those\ncoordinates when called. Once a <code>Frog</code> instance is created, its data and\nmethods can be accessed using the dot operator <code>.</code> as follows:</p>\n<pre><code class=\"language-js\">// Draw a lily pad.\nfill('green');\nstroke('green');\ncircle(fifi.x, fifi.y, 2 * fifi.size);\n\n// Show the Frog.\nfifi.show();\n\n// Hop.\nfifi.hop();</code></pre>"
},
{
- "file": "src/core/constants.js",
- "line": 1165,
"itemtype": "property",
- "name": "GRID",
- "type": "String",
- "final": 1,
+ "name": "for",
+ "file": "src/scripts/parsers/in/p5.js/src/core/reference.js",
+ "line": 1,
+ "module": "Foundation",
+ "submodule": "Foundation",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Five black vertical lines on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw vertical lines using a loop.\n for (let x = 10; x < 100; x += 20) {\n line(x, 25, x, 75);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Five white concentric circles drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw concentric circles using a loop.\n for (let d = 100; d > 0; d -= 20) {\n circle(50, 50, d);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A grid of black dots on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the spacing for points on the grid.\n let space = 10;\n\n // Increase the stroke weight.\n strokeWeight(3);\n\n // Loop from the left to the right.\n for (let x = space; x < 100; x += space) {\n // Loop from the top to the bottom.\n for (let y = space; y < 100; y += space) {\n point(x, y);\n }\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an array of numbers.\nlet xCoordinates = [20, 40, 60, 80];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index i and use it to draw a circle.\n for (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an array of numbers.\nlet xCoordinates = [20, 40, 60, 80];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access each element of the array and use it to draw a circle.\n for (let x of xCoordinates) {\n circle(x, 50, 20);\n }\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A way to repeat a block of code when the number of iterations is known.</p>\n<p><code>for</code> loops are helpful for repeating statements a certain number of times.\nFor example, a <code>for</code> loop makes it easy to express the idea\n\"draw five lines\" like so:</p>\n<pre><code class=\"language-js\">for (let x = 10; x < 100; x += 20) {\n line(x, 25, x, 75);\n}</code></pre><p>The loop's header begins with the keyword <code>for</code>. Loops generally count up\nor count down as they repeat, or iterate. The statements in parentheses\n<code>let x = 10; x < 100; x += 20</code> tell the loop how it should repeat:</p>\n<ul><li><code>let x = 10</code> tells the loop to start counting at <code>10</code> and keep track of iterations using the variable <code>x</code>.</li><li><code>x < 100</code> tells the loop to count up to, but not including, <code>100</code>.</li><li><code>x += 20</code> tells the loop to count up by <code>20</code> at the end of each iteration.</li></ul><p>The code between the curly braces <code>{}</code> is the loop's body. Statements in the\nloop body are repeated during each iteration of the loop.</p>\n<p>It's common to create infinite loops accidentally. When this happens,\nsketches may become unresponsive and the web browser may display a warning.\nFor example, the following loop never stops iterating because it doesn't\ncount up:</p>\n<pre><code class=\"language-js\">for (let x = 10; x < 100; x = 20) {\n line(x, 25, x, 75);\n}</code></pre><p>The statement <code>x = 20</code> keeps the variable <code>x</code> stuck at <code>20</code>, which is\nalways less than <code>100</code>.</p>\n<p><code>for</code> loops can also count down:</p>\n<pre><code class=\"language-js\">for (let d = 100; d > 0; d -= 10) {\n circle(50, 50, d);\n}</code></pre><p><code>for</code> loops can also contain other loops. The following nested loop draws a\ngrid of points:</p>\n<pre><code class=\"language-js\">// Loop from left to right.\nfor (let x = 10; x < 100; x += 10) {\n\n // Loop from top to bottom.\n for (let y = 10; y < 100; y += 10) {\n point(x, y);\n }\n\n}</code></pre><p><code>for</code> loops are also helpful for iterating through the elements of an\narray. For example, it's common to iterate through an array that contains\ninformation about where or what to draw:</p>\n<pre><code class=\"language-js\">// Create an array of x-coordinates.\nlet xCoordinates = [20, 40, 60];\n\nfor (let i = 0; i < xCoordinates.length; i += 1) {\n // Update the element.\n xCoordinates[i] += random(-1, 1);\n\n // Draw a circle.\n circle(xCoordinates[i], 50, 20);\n}</code></pre><p>If the array's values aren't modified, the <code>for...of</code> statement can\nsimplify the code. They're similar to <code>for</code> loops in Python and <code>for-each</code>\nloops in C++ and Java. The following loops have the same effect:</p>\n<pre><code class=\"language-js\">// Draw circles with a for loop.\nlet xCoordinates = [20, 40, 60];\n\nfor (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n}</code></pre><pre><code class=\"language-js\">// Draw circles with a for...of statement.\nlet xCoordinates = [20, 40, 60];\n\nfor (let x of xCoordinates) {\n circle(x, 50, 20);\n}</code></pre><p>In the code snippets above, the variables <code>i</code> and <code>x</code> have different roles.</p>\n<p>In the first snippet, <code>i</code> counts from <code>0</code> up to <code>2</code>, which is one less than\n<code>xCoordinates.length</code>. <code>i</code> is used to access the element in <code>xCoordinates</code>\nat index <code>i</code>.</p>\n<p>In the second code snippet, <code>x</code> isn't keeping track of the loop's progress\nor an index. During each iteration, <code>x</code> contains the next element of\n<code>xCoordinates</code>. <code>x</code> starts from the beginning of <code>xCoordinates</code> (<code>20</code>) and\nupdates its value to <code>40</code> and then <code>60</code> during the next iterations.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1171,
"itemtype": "property",
- "name": "AXES",
- "type": "String",
- "final": 1,
+ "name": "while",
+ "file": "src/scripts/parsers/in/p5.js/src/core/reference.js",
+ "line": 1,
+ "module": "Foundation",
+ "submodule": "Foundation",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Five black vertical lines on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Declare a variable to keep track of iteration.\n let x = 10;\n\n // Repeat as long as x < 100\n while (x < 100) {\n line(x, 25, x, 75);\n\n // Increment by 20.\n x += 20;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe(\n \"A gray square with several concentric circles at the center. The circles' sizes decrease at random increments.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n let d = 100;\n let minSize = 5;\n\n while (d > minSize) {\n circle(50, 50, d);\n d -= random(5, 15);\n }\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A way to repeat a block of code.</p>\n<p><code>while</code> loops are helpful for repeating statements while a condition is\n<code>true</code>. They're like <code>if</code> statements that repeat. For example, a <code>while</code>\nloop makes it easy to express the idea \"draw several lines\" like so:</p>\n<pre><code class=\"language-js\">// Declare a variable to keep track of iteration.\nlet x = 10;\n\n// Repeat as long as x < 100\nwhile (x < 100) {\n line(x, 25, x, 75);\n\n // Increment by 20.\n x += 20;\n}</code></pre><p>The loop's header begins with the keyword <code>while</code>. Loops generally count up\nor count down as they repeat, or iterate. The statement in parentheses\n<code>x < 100</code> is a condition the loop checks each time it iterates. If the\ncondition is <code>true</code>, the loop runs the code between the curly braces <code>{}</code>,\nThe code between the curly braces is called the loop's body. If the\ncondition is <code>false</code>, the body is skipped and the loop is stopped.</p>\n<p>It's common to create infinite loops accidentally. For example, the\nfollowing loop never stops iterating because it doesn't count up:</p>\n<pre><code class=\"language-js\">// Declare a variable to keep track of iteration.\nlet x = 10;\n\n// Repeat as long as x < 100\nwhile (x < 100) {\n line(x, 25, x, 75);\n}\n\n// This should be in the loop's body!\nx += 20;</code></pre><p>The statement <code>x += 20</code> appears after the loop's body. That means the\nvariable <code>x</code> is stuck at <code>10</code>, which is always less than <code>100</code>.</p>\n<p><code>while</code> loops are useful when the number of iterations isn't known in\nadvance. For example, concentric circles could be drawn at random\nincrements:</p>\n<pre><code class=\"language-js\">let d = 100;\nlet minSize = 5;\n\nwhile (d > minSize) {\n circle(50, 50, d);\n d -= random(10);\n}</code></pre>"
},
{
- "file": "src/core/constants.js",
- "line": 1177,
"itemtype": "property",
- "name": "LABEL",
- "type": "String",
- "final": 1,
+ "name": "console",
+ "file": "src/scripts/parsers/in/p5.js/src/core/reference.js",
+ "line": 1,
+ "module": "Foundation",
+ "submodule": "Foundation",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n noCanvas();\n\n // Prints \"Hello!\" to the console.\n console.log('Hello!');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Try to load an image from a fake URL.\n // Call handleError() if the image fails to load.\n loadImage('https://example.com/cat.jpg', handleImage, handleError);\n}\n\n// Displays the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n\n describe('A cat on a gray background.');\n}\n\n// Prints the error.\nfunction handleError(error) {\n console.error('Oops!', error);\n\n describe('A gray square.');\n}\n</code>\n</div>"
+ ],
+ "description": "<p>Prints a message to the web browser's console.</p>\n<p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/console\" target=\"_blank\">console</a>\nobject is helpful for printing messages while debugging. For example, it's\ncommon to add a <code>console.log()</code> statement while studying how a section of\ncode works:</p>\n<pre><code class=\"language-js\">if (isPlaying === true) {\n // Add a console.log() statement to make sure this block of code runs.\n console.log('Got here!');\n\n // Game logic.\n}</code></pre><p><code>console.error()</code> is helpful for tracking errors because it prints\nformatted messages. For example, it's common to encounter errors when\nloading media assets:</p>\n<pre><code class=\"language-js\">// Logs an error message with special formatting.\nfunction handleFailure(error) {\n console.error('Oops!', error);\n}\n\n// Try to load an image and call handleError() if it fails.\nloadImage('https://example.com/cat.jpg', handleImage, handleError);</code></pre>"
},
{
- "file": "src/core/constants.js",
- "line": 1182,
"itemtype": "property",
- "name": "FALLBACK",
- "type": "String",
- "final": 1,
+ "name": "drawingContext",
+ "file": "src/scripts/parsers/in/p5.js/src/core/rendering.js",
+ "line": 628,
+ "module": "Rendering",
+ "submodule": "Rendering",
"class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the circle using shadows.\n drawingContext.shadowOffsetX = 5;\n drawingContext.shadowOffsetY = -5;\n drawingContext.shadowBlur = 10;\n drawingContext.shadowColor = 'black';\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe(\"A white circle on a gray background. The circle's edges are shadowy.\");\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background('skyblue');\n\n // Style the circle using a color gradient.\n let myGradient = drawingContext.createRadialGradient(50, 50, 3, 50, 50, 40);\n myGradient.addColorStop(0, 'yellow');\n myGradient.addColorStop(0.6, 'orangered');\n myGradient.addColorStop(1, 'yellow');\n drawingContext.fillStyle = myGradient;\n drawingContext.strokeStyle = 'rgba(0, 0, 0, 0)';\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe('A fiery sun drawn on a light blue background.');\n}\n</code>\n</div>"
+ ],
+ "description": "<p>A system variable that provides direct access to the sketch's\n<code><canvas></code> element.</p>\n<p>The <code><canvas></code> element provides many specialized features that aren't\nincluded in the p5.js library. The <code>drawingContext</code> system variable\nprovides access to these features by exposing the sketch's\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D\">CanvasRenderingContext2D</a>\nobject.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1188,
"itemtype": "property",
- "name": "CONTAIN",
- "type": "String",
- "final": 1,
- "class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "name": "width",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 2466,
+ "module": "DOM",
+ "submodule": "DOM",
+ "class": "p5.Element",
+ "example": [],
+ "description": "A <code>Number</code> property that stores the element's width."
},
{
- "file": "src/core/constants.js",
- "line": 1194,
"itemtype": "property",
- "name": "COVER",
- "type": "String",
- "final": 1,
- "class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "name": "height",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 2466,
+ "module": "DOM",
+ "submodule": "DOM",
+ "class": "p5.Element",
+ "example": [],
+ "description": "A <code>Number</code> property that stores the element's height."
},
{
- "file": "src/core/constants.js",
- "line": 1200,
"itemtype": "property",
- "name": "UNSIGNED_BYTE",
- "type": "String",
- "final": 1,
- "class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "name": "elt",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 2466,
+ "module": "DOM",
+ "submodule": "DOM",
+ "class": "p5.Element",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Set the border style for the\n // canvas.\n cnv.elt.style.border = '5px dashed deeppink';\n\n describe('A gray square with a pink border drawn with dashed lines.');\n}\n</code>\n</div>"
+ ],
+ "description": "<p>The element's underlying <code>HTMLElement</code> object.</p>\n<p>The\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement\" target=\"_blank\">HTMLElement</a>\nobject's properties and methods can be used directly.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1206,
"itemtype": "property",
- "name": "UNSIGNED_INT",
- "type": "String",
- "final": 1,
- "class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "name": "file",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.File.js",
+ "line": 150,
+ "module": "DOM",
+ "submodule": "DOM",
+ "class": "p5.File",
+ "example": [
+ "<div>\n<code>\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayInfo() when the file loads.\n let input = createFileInput(displayInfo);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');\n}\n\n// Use the p5.File once it loads.\nfunction displayInfo(file) {\n background(200);\n\n // Display the p5.File's name.\n text(file.name, 10, 10, 80, 40);\n\n // Display the p5.File's type and subtype.\n text(`${file.type}/${file.subtype}`, 10, 70);\n\n // Display the p5.File's size in bytes.\n text(file.size, 10, 90);\n}\n</code>\n</div>"
+ ],
+ "description": "Underlying\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File\" target=\"_blank\">File</a>\nobject. All <code>File</code> properties and methods are accessible."
},
{
- "file": "src/core/constants.js",
- "line": 1212,
"itemtype": "property",
- "name": "FLOAT",
- "type": "String",
- "final": 1,
- "class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "name": "type",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.File.js",
+ "line": 150,
+ "module": "DOM",
+ "submodule": "DOM",
+ "class": "p5.File",
+ "example": [
+ "<div>\n<code>\n// Use the file input to load a file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayType() when the file loads.\n let input = createFileInput(displayType);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its type is written in black.');\n}\n\n// Display the p5.File's type once it loads.\nfunction displayType(file) {\n background(200);\n\n // Display the p5.File's type.\n text(`This is file's type is: ${file.type}`, 10, 10, 80, 80);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>The file\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types\" target=\"_blank\">MIME type</a>\nas a string.</p>\n<p>For example, <code>'image'</code> and <code>'text'</code> are both MIME types.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1218,
"itemtype": "property",
- "name": "HALF_FLOAT",
- "type": "String",
- "final": 1,
- "class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "name": "subtype",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.File.js",
+ "line": 150,
+ "module": "DOM",
+ "submodule": "DOM",
+ "class": "p5.File",
+ "example": [
+ "<div>\n<code>\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displaySubtype() when the file loads.\n let input = createFileInput(displaySubtype);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its subtype is written in black.');\n}\n\n// Display the p5.File's type once it loads.\nfunction displaySubtype(file) {\n background(200);\n\n // Display the p5.File's subtype.\n text(`This is file's subtype is: ${file.subtype}`, 10, 10, 80, 80);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>The file subtype as a string.</p>\n<p>For example, a file with an <code>'image'</code>\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types\" target=\"_blank\">MIME type</a>\nmay have a subtype such as <code>png</code> or <code>jpeg</code>.</p>\n"
},
{
- "file": "src/core/constants.js",
- "line": 1224,
"itemtype": "property",
- "name": "RGBA",
- "type": "String",
- "final": 1,
- "class": "p5",
- "module": "Constants",
- "submodule": "Constants"
+ "name": "name",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.File.js",
+ "line": 150,
+ "module": "DOM",
+ "submodule": "DOM",
+ "class": "p5.File",
+ "example": [
+ "<div>\n<code>\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayName() when the file loads.\n let input = createFileInput(displayName);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its name is written in black.');\n}\n\n// Display the p5.File's name once it loads.\nfunction displayName(file) {\n background(200);\n\n // Display the p5.File's name.\n text(`This is file's name is: ${file.name}`, 10, 10, 80, 80);\n}\n</code>\n</div>"
+ ],
+ "description": "The file name as a string."
},
{
- "file": "src/core/environment.js",
- "line": 21,
- "description": "<p>Displays text in the web browser's console.</p>\n<p><code>print()</code> is helpful for printing values while debugging. Each call to\n<code>print()</code> creates a new line of text.</p>\n<p>Note: Call <code>print('\\n')</code> to print a blank line. Calling <code>print()</code> without\nan argument opens the browser's dialog for printing documents.</p>\n",
- "itemtype": "method",
- "name": "print",
- "params": [
- {
- "name": "contents",
- "description": "<p>content to print to the console.</p>\n",
- "type": "Any"
- }
- ],
+ "itemtype": "property",
+ "name": "size",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.File.js",
+ "line": 150,
+ "module": "DOM",
+ "submodule": "DOM",
+ "class": "p5.File",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Prints \"hello, world\" to the console.\n print('hello, world');\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n let name = 'ada';\n // Prints \"hello, ada\" to the console.\n print(`hello, ${name}`);\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Use the file input to load a file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displaySize() when the file loads.\n let input = createFileInput(displaySize);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its size in bytes is written in black.');\n}\n\n// Display the p5.File's size in bytes once it loads.\nfunction displaySize(file) {\n background(200);\n\n // Display the p5.File's size.\n text(`This is file has ${file.size} bytes.`, 10, 10, 80, 80);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "The number of bytes in the file."
},
{
- "file": "src/core/environment.js",
- "line": 69,
- "description": "<p>A <code>Number</code> variable that tracks the number of frames drawn since the sketch\nstarted.</p>\n<p><code>frameCount</code>'s value is 0 inside <a href=\"#/p5/setup\">setup()</a>. It\nincrements by 1 each time the code in <a href=\"#/p5/draw\">draw()</a>\nfinishes executing.</p>\n",
"itemtype": "property",
- "name": "frameCount",
- "type": "Integer",
- "readonly": "",
+ "name": "data",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.File.js",
+ "line": 150,
+ "module": "DOM",
+ "submodule": "DOM",
+ "class": "p5.File",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the value of\n // frameCount.\n textSize(30);\n textAlign(CENTER, CENTER);\n text(frameCount, 50, 50);\n\n describe('The number 0 written in black in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the frameRate to 30.\n frameRate(30);\n\n textSize(30);\n textAlign(CENTER, CENTER);\n\n describe('A number written in black in the middle of a gray square. Its value increases rapidly.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the value of\n // frameCount.\n text(frameCount, 50, 50);\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Use the file input to load a file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayData() when the file loads.\n let input = createFileInput(displayData);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its data is written in black.');\n}\n\n// Display the p5.File's data once it loads.\nfunction displayData(file) {\n background(200);\n\n // Display the p5.File's data, which looks like a random string of characters.\n text(file.data, 10, 10, 80, 80);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "<p>A string containing the file's data.</p>\n<p>Data can be either image data, text contents, or a parsed object in the\ncase of JSON and <a href=\"#/p5.XML\">p5.XML</a> objects.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 124,
- "description": "<p>A <code>Number</code> variable that tracks the number of milliseconds it took to draw\nthe last frame.</p>\n<p><code>deltaTime</code> contains the amount of time it took\n<a href=\"#/p5/draw\">draw()</a> to execute during the previous frame. It's\nuseful for simulating physics.</p>\n",
"itemtype": "property",
- "name": "deltaTime",
- "type": "Integer",
- "readonly": "",
+ "name": "src",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 1782,
+ "module": "DOM",
+ "submodule": "DOM",
+ "class": "p5.MediaElement",
"example": [
- "\n<div>\n<code>\nlet x = 0;\nlet speed = 0.05;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the frameRate to 30.\n frameRate(30);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Use deltaTime to calculate\n // a change in position.\n let deltaX = speed * deltaTime;\n\n // Update the x variable.\n x += deltaX;\n\n // Reset x to 0 if it's\n // greater than 100.\n if (x > 100) {\n x = 0;\n }\n\n // Use x to set the circle's\n // position.\n circle(x, 50, 20);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet beat;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"https://p5js.org/reference/assets/beat.mp3\" written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n textWrap(CHAR);\n text(beat.src, 10, 10, 80, 80);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "Path to the media element's source as a string."
},
{
- "file": "src/core/environment.js",
- "line": 174,
- "description": "<p>A <code>Boolean</code> variable that's <code>true</code> if the browser is focused and <code>false</code> if\nnot.</p>\n<p>Note: The browser window can only receive input if it's focused.</p>\n",
"itemtype": "property",
- "name": "focused",
- "type": "Boolean",
- "readonly": "",
+ "name": "width",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 2243,
+ "type": "Number",
+ "module": "Image",
+ "submodule": "Image",
+ "class": "p5.Image",
"example": [
- "\n<div>\n<code>\n// Open this example in two separate browser\n// windows placed side-by-side to demonstrate.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square changes color from green to red when the browser window is out of focus.');\n}\n\nfunction draw() {\n // Change the background color\n // when the browser window\n // goes in/out of focus.\n if (focused === true) {\n background(0, 255, 0);\n } else {\n background(255, 0, 0);\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Calculate the center coordinates.\n let x = img.width / 2;\n let y = img.height / 2;\n\n // Draw a circle at the image's center.\n circle(x, y, 20);\n\n describe('An image of a mountain landscape with a white circle drawn in the middle.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "The image's width in pixels."
},
{
- "file": "src/core/environment.js",
- "line": 209,
- "description": "<p>Changes the cursor's appearance.</p>\n<p>The first parameter, <code>type</code>, sets the type of cursor to display. The\nbuilt-in options are <code>ARROW</code>, <code>CROSS</code>, <code>HAND</code>, <code>MOVE</code>, <code>TEXT</code>, and <code>WAIT</code>.\n<code>cursor()</code> also recognizes standard CSS cursor properties passed as\nstrings: <code>'help'</code>, <code>'wait'</code>, <code>'crosshair'</code>, <code>'not-allowed'</code>, <code>'zoom-in'</code>,\nand <code>'grab'</code>. If the path to an image is passed, as in\n<code>cursor('assets/target.png')</code>, then the image will be used as the cursor.\nImages 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>\n<p>The parameters <code>x</code> and <code>y</code> are optional. If an image is used for the\ncursor, <code>x</code> and <code>y</code> set the location pointed to within the image. They are\nboth 0 by default, so the cursor points to the image's top-left corner. <code>x</code>\nand <code>y</code> must be less than the image's width and height, respectively.</p>\n",
- "itemtype": "method",
- "name": "cursor",
- "params": [
- {
- "name": "type",
- "description": "<p>Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.\n Native CSS properties: 'grab', 'progress', and so on.\n Path to cursor image.</p>\n",
- "type": "String|Constant"
- },
- {
- "name": "x",
- "description": "<p>horizontal active spot of the cursor.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "y",
- "description": "<p>vertical active spot of the cursor.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
+ "itemtype": "property",
+ "name": "height",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 2243,
+ "module": "Image",
+ "submodule": "Image",
+ "class": "p5.Image",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. The cursor appears as crosshairs.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the cursor to crosshairs: +\n cursor(CROSS);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.');\n}\n\nfunction draw() {\n background(200);\n\n // Divide the canvas into quadrants.\n line(50, 0, 50, 100);\n line(0, 50, 100, 50);\n\n // Change cursor based on mouse position.\n if (mouseX < 50 && mouseY < 50) {\n cursor(CROSS);\n } else if (mouseX > 50 && mouseY < 50) {\n cursor('progress');\n } else if (mouseX > 50 && mouseY > 50) {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');\n } else {\n cursor('grab');\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // Change the cursor's active spot\n // when the mouse is pressed.\n if (mouseIsPressed === true) {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8);\n } else {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Calculate the center coordinates.\n let x = img.width / 2;\n let y = img.height / 2;\n\n // Draw a circle at the image's center.\n circle(x, y, 20);\n\n describe('An image of a mountain landscape with a white circle drawn in the middle.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "The image's height in pixels."
},
{
- "file": "src/core/environment.js",
- "line": 330,
- "description": "<p>Sets the number of frames to draw per second.</p>\n<p>Calling <code>frameRate()</code> with one numeric argument, as in <code>frameRate(30)</code>,\nattempts to draw 30 frames per second (FPS). The target frame rate may not\nbe achieved depending on the sketch's processing needs. Most computers\ndefault to a frame rate of 60 FPS. Frame rates of 24 FPS and above are\nfast enough for smooth animations.</p>\n<p>Calling <code>frameRate()</code> without an argument returns the current frame rate.\nThe value returned is an approximation.</p>\n",
- "itemtype": "method",
- "name": "frameRate",
- "chainable": 1,
+ "itemtype": "property",
+ "name": "pixels",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 2243,
+ "type": "Number[]",
+ "module": "Image",
+ "submodule": "Image",
+ "class": "p5.Image",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the x variable based\n // on the current frameCount.\n let x = frameCount % 100;\n\n // If the mouse is pressed,\n // decrease the frame rate.\n if (mouseIsPressed === true) {\n frameRate(10);\n } else {\n frameRate(60);\n }\n\n // Use x to set the circle's\n // position.\n circle(x, 50, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A number written in black on a gray background. The number decreases when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // If the mouse is pressed, do lots\n // of math to slow down drawing.\n if (mouseIsPressed === true) {\n for (let i = 0; i < 1000000; i += 1) {\n random();\n }\n }\n\n // Get the current frame rate\n // and display it.\n let fps = frameRate();\n text(fps, 50, 50);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to red.\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 255;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A red square drawn in the middle of a gray square.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment",
- "overloads": [
- {
- "line": 330,
- "params": [
- {
- "name": "fps",
- "description": "<p>number of frames to draw per second.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 404,
- "params": [],
- "return": {
- "description": "current frame rate.",
- "type": "Number"
- }
- }
- ]
+ "description": "<p>An array containing the color of each pixel in the image.</p>\n<p>Colors are stored as numbers representing red, green, blue, and alpha\n(RGBA) values. <code>img.pixels</code> is a one-dimensional array for performance\nreasons.</p>\n<p>Each pixel occupies four elements in the pixels array, one for each\nRGBA value. For example, the pixel at coordinates (0, 0) stores its\nRGBA values at <code>img.pixels[0]</code>, <code>img.pixels[1]</code>, <code>img.pixels[2]</code>,\nand <code>img.pixels[3]</code>, respectively. The next pixel at coordinates (1, 0)\nstores its RGBA values at <code>img.pixels[4]</code>, <code>img.pixels[5]</code>,\n<code>img.pixels[6]</code>, and <code>img.pixels[7]</code>. And so on. The <code>img.pixels</code> array\nfor a 100×100 <a href=\"#/p5.Image\">p5.Image</a> object has\n100 × 100 × 4 = 40,000 elements.</p>\n<p>Accessing the RGBA values for a pixel in the image requires a little\nmath as shown in the examples below. The\n<a href=\"#/p5.Image/loadPixels\">img.loadPixels()</a>\nmethod must be called before accessing the <code>img.pixels</code> array. The\n<a href=\"#/p5.Image/updatePixels\">img.updatePixels()</a> method must be\ncalled after any changes are made.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 447,
- "description": "<p>Returns the target frame rate.</p>\n<p>The value is either the system frame rate or the last value passed to\n<a href=\"#/p5/frameRate\">frameRate()</a>.</p>\n",
- "itemtype": "method",
- "name": "getTargetFrameRate",
- "return": {
- "description": "_targetFrameRate",
- "type": "Number"
- },
+ "itemtype": "property",
+ "name": "columns",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 1360,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
+ "module": "IO",
+ "submodule": "Table",
+ "class": "p5.Table",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The number 20 written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the frame rate to 20.\n frameRate(20);\n\n // Get the target frame rate and\n // display it.\n let fps = getTargetFrameRate();\n text(fps, 43, 54);\n}\n</code>\n</div>"
+ "<div >\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas\n createCanvas(200, 200);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Set text properties for drawing on the canvas\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n\n // Display the column names on the canvas\n for (let c = 0; c < table.getColumnCount(); c++) {\n text('column ' + c + ' is named ' + table.columns[c], 10, 30 + c * 20);\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "An array containing the names of the columns in the table, if the \"header\" the table is\nloaded with the \"header\" parameter."
},
{
- "file": "src/core/environment.js",
- "line": 482,
- "description": "<p>Hides the cursor from view.</p>\n",
- "itemtype": "method",
- "name": "noCursor",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n // Hide the cursor.\n noCursor();\n}\n\nfunction draw() {\n background(200);\n\n circle(mouseX, mouseY, 10);\n\n describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "itemtype": "property",
+ "name": "rows",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 1360,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
+ "module": "IO",
+ "submodule": "Table",
+ "class": "p5.Table",
+ "example": [],
+ "description": "An array containing the <a href=\"#/p5.Table\">p5.TableRow</a> objects that make up the\nrows of the table. The same result as calling <a href=\"/reference/p5.Table/getRows/\">getRows()</a>"
},
{
- "file": "src/core/environment.js",
- "line": 508,
- "description": "<p>A <code>String</code> variable with the WebGL version in use.</p>\n<p><code>webglVersion</code>'s value equals one of the following string constants:</p>\n<ul>\n<li><code>WEBGL2</code> whose value is <code>'webgl2'</code>,</li>\n<li><code>WEBGL</code> whose value is <code>'webgl'</code>, or</li>\n<li><code>P2D</code> whose value is <code>'p2d'</code>. This is the default for 2D sketches.</li>\n</ul>\n<p>See <a href=\"#/p5/setAttributes\">setAttributes()</a> for ways to set the\nWebGL version.</p>\n",
"itemtype": "property",
- "name": "webglVersion",
- "type": "String",
- "readonly": "",
+ "name": "x",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3904,
+ "module": "Math",
+ "class": "p5.Vector",
+ "example": [],
+ "description": "The x component of the vector"
+ },
+ {
+ "itemtype": "property",
+ "name": "y",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3904,
+ "module": "Math",
+ "class": "p5.Vector",
+ "example": [],
+ "description": "The y component of the vector"
+ },
+ {
+ "itemtype": "property",
+ "name": "z",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3904,
+ "module": "Math",
+ "class": "p5.Vector",
+ "example": [],
+ "description": "The z component of the vector"
+ },
+ {
+ "itemtype": "property",
+ "name": "eyeX",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1199,
+ "type": "Number",
+ "module": "3D",
+ "submodule": "Camera",
+ "class": "p5.Camera",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Display the current WebGL version.\n text(webglVersion, 42, 54);\n\n describe('The text \"p2d\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet font;\n\nfunction preload() {\n // Load a font to use.\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n // Create a canvas using WEBGL mode.\n createCanvas(100, 50, WEBGL);\n background(200);\n\n // Display the current WebGL version.\n fill(0);\n textFont(font);\n text(webglVersion, -15, 5);\n\n describe('The text \"webgl2\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet font;\n\nfunction preload() {\n // Load a font to use.\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n // Create a canvas using WEBGL mode.\n createCanvas(100, 50, WEBGL);\n\n // Set WebGL to version 1.\n setAttributes({ version: 1 });\n\n background(200);\n\n // Display the current WebGL version.\n fill(0);\n textFont(font);\n text(webglVersion, -14, 5);\n\n describe('The text \"webgl\" written in black on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The text \"eyeX: 0\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of eyeX, rounded to the nearest integer.\n text(`eyeX: ${round(cam.eyeX)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to move left and right as the camera moves. The text \"eyeX: X\" is written in black beneath the cube. X oscillates between -25 and 25.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new x-coordinate.\n let x = 25 * sin(frameCount * 0.01);\n\n // Set the camera's position.\n cam.setPosition(x, -400, 800);\n\n // Display the value of eyeX, rounded to the nearest integer.\n text(`eyeX: ${round(cam.eyeX)}`, 0, 55);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "<p>The camera’s x-coordinate.</p>\n<p>By default, the camera’s x-coordinate is set to 0 in \"world\" space.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 590,
- "description": "<p>A <code>Number</code> variable that stores the width of the screen display.</p>\n<p><code>displayWidth</code> is useful for running full-screen programs. Its value\ndepends on the current <a href=\"#/p5/pixelDensity\">pixelDensity()</a>.</p>\n<p>Note: The actual screen width can be computed as\n<code>displayWidth * pixelDensity()</code>.</p>\n",
"itemtype": "property",
- "name": "displayWidth",
+ "name": "eyeY",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1199,
"type": "Number",
- "readonly": "",
+ "module": "3D",
+ "submodule": "Camera",
+ "class": "p5.Camera",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Set the canvas' width and height\n // using the display's dimensions.\n createCanvas(displayWidth, displayHeight);\n\n background(200);\n\n describe('A gray canvas that is the same size as the display.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n // Set the camera.\n setCamera(cam);\n\n describe(\n 'A white cube on a gray background. The text \"eyeY: -400\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of eyeY, rounded to the nearest integer.\n text(`eyeY: ${round(cam.eyeY)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to move up and down as the camera moves. The text \"eyeY: Y\" is written in black beneath the cube. Y oscillates between -374 and -425.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new y-coordinate.\n let y = 25 * sin(frameCount * 0.01) - 400;\n\n // Set the camera's position.\n cam.setPosition(0, y, 800);\n\n // Display the value of eyeY, rounded to the nearest integer.\n text(`eyeY: ${round(cam.eyeY)}`, 0, 55);\n}\n</code>\n</div>"
],
- "alt": "This example does not render anything.",
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "<p>The camera’s y-coordinate.</p>\n<p>By default, the camera’s y-coordinate is set to 0 in \"world\" space.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 621,
- "description": "<p>A <code>Number</code> variable that stores the height of the screen display.</p>\n<p><code>displayHeight</code> is useful for running full-screen programs. Its value\ndepends on the current <a href=\"#/p5/pixelDensity\">pixelDensity()</a>.</p>\n<p>Note: The actual screen height can be computed as\n<code>displayHeight * pixelDensity()</code>.</p>\n",
"itemtype": "property",
- "name": "displayHeight",
+ "name": "eyeZ",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1199,
"type": "Number",
- "readonly": "",
+ "module": "3D",
+ "submodule": "Camera",
+ "class": "p5.Camera",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Set the canvas' width and height\n // using the display's dimensions.\n createCanvas(displayWidth, displayHeight);\n\n background(200);\n\n describe('A gray canvas that is the same size as the display.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The text \"eyeZ: 800\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of eyeZ, rounded to the nearest integer.\n text(`eyeZ: ${round(cam.eyeZ)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to move forward and back as the camera moves. The text \"eyeZ: Z\" is written in black beneath the cube. Z oscillates between 700 and 900.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new z-coordinate.\n let z = 100 * sin(frameCount * 0.01) + 800;\n\n // Set the camera's position.\n cam.setPosition(0, -400, z);\n\n // Display the value of eyeZ, rounded to the nearest integer.\n text(`eyeZ: ${round(cam.eyeZ)}`, 0, 55);\n}\n</code>\n</div>"
],
- "alt": "This example does not render anything.",
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "<p>The camera’s z-coordinate.</p>\n<p>By default, the camera’s z-coordinate is set to 800 in \"world\" space.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 652,
- "description": "<p>A <code>Number</code> variable that stores the width of the browser's viewport.</p>\n<p>The <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport\" target=\"_blank\">layout viewport</a>\nis the area within the browser that's available for drawing.</p>\n",
"itemtype": "property",
- "name": "windowWidth",
+ "name": "centerX",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1199,
"type": "Number",
- "readonly": "",
+ "module": "3D",
+ "submodule": "Camera",
+ "class": "p5.Camera",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Set the canvas' width and height\n // using the browser's dimensions.\n createCanvas(windowWidth, windowHeight);\n\n background(200);\n\n describe('A gray canvas that takes up the entire browser window.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The text \"centerX: 10\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of centerX, rounded to the nearest integer.\n text(`centerX: ${round(cam.centerX)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-right.\n cam.setPosition(100, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The cube appears to move left and right as the camera shifts its focus. The text \"centerX: X\" is written in black beneath the cube. X oscillates between -15 and 35.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new x-coordinate.\n let x = 25 * sin(frameCount * 0.01) + 10;\n\n // Point the camera.\n cam.lookAt(x, 20, -30);\n\n // Display the value of centerX, rounded to the nearest integer.\n text(`centerX: ${round(cam.centerX)}`, 0, 55);\n}\n</code>\n</div>"
],
- "alt": "This example does not render anything.",
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "<p>The x-coordinate of the place where the camera looks.</p>\n<p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in \"world\" space, so\n<code>myCamera.centerX</code> is 0.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 680,
- "description": "<p>A <code>Number</code> variable that stores the height of the browser's viewport.</p>\n<p>The <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport\" target=\"_blank\">layout viewport</a>\nis the area within the browser that's available for drawing.</p>\n",
"itemtype": "property",
- "name": "windowHeight",
+ "name": "centerY",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1199,
"type": "Number",
- "readonly": "",
+ "module": "3D",
+ "submodule": "Camera",
+ "class": "p5.Camera",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Set the canvas' width and height\n // using the browser's dimensions.\n createCanvas(windowWidth, windowHeight);\n\n background(200);\n\n describe('A gray canvas that takes up the entire browser window.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The text \"centerY: 20\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of centerY, rounded to the nearest integer.\n text(`centerY: ${round(cam.centerY)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-right.\n cam.setPosition(100, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The cube appears to move up and down as the camera shifts its focus. The text \"centerY: Y\" is written in black beneath the cube. Y oscillates between -5 and 45.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new y-coordinate.\n let y = 25 * sin(frameCount * 0.01) + 20;\n\n // Point the camera.\n cam.lookAt(10, y, -30);\n\n // Display the value of centerY, rounded to the nearest integer.\n text(`centerY: ${round(cam.centerY)}`, 0, 55);\n}\n</code>\n</div>"
],
- "alt": "This example does not render anything.",
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "<p>The y-coordinate of the place where the camera looks.</p>\n<p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in \"world\" space, so\n<code>myCamera.centerY</code> is 0.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 708,
- "description": "<p>A function that's called when the browser window is resized.</p>\n<p>Code placed in the body of <code>windowResized()</code> will run when the\nbrowser window's size changes. It's a good place to call\n<a href=\"#/p5/resizeCanvas\">resizeCanvas()</a> or make other\nadjustments to accommodate the new window size.</p>\n<p>The <code>event</code> parameter is optional. If added to the function declaration, it\ncan be used for debugging or other purposes.</p>\n",
- "itemtype": "method",
- "name": "windowResized",
- "params": [
- {
- "name": "event",
- "description": "<p>optional resize Event.</p>\n",
- "type": "UIEvent",
- "optional": true
- }
- ],
+ "itemtype": "property",
+ "name": "centerZ",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1199,
+ "type": "Number",
+ "module": "3D",
+ "submodule": "Camera",
+ "class": "p5.Camera",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n\n describe('A gray canvas with a white circle at its center. The canvas takes up the entire browser window. It changes size to match the browser window.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a circle at the center.\n circle(width / 2, height / 2, 50);\n}\n\n// Resize the canvas when the\n// browser's size changes.\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The text \"centerZ: -30\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of centerZ, rounded to the nearest integer.\n text(`centerZ: ${round(cam.centerZ)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-right.\n cam.setPosition(100, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The cube appears to move forward and back as the camera shifts its focus. The text \"centerZ: Z\" is written in black beneath the cube. Z oscillates between -55 and -25.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new z-coordinate.\n let z = 25 * sin(frameCount * 0.01) - 30;\n\n // Point the camera.\n cam.lookAt(10, 20, z);\n\n // Display the value of centerZ, rounded to the nearest integer.\n text(`centerZ: ${round(cam.centerZ)}`, 0, 55);\n}\n</code>\n</div>"
],
- "alt": "This example does not render anything.",
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "<p>The y-coordinate of the place where the camera looks.</p>\n<p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in \"world\" space, so\n<code>myCamera.centerZ</code> is 0.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 803,
- "description": "<p>Called upon each p5 instantiation instead of module import due to the\npossibility of the window being resized when no sketch is active.</p>\n",
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "itemtype": "property",
+ "name": "upX",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1199,
+ "type": "Number",
+ "module": "3D",
+ "submodule": "Camera",
+ "class": "p5.Camera",
+ "example": [
+ "<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The text \"upX: 0\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of upX, rounded to the nearest tenth.\n text(`upX: ${round(cam.upX, 1)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to rock back and forth. The text \"upX: X\" is written in black beneath it. X oscillates between -1 and 1.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the x-component.\n let x = sin(frameCount * 0.01);\n\n // Update the camera's \"up\" vector.\n cam.camera(100, -400, 800, 0, 0, 0, x, 1, 0);\n\n // Display the value of upX, rounded to the nearest tenth.\n text(`upX: ${round(cam.upX, 1)}`, 0, 55);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>The x-component of the camera's \"up\" vector.</p>\n<p>The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is\n<code>(0, 1, 0)</code>, so its x-component is 0 in \"local\" space.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 812,
- "description": "<p>A <code>Number</code> variable that stores the width of the canvas in pixels.</p>\n<p><code>width</code>'s default value is 100. Calling\n<a href=\"#/p5/createCanvas\">createCanvas()</a> or\n<a href=\"#/p5/resizeCanvas\">resizeCanvas()</a> changes the value of\n<code>width</code>. Calling <a href=\"#/p5/noCanvas\">noCanvas()</a> sets its value to\n0.</p>\n",
+ "itemtype": "property",
+ "name": "upY",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1199,
+ "type": "Number",
+ "module": "3D",
+ "submodule": "Camera",
+ "class": "p5.Camera",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Display the canvas' width.\n text(width, 42, 54);\n\n describe('The number 100 written in black on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(50, 100);\n\n background(200);\n\n // Display the canvas' width.\n text(width, 21, 54);\n\n describe('The number 50 written in black on a gray rectangle.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the canvas' width.\n text(width, 42, 54);\n\n 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.');\n}\n\n// If the mouse is pressed, reisze\n// the canvas and display its new\n// width.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n resizeCanvas(50, 100);\n background(200);\n text(width, 21, 54);\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The text \"upY: 1\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of upY, rounded to the nearest tenth.\n text(`upY: ${round(cam.upY, 1)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The cube flips upside-down periodically. The text \"upY: Y\" is written in black beneath it. Y oscillates between -1 and 1.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the y-component.\n let y = sin(frameCount * 0.01);\n\n // Update the camera's \"up\" vector.\n cam.camera(100, -400, 800, 0, 0, 0, 0, y, 0);\n\n // Display the value of upY, rounded to the nearest tenth.\n text(`upY: ${round(cam.upY, 1)}`, 0, 55);\n}\n</code>\n</div>"
],
+ "description": "<p>The y-component of the camera's \"up\" vector.</p>\n<p>The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is\n<code>(0, 1, 0)</code>, so its y-component is 1 in \"local\" space.</p>\n"
+ },
+ {
"itemtype": "property",
- "name": "width",
+ "name": "upZ",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1199,
"type": "Number",
- "readonly": "",
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "module": "3D",
+ "submodule": "Camera",
+ "class": "p5.Camera",
+ "example": [
+ "<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The text \"upZ: 0\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of upZ, rounded to the nearest tenth.\n text(`upZ: ${round(cam.upZ, 1)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to rock back and forth. The text \"upZ: Z\" is written in black beneath it. Z oscillates between -1 and 1.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the z-component.\n let z = sin(frameCount * 0.01);\n\n // Update the camera's \"up\" vector.\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, z);\n\n // Display the value of upZ, rounded to the nearest tenth.\n text(`upZ: ${round(cam.upZ, 1)}`, 0, 55);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>The z-component of the camera's \"up\" vector.</p>\n<p>The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is\n<code>(0, 1, 0)</code>, so its z-component is 0 in \"local\" space.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 881,
- "description": "<p>A <code>Number</code> variable that stores the height of the canvas in pixels.</p>\n<p><code>height</code>'s default value is 100. Calling\n<a href=\"#/p5/createCanvas\">createCanvas()</a> or\n<a href=\"#/p5/resizeCanvas\">resizeCanvas()</a> changes the value of\n<code>height</code>. Calling <a href=\"#/p5/noCanvas\">noCanvas()</a> sets its value to\n0.</p>\n",
+ "itemtype": "property",
+ "name": "color",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 1650,
+ "type": "p5.FramebufferTexture",
+ "module": "Rendering",
+ "class": "p5.Framebuffer",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 54);\n\n describe('The number 100 written in black on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 50);\n\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 27);\n\n describe('The number 50 written in black on a gray rectangle.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 54);\n\n 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.');\n}\n\n// If the mouse is pressed, reisze\n// the canvas and display its new\n// height.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n resizeCanvas(100, 50);\n background(200);\n text(height, 42, 27);\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n triangle(-25, 25, 0, -25, 25, 25);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Use the p5.Framebuffer object's WebGLTexture.\n texture(myBuffer.color);\n\n // Style the plane.\n noStroke();\n\n // Draw the plane.\n plane(myBuffer.width, myBuffer.height);\n\n describe('A white triangle on a gray background.');\n}\n</code>\n</div>"
],
+ "description": "<p>An object that stores the framebuffer's color data.</p>\n<p>Each framebuffer uses a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture\" target=\"_blank\">WebGLTexture</a>\nobject internally to store its color data. The <code>myBuffer.color</code> property\nmakes it possible to pass this data directly to other functions. For\nexample, calling <code>texture(myBuffer.color)</code> or\n<code>myShader.setUniform('colorTexture', myBuffer.color)</code> may be helpful for\nadvanced use cases.</p>\n<p>Note: By default, a framebuffer's y-coordinates are flipped compared to\nimages and videos. It's easy to flip a framebuffer's y-coordinates as\nneeded when applying it as a texture. For example, calling\n<code>plane(myBuffer.width, -myBuffer.height)</code> will flip the framebuffer.</p>\n"
+ },
+ {
"itemtype": "property",
- "name": "height",
- "type": "Number",
- "readonly": "",
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "name": "depth",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 1650,
+ "type": "p5.FramebufferTexture",
+ "module": "Rendering",
+ "class": "p5.Framebuffer",
+ "example": [
+ "<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition;\n vTexCoord = aTexCoord;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nvarying vec2 vTexCoord;\nuniform sampler2D depth;\n\nvoid main() {\n // Get the pixel's depth value.\n float depthVal = texture2D(depth, vTexCoord).r;\n\n // Set the pixel's color based on its depth.\n gl_FragColor = mix(\n vec4(0., 0., 0., 1.),\n vec4(1., 0., 1., 1.),\n depthVal);\n}\n`;\n\nlet myBuffer;\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n // Compile and apply the shader.\n shader(myShader);\n\n describe('The shadow of a box rotates slowly against a magenta background.');\n}\n\nfunction draw() {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(255);\n rotateX(frameCount * 0.01);\n box(20, 20, 80);\n myBuffer.end();\n\n // Set the shader's depth uniform using\n // the framebuffer's depth texture.\n myShader.setUniform('depth', myBuffer.depth);\n\n // Style the plane.\n noStroke();\n\n // Draw the plane.\n plane(myBuffer.width, myBuffer.height);\n}\n</code>\n</div>"
+ ],
+ "description": "<p>An object that stores the framebuffer's depth data.</p>\n<p>Each framebuffer uses a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture\" target=\"_blank\">WebGLTexture</a>\nobject internally to store its depth data. The <code>myBuffer.depth</code> property\nmakes it possible to pass this data directly to other functions. For\nexample, calling <code>texture(myBuffer.depth)</code> or\n<code>myShader.setUniform('depthTexture', myBuffer.depth)</code> may be helpful for\nadvanced use cases.</p>\n<p>Note: By default, a framebuffer's y-coordinates are flipped compared to\nimages and videos. It's easy to flip a framebuffer's y-coordinates as\nneeded when applying it as a texture. For example, calling\n<code>plane(myBuffer.width, -myBuffer.height)</code> will flip the framebuffer.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 950,
- "description": "<p>Toggles full-screen mode or returns the current mode.</p>\n<p>Calling <code>fullscreen(true)</code> makes the sketch full-screen. Calling\n<code>fullscreen(false)</code> makes the sketch its original size.</p>\n<p>Calling <code>fullscreen()</code> without an argument returns <code>true</code> if the sketch\nis in full-screen mode and <code>false</code> if not.</p>\n<p>Note: Due to browser restrictions, <code>fullscreen()</code> can only be called with\nuser input such as a mouse press.</p>\n",
- "itemtype": "method",
- "name": "fullscreen",
- "params": [
- {
- "name": "val",
- "description": "<p>whether the sketch should be in fullscreen mode.</p>\n",
- "type": "Boolean",
- "optional": true
- }
- ],
- "return": {
- "description": "current fullscreen state.",
- "type": "Boolean"
- },
+ "itemtype": "property",
+ "name": "pixels",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 1650,
+ "type": "Number[]",
+ "module": "Rendering",
+ "class": "p5.Framebuffer",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n background(200);\n\n describe('A gray canvas that switches between default and full-screen display when clicked.');\n}\n\n// If the mouse is pressed,\n// toggle full-screen mode.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n let fs = fullscreen();\n fullscreen(!fs);\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Load the pixels array.\n myBuffer.loadPixels();\n\n // Get the number of pixels in the\n // top half of the framebuffer.\n let numPixels = myBuffer.pixels.length / 2;\n\n // Set the framebuffer's top half to pink.\n for (let i = 0; i < numPixels; i += 4) {\n myBuffer.pixels[i] = 255;\n myBuffer.pixels[i + 1] = 102;\n myBuffer.pixels[i + 2] = 204;\n myBuffer.pixels[i + 3] = 255;\n }\n\n // Update the pixels array.\n myBuffer.updatePixels();\n\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, -50, -50);\n\n describe('A pink rectangle above a gray rectangle.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "<p>An array containing the color of each pixel in the framebuffer.</p>\n<p><a href=\"#/p5.Framebuffer/loadPixels\">myBuffer.loadPixels()</a> must be\ncalled before accessing the <code>myBuffer.pixels</code> array.\n<a href=\"#/p5.Framebuffer/updatePixels\">myBuffer.updatePixels()</a>\nmust be called after any changes are made.</p>\n<p>Note: Updating pixels via this property is slower than drawing to the\nframebuffer directly. Consider using a\n<a href=\"#/p5.Shader\">p5.Shader</a> object instead of looping over\n<code>myBuffer.pixels</code>.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 1005,
- "description": "<p>Sets the pixel density or returns the current density.</p>\n<p>Computer displays are grids of little lights called <em>pixels</em>. A\ndisplay's <em>pixel density</em> describes how many pixels it packs into an\narea. Displays with smaller pixels have a higher pixel density and create\nsharper images.</p>\n<p><code>pixelDensity()</code> sets the pixel scaling for high pixel density displays.\nBy default, the pixel density is set to match the display's density.\nCalling <code>pixelDensity(1)</code> turn this off.</p>\n<p>Calling <code>pixelDensity()</code> without an argument returns the current pixel\ndensity.</p>\n",
- "itemtype": "method",
- "name": "pixelDensity",
- "chainable": 1,
+ "itemtype": "property",
+ "name": "vertices",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 2165,
+ "module": "Shape",
+ "submodule": "3D Primitives",
+ "class": "p5.Geometry",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n // Set the pixel density to 1.\n pixelDensity(1);\n\n // Create a canvas and draw\n // a circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A fuzzy white circle on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Set the pixel density to 3.\n pixelDensity(3);\n\n // Create a canvas, paint the\n // background, and draw a\n // circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A sharp white circle on a gray canvas.');\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = new p5.Geometry();\n\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(40, 0, 0);\n\n // Add the vertices to the p5.Geometry object's vertices array.\n myGeometry.vertices.push(v0, v1, v2);\n\n describe('A white triangle drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(function() {\n torus(30, 15, 10, 8);\n });\n\n describe('A white torus rotates slowly against a dark gray background. Red spheres mark its vertices.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateY(frameCount * 0.01);\n\n // Style the p5.Geometry object.\n fill(255);\n stroke(0);\n\n // Display the p5.Geometry object.\n model(myGeometry);\n\n // Style the vertices.\n fill(255, 0, 0);\n noStroke();\n\n // Iterate over the vertices array.\n for (let v of myGeometry.vertices) {\n // Draw a sphere to mark the vertex.\n push();\n translate(v);\n sphere(2.5);\n pop();\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment",
- "overloads": [
- {
- "line": 1005,
- "params": [
- {
- "name": "val",
- "description": "<p>desired pixel density.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 1059,
- "params": [],
- "return": {
- "description": "current pixel density of the sketch.",
- "type": "Number"
- }
- }
- ]
+ "description": "<p>An array with the geometry's vertices.</p>\n<p>The geometry's vertices are stored as\n<a href=\"#/p5.Vector\">p5.Vector</a> objects in the <code>myGeometry.vertices</code>\narray. The geometry's first vertex is the\n<a href=\"#/p5.Vector\">p5.Vector</a> object at <code>myGeometry.vertices[0]</code>,\nits second vertex is <code>myGeometry.vertices[1]</code>, its third vertex is\n<code>myGeometry.vertices[2]</code>, and so on.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 1078,
- "description": "<p>Returns the display's current pixel density.</p>\n",
- "itemtype": "method",
- "name": "displayDensity",
- "return": {
- "description": "current pixel density of the display.",
- "type": "Number"
- },
+ "itemtype": "property",
+ "name": "vertexNormals",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 2165,
+ "module": "Shape",
+ "submodule": "3D Primitives",
+ "class": "p5.Geometry",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n // Set the pixel density to 1.\n pixelDensity(1);\n\n // Create a canvas and draw\n // a circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.');\n}\n\nfunction mousePressed() {\n // Get the current display density.\n let d = displayDensity();\n\n // Use the display density to set\n // the sketch's pixel density.\n pixelDensity(d);\n\n // Paint the background and\n // draw a circle.\n background(200);\n circle(50, 50, 70);\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(function() {\n torus(30, 15, 10, 8);\n });\n\n // Compute the vertex normals.\n myGeometry.computeNormals();\n\n describe(\n 'A white torus rotates against a dark gray background. Red lines extend outward from its vertices.'\n );\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateY(frameCount * 0.01);\n\n // Style the p5.Geometry object.\n stroke(0);\n\n // Display the p5.Geometry object.\n model(myGeometry);\n\n // Style the normal vectors.\n stroke(255, 0, 0);\n\n // Iterate over the vertices and vertexNormals arrays.\n for (let i = 0; i < myGeometry.vertices.length; i += 1) {\n\n // Get the vertex p5.Vector object.\n let v = myGeometry.vertices[i];\n\n // Get the vertex normal p5.Vector object.\n let n = myGeometry.vertexNormals[i];\n\n // Calculate a point along the vertex normal.\n let p = p5.Vector.mult(n, 8);\n\n // Draw the vertex normal as a red line.\n push();\n translate(v);\n line(0, 0, 0, p.x, p.y, p.z);\n pop();\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = new p5.Geometry();\n\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(0, 40, 0);\n let v3 = createVector(40, 0, 0);\n\n // Add the vertices to the p5.Geometry object's vertices array.\n myGeometry.vertices.push(v0, v1, v2, v3);\n\n // Compute the faces array.\n myGeometry.computeFaces();\n\n // Compute the surface normals.\n myGeometry.computeNormals();\n\n describe('A red square drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a white point light.\n pointLight(255, 255, 255, 0, 0, 10);\n\n // Style the p5.Geometry object.\n noStroke();\n fill(255, 0, 0);\n\n // Display the p5.Geometry object.\n model(myGeometry);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "<p>An array with the vectors that are normal to the geometry's vertices.</p>\n<p>A face's orientation is defined by its normal vector which points out\nof the face and is normal (perpendicular) to the surface. Calling\n<code>myGeometry.computeNormals()</code> first calculates each face's normal\nvector. Then it calculates the normal vector for each vertex by\naveraging the normal vectors of the faces surrounding the vertex. The\nvertex normals are stored as <a href=\"#/p5.Vector\">p5.Vector</a>\nobjects in the <code>myGeometry.vertexNormals</code> array.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 1149,
- "description": "<p>Returns the sketch's current\n<a href=\"https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL\" target=\"_blank\">URL</a>\nas a <code>String</code>.</p>\n",
- "itemtype": "method",
- "name": "getURL",
- "return": {
- "description": "url",
- "type": "String"
- },
+ "itemtype": "property",
+ "name": "faces",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 2165,
+ "module": "Shape",
+ "submodule": "3D Primitives",
+ "class": "p5.Geometry",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Get the sketch's URL\n // and display it.\n let url = getURL();\n textWrap(CHAR);\n text(url, 0, 40, 100);\n\n describe('The URL \"https://p5js.org/reference/p5/getURL\" written in black on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(function() {\n sphere();\n });\n\n describe(\"A sphere drawn on a gray background. The sphere's surface is a grayscale patchwork of triangles.\");\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Set a random seed.\n randomSeed(1234);\n\n // Iterate over the faces array.\n for (let face of myGeometry.faces) {\n\n // Style the face.\n let g = random(0, 255);\n fill(g);\n\n // Draw the face.\n beginShape();\n // Iterate over the vertices that form the face.\n for (let f of face) {\n // Get the vertex's p5.Vector object.\n let v = myGeometry.vertices[f];\n vertex(v.x, v.y, v.z);\n }\n endShape();\n\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "<p>An array that lists which of the geometry's vertices form each of its\nfaces.</p>\n<p>All 3D shapes are made by connecting sets of points called vertices. A\ngeometry's surface is formed by connecting vertices to form triangles\nthat are stitched together. Each triangular patch on the geometry's\nsurface is called a face.</p>\n<p>The geometry's vertices are stored as\n<a href=\"#/p5.Vector\">p5.Vector</a> objects in the\n<a href=\"#/p5.Geometry/vertices\">myGeometry.vertices</a> array. The\ngeometry's first vertex is the <a href=\"#/p5.Vector\">p5.Vector</a>\nobject at <code>myGeometry.vertices[0]</code>, its second vertex is\n<code>myGeometry.vertices[1]</code>, its third vertex is <code>myGeometry.vertices[2]</code>,\nand so on.</p>\n<p>For example, a geometry made from a rectangle has two faces because a\nrectangle is made by joining two triangles. <code>myGeometry.faces</code> for a\nrectangle would be the two-dimensional array <code>[[0, 1, 2], [2, 1, 3]]</code>.\nThe first face, <code>myGeometry.faces[0]</code>, is the array <code>[0, 1, 2]</code> because\nit's formed by connecting <code>myGeometry.vertices[0]</code>,\n<code>myGeometry.vertices[1]</code>,and <code>myGeometry.vertices[2]</code>. The second face,\n<code>myGeometry.faces[1]</code>, is the array <code>[2, 1, 3]</code> because it's formed by\nconnecting <code>myGeometry.vertices[2]</code>, <code>myGeometry.vertices[1]</code>,and\n<code>myGeometry.vertices[3]</code>.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 1175,
- "description": "<p>Returns the current\n<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>\npath as an <code>Array</code> of <code>String</code>s.</p>\n<p>For example, consider a sketch hosted at the URL\n<code>https://example.com/sketchbook</code>. Calling <code>getURLPath()</code> returns\n<code>['sketchbook']</code>. For a sketch hosted at the URL\n<code>https://example.com/sketchbook/monday</code>, <code>getURLPath()</code> returns\n<code>['sketchbook', 'monday']</code>.</p>\n",
- "itemtype": "method",
- "name": "getURLPath",
- "return": {
- "description": "path components.",
- "type": "String[]"
- },
+ "itemtype": "property",
+ "name": "uvs",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 2165,
+ "module": "Shape",
+ "submodule": "3D Primitives",
+ "class": "p5.Geometry",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Get the sketch's URL path\n // and display the first\n // part.\n let path = getURLPath();\n text(path[0], 25, 54);\n\n describe('The word \"reference\" written in black on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n img = await loadImage('assets/laDefense.jpg');\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create p5.Geometry objects.\n let geom1 = buildGeometry(createShape);\n let geom2 = buildGeometry(createShape);\n\n // Left (original).\n push();\n translate(-25, 0, 0);\n texture(img);\n noStroke();\n model(geom1);\n pop();\n\n // Set geom2's texture coordinates.\n geom2.uvs = [0.25, 0.25, 0.75, 0.25, 0.25, 0.75, 0.75, 0.75];\n\n // Right (zoomed in).\n push();\n translate(25, 0, 0);\n texture(img);\n noStroke();\n model(geom2);\n pop();\n\n describe(\n 'Two photos of a ceiling on a gray background. The photo on the right zooms in to the center of the photo.'\n );\n}\n\nfunction createShape() {\n plane(40);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Environment",
- "submodule": "Environment"
+ "description": "<p>An array that lists the texture coordinates for each of the geometry's\nvertices.</p>\n<p>In order for <a href=\"#/p5/texture\">texture()</a> to work, the geometry\nneeds a way to map the points on its surface to the pixels in a\nrectangular image that's used as a texture. The geometry's vertex at\ncoordinates <code>(x, y, z)</code> maps to the texture image's pixel at coordinates\n<code>(u, v)</code>.</p>\n<p>The <code>myGeometry.uvs</code> array stores the <code>(u, v)</code> coordinates for each\nvertex in the order it was added to the geometry. For example, the\nfirst vertex, <code>myGeometry.vertices[0]</code>, has its <code>(u, v)</code> coordinates\nstored at <code>myGeometry.uvs[0]</code> and <code>myGeometry.uvs[1]</code>.</p>\n"
},
{
- "file": "src/core/environment.js",
- "line": 1208,
- "description": "<p>Returns the current\n<a href=\"https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters\" target=\"_blank\">URL parameters</a>\nin an <code>Object</code>.</p>\n<p>For example, calling <code>getURLParams()</code> in a sketch hosted at the URL\n<code>https://p5js.org?year=2014&month=May&day=15</code> returns\n<code>{ year: 2014, month: 'May', day: 15 }</code>.</p>\n",
+ "name": "describe",
+ "file": "src/scripts/parsers/in/p5.js/src/accessibility/describe.js",
+ "line": 119,
"itemtype": "method",
- "name": "getURLParams",
- "return": {
- "description": "URL params",
- "type": "Object"
- },
+ "description": "<p>Creates a screen reader-accessible description of the canvas.</p>\n<p>The first parameter, <code>text</code>, is the description of the canvas.</p>\n<p>The second parameter, <code>display</code>, is optional. It determines how the\ndescription is displayed. If <code>LABEL</code> is passed, as in\n<code>describe('A description.', LABEL)</code>, the description will be visible in\na div element next to the canvas. If <code>FALLBACK</code> is passed, as in\n<code>describe('A description.', FALLBACK)</code>, the description will only be\nvisible to screen readers. This is the default mode.</p>\n<p>Read\n<a href=\"/learn/accessible-labels.html\">Writing accessible canvas descriptions</a>\nto learn more about making sketches accessible.</p>\n",
"example": [
- "\n<div class='norender notest'>\n<code>\n// Imagine this sketch is hosted at the following URL:\n// https://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n background(200);\n\n // Get the sketch's URL\n // parameters and display\n // them.\n let params = getURLParams();\n text(params.day, 10, 20);\n text(params.month, 10, 40);\n text(params.year, 10, 60);\n\n describe('The text \"15\", \"May\", and \"2014\" written in black on separate lines.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n background('pink');\n\n // Draw a heart.\n fill('red');\n noStroke();\n circle(67, 67, 20);\n circle(83, 67, 20);\n triangle(91, 73, 75, 95, 59, 73);\n\n // Add a general description of the canvas.\n describe('A pink square with a red heart in the bottom-right corner.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background('pink');\n\n // Draw a heart.\n fill('red');\n noStroke();\n circle(67, 67, 20);\n circle(83, 67, 20);\n triangle(91, 73, 75, 95, 59, 73);\n\n // Add a general description of the canvas\n // and display it for debugging.\n describe('A pink square with a red heart in the bottom-right corner.', LABEL);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n background(200);\n\n // The expression\n // frameCount % 100\n // causes x to increase from 0\n // to 99, then restart from 0.\n let x = frameCount % 100;\n\n // Draw the circle.\n fill(0, 255, 0);\n circle(x, 50, 40);\n\n // Add a general description of the canvas.\n describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n background(200);\n\n // The expression\n // frameCount % 100\n // causes x to increase from 0\n // to 99, then restart from 0.\n let x = frameCount % 100;\n\n // Draw the circle.\n fill(0, 255, 0);\n circle(x, 50, 40);\n\n // Add a general description of the canvas\n // and display it for debugging.\n describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "text",
+ "description": "description of the canvas.",
+ "type": "String"
+ },
+ {
+ "name": "display",
+ "description": "either LABEL or FALLBACK.",
+ "optional": 1,
+ "type": "FALLBACK|LABEL"
+ }
+ ]
+ }
],
- "alt": "This example does not render anything.",
"class": "p5",
+ "static": false,
"module": "Environment",
"submodule": "Environment"
},
{
- "file": "src/core/helpers.js",
- "line": 1,
- "requires": [
- "constants"
- ],
- "class": "p5",
- "module": "Environment"
- },
- {
- "file": "src/core/internationalization.js",
- "line": 30,
- "description": "<p>This is our i18next \"backend\" plugin. It tries to fetch languages\nfrom a CDN.</p>\n",
- "class": "p5",
- "module": "Environment"
- },
- {
- "file": "src/core/internationalization.js",
- "line": 126,
- "description": "<p>Set up our translation function, with loaded languages</p>\n",
- "class": "p5",
- "module": "Environment"
- },
- {
- "file": "src/core/internationalization.js",
- "line": 171,
- "description": "<p>Returns a list of languages we have translations loaded for</p>\n",
- "class": "p5",
- "module": "Environment"
- },
- {
- "file": "src/core/internationalization.js",
- "line": 178,
- "description": "<p>Returns the current language selected for translation</p>\n",
- "class": "p5",
- "module": "Environment"
- },
- {
- "file": "src/core/internationalization.js",
- "line": 185,
- "description": "<p>Sets the current language for translation\nReturns a promise that resolved when loading is finished,\nor rejects if it fails.</p>\n",
- "class": "p5",
- "module": "Environment"
- },
- {
- "file": "src/core/legacy.js",
- "line": 1,
- "requires": [
- "core\nThese are functions that are part of the Processing API but are not part of\nthe p5.js API. In some cases they have a new name",
- "in others",
- "they are\nremoved completely. Not all unsupported Processing functions are listed here\nbut we try to include ones that a user coming from Processing might likely\ncall."
- ],
- "class": "p5",
- "module": "Environment"
- },
- {
- "file": "src/core/main.js",
- "line": 41,
- "description": "<p>A function that's called once to load assets before the sketch runs.</p>\n<p>Declaring the function <code>preload()</code> sets a code block to run once\nautomatically before <a href=\"#/p5/setup\">setup()</a> or\n<a href=\"#/p5/draw\">draw()</a>. It's used to load assets including\nmultimedia files, fonts, data, and 3D models:</p>\n<pre><code class=\"language-js\">function preload() {\n // Code to run before the rest of the sketch.\n}\n</code></pre>\n<p>Functions such as <a href=\"#/p5/loadImage\">loadImage()</a>,\n<a href=\"#/p5/loadFont\">loadFont()</a>,\n<a href=\"#/p5/loadJSON\">loadJSON()</a>, and\n<a href=\"#/p5/loadModel\">loadModel()</a> are guaranteed to either\nfinish loading or raise an error if they're called within <code>preload()</code>.\nDoing so ensures that assets are available when the sketch begins\nrunning.</p>\n",
+ "name": "describeElement",
+ "file": "src/scripts/parsers/in/p5.js/src/accessibility/describe.js",
+ "line": 245,
"itemtype": "method",
- "name": "preload",
+ "description": "<p>Creates a screen reader-accessible description of elements in the canvas.</p>\n<p>Elements are shapes or groups of shapes that create meaning together. For\nexample, a few overlapping circles could make an \"eye\" element.</p>\n<p>The first parameter, <code>name</code>, is the name of the element.</p>\n<p>The second parameter, <code>text</code>, is the description of the element.</p>\n<p>The third parameter, <code>display</code>, is optional. It determines how the\ndescription is displayed. If <code>LABEL</code> is passed, as in\n<code>describe('A description.', LABEL)</code>, the description will be visible in\na div element next to the canvas. Using <code>LABEL</code> creates unhelpful\nduplicates for screen readers. Only use <code>LABEL</code> during development. If\n<code>FALLBACK</code> is passed, as in <code>describe('A description.', FALLBACK)</code>, the\ndescription will only be visible to screen readers. This is the default\nmode.</p>\n<p>Read\n<a href=\"/learn/accessible-labels.html\">Writing accessible canvas descriptions</a>\nto learn more about making sketches accessible.</p>\n",
"example": [
- "\n<div>\n<code>\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe('A red brick wall.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n background('pink');\n\n // Describe the first element\n // and draw it.\n describeElement('Circle', 'A yellow circle in the top-left corner.');\n noStroke();\n fill('yellow');\n circle(25, 25, 40);\n\n // Describe the second element\n // and draw it.\n describeElement('Heart', 'A red heart in the bottom-right corner.');\n fill('red');\n circle(66.6, 66.6, 20);\n circle(83.2, 66.6, 20);\n triangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n\n // Add a general description of the canvas.\n describe('A red heart and yellow circle over a pink background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background('pink');\n\n // Describe the first element\n // and draw it. Display the\n // description for debugging.\n describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);\n noStroke();\n fill('yellow');\n circle(25, 25, 40);\n\n // Describe the second element\n // and draw it. Display the\n // description for debugging.\n describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);\n fill('red');\n circle(66.6, 66.6, 20);\n circle(83.2, 66.6, 20);\n triangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n\n // Add a general description of the canvas.\n describe('A red heart and yellow circle over a pink background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "name",
+ "description": "name of the element.",
+ "type": "String"
+ },
+ {
+ "name": "text",
+ "description": "description of the element.",
+ "type": "String"
+ },
+ {
+ "name": "display",
+ "description": "either LABEL or FALLBACK.",
+ "optional": 1,
+ "type": "FALLBACK|LABEL"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "Structure",
- "submodule": "Structure"
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/core/main.js",
- "line": 87,
- "description": "<p>A function that's called once when the sketch begins running.</p>\n<p>Declaring the function <code>setup()</code> sets a code block to run once\nautomatically when the sketch starts running. It's used to perform\nsetup tasks such as creating the canvas and initializing variables:</p>\n<pre><code class=\"language-js\">function setup() {\n // Code to run once at the start of the sketch.\n}\n</code></pre>\n<p>Code placed in <code>setup()</code> will run once before code placed in\n<a href=\"#/p5/draw\">draw()</a> begins looping. If the\n<a href=\"#/p5/preload\">preload()</a> is declared, then <code>setup()</code> will\nrun immediately after <a href=\"#/p5/preload\">preload()</a> finishes\nloading assets.</p>\n<p>Note: <code>setup()</code> doesn’t have to be declared, but it’s common practice to do so.</p>\n",
+ "name": "textOutput",
+ "file": "src/scripts/parsers/in/p5.js/src/accessibility/outputs.js",
+ "line": 123,
"itemtype": "method",
- "name": "setup",
+ "description": "<p>Creates a screen reader-accessible description of shapes on the canvas.</p>\n<p><code>textOutput()</code> adds a general description, list of shapes, and\ntable of shapes to the web page. The general description includes the\ncanvas size, canvas color, and number of shapes. For example,\n<code>Your output is a, 100 by 100 pixels, gray canvas containing the following 2 shapes:</code>.</p>\n<p>A list of shapes follows the general description. The list describes the\ncolor, location, and area of each shape. For example,\n<code>a red circle at middle covering 3% of the canvas</code>. Each shape can be\nselected to get more details.</p>\n<p><code>textOutput()</code> uses its table of shapes as a list. The table describes the\nshape, color, location, coordinates and area. For example,\n<code>red circle location = middle area = 3%</code>. This is different from\n<a href=\"#/p5/gridOutput\">gridOutput()</a>, which uses its table as a grid.</p>\n<p>The <code>display</code> parameter is optional. It determines how the description is\ndisplayed. If <code>LABEL</code> is passed, as in <code>textOutput(LABEL)</code>, the description\nwill be visible in a div element next to the canvas. Using <code>LABEL</code> creates\nunhelpful duplicates for screen readers. Only use <code>LABEL</code> during\ndevelopment. If <code>FALLBACK</code> is passed, as in <code>textOutput(FALLBACK)</code>, the\ndescription will only be visible to screen readers. This is the default\nmode.</p>\n<p>Read\n<a href=\"/learn/accessible-labels.html\">Writing accessible canvas descriptions</a>\nto learn more about making sketches accessible.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe('A white circle on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Paint the background once.\n background(200);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'\n );\n}\n\nfunction draw() {\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe(\n 'A white circle on a brick wall. The circle follows the mouse as the user moves, leaving a trail.'\n );\n}\n\nfunction draw() {\n // Style the circle.\n noStroke();\n\n // Draw the circle.\n circle(mouseX, mouseY, 10);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n // Add the text description.\n textOutput();\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Add the text description and\n // display it for debugging.\n textOutput(LABEL);\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n // Add the text description.\n textOutput();\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n // Add the text description and\n // display it for debugging.\n textOutput(LABEL);\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "display",
+ "description": "either FALLBACK or LABEL.",
+ "optional": 1,
+ "type": "FALLBACK|LABEL"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "Structure",
- "submodule": "Structure"
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/core/main.js",
- "line": 176,
- "description": "<p>A function that's called repeatedly while the sketch runs.</p>\n<p>Declaring the function <code>draw()</code> sets a code block to run repeatedly\nonce the sketch starts. It’s used to create animations and respond to\nuser inputs:</p>\n<pre><code class=\"language-js\">function draw() {\n // Code to run repeatedly.\n}\n</code></pre>\n<p>This is often called the \"draw loop\" because p5.js calls the code in\n<code>draw()</code> in a loop behind the scenes. By default, <code>draw()</code> tries to run\n60 times per second. The actual rate depends on many factors. The\ndrawing rate, called the \"frame rate\", can be controlled by calling\n<a href=\"#/p5/frameRate\">frameRate()</a>. The number of times <code>draw()</code>\nhas run is stored in the system variable\n<a href=\"#/p5/frameCount\">frameCount()</a>.</p>\n<p>Code placed within <code>draw()</code> begins looping after\n<a href=\"#/p5/setup\">setup()</a> runs. <code>draw()</code> will run until the user\ncloses the sketch. <code>draw()</code> can be stopped by calling the\n<a href=\"#/p5/noLoop\">noLoop()</a> function. <code>draw()</code> can be resumed by\ncalling the <a href=\"#/p5/loop\">loop()</a> function.</p>\n",
+ "name": "gridOutput",
+ "file": "src/scripts/parsers/in/p5.js/src/accessibility/outputs.js",
+ "line": 258,
"itemtype": "method",
- "name": "draw",
+ "description": "<p>Creates a screen reader-accessible description of shapes on the canvas.</p>\n<p><code>gridOutput()</code> adds a general description, table of shapes, and list of\nshapes to the web page. The general description includes the canvas size,\ncanvas color, and number of shapes. For example,\n<code>gray canvas, 100 by 100 pixels, contains 2 shapes: 1 circle 1 square</code>.</p>\n<p><code>gridOutput()</code> uses its table of shapes as a grid. Each shape in the grid\nis placed in a cell whose row and column correspond to the shape's location\non the canvas. The grid cells describe the color and type of shape at that\nlocation. For example, <code>red circle</code>. These descriptions can be selected\nindividually to get more details. This is different from\n<a href=\"#/p5/textOutput\">textOutput()</a>, which uses its table as a list.</p>\n<p>A list of shapes follows the table. The list describes the color, type,\nlocation, and area of each shape. For example,\n<code>red circle, location = middle, area = 3 %</code>.</p>\n<p>The <code>display</code> parameter is optional. It determines how the description is\ndisplayed. If <code>LABEL</code> is passed, as in <code>gridOutput(LABEL)</code>, the description\nwill be visible in a div element next to the canvas. Using <code>LABEL</code> creates\nunhelpful duplicates for screen readers. Only use <code>LABEL</code> during\ndevelopment. If <code>FALLBACK</code> is passed, as in <code>gridOutput(FALLBACK)</code>, the\ndescription will only be visible to screen readers. This is the default\nmode.</p>\n<p>Read\n<a href=\"/learn/accessible-labels.html\">Writing accessible canvas descriptions</a>\nto learn more about making sketches accessible.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Paint the background once.\n background(200);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'\n );\n}\n\nfunction draw() {\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click the canvas to change the circle's color.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves. The circle changes color to pink when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n\n// Change the fill color when the user double-clicks.\nfunction doubleClicked() {\n fill('deeppink');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n // Add the grid description.\n gridOutput();\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Add the grid description and\n // display it for debugging.\n gridOutput(LABEL);\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n // Add the grid description.\n gridOutput();\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n // Add the grid description and\n // display it for debugging.\n gridOutput(LABEL);\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "display",
+ "description": "either FALLBACK or LABEL.",
+ "optional": 1,
+ "type": "FALLBACK|LABEL"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "Structure",
- "submodule": "Structure"
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/core/main.js",
- "line": 560,
- "description": "<p>Removes the sketch from the web page.</p>\n<p>Calling <code>remove()</code> stops the draw loop and removes any HTML elements\ncreated by the sketch, including the canvas. A new sketch can be\ncreated by using the <a href=\"#/p5/p5\">p5()</a> constructor, as in\n<code>new p5()</code>.</p>\n",
+ "name": "p5",
+ "file": "src/scripts/parsers/in/p5.js/src/core/structure.js",
+ "line": 354,
"itemtype": "method",
- "name": "remove",
+ "description": "<p>Creates a new sketch in \"instance\" mode.</p>\n<p>All p5.js sketches are instances of the <code>p5</code> class. Put another way, all\np5.js sketches are objects with methods including <code>pInst.setup()</code>,\n<code>pInst.draw()</code>, <code>pInst.circle()</code>, and <code>pInst.fill()</code>. By default, sketches\nrun in \"global mode\" to hide some of this complexity.</p>\n<p>In global mode, a default instance of the <code>p5</code> class is created\nautomatically. The default <code>p5</code> instance searches the web page's source\ncode for declarations of system functions such as <code>setup()</code>, <code>draw()</code>,\nand <code>mousePressed()</code>, then attaches those functions to itself as methods.\nCalling a function such as <code>circle()</code> in global mode actually calls the\ndefault <code>p5</code> object's <code>pInst.circle()</code> method.</p>\n<p>It's often helpful to isolate the code within sketches from the rest of the\ncode on a web page. Two common use cases are web pages that use other\nJavaScript libraries and web pages with multiple sketches. \"Instance mode\"\nmakes it easy to support both of these scenarios.</p>\n<p>Instance mode sketches support the same API as global mode sketches. They\nuse a function to bundle, or encapsulate, an entire sketch. The function\ncontaining the sketch is then passed to the <code>p5()</code> constructor.</p>\n<p>The first parameter, <code>sketch</code>, is a function that contains the sketch. For\nexample, the statement <code>new p5(mySketch)</code> would create a new instance mode\nsketch from a function named <code>mySketch</code>. The function should have one\nparameter, <code>p</code>, that's a <code>p5</code> object.</p>\n<p>The second parameter, <code>node</code>, is optional. If a string is passed, as in\n<code>new p5(mySketch, 'sketch-one')</code> the new instance mode sketch will become a\nchild of the HTML element with the id <code>sketch-one</code>. If an HTML element is\npassed, as in <code>new p5(mySketch, myElement)</code>, then the new instance mode\nsketch will become a child of the <code>Element</code> object called <code>myElement</code>.</p>\n",
"example": [
- "\n<div>\n<code>\n// Double-click to remove the canvas.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n\n// Remove the sketch when the user double-clicks.\nfunction doubleClicked() {\n remove();\n}\n</code>\n</div>"
+ "<div class='norender notest'>\n<code>\n// Declare the function containing the sketch.\nfunction sketch(p) {\n\n // Declare the setup() method.\n p.setup = function () {\n p.createCanvas(100, 100);\n\n p.describe('A white circle drawn on a gray background.');\n };\n\n // Declare the draw() method.\n p.draw = function () {\n p.background(200);\n\n // Draw the circle.\n p.circle(50, 50, 20);\n };\n}\n\n// Initialize the sketch.\nnew p5(sketch);\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\n// Declare the function containing the sketch.\nfunction sketch(p) {\n // Create the sketch's variables within its scope.\n let x = 50;\n let y = 50;\n\n // Declare the setup() method.\n p.setup = function () {\n p.createCanvas(100, 100);\n\n p.describe('A white circle moves randomly on a gray background.');\n };\n\n // Declare the draw() method.\n p.draw = function () {\n p.background(200);\n\n // Update x and y.\n x += p.random(-1, 1);\n y += p.random(-1, 1);\n\n // Draw the circle.\n p.circle(x, y, 20);\n };\n}\n\n// Initialize the sketch.\nnew p5(sketch);\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\n// Declare the function containing the sketch.\nfunction sketch(p) {\n\n // Declare the setup() method.\n p.setup = function () {\n p.createCanvas(100, 100);\n\n p.describe('A white circle drawn on a gray background.');\n };\n\n // Declare the draw() method.\n p.draw = function () {\n p.background(200);\n\n // Draw the circle.\n p.circle(50, 50, 20);\n };\n}\n\n// Select the web page's body element.\nlet body = document.querySelector('body');\n\n// Initialize the sketch and attach it to the web page's body.\nnew p5(sketch, body);\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\n// Declare the function containing the sketch.\nfunction sketch(p) {\n\n // Declare the setup() method.\n p.setup = function () {\n p.createCanvas(100, 100);\n\n p.describe(\n 'A white circle drawn on a gray background. The circle follows the mouse as the user moves.'\n );\n };\n\n // Declare the draw() method.\n p.draw = function () {\n p.background(200);\n\n // Draw the circle.\n p.circle(p.mouseX, p.mouseY, 20);\n };\n}\n\n// Initialize the sketch.\nnew p5(sketch);\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\n// Declare the function containing the sketch.\nfunction sketch(p) {\n\n // Declare the setup() method.\n p.setup = function () {\n p.createCanvas(100, 100);\n\n p.describe(\n 'A white circle drawn on a gray background. The circle follows the mouse as the user moves. The circle becomes black when the user double-clicks.'\n );\n };\n\n // Declare the draw() method.\n p.draw = function () {\n p.background(200);\n\n // Draw the circle.\n p.circle(p.mouseX, p.mouseY, 20);\n };\n\n // Declare the doubleClicked() method.\n p.doubleClicked = function () {\n // Change the fill color when the user double-clicks.\n p.fill(0);\n };\n}\n\n// Initialize the sketch.\nnew p5(sketch);\n</code>\n</div>"
],
- "class": "p5",
- "module": "Structure",
- "submodule": "Structure"
- },
- {
- "file": "src/core/main.js",
- "line": 877,
- "description": "<p>Turns off the parts of the Friendly Error System (FES) that impact performance.</p>\n<p>The <a href=\"https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md\" target=\"_blank\">FES</a>\ncan cause sketches to draw slowly because it does extra work behind the\nscenes. For example, the FES checks the arguments passed to functions,\nwhich takes time to process. Disabling the FES can significantly improve\nperformance by turning off these checks.</p>\n",
- "itemtype": "property",
- "name": "disableFriendlyErrors",
- "type": "Boolean",
- "example": [
- "\n<div>\n<code>\n// Disable the FES.\np5.disableFriendlyErrors = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // The circle() function requires three arguments. The\n // next line would normally display a friendly error that\n // points this out. Instead, nothing happens and it fails\n // silently.\n circle(50, 50);\n\n describe('A gray square.');\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "sketch",
+ "description": "function containing the sketch.",
+ "type": "Object"
+ },
+ {
+ "name": "node",
+ "description": "ID or reference to the HTML element that will contain the sketch.",
+ "type": "String|HTMLElement"
+ }
+ ]
+ }
],
"class": "p5",
+ "static": false,
"module": "Structure",
"submodule": "Structure"
},
{
- "file": "src/core/p5.Element.js",
- "line": 56,
- "description": "<p>The element's underlying <code>HTMLElement</code> object.</p>\n<p>The\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement\" target=\"_blank\">HTMLElement</a>\nobject's properties and methods can be used directly.</p>\n",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Set the border style for the\n // canvas.\n cnv.elt.style.border = '5px dashed deeppink';\n\n describe('A gray square with a pink border drawn with dashed lines.');\n}\n</code>\n</div>"
- ],
- "itemtype": "property",
- "name": "elt",
- "readonly": "",
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/core/p5.Element.js",
- "line": 94,
- "description": "<p>A <code>Number</code> property that stores the element's width.</p>\n",
- "type": "{Number}",
- "itemtype": "property",
- "name": "width",
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/core/p5.Element.js",
- "line": 102,
- "description": "<p>A <code>Number</code> property that stores the element's height.</p>\n",
- "type": "{Number}",
- "itemtype": "property",
- "name": "height",
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/core/p5.Element.js",
- "line": 112,
- "description": "<p>Attaches the element to a parent element.</p>\n<p>For example, a <code><div></div></code> element may be used as a box to\nhold two pieces of text, a header and a paragraph. The\n<code><div></div></code> is the parent element of both the header and\nparagraph.</p>\n<p>The parameter <code>parent</code> can have one of three types. <code>parent</code> can be a\nstring with the parent element's ID, as in\n<code>myElement.parent('container')</code>. It can also be another\n<a href=\"#/p5.Element\">p5.Element</a> object, as in\n<code>myElement.parent(myDiv)</code>. Finally, <code>parent</code> can be an <code>HTMLElement</code>\nobject, as in <code>myElement.parent(anotherElement)</code>.</p>\n<p>Calling <code>myElement.parent()</code> without an argument returns the element's\nparent.</p>\n",
+ "name": "color",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 400,
"itemtype": "method",
- "name": "parent",
- "chainable": 1,
+ "description": "<p>Creates a <a href=\"#/p5/p5.Color\">p5.Color</a> object.</p>\n<p>By default, the parameters are interpreted as RGB values. Calling\n<code>color(255, 204, 0)</code> will return a bright yellow color. The way these\nparameters are interpreted may be changed with the\n<a href=\"#/p5/colorMode\">colorMode()</a> function.</p>\n<p>The version of <code>color()</code> with one parameter interprets the value one of two\nways. If the parameter is a number, it's interpreted as a grayscale value.\nIf the parameter is a string, it's interpreted as a CSS color string.</p>\n<p>The version of <code>color()</code> with two parameters interprets the first one as a\ngrayscale value. The second parameter sets the alpha (transparency) value.</p>\n<p>The version of <code>color()</code> with three parameters interprets them as RGB, HSB,\nor HSL colors, depending on the current <code>colorMode()</code>.</p>\n<p>The version of <code>color()</code> with four parameters interprets them as RGBA, HSBA,\nor HSLA colors, depending on the current <code>colorMode()</code>. The last parameter\nsets the alpha (transparency) value.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Create a div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color to white\n div.style('background-color', 'white');\n\n // Align any text to the center.\n div.style('text-align', 'center');\n\n // Set its ID to \"container\".\n div.id('container');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent\n // using its ID \"container\".\n p.parent('container');\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Create rectangular div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color and align\n // any text to the center.\n div.style('background-color', 'white');\n div.style('text-align', 'center');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent.\n p.parent(div);\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Create rectangular div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color and align\n // any text to the center.\n div.style('background-color', 'white');\n div.style('text-align', 'center');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent\n // using the underlying\n // HTMLElement.\n p.parent(div.elt);\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c = color(255, 204, 0);\n\n // Draw the square.\n fill(c);\n noStroke();\n square(30, 20, 55);\n\n describe('A yellow square on a gray canvas.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c1 = color(255, 204, 0);\n\n // Draw the left circle.\n fill(c1);\n noStroke();\n circle(25, 25, 80);\n\n // Create a p5.Color object using a grayscale value.\n let c2 = color(65);\n\n // Draw the right circle.\n fill(c2);\n circle(75, 75, 80);\n\n describe(\n 'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'\n );\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a named color.\n let c = color('magenta');\n\n // Draw the square.\n fill(c);\n noStroke();\n square(20, 20, 60);\n\n describe('A magenta square on a gray canvas.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a hex color code.\n let c1 = color('#0f0');\n\n // Draw the left rectangle.\n fill(c1);\n noStroke();\n rect(0, 10, 45, 80);\n\n // Create a p5.Color object using a hex color code.\n let c2 = color('#00ff00');\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two bright green rectangles on a gray canvas.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a RGB color string.\n let c1 = color('rgb(0, 0, 255)');\n\n // Draw the top-left square.\n fill(c1);\n square(10, 10, 35);\n\n // Create a p5.Color object using a RGB color string.\n let c2 = color('rgb(0%, 0%, 100%)');\n\n // Draw the top-right square.\n fill(c2);\n square(55, 10, 35);\n\n // Create a p5.Color object using a RGBA color string.\n let c3 = color('rgba(0, 0, 255, 1)');\n\n // Draw the bottom-left square.\n fill(c3);\n square(10, 55, 35);\n\n // Create a p5.Color object using a RGBA color string.\n let c4 = color('rgba(0%, 0%, 100%, 1)');\n\n // Draw the bottom-right square.\n fill(c4);\n square(55, 55, 35);\n\n describe('Four blue squares in the corners of a gray canvas.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a HSL color string.\n let c1 = color('hsl(160, 100%, 50%)');\n\n // Draw the left rectangle.\n noStroke();\n fill(c1);\n rect(0, 10, 45, 80);\n\n // Create a p5.Color object using a HSLA color string.\n let c2 = color('hsla(160, 100%, 50%, 0.5)');\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using a HSB color string.\n let c1 = color('hsb(160, 100%, 50%)');\n\n // Draw the left rectangle.\n noStroke();\n fill(c1);\n rect(0, 10, 45, 80);\n\n // Create a p5.Color object using a HSBA color string.\n let c2 = color('hsba(160, 100%, 50%, 0.5)');\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c1 = color(50, 55, 100);\n\n // Draw the left rectangle.\n fill(c1);\n rect(0, 10, 45, 80);\n\n // Switch the color mode to HSB.\n colorMode(HSB, 100);\n\n // Create a p5.Color object using HSB values.\n let c2 = color(50, 55, 100);\n\n // Draw the right rectangle.\n fill(c2);\n rect(55, 10, 45, 80);\n\n describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 112,
"params": [
{
- "name": "parent",
- "description": "<p>ID, <a href=\"#/p5.Element\">p5.Element</a>,\n or HTMLElement of desired parent element.</p>\n",
- "type": "String|p5.Element|Object"
+ "name": "gray",
+ "description": "number specifying value between white and black.",
+ "type": "Number"
+ },
+ {
+ "name": "alpha",
+ "description": "alpha value relative to current color range\n(default is 0-255).",
+ "optional": 1,
+ "type": "Number"
}
],
- "chainable": 1
+ "return": {
+ "description": "resulting color.",
+ "type": "p5.Color"
+ }
},
{
- "line": 233,
- "params": [],
+ "params": [
+ {
+ "name": "v1",
+ "description": "red or hue value relative to\nthe current color range.",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "description": "green or saturation value\nrelative to the current color range.",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "description": "blue or brightness value\nrelative to the current color range.",
+ "type": "Number"
+ },
+ {
+ "name": "alpha",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
"return": {
"description": "",
- "type": "p5.Element"
+ "type": "p5.Color"
+ }
+ },
+ {
+ "params": [
+ {
+ "name": "value",
+ "description": "a color string.",
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "p5.Color"
+ }
+ },
+ {
+ "params": [
+ {
+ "name": "values",
+ "description": "an array containing the red, green, blue,\nand alpha components of the color.",
+ "type": "Number[]"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "p5.Color"
+ }
+ },
+ {
+ "params": [
+ {
+ "name": "color",
+ "type": "p5.Color"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "p5.Color"
}
}
- ]
+ ],
+ "return": {
+ "description": "resulting color.",
+ "type": "p5.Color"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/core/p5.Element.js",
- "line": 254,
- "description": "<p>Sets the element's ID using a given string.</p>\n<p>Calling <code>myElement.id()</code> without an argument returns its ID as a string.</p>\n",
+ "name": "red",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 547,
"itemtype": "method",
- "name": "id",
- "chainable": 1,
+ "description": "<p>Gets the red value of a color.</p>\n<p><code>red()</code> extracts the red value from a\n<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>By default, <code>red()</code> returns a color's red value in the range 0\nto 255. If the <a href=\"/reference/p5/colorMode/\">colorMode()</a> is set to RGB, it\nreturns the red value in the given range.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Set the canvas' ID\n // to \"mycanvas\".\n cnv.id('mycanvas');\n\n // Get the canvas' ID.\n let id = cnv.id();\n text(id, 24, 54);\n\n describe('The text \"mycanvas\" written in black on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(175, 100, 220);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 175.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [175, 100, 220];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 175.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgb(175, 100, 220)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 175.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Create a p5.Color object.\n let c = color(69, 39, 86);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'redValue' to 69.\n let redValue = red(c);\n\n // Draw the right rectangle.\n fill(redValue, 0, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is red.');\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 254,
"params": [
{
- "name": "id",
- "description": "<p>ID of the element.</p>\n",
- "type": "String"
+ "name": "color",
+ "description": "<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, array of\ncolor components, or CSS color string.",
+ "type": "p5.Color|Number[]|String"
}
],
- "chainable": 1
- },
- {
- "line": 286,
- "params": [],
"return": {
- "description": "ID of the element.",
- "type": "String"
+ "description": "the red value.",
+ "type": "Number"
}
}
- ]
+ ],
+ "return": {
+ "description": "the red value.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/core/p5.Element.js",
- "line": 301,
- "description": "<p>Adds a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class\" target=\"_blank\">class attribute</a>\nto the element using a given string.</p>\n<p>Calling <code>myElement.class()</code> without an argument returns a string with its current classes.</p>\n",
+ "name": "green",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 684,
"itemtype": "method",
- "name": "class",
- "chainable": 1,
+ "description": "<p>Gets the green value of a color.</p>\n<p><code>green()</code> extracts the green value from a\n<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>By default, <code>green()</code> returns a color's green value in the range 0\nto 255. If the <a href=\"/reference/p5/colorMode/\">colorMode()</a> is set to RGB, it\nreturns the green value in the given range.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Add the class \"small\" to the\n // canvas element.\n cnv.class('small');\n\n // Get the canvas element's class\n // and display it.\n let c = cnv.class();\n text(c, 35, 54);\n\n describe('The word \"small\" written in black on a gray canvas.');\n\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(175, 100, 220);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 100.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [175, 100, 220];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 100.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgb(175, 100, 220)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 100.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Create a p5.Color object using RGB values.\n let c = color(69, 39, 86);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'greenValue' to 39.\n let greenValue = green(c);\n\n // Draw the right rectangle.\n fill(0, greenValue, 0);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is dark green.');\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 301,
"params": [
{
- "name": "class",
- "description": "<p>class to add.</p>\n",
- "type": "String"
+ "name": "color",
+ "description": "<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, array of\ncolor components, or CSS color string.",
+ "type": "p5.Color|Number[]|String"
}
],
- "chainable": 1
- },
- {
- "line": 337,
- "params": [],
"return": {
- "description": "element's classes, if any.",
- "type": "String"
+ "description": "the green value.",
+ "type": "Number"
}
}
- ]
+ ],
+ "return": {
+ "description": "the green value.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/core/p5.Element.js",
- "line": 350,
- "description": "<p>Calls a function when the mouse is pressed over the element.</p>\n<p>Calling <code>myElement.mousePressed(false)</code> disables the function.</p>\n<p>Note: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.</p>\n",
+ "name": "blue",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 821,
"itemtype": "method",
- "name": "mousePressed",
- "params": [
+ "description": "<p>Gets the blue value of a color.</p>\n<p><code>blue()</code> extracts the blue value from a\n<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>By default, <code>blue()</code> returns a color's blue value in the range 0\nto 255. If the <a href=\"/reference/p5/colorMode/\">colorMode()</a> is set to RGB, it\nreturns the blue value in the given range.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object using RGB values.\n let c = color(175, 100, 220);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 220.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [175, 100, 220];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 220.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgb(175, 100, 220)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 220.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Create a p5.Color object using RGB values.\n let c = color(69, 39, 86);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'blueValue' to 86.\n let blueValue = blue(c);\n\n // Draw the right rectangle.\n fill(0, 0, blueValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light purple and the right one is royal blue.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "fxn",
- "description": "<p>function to call when the mouse is\n pressed over the element.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
+ "params": [
+ {
+ "name": "color",
+ "description": "<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, array of\ncolor components, or CSS color string.",
+ "type": "p5.Color|Number[]|String"
+ }
+ ],
+ "return": {
+ "description": "the blue value.",
+ "type": "Number"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the canvas\n // is pressed.\n cnv.mousePressed(randomColor);\n\n describe('A gray square changes color when the mouse is pressed.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
+ "return": {
+ "description": "the blue value.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/core/p5.Element.js",
- "line": 405,
- "description": "<p>Calls a function when the mouse is pressed twice over the element.</p>\n<p>Calling <code>myElement.doubleClicked(false)</code> disables the function.</p>\n",
+ "name": "alpha",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 923,
"itemtype": "method",
- "name": "doubleClicked",
- "params": [
+ "description": "<p>Gets the alpha (transparency) value of a color.</p>\n<p><code>alpha()</code> extracts the alpha value from a\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(0, 126, 255, 102);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'alphaValue' to 102.\n let alphaValue = alpha(c);\n\n // Draw the right rectangle.\n fill(alphaValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a color array.\n let c = [0, 126, 255, 102];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'alphaValue' to 102.\n let alphaValue = alpha(c);\n\n // Draw the left rectangle.\n fill(alphaValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a CSS color string.\n let c = 'rgba(0, 126, 255, 0.4)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'alphaValue' to 102.\n let alphaValue = alpha(c);\n\n // Draw the right rectangle.\n fill(alphaValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "fxn",
- "description": "<p>function to call when the mouse is\n double clicked over the element.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
+ "params": [
+ {
+ "name": "color",
+ "description": "<a href=\"#/p5.Color\">p5.Color</a> object, array of\ncolor components, or CSS color string.",
+ "type": "p5.Color|Number[]|String"
+ }
+ ],
+ "return": {
+ "description": "the alpha value.",
+ "type": "Number"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // canvas is double-clicked.\n cnv.doubleClicked(randomColor);\n\n describe('A gray square changes color when the user double-clicks the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
+ "return": {
+ "description": "the alpha value.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/core/p5.Element.js",
- "line": 447,
- "description": "<p>Calls a function when the mouse wheel scrolls over the element.</p>\n<p>The callback function, <code>fxn</code>, is passed an <code>event</code> object. <code>event</code> has\ntwo numeric properties, <code>deltaY</code> and <code>deltaX</code>. <code>event.deltaY</code> is\nnegative if the mouse wheel rotates away from the user. It's positive if\nthe mouse wheel rotates toward the user. <code>event.deltaX</code> is positive if\nthe mouse wheel moves to the right. It's negative if the mouse wheel moves\nto the left.</p>\n<p>Calling <code>myElement.mouseWheel(false)</code> disables the function.</p>\n",
+ "name": "hue",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 1045,
"itemtype": "method",
- "name": "mouseWheel",
- "params": [
+ "description": "<p>Gets the hue value of a color.</p>\n<p><code>hue()</code> extracts the hue value from a\n<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>Hue describes a color's position on the color wheel. By default, <code>hue()</code>\nreturns a color's HSL hue in the range 0 to 360. If the\n<a href=\"/reference/p5/colorMode/\">colorMode()</a> is set to HSB or HSL, it returns the hue\nvalue in the given mode.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a p5.Color object.\n let c = color(0, 50, 100);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Set 'hueValue' to 0.\n let hueValue = hue(c);\n\n // Draw the right rectangle.\n fill(hueValue);\n rect(50, 20, 35, 60);\n\n describe(\n 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'\n );\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a color array.\n let c = [0, 50, 100];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Set 'hueValue' to 0.\n let hueValue = hue(c);\n\n // Draw the right rectangle.\n fill(hueValue);\n rect(50, 20, 35, 60);\n\n describe(\n 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'\n );\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Set 'hueValue' to 0.\n let hueValue = hue(c);\n\n // Draw the right rectangle.\n fill(hueValue);\n rect(50, 20, 35, 60);\n\n describe(\n 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "fxn",
- "description": "<p>function to call when the mouse wheel is\n scrolled over the element.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
+ "params": [
+ {
+ "name": "color",
+ "description": "<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, array of\ncolor components, or CSS color string.",
+ "type": "p5.Color|Number[]|String"
+ }
+ ],
+ "return": {
+ "description": "the hue value.",
+ "type": "Number"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse wheel moves.\n cnv.mouseWheel(randomColor);\n\n describe('A gray square changes color when the user scrolls the mouse wheel over the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call changeBackground() when the\n // mouse wheel moves.\n cnv.mouseWheel(changeBackground);\n\n describe('A gray square. When the mouse wheel scrolls over the square, it changes color and displays shapes.');\n}\n\nfunction changeBackground(event) {\n // Change the background color\n // based on deltaY.\n if (event.deltaY > 0) {\n background('deeppink');\n } else if (event.deltaY < 0) {\n background('cornflowerblue');\n } else {\n background(200);\n }\n\n // Draw a shape based on deltaX.\n if (event.deltaX > 0) {\n circle(50, 50, 20);\n } else if (event.deltaX < 0) {\n square(40, 40, 20);\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
+ "return": {
+ "description": "the hue value.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/core/p5.Element.js",
- "line": 533,
- "description": "<p>Calls a function when the mouse is released over the element.</p>\n<p>Calling <code>myElement.mouseReleased(false)</code> disables the function.</p>\n<p>Note: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.</p>\n",
+ "name": "saturation",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 1222,
"itemtype": "method",
- "name": "mouseReleased",
- "params": [
+ "description": "<p>Gets the saturation value of a color.</p>\n<p><code>saturation()</code> extracts the saturation value from a\n<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>Saturation is scaled differently in HSB and HSL. By default, <code>saturation()</code>\nreturns a color's HSL saturation in the range 0 to 100. If the\n<a href=\"/reference/p5/colorMode/\">colorMode()</a> is set to HSB or HSL, it returns the\nsaturation value in the given mode.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a p5.Color object.\n let c = color(0, 50, 100);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 50.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is dark gray.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a color array.\n let c = [0, 50, 100];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 100.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 100.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a p5.Color object.\n let c = color(0, 100, 75);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 100.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color with values in the range 0-255.\n colorMode(HSL, 255);\n\n // Create a p5.Color object.\n let c = color(0, 255, 191.5);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'satValue' to 255.\n let satValue = saturation(c);\n\n // Draw the right rectangle.\n fill(satValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "fxn",
- "description": "<p>function to call when the mouse is\n pressed over the element.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
+ "params": [
+ {
+ "name": "color",
+ "description": "<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, array of\ncolor components, or CSS color string.",
+ "type": "p5.Color|Number[]|String"
+ }
+ ],
+ "return": {
+ "description": "the saturation value",
+ "type": "Number"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when a\n // mouse press ends.\n cnv.mouseReleased(randomColor);\n\n describe('A gray square changes color when the user releases a mouse press.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
+ "return": {
+ "description": "the saturation value",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/core/p5.Element.js",
- "line": 578,
- "description": "<p>Calls a function when the mouse is pressed and released over the element.</p>\n<p>Calling <code>myElement.mouseReleased(false)</code> disables the function.</p>\n<p>Note: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.</p>\n",
+ "name": "brightness",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 1367,
"itemtype": "method",
- "name": "mouseClicked",
- "params": [
- {
- "name": "fxn",
- "description": "<p>function to call when the mouse is\n pressed and released over the element.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
- }
- ],
- "chainable": 1,
+ "description": "<p>Gets the brightness value of a color.</p>\n<p><code>brightness()</code> extracts the HSB brightness value from a\n<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>By default, <code>brightness()</code> returns a color's HSB brightness in the range 0\nto 100. If the <a href=\"/reference/p5/colorMode/\">colorMode()</a> is set to HSB, it\nreturns the brightness value in the given range.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when a\n // mouse press ends.\n cnv.mouseClicked(randomColor);\n\n describe('A gray square changes color when the user releases a mouse press.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a p5.Color object.\n let c = color(0, 50, 100);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 100.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a color array.\n let c = [0, 50, 100];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 100.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 100.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color with values in the range 0-255.\n colorMode(HSB, 255);\n\n // Create a p5.Color object.\n let c = color(0, 127, 255);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'brightValue' to 255.\n let brightValue = brightness(c);\n\n // Draw the right rectangle.\n fill(brightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is white.');\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/core/p5.Element.js",
- "line": 623,
- "description": "<p>Calls a function when the mouse moves over the element.</p>\n<p>Calling <code>myElement.mouseMoved(false)</code> disables the function.</p>\n",
- "itemtype": "method",
- "name": "mouseMoved",
- "params": [
+ "overloads": [
{
- "name": "fxn",
- "description": "<p>function to call when the mouse\n moves over the element.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
+ "params": [
+ {
+ "name": "color",
+ "description": "<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, array of\ncolor components, or CSS color string.",
+ "type": "p5.Color|Number[]|String"
+ }
+ ],
+ "return": {
+ "description": "the brightness value.",
+ "type": "Number"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves.\n cnv.mouseMoved(randomColor);\n\n describe('A gray square changes color when the mouse moves over the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
+ "return": {
+ "description": "the brightness value.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/core/p5.Element.js",
- "line": 665,
- "description": "<p>Calls a function when the mouse moves onto the element.</p>\n<p>Calling <code>myElement.mouseOver(false)</code> disables the function.</p>\n",
+ "name": "lightness",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 1512,
"itemtype": "method",
- "name": "mouseOver",
- "params": [
- {
- "name": "fxn",
- "description": "<p>function to call when the mouse\n moves onto the element.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
- }
- ],
- "chainable": 1,
+ "description": "<p>Gets the lightness value of a color.</p>\n<p><code>lightness()</code> extracts the HSL lightness value from a\n<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, an array of color components, or\na CSS color string.</p>\n<p>By default, <code>lightness()</code> returns a color's HSL lightness in the range 0\nto 100. If the <a href=\"/reference/p5/colorMode/\">colorMode()</a> is set to HSL, it\nreturns the lightness value in the given range.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves onto the canvas.\n cnv.mouseOver(randomColor);\n\n describe('A gray square changes color when the mouse moves onto the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a p5.Color object using HSL values.\n let c = color(0, 100, 75);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 75.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a color array.\n let c = [0, 100, 75];\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 75.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Create a CSS color string.\n let c = 'rgb(255, 128, 128)';\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 75.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use HSL color with values in the range 0-255.\n colorMode(HSL, 255);\n\n // Create a p5.Color object using HSL values.\n let c = color(0, 255, 191.5);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 15, 35, 70);\n\n // Set 'lightValue' to 191.5.\n let lightValue = lightness(c);\n\n // Draw the right rectangle.\n fill(lightValue);\n rect(50, 15, 35, 70);\n\n describe('Two rectangles. The left one is salmon pink and the right one is gray.');\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/core/p5.Element.js",
- "line": 707,
- "description": "<p>Calls a function when the mouse moves off the element.</p>\n<p>Calling <code>myElement.mouseOut(false)</code> disables the function.</p>\n",
- "itemtype": "method",
- "name": "mouseOut",
- "params": [
+ "overloads": [
{
- "name": "fxn",
- "description": "<p>function to call when the mouse\n moves off the element.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
+ "params": [
+ {
+ "name": "color",
+ "description": "<a href=\"/reference/p5/p5.Color/\">p5.Color</a> object, array of\ncolor components, or CSS color string.",
+ "type": "p5.Color|Number[]|String"
+ }
+ ],
+ "return": {
+ "description": "the lightness value.",
+ "type": "Number"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves off the canvas.\n cnv.mouseOut(randomColor);\n\n describe('A gray square changes color when the mouse moves off the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
+ "return": {
+ "description": "the lightness value.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/core/p5.Element.js",
- "line": 749,
- "description": "<p>Calls a function when the element is touched.</p>\n<p>Calling <code>myElement.touchStarted(false)</code> disables the function.</p>\n<p>Note: Touch functions only work on mobile devices.</p>\n",
+ "name": "lerpColor",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 1576,
"itemtype": "method",
- "name": "touchStarted",
- "params": [
- {
- "name": "fxn",
- "description": "<p>function to call when the touch\n starts.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
- }
- ],
- "chainable": 1,
+ "description": "<p>Blends two colors to find a third color between them.</p>\n<p>The <code>amt</code> parameter specifies the amount to interpolate between the two\nvalues. 0 is equal to the first color, 0.1 is very near the first color,\n0.5 is halfway between the two colors, and so on. Negative numbers are set\nto 0. Numbers greater than 1 are set to 1. This differs from the behavior of\n<a href=\"#/lerp\">lerp</a>. It's necessary because numbers outside of the\ninterval [0, 1] will produce strange and unexpected colors.</p>\n<p>The way that colors are interpolated depends on the current\n<a href=\"#/colorMode\">colorMode()</a>.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // user touches the canvas.\n cnv.touchStarted(randomColor);\n\n describe('A gray square changes color when the user touches the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Color objects to interpolate between.\n let from = color(218, 165, 32);\n let to = color(72, 61, 139);\n\n // Create intermediate colors.\n let interA = lerpColor(from, to, 0.33);\n let interB = lerpColor(from, to, 0.66);\n\n // Draw the left rectangle.\n noStroke();\n fill(from);\n rect(10, 20, 20, 60);\n\n // Draw the left-center rectangle.\n fill(interA);\n rect(30, 20, 20, 60);\n\n // Draw the right-center rectangle.\n fill(interB);\n rect(50, 20, 20, 60);\n\n // Draw the right rectangle.\n fill(to);\n rect(70, 20, 20, 60);\n\n describe(\n 'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'\n );\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/core/p5.Element.js",
- "line": 793,
- "description": "<p>Calls a function when the user touches the element and moves.</p>\n<p>Calling <code>myElement.touchMoved(false)</code> disables the function.</p>\n<p>Note: Touch functions only work on mobile devices.</p>\n",
- "itemtype": "method",
- "name": "touchMoved",
- "params": [
+ "overloads": [
{
- "name": "fxn",
- "description": "<p>function to call when the touch\n moves over the element.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
+ "params": [
+ {
+ "name": "c1",
+ "description": "interpolate from this color.",
+ "type": "p5.Color"
+ },
+ {
+ "name": "c2",
+ "description": "interpolate to this color.",
+ "type": "p5.Color"
+ },
+ {
+ "name": "amt",
+ "description": "number between 0 and 1.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "interpolated color.",
+ "type": "p5.Color"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // user touches the canvas\n // and moves.\n cnv.touchMoved(randomColor);\n\n describe('A gray square changes color when the user touches the canvas and moves.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
+ "return": {
+ "description": "interpolated color.",
+ "type": "p5.Color"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/core/p5.Element.js",
- "line": 837,
- "description": "<p>Calls a function when the user stops touching the element.</p>\n<p>Calling <code>myElement.touchMoved(false)</code> disables the function.</p>\n<p>Note: Touch functions only work on mobile devices.</p>\n",
+ "name": "paletteLerp",
+ "file": "src/scripts/parsers/in/p5.js/src/color/creating_reading.js",
+ "line": 1616,
"itemtype": "method",
- "name": "touchEnded",
- "params": [
- {
- "name": "fxn",
- "description": "<p>function to call when the touch\n ends.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
- }
- ],
- "chainable": 1,
+ "description": "<p>Blends multiple colors to find a color between them.</p>\n<p>The <code>amt</code> parameter specifies the amount to interpolate between the color\nstops which are colors at each <code>amt</code> value \"location\" with <code>amt</code> values\nthat are between 2 color stops interpolating between them based on its relative\ndistance to both.</p>\n<p>The way that colors are interpolated depends on the current\n<a href=\"/reference/p5/colorMode/\">colorMode()</a>.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // user touches the canvas,\n // then lifts their finger.\n cnv.touchEnded(randomColor);\n\n describe('A gray square changes color when the user touches the canvas, then lifts their finger.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(400, 400);\n}\n\nfunction draw() {\n // The background goes from white to red to green to blue fill\n background(paletteLerp([\n ['white', 0],\n ['red', 0.05],\n ['green', 0.25],\n ['blue', 1]\n ], millis() / 10000 % 1));\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/core/p5.Element.js",
- "line": 881,
- "description": "<p>Calls a function when a file is dragged over the element.</p>\n<p>Calling <code>myElement.dragOver(false)</code> disables the function.</p>\n",
- "itemtype": "method",
- "name": "dragOver",
- "params": [
+ "overloads": [
{
- "name": "fxn",
- "description": "<p>function to call when the file is\n dragged over the element.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
+ "params": [
+ {
+ "name": "colors_stops",
+ "description": "color stops to interpolate from",
+ "type": "[p5.Color|String|Number|Number[], Number][]"
+ },
+ {
+ "name": "amt",
+ "description": "number to use to interpolate relative to color stops",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "interpolated color.",
+ "type": "p5.Color"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Drag a file over the canvas to test.\n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call helloFile() when a\n // file is dragged over\n // the canvas.\n cnv.dragOver(helloFile);\n\n describe('A gray square. The text \"hello, file\" appears when a file is dragged over the square.');\n}\n\nfunction helloFile() {\n text('hello, file', 50, 50);\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
+ "return": {
+ "description": "interpolated color.",
+ "type": "p5.Color"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/core/p5.Element.js",
- "line": 923,
- "description": "<p>Calls a function when a file is dragged off the element.</p>\n<p>Calling <code>myElement.dragLeave(false)</code> disables the function.</p>\n",
+ "name": "beginClip",
+ "file": "src/scripts/parsers/in/p5.js/src/color/setting.js",
+ "line": 186,
"itemtype": "method",
- "name": "dragLeave",
- "params": [
+ "description": "<p>Starts defining a shape that will mask any shapes drawn afterward.</p>\n<p>Any shapes drawn between <code>beginClip()</code> and\n<a href=\"#/p5/endClip\">endClip()</a> will add to the mask shape. The mask\nwill apply to anything drawn after <a href=\"#/p5/endClip\">endClip()</a>.</p>\n<p>The parameter, <code>options</code>, is optional. If an object with an <code>invert</code>\nproperty is passed, as in <code>beginClip({ invert: true })</code>, it will be used to\nset the masking mode. <code>{ invert: true }</code> inverts the mask, creating holes\nin shapes that are masked. <code>invert</code> is <code>false</code> by default.</p>\n<p>Masks can be contained between the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.\nDoing so allows unmasked shapes to be drawn after masked shapes.</p>\n<p>Masks can also be defined in a callback function that's passed to\n<a href=\"#/p5/clip\">clip()</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a mask.\n beginClip();\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white triangle and circle on a gray background.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an inverted mask.\n beginClip({ invert: true });\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n noStroke();\n\n // Draw a masked shape.\n push();\n // Create a mask.\n beginClip();\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw an inverted masked shape.\n push();\n // Create an inverted mask.\n beginClip({ invert: true });\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored fuchsia.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n beginClip();\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n endClip();\n\n // Draw a backing shape.\n noStroke();\n fill('fuchsia');\n plane(100);\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n beginClip();\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n endClip();\n\n // Draw a backing shape.\n noStroke();\n beginShape(QUAD_STRIP);\n fill(0, 255, 255);\n vertex(-width / 2, -height / 2);\n vertex(width / 2, -height / 2);\n fill(100, 0, 100);\n vertex(-width / 2, height / 2);\n vertex(width / 2, height / 2);\n endShape();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "fxn",
- "description": "<p>function to call when the file is\n dragged off the element.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
+ "params": [
+ {
+ "name": "options",
+ "description": "an object containing clip settings.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ]
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Drag a file over, then off\n// the canvas to test.\n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call byeFile() when a\n // file is dragged over,\n // then off the canvas.\n cnv.dragLeave(byeFile);\n\n describe('A gray square. The text \"bye, file\" appears when a file is dragged over, then off the square.');\n}\n\nfunction byeFile() {\n text('bye, file', 50, 50);\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/core/p5.Element.js",
- "line": 1015,
- "description": "<p>Helper fxn for sharing pixel methods</p>\n",
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Setting"
},
{
- "file": "src/core/p5.Graphics.js",
- "line": 153,
- "description": "<p>Resets the graphics buffer's transformations and lighting.</p>\n<p>By default, the main canvas resets certain transformation and lighting\nvalues each time <a href=\"#/p5/draw\">draw()</a> executes. <code>p5.Graphics</code>\nobjects must reset these values manually by calling <code>myGraphics.reset()</code>.</p>\n",
+ "name": "endClip",
+ "file": "src/scripts/parsers/in/p5.js/src/color/setting.js",
+ "line": 218,
"itemtype": "method",
- "name": "reset",
+ "description": "Ends defining a mask that was started with\n<a href=\"#/p5/beginClip\">beginClip()</a>.",
"example": [
- "\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(60, 60);\n\n describe('A white circle moves downward slowly within a dark square. The circle resets at the top of the dark square when the user presses the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the p5.Graphics object's coordinate system.\n // The translation accumulates; the white circle moves.\n pg.translate(0, 0.1);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(30, 0, 10);\n\n // Display the p5.Graphics object.\n image(pg, 20, 20);\n\n // Translate the main canvas' coordinate system.\n // The translation doesn't accumulate; the dark\n // square is always in the same place.\n translate(0, 0.1);\n\n // Reset the p5.Graphics object when the\n // user presses the mouse.\n if (mouseIsPressed === true) {\n pg.reset();\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(60, 60);\n\n describe('A white circle at the center of a dark gray square. The image is drawn on a light gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the p5.Graphics object's coordinate system.\n pg.translate(30, 30);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(0, 0, 10);\n\n // Display the p5.Graphics object.\n image(pg, 20, 20);\n\n // Reset the p5.Graphics object automatically.\n pg.reset();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n describe(\"A sphere lit from above with a red light. The sphere's surface becomes glossy while the user clicks and holds the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Add a red point light from the top-right.\n pg.pointLight(255, 0, 0, 50, -100, 50);\n\n // Style the sphere.\n // It should appear glossy when the\n // lighting values are reset.\n pg.noStroke();\n pg.specularMaterial(255);\n pg.shininess(100);\n\n // Draw the sphere.\n pg.sphere(30);\n\n // Display the p5.Graphics object.\n image(pg, -50, -50);\n\n // Reset the p5.Graphics object when\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n pg.reset();\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n describe('A sphere with a glossy surface is lit from the top-right by a red light.');\n}\n\nfunction draw() {\n background(200);\n\n // Add a red point light from the top-right.\n pg.pointLight(255, 0, 0, 50, -100, 50);\n\n // Style the sphere.\n pg.noStroke();\n pg.specularMaterial(255);\n pg.shininess(100);\n\n // Draw the sphere.\n pg.sphere(30);\n\n // Display the p5.Graphics object.\n image(pg, 0, 0);\n\n // Reset the p5.Graphics object automatically.\n pg.reset();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a mask.\n beginClip();\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n endClip();\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white triangle and circle on a gray background.');\n}\n</code>\n</div>"
],
- "class": "p5.Graphics",
- "module": "Rendering",
- "submodule": "Rendering"
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Setting"
},
{
- "file": "src/core/p5.Graphics.js",
- "line": 320,
- "description": "<p>Removes the graphics buffer from the web page.</p>\n<p>Calling <code>myGraphics.remove()</code> removes the graphics buffer's\n<code><canvas></code> element from the web page. The graphics buffer also uses\na bit of memory on the CPU that can be freed like so:</p>\n<pre><code class=\"language-js\">// Remove the graphics buffer from the web page.\nmyGraphics.remove();\n\n// Delete the graphics buffer from CPU memory.\nmyGraphics = undefined;\n</code></pre>\n<p>Note: All variables that reference the graphics buffer must be assigned\nthe value <code>undefined</code> to delete the graphics buffer from CPU memory. If any\nvariable still refers to the graphics buffer, then it won't be garbage\ncollected.</p>\n",
+ "name": "clip",
+ "file": "src/scripts/parsers/in/p5.js/src/color/setting.js",
+ "line": 408,
"itemtype": "method",
- "name": "remove",
+ "description": "<p>Defines a shape that will mask any shapes drawn afterward.</p>\n<p>The first parameter, <code>callback</code>, is a function that defines the mask.\nAny shapes drawn in <code>callback</code> will add to the mask shape. The mask\nwill apply to anything drawn after <code>clip()</code> is called.</p>\n<p>The second parameter, <code>options</code>, is optional. If an object with an <code>invert</code>\nproperty is passed, as in <code>beginClip({ invert: true })</code>, it will be used to\nset the masking mode. <code>{ invert: true }</code> inverts the mask, creating holes\nin shapes that are masked. <code>invert</code> is <code>false</code> by default.</p>\n<p>Masks can be contained between the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.\nDoing so allows unmasked shapes to be drawn after masked shapes.</p>\n<p>Masks can also be defined with <a href=\"#/p5/beginClip\">beginClip()</a>\nand <a href=\"#/p5/endClip\">endClip()</a>.</p>\n",
"example": [
- "\n<div>\n<code>\n// Double-click to remove the p5.Graphics object.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(60, 60);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(30, 30, 20);\n\n describe('A white circle at the center of a dark gray square disappears when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the p5.Graphics object if\n // it's available.\n if (pg) {\n image(pg, 20, 20);\n }\n}\n\n// Remove the p5.Graphics object when the\n// the user double-clicks.\nfunction doubleClicked() {\n // Remove the p5.Graphics object from the web page.\n pg.remove();\n pg = undefined;\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white triangle and circle on a gray background.');\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an inverted mask.\n clip(mask, { invert: true });\n\n // Draw a backing shape.\n square(5, 5, 45);\n\n describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n noStroke();\n\n // Draw a masked shape.\n push();\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw an inverted masked shape.\n push();\n // Create an inverted mask.\n clip(mask, { invert: true });\n\n // Draw a backing shape.\n square(5, 5, 45);\n pop();\n\n describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n triangle(15, 37, 30, 13, 43, 37);\n circle(45, 45, 7);\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored fuchsia.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n noStroke();\n fill('fuchsia');\n plane(100);\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a mask.\n clip(mask);\n\n // Draw a backing shape.\n noStroke();\n beginShape(QUAD_STRIP);\n fill(0, 255, 255);\n vertex(-width / 2, -height / 2);\n vertex(width / 2, -height / 2);\n fill(100, 0, 100);\n vertex(-width / 2, height / 2);\n vertex(width / 2, height / 2);\n endShape();\n}\n\n// Declare a function that defines the mask.\nfunction mask() {\n push();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n scale(0.5);\n torus(30, 15);\n pop();\n}\n</code>\n</div>"
],
- "class": "p5.Graphics",
- "module": "Rendering",
- "submodule": "Rendering"
- },
- {
- "file": "src/core/p5.Graphics.js",
- "line": 400,
- "description": "<p>Creates a new <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object with\nthe same WebGL context as the graphics buffer.</p>\n<p><a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> objects are separate drawing\nsurfaces that can be used as textures in WebGL mode. They're similar to\n<a href=\"#/p5.Graphics\">p5.Graphics</a> objects and generally run much\nfaster when used as textures. Creating a\n<a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object in the same context\nas the graphics buffer makes this speedup possible.</p>\n<p>The parameter, <code>options</code>, is optional. An object can be passed to configure\nthe <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. The available\nproperties are:</p>\n<ul>\n<li><code>format</code>: data format of the texture, either <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or <code>HALF_FLOAT</code>. Default is <code>UNSIGNED_BYTE</code>.</li>\n<li><code>channels</code>: whether to store <code>RGB</code> or <code>RGBA</code> color channels. Default is to match the graphics buffer which is <code>RGBA</code>.</li>\n<li><code>depth</code>: whether to include a depth buffer. Default is <code>true</code>.</li>\n<li><code>depthFormat</code>: data format of depth information, either <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is <code>FLOAT</code>.</li>\n<li><code>stencil</code>: whether to include a stencil buffer for masking. <code>depth</code> must be <code>true</code> for this feature to work. Defaults to the value of <code>depth</code> which is <code>true</code>.</li>\n<li><code>antialias</code>: whether to perform anti-aliasing. If set to <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will be used by default. The number of samples can also be set, as in <code>{ antialias: 4 }</code>. Default is to match <a href=\"#/p5/setAttributes\">setAttributes()</a> which is <code>false</code> (<code>true</code> in Safari).</li>\n<li><code>width</code>: width of the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Default is to always match the graphics buffer width.</li>\n<li><code>height</code>: height of the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Default is to always match the graphics buffer height.</li>\n<li><code>density</code>: pixel density of the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Default is to always match the graphics buffer pixel density.</li>\n<li><code>textureFiltering</code>: how to read values from the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Either <code>LINEAR</code> (nearby pixels will be interpolated) or <code>NEAREST</code> (no interpolation). Generally, use <code>LINEAR</code> when using the texture as an image and <code>NEAREST</code> if reading the texture as data. Default is <code>LINEAR</code>.</li>\n</ul>\n<p>If the <code>width</code>, <code>height</code>, or <code>density</code> attributes are set, they won't\nautomatically match the graphics buffer and must be changed manually.</p>\n",
- "itemtype": "method",
- "name": "createFramebuffer",
- "params": [
+ "overloads": [
{
- "name": "options",
- "description": "<p>configuration options.</p>\n",
- "type": "Object",
- "optional": true
+ "params": [
+ {
+ "name": "callback",
+ "description": "a function that draws the mask shape.",
+ "type": "Function"
+ },
+ {
+ "name": "options",
+ "description": "an object containing clip settings.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ]
}
],
- "return": {
- "description": "new framebuffer.",
- "type": "p5.Framebuffer"
- },
- "example": [
- "\n<div>\n<code>\n// Click and hold a mouse button to change shapes.\n\nlet pg;\nlet torusLayer;\nlet boxLayer;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n // Create the p5.Framebuffer objects.\n torusLayer = pg.createFramebuffer();\n boxLayer = pg.createFramebuffer();\n\n describe('A grid of white toruses rotating against a dark gray background. The shapes become boxes while the user holds a mouse button.');\n}\n\nfunction draw() {\n // Update and draw the layers offscreen.\n drawTorus();\n drawBox();\n\n // Choose the layer to display.\n let layer;\n if (mouseIsPressed === true) {\n layer = boxLayer;\n } else {\n layer = torusLayer;\n }\n\n // Draw to the p5.Graphics object.\n pg.background(50);\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the layer to the p5.Graphics object\n pg.image(layer, x, y, 25, 25);\n }\n }\n\n // Display the p5.Graphics object.\n image(pg, 0, 0);\n}\n\n// Update and draw the torus layer offscreen.\nfunction drawTorus() {\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the torus.\n pg.noStroke();\n\n // Draw the torus.\n pg.torus(20);\n\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.end();\n}\n\n// Update and draw the box layer offscreen.\nfunction drawBox() {\n // Start drawing to the box p5.Framebuffer.\n boxLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the box.\n pg.noStroke();\n\n // Draw the box.\n pg.box(30);\n\n // Start drawing to the box p5.Framebuffer.\n boxLayer.end();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and hold a mouse button to change shapes.\n\nlet pg;\nlet torusLayer;\nlet boxLayer;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an options object.\n let options = { width: 25, height: 25 };\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n // Create the p5.Framebuffer objects.\n // Use options for configuration.\n torusLayer = pg.createFramebuffer(options);\n boxLayer = pg.createFramebuffer(options);\n\n describe('A grid of white toruses rotating against a dark gray background. The shapes become boxes while the user holds a mouse button.');\n}\n\nfunction draw() {\n // Update and draw the layers offscreen.\n drawTorus();\n drawBox();\n\n // Choose the layer to display.\n let layer;\n if (mouseIsPressed === true) {\n layer = boxLayer;\n } else {\n layer = torusLayer;\n }\n\n // Draw to the p5.Graphics object.\n pg.background(50);\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the layer to the p5.Graphics object\n pg.image(layer, x, y);\n }\n }\n\n // Display the p5.Graphics object.\n image(pg, 0, 0);\n}\n\n// Update and draw the torus layer offscreen.\nfunction drawTorus() {\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the torus.\n pg.noStroke();\n\n // Draw the torus.\n pg.torus(5, 2.5);\n\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.end();\n}\n\n// Update and draw the box layer offscreen.\nfunction drawBox() {\n // Start drawing to the box p5.Framebuffer.\n boxLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the box.\n pg.noStroke();\n\n // Draw the box.\n pg.box(7.5);\n\n // Start drawing to the box p5.Framebuffer.\n boxLayer.end();\n}\n</code>\n</div>"
- ],
- "class": "p5.Graphics",
- "module": "Rendering",
- "submodule": "Rendering"
- },
- {
- "file": "src/core/p5.Renderer.js",
- "line": 120,
- "description": "<p>Resize our canvas element.</p>\n",
- "class": "p5.Renderer",
- "module": "Rendering",
- "submodule": "Rendering"
- },
- {
- "file": "src/core/p5.Renderer.js",
- "line": 468,
- "description": "<p>Helper function to check font type (system or otf)</p>\n",
- "class": "p5.Renderer",
- "module": "Rendering",
- "submodule": "Rendering"
- },
- {
- "file": "src/core/p5.Renderer.js",
- "line": 520,
- "description": "<p>Helper fxn to measure ascent and descent.\nAdapted from <a href=\"http://stackoverflow.com/a/25355178\">http://stackoverflow.com/a/25355178</a></p>\n",
- "class": "p5.Renderer",
- "module": "Rendering",
- "submodule": "Rendering"
- },
- {
- "file": "src/core/p5.Renderer2D.js",
- "line": 6,
- "description": "<p>p5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer</p>\n",
"class": "p5",
- "module": "Rendering"
+ "static": false,
+ "module": "Color",
+ "submodule": "Setting"
},
{
- "file": "src/core/reference.js",
- "line": 7,
- "description": "<p>Declares a new variable.</p>\n<p>A variable is a container for a value. For example, a variable might\ncontain a creature's x-coordinate as a <code>Number</code> or its name as a\n<code>String</code>. Variables can change value by reassigning them as follows:</p>\n<pre><code class=\"language-js\">// Declare the variable x and assign it the value 10.\nlet x = 10;\n\n// Reassign x to 50.\nx = 50;\n</code></pre>\n<p>Variables have block scope. When a variable is declared between curly\nbraces <code>{}</code>, it only exists within the block defined by those braces. For\nexample, the following code would throw a <code>ReferenceError</code> because <code>x</code> is\ndeclared within the <code>setup()</code> function's block:</p>\n<pre><code class=\"language-js\">function setup() {\n createCanvas(100, 100);\n\n let x = 50;\n}\n\nfunction draw() {\n background(200);\n\n // x was declared in setup(), so it can't be referenced here.\n circle(x, 50, 20);\n}\n</code></pre>\n<p>Variables declared outside of all curly braces <code>{}</code> are in the global\nscope. A variable that's in the global scope can be used and changed\nanywhere in a sketch:</p>\n<pre><code class=\"language-js\">let x = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n}\n\nfunction draw() {\n background(200);\n\n // Change the value of x.\n x += 10;\n\n circle(x, 50, 20);\n}\n</code></pre>\n",
- "itemtype": "property",
- "name": "let",
+ "name": "background",
+ "file": "src/scripts/parsers/in/p5.js/src/color/setting.js",
+ "line": 650,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Sets the color used for the background of the canvas.</p>\n<p>By default, the background is transparent. <code>background()</code> is typically used\nwithin <a href=\"#/p5/draw\">draw()</a> to clear the display window at the\nbeginning of each frame. It can also be used inside\n<a href=\"#/p5/setup\">setup()</a> to set the background on the first frame\nof animation.</p>\n<p>The version of <code>background()</code> with one parameter interprets the value one\nof four ways. If the parameter is a <code>Number</code>, it's interpreted as a grayscale\nvalue. If the parameter is a <code>String</code>, it's interpreted as a CSS color string.\nRGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the\nparameter is a <a href=\"#/p5.Color\">p5.Color</a> object, it will be used as\nthe background color. If the parameter is a\n<a href=\"#/p5.Image\">p5.Image</a> object, it will be used as the background\nimage.</p>\n<p>The version of <code>background()</code> with two parameters interprets the first one\nas a grayscale value. The second parameter sets the alpha (transparency)\nvalue.</p>\n<p>The version of <code>background()</code> with three parameters interprets them as RGB,\nHSB, or HSL colors, depending on the current\n<a href=\"#/p5/colorMode\">colorMode()</a>. By default, colors are specified\nin RGB values. Calling <code>background(255, 204, 0)</code> sets the background a bright\nyellow color.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(220);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Create the message variable.\n let message = 'Hello, 🌍!';\n\n // Display the message.\n text(message, 50, 50);\n\n describe('The text \"Hello, 🌍!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle moves from left to right against a gray background.');\n}\n\nfunction draw() {\n background(220);\n\n // Change the value of x.\n x += 1;\n\n circle(x, 50, 20);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // A grayscale value.\n background(51);\n\n describe('A canvas with a dark charcoal gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // A grayscale value and an alpha value.\n background(51, 0.4);\n describe('A canvas with a transparent gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // R, G & B values.\n background(255, 204, 0);\n\n describe('A canvas with a yellow background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use HSB color.\n colorMode(HSB);\n\n // H, S & B values.\n background(255, 204, 100);\n\n describe('A canvas with a royal blue background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // A CSS named color.\n background('red');\n\n describe('A canvas with a red background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Three-digit hex RGB notation.\n background('#fae');\n\n describe('A canvas with a pink background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Six-digit hex RGB notation.\n background('#222222');\n\n describe('A canvas with a black background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Integer RGB notation.\n background('rgb(0, 255, 0)');\n\n describe('A canvas with a bright green background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Integer RGBA notation.\n background('rgba(0, 255, 0, 0.25)');\n\n describe('A canvas with a transparent green background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Percentage RGB notation.\n background('rgb(100%, 0%, 10%)');\n\n describe('A canvas with a red background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Percentage RGBA notation.\n background('rgba(100%, 0%, 100%, 0.5)');\n\n describe('A canvas with a transparent purple background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // A p5.Color object.\n let c = color(0, 0, 255);\n background(c);\n\n describe('A canvas with a blue background.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Foundation",
- "submodule": "Foundation"
- },
- {
- "file": "src/core/reference.js",
- "line": 110,
- "description": "<p>A way to choose whether to run a block of code.</p>\n<p><code>if</code> statements are helpful for running a block of code based on a\ncondition. For example, an <code>if</code> statement makes it easy to express the\nidea \"Draw a circle if the mouse is pressed.\":</p>\n<pre><code class=\"language-js\">if (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n}\n</code></pre>\n<p>The statement header begins with the keyword <code>if</code>. The expression in\nparentheses <code>mouseIsPressed === true</code> is a <code>Boolean</code> expression that's\neither <code>true</code> or <code>false</code>. The code between the curly braces <code>{}</code> is the if\nstatement's body. The body only runs if the <code>Boolean</code> expression is <code>true</code>.</p>\n<p>The <a href=\"#/p5/mouseIsPressed\">mouseIsPressed</a> system variable is\nalways <code>true</code> or <code>false</code>, so the code snippet above could also be written\nas follows:</p>\n<pre><code class=\"language-js\">if (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n}\n</code></pre>\n<p>An <code>if</code>-<code>else</code> statement adds a block of code that runs if the <code>Boolean</code>\nexpression is <code>false</code>. For example, here's an <code>if</code>-<code>else</code> statement that\nexpresses the idea \"Draw a circle if the mouse is pressed. Otherwise,\ndisplay a message.\":</p>\n<pre><code class=\"language-js\">if (mouseIsPressed === true) {\n // When true.\n circle(mouseX, mouseY, 20);\n} else {\n // When false.\n text('Click me!', 50, 50);\n}\n</code></pre>\n<p>There are two possible paths, or branches, in this code snippet. The\nprogram must follow one branch or the other.</p>\n<p>An <code>else</code>-<code>if</code> statement makes it possible to add more branches.\n<code>else</code>-<code>if</code> statements run different blocks of code under different\nconditions. For example, an <code>else</code>-<code>if</code> statement makes it easy to express\nthe idea \"If the mouse is on the left, paint the canvas white. If the mouse\nis in the middle, paint the canvas gray. Otherwise, paint the canvas\nblack.\":</p>\n<pre><code class=\"language-js\">if (mouseX < 33) {\n background(255);\n} else if (mouseX < 67) {\n background(200);\n} else {\n background(0);\n}\n</code></pre>\n<p><code>if</code> statements can add as many <code>else</code>-<code>if</code> statements as needed. However,\nthere can only be one <code>else</code> statement and it must be last.</p>\n<p><code>if</code> statements can also check for multiple conditions at once. For\nexample, the <code>Boolean</code> operator <code>&&</code> (AND) checks whether two expressions\nare both <code>true</code>:</p>\n<pre><code class=\"language-js\">if (keyIsPressed === true && key === 'p') {\n text('You pressed the \"p\" key!', 50, 50);\n}\n</code></pre>\n<p>If the user is pressing a key AND that key is <code>'p'</code>, then a message will\ndisplay.</p>\n<p>The <code>Boolean</code> operator <code>||</code> (OR) checks whether at least one of two\nexpressions is <code>true</code>:</p>\n<pre><code class=\"language-js\">if (keyIsPressed === true || mouseIsPressed === true) {\n text('You did something!', 50, 50);\n}\n</code></pre>\n<p>If the user presses a key, or presses a mouse button, or both, then a\nmessage will display.</p>\n<p>The body of an <code>if</code> statement can contain another <code>if</code> statement. This is\ncalled a \"nested <code>if</code> statement.\" For example, nested <code>if</code> statements make\nit easy to express the idea \"If a key is pressed, then check if the key is\n<code>'r'</code>. If it is, then set the fill to red.\":</p>\n<pre><code class=\"language-js\">if (keyIsPressed === true) {\n if (key === 'r') {\n fill('red');\n }\n}\n</code></pre>\n<p>See <a href=\"#/p5/Boolean\">Boolean</a> and <a href=\"#/p5/Number\">Number</a>\nto learn more about these data types and the operations they support.</p>\n",
- "itemtype": "property",
- "name": "if",
- "example": [
- "\n<div>\n<code>\n// Click the mouse to show the circle.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse user clicks on the canvas.'\n );\n}\n\nfunction draw() {\n background(200);\n\n if (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the mouse to show different shapes.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white ellipse on a gray background. The ellipse becomes a circle when the user presses the mouse.'\n );\n}\n\nfunction draw() {\n background(200);\n\n if (mouseIsPressed === true) {\n circle(50, 50, 20);\n } else {\n ellipse(50, 50, 20, 50);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Move the mouse to change the background color.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A square changes color from white to black as the user moves the mouse from left to right.'\n );\n}\n\nfunction draw() {\n if (mouseX < 33) {\n background(255);\n } else if (mouseX < 67) {\n background(200);\n } else {\n background(0);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle drawn on a gray background. The circle changes color to red when the user presses the \"r\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n if (keyIsPressed === true) {\n if (key === 'r') {\n fill('red');\n }\n }\n\n circle(50, 50, 40);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Foundation",
- "submodule": "Foundation"
- },
- {
- "file": "src/core/reference.js",
- "line": 317,
- "description": "<p>A named group of statements.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions\" target=\"_blank\">Functions</a>\nhelp with organizing and reusing code. For example, functions make it easy\nto express the idea \"Draw a flower.\":</p>\n<pre><code class=\"language-js\">function drawFlower() {\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Draw a flower emoji.\n text('🌸', 50, 50);\n}\n</code></pre>\n<p>The function header begins with the keyword <code>function</code>. The function's\nname, <code>drawFlower</code>, is followed by parentheses <code>()</code> and curly braces <code>{}</code>.\nThe code between the curly braces is called the function's body. The\nfunction's body runs when the function is called like so:</p>\n<pre><code class=\"language-js\">drawFlower();\n</code></pre>\n<p>Functions can accept inputs by adding parameters to their headers.\nParameters are placeholders for values that will be provided when the\nfunction is called. For example, the <code>drawFlower()</code> function could include\na parameter for the flower's size:</p>\n<pre><code class=\"language-js\">function drawFlower(size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n text('🌸', 50, 50);\n}\n</code></pre>\n<p>Parameters are part of the function's declaration. Arguments are provided\nby the code that calls a function. When a function is called, arguments are\nassigned to parameters:</p>\n<pre><code class=\"language-js\">// The argument 20 is assigned to the parameter size.\ndrawFlower(20);\n</code></pre>\n<p>Functions can have multiple parameters separated by commas. Parameters\ncan have any type. For example, the <code>drawFlower()</code> function could accept\n<code>Number</code> parameters for the flower's x- and y-coordinates along with its\nsize:</p>\n<pre><code class=\"language-js\">function drawFlower(x, y, size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n // Use the x and y parameters.\n text('🌸', x, y);\n}\n</code></pre>\n<p>Functions can also produce outputs by adding a <code>return</code> statement:</p>\n<pre><code class=\"language-js\">function double(x) {\n let answer = 2 * x;\n return answer;\n}\n</code></pre>\n<p>The expression following <code>return</code> can produce an output that's used\nelsewhere. For example, the output of the <code>double()</code> function can be\nassigned to a variable:</p>\n<pre><code class=\"language-js\">let six = double(3);\ntext(`3 x 2 = ${six}`, 50, 50);\n</code></pre>\n",
- "itemtype": "property",
- "name": "function",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Call the drawFlower() function.\n drawFlower();\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower() {\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Draw a flower emoji.\n text('🌸', 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Call the drawFlower() function and pass values for\n // its position and size.\n drawFlower(50, 50, 20);\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower(x, y, size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n // Use the x and y parameters.\n text('🌸', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The message \"Hello, 🌍!\" written on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a greeting.\n let greeting = createGreeting('🌍');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the greeting.\n text(greeting, 50, 50);\n}\n\n// Return a string with a personalized greeting.\nfunction createGreeting(name) {\n let message = `Hello, ${name}!`;\n return message;\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Foundation",
- "submodule": "Foundation"
- },
- {
- "file": "src/core/reference.js",
- "line": 502,
- "description": "<p>A value that's either <code>true</code> or <code>false</code>.</p>\n<p><code>Boolean</code> values help to make decisions in code. They appear any time a\nlogical condition is checked. For example, the condition\n\"Is a mouse button being pressed?\" must be either <code>true</code> or\n<code>false</code>:</p>\n<pre><code class=\"language-js\">// If the user presses the mouse, draw a circle at\n// the mouse's location.\nif (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n}\n</code></pre>\n<p>The <code>if</code> statement checks whether\n<a href=\"#/p5/mouseIsPressed\">mouseIsPressed</a> is <code>true</code> and draws a\ncircle if it is. <code>Boolean</code> expressions such as <code>mouseIsPressed === true</code>\nevaluate to one of the two possible <code>Boolean</code> values: <code>true</code> or <code>false</code>.</p>\n<p>The <code>===</code> operator (EQUAL) checks whether two values are equal. If they\nare, the expression evaluates to <code>true</code>. Otherwise, it evaluates to\n<code>false</code>.</p>\n<p>Note: There's also a <code>==</code> operator with two <code>=</code> instead of three. Don't use\nit.</p>\n<p>The <a href=\"#/p5/mouseIsPressed\">mouseIsPressed</a> system variable is\nalways <code>true</code> or <code>false</code>, so the code snippet above could also be written\nas follows:</p>\n<pre><code class=\"language-js\">if (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n}\n</code></pre>\n<p>The <code>!==</code> operator (NOT EQUAL) checks whether two values are not equal, as\nin the following example:</p>\n<pre><code class=\"language-js\">if (2 + 2 !== 4) {\n text('War is peace.', 50, 50);\n}\n</code></pre>\n<p>Starting from the left, the arithmetic expression <code>2 + 2</code> produces the\nvalue <code>4</code>. The <code>Boolean</code> expression <code>4 !== 4</code> evaluates to <code>false</code> because\n<code>4</code> is equal to itself. As a result, the <code>if</code> statement's body is skipped.</p>\n<p>Note: There's also a <code>!=</code> operator with one <code>=</code> instead of two. Don't use\nit.</p>\n<p>The <code>Boolean</code> operator <code>&&</code> (AND) checks whether two expressions are both\n<code>true</code>:</p>\n<pre><code class=\"language-js\">if (keyIsPressed === true && key === 'p') {\n text('You pressed the \"p\" key!', 50, 50);\n}\n</code></pre>\n<p>If the user is pressing a key AND that key is <code>'p'</code>, then a message will\ndisplay.</p>\n<p>The <code>Boolean</code> operator <code>||</code> (OR) checks whether at least one of two\nexpressions is <code>true</code>:</p>\n<pre><code class=\"language-js\">if (keyIsPressed === true || mouseIsPressed === true) {\n text('You did something!', 50, 50);\n}\n</code></pre>\n<p>If the user presses a key, or presses a mouse button, or both, then a\nmessage will display.</p>\n<p>The following truth table summarizes a few common scenarios with <code>&&</code> and\n<code>||</code>:</p>\n<pre><code class=\"language-js\">true && true // true\ntrue && false // false\nfalse && false // false\ntrue || true // true\ntrue || false // true\nfalse || false // false\n</code></pre>\n<p>The relational operators <code>></code>, <code><</code>, <code>>=</code>, and <code><=</code> also produce <code>Boolean</code>\nvalues:</p>\n<pre><code class=\"language-js\">2 > 1 // true\n2 < 1 // false\n2 >= 2 // true\n2 <= 2 // true\n</code></pre>\n<p>See <a href=\"#/p5/if\">if</a> for more information about <code>if</code> statements and\n<a href=\"#/p5/Number\">Number</a> for more information about <code>Number</code>s.</p>\n",
- "itemtype": "property",
- "name": "Boolean",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. When the user presses the mouse, a circle appears at that location.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, draw a circle at that location.\n if (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. When the user presses the mouse, a circle appears at that location.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, draw a circle at that location.\n if (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square that turns pink when the user presses the mouse or a key.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, change the background color.\n if (mouseIsPressed === true || keyIsPressed === true) {\n background('deeppink');\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the canvas to begin detecting key presses.\n\n// Create a Boolean variable.\nlet isPlaying = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'The message \"Begin?\\nY or N\" written in green on a black background. The message \"Good luck!\" appears when they press the \"y\" key.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n fill(0, 255, 0);\n\n // Display a different message when the user begins playing.\n if (isPlaying === false) {\n text('Begin?', 50, 40);\n text('Y or N', 50, 60);\n } else {\n text('Good luck!', 50, 50);\n }\n}\n\n// Start playing when the user presses the 'y' key.\nfunction keyPressed() {\n if (key === 'y') {\n isPlaying = true;\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Foundation",
- "submodule": "Foundation"
- },
- {
- "file": "src/core/reference.js",
- "line": 710,
- "description": "<p>A sequence of text characters.</p>\n<p>The <code>String</code> data type is helpful for working with text. For example, a\nstring could contain a welcome message:</p>\n<pre><code class=\"language-js\">// Use a string literal.\ntext('Hello!', 10, 10);\n</code></pre>\n<pre><code class=\"language-js\">// Create a string variable.\nlet message = 'Hello!';\n\n// Use the string variable.\ntext(message, 10, 10);\n</code></pre>\n<p>The most common way to create strings is to use some form of quotations as\nfollows:</p>\n<pre><code class=\"language-js\">text(\"hi\", 50, 50);\n</code></pre>\n<pre><code class=\"language-js\">text('hi', 50, 50);\n</code></pre>\n<pre><code class=\"language-js\">text(`hi`, 50, 50);\n</code></pre>\n<p><code>\"hi\"</code>, <code>'hi'</code>, and <code>hi</code> are all string literals. A \"literal\" means a\nvalue was actually written, as in <code>text('hi', 50, 50)</code>. By contrast,\n<code>text(message, 50, 50)</code> uses the variable <code>message</code>, so it isn't a string\nliteral.</p>\n<p>Single quotes <code>''</code> and double quotes <code>\"\"</code> mean the same thing. It's nice to\nhave the option for cases when a string contains one type of quote:</p>\n<pre><code class=\"language-js\">text(\"What's up?\", 50, 50);\n</code></pre>\n<pre><code class=\"language-js\">text('Air quotes make you look \"cool.\"', 50, 50);\n</code></pre>\n<p>Backticks <code>``</code> create template literals. Template literals have many uses.\nFor example, they can contain both single and double quotes as needed:</p>\n<pre><code class=\"language-js\">text(`\"Don't you forget about me\"`, 10, 10);\n</code></pre>\n<p>Template literals are helpful when strings are created from variables like\nso:</p>\n<pre><code class=\"language-js\">let size = random(10, 20);\ncircle(50, 50, size);\n\ntext(`The circle's diameter is ${size} pixels.`, 10, 10);\n</code></pre>\n<p>The <code>size</code> variable's value will replace <code>${size}</code> when the string is\ncreated. <code>${}</code> is a placeholder for any value. That means an expression can\nbe used, as in <code>${round(PI, 3)}</code>. All of the following are valid template\nliterals:</p>\n<pre><code class=\"language-js\">text(`π is about ${round(PI, 2)} pixels.`, 10, 10);\ntext(`It's ${mouseX < width / 2} that I'm on the left half of the canvas.`, 10, 30);\n</code></pre>\n<p>Template literals can include several variables:</p>\n<pre><code class=\"language-js\">let x = random(0, 100);\nlet y = random(0, 100);\nlet size = random(10, 20);\ncircle(x, y, size);\n\ntext(`The circle at (${x}, ${y}) has a diameter of ${size} pixels.`, 10, 10);\n</code></pre>\n<p>Template literals are also helpful for creating multi-line text like so:</p>\n<pre><code class=\"language-js\">let poem = `My sketch doesn't run;\nit waits for me patiently\nwhile bugs point the way.`;\n\ntext(poem, 10, 10);\n</code></pre>\n",
- "itemtype": "property",
- "name": "String",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Display a welcome message.\n text('Hello!', 50, 50);\n\n describe('The text \"Hello!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Create a string variable.\n let world = '🌍';\n\n // Display a welcome message using a template string.\n text(`Hello, ${world}!`, 50, 50);\n\n describe('The text \"Hello, 🌍!\" written on a gray background.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Foundation",
- "submodule": "Foundation"
- },
- {
- "file": "src/core/reference.js",
- "line": 853,
- "description": "<p>A number that can be positive, negative, or zero.</p>\n<p>The <code>Number</code> data type is useful for describing values such as position,\nsize, and color. A number can be an integer such as 20 or a decimal number\nsuch as 12.34. For example, a circle's position and size can be described\nby three numbers:</p>\n<pre><code class=\"language-js\">circle(50, 50, 20);\n</code></pre>\n<pre><code class=\"language-js\">circle(50, 50, 12.34);\n</code></pre>\n<p>Numbers support basic arithmetic and follow the standard order of\noperations: Parentheses, Exponents, Multiplication, Division, Addition,\nand Subtraction (PEMDAS). For example, it's common to use arithmetic\noperators with p5.js' system variables that are numbers:</p>\n<pre><code class=\"language-js\">// Draw a circle at the center.\ncircle(width / 2, height / 2, 20);\n</code></pre>\n<pre><code class=\"language-js\">// Draw a circle that moves from left to right.\ncircle(frameCount * 0.01, 50, 20);\n</code></pre>\n<p>Here's a quick overview of the arithmetic operators:</p>\n<pre><code class=\"language-js\">1 + 2 // Add\n1 - 2 // Subtract\n1 * 2 // Multiply\n1 / 2 // Divide\n1 % 2 // Remainder\n1 ** 2 // Exponentiate\n</code></pre>\n<p>It's common to update a number variable using arithmetic. For example, an\nobject's location can be updated like so:</p>\n<pre><code class=\"language-js\">x = x + 1;\n</code></pre>\n<p>The statement above adds 1 to a variable <code>x</code> using the <code>+</code> operator. The\naddition assignment operator <code>+=</code> expresses the same idea:</p>\n<pre><code class=\"language-js\">x += 1;\n</code></pre>\n<p>Here's a quick overview of the assignment operators:</p>\n<pre><code class=\"language-js\">x += 2 // Addition assignment\nx -= 2 // Subtraction assignment\nx *= 2 // Multiplication assignment\nx /= 2 // Division assignment\nx %= 2 // Remainder assignment\n</code></pre>\n<p>Numbers can be compared using the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#relational_operators\" target=\"_blank\">relational operators</a>\n<code>></code>, <code><</code>, <code>>=</code>, <code><=</code>, <code>===</code>, and <code>!==</code>. For example, a sketch's\n<a href=\"#/p5/frameCount\">frameCount</a> can be used as a timer:</p>\n<pre><code class=\"language-js\">if (frameCount > 1000) {\n text('Game over!', 50, 50);\n}\n</code></pre>\n<p>An expression such as <code>frameCount > 1000</code> evaluates to a <code>Boolean</code> value\nthat's either <code>true</code> or <code>false</code>. The relational operators all produce\n<code>Boolean</code> values:</p>\n<pre><code class=\"language-js\">2 > 1 // true\n2 < 1 // false\n2 >= 2 // true\n2 <= 2 // true\n2 === 2 // true\n2 !== 2 // false\n</code></pre>\n<p>See <a href=\"#/p5/Boolean\">Boolean</a> for more information about comparisons and conditions.</p>\n<p>Note: There are also <code>==</code> and <code>!=</code> operators with one fewer <code>=</code>. Don't use them.</p>\n<p>Expressions with numbers can also produce special values when something\ngoes wrong:</p>\n<pre><code class=\"language-js\">sqrt(-1) // NaN\n1 / 0 // Infinity\n</code></pre>\n<p>The value <code>NaN</code> stands for\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN\" target=\"_blank\">Not-A-Number</a>.\n<code>NaN</code> appears when calculations or conversions don't work. <code>Infinity</code> is a\nvalue that's larger than any number. It appears during certain\ncalculations.</p>\n",
- "itemtype": "property",
- "name": "Number",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a circle at the center.\n circle(50, 50, 70);\n\n // Draw a smaller circle at the center.\n circle(width / 2, height / 2, 30);\n\n describe('Two concentric, white circles drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle travels from left to right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n circle(frameCount * 0.05, 50, 20);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Foundation",
- "submodule": "Foundation"
- },
- {
- "file": "src/core/reference.js",
- "line": 999,
- "description": "<p>A container for data that's stored as key-value pairs.</p>\n<p>Objects help to organize related data of any type, including other objects.\nA value stored in an object can be accessed by name, called its key. Each\nkey-value pair is called a \"property.\" Objects are similar to dictionaries\nin Python and maps in Java and Ruby.</p>\n<p>For example, an object could contain the location, size, and appearance of\na dog:</p>\n<pre><code class=\"language-js\">// Declare the dog variable and assign it an object.\nlet dog = { x: 50, y: 50, size: 20, emoji: '🐶' };\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(dog.size);\n\n// Draw the dog.\ntext(dog.emoji, dog.x, dog.y);\n</code></pre>\n<p>The variable <code>dog</code> is assigned an object with four properties. Objects\nare declared with curly braces <code>{}</code>. Values can be accessed using the dot\noperator, as in <code>dog.size</code>. In the example above, the key <code>size</code>\ncorresponds to the value <code>20</code>. Objects can also be empty to start:</p>\n<pre><code class=\"language-js\">// Declare a cat variable and assign it an empty object.\nlet cat = {};\n\n// Add properties to the object.\ncat.x = 50;\ncat.y = 50;\ncat.size = 20;\ncat.emoji = '🐱';\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(cat.size);\n\n// Draw the cat.\ntext(cat.emoji, cat.x, cat.y);\n</code></pre>\n<p>An object's data can be updated while a sketch runs. For example, the <code>cat</code>\ncould run away from the <code>dog</code> by updating its location:</p>\n<pre><code class=\"language-js\">// Run to the right.\ncat.x += 5;\n</code></pre>\n<p>If needed, an object's values can be accessed using square brackets <code>[]</code>\nand strings instead of dot notation:</p>\n<pre><code class=\"language-js\">// Run to the right.\ncat[\"x\"] += 5;\n</code></pre>\n<p>This syntax can be helpful when the key's name has spaces, as in\n<code>cat['height (m)']</code>.</p>\n",
- "itemtype": "property",
- "name": "Object",
- "example": [
- "\n<div>\n<code>\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n circle(data.x, data.y, data.d);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\n// Add another property for color.\ndata.color = 'deeppink';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n fill(data.color);\n circle(data.x, data.y, data.d);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\n// Add another property for color.\ndata.color = 'deeppink';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n fill(data.color);\n circle(data.x, data.y, data.d);\n\n // Update the object's x and y properties.\n data.x += random(-1, 1);\n data.y += random(-1, 1);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Foundation",
- "submodule": "Foundation"
- },
- {
- "file": "src/core/reference.js",
- "line": 1140,
- "description": "<p>A list that keeps several pieces of data in order.</p>\n<p>Arrays are helpful for storing related data. They can contain data of any\ntype. For example, an array could contain a list of someone's favorite\ncolors as strings. Arrays are created as follows:</p>\n<pre><code class=\"language-js\">let myArray = ['deeppink', 'darkorchid', 'magenta'];\n</code></pre>\n<p>Each piece of data in an array is called an element. Each element has an\naddress, or index, within its array. The variable <code>myArray</code> refers to an\narray with three <a href=\"#/p5/String\">String</a> elements, <code>'deeppink'</code>,\n<code>'darkorchid'</code>, and <code>'magenta'</code>. Arrays are zero-indexed, which means\nthat <code>'deeppink'</code> is at index 0, <code>'darkorchid'</code> is at index 1, and\n'<code>magenta'</code> is at index 2. Array elements can be accessed using their\nindices as follows:</p>\n<pre><code class=\"language-js\">let zeroth = myArray[0]; // 'deeppink'\nlet first = myArray[1]; // 'darkorchid'\nlet second = myArray[2]; // 'magenta'\n</code></pre>\n<p>Elements can be added to the end of an array by calling the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\" target=\"_blank\">push()</a>\nmethod as follows:</p>\n<pre><code class=\"language-js\">myArray.push('lavender');\n\nlet third = myArray[3]; // 'lavender'\n</code></pre>\n<p>See <a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays\" target=\"_blank\">MDN</a>\nfor more information about arrays.</p>\n",
- "itemtype": "property",
- "name": "Array",
- "example": [
- "\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an array\n// with three numeric elements.\nlet xCoordinates = [25, 50, 75];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Three white circles drawn in a horizontal line on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index 0, which is 25.\n circle(xCoordinates[0], 50, 20);\n\n // Access the element at index 1, which is 50.\n circle(xCoordinates[1], 50, 20);\n\n // Access the element at index 2, which is 75.\n circle(xCoordinates[2], 50, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an array with three numeric elements.\nlet xCoordinates = [20, 40, 60];\n\n// Add another element to the end of the array.\nxCoordinates.push(80);\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index 0, which is 20.\n circle(xCoordinates[0], 50, 20);\n\n // Access the element at index 1, which is 40.\n circle(xCoordinates[1], 50, 20);\n\n // Access the element at index 2, which is 60.\n circle(xCoordinates[2], 50, 20);\n\n // Access the element at index 3, which is 80.\n circle(xCoordinates[3], 50, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index i and use it to draw a circle.\n for (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access each element of the array and use it to draw a circle.\n for (let x of xCoordinates) {\n circle(x, 50, 20);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe(\n 'Four white circles in a horizontal line on a gray background. The circles move randomly.'\n );\n}\n\nfunction draw() {\n background(200);\n\n for (let i = 0; i < xCoordinates.length; i += 1) {\n // Update the element at index i.\n xCoordinates[i] += random(-1, 1);\n\n // Use the element at index i to draw a circle.\n circle(xCoordinates[i], 50, 20);\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Foundation",
- "submodule": "Foundation"
- },
- {
- "file": "src/core/reference.js",
- "line": 1329,
- "description": "<p>A template for creating objects of a particular type.</p>\n<p>Classes can make it easier to program with objects. For example, a <code>Frog</code>\nclass could create objects that behave like frogs. Each object created\nusing a class is called an instance of that class. All instances of a class\nare the same type. Here's an example of creating an instance of a <code>Frog</code>\nclass:</p>\n<pre><code class=\"language-js\">let fifi = new Frog(50, 50, 20);\n</code></pre>\n<p>The variable <code>fifi</code> refers to an instance of the <code>Frog</code> class. The keyword\n<code>new</code> is used to call the <code>Frog</code> class' constructor in the statement\n<code>new Frog()</code>. Altogether, a new <code>Frog</code> object was created and assigned to\nthe variable <code>fifi</code>. Classes are templates, so they can be used to create\nmore than one instance:</p>\n<pre><code class=\"language-js\">// First Frog instance.\nlet frog1 = new Frog(25, 50, 10);\n\n// Second Frog instance.\nlet frog2 = new Frog(75, 50, 10);\n</code></pre>\n<p>A simple <code>Frog</code> class could be declared as follows:</p>\n<pre><code class=\"language-js\">class Frog {\n constructor(x, y, size) {\n // This code runs once when an instance is created.\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n // This code runs once when myFrog.show() is called.\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n\n hop() {\n // This code runs once when myFrog.hop() is called.\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n}\n</code></pre>\n<p>Class declarations begin with the keyword <code>class</code> followed by the class\nname, such as <code>Frog</code>, and curly braces <code>{}</code>. Class names should use\n<code>PascalCase</code> and can't have spaces in their names. For example, naming a\nclass <code>Kermit The Frog</code> with spaces between each word would throw a\n<code>SyntaxError</code>. The code between the curly braces <code>{}</code> defines the class.</p>\n<p>Functions that belong to a class are called methods. <code>constructor()</code>,\n<code>show()</code>, and <code>hop()</code> are methods in the <code>Frog</code> class. Methods define an\nobject's behavior. Methods can accept parameters and return values, just\nlike functions. Note that methods don't use the <code>function</code> keyword.</p>\n<p><code>constructor()</code> is a special method that's called once when an instance of\nthe class is created. The statement <code>new Frog()</code> calls the <code>Frog</code> class'\n<code>constructor()</code> method.</p>\n<p>A class definition is a template for instances. The keyword <code>this</code> refers\nto an instance's data and methods. For example, each <code>Frog</code> instance has\nunique coordinates stored in <code>this.x</code> and <code>this.y</code>. The <code>show()</code> method\nuses those coordinates to draw the frog. The <code>hop()</code> method updates those\ncoordinates when called. Once a <code>Frog</code> instance is created, its data and\nmethods can be accessed using the dot operator <code>.</code> as follows:</p>\n<pre><code class=\"language-js\">// Draw a lily pad.\nfill('green');\nstroke('green');\ncircle(fifi.x, fifi.y, 2 * fifi.size);\n\n// Show the Frog.\nfifi.show();\n\n// Hop.\nfifi.hop();\n</code></pre>\n",
- "itemtype": "property",
- "name": "class",
- "example": [
- "\n<div>\n<code>\n// Declare a frog variable.\nlet fifi;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variable a new Frog object.\n fifi = new Frog(50, 50, 20);\n\n describe('A frog face drawn on a blue background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frog.\n fifi.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n describe('Two frog faces drawn next to each other on a blue background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n // Slow the frame rate.\n frameRate(1);\n\n describe('Two frog faces on a blue background. The frogs hop around randomly.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n\n // Move the frogs.\n frog1.hop();\n frog2.hop();\n\n // Wrap around if they've hopped off the edge.\n frog1.checkEdges();\n frog2.checkEdges();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n\n hop() {\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n\n checkEdges() {\n if (this.x > width) {\n this.x = this.x - width;\n } else if (this.x < 0) {\n this.x = width - this.x;\n }\n\n if (this.y > height) {\n this.y = this.y - height;\n } else if (this.y < 0) {\n this.y = height - this.y;\n }\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Create an array that will hold frogs.\nlet frogs = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add Frog objects to the array.\n for (let i = 0; i < 5; i += 1) {\n // Calculate random coordinates and size.\n let x = random(0, 100);\n let y = random(0, 100);\n let s = random(2, 20);\n\n // Create a new Frog object.\n let frog = new Frog(x, y, s);\n\n // Add the Frog to the array.\n frogs.push(frog);\n }\n\n // Slow the frame rate.\n frameRate(1);\n\n describe(\n 'Five frog faces on a blue background. The frogs hop around randomly.'\n );\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n for (let frog of frogs) {\n // Show the frog.\n frog.show();\n\n // Move the frog.\n frog.hop();\n\n // Wrap around if they've hopped off the edge.\n frog.checkEdges();\n }\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('🐸', this.x, this.y);\n }\n\n hop() {\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n\n checkEdges() {\n if (this.x > width) {\n this.x = this.x - width;\n } else if (this.x < 0) {\n this.x = width - this.x;\n }\n\n if (this.y > height) {\n this.y = this.y - height;\n } else if (this.y < 0) {\n this.y = height - this.y;\n }\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Foundation",
- "submodule": "Foundation"
- },
- {
- "file": "src/core/reference.js",
- "line": 1648,
- "description": "<p>A way to repeat a block of code when the number of iterations is known.</p>\n<p><code>for</code> loops are helpful for repeating statements a certain number of times.\nFor example, a <code>for</code> loop makes it easy to express the idea\n\"draw five lines\" like so:</p>\n<pre><code class=\"language-js\">for (let x = 10; x < 100; x += 20) {\n line(x, 25, x, 75);\n}\n</code></pre>\n<p>The loop's header begins with the keyword <code>for</code>. Loops generally count up\nor count down as they repeat, or iterate. The statements in parentheses\n<code>let x = 10; x < 100; x += 20</code> tell the loop how it should repeat:</p>\n<ul>\n<li><code>let x = 10</code> tells the loop to start counting at <code>10</code> and keep track of iterations using the variable <code>x</code>.</li>\n<li><code>x < 100</code> tells the loop to count up to, but not including, <code>100</code>.</li>\n<li><code>x += 20</code> tells the loop to count up by <code>20</code> at the end of each iteration.</li>\n</ul>\n<p>The code between the curly braces <code>{}</code> is the loop's body. Statements in the\nloop body are repeated during each iteration of the loop.</p>\n<p>It's common to create infinite loops accidentally. When this happens,\nsketches may become unresponsive and the web browser may display a warning.\nFor example, the following loop never stops iterating because it doesn't\ncount up:</p>\n<pre><code class=\"language-js\">for (let x = 10; x < 100; x = 20) {\n line(x, 25, x, 75);\n}\n</code></pre>\n<p>The statement <code>x = 20</code> keeps the variable <code>x</code> stuck at <code>20</code>, which is\nalways less than <code>100</code>.</p>\n<p><code>for</code> loops can also count down:</p>\n<pre><code class=\"language-js\">for (let d = 100; d > 0; d -= 10) {\n circle(50, 50, d);\n}\n</code></pre>\n<p><code>for</code> loops can also contain other loops. The following nested loop draws a\ngrid of points:</p>\n<pre><code class=\"language-js\">// Loop from left to right.\nfor (let x = 10; x < 100; x += 10) {\n\n // Loop from top to bottom.\n for (let y = 10; y < 100; y += 10) {\n point(x, y);\n }\n\n}\n</code></pre>\n<p><code>for</code> loops are also helpful for iterating through the elements of an\narray. For example, it's common to iterate through an array that contains\ninformation about where or what to draw:</p>\n<pre><code class=\"language-js\">// Create an array of x-coordinates.\nlet xCoordinates = [20, 40, 60];\n\nfor (let i = 0; i < xCoordinates.length; i += 1) {\n // Update the element.\n xCoordinates[i] += random(-1, 1);\n\n // Draw a circle.\n circle(xCoordinates[i], 50, 20);\n}\n</code></pre>\n<p>If the array's values aren't modified, the <code>for...of</code> statement can\nsimplify the code. They're similar to <code>for</code> loops in Python and <code>for-each</code>\nloops in C++ and Java. The following loops have the same effect:</p>\n<pre><code class=\"language-js\">// Draw circles with a for loop.\nlet xCoordinates = [20, 40, 60];\n\nfor (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n}\n</code></pre>\n<pre><code class=\"language-js\">// Draw circles with a for...of statement.\nlet xCoordinates = [20, 40, 60];\n\nfor (let x of xCoordinates) {\n circle(x, 50, 20);\n}\n</code></pre>\n<p>In the code snippets above, the variables <code>i</code> and <code>x</code> have different roles.</p>\n<p>In the first snippet, <code>i</code> counts from <code>0</code> up to <code>2</code>, which is one less than\n<code>xCoordinates.length</code>. <code>i</code> is used to access the element in <code>xCoordinates</code>\nat index <code>i</code>.</p>\n<p>In the second code snippet, <code>x</code> isn't keeping track of the loop's progress\nor an index. During each iteration, <code>x</code> contains the next element of\n<code>xCoordinates</code>. <code>x</code> starts from the beginning of <code>xCoordinates</code> (<code>20</code>) and\nupdates its value to <code>40</code> and then <code>60</code> during the next iterations.</p>\n",
- "itemtype": "property",
- "name": "for",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Five black vertical lines on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw vertical lines using a loop.\n for (let x = 10; x < 100; x += 20) {\n line(x, 25, x, 75);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Five white concentric circles drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw concentric circles using a loop.\n for (let d = 100; d > 0; d -= 20) {\n circle(50, 50, d);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A grid of black dots on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the spacing for points on the grid.\n let space = 10;\n\n // Increase the stroke weight.\n strokeWeight(3);\n\n // Loop from the left to the right.\n for (let x = space; x < 100; x += space) {\n // Loop from the top to the bottom.\n for (let y = space; y < 100; y += space) {\n point(x, y);\n }\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an array of numbers.\nlet xCoordinates = [20, 40, 60, 80];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index i and use it to draw a circle.\n for (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare the variable xCoordinates and assign it an array of numbers.\nlet xCoordinates = [20, 40, 60, 80];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access each element of the array and use it to draw a circle.\n for (let x of xCoordinates) {\n circle(x, 50, 20);\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Foundation",
- "submodule": "Foundation"
- },
- {
- "file": "src/core/reference.js",
- "line": 1872,
- "description": "<p>A way to repeat a block of code.</p>\n<p><code>while</code> loops are helpful for repeating statements while a condition is\n<code>true</code>. They're like <code>if</code> statements that repeat. For example, a <code>while</code>\nloop makes it easy to express the idea \"draw several lines\" like so:</p>\n<pre><code class=\"language-js\">// Declare a variable to keep track of iteration.\nlet x = 10;\n\n// Repeat as long as x < 100\nwhile (x < 100) {\n line(x, 25, x, 75);\n\n // Increment by 20.\n x += 20;\n}\n</code></pre>\n<p>The loop's header begins with the keyword <code>while</code>. Loops generally count up\nor count down as they repeat, or iterate. The statement in parentheses\n<code>x < 100</code> is a condition the loop checks each time it iterates. If the\ncondition is <code>true</code>, the loop runs the code between the curly braces <code>{}</code>,\nThe code between the curly braces is called the loop's body. If the\ncondition is <code>false</code>, the body is skipped and the loop is stopped.</p>\n<p>It's common to create infinite loops accidentally. For example, the\nfollowing loop never stops iterating because it doesn't count up:</p>\n<pre><code class=\"language-js\">// Declare a variable to keep track of iteration.\nlet x = 10;\n\n// Repeat as long as x < 100\nwhile (x < 100) {\n line(x, 25, x, 75);\n}\n\n// This should be in the loop's body!\nx += 20;\n</code></pre>\n<p>The statement <code>x += 20</code> appears after the loop's body. That means the\nvariable <code>x</code> is stuck at <code>10</code>, which is always less than <code>100</code>.</p>\n<p><code>while</code> loops are useful when the number of iterations isn't known in\nadvance. For example, concentric circles could be drawn at random\nincrements:</p>\n<pre><code class=\"language-js\">let d = 100;\nlet minSize = 5;\n\nwhile (d > minSize) {\n circle(50, 50, d);\n d -= random(10);\n}\n</code></pre>\n",
- "itemtype": "property",
- "name": "while",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Five black vertical lines on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Declare a variable to keep track of iteration.\n let x = 10;\n\n // Repeat as long as x < 100\n while (x < 100) {\n line(x, 25, x, 75);\n\n // Increment by 20.\n x += 20;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe(\n \"A gray square with several concentric circles at the center. The circles' sizes decrease at random increments.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n let d = 100;\n let minSize = 5;\n\n while (d > minSize) {\n circle(50, 50, d);\n d -= random(5, 15);\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Foundation",
- "submodule": "Foundation"
- },
- {
- "file": "src/core/reference.js",
- "line": 1988,
- "description": "<p>Prints a message to the web browser's console.</p>\n<p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/console\" target=\"_blank\">console</a>\nobject is helpful for printing messages while debugging. For example, it's\ncommon to add a <code>console.log()</code> statement while studying how a section of\ncode works:</p>\n<pre><code class=\"language-js\">if (isPlaying === true) {\n // Add a console.log() statement to make sure this block of code runs.\n console.log('Got here!');\n\n // Game logic.\n}\n</code></pre>\n<p><code>console.error()</code> is helpful for tracking errors because it prints\nformatted messages. For example, it's common to encounter errors when\nloading media assets:</p>\n<pre><code class=\"language-js\">// Logs an error message with special formatting.\nfunction handleFailure(error) {\n console.error('Oops!', error);\n}\n\n// Try to load an image and call handleError() if it fails.\nloadImage('https://example.com/cat.jpg', handleImage, handleError);\n</code></pre>\n",
- "itemtype": "property",
- "name": "console",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n noCanvas();\n\n // Prints \"Hello!\" to the console.\n console.log('Hello!');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Try to load an image from a fake URL.\n // Call handleError() if the image fails to load.\n loadImage('https://example.com/cat.jpg', handleImage, handleError);\n}\n\n// Displays the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n\n describe('A cat on a gray background.');\n}\n\n// Prints the error.\nfunction handleError(error) {\n console.error('Oops!', error);\n\n describe('A gray square.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Foundation",
- "submodule": "Foundation"
- },
- {
- "file": "src/core/rendering.js",
- "line": 15,
- "description": "<p>Creates a canvas element on the web page.</p>\n<p><code>createCanvas()</code> creates the main drawing canvas for a sketch. It should\nonly be called once at the beginning of <a href=\"#/p5/setup\">setup()</a>.\nCalling <code>createCanvas()</code> more than once causes unpredictable behavior.</p>\n<p>The first two parameters, <code>width</code> and <code>height</code>, are optional. They set the\ndimensions of the canvas and the values of the\n<a href=\"#/p5/width\">width</a> and <a href=\"#/p5/height\">height</a> system\nvariables. For example, calling <code>createCanvas(900, 500)</code> creates a canvas\nthat's 900×500 pixels. By default, <code>width</code> and <code>height</code> are both 100.</p>\n<p>The third parameter is also optional. If either of the constants <code>P2D</code> or\n<code>WEBGL</code> is passed, as in <code>createCanvas(900, 500, WEBGL)</code>, then it will set\nthe sketch's rendering mode. If an existing\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement\" target=\"_blank\">HTMLCanvasElement</a>\nis passed, as in <code>createCanvas(900, 500, myCanvas)</code>, then it will be used\nby the sketch.</p>\n<p>The fourth parameter is also optional. If an existing\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement\" target=\"_blank\">HTMLCanvasElement</a>\nis passed, as in <code>createCanvas(900, 500, WEBGL, myCanvas)</code>, then it will be\nused by the sketch.</p>\n<p>Note: In WebGL mode, the canvas will use a WebGL2 context if it's supported\nby the browser. Check the <a href=\"#/p5/webglVersion\">webglVersion</a>\nsystem variable to check what version is being used, or call\n<code>setAttributes({ version: 1 })</code> to create a WebGL1 context.</p>\n",
- "itemtype": "method",
- "name": "createCanvas",
- "return": {
- "description": "new `p5.Renderer` that holds the canvas.",
- "type": "p5.Renderer"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Draw a diagonal line.\n line(0, 0, width, height);\n\n describe('A diagonal line drawn from top-left to bottom-right on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 50);\n\n background(180);\n\n // Draw a diagonal line.\n line(0, 0, width, height);\n\n describe('A diagonal line drawn from top-left to bottom-right on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Use WebGL mode.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(180);\n\n // Draw a diagonal line.\n line(-width / 2, -height / 2, width / 2, height / 2);\n\n describe('A diagonal line drawn from top-left to bottom-right on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Create a p5.Render object.\n let cnv = createCanvas(50, 50);\n\n // Position the canvas.\n cnv.position(10, 20);\n\n background(180);\n\n // Draw a diagonal line.\n line(0, 0, width, height);\n\n describe('A diagonal line drawn from top-left to bottom-right on a gray background.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Rendering",
- "submodule": "Rendering",
"overloads": [
{
- "line": 15,
"params": [
{
- "name": "width",
- "description": "<p>width of the canvas. Defaults to 100.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "name": "color",
+ "description": "any value created by the <a href=\"#/p5/color\">color()</a> function",
+ "type": "p5.Color"
+ }
+ ]
+ },
+ {
+ "params": [
{
- "name": "height",
- "description": "<p>height of the canvas. Defaults to 100.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "colorstring",
+ "description": "color string, possible formats include: integer\nrgb() or rgba(), percentage rgb() or rgba(),\n3-digit hex, 6-digit hex.",
+ "type": "String"
},
{
- "name": "renderer",
- "description": "<p>either P2D or WEBGL. Defaults to <code>P2D</code>.</p>\n",
- "type": "Constant",
- "optional": true
+ "name": "a",
+ "description": "opacity of the background relative to current\ncolor range (default is 0-255).",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "gray",
+ "description": "specifies a value between white and black.",
+ "type": "Number"
},
{
- "name": "canvas",
- "description": "<p>existing canvas element that should be used for the sketch.</p>\n",
- "type": "HTMLCanvasElement",
- "optional": true
+ "name": "a",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "return": {
- "description": "new `p5.Renderer` that holds the canvas.",
- "type": "p5.Renderer"
- }
+ ]
},
{
- "line": 119,
"params": [
{
- "name": "width",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "v1",
+ "description": "red value if color mode is RGB, or hue value if color mode is HSB.",
+ "type": "Number"
},
{
- "name": "height",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "v2",
+ "description": "green value if color mode is RGB, or saturation value if color mode is HSB.",
+ "type": "Number"
},
{
- "name": "canvas",
- "description": "",
- "type": "HTMLCanvasElement",
- "optional": true
+ "name": "v3",
+ "description": "blue value if color mode is RGB, or brightness value if color mode is HSB.",
+ "type": "Number"
+ },
+ {
+ "name": "a",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "return": {
- "description": "",
- "type": "p5.Renderer"
- }
- }
- ]
- },
- {
- "file": "src/core/rendering.js",
- "line": 221,
- "description": "<p>Resizes the canvas to a given width and height.</p>\n<p><code>resizeCanvas()</code> immediately clears the canvas and calls\n<a href=\"#/p5/redraw\">redraw()</a>. It's common to call <code>resizeCanvas()</code>\nwithin the body of <a href=\"#/p5/windowResized\">windowResized()</a> like\nso:</p>\n<pre><code class=\"language-js\">function windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n</code></pre>\n<p>The first two parameters, <code>width</code> and <code>height</code>, set the dimensions of the\ncanvas. They also the values of the <a href=\"#/p5/width\">width</a> and\n<a href=\"#/p5/height\">height</a> system variables. For example, calling\n<code>resizeCanvas(300, 500)</code> resizes the canvas to 300×500 pixels, then sets\n<a href=\"#/p5/width\">width</a> to 300 and\n<a href=\"#/p5/height\">height</a> 500.</p>\n<p>The third parameter, <code>noRedraw</code>, is optional. If <code>true</code> is passed, as in\n<code>resizeCanvas(300, 500, true)</code>, then the canvas will be canvas to 300×500\npixels but the <a href=\"#/p5/redraw\">redraw()</a> function won't be called\nimmediately. By default, <a href=\"#/p5/redraw\">redraw()</a> is called\nimmediately when <code>resizeCanvas()</code> finishes executing.</p>\n",
- "itemtype": "method",
- "name": "resizeCanvas",
- "params": [
- {
- "name": "width",
- "description": "<p>width of the canvas.</p>\n",
- "type": "Number"
+ ]
},
{
- "name": "height",
- "description": "<p>height of the canvas.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "values",
+ "description": "an array containing the red, green, blue\nand alpha components of the color.",
+ "type": "Number[]"
+ }
+ ]
},
{
- "name": "noRedraw",
- "description": "<p>whether to delay calling\n <a href=\"#/p5/redraw\">redraw()</a>. Defaults\n to <code>false</code>.</p>\n",
- "type": "Boolean",
- "optional": true
+ "params": [
+ {
+ "name": "image",
+ "description": "image created with <a href=\"#/p5/loadImage\">loadImage()</a>\nor <a href=\"#/p5/createImage\">createImage()</a>,\nto set as background.\n(must be same size as the sketch window).",
+ "type": "p5.Image"
+ },
+ {
+ "name": "a",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\n// Double-click to resize the canvas.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle drawn on a gray background. The canvas shrinks by half the first time the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(180);\n\n // Draw a circle at the center of the canvas.\n circle(width / 2, height / 2, 20);\n}\n\n// Resize the canvas when the user double-clicks.\nfunction doubleClicked() {\n resizeCanvas(50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Resize the web browser to change the canvas size.\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n\n describe('A white circle drawn on a gray background.');\n}\n\nfunction draw() {\n background(180);\n\n // Draw a circle at the center of the canvas.\n circle(width / 2, height / 2, 20);\n}\n\n// Always resize the canvas to fill the browser window.\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Rendering",
- "submodule": "Rendering"
- },
- {
- "file": "src/core/rendering.js",
- "line": 346,
- "description": "<p>Removes the default canvas.</p>\n<p>By default, a 100×100 pixels canvas is created without needing to call\n<a href=\"#/p5/createCanvas\">createCanvas()</a>. <code>noCanvas()</code> removes the\ndefault canvas for sketches that don't need it.</p>\n",
- "itemtype": "method",
- "name": "noCanvas",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n noCanvas();\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Rendering",
- "submodule": "Rendering"
+ "static": false,
+ "module": "Color",
+ "submodule": "Setting"
},
{
- "file": "src/core/rendering.js",
- "line": 370,
- "description": "<p>Creates a <a href=\"#/p5.Graphics\">p5.Graphics</a> object.</p>\n<p><code>createGraphics()</code> creates an offscreen drawing canvas (graphics buffer)\nand returns it as a <a href=\"#/p5.Graphics\">p5.Graphics</a> object. Drawing\nto a separate graphics buffer can be helpful for performance and for\norganizing code.</p>\n<p>The first two parameters, <code>width</code> and <code>height</code>, are optional. They set the\ndimensions of the <a href=\"#/p5.Graphics\">p5.Graphics</a> object. For\nexample, calling <code>createGraphics(900, 500)</code> creates a graphics buffer\nthat's 900×500 pixels.</p>\n<p>The third parameter is also optional. If either of the constants <code>P2D</code> or\n<code>WEBGL</code> is passed, as in <code>createGraphics(900, 500, WEBGL)</code>, then it will set\nthe <a href=\"#/p5.Graphics\">p5.Graphics</a> object's rendering mode. If an\nexisting\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement\" target=\"_blank\">HTMLCanvasElement</a>\nis passed, as in <code>createGraphics(900, 500, myCanvas)</code>, then it will be used\nby the graphics buffer.</p>\n<p>The fourth parameter is also optional. If an existing\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement\" target=\"_blank\">HTMLCanvasElement</a>\nis passed, as in <code>createGraphics(900, 500, WEBGL, myCanvas)</code>, then it will be\nused by the graphics buffer.</p>\n<p>Note: In WebGL mode, the <a href=\"#/p5.Graphics\">p5.Graphics</a> object\nwill use a WebGL2 context if it's supported by the browser. Check the\n<a href=\"#/p5/webglVersion\">webglVersion</a> system variable to check what\nversion is being used, or call <code>setAttributes({ version: 1 })</code> to create a\nWebGL1 context.</p>\n",
+ "name": "clear",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 1520,
"itemtype": "method",
- "name": "createGraphics",
- "return": {
- "description": "new graphics buffer.",
- "type": "p5.Graphics"
- },
+ "chainable": 1,
+ "description": "<p>Clears the pixels on the canvas.</p>\n<p><code>clear()</code> makes every pixel 100% transparent. Calling <code>clear()</code> doesn't\nclear objects created by <code>createX()</code> functions such as\n<a href=\"#/p5/createGraphics\">createGraphics()</a>,\n<a href=\"#/p5/createVideo\">createVideo()</a>, and\n<a href=\"#/p5/createImg\">createImg()</a>. These objects will remain\nunchanged after calling <code>clear()</code> and can be redrawn.</p>\n<p>In WebGL mode, this function can clear the screen to a specific color. It\ninterprets four numeric parameters as normalized RGBA color values. It also\nclears the depth buffer. If you are not using the WebGL renderer, these\nparameters will have no effect.</p>\n",
"example": [
- "\n<div>\n<code>\n// Double-click to draw the contents of the graphics buffer.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Create the p5.Graphics object.\n pg = createGraphics(50, 50);\n\n // Draw to the graphics buffer.\n pg.background(100);\n pg.circle(pg.width / 2, pg.height / 2, 20);\n\n describe('A gray square. A smaller, darker square with a white circle at its center appears when the user double-clicks.');\n}\n\n// Display the graphics buffer when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n image(pg, 25, 25);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to draw the contents of the graphics buffer.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Create the p5.Graphics object in WebGL mode.\n pg = createGraphics(50, 50, WEBGL);\n\n // Draw to the graphics buffer.\n pg.background(100);\n pg.lights();\n pg.noStroke();\n pg.rotateX(QUARTER_PI);\n pg.rotateY(QUARTER_PI);\n pg.torus(15, 5);\n\n describe('A gray square. A smaller, darker square with a white torus at its center appears when the user double-clicks.');\n}\n\n// Display the graphics buffer when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n image(pg, 25, 25);\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A gray square. White circles are drawn as the user moves the mouse. The circles disappear when the user presses the mouse.');\n}\n\nfunction draw() {\n circle(mouseX, mouseY, 20);\n}\n\nfunction mousePressed() {\n clear();\n background(200);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n\n pg = createGraphics(60, 60);\n pg.background(200);\n pg.noStroke();\n pg.circle(pg.width / 2, pg.height / 2, 15);\n image(pg, 20, 20);\n\n describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.');\n}\n\nfunction mousePressed() {\n clear();\n image(pg, 20, 20);\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('numbers.txt');\n\n // Add some data to the print stream.\n myWriter.print('Hello p5*js!');\n\n // Clear the print stream.\n myWriter.clear();\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Rendering",
- "submodule": "Rendering",
"overloads": [
{
- "line": 370,
"params": [
{
- "name": "width",
- "description": "<p>width of the graphics buffer.</p>\n",
+ "name": "r",
+ "description": "normalized red value.",
+ "optional": 1,
"type": "Number"
},
{
- "name": "height",
- "description": "<p>height of the graphics buffer.</p>\n",
+ "name": "g",
+ "description": "normalized green value.",
+ "optional": 1,
"type": "Number"
},
{
- "name": "renderer",
- "description": "<p>either P2D or WEBGL. Defaults to P2D.</p>\n",
- "type": "Constant",
- "optional": true
+ "name": "b",
+ "description": "normalized blue value.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "canvas",
- "description": "<p>existing canvas element that should be\n used for the graphics buffer..</p>\n",
- "type": "HTMLCanvasElement",
- "optional": true
+ "name": "a",
+ "description": "normalized alpha value.",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "return": {
- "description": "new graphics buffer.",
- "type": "p5.Graphics"
- }
+ ]
},
{
- "line": 475,
+ "params": []
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
+ },
+ {
+ "name": "colorMode",
+ "file": "src/scripts/parsers/in/p5.js/src/color/setting.js",
+ "line": 1158,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Changes the way color values are interpreted.</p>\n<p>By default, the <code>Number</code> parameters for <a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/background\">background()</a>, and\n<a href=\"#/p5/color\">color()</a> are defined by values between 0 and 255\nusing the RGB color model. This is equivalent to calling\n<code>colorMode(RGB, 255)</code>. Pure red is <code>color(255, 0, 0)</code> in this model.</p>\n<p>Calling <code>colorMode(RGB, 100)</code> sets colors to use RGB color values\nbetween 0 and 100. Pure red is <code>color(100, 0, 0)</code> in this model.</p>\n<p>Calling <code>colorMode(HSB)</code> or <code>colorMode(HSL)</code> changes to HSB or HSL systems instead of RGB.\nPure red is <code>color(0, 100, 100)</code> in HSB and <code>color(0, 100, 50)</code> in HSL.</p>\n<p>Some additional color modes that p5.js supports are:</p>\n<p><code>RGBHDR</code> - High Dynamic Range RGB defined within the Display P3 color space.\nColors are expressed with an extended dynamic range. To render these colors\naccurately, you must use the HDR canvas.</p>\n<p><code>HWB</code> - Hue, Whiteness, Blackness.\nSimilar to HSB and HSL, this mode uses a hue angle.\nInstead of saturation and lightness, HWB defines colors based on the percentage\nof whiteness and blackness. This is the color model used by Chrome's GUI color picker.\nPure red in HWB is represented as <code>color(0, 0, 0)</code> (i.e., hue 0 with 0% whiteness and 0% blackness).</p>\n<pre><code> <img src=\"assets/hwb.png\"></img></code></pre><p><code>LAB</code> - Also known as CIE Lab, this color mode defines colors with Lightness, Alpha, and Beta.\nIt is widely used in professional color measurement contexts due to its perceptual uniformity.</p>\n<p><code>LCH</code> - A more intuitive representation of the CIE Lab color space using Lightness, Chroma, and Hue.\nThis mode separates the color's chromatic intensity (chroma) from its lightness,\nsimplifying color selection and manipulation.</p>\n<p><code>OKLAB</code> - A variant of the CIE Lab color space that corrects for non-uniformities inherent in LAB.\nThe adjustment provides a more perceptually accurate and uniform representation,\nwhich is particularly beneficial for smooth color transitions.</p>\n<p><code>OKLCH</code> - An easier-to-use representation of OKLAB, expressing colors in terms of Lightness, Chroma, and Hue.\nThis mode retains the perceptual benefits of OKLAB while offering a more intuitive format for color manipulation.</p>\n<p><a href=\"#/p5.Color\">p5.Color</a> objects remember the mode that they were\ncreated in. Changing modes doesn't affect their appearance.</p>\n<p><code>Single-value (Grayscale) Colors</code>:When a color is specified with only one parameter (e.g., <code>color(g)</code>), p5.js will interpret it\nas a grayscale color. However, how that single parameter translates into a grayscale value\ndepends on the color mode:</p>\n<ul><li><code>RGB, HSB, and HSL</code>: In RGB, the single value is interpreted using the “blue” maximum\n(i.e., the single parameter is mapped to the blue channel's max).\nIn HSB and HSL, the single value is mapped to Brightness and Lightness max respectively with hue=0 .\nand saturation=0.</li><li><code>LAB, LCH, OKLAB, and OKLCH</code>: The single value is taken to be the <code>lightness (L)</code> component,\nwith the specified max range for that channel.</li><li><code>HWB</code>: Grayscale relies on both the <code>whiteness (W)</code> and <code>blackness (B)</code> channels. Since\na single value cannot directly account for two distinct channels, the library uses an\naverage of their max values to interpret the single grayscale parameter. For instance,\nif W has a max of 50 and B has a max of 100, then the single grayscale parameter\nis mapped using (50 + 100) / 2 = 75 as its effective maximum. More complex or negative\nranges are currently not handled, so results in those cases may be ambiguous.</li></ul>",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Fill with pure red.\n fill(255, 0, 0);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n // Fill with pure red.\n fill(100, 0, 0);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // Fill with pure red.\n fill(0, 100, 100);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSL color.\n colorMode(HSL);\n\n // Fill with pure red.\n fill(0, 100, 50);\n\n circle(50, 50, 25);\n\n describe('A gray square with a red circle at its center.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n \n // Draw a neutral gray background using the default color mode.\n background(200); \n \n // Switch to HWB color mode.\n // (Assuming p5.js supports HWB with a range of:\n // hue: 0–360, whiteness: 0–100, blackness: 0–100.)\n colorMode(HWB);\n \n // Set fill to pure red in HWB.\n // Pure red in HWB is: hue = 0°, whiteness = 0%, blackness = 0%.\n fill(0, 0, 0);\n \n // Draw a circle at the center.\n circle(50, 50, 25);\n \n describe('A gray square with a red circle at its center, drawn using HWB color mode.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n \n // Draw a neutral gray background using the default color mode.\n background(200);\n \n // Switch to LAB color mode.\n // In this mode, L typically ranges from 0 to 100 while a and b span roughly -128 to 127.\n colorMode(LAB);\n \n // Set fill to pure red in LAB.\n // The sRGB red (255, 0, 0) converts approximately to LAB as:\n // L = 53, a = 80, b = 67.\n fill(53, 80, 67);\n \n // Draw a circle at the center.\n circle(50, 50, 25);\n \n describe('A gray square with a red circle at its center, drawn using LAB color mode.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n \n // Draw a neutral gray background.\n background(200);\n \n // Switch to LCH color mode.\n // In LCH, colors are defined by Lightness, Chroma, and Hue (in degrees).\n colorMode(LCH);\n \n // Set fill to an approximation of pure red in LCH:\n // Lightness ≈ 53, Chroma ≈ 104, Hue ≈ 40°.\n fill(53, 104, 40);\n \n // Draw a circle at the center.\n circle(50, 50, 25);\n \n describe('A gray square with a red circle at its center, drawn using LCH color mode.');\n}\n</code> \n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values in the range 0-100.\n colorMode(RGB, 100);\n\n for (let x = 0; x < 100; x += 1) {\n for (let y = 0; y < 100; y += 1) {\n stroke(x, y, 0);\n point(x, y);\n }\n }\n\n describe(\n 'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use HSB color with values in the range 0-100.\n colorMode(HSB, 100);\n\n for (let x = 0; x < 100; x += 1) {\n for (let y = 0; y < 100; y += 1) {\n stroke(x, y, 100);\n point(x, y);\n }\n }\n\n describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let myColor = color(180, 175, 230);\n background(myColor);\n\n // Use RGB color with values in the range 0-1.\n colorMode(RGB, 1);\n\n // Get the red, green, and blue color components.\n let redValue = red(myColor);\n let greenValue = green(myColor);\n let blueValue = blue(myColor);\n\n // Round the color components for display.\n redValue = round(redValue, 2);\n greenValue = round(greenValue, 2);\n blueValue = round(blueValue, 2);\n\n // Display the color components.\n text(`Red: ${redValue}`, 10, 10, 80, 80);\n text(`Green: ${greenValue}`, 10, 40, 80, 80);\n text(`Blue: ${blueValue}`, 10, 70, 80, 80);\n\n describe('A purple canvas with the red, green, and blue decimal values of the color written on it.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Use RGB color with alpha values in the range 0-1.\n colorMode(RGB, 255, 255, 255, 1);\n\n noFill();\n strokeWeight(4);\n stroke(255, 0, 10, 0.3);\n circle(40, 40, 50);\n circle(50, 60, 50);\n\n describe('Two overlapping translucent pink circle outlines.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet hslGraphic, lchGraphic, oklchGraphic;\n\nfunction setup() {\n createCanvas(600, 200);\n noLoop();\n\n // Create three graphics objects for HSL, LCH, and OKLCH color modes\n hslGraphic = createGraphics(200, 200);\n lchGraphic = createGraphics(200, 200);\n oklchGraphic = createGraphics(200, 200);\n\n // Draw HSL color wheel\n colorMode(HSL);\n hslGraphic.translate(100, 100);\n for (let i = 0; i < 1000; i++) {\n hslGraphic.stroke(360 / 1000 * i, 70, 50);\n hslGraphic.line(0, 0, hslGraphic.width / 2, 0);\n hslGraphic.rotate(TAU / 1000);\n }\n\n // Draw LCH color wheel\n colorMode(LCH);\n lchGraphic.translate(100, 100);\n for (let i = 0; i < 1000; i++) {\n lchGraphic.stroke(54, 106, 360 / 1000 * i);\n lchGraphic.line(0, 0, lchGraphic.width / 2, 0);\n lchGraphic.rotate(TAU / 1000);\n }\n\n // Draw OKLCH color wheel\n colorMode(OKLCH);\n oklchGraphic.translate(100, 100);\n for (let i = 0; i < 1000; i++) {\n oklchGraphic.stroke(54, 106, 360 / 1000 * i);\n oklchGraphic.line(0, 0, oklchGraphic.width / 2, 0);\n oklchGraphic.rotate(TAU / 1000);\n }\n}\n\nfunction draw() {\n // Set the styles\n colorMode(RGB);\n background(220);\n\n // Display the color wheels\n image(hslGraphic, 0, 0);\n image(lchGraphic, 200, 0);\n image(oklchGraphic, 400, 0);\n}\n</code>\n</div>",
+ "<div>\n<code>\n// Example: Single-value (Grayscale) colors in different color modes.\n// The rectangle is filled with one parameter, but its final color depends\n// on how that parameter is interpreted by the current color mode.\n\nfunction setup() {\n createCanvas(100, 100);\n noStroke();\n noLoop();\n}\n\nfunction draw() {\n // Set color mode to RGB with range 0-255\n colorMode(RGB, 255);\n \n // Fill with single grayscale value\n fill(128);\n rect(0, 0, 100, 100);\n\n // Add text label\n fill(0); // Switch to black text for clarity\n textSize(14);\n text(\"RGB (128)\", 10, 20);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
"params": [
{
- "name": "width",
- "description": "",
- "type": "Number"
+ "name": "mode",
+ "description": "either RGB, HSB, HSL,\nor one of the extended modes described above.",
+ "type": "RGB|HSB|HSL|RGBHDR|HWB|LAB|LCH|OKLAB|OKLCH"
},
{
- "name": "height",
- "description": "",
+ "name": "max",
+ "description": "range for all values.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "mode",
+ "type": "RGB|HSB|HSL|RGBHDR|HWB|LAB|LCH|OKLAB|OKLCH"
+ },
+ {
+ "name": "max1",
+ "description": "range for the red or hue depending on the\ncurrent color mode.",
+ "type": "Number"
+ },
+ {
+ "name": "max2",
+ "description": "range for the green or saturation depending\non the current color mode.",
+ "type": "Number"
+ },
+ {
+ "name": "max3",
+ "description": "range for the blue or brightness/lightness\ndepending on the current color mode.",
+ "type": "Number"
+ },
+ {
+ "name": "maxA",
+ "description": "range for the alpha.",
+ "optional": 1,
"type": "Number"
- },
- {
- "name": "canvas",
- "description": "",
- "type": "HTMLCanvasElement",
- "optional": true
}
],
"return": {
- "description": "",
- "type": "p5.Graphics"
+ "description": "The current color mode.",
+ "type": "String"
}
}
- ]
- },
- {
- "file": "src/core/rendering.js",
- "line": 483,
- "description": "<p>args[0] is expected to be renderer\nargs[1] is expected to be canvas</p>\n",
- "class": "p5",
- "module": "Rendering",
- "submodule": "Rendering"
- },
- {
- "file": "src/core/rendering.js",
- "line": 495,
- "description": "<p>Creates and a new <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object.</p>\n<p><a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> objects are separate drawing\nsurfaces that can be used as textures in WebGL mode. They're similar to\n<a href=\"#/p5.Graphics\">p5.Graphics</a> objects and generally run much\nfaster when used as textures.</p>\n<p>The parameter, <code>options</code>, is optional. An object can be passed to configure\nthe <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. The available\nproperties are:</p>\n<ul>\n<li><code>format</code>: data format of the texture, either <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or <code>HALF_FLOAT</code>. Default is <code>UNSIGNED_BYTE</code>.</li>\n<li><code>channels</code>: whether to store <code>RGB</code> or <code>RGBA</code> color channels. Default is to match the main canvas which is <code>RGBA</code>.</li>\n<li><code>depth</code>: whether to include a depth buffer. Default is <code>true</code>.</li>\n<li><code>depthFormat</code>: data format of depth information, either <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is <code>FLOAT</code>.</li>\n<li><code>stencil</code>: whether to include a stencil buffer for masking. <code>depth</code> must be <code>true</code> for this feature to work. Defaults to the value of <code>depth</code> which is <code>true</code>.</li>\n<li><code>antialias</code>: whether to perform anti-aliasing. If set to <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will be used by default. The number of samples can also be set, as in <code>{ antialias: 4 }</code>. Default is to match <a href=\"#/p5/setAttributes\">setAttributes()</a> which is <code>false</code> (<code>true</code> in Safari).</li>\n<li><code>width</code>: width of the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Default is to always match the main canvas width.</li>\n<li><code>height</code>: height of the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Default is to always match the main canvas height.</li>\n<li><code>density</code>: pixel density of the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Default is to always match the main canvas pixel density.</li>\n<li><code>textureFiltering</code>: how to read values from the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Either <code>LINEAR</code> (nearby pixels will be interpolated) or <code>NEAREST</code> (no interpolation). Generally, use <code>LINEAR</code> when using the texture as an image and <code>NEAREST</code> if reading the texture as data. Default is <code>LINEAR</code>.</li>\n</ul>\n<p>If the <code>width</code>, <code>height</code>, or <code>density</code> attributes are set, they won't automatically match the main canvas and must be changed manually.</p>\n<p>Note: <code>createFramebuffer()</code> can only be used in WebGL mode.</p>\n",
- "itemtype": "method",
- "name": "createFramebuffer",
- "params": [
- {
- "name": "options",
- "description": "<p>configuration options.</p>\n",
- "type": "Object",
- "optional": true
- }
],
"return": {
- "description": "new framebuffer.",
- "type": "p5.Framebuffer"
+ "description": "The current color mode.",
+ "type": "String"
},
- "example": [
- "\n<div>\n<code>\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('A grid of white toruses rotating against a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n // Clear the drawing surface.\n clear();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Style the torus.\n noStroke();\n\n // Draw the torus.\n torus(20);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, x, y, 25, 25);\n }\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create an options object.\n let options = { width: 25, height: 25 };\n\n // Create a p5.Framebuffer object.\n // Use options for configuration.\n myBuffer = createFramebuffer(options);\n\n describe('A grid of white toruses rotating against a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n // Clear the drawing surface.\n clear();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Style the torus.\n noStroke();\n\n // Draw the torus.\n torus(5, 2.5);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, x, y);\n }\n }\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Rendering",
- "submodule": "Rendering"
+ "static": false,
+ "module": "Color",
+ "submodule": "Setting"
},
{
- "file": "src/core/rendering.js",
- "line": 635,
- "description": "<p>Clears the depth buffer in WebGL mode.</p>\n<p><code>clearDepth()</code> clears information about how far objects are from the camera\nin 3D space. This information is stored in an object called the\n<em>depth buffer</em>. Clearing the depth buffer ensures new objects aren't drawn\nbehind old ones. Doing so can be useful for feedback effects in which the\nprevious frame serves as the background for the current frame.</p>\n<p>The parameter, <code>depth</code>, is optional. If a number is passed, as in\n<code>clearDepth(0.5)</code>, it determines the range of objects to clear from the\ndepth buffer. 0 doesn't clear any depth information, 0.5 clears depth\ninformation halfway between the near and far clipping planes, and 1 clears\ndepth information all the way to the far clipping plane. By default,\n<code>depth</code> is 1.</p>\n<p>Note: <code>clearDepth()</code> can only be used in WebGL mode.</p>\n",
+ "name": "fill",
+ "file": "src/scripts/parsers/in/p5.js/src/color/setting.js",
+ "line": 1429,
"itemtype": "method",
- "name": "clearDepth",
- "params": [
- {
- "name": "depth",
- "description": "<p>amount of the depth buffer to clear between 0\n (none) and 1 (far clipping plane). Defaults to 1.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
+ "chainable": 1,
+ "description": "<p>Sets the color used to fill shapes.</p>\n<p>Calling <code>fill(255, 165, 0)</code> or <code>fill('orange')</code> means all shapes drawn\nafter the fill command will be filled with the color orange.</p>\n<p>The version of <code>fill()</code> with one parameter interprets the value one of\nthree ways. If the parameter is a <code>Number</code>, it's interpreted as a grayscale\nvalue. If the parameter is a <code>String</code>, it's interpreted as a CSS color\nstring. A <a href=\"#/p5.Color\">p5.Color</a> object can also be provided to\nset the fill color.</p>\n<p>The version of <code>fill()</code> with three parameters interprets them as RGB, HSB,\nor HSL colors, depending on the current\n<a href=\"#/p5/colorMode\">colorMode()</a>. The default color space is RGB,\nwith each value in the range from 0 to 255.</p>\n",
"example": [
- "\n<div>\n<code>\nlet previous;\nlet current;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Framebuffer objects.\n previous = createFramebuffer({ format: FLOAT });\n current = createFramebuffer({ format: FLOAT });\n\n describe(\n 'A multicolor box drifts from side to side on a white background. It leaves a trail that fades over time.'\n );\n}\n\nfunction draw() {\n // Swap the previous p5.Framebuffer and the\n // current one so it can be used as a texture.\n [previous, current] = [current, previous];\n\n // Start drawing to the current p5.Framebuffer.\n current.begin();\n\n // Paint the background.\n background(255);\n\n // Draw the previous p5.Framebuffer.\n // Clear the depth buffer so the previous\n // frame doesn't block the current one.\n push();\n tint(255, 250);\n image(previous, -50, -50);\n clearDepth();\n pop();\n\n // Draw the box on top of the previous frame.\n push();\n let x = 25 * sin(frameCount * 0.01);\n let y = 25 * sin(frameCount * 0.02);\n translate(x, y, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n normalMaterial();\n box(12);\n pop();\n\n // Stop drawing to the current p5.Framebuffer.\n current.end();\n\n // Display the current p5.Framebuffer.\n image(current, -50, -50);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A grayscale value.\n fill(51);\n square(20, 20, 60);\n\n describe('A dark charcoal gray square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // R, G & B values.\n fill(255, 204, 0);\n square(20, 20, 60);\n\n describe('A yellow square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(100);\n\n // Use HSB color.\n colorMode(HSB);\n\n // H, S & B values.\n fill(255, 204, 100);\n square(20, 20, 60);\n\n describe('A royal blue square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A CSS named color.\n fill('red');\n square(20, 20, 60);\n\n describe('A red square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Three-digit hex RGB notation.\n fill('#fae');\n square(20, 20, 60);\n\n describe('A pink square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Six-digit hex RGB notation.\n fill('#A251FA');\n square(20, 20, 60);\n\n describe('A purple square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGB notation.\n fill('rgb(0, 255, 0)');\n square(20, 20, 60);\n\n describe('A bright green square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGBA notation.\n fill('rgba(0, 255, 0, 0.25)');\n square(20, 20, 60);\n\n describe('A soft green rectange with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGB notation.\n fill('rgb(100%, 0%, 10%)');\n square(20, 20, 60);\n\n describe('A red square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGBA notation.\n fill('rgba(100%, 0%, 100%, 0.5)');\n square(20, 20, 60);\n\n describe('A dark fuchsia square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A p5.Color object.\n let c = color(0, 0, 255);\n fill(c);\n square(20, 20, 60);\n\n describe('A blue square with a black outline.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Rendering",
- "submodule": "Rendering"
- },
- {
- "file": "src/core/rendering.js",
- "line": 720,
- "description": "<p>Sets the way colors blend when added to the canvas.</p>\n<p>By default, drawing with a solid color paints over the current pixel values\non the canvas. <code>blendMode()</code> offers many options for blending colors.</p>\n<p>Shapes, images, and text can be used as sources for drawing to the canvas.\nA source pixel changes the color of the canvas pixel where it's drawn. The\nfinal color results from blending the source pixel's color with the canvas\npixel's color. RGB color values from the source and canvas pixels are\ncompared, added, subtracted, multiplied, and divided to create different\neffects. Red values with red values, greens with greens, and blues with\nblues.</p>\n<p>The parameter, <code>mode</code>, sets the blend mode. For example, calling\n<code>blendMode(ADD)</code> sets the blend mode to <code>ADD</code>. The following blend modes\nare available in both 2D and WebGL mode:</p>\n<ul>\n<li><code>BLEND</code>: color values from the source overwrite the canvas. This is the default mode.</li>\n<li><code>ADD</code>: color values from the source are added to values from the canvas.</li>\n<li><code>DARKEST</code>: keeps the darkest color value.</li>\n<li><code>LIGHTEST</code>: keeps the lightest color value.</li>\n<li><code>EXCLUSION</code>: similar to <code>DIFFERENCE</code> but with less contrast.</li>\n<li><code>MULTIPLY</code>: color values from the source are multiplied with values from the canvas. The result is always darker.</li>\n<li><code>SCREEN</code>: all color values are inverted, then multiplied, then inverted again. The result is always lighter. (Opposite of <code>MULTIPLY</code>)</li>\n<li><code>REPLACE</code>: the last source drawn completely replaces the rest of the canvas.</li>\n<li><code>REMOVE</code>: overlapping pixels are removed by making them completely transparent.</li>\n</ul>\n<p>The following blend modes are only available in 2D mode:</p>\n<ul>\n<li><code>DIFFERENCE</code>: color values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive.</li>\n<li><code>OVERLAY</code>: combines <code>MULTIPLY</code> and <code>SCREEN</code>. Dark values in the canvas get darker and light values get lighter.</li>\n<li><code>HARD_LIGHT</code>: combines <code>MULTIPLY</code> and <code>SCREEN</code>. Dark values in the source get darker and light values get lighter.</li>\n<li><code>SOFT_LIGHT</code>: a softer version of <code>HARD_LIGHT</code>.</li>\n<li><code>DODGE</code>: lightens light tones and increases contrast. Divides the canvas color values by the inverted color values from the source.</li>\n<li><code>BURN</code>: darkens dark tones and increases contrast. Divides the source color values by the inverted color values from the canvas, then inverts the result.</li>\n</ul>\n<p>The following blend modes are only available in WebGL mode:</p>\n<ul>\n<li><code>SUBTRACT</code>: RGB values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive. Alpha (transparency) values from the source and canvas are added.</li>\n</ul>\n",
- "itemtype": "method",
- "name": "blendMode",
- "params": [
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "v1",
+ "description": "red value if color mode is RGB or hue value if color mode is HSB.",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "description": "green value if color mode is RGB or saturation value if color mode is HSB.",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "description": "blue value if color mode is RGB or brightness value if color mode is HSB.",
+ "type": "Number"
+ },
+ {
+ "name": "alpha",
+ "description": "alpha value, controls transparency (0 - transparent, 255 - opaque).",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "value",
+ "description": "a color string.",
+ "type": "String"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "gray",
+ "description": "a grayscale value.",
+ "type": "Number"
+ },
+ {
+ "name": "alpha",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "values",
+ "description": "an array containing the red, green, blue &\nand alpha components of the color.",
+ "type": "Number[]"
+ }
+ ]
+ },
{
- "name": "mode",
- "description": "<p>blend mode to set.\n either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT</p>\n",
- "type": "Constant"
+ "params": [
+ {
+ "name": "color",
+ "description": "the fill color.",
+ "type": "p5.Color"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Use the default blend mode.\n blendMode(BLEND);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A Sky Blue line and a Deep Rose line form an X on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(HARD_LIGHT);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('An ocean blue line and a hot pink line form an X on a gray background. The area where they overlap is Magenta purple.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(ADD);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('An icy blue line and a light lavender line form an X on a gray background. The area where they overlap is white.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(DARKEST);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A steel blue line and a cranberry line form an X on a gray background. The area where they overlap is deep purple.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(BURN);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A cobalt blue line and a burgundy line form an X on a gray background. The area where they overlap is black.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(LIGHTEST);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A pale lavender line and a soft beige line form an X on a gray background. The area where they overlap is pale lilac.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(EXCLUSION);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('An earthy brown line and a muted sage line form an X on a gray background. The area where they overlap is sage green.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(MULTIPLY);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A slate blue line and a plum line form an X on a gray background. The area where they overlap is dark Indigo.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(SCREEN);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A baby blue line and a peach pink line form an X on a gray background. The area where they overlap is misty lilac.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(REPLACE);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A diagonal deep rose line.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(REMOVE);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('The silhouette of an X is missing from a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(DIFFERENCE);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A light burgundy line and a forest green line form an X on a gray background. The area where they overlap is dark cocoa.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(OVERLAY);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A cornflower blue line and a light rose line form an X on a gray background. The area where they overlap is violet.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(SOFT_LIGHT);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A pale sky line and a rose blush line form an X on a gray background. The area where they overlap is lavender.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(DODGE);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('An aqua blue line and a light pink line form an X on a gray background. The area where they overlap is white.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Create a canvas with WEBGL mode.\n createCanvas(100, 100, WEBGL);\n\n // Set the background color.\n background(180);\n\n // Set the blend mode to SUBTRACT.\n blendMode(SUBTRACT);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('#1a85ff');\n line(-25, -25, 25, 25);\n\n // Draw the red line.\n stroke('#d41159');\n line(25, -25, -25, 25);\n\n describe('A burnt orange and a sea green line form an X on a gray background. The area where they overlap is forest green.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Rendering",
- "submodule": "Rendering"
- },
- {
- "file": "src/core/rendering.js",
- "line": 1198,
- "description": "<p>A system variable that provides direct access to the sketch's\n<code><canvas></code> element.</p>\n<p>The <code><canvas></code> element provides many specialized features that aren't\nincluded in the p5.js library. The <code>drawingContext</code> system variable\nprovides access to these features by exposing the sketch's\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D\">CanvasRenderingContext2D</a>\nobject.</p>\n",
- "itemtype": "property",
- "name": "drawingContext",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Style the circle using shadows.\n drawingContext.shadowOffsetX = 5;\n drawingContext.shadowOffsetY = -5;\n drawingContext.shadowBlur = 10;\n drawingContext.shadowColor = 'black';\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe(\"A white circle on a gray background. The circle's edges are shadowy.\");\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background('skyblue');\n\n // Style the circle using a color gradient.\n let myGradient = drawingContext.createRadialGradient(50, 50, 3, 50, 50, 40);\n myGradient.addColorStop(0, 'yellow');\n myGradient.addColorStop(0.6, 'orangered');\n myGradient.addColorStop(1, 'yellow');\n drawingContext.fillStyle = myGradient;\n drawingContext.strokeStyle = 'rgba(0, 0, 0, 0)';\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe('A fiery sun drawn on a light blue background.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Rendering",
- "submodule": "Rendering"
- },
- {
- "file": "src/core/structure.js",
- "line": 9,
- "description": "<p>Stops the code in <a href=\"#/p5/draw\">draw()</a> from running repeatedly.</p>\n<p>By default, <a href=\"#/p5/draw\">draw()</a> tries to run 60 times per\nsecond. Calling <code>noLoop()</code> stops <a href=\"#/p5/draw\">draw()</a> from\nrepeating. The draw loop can be restarted by calling\n<a href=\"#/p5/loop\">loop()</a>. <a href=\"#/p5/draw\">draw()</a> can be run\nonce by calling <a href=\"#/p5/redraw\">redraw()</a>.</p>\n<p>The <a href=\"#/p5/isLooping\">isLooping()</a> function can be used to check\nwhether a sketch is looping, as in <code>isLooping() === true</code>.</p>\n",
- "itemtype": "method",
- "name": "noLoop",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Turn off the draw loop.\n noLoop();\n\n describe('A white half-circle on the left edge of a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's x-coordinate.\n let x = frameCount;\n\n // Draw the circle.\n // Normally, the circle would move from left to right.\n circle(x, 50, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to stop the draw loop.\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A white circle moves randomly on a gray background. It stops moving when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the circle.\n // Normally, the circle would move from left to right.\n circle(x, y, 20);\n}\n\n// Stop the draw loop when the user double-clicks.\nfunction doubleClicked() {\n noLoop();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet startButton;\nlet stopButton;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the button elements and place them\n // beneath the canvas.\n startButton = createButton('▶');\n startButton.position(0, 100);\n startButton.size(50, 20);\n stopButton = createButton('◾');\n stopButton.position(50, 100);\n stopButton.size(50, 20);\n\n // Set functions to call when the buttons are pressed.\n startButton.mousePressed(loop);\n stopButton.mousePressed(noLoop);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe(\n 'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the circle.\n // Normally, the circle would move from left to right.\n circle(x, y, 20);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Structure",
- "submodule": "Structure"
- },
- {
- "file": "src/core/structure.js",
- "line": 127,
- "description": "<p>Resumes the draw loop after <a href=\"#/p5/noLoop\">noLoop()</a> has been\ncalled.</p>\n<p>By default, <a href=\"#/p5/draw\">draw()</a> tries to run 60 times per\nsecond. Calling <a href=\"#/p5/noLoop\">noLoop()</a> stops\n<a href=\"#/p5/draw\">draw()</a> from repeating. The draw loop can be\nrestarted by calling <code>loop()</code>.</p>\n<p>The <a href=\"#/p5/isLooping\">isLooping()</a> function can be used to check\nwhether a sketch is looping, as in <code>isLooping() === true</code>.</p>\n",
- "itemtype": "method",
- "name": "loop",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Turn off the draw loop.\n noLoop();\n\n describe(\n 'A white half-circle on the left edge of a gray square. The circle starts moving to the right when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's x-coordinate.\n let x = frameCount;\n\n // Draw the circle.\n circle(x, 50, 20);\n}\n\n// Resume the draw loop when the user double-clicks.\nfunction doubleClicked() {\n loop();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet startButton;\nlet stopButton;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the button elements and place them\n // beneath the canvas.\n startButton = createButton('▶');\n startButton.position(0, 100);\n startButton.size(50, 20);\n stopButton = createButton('◾');\n stopButton.position(50, 100);\n stopButton.size(50, 20);\n\n // Set functions to call when the buttons are pressed.\n startButton.mousePressed(loop);\n stopButton.mousePressed(noLoop);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe(\n 'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the circle.\n // Normally, the circle would move from left to right.\n circle(x, y, 20);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Structure",
- "submodule": "Structure"
- },
- {
- "file": "src/core/structure.js",
- "line": 224,
- "description": "<p>Returns <code>true</code> if the draw loop is running and <code>false</code> if not.</p>\n<p>By default, <a href=\"#/p5/draw\">draw()</a> tries to run 60 times per\nsecond. Calling <a href=\"#/p5/noLoop\">noLoop()</a> stops\n<a href=\"#/p5/draw\">draw()</a> from repeating. The draw loop can be\nrestarted by calling <a href=\"#/p5/loop\">loop()</a>.</p>\n<p>The <code>isLooping()</code> function can be used to check whether a sketch is\nlooping, as in <code>isLooping() === true</code>.</p>\n",
- "itemtype": "method",
- "name": "isLooping",
- "return": {
- "description": "",
- "type": "Boolean"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle drawn against a gray background. When the user double-clicks, the circle stops or resumes following the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle at the mouse's position.\n circle(mouseX, mouseY, 20);\n}\n\n// Toggle the draw loop when the user double-clicks.\nfunction doubleClicked() {\n if (isLooping() === true) {\n noLoop();\n } else {\n loop();\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Structure",
- "submodule": "Structure"
- },
- {
- "file": "src/core/structure.js",
- "line": 269,
- "description": "<p>Begins a drawing group that contains its own styles and transformations.</p>\n<p>By default, styles such as <a href=\"#/p5/fill\">fill()</a> and\ntransformations such as <a href=\"#/p5/rotate\">rotate()</a> are applied to\nall drawing that follows. The <code>push()</code> and <a href=\"#/p5/pop\">pop()</a>\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('🦟', x, y);\n</code></pre>\n<p>In the code snippet above, the bug's position isn't affected by\n<code>translate(mouseX, mouseY)</code> because that transformation is contained\nbetween <code>push()</code> and <a href=\"#/p5/pop\">pop()</a>. The bug moves around\nthe entire canvas as expected.</p>\n<p>Note: <code>push()</code> and <a href=\"#/p5/pop\">pop()</a> are always called as a\npair. Both functions are required to begin and end a drawing group.</p>\n<p><code>push()</code> and <a href=\"#/p5/pop\">pop()</a> can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('🦟', x, y);\n</code></pre>\n<p>In this version, the code to draw each eye is contained between its own\n<code>push()</code> and <a href=\"#/p5/pop\">pop()</a> functions. Doing so makes it\neasier to add details in the correct part of a drawing.</p>\n<p><code>push()</code> and <a href=\"#/p5/pop\">pop()</a> contain the effects of the\nfollowing functions:</p>\n<ul>\n<li><a href=\"#/p5/fill\">fill()</a></li>\n<li><a href=\"#/p5/noFill\">noFill()</a></li>\n<li><a href=\"#/p5/noStroke\">noStroke()</a></li>\n<li><a href=\"#/p5/stroke\">stroke()</a></li>\n<li><a href=\"#/p5/tint\">tint()</a></li>\n<li><a href=\"#/p5/noTint\">noTint()</a></li>\n<li><a href=\"#/p5/strokeWeight\">strokeWeight()</a></li>\n<li><a href=\"#/p5/strokeCap\">strokeCap()</a></li>\n<li><a href=\"#/p5/strokeJoin\">strokeJoin()</a></li>\n<li><a href=\"#/p5/imageMode\">imageMode()</a></li>\n<li><a href=\"#/p5/rectMode\">rectMode()</a></li>\n<li><a href=\"#/p5/ellipseMode\">ellipseMode()</a></li>\n<li><a href=\"#/p5/colorMode\">colorMode()</a></li>\n<li><a href=\"#/p5/textAlign\">textAlign()</a></li>\n<li><a href=\"#/p5/textFont\">textFont()</a></li>\n<li><a href=\"#/p5/textSize\">textSize()</a></li>\n<li><a href=\"#/p5/textLeading\">textLeading()</a></li>\n<li><a href=\"#/p5/applyMatrix\">applyMatrix()</a></li>\n<li><a href=\"#/p5/resetMatrix\">resetMatrix()</a></li>\n<li><a href=\"#/p5/rotate\">rotate()</a></li>\n<li><a href=\"#/p5/scale\">scale()</a></li>\n<li><a href=\"#/p5/shearX\">shearX()</a></li>\n<li><a href=\"#/p5/shearY\">shearY()</a></li>\n<li><a href=\"#/p5/translate\">translate()</a></li>\n</ul>\n<p>In WebGL mode, <code>push()</code> and <a href=\"#/p5/pop\">pop()</a> contain the\neffects of a few additional styles:</p>\n<ul>\n<li><a href=\"#/p5/setCamera\">setCamera()</a></li>\n<li><a href=\"#/p5/ambientLight\">ambientLight()</a></li>\n<li><a href=\"#/p5/directionalLight\">directionalLight()</a></li>\n<li><a href=\"#/p5/pointLight\">pointLight()</a> <a href=\"#/p5/texture\">texture()</a></li>\n<li><a href=\"#/p5/specularMaterial\">specularMaterial()</a></li>\n<li><a href=\"#/p5/shininess\">shininess()</a></li>\n<li><a href=\"#/p5/normalMaterial\">normalMaterial()</a></li>\n<li><a href=\"#/p5/shader\">shader()</a></li>\n</ul>\n",
- "itemtype": "method",
- "name": "push",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the left circle.\n circle(25, 50, 20);\n\n // Begin the drawing group.\n push();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Style the circle.\n strokeWeight(5);\n stroke('royalblue');\n fill('orange');\n\n // Draw the circle.\n circle(0, 0, 20);\n\n // End the drawing group.\n pop();\n\n // Draw the right circle.\n circle(75, 50, 20);\n\n describe(\n 'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(24);\n\n describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n background(200);\n\n // Begin the drawing group.\n push();\n\n // Translate the origin to the mouse's position.\n translate(mouseX, mouseY);\n\n // Style the face.\n noStroke();\n fill('green');\n\n // Draw a face.\n circle(0, 0, 60);\n\n // Style the eyes.\n fill('white');\n\n // Draw the left eye.\n push();\n translate(-20, -20);\n ellipse(0, 0, 30, 20);\n fill('black');\n circle(0, 0, 8);\n pop();\n\n // Draw the right eye.\n push();\n translate(20, -20);\n ellipse(0, 0, 30, 20);\n fill('black');\n circle(0, 0, 8);\n pop();\n\n // End the drawing group.\n pop();\n\n // Draw a bug.\n let x = random(0, 100);\n let y = random(0, 100);\n text('🦟', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the red sphere.\n push();\n translate(-25, 0, 0);\n noStroke();\n directionalLight(255, 0, 0, 0, 0, -1);\n sphere(20);\n pop();\n\n // Draw the blue sphere.\n push();\n translate(25, 0, 0);\n strokeWeight(0.3);\n stroke(0, 0, 255);\n noFill();\n sphere(20);\n pop();\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Structure",
- "submodule": "Structure"
+ "static": false,
+ "module": "Color",
+ "submodule": "Setting"
},
{
- "file": "src/core/structure.js",
- "line": 553,
- "description": "<p>Ends a drawing group that contains its own styles and transformations.</p>\n<p>By default, styles such as <a href=\"#/p5/fill\">fill()</a> and\ntransformations such as <a href=\"#/p5/rotate\">rotate()</a> are applied to\nall drawing that follows. The <a href=\"#/p5/push\">push()</a> and <code>pop()</code>\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('🦟', x, y);\n</code></pre>\n<p>In the code snippet above, the bug's position isn't affected by\n<code>translate(mouseX, mouseY)</code> because that transformation is contained\nbetween <a href=\"#/p5/push\">push()</a> and <code>pop()</code>. The bug moves around\nthe entire canvas as expected.</p>\n<p>Note: <a href=\"#/p5/push\">push()</a> and <code>pop()</code> are always called as a\npair. Both functions are required to begin and end a drawing group.</p>\n<p><a href=\"#/p5/push\">push()</a> and <code>pop()</code> can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('🦟', x, y);\n</code></pre>\n<p>In this version, the code to draw each eye is contained between its own\n<a href=\"#/p5/push\">push()</a> and <code>pop()</code> functions. Doing so makes it\neasier to add details in the correct part of a drawing.</p>\n<p><a href=\"#/p5/push\">push()</a> and <code>pop()</code> contain the effects of the\nfollowing functions:</p>\n<ul>\n<li><a href=\"#/p5/fill\">fill()</a></li>\n<li><a href=\"#/p5/noFill\">noFill()</a></li>\n<li><a href=\"#/p5/noStroke\">noStroke()</a></li>\n<li><a href=\"#/p5/stroke\">stroke()</a></li>\n<li><a href=\"#/p5/tint\">tint()</a></li>\n<li><a href=\"#/p5/noTint\">noTint()</a></li>\n<li><a href=\"#/p5/strokeWeight\">strokeWeight()</a></li>\n<li><a href=\"#/p5/strokeCap\">strokeCap()</a></li>\n<li><a href=\"#/p5/strokeJoin\">strokeJoin()</a></li>\n<li><a href=\"#/p5/imageMode\">imageMode()</a></li>\n<li><a href=\"#/p5/rectMode\">rectMode()</a></li>\n<li><a href=\"#/p5/ellipseMode\">ellipseMode()</a></li>\n<li><a href=\"#/p5/colorMode\">colorMode()</a></li>\n<li><a href=\"#/p5/textAlign\">textAlign()</a></li>\n<li><a href=\"#/p5/textFont\">textFont()</a></li>\n<li><a href=\"#/p5/textSize\">textSize()</a></li>\n<li><a href=\"#/p5/textLeading\">textLeading()</a></li>\n<li><a href=\"#/p5/applyMatrix\">applyMatrix()</a></li>\n<li><a href=\"#/p5/resetMatrix\">resetMatrix()</a></li>\n<li><a href=\"#/p5/rotate\">rotate()</a></li>\n<li><a href=\"#/p5/scale\">scale()</a></li>\n<li><a href=\"#/p5/shearX\">shearX()</a></li>\n<li><a href=\"#/p5/shearY\">shearY()</a></li>\n<li><a href=\"#/p5/translate\">translate()</a></li>\n</ul>\n<p>In WebGL mode, <a href=\"#/p5/push\">push()</a> and <code>pop()</code> contain the\neffects of a few additional styles:</p>\n<ul>\n<li><a href=\"#/p5/setCamera\">setCamera()</a></li>\n<li><a href=\"#/p5/ambientLight\">ambientLight()</a></li>\n<li><a href=\"#/p5/directionalLight\">directionalLight()</a></li>\n<li><a href=\"#/p5/pointLight\">pointLight()</a> <a href=\"#/p5/texture\">texture()</a></li>\n<li><a href=\"#/p5/specularMaterial\">specularMaterial()</a></li>\n<li><a href=\"#/p5/shininess\">shininess()</a></li>\n<li><a href=\"#/p5/normalMaterial\">normalMaterial()</a></li>\n<li><a href=\"#/p5/shader\">shader()</a></li>\n</ul>\n",
+ "name": "noFill",
+ "file": "src/scripts/parsers/in/p5.js/src/color/setting.js",
+ "line": 1489,
"itemtype": "method",
- "name": "pop",
+ "chainable": 1,
+ "description": "<p>Disables setting the fill color for shapes.</p>\n<p>Calling <code>noFill()</code> is the same as making the fill completely transparent,\nas in <code>fill(0, 0)</code>. If both <a href=\"#/p5/noStroke\">noStroke()</a> and\n<code>noFill()</code> are called, nothing will be drawn to the screen.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the left circle.\n circle(25, 50, 20);\n\n // Begin the drawing group.\n push();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Style the circle.\n strokeWeight(5);\n stroke('royalblue');\n fill('orange');\n\n // Draw the circle.\n circle(0, 0, 20);\n\n // End the drawing group.\n pop();\n\n // Draw the right circle.\n circle(75, 50, 20);\n\n describe(\n 'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(24);\n\n describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n background(200);\n\n // Begin the drawing group.\n push();\n\n // Translate the origin to the mouse's position.\n translate(mouseX, mouseY);\n\n // Style the face.\n noStroke();\n fill('green');\n\n // Draw a face.\n circle(0, 0, 60);\n\n // Style the eyes.\n fill('white');\n\n // Draw the left eye.\n push();\n translate(-20, -20);\n ellipse(0, 0, 30, 20);\n fill('black');\n circle(0, 0, 8);\n pop();\n\n // Draw the right eye.\n push();\n translate(20, -20);\n ellipse(0, 0, 30, 20);\n fill('black');\n circle(0, 0, 8);\n pop();\n\n // End the drawing group.\n pop();\n\n // Draw a bug.\n let x = random(0, 100);\n let y = random(0, 100);\n text('🦟', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the red sphere.\n push();\n translate(-25, 0, 0);\n noStroke();\n directionalLight(255, 0, 0, 0, 0, -1);\n sphere(20);\n pop();\n\n // Draw the blue sphere.\n push();\n translate(25, 0, 0);\n strokeWeight(0.3);\n stroke(0, 0, 255);\n noFill();\n sphere(20);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the top square.\n square(32, 10, 35);\n\n // Draw the bottom square.\n noFill();\n square(32, 55, 35);\n\n describe('A white square on above an empty square. Both squares have black outlines.');\n}\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A purple cube wireframe spinning on a black canvas.');\n}\n\nfunction draw() {\n background(0);\n\n // Style the box.\n noFill();\n stroke(100, 100, 240);\n\n // Rotate the coordinates.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Draw the box.\n box(45);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Structure",
- "submodule": "Structure"
- },
- {
- "file": "src/core/structure.js",
- "line": 838,
- "description": "<p>Runs the code in <a href=\"#/p5/draw\">draw()</a> once.</p>\n<p>By default, <a href=\"#/p5/draw\">draw()</a> tries to run 60 times per\nsecond. Calling <a href=\"#/p5/noLoop\">noLoop()</a> stops\n<a href=\"#/p5/draw\">draw()</a> from repeating. Calling <code>redraw()</code> will\nexecute the code in the <a href=\"#/p5/draw\">draw()</a> function a set\nnumber of times.</p>\n<p>The parameter, <code>n</code>, is optional. If a number is passed, as in <code>redraw(5)</code>,\nthen the draw loop will run the given number of times. By default, <code>n</code> is\n1.</p>\n",
- "itemtype": "method",
- "name": "redraw",
- "params": [
+ "overloads": [
{
- "name": "n",
- "description": "<p>number of times to run <a href=\"#/p5/draw\">draw()</a>. Defaults to 1.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": []
}
],
- "example": [
- "\n<div>\n<code>\n// Double-click the canvas to move the circle.\n\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Turn off the draw loop.\n noLoop();\n\n describe(\n 'A white half-circle on the left edge of a gray square. The circle moves a little to the right when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle.\n circle(x, 50, 20);\n\n // Increment x.\n x += 5;\n}\n\n// Run the draw loop when the user double-clicks.\nfunction doubleClicked() {\n redraw();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click the canvas to move the circle.\n\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Turn off the draw loop.\n noLoop();\n\n describe(\n 'A white half-circle on the left edge of a gray square. The circle hops to the right when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle.\n circle(x, 50, 20);\n\n // Increment x.\n x += 5;\n}\n\n// Run the draw loop three times when the user double-clicks.\nfunction doubleClicked() {\n redraw(3);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Structure",
- "submodule": "Structure"
+ "static": false,
+ "module": "Color",
+ "submodule": "Setting"
},
{
- "file": "src/core/structure.js",
- "line": 959,
- "description": "<p>Creates a new sketch in \"instance\" mode.</p>\n<p>All p5.js sketches are instances of the <code>p5</code> class. Put another way, all\np5.js sketches are objects with methods including <code>pInst.setup()</code>,\n<code>pInst.draw()</code>, <code>pInst.circle()</code>, and <code>pInst.fill()</code>. By default, sketches\nrun in \"global mode\" to hide some of this complexity.</p>\n<p>In global mode, a default instance of the <code>p5</code> class is created\nautomatically. The default <code>p5</code> instance searches the web page's source\ncode for declarations of system functions such as <code>setup()</code>, <code>draw()</code>,\nand <code>mousePressed()</code>, then attaches those functions to itself as methods.\nCalling a function such as <code>circle()</code> in global mode actually calls the\ndefault <code>p5</code> object's <code>pInst.circle()</code> method.</p>\n<p>It's often helpful to isolate the code within sketches from the rest of the\ncode on a web page. Two common use cases are web pages that use other\nJavaScript libraries and web pages with multiple sketches. \"Instance mode\"\nmakes it easy to support both of these scenarios.</p>\n<p>Instance mode sketches support the same API as global mode sketches. They\nuse a function to bundle, or encapsulate, an entire sketch. The function\ncontaining the sketch is then passed to the <code>p5()</code> constructor.</p>\n<p>The first parameter, <code>sketch</code>, is a function that contains the sketch. For\nexample, the statement <code>new p5(mySketch)</code> would create a new instance mode\nsketch from a function named <code>mySketch</code>. The function should have one\nparameter, <code>p</code>, that's a <code>p5</code> object.</p>\n<p>The second parameter, <code>node</code>, is optional. If a string is passed, as in\n<code>new p5(mySketch, 'sketch-one')</code> the new instance mode sketch will become a\nchild of the HTML element with the id <code>sketch-one</code>. If an HTML element is\npassed, as in <code>new p5(mySketch, myElement)</code>, then the new instance mode\nsketch will become a child of the <code>Element</code> object called <code>myElement</code>.</p>\n",
+ "name": "noStroke",
+ "file": "src/scripts/parsers/in/p5.js/src/color/setting.js",
+ "line": 1545,
"itemtype": "method",
- "name": "p5",
- "params": [
- {
- "name": "sketch",
- "description": "<p>function containing the sketch.</p>\n",
- "type": "Object"
- },
+ "chainable": 1,
+ "description": "<p>Disables drawing points, lines, and the outlines of shapes.</p>\n<p>Calling <code>noStroke()</code> is the same as making the stroke completely transparent,\nas in <code>stroke(0, 0)</code>. If both <code>noStroke()</code> and\n<a href=\"#/p5/noFill\">noFill()</a> are called, nothing will be drawn to the\nscreen.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n noStroke();\n square(20, 20, 60);\n\n describe('A white square with no outline.');\n}\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A pink cube with no edge outlines spinning on a black canvas.');\n}\n\nfunction draw() {\n background(0);\n\n // Style the box.\n noStroke();\n fill(240, 150, 150);\n\n // Rotate the coordinates.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Draw the box.\n box(45);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "node",
- "description": "<p>ID or reference to the HTML element that will contain the sketch.</p>\n",
- "type": "String|HTMLElement"
+ "params": []
}
],
- "example": [
- "\n<div class='norender notest'>\n<code>\n// Declare the function containing the sketch.\nfunction sketch(p) {\n\n // Declare the setup() method.\n p.setup = function () {\n p.createCanvas(100, 100);\n\n p.describe('A white circle drawn on a gray background.');\n };\n\n // Declare the draw() method.\n p.draw = function () {\n p.background(200);\n\n // Draw the circle.\n p.circle(50, 50, 20);\n };\n}\n\n// Initialize the sketch.\nnew p5(sketch);\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\n// Declare the function containing the sketch.\nfunction sketch(p) {\n // Create the sketch's variables within its scope.\n let x = 50;\n let y = 50;\n\n // Declare the setup() method.\n p.setup = function () {\n p.createCanvas(100, 100);\n\n p.describe('A white circle moves randomly on a gray background.');\n };\n\n // Declare the draw() method.\n p.draw = function () {\n p.background(200);\n\n // Update x and y.\n x += p.random(-1, 1);\n y += p.random(-1, 1);\n\n // Draw the circle.\n p.circle(x, y, 20);\n };\n}\n\n// Initialize the sketch.\nnew p5(sketch);\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\n// Declare the function containing the sketch.\nfunction sketch(p) {\n\n // Declare the setup() method.\n p.setup = function () {\n p.createCanvas(100, 100);\n\n p.describe('A white circle drawn on a gray background.');\n };\n\n // Declare the draw() method.\n p.draw = function () {\n p.background(200);\n\n // Draw the circle.\n p.circle(50, 50, 20);\n };\n}\n\n// Select the web page's body element.\nlet body = document.querySelector('body');\n\n// Initialize the sketch and attach it to the web page's body.\nnew p5(sketch, body);\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\n// Declare the function containing the sketch.\nfunction sketch(p) {\n\n // Declare the setup() method.\n p.setup = function () {\n p.createCanvas(100, 100);\n\n p.describe(\n 'A white circle drawn on a gray background. The circle follows the mouse as the user moves.'\n );\n };\n\n // Declare the draw() method.\n p.draw = function () {\n p.background(200);\n\n // Draw the circle.\n p.circle(p.mouseX, p.mouseY, 20);\n };\n}\n\n// Initialize the sketch.\nnew p5(sketch);\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\n// Declare the function containing the sketch.\nfunction sketch(p) {\n\n // Declare the setup() method.\n p.setup = function () {\n p.createCanvas(100, 100);\n\n p.describe(\n 'A white circle drawn on a gray background. The circle follows the mouse as the user moves. The circle becomes black when the user double-clicks.'\n );\n };\n\n // Declare the draw() method.\n p.draw = function () {\n p.background(200);\n\n // Draw the circle.\n p.circle(p.mouseX, p.mouseY, 20);\n };\n\n // Declare the doubleClicked() method.\n p.doubleClicked = function () {\n // Change the fill color when the user double-clicks.\n p.fill(0);\n };\n}\n\n// Initialize the sketch.\nnew p5(sketch);\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Structure",
- "submodule": "Structure"
+ "static": false,
+ "module": "Color",
+ "submodule": "Setting"
},
{
- "file": "src/core/transform.js",
- "line": 11,
- "description": "<p>Applies a transformation matrix to the coordinate system.</p>\n<p>Transformations such as\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>, and\n<a href=\"#/p5/scale\">scale()</a>\nuse matrix-vector multiplication behind the scenes. A table of numbers,\ncalled a matrix, encodes each transformation. The values in the matrix\nthen multiply each point on the canvas, which is represented by a vector.</p>\n<p><code>applyMatrix()</code> allows for many transformations to be applied at once. See\n<a href=\"https://en.wikipedia.org/wiki/Transformation_matrix\" target=\"_blank\">Wikipedia</a>\nand <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web\" target=\"_blank\">MDN</a>\nfor more details about transformations.</p>\n<p>There are two ways to call <code>applyMatrix()</code> in two and three dimensions.</p>\n<p>In 2D mode, the parameters <code>a</code>, <code>b</code>, <code>c</code>, <code>d</code>, <code>e</code>, and <code>f</code>, correspond to\nelements in the following transformation matrix:</p>\n<blockquote>\n<p><img style=\"max-width: 150px\" src=\"assets/transformation-matrix.png\"\nalt=\"The transformation matrix used when applyMatrix is called in 2D mode.\"/></p>\n</blockquote>\n<p>The numbers can be passed individually, as in\n<code>applyMatrix(2, 0, 0, 0, 2, 0)</code>. They can also be passed in an array, as in\n<code>applyMatrix([2, 0, 0, 0, 2, 0])</code>.</p>\n<p>In 3D mode, the parameters <code>a</code>, <code>b</code>, <code>c</code>, <code>d</code>, <code>e</code>, <code>f</code>, <code>g</code>, <code>h</code>, <code>i</code>,\n<code>j</code>, <code>k</code>, <code>l</code>, <code>m</code>, <code>n</code>, <code>o</code>, and <code>p</code> correspond to elements in the\nfollowing transformation matrix:</p>\n<p><img style=\"max-width: 300px\" src=\"assets/transformation-matrix-4-4.png\"\nalt=\"The transformation matrix used when applyMatrix is called in 3D mode.\"/></p>\n<p>The numbers can be passed individually, as in\n<code>applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)</code>. They can\nalso be passed in an array, as in\n<code>applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1])</code>.</p>\n<p>By default, transformations accumulate. The\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions\ncan be used to isolate transformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>applyMatrix()</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't\ncause shapes to transform continuously.</p>\n",
+ "name": "stroke",
+ "file": "src/scripts/parsers/in/p5.js/src/color/setting.js",
+ "line": 1798,
"itemtype": "method",
- "name": "applyMatrix",
"chainable": 1,
+ "description": "<p>Sets the color used to draw points, lines, and the outlines of shapes.</p>\n<p>Calling <code>stroke(255, 165, 0)</code> or <code>stroke('orange')</code> means all shapes drawn\nafter calling <code>stroke()</code> will be filled with the color orange. The way\nthese parameters are interpreted may be changed with the\n<a href=\"#/p5/colorMode\">colorMode()</a> function.</p>\n<p>The version of <code>stroke()</code> with one parameter interprets the value one of\nthree ways. If the parameter is a <code>Number</code>, it's interpreted as a grayscale\nvalue. If the parameter is a <code>String</code>, it's interpreted as a CSS color\nstring. A <a href=\"#/p5.Color\">p5.Color</a> object can also be provided to\nset the stroke color.</p>\n<p>The version of <code>stroke()</code> with two parameters interprets the first one as a\ngrayscale value. The second parameter sets the alpha (transparency) value.</p>\n<p>The version of <code>stroke()</code> with three parameters interprets them as RGB, HSB,\nor HSL colors, depending on the current <code>colorMode()</code>.</p>\n<p>The version of <code>stroke()</code> with four parameters interprets them as RGBA, HSBA,\nor HSLA colors, depending on the current <code>colorMode()</code>. The last parameter\nsets the alpha (transparency) value.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n applyMatrix(1, 0, 0, 1, 50, 50);\n\n // Draw the circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n let m = [1, 0, 0, 1, 50, 50];\n applyMatrix(m);\n\n // Draw the circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\");\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn.\n let angle = QUARTER_PI;\n let ca = cos(angle);\n let sa = sin(angle);\n applyMatrix(ca, sa, -sa, ca, 0, 0);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by a factor of 0.5.\n applyMatrix(0.5, 0, 0, 0.5, 0, 0);\n\n // Draw a square at (30, 20).\n // It appears at (15, 10) after scaling.\n square(30, 20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the shear factor.\n let angle = QUARTER_PI;\n let shearFactor = 1 / tan(HALF_PI - angle);\n\n // Shear the coordinate system along the x-axis.\n applyMatrix(1, 0, shearFactor, 1, 0, 0);\n\n // Draw the square.\n square(0, 0, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n let ca = cos(angle);\n let sa = sin(angle);\n applyMatrix(ca, 0, sa, 0, 0, 1, 0, 0, -sa, 0, ca, 0, 0, 0, 0, 1);\n\n // Draw a box.\n box();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A grayscale value.\n strokeWeight(4);\n stroke(51);\n square(20, 20, 60);\n\n describe('A white square with a dark charcoal gray outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // R, G & B values.\n stroke(255, 204, 0);\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a yellow outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use HSB color.\n colorMode(HSB);\n\n // H, S & B values.\n strokeWeight(4);\n stroke(255, 204, 100);\n square(20, 20, 60);\n\n describe('A white square with a royal blue outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A CSS named color.\n stroke('red');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a red outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Three-digit hex RGB notation.\n stroke('#fae');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a pink outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Six-digit hex RGB notation.\n stroke('#222222');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGB notation.\n stroke('rgb(0, 255, 0)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a bright green outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Integer RGBA notation.\n stroke('rgba(0, 255, 0, 0.25)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a soft green outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGB notation.\n stroke('rgb(100%, 0%, 10%)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a red outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Percentage RGBA notation.\n stroke('rgba(100%, 0%, 100%, 0.5)');\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a dark fuchsia outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // A p5.Color object.\n stroke(color(0, 0, 255));\n strokeWeight(4);\n square(20, 20, 60);\n\n describe('A white square with a blue outline.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Transform",
- "submodule": "Transform",
"overloads": [
{
- "line": 11,
- "params": [
- {
- "name": "arr",
- "description": "<p>an array containing the elements of the transformation matrix. Its length should be either 6 (2D) or 16 (3D).</p>\n",
- "type": "Array"
- }
- ],
- "chainable": 1
- },
- {
- "line": 206,
"params": [
{
- "name": "a",
- "description": "<p>an element of the transformation matrix.</p>\n",
- "type": "Number"
- },
- {
- "name": "b",
- "description": "<p>an element of the transformation matrix.</p>\n",
+ "name": "v1",
+ "description": "red value if color mode is RGB or hue value if color mode is HSB.",
"type": "Number"
},
{
- "name": "c",
- "description": "<p>an element of the transformation matrix.</p>\n",
+ "name": "v2",
+ "description": "green value if color mode is RGB or saturation value if color mode is HSB.",
"type": "Number"
},
{
- "name": "d",
- "description": "<p>an element of the transformation matrix.</p>\n",
+ "name": "v3",
+ "description": "blue value if color mode is RGB or brightness value if color mode is HSB.",
"type": "Number"
},
{
- "name": "e",
- "description": "<p>an element of the transformation matrix.</p>\n",
- "type": "Number"
- },
- {
- "name": "f",
- "description": "<p>an element of the transformation matrix.</p>\n",
+ "name": "alpha",
+ "description": "alpha value, controls transparency (0 - transparent, 255 - opaque).",
+ "optional": 1,
"type": "Number"
}
- ],
- "chainable": 1
+ ]
},
{
- "line": 216,
"params": [
{
- "name": "a",
- "description": "",
- "type": "Number"
- },
- {
- "name": "b",
- "description": "",
- "type": "Number"
- },
- {
- "name": "c",
- "description": "",
- "type": "Number"
- },
- {
- "name": "d",
- "description": "",
- "type": "Number"
- },
- {
- "name": "e",
- "description": "",
- "type": "Number"
- },
- {
- "name": "f",
- "description": "",
- "type": "Number"
- },
- {
- "name": "g",
- "description": "<p>an element of the transformation matrix.</p>\n",
- "type": "Number"
- },
- {
- "name": "h",
- "description": "<p>an element of the transformation matrix.</p>\n",
- "type": "Number"
- },
- {
- "name": "i",
- "description": "<p>an element of the transformation matrix.</p>\n",
- "type": "Number"
- },
- {
- "name": "j",
- "description": "<p>an element of the transformation matrix.</p>\n",
- "type": "Number"
- },
- {
- "name": "k",
- "description": "<p>an element of the transformation matrix.</p>\n",
- "type": "Number"
- },
- {
- "name": "l",
- "description": "<p>an element of the transformation matrix.</p>\n",
- "type": "Number"
- },
+ "name": "value",
+ "description": "a color string.",
+ "type": "String"
+ }
+ ]
+ },
+ {
+ "params": [
{
- "name": "m",
- "description": "<p>an element of the transformation matrix.</p>\n",
+ "name": "gray",
+ "description": "a grayscale value.",
"type": "Number"
},
{
- "name": "n",
- "description": "<p>an element of the transformation matrix.</p>\n",
+ "name": "alpha",
+ "optional": 1,
"type": "Number"
- },
+ }
+ ]
+ },
+ {
+ "params": [
{
- "name": "o",
- "description": "<p>an element of the transformation matrix.</p>\n",
- "type": "Number"
- },
+ "name": "values",
+ "description": "an array containing the red, green, blue,\nand alpha components of the color.",
+ "type": "Number[]"
+ }
+ ]
+ },
+ {
+ "params": [
{
- "name": "p",
- "description": "<p>an element of the transformation matrix.</p>\n",
- "type": "Number"
+ "name": "color",
+ "description": "the stroke color.",
+ "type": "p5.Color"
}
- ],
- "chainable": 1
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Color",
+ "submodule": "Setting"
},
{
- "file": "src/core/transform.js",
- "line": 246,
- "description": "<p>Clears all transformations applied to the coordinate system.</p>\n",
+ "name": "erase",
+ "file": "src/scripts/parsers/in/p5.js/src/color/setting.js",
+ "line": 1884,
"itemtype": "method",
- "name": "resetMatrix",
"chainable": 1,
+ "description": "<p>Starts using shapes to erase parts of the canvas.</p>\n<p>All drawing that follows <code>erase()</code> will subtract from the canvas, revealing\nthe web page underneath. The erased areas will become transparent, allowing\nthe content behind the canvas to show through. The\n<a href=\"#/p5/fill\">fill()</a>, <a href=\"#/p5/stroke\">stroke()</a>, and\n<a href=\"#/p5/blendMode\">blendMode()</a> have no effect once <code>erase()</code> is\ncalled.</p>\n<p>The <code>erase()</code> function has two optional parameters. The first parameter\nsets the strength of erasing by the shape's interior. A value of 0 means\nthat no erasing will occur. A value of 255 means that the shape's interior\nwill fully erase the content underneath. The default value is 255\n(full strength).</p>\n<p>The second parameter sets the strength of erasing by the shape's edge. A\nvalue of 0 means that no erasing will occur. A value of 255 means that the\nshape's edge will fully erase the content underneath. The default value is\n255 (full strength).</p>\n<p>To cancel the erasing effect, use the <a href=\"#/p5/noErase\">noErase()</a>\nfunction.</p>\n<p><code>erase()</code> has no effect on drawing done with the\n<a href=\"#/p5/image\">image()</a> and\n<a href=\"#/p5/background\">background()</a> functions.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two circles drawn on a gray background. A blue circle is at the top-left and a red circle is at the bottom-right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a blue circle at the coordinates (25, 25).\n fill('blue');\n circle(25, 25, 20);\n\n // Clear all transformations.\n // The origin is now at the top-left corner.\n resetMatrix();\n\n // Draw a red circle at the coordinates (25, 25).\n fill('red');\n circle(25, 25, 20);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(100, 100, 250);\n\n // Draw a pink square.\n fill(250, 100, 100);\n square(20, 20, 60);\n\n // Erase a circular area.\n erase();\n circle(25, 30, 30);\n noErase();\n\n describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a hole.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(100, 100, 250);\n\n // Draw a pink square.\n fill(250, 100, 100);\n square(20, 20, 60);\n\n // Erase a circular area.\n strokeWeight(5);\n erase(150, 255);\n circle(25, 30, 30);\n noErase();\n\n describe('A purple canvas with a pink square in the middle. A circle at the top-left partially erases its interior and a fully erases its outline.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Transform",
- "submodule": "Transform"
- },
- {
- "file": "src/core/transform.js",
- "line": 289,
- "description": "<p>Rotates the coordinate system.</p>\n<p>By default, the positive x-axis points to the right and the positive y-axis\npoints downward. The <code>rotate()</code> function changes this orientation by\nrotating the coordinate system about the origin. Everything drawn after\n<code>rotate()</code> is called will appear to be rotated.</p>\n<p>The first parameter, <code>angle</code>, is the amount to rotate. For example, calling\n<code>rotate(1)</code> rotates the coordinate system clockwise 1 radian which is\nnearly 57˚. <code>rotate()</code> interprets angle values using the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>The second parameter, <code>axis</code>, is optional. It's used to orient 3D rotations\nin WebGL mode. If a <a href=\"#/p5.Vector\">p5.Vector</a> is passed, as in\n<code>rotate(QUARTER_PI, myVector)</code>, then the coordinate system will rotate\n<code>QUARTER_PI</code> radians about <code>myVector</code>. If an array of vector components is\npassed, as in <code>rotate(QUARTER_PI, [1, 0, 0])</code>, then the coordinate system\nwill rotate <code>QUARTER_PI</code> radians about a vector with the components\n<code>[1, 0, 0]</code>.</p>\n<p>By default, transformations accumulate. For example, calling <code>rotate(1)</code>\ntwice has the same effect as calling <code>rotate(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions\ncan be used to isolate transformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>rotate(1)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't cause\nshapes to spin.</p>\n",
- "itemtype": "method",
- "name": "rotate",
- "params": [
- {
- "name": "angle",
- "description": "<p>angle of rotation in the current <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
- "type": "Number"
- },
+ "overloads": [
{
- "name": "axis",
- "description": "<p>axis to rotate about in 3D.</p>\n",
- "type": "p5.Vector|Number[]",
- "optional": true
+ "params": [
+ {
+ "name": "strengthFill",
+ "description": "a number (0-255) for the strength of erasing under a shape's interior.\nDefaults to 255, which is full strength.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "strengthStroke",
+ "description": "a number (0-255) for the strength of erasing under a shape's edge.\nDefaults to 255, which is full strength.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n \"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn.\n rotate(QUARTER_PI);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n \"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/16 turn.\n rotate(QUARTER_PI / 2);\n\n // Rotate the coordinate system another 1/16 turn.\n rotate(QUARTER_PI / 2);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe(\n \"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn.\n rotate(45);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white rectangle on a gray background. The rectangle rotates slowly about the top-left corner. It disappears and reappears periodically.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotate(angle);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A cube on a gray background. The cube's front face points to the top-right.\");\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn about\n // the axis [1, 1, 0].\n let axis = createVector(1, 1, 0);\n rotate(QUARTER_PI, axis);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A cube on a gray background. The cube's front face points to the top-right.\");\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn about\n // the axis [1, 1, 0].\n let axis = [1, 1, 0];\n rotate(QUARTER_PI, axis);\n\n // Draw a box.\n box();\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Transform",
- "submodule": "Transform"
+ "static": false,
+ "module": "Color",
+ "submodule": "Setting"
},
{
- "file": "src/core/transform.js",
- "line": 470,
- "description": "<p>Rotates the coordinate system about the x-axis in WebGL mode.</p>\n<p>The parameter, <code>angle</code>, is the amount to rotate. For example, calling\n<code>rotateX(1)</code> rotates the coordinate system about the x-axis by 1 radian.\n<code>rotateX()</code> interprets angle values using the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, transformations accumulate. For example, calling <code>rotateX(1)</code>\ntwice has the same effect as calling <code>rotateX(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions\ncan be used to isolate transformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>rotateX(1)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't cause\nshapes to spin.</p>\n",
+ "name": "noErase",
+ "file": "src/scripts/parsers/in/p5.js/src/color/setting.js",
+ "line": 1925,
"itemtype": "method",
- "name": "rotateX",
- "params": [
- {
- "name": "angle",
- "description": "<p>angle of rotation in the current <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
- "type": "Number"
- }
- ],
"chainable": 1,
+ "description": "<p>Ends erasing that was started with <a href=\"#/p5/erase\">erase()</a>.</p>\n<p>The <a href=\"#/p5/fill\">fill()</a>, <a href=\"#/p5/stroke\">stroke()</a>, and\n<a href=\"#/p5/blendMode\">blendMode()</a> settings will return to what they\nwere prior to calling <a href=\"#/p5/erase\">erase()</a>.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateX(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateX(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateX(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateX(45);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateX(angle);\n\n // Draw a box.\n box();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(235, 145, 15);\n\n // Draw the left rectangle.\n noStroke();\n fill(30, 45, 220);\n rect(30, 10, 10, 80);\n\n // Erase a circle.\n erase();\n circle(50, 50, 60);\n noErase();\n\n // Draw the right rectangle.\n rect(70, 10, 10, 80);\n\n 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.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Transform",
- "submodule": "Transform"
- },
- {
- "file": "src/core/transform.js",
- "line": 606,
- "description": "<p>Rotates the coordinate system about the y-axis in WebGL mode.</p>\n<p>The parameter, <code>angle</code>, is the amount to rotate. For example, calling\n<code>rotateY(1)</code> rotates the coordinate system about the y-axis by 1 radian.\n<code>rotateY()</code> interprets angle values using the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, transformations accumulate. For example, calling <code>rotateY(1)</code>\ntwice has the same effect as calling <code>rotateY(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions\ncan be used to isolate transformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>rotateY(1)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't cause\nshapes to spin.</p>\n",
- "itemtype": "method",
- "name": "rotateY",
- "params": [
+ "overloads": [
{
- "name": "angle",
- "description": "<p>angle of rotation in the current <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
- "type": "Number"
+ "params": []
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateY(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateY(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateY(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateY(45);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateY(angle);\n\n // Draw a box.\n box();\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Transform",
- "submodule": "Transform"
+ "static": false,
+ "module": "Color",
+ "submodule": "Setting"
},
{
- "file": "src/core/transform.js",
- "line": 742,
- "description": "<p>Rotates the coordinate system about the z-axis in WebGL mode.</p>\n<p>The parameter, <code>angle</code>, is the amount to rotate. For example, calling\n<code>rotateZ(1)</code> rotates the coordinate system about the z-axis by 1 radian.\n<code>rotateZ()</code> interprets angle values using the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, transformations accumulate. For example, calling <code>rotateZ(1)</code>\ntwice has the same effect as calling <code>rotateZ(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions\ncan be used to isolate transformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>rotateZ(1)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't cause\nshapes to spin.</p>\n",
+ "name": "blendMode",
+ "file": "src/scripts/parsers/in/p5.js/src/color/setting.js",
+ "line": 2394,
"itemtype": "method",
- "name": "rotateZ",
- "params": [
+ "description": "<p>Sets the way colors blend when added to the canvas.</p>\n<p>By default, drawing with a solid color paints over the current pixel values\non the canvas. <code>blendMode()</code> offers many options for blending colors.</p>\n<p>Shapes, images, and text can be used as sources for drawing to the canvas.\nA source pixel changes the color of the canvas pixel where it's drawn. The\nfinal color results from blending the source pixel's color with the canvas\npixel's color. RGB color values from the source and canvas pixels are\ncompared, added, subtracted, multiplied, and divided to create different\neffects. Red values with red values, greens with greens, and blues with\nblues.</p>\n<p>The parameter, <code>mode</code>, sets the blend mode. For example, calling\n<code>blendMode(ADD)</code> sets the blend mode to <code>ADD</code>. The following blend modes\nare available in both 2D and WebGL mode:</p>\n<ul><li><code>BLEND</code>: color values from the source overwrite the canvas. This is the default mode.</li><li><code>ADD</code>: color values from the source are added to values from the canvas.</li><li><code>DARKEST</code>: keeps the darkest color value.</li><li><code>LIGHTEST</code>: keeps the lightest color value.</li><li><code>EXCLUSION</code>: similar to <code>DIFFERENCE</code> but with less contrast.</li><li><code>MULTIPLY</code>: color values from the source are multiplied with values from the canvas. The result is always darker.</li><li><code>SCREEN</code>: all color values are inverted, then multiplied, then inverted again. The result is always lighter. (Opposite of <code>MULTIPLY</code>)</li><li><code>REPLACE</code>: the last source drawn completely replaces the rest of the canvas.</li><li><code>REMOVE</code>: overlapping pixels are removed by making them completely transparent.</li></ul><p>The following blend modes are only available in 2D mode:</p>\n<ul><li><code>DIFFERENCE</code>: color values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive.</li><li><code>OVERLAY</code>: combines <code>MULTIPLY</code> and <code>SCREEN</code>. Dark values in the canvas get darker and light values get lighter.</li><li><code>HARD_LIGHT</code>: combines <code>MULTIPLY</code> and <code>SCREEN</code>. Dark values in the source get darker and light values get lighter.</li><li><code>SOFT_LIGHT</code>: a softer version of <code>HARD_LIGHT</code>.</li><li><code>DODGE</code>: lightens light tones and increases contrast. Divides the canvas color values by the inverted color values from the source.</li><li><code>BURN</code>: darkens dark tones and increases contrast. Divides the source color values by the inverted color values from the canvas, then inverts the result.</li></ul><p>The following blend modes are only available in WebGL mode:</p>\n<ul><li><code>SUBTRACT</code>: RGB values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive. Alpha (transparency) values from the source and canvas are added.</li></ul>",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use the default blend mode.\n blendMode(BLEND);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A blue line and a red line form an X on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(ADD);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint magenta.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(DARKEST);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A blue line and a red line form an X on a gray background. The area where they overlap is black.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(LIGHTEST);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint magenta.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(EXCLUSION);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A yellow line and a cyan line form an X on a gray background. The area where they overlap is green.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(MULTIPLY);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A blue line and a red line form an X on a gray background. The area where they overlap is black.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(SCREEN);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint magenta.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(REPLACE);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A diagonal red line.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(REMOVE);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('The silhouette of an X is missing from a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(DIFFERENCE);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A yellow line and a cyan line form an X on a gray background. The area where they overlap is green.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(OVERLAY);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is bright magenta.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(HARD_LIGHT);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A blue line and a red line form an X on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(SOFT_LIGHT);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is violet.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(DODGE);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint violet.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(BURN);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A blue line and a red line form an X on a gray background. The area where they overlap is black.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the blend mode.\n blendMode(SUBTRACT);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('blue');\n line(25, 25, 75, 75);\n\n // Draw the red line.\n stroke('red');\n line(75, 25, 25, 75);\n\n describe('A yellow line and a turquoise line form an X on a gray background. The area where they overlap is green.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "angle",
- "description": "<p>angle of rotation in the current <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "mode",
+ "description": "blend mode to set.\neither BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\nEXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\nSOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT",
+ "type": "BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|REMOVE|SUBTRACT"
+ }
+ ]
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateZ(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateZ(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateZ(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateZ(45);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateZ(angle);\n\n // Draw a box.\n box();\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Transform",
- "submodule": "Transform"
+ "static": false,
+ "module": "Color",
+ "submodule": "Setting"
},
{
- "file": "src/core/transform.js",
- "line": 878,
- "description": "<p>Scales the coordinate system.</p>\n<p>By default, shapes are drawn at their original scale. A rectangle that's 50\npixels wide appears to take up half the width of a 100 pixel-wide canvas.\nThe <code>scale()</code> function can shrink or stretch the coordinate system so that\nshapes appear at different sizes. There are two ways to call <code>scale()</code> with\nparameters that set the scale factor(s).</p>\n<p>The first way to call <code>scale()</code> uses numbers to set the amount of scaling.\nThe first parameter, <code>s</code>, sets the amount to scale each axis. For example,\ncalling <code>scale(2)</code> stretches the x-, y-, and z-axes by a factor of 2. The\nnext two parameters, <code>y</code> and <code>z</code>, are optional. They set the amount to\nscale the y- and z-axes. For example, calling <code>scale(2, 0.5, 1)</code> stretches\nthe x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and\nleaves the z-axis unchanged.</p>\n<p>The second way to call <code>scale()</code> uses a <a href=\"#/p5.Vector\">p5.Vector</a>\nobject to set the scale factors. For example, calling <code>scale(myVector)</code>\nuses the x-, y-, and z-components of <code>myVector</code> to set the amount of\nscaling along the x-, y-, and z-axes. Doing so is the same as calling\n<code>scale(myVector.x, myVector.y, myVector.z)</code>.</p>\n<p>By default, transformations accumulate. For example, calling <code>scale(1)</code>\ntwice has the same effect as calling <code>scale(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions\ncan be used to isolate transformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>scale(2)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't cause\nshapes to grow continuously.</p>\n",
+ "name": "print",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 1475,
"itemtype": "method",
- "name": "scale",
- "chainable": 1,
+ "description": "<p>Displays text in the web browser's console.</p>\n<p><code>print()</code> is helpful for printing values while debugging. Each call to\n<code>print()</code> creates a new line of text.</p>\n<p>Note: Call <code>print('\\n')</code> to print a blank line. Calling <code>print()</code> without\nan argument opens the browser's dialog for printing documents.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by a factor of 0.5.\n scale(0.5);\n\n // Draw a square at (30, 20).\n // It appears at (15, 10) after scaling.\n square(30, 20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle and a square drawn in white on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis.\n scale(0.5, 1.3);\n\n // Draw a square at (30, 20).\n // It appears as a rectangle at (15, 26) after scaling.\n square(30, 20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle and a square drawn in white on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Create a p5.Vector object.\n let v = createVector(0.5, 1.3);\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis.\n scale(v);\n\n // Draw a square at (30, 20).\n // It appears as a rectangle at (15, 26) after scaling.\n square(30, 20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red box and a blue box drawn on a gray background. The red box appears embedded in the blue box.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the red sphere.\n fill('red');\n box();\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis and\n // 2 along the z-axis.\n scale(0.5, 1.3, 2);\n\n // Draw the blue sphere.\n fill('blue');\n box();\n}\n</code>\n</div>"
+ "<div>\n<code class=\"norender\">\nfunction setup() {\n // Prints \"hello, world\" to the console.\n print('hello, world');\n}\n</code>\n</div>\n\n<div>\n<code class=\"norender\">\nfunction setup() {\n let name = 'ada';\n // Prints \"hello, ada\" to the console.\n print(`hello, ${name}`);\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('numbers.txt');\n\n // Add some data to the print stream.\n myWriter.print('1,2,3,');\n myWriter.print(['4', '5', '6']);\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Transform",
- "submodule": "Transform",
"overloads": [
{
- "line": 878,
"params": [
{
- "name": "s",
- "description": "<p>amount to scale along the positive x-axis.</p>\n",
- "type": "Number|p5.Vector|Number[]"
- },
- {
- "name": "y",
- "description": "<p>amount to scale along the positive y-axis. Defaults to <code>s</code>.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "z",
- "description": "<p>amount to scale along the positive z-axis. Defaults to <code>y</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "contents",
+ "description": "content to print to the console.",
+ "type": "Any"
}
- ],
- "chainable": 1
+ ]
},
{
- "line": 1039,
"params": [
{
- "name": "scales",
- "description": "<p>vector whose components should be used to scale.</p>\n",
- "type": "p5.Vector|Number[]"
+ "name": "data",
+ "description": "data to be written as a string, number,\nor array of strings and numbers.",
+ "type": "String|Number|Array"
}
- ],
- "chainable": 1
- }
- ]
- },
- {
- "file": "src/core/transform.js",
- "line": 1069,
- "description": "<p>Shears the x-axis so that shapes appear skewed.</p>\n<p>By default, the x- and y-axes are perpendicular. The <code>shearX()</code> function\ntransforms the coordinate system so that x-coordinates are translated while\ny-coordinates are fixed.</p>\n<p>The first parameter, <code>angle</code>, is the amount to shear. For example, calling\n<code>shearX(1)</code> transforms all x-coordinates using the formula\n<code>x = x + y * tan(angle)</code>. <code>shearX()</code> interprets angle values using the\ncurrent <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, transformations accumulate. For example, calling\n<code>shearX(1)</code> twice has the same effect as calling <code>shearX(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and\n<a href=\"#/p5/pop\">pop()</a> functions can be used to isolate\ntransformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>shearX(1)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't\ncause shapes to shear continuously.</p>\n",
- "itemtype": "method",
- "name": "shearX",
- "params": [
- {
- "name": "angle",
- "description": "<p>angle to shear by in the current <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
- "type": "Number"
+ ]
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearX(QUARTER_PI);\n\n // Draw the square.\n square(0, 0, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearX(45);\n\n // Draw the square.\n square(0, 0, 50);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Transform",
- "submodule": "Transform"
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/core/transform.js",
- "line": 1146,
- "description": "<p>Shears the y-axis so that shapes appear skewed.</p>\n<p>By default, the x- and y-axes are perpendicular. The <code>shearY()</code> function\ntransforms the coordinate system so that y-coordinates are translated while\nx-coordinates are fixed.</p>\n<p>The first parameter, <code>angle</code>, is the amount to shear. For example, calling\n<code>shearY(1)</code> transforms all y-coordinates using the formula\n<code>y = y + x * tan(angle)</code>. <code>shearY()</code> interprets angle values using the\ncurrent <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, transformations accumulate. For example, calling\n<code>shearY(1)</code> twice has the same effect as calling <code>shearY(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and\n<a href=\"#/p5/pop\">pop()</a> functions can be used to isolate\ntransformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>shearY(1)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't\ncause shapes to shear continuously.</p>\n",
+ "name": "cursor",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 301,
"itemtype": "method",
- "name": "shearY",
- "params": [
+ "description": "<p>Changes the cursor's appearance.</p>\n<p>The first parameter, <code>type</code>, sets the type of cursor to display. The\nbuilt-in options are <code>ARROW</code>, <code>CROSS</code>, <code>HAND</code>, <code>MOVE</code>, <code>TEXT</code>, and <code>WAIT</code>.\n<code>cursor()</code> also recognizes standard CSS cursor properties passed as\nstrings: <code>'help'</code>, <code>'wait'</code>, <code>'crosshair'</code>, <code>'not-allowed'</code>, <code>'zoom-in'</code>,\nand <code>'grab'</code>. If the path to an image is passed, as in\n<code>cursor('assets/target.png')</code>, then the image will be used as the cursor.\nImages 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>\n<p>The parameters <code>x</code> and <code>y</code> are optional. If an image is used for the\ncursor, <code>x</code> and <code>y</code> set the location pointed to within the image. They are\nboth 0 by default, so the cursor points to the image's top-left corner. <code>x</code>\nand <code>y</code> must be less than the image's width and height, respectively.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. The cursor appears as crosshairs.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the cursor to crosshairs: +\n cursor(CROSS);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.');\n}\n\nfunction draw() {\n background(200);\n\n // Divide the canvas into quadrants.\n line(50, 0, 50, 100);\n line(0, 50, 100, 50);\n\n // Change cursor based on mouse position.\n if (mouseX < 50 && mouseY < 50) {\n cursor(CROSS);\n } else if (mouseX > 50 && mouseY < 50) {\n cursor('progress');\n } else if (mouseX > 50 && mouseY > 50) {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');\n } else {\n cursor('grab');\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // Change the cursor's active spot\n // when the mouse is pressed.\n if (mouseIsPressed === true) {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8);\n } else {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "angle",
- "description": "<p>angle to shear by in the current <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "type",
+ "description": "Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.\nNative CSS properties: 'grab', 'progress', and so on.\nPath to cursor image.",
+ "type": "ARROW|CROSS|HAND|MOVE|TEXT|WAIT|String"
+ },
+ {
+ "name": "x",
+ "description": "horizontal active spot of the cursor.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "vertical active spot of the cursor.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearY(QUARTER_PI);\n\n // Draw the square.\n square(0, 0, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearY(45);\n\n // Draw the square.\n square(0, 0, 50);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Transform",
- "submodule": "Transform"
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/core/transform.js",
- "line": 1223,
- "description": "<p>Translates the coordinate system.</p>\n<p>By default, the origin <code>(0, 0)</code> is at the sketch's top-left corner in 2D\nmode and center in WebGL mode. The <code>translate()</code> function shifts the origin\nto a different position. Everything drawn after <code>translate()</code> is called\nwill appear to be shifted. There are two ways to call <code>translate()</code> with\nparameters that set the origin's position.</p>\n<p>The first way to call <code>translate()</code> uses numbers to set the amount of\ntranslation. The first two parameters, <code>x</code> and <code>y</code>, set the amount to\ntranslate along the positive x- and y-axes. For example, calling\n<code>translate(20, 30)</code> translates the origin 20 pixels along the x-axis and 30\npixels along the y-axis. The third parameter, <code>z</code>, is optional. It sets the\namount to translate along the positive z-axis. For example, calling\n<code>translate(20, 30, 40)</code> translates the origin 20 pixels along the x-axis,\n30 pixels along the y-axis, and 40 pixels along the z-axis.</p>\n<p>The second way to call <code>translate()</code> uses a\n<a href=\"#/p5.Vector\">p5.Vector</a> object to set the amount of\ntranslation. For example, calling <code>translate(myVector)</code> uses the x-, y-,\nand z-components of <code>myVector</code> to set the amount to translate along the x-,\ny-, and z-axes. Doing so is the same as calling\n<code>translate(myVector.x, myVector.y, myVector.z)</code>.</p>\n<p>By default, transformations accumulate. For example, calling\n<code>translate(10, 0)</code> twice has the same effect as calling\n<code>translate(20, 0)</code> once. The <a href=\"#/p5/push\">push()</a> and\n<a href=\"#/p5/pop\">pop()</a> functions can be used to isolate\ntransformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>translate(10, 0)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't\ncause shapes to move continuously.</p>\n",
+ "name": "frameRate",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 409,
"itemtype": "method",
- "name": "translate",
"chainable": 1,
+ "description": "<p>Sets the number of frames to draw per second.</p>\n<p>Calling <code>frameRate()</code> with one numeric argument, as in <code>frameRate(30)</code>,\nattempts to draw 30 frames per second (FPS). The target frame rate may not\nbe achieved depending on the sketch's processing needs. Most computers\ndefault to a frame rate of 60 FPS. Frame rates of 24 FPS and above are\nfast enough for smooth animations.</p>\n<p>Calling <code>frameRate()</code> without an argument returns the current frame rate.\nThe value returned is an approximation.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two circles drawn on a gray background. The blue circle on the right overlaps the red circle at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw the red circle.\n fill('red');\n circle(0, 0, 40);\n\n // Translate the origin to the right.\n translate(25, 0);\n\n // Draw the blue circle.\n fill('blue');\n circle(0, 0, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle moves slowly from left to right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the x-coordinate.\n let x = frameCount * 0.2;\n\n // Translate the origin.\n translate(x, 50);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a p5.Vector object.\n let v = createVector(50, 50);\n\n // Translate the origin by the vector.\n translate(v);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two spheres sitting side-by-side on gray background. The sphere at the center is red. The sphere on the right is blue.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the red sphere.\n fill('red');\n sphere(10);\n\n // Translate the origin to the right.\n translate(30, 0, 0);\n\n // Draw the blue sphere.\n fill('blue');\n sphere(10);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the x variable based\n // on the current frameCount.\n let x = frameCount % 100;\n\n // If the mouse is pressed,\n // decrease the frame rate.\n if (mouseIsPressed === true) {\n frameRate(10);\n } else {\n frameRate(60);\n }\n\n // Use x to set the circle's\n // position.\n circle(x, 50, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A number written in black on a gray background. The number decreases when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // If the mouse is pressed, do lots\n // of math to slow down drawing.\n if (mouseIsPressed === true) {\n for (let i = 0; i < 1000000; i += 1) {\n random();\n }\n }\n\n // Get the current frame rate\n // and display it.\n let fps = frameRate();\n text(fps, 50, 50);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Transform",
- "submodule": "Transform",
"overloads": [
{
- "line": 1223,
"params": [
{
- "name": "x",
- "description": "<p>amount to translate along the positive x-axis.</p>\n",
+ "name": "fps",
+ "description": "number of frames to draw per second.",
"type": "Number"
- },
- {
- "name": "y",
- "description": "<p>amount to translate along the positive y-axis.</p>\n",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "<p>amount to translate along the positive z-axis.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 1394,
- "params": [
- {
- "name": "vector",
- "description": "<p>vector by which to translate.</p>\n",
- "type": "p5.Vector"
}
- ],
- "chainable": 1
- }
- ]
- },
- {
- "file": "src/data/local_storage.js",
- "line": 10,
- "description": "<p>Stores a value in the web browser's local storage.</p>\n<p>Web browsers can save small amounts of data using the built-in\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">localStorage object</a>.\nData stored in <code>localStorage</code> can be retrieved at any point, even after\nrefreshing a page or restarting the browser. Data are stored as key-value\npairs.</p>\n<p><code>storeItem()</code> makes it easy to store values in <code>localStorage</code> and\n<a href=\"#/p5/getItem\">getItem()</a> makes it easy to retrieve them.</p>\n<p>The first parameter, <code>key</code>, is the name of the value to be stored as a\nstring.</p>\n<p>The second parameter, <code>value</code>, is the value to be stored. Values can have\nany type.</p>\n<p>Note: Sensitive data such as passwords or personal information shouldn't be\nstored in <code>localStorage</code>.</p>\n",
- "itemtype": "method",
- "name": "storeItem",
- "params": [
- {
- "name": "key",
- "description": "<p>name of the value.</p>\n",
- "type": "String"
+ ]
},
{
- "name": "value",
- "description": "<p>value to be stored.</p>\n",
- "type": "String|Number|Boolean|Object|Array"
+ "params": [],
+ "return": {
+ "description": "current frame rate.",
+ "type": "Number"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Store the player's name.\n storeItem('name', 'Feist');\n\n // Store the player's score.\n storeItem('score', 1234);\n\n describe('The text \"Feist: 1234\" written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Retrieve the name.\n let name = getItem('name');\n\n // Retrieve the score.\n let score = getItem('score');\n\n // Display the score.\n text(`${name}: ${score}`, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an object.\n let p = { x: 50, y: 50 };\n\n // Store the object.\n storeItem('position', p);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Retrieve the object.\n let p = getItem('position');\n\n // Draw the circle.\n circle(p.x, p.y, 30);\n}\n</code>\n</div>\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let c = color('deeppink');\n\n // Store the object.\n storeItem('color', c);\n\n describe('A pink circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Retrieve the object.\n let c = getItem('color');\n\n // Style the circle.\n fill(c);\n\n // Draw the circle.\n circle(50, 50, 30);\n}\n</code>\n</div>"
- ],
+ "return": {
+ "description": "current frame rate.",
+ "type": "Number"
+ },
"class": "p5",
- "module": "Data",
- "submodule": "LocalStorage"
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/data/local_storage.js",
- "line": 164,
- "description": "<p>Returns a value in the web browser's local storage.</p>\n<p>Web browsers can save small amounts of data using the built-in\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">localStorage object</a>.\nData stored in <code>localStorage</code> can be retrieved at any point, even after\nrefreshing a page or restarting the browser. Data are stored as key-value\npairs.</p>\n<p><a href=\"#/p5/storeItem\">storeItem()</a> makes it easy to store values in\n<code>localStorage</code> and <code>getItem()</code> makes it easy to retrieve them.</p>\n<p>The first parameter, <code>key</code>, is the name of the value to be stored as a\nstring.</p>\n<p>The second parameter, <code>value</code>, is the value to be retrieved a string. For\nexample, calling <code>getItem('size')</code> retrieves the value with the key <code>size</code>.</p>\n<p>Note: Sensitive data such as passwords or personal information shouldn't be\nstored in <code>localStorage</code>.</p>\n",
+ "name": "getTargetFrameRate",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 479,
"itemtype": "method",
- "name": "getItem",
- "params": [
+ "description": "<p>Returns the target frame rate.</p>\n<p>The value is either the system frame rate or the last value passed to\n<a href=\"#/p5/frameRate\">frameRate()</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The number 20 written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the frame rate to 20.\n frameRate(20);\n\n // Get the target frame rate and\n // display it.\n let fps = getTargetFrameRate();\n text(fps, 43, 54);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "key",
- "description": "<p>name of the value.</p>\n",
- "type": "String"
+ "params": [],
+ "return": {
+ "description": "_targetFrameRate",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "stored item.",
- "type": "String|Number|Boolean|Object|Array"
+ "description": "_targetFrameRate",
+ "type": "Number"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Store the player's name.\n storeItem('name', 'Feist');\n\n // Store the player's score.\n storeItem('score', 1234);\n\n describe('The text \"Feist: 1234\" written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Retrieve the name.\n let name = getItem('name');\n\n // Retrieve the score.\n let score = getItem('score');\n\n // Display the score.\n text(`${name}: ${score}`, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an object.\n let p = { x: 50, y: 50 };\n\n // Store the object.\n storeItem('position', p);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Retrieve the object.\n let p = getItem('position');\n\n // Draw the circle.\n circle(p.x, p.y, 30);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let c = color('deeppink');\n\n // Store the object.\n storeItem('color', c);\n\n describe('A pink circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Retrieve the object.\n let c = getItem('color');\n\n // Style the circle.\n fill(c);\n\n // Draw the circle.\n circle(50, 50, 30);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "LocalStorage"
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/data/local_storage.js",
- "line": 313,
- "description": "<p>Removes all items in the web browser's local storage.</p>\n<p>Web browsers can save small amounts of data using the built-in\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">localStorage object</a>.\nData stored in <code>localStorage</code> can be retrieved at any point, even after\nrefreshing a page or restarting the browser. Data are stored as key-value\npairs. Calling <code>clearStorage()</code> removes all data from <code>localStorage</code>.</p>\n<p>Note: Sensitive data such as passwords or personal information shouldn't be\nstored in <code>localStorage</code>.</p>\n",
+ "name": "noCursor",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 505,
"itemtype": "method",
- "name": "clearStorage",
+ "description": "Hides the cursor from view.",
"example": [
- "\n<div>\n<code>\n// Double-click to clear localStorage.\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Store the player's name.\n storeItem('name', 'Feist');\n\n // Store the player's score.\n storeItem('score', 1234);\n\n describe(\n 'The text \"Feist: 1234\" written in black on a gray background. The text \"null: null\" appears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Retrieve the name.\n let name = getItem('name');\n\n // Retrieve the score.\n let score = getItem('score');\n\n // Display the score.\n text(`${name}: ${score}`, 50, 50);\n}\n\n// Clear localStorage when the user double-clicks.\nfunction doubleClicked() {\n clearStorage();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n // Hide the cursor.\n noCursor();\n}\n\nfunction draw() {\n background(200);\n\n circle(mouseX, mouseY, 10);\n\n describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "LocalStorage"
- },
- {
- "file": "src/data/local_storage.js",
- "line": 380,
- "description": "<p>Removes an item from the web browser's local storage.</p>\n<p>Web browsers can save small amounts of data using the built-in\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">localStorage object</a>.\nData stored in <code>localStorage</code> can be retrieved at any point, even after\nrefreshing a page or restarting the browser. Data are stored as key-value\npairs.</p>\n<p><a href=\"#/p5/storeItem\">storeItem()</a> makes it easy to store values in\n<code>localStorage</code> and <code>removeItem()</code> makes it easy to delete them.</p>\n<p>The parameter, <code>key</code>, is the name of the value to remove as a string. For\nexample, calling <code>removeItem('size')</code> removes the item with the key <code>size</code>.</p>\n<p>Note: Sensitive data such as passwords or personal information shouldn't be\nstored in <code>localStorage</code>.</p>\n",
- "itemtype": "method",
- "name": "removeItem",
- "params": [
+ "overloads": [
{
- "name": "key",
- "description": "<p>name of the value to remove.</p>\n",
- "type": "String"
+ "params": []
}
],
- "example": [
- "\n<div>\n<code>\n// Double-click to remove an item from localStorage.\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Store the player's name.\n storeItem('name', 'Feist');\n\n // Store the player's score.\n storeItem('score', 1234);\n\n describe(\n 'The text \"Feist: 1234\" written in black on a gray background. The text \"Feist: null\" appears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Retrieve the name.\n let name = getItem('name');\n\n // Retrieve the score.\n let score = getItem('score');\n\n // Display the score.\n text(`${name}: ${score}`, 50, 50);\n}\n\n// Remove the word from localStorage when the user double-clicks.\nfunction doubleClicked() {\n removeItem('score');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "LocalStorage"
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 14,
- "description": "<p>Creates a new instance of p5.StringDict using the key-value pair\n or the object you provide.</p>\n",
+ "name": "windowResized",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 769,
"itemtype": "method",
- "name": "createStringDict",
- "return": {
- "description": "",
- "type": "p5.StringDict"
- },
+ "description": "<p>A function that's called when the browser window is resized.</p>\n<p>Code placed in the body of <code>windowResized()</code> will run when the\nbrowser window's size changes. It's a good place to call\n<a href=\"#/p5/resizeCanvas\">resizeCanvas()</a> or make other\nadjustments to accommodate the new window size.</p>\n<p>The <code>event</code> parameter is optional. If added to the function declaration, it\ncan be used for debugging or other purposes.</p>\n",
"example": [
- "\n <div class=\"norender\">\n <code>\n function setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // logs true to console\n let anotherDictionary = createStringDict({ happy: 'coding' });\n print(anotherDictionary.hasKey('happy')); // logs true to console\n }\n </code></div>"
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n\n describe('A gray canvas with a white circle at its center. The canvas takes up the entire browser window. It changes size to match the browser window.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a circle at the center.\n circle(width / 2, height / 2, 50);\n}\n\n// Resize the canvas when the\n// browser's size changes.\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "Dictionary",
+ "alt": "This example does not render anything.\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n}\n\nfunction draw() {\n background(200);\n\n describe('A gray canvas that takes up the entire browser window. It changes size to match the browser window.');\n}\n\nfunction windowResized(event) {\n // Resize the canvas when the\n // browser's size changes.\n resizeCanvas(windowWidth, windowHeight);\n\n // Print the resize event to the console for debugging.\n print(event);\n}\n</code>\n</div>\nThis example does not render anything.",
"overloads": [
{
- "line": 14,
"params": [
{
- "name": "key",
- "description": "",
- "type": "String"
- },
- {
- "name": "value",
- "description": "",
- "type": "String"
+ "name": "event",
+ "description": "optional resize Event.",
+ "optional": 1,
+ "type": "UIEvent"
}
- ],
- "return": {
- "description": "",
- "type": "p5.StringDict"
- }
- },
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
+ },
+ {
+ "name": "fullscreen",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 990,
+ "itemtype": "method",
+ "description": "<p>Toggles full-screen mode or returns the current mode.</p>\n<p>Calling <code>fullscreen(true)</code> makes the sketch full-screen. Calling\n<code>fullscreen(false)</code> makes the sketch its original size.</p>\n<p>Calling <code>fullscreen()</code> without an argument returns <code>true</code> if the sketch\nis in full-screen mode and <code>false</code> if not.</p>\n<p>Note: Due to browser restrictions, <code>fullscreen()</code> can only be called with\nuser input such as a mouse press.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n background(200);\n\n describe('A gray canvas that switches between default and full-screen display when clicked.');\n}\n\n// If the mouse is pressed,\n// toggle full-screen mode.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n let fs = fullscreen();\n fullscreen(!fs);\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 37,
"params": [
{
- "name": "object",
- "description": "<p>object</p>\n",
- "type": "Object"
+ "name": "val",
+ "description": "whether the sketch should be in fullscreen mode.",
+ "optional": 1,
+ "type": "Boolean"
}
],
"return": {
- "description": "",
- "type": "p5.StringDict"
+ "description": "current fullscreen state.",
+ "type": "Boolean"
}
}
- ]
+ ],
+ "return": {
+ "description": "current fullscreen state.",
+ "type": "Boolean"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 48,
- "description": "<p>Creates a new instance of <a href=\"#/p5.NumberDict\">p5.NumberDict</a> using the key-value pair\n or object you provide.</p>\n",
+ "name": "pixelDensity",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 1068,
"itemtype": "method",
- "name": "createNumberDict",
- "return": {
- "description": "",
- "type": "p5.NumberDict"
- },
+ "chainable": 1,
+ "description": "<p>Sets the pixel density or returns the current density.</p>\n<p>Computer displays are grids of little lights called <em>pixels</em>. A\ndisplay's <em>pixel density</em> describes how many pixels it packs into an\narea. Displays with smaller pixels have a higher pixel density and create\nsharper images.</p>\n<p><code>pixelDensity()</code> sets the pixel scaling for high pixel density displays.\nBy default, the pixel density is set to match the display's density.\nCalling <code>pixelDensity(1)</code> turn this off.</p>\n<p>Calling <code>pixelDensity()</code> without an argument returns the current pixel\ndensity.</p>\n",
"example": [
- "\n <div class=\"norender\">\n <code>\n function setup() {\n let myDictionary = createNumberDict(100, 42);\n print(myDictionary.hasKey(100)); // logs true to console\n let anotherDictionary = createNumberDict({ 200: 84 });\n print(anotherDictionary.hasKey(200)); // logs true to console\n }\n </code></div>"
+ "<div>\n<code>\nfunction setup() {\n // Set the pixel density to 1.\n pixelDensity(1);\n\n // Create a canvas and draw\n // a circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A fuzzy white circle on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Set the pixel density to 3.\n pixelDensity(3);\n\n // Create a canvas, paint the\n // background, and draw a\n // circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A sharp white circle on a gray canvas.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "Dictionary",
"overloads": [
{
- "line": 48,
"params": [
{
- "name": "key",
- "description": "",
- "type": "Number"
- },
- {
- "name": "value",
- "description": "",
+ "name": "val",
+ "description": "desired pixel density.",
+ "optional": 1,
"type": "Number"
}
- ],
- "return": {
- "description": "",
- "type": "p5.NumberDict"
- }
+ ]
},
{
- "line": 71,
- "params": [
- {
- "name": "object",
- "description": "<p>object</p>\n",
- "type": "Object"
- }
- ],
+ "params": [],
"return": {
- "description": "",
- "type": "p5.NumberDict"
+ "description": "current pixel density of the sketch.",
+ "type": "Number"
}
}
- ]
- },
- {
- "file": "src/data/p5.TypedDict.js",
- "line": 102,
- "description": "<p>Returns the number of key-value pairs currently stored in the Dictionary.</p>\n",
- "itemtype": "method",
- "name": "size",
+ ],
"return": {
- "description": "the number of key-value pairs in the Dictionary",
- "type": "Integer"
+ "description": "current pixel density of the sketch.",
+ "type": "Number"
},
- "example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n let myDictionary = createNumberDict(1, 10);\n myDictionary.create(2, 20);\n myDictionary.create(3, 30);\n print(myDictionary.size()); // logs 3 to the console\n}\n</code></div>"
- ],
- "class": "p5.TypedDict",
- "module": "Data",
- "submodule": "Dictionary"
+ "class": "p5",
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 123,
- "description": "<p>Returns true if the given key exists in the Dictionary,\notherwise returns false.</p>\n",
+ "name": "displayDensity",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 1120,
"itemtype": "method",
- "name": "hasKey",
- "params": [
+ "description": "Returns the display's current pixel density.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n // Set the pixel density to 1.\n pixelDensity(1);\n\n // Create a canvas and draw\n // a circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.');\n}\n\nfunction mousePressed() {\n // Get the current display density.\n let d = displayDensity();\n\n // Use the display density to set\n // the sketch's pixel density.\n pixelDensity(d);\n\n // Paint the background and\n // draw a circle.\n background(200);\n circle(50, 50, 70);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "key",
- "description": "<p>that you want to look up</p>\n",
- "type": "Number|String"
+ "params": [],
+ "return": {
+ "description": "current pixel density of the display.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "whether that key exists in Dictionary",
- "type": "Boolean"
+ "description": "current pixel density of the display.",
+ "type": "Number"
},
- "example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // logs true to console\n}\n</code></div>"
- ],
- "class": "p5.TypedDict",
- "module": "Data",
- "submodule": "Dictionary"
+ "class": "p5",
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 145,
- "description": "<p>Returns the value stored at the given key.</p>\n",
+ "name": "getURL",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 1178,
"itemtype": "method",
- "name": "get",
- "params": [
+ "description": "Returns the sketch's current\n<a href=\"https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL\" target=\"_blank\">URL</a>\nas a <code>String</code>.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n background(200);\n\n // Get the sketch's URL\n // and display it.\n let url = getURL();\n textWrap(CHAR);\n text(url, 0, 40, 100);\n\n describe('The URL \"https://p5js.org/reference/p5/getURL\" written in black on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "the",
- "description": "<p>key you want to access</p>\n",
- "type": "Number|String"
+ "params": [],
+ "return": {
+ "description": "url",
+ "type": "String"
+ }
}
],
"return": {
- "description": "the value stored at that key",
- "type": "Number|String"
+ "description": "url",
+ "type": "String"
},
- "example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n let myValue = myDictionary.get('p5');\n print(myValue === 'js'); // logs true to console\n}\n</code></div>"
- ],
- "class": "p5.TypedDict",
- "module": "Data",
- "submodule": "Dictionary"
+ "class": "p5",
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 171,
- "description": "<p>Updates the value associated with the given key in case it already exists\nin the Dictionary. Otherwise a new key-value pair is added.</p>\n",
+ "name": "getURLPath",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 1210,
"itemtype": "method",
- "name": "set",
- "params": [
- {
- "name": "key",
- "description": "",
- "type": "Number|String"
- },
+ "description": "<p>Returns the current\n<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>\npath as an <code>Array</code> of <code>String</code>s.</p>\n<p>For example, consider a sketch hosted at the URL\n<code>https://example.com/sketchbook</code>. Calling <code>getURLPath()</code> returns\n<code>['sketchbook']</code>. For a sketch hosted at the URL\n<code>https://example.com/sketchbook/monday</code>, <code>getURLPath()</code> returns\n<code>['sketchbook', 'monday']</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n background(200);\n\n // Get the sketch's URL path\n // and display the first\n // part.\n let path = getURLPath();\n text(path[0], 25, 54);\n\n describe('The word \"reference\" written in black on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "value",
- "description": "",
- "type": "Number|String"
+ "params": [],
+ "return": {
+ "description": "path components.",
+ "type": "String[]"
+ }
}
],
- "example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.set('p5', 'JS');\n myDictionary.print(); // logs \"key: p5 - value: JS\" to console\n}\n</code></div>"
- ],
- "class": "p5.TypedDict",
- "module": "Data",
- "submodule": "Dictionary"
- },
- {
- "file": "src/data/p5.TypedDict.js",
- "line": 198,
- "description": "<p>private helper function to handle the user passing in objects\nduring construction or calls to create()</p>\n",
- "class": "p5.TypedDict",
- "module": "Data",
- "submodule": "Dictionary"
+ "return": {
+ "description": "path components.",
+ "type": "String[]"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 209,
- "description": "<p>Creates a new key-value pair in the Dictionary.</p>\n",
+ "name": "getURLParams",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 1249,
"itemtype": "method",
- "name": "create",
+ "description": "<p>Returns the current\n<a href=\"https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters\" target=\"_blank\">URL parameters</a>\nin an <code>Object</code>.</p>\n<p>For example, calling <code>getURLParams()</code> in a sketch hosted at the URL\n<code>https://p5js.org?year=2014&month=May&day=15</code> returns\n<code>{ year: 2014, month: 'May', day: 15 }</code>.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n}\n</code></div>"
+ "<div class='norender notest'>\n<code>\n// Imagine this sketch is hosted at the following URL:\n// https://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n background(200);\n\n // Get the sketch's URL\n // parameters and display\n // them.\n let params = getURLParams();\n text(params.day, 10, 20);\n text(params.month, 10, 40);\n text(params.year, 10, 60);\n\n describe('The text \"15\", \"May\", and \"2014\" written in black on separate lines.');\n}\n</code>\n</div>"
],
- "class": "p5.TypedDict",
- "module": "Data",
- "submodule": "Dictionary",
+ "alt": "This example does not render anything.",
"overloads": [
{
- "line": 209,
- "params": [
- {
- "name": "key",
- "description": "",
- "type": "Number|String"
- },
- {
- "name": "value",
- "description": "",
- "type": "Number|String"
- }
- ]
- },
- {
- "line": 227,
- "params": [
- {
- "name": "obj",
- "description": "<p>key/value pair</p>\n",
- "type": "Object"
- }
- ]
+ "params": [],
+ "return": {
+ "description": "URL params",
+ "type": "Object"
+ }
}
- ]
+ ],
+ "return": {
+ "description": "URL params",
+ "type": "Object"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 245,
- "description": "<p>Removes all previously stored key-value pairs from the Dictionary.</p>\n",
+ "name": "worldToScreen",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 1384,
"itemtype": "method",
- "name": "clear",
+ "description": "<p>Converts 3D world coordinates to 2D screen coordinates.</p>\n<p>This function takes a 3D vector and converts its coordinates\nfrom the world space to screen space. This can be useful for placing\n2D elements in a 3D scene or for determining the screen position\nof 3D objects.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // prints 'true'\n myDictionary.clear();\n print(myDictionary.hasKey('p5')); // prints 'false'\n}\n</code>\n</div>"
+ "<div>\n<code>\n\nfunction setup() {\n createCanvas(150, 150);\n let vertices = [\n createVector(-20, -20),\n createVector(20, -20),\n createVector(20, 20),\n createVector(-20, 20)\n ];\n\n push();\n translate(75, 55);\n rotate(PI / 4);\n\n // Convert world coordinates to screen coordinates\n let screenPos = vertices.map(v => worldToScreen(v));\n pop();\n\n background(200);\n\n stroke(0);\n fill(100, 150, 255, 100);\n beginShape();\n screenPos.forEach(pos => vertex(pos.x, pos.y));\n endShape(CLOSE);\n\n screenPos.forEach((pos, i) => {\n fill(0);\n textSize(10);\n if (i === 0) {\n text(i + 1, pos.x + 3, pos.y - 7);\n } else if (i === 1) {\n text(i + 1, pos.x + 7, pos.y + 2);\n } else if (i === 2) {\n text(i + 1, pos.x - 2, pos.y + 12);\n } else if (i === 3) {\n text(i + 1, pos.x - 12, pos.y - 2);\n }\n });\n\n fill(0);\n noStroke();\n textSize(10);\n let legendY = height - 35;\n screenPos.forEach((pos, i) => {\n text(`Vertex ${i + 1}: (${pos.x.toFixed(1)}, ${pos.y.toFixed(1)})`, 5, legendY + i * 10);\n });\n\n describe('A rotating square is transformed and drawn using screen coordinates.');\n\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet vertices;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n vertices = [\n createVector(-25, -25, -25),\n createVector(25, -25, -25),\n createVector(25, 25, -25),\n createVector(-25, 25, -25),\n createVector(-25, -25, 25),\n createVector(25, -25, 25),\n createVector(25, 25, 25),\n createVector(-25, 25, 25)\n ];\n\n describe('A rotating cube with points mapped to 2D screen space and displayed as ellipses.');\n\n}\n\nfunction draw() {\n background(200);\n\n // Animate rotation\n let rotationX = millis() / 1000;\n let rotationY = millis() / 1200;\n\n push();\n\n rotateX(rotationX);\n rotateY(rotationY);\n\n // Convert world coordinates to screen coordinates\n let screenPos = vertices.map(v => worldToScreen(v));\n\n pop();\n\n screenPos.forEach((pos, i) => {\n\n let screenX = pos.x - width / 2;\n let screenY = pos.y - height / 2;\n fill(0);\n noStroke();\n ellipse(screenX, screenY, 3, 3);\n });\n}\n</code>\n</div>"
],
- "class": "p5.TypedDict",
- "module": "Data",
- "submodule": "Dictionary"
- },
- {
- "file": "src/data/p5.TypedDict.js",
- "line": 266,
- "description": "<p>Removes the key-value pair stored at the given key from the Dictionary.</p>\n",
- "itemtype": "method",
- "name": "remove",
- "params": [
+ "overloads": [
{
- "name": "key",
- "description": "<p>for the pair to remove</p>\n",
- "type": "Number|String"
+ "params": [
+ {
+ "name": "x",
+ "description": "The x coordinate in world space. (Or a vector for all three coordinates.)",
+ "type": "Number|p5.Vector"
+ },
+ {
+ "name": "y",
+ "description": "The y coordinate in world space.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "The z coordinate in world space.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "A vector containing the 2D screen coordinates.",
+ "type": "p5.Vector"
+ }
}
],
- "example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n myDictionary.remove('p5');\n myDictionary.print();\n // above logs \"key: happy value: coding\" to console\n}\n</code></div>"
- ],
- "class": "p5.TypedDict",
- "module": "Data",
- "submodule": "Dictionary"
+ "return": {
+ "description": "A vector containing the 2D screen coordinates.",
+ "type": "p5.Vector"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 295,
- "description": "<p>Logs the set of items currently stored in the Dictionary to the console.</p>\n",
+ "name": "screenToWorld",
+ "file": "src/scripts/parsers/in/p5.js/src/core/environment.js",
+ "line": 1437,
"itemtype": "method",
- "name": "print",
+ "description": "<p>Converts 2D screen coordinates to 3D world coordinates.</p>\n<p>This function takes a vector and converts its coordinates from coordinates\non the screen to coordinates in the currently drawn object. This can be\nuseful for determining the mouse position relative to a 2D or 3D object.</p>\n<p>If given, the Z component of the input coordinates is treated as \"depth\",\nor distance from the camera.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n}\n</code>\n</div>"
+ "<div>\n<code>\n\nfunction setup() {\n createCanvas(100, 100);\n describe('A rotating square with a line passing through the mouse drawn across it.');\n}\n\nfunction draw() {\n background(220);\n\n // Move to center and rotate\n translate(width/2, height/2);\n rotate(millis() / 1000);\n rect(-30, -30, 60);\n\n // Compute the location of the mouse in the coordinates of the square\n let localMouse = screenToWorld(createVector(mouseX, mouseY));\n\n // Draw a line parallel to the local Y axis, passing through the mouse\n line(localMouse.x, -30, localMouse.x, 30);\n}\n\n</code>\n</div>"
],
- "class": "p5.TypedDict",
- "module": "Data",
- "submodule": "Dictionary"
- },
- {
- "file": "src/data/p5.TypedDict.js",
- "line": 319,
- "description": "<p>Converts the Dictionary into a CSV file for local download.</p>\n",
- "itemtype": "method",
- "name": "saveTable",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n createStringDict({\n john: 1940,\n paul: 1942,\n george: 1943,\n ringo: 1940\n }).saveTable('beatles');\n }\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "The x coordinate in screen space. (Or a vector for all three coordinates.)",
+ "type": "Number|p5.Vector"
+ },
+ {
+ "name": "y",
+ "description": "The y coordinate in screen space.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "The z coordinate in screen space.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "A vector containing the 3D world space coordinates.",
+ "type": "p5.Vector"
+ }
+ }
],
- "class": "p5.TypedDict",
- "module": "Data",
- "submodule": "Dictionary"
+ "return": {
+ "description": "A vector containing the 3D world space coordinates.",
+ "type": "p5.Vector"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Environment",
+ "submodule": "Environment"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 357,
- "description": "<p>Converts the Dictionary into a JSON file for local download.</p>\n",
+ "name": "setup",
+ "file": "src/scripts/parsers/in/p5.js/src/core/main.js",
+ "line": 671,
"itemtype": "method",
- "name": "saveJSON",
+ "description": "<p>A function that's called once when the sketch begins running.</p>\n<p>Declaring the function <code>setup()</code> sets a code block to run once\nautomatically when the sketch starts running. It's used to perform\nsetup tasks such as creating the canvas and initializing variables:</p>\n<pre><code class=\"language-js\">function setup() {\n // Code to run once at the start of the sketch.\n}</code></pre><p>Code placed in <code>setup()</code> will run once before code placed in\n<a href=\"#/p5/draw\">draw()</a> begins looping. If the\n<a href=\"#/p5/preload\">preload()</a> is declared, then <code>setup()</code> will\nrun immediately after <a href=\"#/p5/preload\">preload()</a> finishes\nloading assets.</p>\n<p>Note: <code>setup()</code> doesn’t have to be declared, but it’s common practice to do so.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n createStringDict({\n john: 1940,\n paul: 1942,\n george: 1943,\n ringo: 1940\n }).saveJSON('beatles');\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe('A white circle on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Paint the background once.\n background(200);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'\n );\n}\n\nfunction draw() {\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe(\n 'A white circle on a brick wall. The circle follows the mouse as the user moves, leaving a trail.'\n );\n}\n\nfunction draw() {\n // Style the circle.\n noStroke();\n\n // Draw the circle.\n circle(mouseX, mouseY, 10);\n}\n</code>\n</div>"
],
- "class": "p5.TypedDict",
- "module": "Data",
- "submodule": "Dictionary"
- },
- {
- "file": "src/data/p5.TypedDict.js",
- "line": 388,
- "description": "<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n",
- "class": "p5.TypedDict",
- "module": "Data",
- "submodule": "Dictionary"
- },
- {
- "file": "src/data/p5.TypedDict.js",
- "line": 430,
- "description": "<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n",
- "class": "p5.NumberDict",
- "module": "Data",
- "submodule": "Dictionary"
- },
- {
- "file": "src/data/p5.TypedDict.js",
- "line": 439,
- "description": "<p>Add the given number to the value currently stored at the given key.\nThe sum then replaces the value previously stored in the Dictionary.</p>\n",
- "itemtype": "method",
- "name": "add",
- "params": [
- {
- "name": "Key",
- "description": "<p>for the value you wish to add to</p>\n",
- "type": "Number"
- },
+ "overloads": [
{
- "name": "Number",
- "description": "<p>to add to the value</p>\n",
- "type": "Number"
+ "params": []
}
],
- "example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n let myDictionary = createNumberDict(2, 5);\n myDictionary.add(2, 2);\n print(myDictionary.get(2)); // logs 7 to console.\n}\n</code></div>\n"
- ],
- "class": "p5.NumberDict",
- "module": "Data",
- "submodule": "Dictionary"
+ "class": "p5",
+ "static": false,
+ "module": "Structure",
+ "submodule": "Structure"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 466,
- "description": "<p>Subtract the given number from the value currently stored at the given key.\nThe difference then replaces the value previously stored in the Dictionary.</p>\n",
+ "name": "draw",
+ "file": "src/scripts/parsers/in/p5.js/src/core/main.js",
+ "line": 671,
"itemtype": "method",
- "name": "sub",
- "params": [
- {
- "name": "Key",
- "description": "<p>for the value you wish to subtract from</p>\n",
- "type": "Number"
- },
+ "description": "<p>A function that's called repeatedly while the sketch runs.</p>\n<p>Declaring the function <code>draw()</code> sets a code block to run repeatedly\nonce the sketch starts. It’s used to create animations and respond to\nuser inputs:</p>\n<pre><code class=\"language-js\">function draw() {\n // Code to run repeatedly.\n}</code></pre><p>This is often called the \"draw loop\" because p5.js calls the code in\n<code>draw()</code> in a loop behind the scenes. By default, <code>draw()</code> tries to run\n60 times per second. The actual rate depends on many factors. The\ndrawing rate, called the \"frame rate\", can be controlled by calling\n<a href=\"#/p5/frameRate\">frameRate()</a>. The number of times <code>draw()</code>\nhas run is stored in the system variable\n<a href=\"#/p5/frameCount\">frameCount()</a>.</p>\n<p>Code placed within <code>draw()</code> begins looping after\n<a href=\"#/p5/setup\">setup()</a> runs. <code>draw()</code> will run until the user\ncloses the sketch. <code>draw()</code> can be stopped by calling the\n<a href=\"#/p5/noLoop\">noLoop()</a> function. <code>draw()</code> can be resumed by\ncalling the <a href=\"#/p5/loop\">loop()</a> function.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Paint the background once.\n background(200);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'\n );\n}\n\nfunction draw() {\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click the canvas to change the circle's color.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves. The circle changes color to pink when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n\n// Change the fill color when the user double-clicks.\nfunction doubleClicked() {\n fill('deeppink');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "Number",
- "description": "<p>to subtract from the value</p>\n",
- "type": "Number"
+ "params": []
}
],
- "example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n let myDictionary = createNumberDict(2, 5);\n myDictionary.sub(2, 2);\n print(myDictionary.get(2)); // logs 3 to console.\n}\n</code></div>\n"
- ],
- "class": "p5.NumberDict",
- "module": "Data",
- "submodule": "Dictionary"
+ "class": "p5",
+ "static": false,
+ "module": "Structure",
+ "submodule": "Structure"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 489,
- "description": "<p>Multiply the given number with the value currently stored at the given key.\nThe product then replaces the value previously stored in the Dictionary.</p>\n",
+ "name": "createCanvas",
+ "file": "src/scripts/parsers/in/p5.js/src/core/rendering.js",
+ "line": 126,
"itemtype": "method",
- "name": "mult",
- "params": [
+ "description": "<p>Creates a canvas element on the web page.</p>\n<p><code>createCanvas()</code> creates the main drawing canvas for a sketch. It should\nonly be called once at the beginning of <a href=\"#/p5/setup\">setup()</a>.\nCalling <code>createCanvas()</code> more than once causes unpredictable behavior.</p>\n<p>The first two parameters, <code>width</code> and <code>height</code>, are optional. They set the\ndimensions of the canvas and the values of the\n<a href=\"#/p5/width\">width</a> and <a href=\"#/p5/height\">height</a> system\nvariables. For example, calling <code>createCanvas(900, 500)</code> creates a canvas\nthat's 900×500 pixels. By default, <code>width</code> and <code>height</code> are both 100.</p>\n<p>The third parameter is also optional. If either of the constants <code>P2D</code> or\n<code>WEBGL</code> is passed, as in <code>createCanvas(900, 500, WEBGL)</code>, then it will set\nthe sketch's rendering mode. If an existing\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement\" target=\"_blank\">HTMLCanvasElement</a>\nis passed, as in <code>createCanvas(900, 500, myCanvas)</code>, then it will be used\nby the sketch.</p>\n<p>The fourth parameter is also optional. If an existing\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement\" target=\"_blank\">HTMLCanvasElement</a>\nis passed, as in <code>createCanvas(900, 500, WEBGL, myCanvas)</code>, then it will be\nused by the sketch.</p>\n<p>Note: In WebGL mode, the canvas will use a WebGL2 context if it's supported\nby the browser. Check the <a href=\"#/p5/webglVersion\">webglVersion</a>\nsystem variable to check what version is being used, or call\n<code>setAttributes({ version: 1 })</code> to create a WebGL1 context.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a diagonal line.\n line(0, 0, width, height);\n\n describe('A diagonal line drawn from top-left to bottom-right on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 50);\n\n background(200);\n\n // Draw a diagonal line.\n line(0, 0, width, height);\n\n describe('A diagonal line drawn from top-left to bottom-right on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Use WebGL mode.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Draw a diagonal line.\n line(-width / 2, -height / 2, width / 2, height / 2);\n\n describe('A diagonal line drawn from top-left to bottom-right on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Create a p5.Render object.\n let cnv = createCanvas(50, 50);\n\n // Position the canvas.\n cnv.position(10, 20);\n\n background(200);\n\n // Draw a diagonal line.\n line(0, 0, width, height);\n\n describe('A diagonal line drawn from top-left to bottom-right on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "Key",
- "description": "<p>for value you wish to multiply</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "width",
+ "description": "width of the canvas. Defaults to 100.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "height of the canvas. Defaults to 100.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "renderer",
+ "description": "either P2D or WEBGL. Defaults to <code>P2D</code>.",
+ "optional": 1,
+ "type": "P2D|WEBGL|P2DHDR"
+ },
+ {
+ "name": "canvas",
+ "description": "existing canvas element that should be used for the sketch.",
+ "optional": 1,
+ "type": "HTMLCanvasElement"
+ }
+ ],
+ "return": {
+ "description": "new <code>p5.Renderer</code> that holds the canvas.",
+ "type": "p5.Renderer"
+ }
},
{
- "name": "Amount",
- "description": "<p>to multiply the value by</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "width",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "canvas",
+ "optional": 1,
+ "type": "HTMLCanvasElement"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "p5.Renderer"
+ }
}
],
- "example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n let myDictionary = createNumberDict(2, 4);\n myDictionary.mult(2, 2);\n print(myDictionary.get(2)); // logs 8 to console.\n}\n</code></div>\n"
- ],
- "class": "p5.NumberDict",
- "module": "Data",
- "submodule": "Dictionary"
+ "return": {
+ "description": "new <code>p5.Renderer</code> that holds the canvas.",
+ "type": "p5.Renderer"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Rendering",
+ "submodule": "Rendering"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 516,
- "description": "<p>Divide the given number with the value currently stored at the given key.\nThe quotient then replaces the value previously stored in the Dictionary.</p>\n",
+ "name": "resizeCanvas",
+ "file": "src/scripts/parsers/in/p5.js/src/core/rendering.js",
+ "line": 242,
"itemtype": "method",
- "name": "div",
- "params": [
- {
- "name": "Key",
- "description": "<p>for value you wish to divide</p>\n",
- "type": "Number"
- },
+ "description": "<p>Resizes the canvas to a given width and height.</p>\n<p><code>resizeCanvas()</code> immediately clears the canvas and calls\n<a href=\"#/p5/redraw\">redraw()</a>. It's common to call <code>resizeCanvas()</code>\nwithin the body of <a href=\"#/p5/windowResized\">windowResized()</a> like\nso:</p>\n<pre><code class=\"language-js\">function windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}</code></pre><p>The first two parameters, <code>width</code> and <code>height</code>, set the dimensions of the\ncanvas. They also the values of the <a href=\"#/p5/width\">width</a> and\n<a href=\"#/p5/height\">height</a> system variables. For example, calling\n<code>resizeCanvas(300, 500)</code> resizes the canvas to 300×500 pixels, then sets\n<a href=\"#/p5/width\">width</a> to 300 and\n<a href=\"#/p5/height\">height</a> 500.</p>\n<p>The third parameter, <code>noRedraw</code>, is optional. If <code>true</code> is passed, as in\n<code>resizeCanvas(300, 500, true)</code>, then the canvas will be canvas to 300×500\npixels but the <a href=\"#/p5/redraw\">redraw()</a> function won't be called\nimmediately. By default, <a href=\"#/p5/redraw\">redraw()</a> is called\nimmediately when <code>resizeCanvas()</code> finishes executing.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to resize the canvas.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle drawn on a gray background. The canvas shrinks by half the first time the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a circle at the center of the canvas.\n circle(width / 2, height / 2, 20);\n}\n\n// Resize the canvas when the user double-clicks.\nfunction doubleClicked() {\n resizeCanvas(50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Resize the web browser to change the canvas size.\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n\n describe('A white circle drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a circle at the center of the canvas.\n circle(width / 2, height / 2, 20);\n}\n\n// Always resize the canvas to fill the browser window.\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "Amount",
- "description": "<p>to divide the value by</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "width",
+ "description": "width of the canvas.",
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "height of the canvas.",
+ "type": "Number"
+ },
+ {
+ "name": "noRedraw",
+ "description": "whether to delay calling\n<a href=\"#/p5/redraw\">redraw()</a>. Defaults\nto <code>false</code>.",
+ "optional": 1,
+ "type": "Boolean"
+ }
+ ]
}
],
- "example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n let myDictionary = createNumberDict(2, 8);\n myDictionary.div(2, 2);\n print(myDictionary.get(2)); // logs 4 to console.\n}\n</code></div>\n"
- ],
- "class": "p5.NumberDict",
- "module": "Data",
- "submodule": "Dictionary"
- },
- {
- "file": "src/data/p5.TypedDict.js",
- "line": 543,
- "description": "<p>private helper function for finding lowest or highest value\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'</p>\n",
- "class": "p5.NumberDict",
- "module": "Data",
- "submodule": "Dictionary"
+ "class": "p5",
+ "static": false,
+ "module": "Rendering",
+ "submodule": "Rendering"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 567,
- "description": "<p>Return the lowest number currently stored in the Dictionary.</p>\n",
+ "name": "noCanvas",
+ "file": "src/scripts/parsers/in/p5.js/src/core/rendering.js",
+ "line": 277,
"itemtype": "method",
- "name": "minValue",
- "return": {
- "description": "",
- "type": "Number"
- },
+ "description": "<p>Removes the default canvas.</p>\n<p>By default, a 100×100 pixels canvas is created without needing to call\n<a href=\"#/p5/createCanvas\">createCanvas()</a>. <code>noCanvas()</code> removes the\ndefault canvas for sketches that don't need it.</p>\n",
"example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n let lowestValue = myDictionary.minValue(); // value is -10\n print(lowestValue);\n}\n</code></div>"
+ "<div>\n<code>\nfunction setup() {\n noCanvas();\n}\n</code>\n</div>"
],
- "class": "p5.NumberDict",
- "module": "Data",
- "submodule": "Dictionary"
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Rendering",
+ "submodule": "Rendering"
},
{
- "file": "src/data/p5.TypedDict.js",
- "line": 587,
- "description": "<p>Return the highest number currently stored in the Dictionary.</p>\n",
+ "name": "createGraphics",
+ "file": "src/scripts/parsers/in/p5.js/src/core/rendering.js",
+ "line": 395,
"itemtype": "method",
- "name": "maxValue",
- "return": {
- "description": "",
- "type": "Number"
- },
+ "description": "<p>Creates a <a href=\"#/p5.Graphics\">p5.Graphics</a> object.</p>\n<p><code>createGraphics()</code> creates an offscreen drawing canvas (graphics buffer)\nand returns it as a <a href=\"#/p5.Graphics\">p5.Graphics</a> object. Drawing\nto a separate graphics buffer can be helpful for performance and for\norganizing code.</p>\n<p>The first two parameters, <code>width</code> and <code>height</code>, are optional. They set the\ndimensions of the <a href=\"#/p5.Graphics\">p5.Graphics</a> object. For\nexample, calling <code>createGraphics(900, 500)</code> creates a graphics buffer\nthat's 900×500 pixels.</p>\n<p>The third parameter is also optional. If either of the constants <code>P2D</code> or\n<code>WEBGL</code> is passed, as in <code>createGraphics(900, 500, WEBGL)</code>, then it will set\nthe <a href=\"#/p5.Graphics\">p5.Graphics</a> object's rendering mode. If an\nexisting\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement\" target=\"_blank\">HTMLCanvasElement</a>\nis passed, as in <code>createGraphics(900, 500, myCanvas)</code>, then it will be used\nby the graphics buffer.</p>\n<p>The fourth parameter is also optional. If an existing\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement\" target=\"_blank\">HTMLCanvasElement</a>\nis passed, as in <code>createGraphics(900, 500, WEBGL, myCanvas)</code>, then it will be\nused by the graphics buffer.</p>\n<p>Note: In WebGL mode, the <a href=\"#/p5.Graphics\">p5.Graphics</a> object\nwill use a WebGL2 context if it's supported by the browser. Check the\n<a href=\"#/p5/webglVersion\">webglVersion</a> system variable to check what\nversion is being used, or call <code>setAttributes({ version: 1 })</code> to create a\nWebGL1 context.</p>\n",
"example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n let highestValue = myDictionary.maxValue(); // value is 3\n print(highestValue);\n}\n</code></div>"
+ "<div>\n<code>\n// Double-click to draw the contents of the graphics buffer.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the p5.Graphics object.\n pg = createGraphics(50, 50);\n\n // Draw to the graphics buffer.\n pg.background(100);\n pg.circle(pg.width / 2, pg.height / 2, 20);\n\n describe('A gray square. A smaller, darker square with a white circle at its center appears when the user double-clicks.');\n}\n\n// Display the graphics buffer when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n image(pg, 25, 25);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to draw the contents of the graphics buffer.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the p5.Graphics object in WebGL mode.\n pg = createGraphics(50, 50, WEBGL);\n\n // Draw to the graphics buffer.\n pg.background(100);\n pg.lights();\n pg.noStroke();\n pg.rotateX(QUARTER_PI);\n pg.rotateY(QUARTER_PI);\n pg.torus(15, 5);\n\n describe('A gray square. A smaller, darker square with a white torus at its center appears when the user double-clicks.');\n}\n\n// Display the graphics buffer when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n image(pg, 25, 25);\n }\n}\n</code>\n</div>"
],
- "class": "p5.NumberDict",
- "module": "Data",
- "submodule": "Dictionary"
- },
- {
- "file": "src/data/p5.TypedDict.js",
- "line": 607,
- "description": "<p>private helper function for finding lowest or highest key\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'</p>\n",
- "class": "p5.NumberDict",
- "module": "Data",
- "submodule": "Dictionary"
- },
- {
- "file": "src/data/p5.TypedDict.js",
- "line": 629,
- "description": "<p>Return the lowest key currently used in the Dictionary.</p>\n",
- "itemtype": "method",
- "name": "minKey",
- "return": {
- "description": "",
- "type": "Number"
- },
- "example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n let lowestKey = myDictionary.minKey(); // value is 1.2\n print(lowestKey);\n}\n</code></div>"
- ],
- "class": "p5.NumberDict",
- "module": "Data",
- "submodule": "Dictionary"
- },
- {
- "file": "src/data/p5.TypedDict.js",
- "line": 649,
- "description": "<p>Return the highest key currently used in the Dictionary.</p>\n",
- "itemtype": "method",
- "name": "maxKey",
- "return": {
- "description": "",
- "type": "Number"
- },
- "example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n let highestKey = myDictionary.maxKey(); // value is 4\n print(highestKey);\n}\n</code></div>"
- ],
- "class": "p5.NumberDict",
- "module": "Data",
- "submodule": "Dictionary"
- },
- {
- "file": "src/dom/dom.js",
- "line": 21,
- "description": "<p>Searches the page for the first element that matches the given\n<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>.</p>\n<p>The selector string can be an ID, class, tag name, or a combination.\n<code>select()</code> returns a <a href=\"#/p5.Element\">p5.Element</a> object if it\nfinds a match and <code>null</code> if not.</p>\n<p>The second parameter, <code>container</code>, is optional. It specifies a container to\nsearch within. <code>container</code> can be CSS selector string, a\n<a href=\"#/p5.Element\">p5.Element</a> object, or an\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement\" target=\"_blank\">HTMLElement</a> object.</p>\n",
- "itemtype": "method",
- "name": "select",
- "params": [
+ "overloads": [
{
- "name": "selectors",
- "description": "<p>CSS selector string of element to search for.</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "width",
+ "description": "width of the graphics buffer.",
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "height of the graphics buffer.",
+ "type": "Number"
+ },
+ {
+ "name": "renderer",
+ "description": "either P2D or WEBGL. Defaults to P2D.",
+ "optional": 1,
+ "type": "P2D|WEBGL"
+ },
+ {
+ "name": "canvas",
+ "description": "existing canvas element that should be\nused for the graphics buffer..",
+ "optional": 1,
+ "type": "HTMLCanvasElement"
+ }
+ ],
+ "return": {
+ "description": "new graphics buffer.",
+ "type": "p5.Graphics"
+ }
},
{
- "name": "container",
- "description": "<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>, or\n <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement\" target=\"_blank\">HTMLElement</a> to search within.</p>\n",
- "type": "String|p5.Element|HTMLElement",
- "optional": true
+ "params": [
+ {
+ "name": "width",
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "type": "Number"
+ },
+ {
+ "name": "canvas",
+ "optional": 1,
+ "type": "HTMLCanvasElement"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "p5.Graphics"
+ }
}
],
"return": {
- "description": "<a href=\"#/p5.Element\">p5.Element</a> containing the element.",
- "type": "p5.Element|null"
+ "description": "new graphics buffer.",
+ "type": "p5.Graphics"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n\n // Select the canvas by its tag.\n let cnv = select('canvas');\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n // Add a class attribute to the canvas.\n cnv.class('pinkborder');\n\n background(200);\n\n // Select the canvas by its class.\n cnv = select('.pinkborder');\n\n // Style its border.\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n // Set the canvas' ID.\n cnv.id('mycanvas');\n\n background(200);\n\n // Select the canvas by its ID.\n cnv = select('#mycanvas');\n\n // Style its border.\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Rendering",
+ "submodule": "Rendering"
},
{
- "file": "src/dom/dom.js",
- "line": 109,
- "description": "<p>Searches the page for all elements that matches the given\n<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>.</p>\n<p>The selector string can be an ID, class, tag name, or a combination.\n<code>selectAll()</code> returns an array of <a href=\"#/p5.Element\">p5.Element</a>\nobjects if it finds any matches and an empty array if none are found.</p>\n<p>The second parameter, <code>container</code>, is optional. It specifies a container to\nsearch within. <code>container</code> can be CSS selector string, a\n<a href=\"#/p5.Element\">p5.Element</a> object, or an\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement\" target=\"_blank\">HTMLElement</a> object.</p>\n",
+ "name": "createFramebuffer",
+ "file": "src/scripts/parsers/in/p5.js/src/core/rendering.js",
+ "line": 544,
"itemtype": "method",
- "name": "selectAll",
- "params": [
- {
- "name": "selectors",
- "description": "<p>CSS selector string of element to search for.</p>\n",
- "type": "String"
- },
+ "description": "<p>Creates and a new <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object.</p>\n<p><a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> objects are separate drawing\nsurfaces that can be used as textures in WebGL mode. They're similar to\n<a href=\"#/p5.Graphics\">p5.Graphics</a> objects and generally run much\nfaster when used as textures.</p>\n<p>The parameter, <code>options</code>, is optional. An object can be passed to configure\nthe <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. The available\nproperties are:</p>\n<ul><li><code>format</code>: data format of the texture, either <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or <code>HALF_FLOAT</code>. Default is <code>UNSIGNED_BYTE</code>.</li><li><code>channels</code>: whether to store <code>RGB</code> or <code>RGBA</code> color channels. Default is to match the main canvas which is <code>RGBA</code>.</li><li><code>depth</code>: whether to include a depth buffer. Default is <code>true</code>.</li><li><code>depthFormat</code>: data format of depth information, either <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is <code>FLOAT</code>.</li><li><code>stencil</code>: whether to include a stencil buffer for masking. <code>depth</code> must be <code>true</code> for this feature to work. Defaults to the value of <code>depth</code> which is <code>true</code>.</li><li><code>antialias</code>: whether to perform anti-aliasing. If set to <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will be used by default. The number of samples can also be set, as in <code>{ antialias: 4 }</code>. Default is to match <a href=\"#/p5/setAttributes\">setAttributes()</a> which is <code>false</code> (<code>true</code> in Safari).</li><li><code>width</code>: width of the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Default is to always match the main canvas width.</li><li><code>height</code>: height of the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Default is to always match the main canvas height.</li><li><code>density</code>: pixel density of the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Default is to always match the main canvas pixel density.</li><li><code>textureFiltering</code>: how to read values from the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Either <code>LINEAR</code> (nearby pixels will be interpolated) or <code>NEAREST</code> (no interpolation). Generally, use <code>LINEAR</code> when using the texture as an image and <code>NEAREST</code> if reading the texture as data. Default is <code>LINEAR</code>.</li></ul><p>If the <code>width</code>, <code>height</code>, or <code>density</code> attributes are set, they won't automatically match the main canvas and must be changed manually.</p>\n<p>Note: <code>createFramebuffer()</code> can only be used in WebGL mode.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('A grid of white toruses rotating against a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n // Clear the drawing surface.\n clear();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Style the torus.\n noStroke();\n\n // Draw the torus.\n torus(20);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, x, y, 25, 25);\n }\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create an options object.\n let options = { width: 25, height: 25 };\n\n // Create a p5.Framebuffer object.\n // Use options for configuration.\n myBuffer = createFramebuffer(options);\n\n describe('A grid of white toruses rotating against a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n // Clear the drawing surface.\n clear();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Style the torus.\n noStroke();\n\n // Draw the torus.\n torus(5, 2.5);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, x, y);\n }\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "container",
- "description": "<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>, or\n <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement\" target=\"_blank\">HTMLElement</a> to search within.</p>\n",
- "type": "String|p5.Element|HTMLElement",
- "optional": true
+ "params": [
+ {
+ "name": "options",
+ "description": "configuration options.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ],
+ "return": {
+ "description": "new framebuffer.",
+ "type": "p5.Framebuffer"
+ }
}
],
"return": {
- "description": "array of <a href=\"#/p5.Element\">p5.Element</a>s containing any elements found.",
- "type": "p5.Element[]"
+ "description": "new framebuffer.",
+ "type": "p5.Framebuffer"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create three buttons.\n createButton('1');\n createButton('2');\n createButton('3');\n\n // Select the buttons by their tag.\n let buttons = selectAll('button');\n\n // Position the buttons.\n for (let i = 0; i < 3; i += 1) {\n buttons[i].position(0, i * 30);\n }\n\n describe('Three buttons stacked vertically. The buttons are labeled, \"1\", \"2\", and \"3\".');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Create three buttons and position them.\n let b1 = createButton('1');\n b1.position(0, 0);\n let b2 = createButton('2');\n b2.position(0, 30);\n let b3 = createButton('3');\n b3.position(0, 60);\n\n // Add a class attribute to each button.\n b1.class('btn');\n b2.class('btn btn-pink');\n b3.class('btn');\n\n // Select the buttons by their class.\n let buttons = selectAll('.btn');\n let pinkButtons = selectAll('.btn-pink');\n\n // Style the selected buttons.\n buttons.forEach(setFont);\n pinkButtons.forEach(setColor);\n\n describe('Three buttons stacked vertically. The buttons are labeled, \"1\", \"2\", and \"3\". Buttons \"1\" and \"3\" are gray. Button \"2\" is pink.');\n}\n\n// Set a button's font to Comic Sans MS.\nfunction setFont(btn) {\n btn.style('font-family', 'Comic Sans MS');\n}\n\n// Set a button's background and font color.\nfunction setColor(btn) {\n btn.style('background', 'deeppink');\n btn.style('color', 'white');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 206,
- "description": "<p>Helper function for select and selectAll</p>\n",
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 221,
- "description": "<p>Helper function for getElement and getElements.</p>\n",
- "class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Rendering",
+ "submodule": "Rendering"
},
{
- "file": "src/dom/dom.js",
- "line": 256,
- "description": "<p>Removes all elements created by p5.js, including any event handlers.</p>\n<p>There are two exceptions:\ncanvas elements created by <a href=\"#/p5/createCanvas\">createCanvas()</a>\nand <a href=\"#/p5.Renderer\">p5.Render</a> objects created by\n<a href=\"#/p5/createGraphics\">createGraphics()</a>.</p>\n",
+ "name": "clearDepth",
+ "file": "src/scripts/parsers/in/p5.js/src/core/rendering.js",
+ "line": 628,
"itemtype": "method",
- "name": "removeElements",
+ "description": "<p>Clears the depth buffer in WebGL mode.</p>\n<p><code>clearDepth()</code> clears information about how far objects are from the camera\nin 3D space. This information is stored in an object called the\ndepth buffer. Clearing the depth buffer ensures new objects aren't drawn\nbehind old ones. Doing so can be useful for feedback effects in which the\nprevious frame serves as the background for the current frame.</p>\n<p>The parameter, <code>depth</code>, is optional. If a number is passed, as in\n<code>clearDepth(0.5)</code>, it determines the range of objects to clear from the\ndepth buffer. 0 doesn't clear any depth information, 0.5 clears depth\ninformation halfway between the near and far clipping planes, and 1 clears\ndepth information all the way to the far clipping plane. By default,\n<code>depth</code> is 1.</p>\n<p>Note: <code>clearDepth()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and place\n // it in the middle of the canvas.\n let p = createP('p5*js');\n p.position(25, 25);\n\n describe('A gray square with the text \"p5*js\" written in its center. The text disappears when the mouse is pressed.');\n}\n\n// Remove all elements when the mouse is pressed.\nfunction mousePressed() {\n removeElements();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a paragraph element and place\n // it at the top of the canvas.\n let p = createP('p5*js');\n p.position(25, 25);\n\n // Create a slider element and place it\n // beneath the canvas.\n slider = createSlider(0, 255, 200);\n slider.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n // Use the slider value to change the background color.\n let g = slider.value();\n background(g);\n}\n\n// Remove all elements when the mouse is double-clicked.\nfunction doubleClicked() {\n removeElements();\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet previous;\nlet current;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Framebuffer objects.\n previous = createFramebuffer({ format: FLOAT });\n current = createFramebuffer({ format: FLOAT });\n\n describe(\n 'A multicolor box drifts from side to side on a white background. It leaves a trail that fades over time.'\n );\n}\n\nfunction draw() {\n // Swap the previous p5.Framebuffer and the\n // current one so it can be used as a texture.\n [previous, current] = [current, previous];\n\n // Start drawing to the current p5.Framebuffer.\n current.begin();\n\n // Paint the background.\n background(255);\n\n // Draw the previous p5.Framebuffer.\n // Clear the depth buffer so the previous\n // frame doesn't block the current one.\n push();\n tint(255, 250);\n image(previous, -50, -50);\n clearDepth();\n pop();\n\n // Draw the box on top of the previous frame.\n push();\n let x = 25 * sin(frameCount * 0.01);\n let y = 25 * sin(frameCount * 0.02);\n translate(x, y, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n normalMaterial();\n box(12);\n pop();\n\n // Stop drawing to the current p5.Framebuffer.\n current.end();\n\n // Display the current p5.Framebuffer.\n image(current, -50, -50);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 330,
- "description": "<p>Calls a function when the element changes.</p>\n<p>Calling <code>myElement.changed(false)</code> disables the function.</p>\n",
- "itemtype": "method",
- "name": "changed",
- "params": [
+ "overloads": [
{
- "name": "fxn",
- "description": "<p>function to call when the element changes.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
+ "params": [
+ {
+ "name": "depth",
+ "description": "amount of the depth buffer to clear between 0\n(none) and 1 (far clipping plane). Defaults to 1.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nlet dropdown;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a dropdown menu and add a few color options.\n dropdown = createSelect();\n dropdown.position(0, 0);\n dropdown.option('red');\n dropdown.option('green');\n dropdown.option('blue');\n\n // Call paintBackground() when the color option changes.\n dropdown.changed(paintBackground);\n\n describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');\n}\n\n// Paint the background with the selected color.\nfunction paintBackground() {\n let c = dropdown.value();\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a checkbox and place it beneath the canvas.\n checkbox = createCheckbox(' circle');\n checkbox.position(0, 100);\n\n // Call repaint() when the checkbox changes.\n checkbox.changed(repaint);\n\n describe('A gray square with a checkbox underneath it that says \"circle\". A white circle appears when the box is checked and disappears otherwise.');\n}\n\n// Paint the background gray and determine whether to draw a circle.\nfunction repaint() {\n background(200);\n if (checkbox.checked() === true) {\n circle(50, 50, 30);\n }\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Rendering",
+ "submodule": "Rendering"
},
{
- "file": "src/dom/dom.js",
- "line": 405,
- "description": "<p>Calls a function when the element receives input.</p>\n<p><code>myElement.input()</code> is often used to with text inputs and sliders. Calling\n<code>myElement.input(false)</code> disables the function.</p>\n",
+ "name": "noLoop",
+ "file": "src/scripts/parsers/in/p5.js/src/core/structure.js",
+ "line": 123,
"itemtype": "method",
- "name": "input",
- "params": [
+ "description": "<p>Stops the code in <a href=\"#/p5/draw\">draw()</a> from running repeatedly.</p>\n<p>By default, <a href=\"#/p5/draw\">draw()</a> tries to run 60 times per\nsecond. Calling <code>noLoop()</code> stops <a href=\"#/p5/draw\">draw()</a> from\nrepeating. The draw loop can be restarted by calling\n<a href=\"#/p5/loop\">loop()</a>. <a href=\"#/p5/draw\">draw()</a> can be run\nonce by calling <a href=\"#/p5/redraw\">redraw()</a>.</p>\n<p>The <a href=\"#/p5/isLooping\">isLooping()</a> function can be used to check\nwhether a sketch is looping, as in <code>isLooping() === true</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Turn off the draw loop.\n noLoop();\n\n describe('A white half-circle on the left edge of a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's x-coordinate.\n let x = frameCount;\n\n // Draw the circle.\n // Normally, the circle would move from left to right.\n circle(x, 50, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to stop the draw loop.\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A white circle moves randomly on a gray background. It stops moving when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the circle.\n // Normally, the circle would move from left to right.\n circle(x, y, 20);\n}\n\n// Stop the draw loop when the user double-clicks.\nfunction doubleClicked() {\n noLoop();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet startButton;\nlet stopButton;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the button elements and place them\n // beneath the canvas.\n startButton = createButton('▶');\n startButton.position(0, 100);\n startButton.size(50, 20);\n stopButton = createButton('◾');\n stopButton.position(50, 100);\n stopButton.size(50, 20);\n\n // Set functions to call when the buttons are pressed.\n startButton.mousePressed(loop);\n stopButton.mousePressed(noLoop);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe(\n 'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the circle.\n // Normally, the circle would move from left to right.\n circle(x, y, 20);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "fxn",
- "description": "<p>function to call when input is detected within\n the element.\n <code>false</code> disables the function.</p>\n",
- "type": "Function|Boolean"
+ "params": []
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a slider and place it beneath the canvas.\n slider = createSlider(0, 255, 200);\n slider.position(0, 100);\n\n // Call repaint() when the slider changes.\n slider.input(repaint);\n\n describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');\n}\n\n// Paint the background using slider's value.\nfunction repaint() {\n let g = slider.value();\n background(g);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an input and place it beneath the canvas.\n input = createInput('');\n input.position(0, 100);\n\n // Call repaint() when input is detected.\n input.input(repaint);\n\n describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');\n}\n\n// Paint the background gray and display the input's value.\nfunction repaint() {\n background(200);\n let msg = input.value();\n text(msg, 5, 50);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 478,
- "description": "<p>Helpers for create methods.</p>\n",
- "class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Structure",
+ "submodule": "Structure"
},
{
- "file": "src/dom/dom.js",
- "line": 491,
- "description": "<p>Creates a <code><div></div></code> element.</p>\n<p><code><div></div></code> elements are commonly used as containers for\nother elements.</p>\n<p>The parameter <code>html</code> is optional. It accepts a string that sets the\ninner HTML of the new <code><div></div></code>.</p>\n",
+ "name": "loop",
+ "file": "src/scripts/parsers/in/p5.js/src/core/structure.js",
+ "line": 215,
"itemtype": "method",
- "name": "createDiv",
- "params": [
+ "description": "<p>Resumes the draw loop after <a href=\"#/p5/noLoop\">noLoop()</a> has been\ncalled.</p>\n<p>By default, <a href=\"#/p5/draw\">draw()</a> tries to run 60 times per\nsecond. Calling <a href=\"#/p5/noLoop\">noLoop()</a> stops\n<a href=\"#/p5/draw\">draw()</a> from repeating. The draw loop can be\nrestarted by calling <code>loop()</code>.</p>\n<p>The <a href=\"#/p5/isLooping\">isLooping()</a> function can be used to check\nwhether a sketch is looping, as in <code>isLooping() === true</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Turn off the draw loop.\n noLoop();\n\n describe(\n 'A white half-circle on the left edge of a gray square. The circle starts moving to the right when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's x-coordinate.\n let x = frameCount;\n\n // Draw the circle.\n circle(x, 50, 20);\n}\n\n// Resume the draw loop when the user double-clicks.\nfunction doubleClicked() {\n loop();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet startButton;\nlet stopButton;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the button elements and place them\n // beneath the canvas.\n startButton = createButton('▶');\n startButton.position(0, 100);\n startButton.size(50, 20);\n stopButton = createButton('◾');\n stopButton.position(50, 100);\n stopButton.size(50, 20);\n\n // Set functions to call when the buttons are pressed.\n startButton.mousePressed(loop);\n stopButton.mousePressed(noLoop);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe(\n 'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the circle.\n // Normally, the circle would move from left to right.\n circle(x, y, 20);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "html",
- "description": "<p>inner HTML for the new <code><div></div></code> element.</p>\n",
- "type": "String",
- "optional": true
+ "params": []
}
],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element and set its position.\n let div = createDiv('p5*js');\n div.position(25, 35);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h3 element within the div.\n let div = createDiv('<h3>p5*js</h3>');\n div.position(20, 5);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Structure",
+ "submodule": "Structure"
},
{
- "file": "src/dom/dom.js",
- "line": 543,
- "description": "<p>Creates a paragraph element.</p>\n<p><code><p></p></code> elements are commonly used for paragraph-length text.</p>\n<p>The parameter <code>html</code> is optional. It accepts a string that sets the\ninner HTML of the new <code><p></p></code>.</p>\n",
+ "name": "isLooping",
+ "file": "src/scripts/parsers/in/p5.js/src/core/structure.js",
+ "line": 265,
"itemtype": "method",
- "name": "createP",
- "params": [
+ "description": "<p>Returns <code>true</code> if the draw loop is running and <code>false</code> if not.</p>\n<p>By default, <a href=\"#/p5/draw\">draw()</a> tries to run 60 times per\nsecond. Calling <a href=\"#/p5/noLoop\">noLoop()</a> stops\n<a href=\"#/p5/draw\">draw()</a> from repeating. The draw loop can be\nrestarted by calling <a href=\"#/p5/loop\">loop()</a>.</p>\n<p>The <code>isLooping()</code> function can be used to check whether a sketch is\nlooping, as in <code>isLooping() === true</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle drawn against a gray background. When the user double-clicks, the circle stops or resumes following the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle at the mouse's position.\n circle(mouseX, mouseY, 20);\n}\n\n// Toggle the draw loop when the user double-clicks.\nfunction doubleClicked() {\n if (isLooping() === true) {\n noLoop();\n } else {\n loop();\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "html",
- "description": "<p>inner HTML for the new <code><p></p></code> element.</p>\n",
- "type": "String",
- "optional": true
+ "params": [],
+ "return": {
+ "description": "",
+ "type": "boolean"
+ }
}
],
"return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
+ "description": "",
+ "type": "boolean"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its position.\n let p = createP('Tell me a story.');\n p.position(5, 0);\n\n describe('A gray square displaying the text \"Tell me a story.\" written in black.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Structure",
+ "submodule": "Structure"
},
{
- "file": "src/dom/dom.js",
- "line": 578,
- "description": "<p>Creates a <code><span></span></code> element.</p>\n<p><code><span></span></code> elements are commonly used as containers\nfor inline elements. For example, a <code><span></span></code>\ncan hold part of a sentence that's a\n<span style=\"color: deeppink;\">different</span> style.</p>\n<p>The parameter <code>html</code> is optional. It accepts a string that sets the\ninner HTML of the new <code><span></span></code>.</p>\n",
+ "name": "redraw",
+ "file": "src/scripts/parsers/in/p5.js/src/core/structure.js",
+ "line": 354,
"itemtype": "method",
- "name": "createSpan",
- "params": [
+ "description": "<p>Runs the code in <a href=\"#/p5/draw\">draw()</a> once.</p>\n<p>By default, <a href=\"#/p5/draw\">draw()</a> tries to run 60 times per\nsecond. Calling <a href=\"#/p5/noLoop\">noLoop()</a> stops\n<a href=\"#/p5/draw\">draw()</a> from repeating. Calling <code>redraw()</code> will\nexecute the code in the <a href=\"#/p5/draw\">draw()</a> function a set\nnumber of times.</p>\n<p>The parameter, <code>n</code>, is optional. If a number is passed, as in <code>redraw(5)</code>,\nthen the draw loop will run the given number of times. By default, <code>n</code> is\n1.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click the canvas to move the circle.\n\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Turn off the draw loop.\n noLoop();\n\n describe(\n 'A white half-circle on the left edge of a gray square. The circle moves a little to the right when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle.\n circle(x, 50, 20);\n\n // Increment x.\n x += 5;\n}\n\n// Run the draw loop when the user double-clicks.\nfunction doubleClicked() {\n redraw();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click the canvas to move the circle.\n\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Turn off the draw loop.\n noLoop();\n\n describe(\n 'A white half-circle on the left edge of a gray square. The circle hops to the right when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle.\n circle(x, 50, 20);\n\n // Increment x.\n x += 5;\n}\n\n// Run the draw loop three times when the user double-clicks.\nfunction doubleClicked() {\n redraw(3);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "html",
- "description": "<p>inner HTML for the new <code><span></span></code> element.</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "n",
+ "description": "number of times to run <a href=\"#/p5/draw\">draw()</a>. Defaults to 1.",
+ "optional": 1,
+ "type": "Integer"
+ }
+ ]
}
],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a span element and set its position.\n let span = createSpan('p5*js');\n span.position(25, 35);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Create a div element as a container.\n let div = createDiv();\n\n // Place the div at the center.\n div.position(25, 35);\n\n // Create a span element.\n let s1 = createSpan('p5');\n\n // Create a second span element.\n let s2 = createSpan('*');\n\n // Set the second span's font color.\n s2.style('color', 'deeppink');\n\n // Create a third span element.\n let s3 = createSpan('js');\n\n // Add all the spans to the container div.\n s1.parent(div);\n s2.parent(div);\n s3.parent(div);\n\n describe('A gray square with the text \"p5*js\" written in black at its center. The asterisk is pink.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Structure",
+ "submodule": "Structure"
},
{
- "file": "src/dom/dom.js",
- "line": 649,
- "description": "<p>Creates an <code><img></code> element that can appear outside of the canvas.</p>\n<p>The first parameter, <code>src</code>, is a string with the path to the image file.\n<code>src</code> should be a relative path, as in <code>'assets/image.png'</code>, or a URL, as\nin <code>'https://example.com/image.png'</code>.</p>\n<p>The second parameter, <code>alt</code>, is a string with the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes\" target=\"_blank\">alternate text</a>\nfor the image. An empty string <code>''</code> can be used for images that aren't displayed.</p>\n<p>The third parameter, <code>crossOrigin</code>, is optional. It's a string that sets the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes\" target=\"_blank\">crossOrigin property</a>\nof the image. Use <code>'anonymous'</code> or <code>'use-credentials'</code> to fetch the image\nwith cross-origin access.</p>\n<p>The fourth parameter, <code>callback</code>, is also optional. It sets a function to\ncall after the image loads. The new image is passed to the callback\nfunction as a <a href=\"#/p5.Element\">p5.Element</a> object.</p>\n",
+ "name": "applyMatrix",
+ "file": "src/scripts/parsers/in/p5.js/src/core/transform.js",
+ "line": 235,
"itemtype": "method",
- "name": "createImg",
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- },
+ "chainable": 1,
+ "description": "<p>Applies a transformation matrix to the coordinate system.</p>\n<p>Transformations such as\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>, and\n<a href=\"#/p5/scale\">scale()</a>\nuse matrix-vector multiplication behind the scenes. A table of numbers,\ncalled a matrix, encodes each transformation. The values in the matrix\nthen multiply each point on the canvas, which is represented by a vector.</p>\n<p><code>applyMatrix()</code> allows for many transformations to be applied at once. See\n<a href=\"https://en.wikipedia.org/wiki/Transformation_matrix\" target=\"_blank\">Wikipedia</a>\nand <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web\" target=\"_blank\">MDN</a>\nfor more details about transformations.</p>\n<p>There are two ways to call <code>applyMatrix()</code> in two and three dimensions.</p>\n<p>In 2D mode, the parameters <code>a</code>, <code>b</code>, <code>c</code>, <code>d</code>, <code>e</code>, and <code>f</code>, correspond to\nelements in the following transformation matrix:</p>\n<img style=\"max-width: 150px\" src=\"assets/transformation-matrix.png\"\nalt=\"The transformation matrix used when applyMatrix is called in 2D mode.\"/><p>The numbers can be passed individually, as in\n<code>applyMatrix(2, 0, 0, 0, 2, 0)</code>. They can also be passed in an array, as in\n<code>applyMatrix([2, 0, 0, 0, 2, 0])</code>.</p>\n<p>In 3D mode, the parameters <code>a</code>, <code>b</code>, <code>c</code>, <code>d</code>, <code>e</code>, <code>f</code>, <code>g</code>, <code>h</code>, <code>i</code>,\n<code>j</code>, <code>k</code>, <code>l</code>, <code>m</code>, <code>n</code>, <code>o</code>, and <code>p</code> correspond to elements in the\nfollowing transformation matrix:</p>\n<p><img style=\"max-width: 300px\" src=\"assets/transformation-matrix-4-4.png\"\nalt=\"The transformation matrix used when applyMatrix is called in 3D mode.\"/></p>\n<p>The numbers can be passed individually, as in\n<code>applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)</code>. They can\nalso be passed in an array, as in\n<code>applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1])</code>.</p>\n<p>By default, transformations accumulate. The\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions\ncan be used to isolate transformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>applyMatrix()</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't\ncause shapes to transform continuously.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n let img = createImg(\n 'https://p5js.org/assets/img/asterisk-01.png',\n 'The p5.js magenta asterisk.'\n );\n img.position(0, -10);\n\n describe('A gray square with a magenta asterisk in its center.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n applyMatrix(1, 0, 0, 1, 50, 50);\n\n // Draw the circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n let m = [1, 0, 0, 1, 50, 50];\n applyMatrix(m);\n\n // Draw the circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\");\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn.\n let angle = QUARTER_PI;\n let ca = cos(angle);\n let sa = sin(angle);\n applyMatrix(ca, sa, -sa, ca, 0, 0);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by a factor of 0.5.\n applyMatrix(0.5, 0, 0, 0.5, 0, 0);\n\n // Draw a square at (30, 20).\n // It appears at (15, 10) after scaling.\n square(30, 20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the shear factor.\n let angle = QUARTER_PI;\n let shearFactor = 1 / tan(HALF_PI - angle);\n\n // Shear the coordinate system along the x-axis.\n applyMatrix(1, 0, shearFactor, 1, 0, 0);\n\n // Draw the square.\n square(0, 0, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n let ca = cos(angle);\n let sa = sin(angle);\n applyMatrix(ca, 0, sa, 0, 0, 1, 0, 0, -sa, 0, ca, 0, 0, 0, 0, 1);\n\n // Draw a box.\n box();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 649,
"params": [
{
- "name": "src",
- "description": "<p>relative path or URL for the image.</p>\n",
- "type": "String"
- },
- {
- "name": "alt",
- "description": "<p>alternate text for the image.</p>\n",
- "type": "String"
+ "name": "arr",
+ "description": "an array containing the elements of the transformation matrix. Its length should be either 6 (2D) or 16 (3D).",
+ "type": "Array"
}
- ],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- }
+ ]
},
{
- "line": 693,
"params": [
{
- "name": "src",
- "description": "",
- "type": "String"
+ "name": "a",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
},
{
- "name": "alt",
- "description": "",
- "type": "String"
+ "name": "b",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
},
{
- "name": "crossOrigin",
- "description": "<p>crossOrigin property to use when fetching the image.</p>\n",
- "type": "String",
- "optional": true
+ "name": "c",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
},
{
- "name": "successCallback",
- "description": "<p>function to call once the image loads. The new image will be passed\n to the function as a <a href=\"#/p5.Element\">p5.Element</a> object.</p>\n",
- "type": "Function",
- "optional": true
+ "name": "d",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
+ },
+ {
+ "name": "e",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
+ },
+ {
+ "name": "f",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
}
- ],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- }
- }
- ]
- },
- {
- "file": "src/dom/dom.js",
- "line": 724,
- "description": "<p>Creates an <code><a></a></code> element that links to another web page.</p>\n<p>The first parmeter, <code>href</code>, is a string that sets the URL of the linked\npage.</p>\n<p>The second parameter, <code>html</code>, is a string that sets the inner HTML of the\nlink. It's common to use text, images, or buttons as links.</p>\n<p>The third parameter, <code>target</code>, is optional. It's a string that tells the\nweb browser where to open the link. By default, links open in the current\nbrowser tab. Passing <code>'_blank'</code> will cause the link to open in a new\nbrowser tab. MDN describes a few\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\" target=\"_blank\">other options</a>.</p>\n",
- "itemtype": "method",
- "name": "createA",
- "params": [
- {
- "name": "href",
- "description": "<p>URL of linked page.</p>\n",
- "type": "String"
- },
- {
- "name": "html",
- "description": "<p>inner HTML of link element to display.</p>\n",
- "type": "String"
+ ]
},
{
- "name": "target",
- "description": "<p>target where the new link should open,\n either <code>'_blank'</code>, <code>'_self'</code>, <code>'_parent'</code>, or <code>'_top'</code>.</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "a",
+ "type": "Number"
+ },
+ {
+ "name": "b",
+ "type": "Number"
+ },
+ {
+ "name": "c",
+ "type": "Number"
+ },
+ {
+ "name": "d",
+ "type": "Number"
+ },
+ {
+ "name": "e",
+ "type": "Number"
+ },
+ {
+ "name": "f",
+ "type": "Number"
+ },
+ {
+ "name": "g",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
+ },
+ {
+ "name": "i",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
+ },
+ {
+ "name": "j",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
+ },
+ {
+ "name": "k",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
+ },
+ {
+ "name": "l",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
+ },
+ {
+ "name": "m",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
+ },
+ {
+ "name": "n",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
+ },
+ {
+ "name": "o",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
+ },
+ {
+ "name": "p",
+ "description": "an element of the transformation matrix.",
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an anchor element that links to p5js.org.\n let a = createA('https://p5js.org/', 'p5*js');\n a.position(25, 35);\n\n describe('The text \"p5*js\" written at the center of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Create an anchor tag that links to p5js.org.\n // Open the link in a new tab.\n let a = createA('https://p5js.org/', 'p5*js', '_blank');\n a.position(25, 35);\n\n describe('The text \"p5*js\" written at the center of a gray square.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Transform",
+ "submodule": "Transform"
},
{
- "file": "src/dom/dom.js",
- "line": 787,
+ "name": "resetMatrix",
+ "file": "src/scripts/parsers/in/p5.js/src/core/transform.js",
+ "line": 283,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "Clears all transformations applied to the coordinate system.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two circles drawn on a gray background. A blue circle is at the top-left and a red circle is at the bottom-right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a blue circle at the coordinates (25, 25).\n fill('blue');\n circle(25, 25, 20);\n\n // Clear all transformations.\n // The origin is now at the top-left corner.\n resetMatrix();\n\n // Draw a red circle at the coordinates (25, 25).\n fill('red');\n circle(25, 25, 20);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Transform",
+ "submodule": "Transform"
},
{
- "file": "src/dom/dom.js",
- "line": 789,
- "description": "<p>Creates a slider <code><input></input></code> element.</p>\n<p>Range sliders are useful for quickly selecting numbers from a given range.</p>\n<p>The first two parameters, <code>min</code> and <code>max</code>, are numbers that set the\nslider's minimum and maximum.</p>\n<p>The third parameter, <code>value</code>, is optional. It's a number that sets the\nslider's default value.</p>\n<p>The fourth parameter, <code>step</code>, is also optional. It's a number that sets the\nspacing between each value in the slider's range. Setting <code>step</code> to 0\nallows the slider to move smoothly from <code>min</code> to <code>max</code>.</p>\n",
+ "name": "rotate",
+ "file": "src/scripts/parsers/in/p5.js/src/core/transform.js",
+ "line": 463,
"itemtype": "method",
- "name": "createSlider",
- "params": [
- {
- "name": "min",
- "description": "<p>minimum value of the slider.</p>\n",
- "type": "Number"
- },
- {
- "name": "max",
- "description": "<p>maximum value of the slider.</p>\n",
- "type": "Number"
- },
- {
- "name": "value",
- "description": "<p>default value of the slider.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "chainable": 1,
+ "description": "<p>Rotates the coordinate system.</p>\n<p>By default, the positive x-axis points to the right and the positive y-axis\npoints downward. The <code>rotate()</code> function changes this orientation by\nrotating the coordinate system about the origin. Everything drawn after\n<code>rotate()</code> is called will appear to be rotated.</p>\n<p>The first parameter, <code>angle</code>, is the amount to rotate. For example, calling\n<code>rotate(1)</code> rotates the coordinate system clockwise 1 radian which is\nnearly 57˚. <code>rotate()</code> interprets angle values using the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>The second parameter, <code>axis</code>, is optional. It's used to orient 3D rotations\nin WebGL mode. If a <a href=\"#/p5.Vector\">p5.Vector</a> is passed, as in\n<code>rotate(QUARTER_PI, myVector)</code>, then the coordinate system will rotate\n<code>QUARTER_PI</code> radians about <code>myVector</code>. If an array of vector components is\npassed, as in <code>rotate(QUARTER_PI, [1, 0, 0])</code>, then the coordinate system\nwill rotate <code>QUARTER_PI</code> radians about a vector with the components\n<code>[1, 0, 0]</code>.</p>\n<p>By default, transformations accumulate. For example, calling <code>rotate(1)</code>\ntwice has the same effect as calling <code>rotate(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions\ncan be used to isolate transformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>rotate(1)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't cause\nshapes to spin.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n \"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn.\n rotate(QUARTER_PI);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n \"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/16 turn.\n rotate(QUARTER_PI / 2);\n\n // Rotate the coordinate system another 1/16 turn.\n rotate(QUARTER_PI / 2);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe(\n \"A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn.\n rotate(45);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white rectangle on a gray background. The rectangle rotates slowly about the top-left corner. It disappears and reappears periodically.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotate(angle);\n\n // Draw a rectangle at coordinates (50, 0).\n rect(50, 0, 40, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A cube on a gray background. The cube's front face points to the top-right.\");\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn about\n // the axis [1, 1, 0].\n let axis = createVector(1, 1, 0);\n rotate(QUARTER_PI, axis);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A cube on a gray background. The cube's front face points to the top-right.\");\n}\n\nfunction draw() {\n background(200);\n\n // Rotate the coordinate system 1/8 turn about\n // the axis [1, 1, 0].\n let axis = [1, 1, 0];\n rotate(QUARTER_PI, axis);\n\n // Draw a box.\n box();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "step",
- "description": "<p>size for each step in the slider's range.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "angle",
+ "description": "angle of rotation in the current <a href=\"#/p5/angleMode\">angleMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "axis",
+ "description": "axis to rotate about in 3D.",
+ "optional": 1,
+ "type": "p5.Vector|Number[]"
+ }
+ ]
}
],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- },
- "example": [
- "\n<div>\n<code>\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n slider = createSlider(0, 255);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n slider = createSlider(0, 255, 0);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n // Set its step size to 50.\n slider = createSlider(0, 255, 0, 50);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n // Set its step size to 0 so that it moves smoothly.\n slider = createSlider(0, 255, 0, 0);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Transform",
+ "submodule": "Transform"
},
{
- "file": "src/dom/dom.js",
- "line": 924,
- "description": "<p>Creates a <code><button></button></code> element.</p>\n<p>The first parameter, <code>label</code>, is a string that sets the label displayed on\nthe button.</p>\n<p>The second parameter, <code>value</code>, is optional. It's a string that sets the\nbutton's value. See\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value\" target=\"_blank\">MDN</a>\nfor more details.</p>\n",
+ "name": "rotateX",
+ "file": "src/scripts/parsers/in/p5.js/src/core/transform.js",
+ "line": 598,
"itemtype": "method",
- "name": "createButton",
- "params": [
- {
- "name": "label",
- "description": "<p>label displayed on the button.</p>\n",
- "type": "String"
- },
+ "chainable": 1,
+ "description": "<p>Rotates the coordinate system about the x-axis in WebGL mode.</p>\n<p>The parameter, <code>angle</code>, is the amount to rotate. For example, calling\n<code>rotateX(1)</code> rotates the coordinate system about the x-axis by 1 radian.\n<code>rotateX()</code> interprets angle values using the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, transformations accumulate. For example, calling <code>rotateX(1)</code>\ntwice has the same effect as calling <code>rotateX(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions\ncan be used to isolate transformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>rotateX(1)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't cause\nshapes to spin.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateX(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateX(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateX(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateX(45);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateX(angle);\n\n // Draw a box.\n box();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "value",
- "description": "<p>value of the button.</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "angle",
+ "description": "angle of rotation in the current <a href=\"#/p5/angleMode\">angleMode()</a>.",
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button and place it beneath the canvas.\n let button = createButton('click me');\n button.position(0, 100);\n\n // Call repaint() when the button is pressed.\n button.mousePressed(repaint);\n\n describe('A gray square with a button that says \"click me\" beneath it. The square changes color when the button is clicked.');\n}\n\n// Change the background color.\nfunction repaint() {\n let g = random(255);\n background(g);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet button;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button and set its value to 0.\n // Place the button beneath the canvas.\n button = createButton('click me', 'red');\n button.position(0, 100);\n\n // Call randomColor() when the button is pressed.\n button.mousePressed(randomColor);\n\n describe('A red square with a button that says \"click me\" beneath it. The square changes color when the button is clicked.');\n}\n\nfunction draw() {\n // Use the button's value to set the background color.\n let c = button.value();\n background(c);\n}\n\n// Set the button's value to a random color.\nfunction randomColor() {\n let c = random(['red', 'green', 'blue', 'yellow']);\n button.value(c);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Transform",
+ "submodule": "Transform"
},
{
- "file": "src/dom/dom.js",
- "line": 1008,
- "description": "<p>Creates a checkbox <code><input></input></code> element.</p>\n<p>Checkboxes extend the <a href=\"#/p5.Element\">p5.Element</a> class with a\n<code>checked()</code> method. Calling <code>myBox.checked()</code> returns <code>true</code> if it the box\nis checked and <code>false</code> if not.</p>\n<p>The first parameter, <code>label</code>, is optional. It's a string that sets the label\nto display next to the checkbox.</p>\n<p>The second parameter, <code>value</code>, is also optional. It's a boolean that sets the\ncheckbox's value.</p>\n",
+ "name": "rotateY",
+ "file": "src/scripts/parsers/in/p5.js/src/core/transform.js",
+ "line": 734,
"itemtype": "method",
- "name": "createCheckbox",
- "params": [
- {
- "name": "label",
- "description": "<p>label displayed after the checkbox.</p>\n",
- "type": "String",
- "optional": true
- },
+ "chainable": 1,
+ "description": "<p>Rotates the coordinate system about the y-axis in WebGL mode.</p>\n<p>The parameter, <code>angle</code>, is the amount to rotate. For example, calling\n<code>rotateY(1)</code> rotates the coordinate system about the y-axis by 1 radian.\n<code>rotateY()</code> interprets angle values using the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, transformations accumulate. For example, calling <code>rotateY(1)</code>\ntwice has the same effect as calling <code>rotateY(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions\ncan be used to isolate transformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>rotateY(1)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't cause\nshapes to spin.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateY(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateY(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateY(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateY(45);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateY(angle);\n\n // Draw a box.\n box();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "value",
- "description": "<p>value of the checkbox. Checked is <code>true</code> and unchecked is <code>false</code>.</p>\n",
- "type": "Boolean",
- "optional": true
+ "params": [
+ {
+ "name": "angle",
+ "description": "angle of rotation in the current <a href=\"#/p5/angleMode\">angleMode()</a>.",
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- },
- "example": [
- "\n<div>\n<code>\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n checkbox = createCheckbox();\n checkbox.position(0, 100);\n\n describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n // Label the checkbox \"white\".\n checkbox = createCheckbox(' white');\n checkbox.position(0, 100);\n\n describe('A black square with a checkbox labeled \"white\" beneath it. The square turns white when the box is checked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n // Label the checkbox \"white\" and set its value to true.\n checkbox = createCheckbox(' white', true);\n checkbox.position(0, 100);\n\n describe('A white square with a checkbox labeled \"white\" beneath it. The square turns black when the box is unchecked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Transform",
+ "submodule": "Transform"
},
{
- "file": "src/dom/dom.js",
- "line": 1159,
- "description": "<p>Creates a dropdown menu <code><select></select></code> element.</p>\n<p>The parameter is optional. If <code>true</code> is passed, as in\n<code>let mySelect = createSelect(true)</code>, then the dropdown will support\nmultiple selections. If an existing <code><select></select></code> element\nis passed, as in <code>let mySelect = createSelect(otherSelect)</code>, the existing\nelement will be wrapped in a new <a href=\"#/p5.Element\">p5.Element</a>\nobject.</p>\n<p>Dropdowns extend the <a href=\"#/p5.Element\">p5.Element</a> class with a few\nhelpful methods for managing options:</p>\n<ul>\n<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>\n<li><code>mySelect.value()</code> returns the currently-selected option's value.</li>\n<li><code>mySelect.selected()</code> returns the currently-selected option.</li>\n<li><code>mySelect.selected(option)</code> selects the given option by default.</li>\n<li><code>mySelect.disable()</code> marks the whole dropdown element as disabled.</li>\n<li><code>mySelect.disable(option)</code> marks a given option as disabled.</li>\n<li><code>mySelect.enable()</code> marks the whole dropdown element as enabled.</li>\n<li><code>mySelect.enable(option)</code> marks a given option as enabled.</li>\n</ul>\n",
+ "name": "rotateZ",
+ "file": "src/scripts/parsers/in/p5.js/src/core/transform.js",
+ "line": 870,
"itemtype": "method",
- "name": "createSelect",
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- },
+ "chainable": 1,
+ "description": "<p>Rotates the coordinate system about the z-axis in WebGL mode.</p>\n<p>The parameter, <code>angle</code>, is the amount to rotate. For example, calling\n<code>rotateZ(1)</code> rotates the coordinate system about the z-axis by 1 radian.\n<code>rotateZ()</code> interprets angle values using the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, transformations accumulate. For example, calling <code>rotateZ(1)</code>\ntwice has the same effect as calling <code>rotateZ(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions\ncan be used to isolate transformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>rotateZ(1)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't cause\nshapes to spin.</p>\n",
"example": [
- "\n<div>\n<code>\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n // Set the selected option to \"red\".\n mySelect.selected('red');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n // Set the selected option to \"red\".\n mySelect.selected('red');\n\n // Disable the \"yellow\" option.\n mySelect.disable('yellow');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options with names and values.\n mySelect.option('one', 'red');\n mySelect.option('two', 'green');\n mySelect.option('three', 'blue');\n mySelect.option('four', 'yellow');\n\n // Set the selected option to \"one\".\n mySelect.selected('one');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Hold CTRL to select multiple options on Windows and Linux.\n// Hold CMD to select multiple options on macOS.\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and allow multiple selections.\n // Place it beneath the canvas.\n mySelect = createSelect(true);\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the selected value(s) to draw circles.\n let colors = mySelect.selected();\n for (let i = 0; i < colors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = 10 + i * 20;\n\n // Access the color.\n let c = colors[i];\n\n // Draw the circle.\n fill(c);\n circle(x, 50, 20);\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateZ(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateZ(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateZ(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateZ(45);\n\n // Draw a box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateZ(angle);\n\n // Draw a box.\n box();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 1159,
"params": [
{
- "name": "multiple",
- "description": "<p>support multiple selections.</p>\n",
- "type": "Boolean",
- "optional": true
+ "name": "angle",
+ "description": "angle of rotation in the current <a href=\"#/p5/angleMode\">angleMode()</a>.",
+ "type": "Number"
}
- ],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- }
- },
- {
- "line": 1324,
- "params": [
- {
- "name": "existing",
- "description": "<p>select element to wrap, either as a <a href=\"#/p5.Element\">p5.Element</a> or\n a <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement\" target=\"_blank\">HTMLSelectElement</a>.</p>\n",
- "type": "Object"
- }
- ],
- "return": {
- "description": "",
- "type": "p5.Element"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Transform",
+ "submodule": "Transform"
},
{
- "file": "src/dom/dom.js",
- "line": 1440,
- "description": "<p>Creates a radio button element.</p>\n<p>The parameter is optional. If a string is passed, as in\n<code>let myRadio = createSelect('food')</code>, then each radio option will\nhave <code>\"food\"</code> as its <code>name</code> parameter: <code><input name=\"food\"></code>.\nIf an existing <code><div></div></code> or <code><span></span></code>\nelement is passed, as in <code>let myRadio = createSelect(container)</code>, it will\nbecome the radio button's parent element.</p>\n<p>Radio buttons extend the <a href=\"#/p5.Element\">p5.Element</a> class with a few\nhelpful methods for managing options:</p>\n<ul>\n<li><code>myRadio.option(value, [label])</code> adds an option to the menu. The first parameter, <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>\n<li><code>myRadio.value()</code> returns the currently-selected option's value.</li>\n<li><code>myRadio.selected()</code> returns the currently-selected option.</li>\n<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>\n<li><code>myRadio.disable(shouldDisable)</code> Disables the radio button if <code>true</code> is passed, and enables it if <code>false</code> is passed.</li>\n</ul>\n",
+ "name": "scale",
+ "file": "src/scripts/parsers/in/p5.js/src/core/transform.js",
+ "line": 1043,
"itemtype": "method",
- "name": "createRadio",
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- },
+ "chainable": 1,
+ "description": "<p>Scales the coordinate system.</p>\n<p>By default, shapes are drawn at their original scale. A rectangle that's 50\npixels wide appears to take up half the width of a 100 pixel-wide canvas.\nThe <code>scale()</code> function can shrink or stretch the coordinate system so that\nshapes appear at different sizes. There are two ways to call <code>scale()</code> with\nparameters that set the scale factor(s).</p>\n<p>The first way to call <code>scale()</code> uses numbers to set the amount of scaling.\nThe first parameter, <code>s</code>, sets the amount to scale each axis. For example,\ncalling <code>scale(2)</code> stretches the x-, y-, and z-axes by a factor of 2. The\nnext two parameters, <code>y</code> and <code>z</code>, are optional. They set the amount to\nscale the y- and z-axes. For example, calling <code>scale(2, 0.5, 1)</code> stretches\nthe x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and\nleaves the z-axis unchanged.</p>\n<p>The second way to call <code>scale()</code> uses a <a href=\"#/p5.Vector\">p5.Vector</a>\nobject to set the scale factors. For example, calling <code>scale(myVector)</code>\nuses the x-, y-, and z-components of <code>myVector</code> to set the amount of\nscaling along the x-, y-, and z-axes. Doing so is the same as calling\n<code>scale(myVector.x, myVector.y, myVector.z)</code>.</p>\n<p>By default, transformations accumulate. For example, calling <code>scale(1)</code>\ntwice has the same effect as calling <code>scale(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions\ncan be used to isolate transformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>scale(2)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't cause\nshapes to grow continuously.</p>\n",
"example": [
- "\n<div>\n<code>\nlet style = document.createElement('style');\nstyle.innerHTML = `\n.p5-radio label {\n display: flex;\n align-items: center;\n }\n .p5-radio input {\n margin-right: 5px;\n }\n `;\ndocument.head.appendChild(style);\n\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.class('p5-radio');\n myRadio.size(60);\n\n // Add a few color options.\n myRadio.option('red');\n myRadio.option('yellow');\n myRadio.option('blue');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n describe('A yellow square with three color options listed, \"red\", \"yellow\", and \"blue\". The square changes color when the user selects a new option.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let g = myRadio.value();\n background(g);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.size(50);\n\n // Add a few color options.\n // Color values are labeled with\n // emotions they evoke.\n myRadio.option('red', 'love');\n myRadio.option('yellow', 'joy');\n myRadio.option('blue', 'trust');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n describe('A yellow square with three options listed, \"love\", \"joy\", and \"trust\". The square changes color when the user selects a new option.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let c = myRadio.value();\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.class('p5-radio');\n myRadio.size(50);\n\n // Add a few color options.\n myRadio.option('red');\n myRadio.option('yellow');\n myRadio.option('blue');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n // Create a button and place it beneath the canvas.\n let btn = createButton('disable');\n btn.position(0, 100);\n\n // Call disableRadio() when btn is pressed.\n btn.mousePressed(disableRadio);\n\n 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.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let c = myRadio.value();\n background(c);\n}\n\n// Disable myRadio.\nfunction disableRadio() {\n myRadio.disable(true);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by a factor of 0.5.\n scale(0.5);\n\n // Draw a square at (30, 20).\n // It appears at (15, 10) after scaling.\n square(30, 20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle and a square drawn in white on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis.\n scale(0.5, 1.3);\n\n // Draw a square at (30, 20).\n // It appears as a rectangle at (15, 26) after scaling.\n square(30, 20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle and a square drawn in white on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Create a p5.Vector object.\n let v = createVector(0.5, 1.3);\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis.\n scale(v);\n\n // Draw a square at (30, 20).\n // It appears as a rectangle at (15, 26) after scaling.\n square(30, 20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red box and a blue box drawn on a gray background. The red box appears embedded in the blue box.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the red sphere.\n fill('red');\n box();\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis and\n // 2 along the z-axis.\n scale(0.5, 1.3, 2);\n\n // Draw the blue sphere.\n fill('blue');\n box();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 1440,
"params": [
{
- "name": "containerElement",
- "description": "<p>container HTML Element, either a <code><div></div></code>\nor <code><span></span></code>.</p>\n",
- "type": "Object",
- "optional": true
+ "name": "s",
+ "description": "amount to scale along the positive x-axis.",
+ "type": "Number|p5.Vector|Number[]"
+ },
+ {
+ "name": "y",
+ "description": "amount to scale along the positive y-axis. Defaults to <code>s</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "amount to scale along the positive z-axis. Defaults to <code>y</code>.",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- }
+ ]
},
{
- "line": 1588,
"params": [
{
- "name": "name",
- "description": "<p>name parameter assigned to each option's <code><input></input></code> element.</p>\n",
- "type": "String",
- "optional": true
+ "name": "scales",
+ "description": "vector whose components should be used to scale.",
+ "type": "p5.Vector|Number[]"
}
- ],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- }
- },
- {
- "line": 1593,
- "params": [],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Transform",
+ "submodule": "Transform"
},
{
- "file": "src/dom/dom.js",
- "line": 1759,
- "description": "<p>Creates a color picker element.</p>\n<p>The parameter, <code>value</code>, is optional. If a color string or\n<a href=\"#/p5.Color\">p5.Color</a> object is passed, it will set the default\ncolor.</p>\n<p>Color pickers extend the <a href=\"#/p5.Element\">p5.Element</a> class with a\ncouple of helpful methods for managing colors:</p>\n<ul>\n<li><code>myPicker.value()</code> returns the current color as a hex string in the format <code>'#rrggbb'</code>.</li>\n<li><code>myPicker.color()</code> returns the current color as a <a href=\"#/p5.Color\">p5.Color</a> object.</li>\n</ul>\n",
+ "name": "shearX",
+ "file": "src/scripts/parsers/in/p5.js/src/core/transform.js",
+ "line": 1138,
"itemtype": "method",
- "name": "createColorPicker",
- "params": [
+ "chainable": 1,
+ "description": "<p>Shears the x-axis so that shapes appear skewed.</p>\n<p>By default, the x- and y-axes are perpendicular. The <code>shearX()</code> function\ntransforms the coordinate system so that x-coordinates are translated while\ny-coordinates are fixed.</p>\n<p>The first parameter, <code>angle</code>, is the amount to shear. For example, calling\n<code>shearX(1)</code> transforms all x-coordinates using the formula\n<code>x = x + y * tan(angle)</code>. <code>shearX()</code> interprets angle values using the\ncurrent <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, transformations accumulate. For example, calling\n<code>shearX(1)</code> twice has the same effect as calling <code>shearX(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and\n<a href=\"#/p5/pop\">pop()</a> functions can be used to isolate\ntransformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>shearX(1)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't\ncause shapes to shear continuously.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearX(QUARTER_PI);\n\n // Draw the square.\n square(0, 0, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearX(45);\n\n // Draw the square.\n square(0, 0, 50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "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>\n",
- "type": "String|p5.Color",
- "optional": true
+ "params": [
+ {
+ "name": "angle",
+ "description": "angle to shear by in the current <a href=\"#/p5/angleMode\">angleMode()</a>.",
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- },
+ "class": "p5",
+ "static": false,
+ "module": "Transform",
+ "submodule": "Transform"
+ },
+ {
+ "name": "shearY",
+ "file": "src/scripts/parsers/in/p5.js/src/core/transform.js",
+ "line": 1215,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Shears the y-axis so that shapes appear skewed.</p>\n<p>By default, the x- and y-axes are perpendicular. The <code>shearY()</code> function\ntransforms the coordinate system so that y-coordinates are translated while\nx-coordinates are fixed.</p>\n<p>The first parameter, <code>angle</code>, is the amount to shear. For example, calling\n<code>shearY(1)</code> transforms all y-coordinates using the formula\n<code>y = y + x * tan(angle)</code>. <code>shearY()</code> interprets angle values using the\ncurrent <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>By default, transformations accumulate. For example, calling\n<code>shearY(1)</code> twice has the same effect as calling <code>shearY(2)</code> once. The\n<a href=\"#/p5/push\">push()</a> and\n<a href=\"#/p5/pop\">pop()</a> functions can be used to isolate\ntransformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>shearY(1)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't\ncause shapes to shear continuously.</p>\n",
"example": [
- "\n<div>\n<code>\nlet myPicker;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a color picker and set its position.\n myPicker = createColorPicker('deeppink');\n myPicker.position(0, 100);\n\n describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');\n}\n\nfunction draw() {\n // Use the color picker to paint the background.\n let c = myPicker.color();\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myPicker;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a color picker and set its position.\n myPicker = createColorPicker('deeppink');\n myPicker.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n // Use the color picker to paint the background.\n let c = myPicker.value();\n background(c);\n\n // Display the current color as a hex string.\n text(c, 25, 55);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearY(QUARTER_PI);\n\n // Draw the square.\n square(0, 0, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearY(45);\n\n // Draw the square.\n square(0, 0, 50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "angle",
+ "description": "angle to shear by in the current <a href=\"#/p5/angleMode\">angleMode()</a>.",
+ "type": "Number"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Transform",
+ "submodule": "Transform"
},
{
- "file": "src/dom/dom.js",
- "line": 1859,
- "description": "<p>Creates a text <code><input></input></code> element.</p>\n<p>Call <code>myInput.size()</code> to set the length of the text box.</p>\n<p>The first parameter, <code>value</code>, is optional. It's a string that sets the\ninput's default value. The input is blank by default.</p>\n<p>The second parameter, <code>type</code>, is also optional. It's a string that\nspecifies the type of text being input. See MDN for a full\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input\" target=\"_blank\">list of options</a>.\nThe default is <code>'text'</code>.</p>\n",
+ "name": "translate",
+ "file": "src/scripts/parsers/in/p5.js/src/core/transform.js",
+ "line": 1398,
"itemtype": "method",
- "name": "createInput",
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- },
+ "chainable": 1,
+ "description": "<p>Translates the coordinate system.</p>\n<p>By default, the origin <code>(0, 0)</code> is at the sketch's top-left corner in 2D\nmode and center in WebGL mode. The <code>translate()</code> function shifts the origin\nto a different position. Everything drawn after <code>translate()</code> is called\nwill appear to be shifted. There are two ways to call <code>translate()</code> with\nparameters that set the origin's position.</p>\n<p>The first way to call <code>translate()</code> uses numbers to set the amount of\ntranslation. The first two parameters, <code>x</code> and <code>y</code>, set the amount to\ntranslate along the positive x- and y-axes. For example, calling\n<code>translate(20, 30)</code> translates the origin 20 pixels along the x-axis and 30\npixels along the y-axis. The third parameter, <code>z</code>, is optional. It sets the\namount to translate along the positive z-axis. For example, calling\n<code>translate(20, 30, 40)</code> translates the origin 20 pixels along the x-axis,\n30 pixels along the y-axis, and 40 pixels along the z-axis.</p>\n<p>The second way to call <code>translate()</code> uses a\n<a href=\"#/p5.Vector\">p5.Vector</a> object to set the amount of\ntranslation. For example, calling <code>translate(myVector)</code> uses the x-, y-,\nand z-components of <code>myVector</code> to set the amount to translate along the x-,\ny-, and z-axes. Doing so is the same as calling\n<code>translate(myVector.x, myVector.y, myVector.z)</code>.</p>\n<p>By default, transformations accumulate. For example, calling\n<code>translate(10, 0)</code> twice has the same effect as calling\n<code>translate(20, 0)</code> once. The <a href=\"#/p5/push\">push()</a> and\n<a href=\"#/p5/pop\">pop()</a> functions can be used to isolate\ntransformations within distinct drawing groups.</p>\n<p>Note: Transformations are reset at the beginning of the draw loop. Calling\n<code>translate(10, 0)</code> inside the <a href=\"#/p5/draw\">draw()</a> function won't\ncause shapes to move continuously.</p>\n",
"example": [
- "\n<div>\n<code>\nlet myInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an input element and place it\n // beneath the canvas.\n myInput = createInput();\n myInput.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input to display a message.\n let msg = myInput.value();\n text(msg, 25, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an input element and place it\n // beneath the canvas. Set its default\n // text to \"hello!\".\n myInput = createInput('hello!');\n myInput.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input to display a message.\n let msg = myInput.value();\n text(msg, 25, 55);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two circles drawn on a gray background. The blue circle on the right overlaps the red circle at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw the red circle.\n fill('red');\n circle(0, 0, 40);\n\n // Translate the origin to the right.\n translate(25, 0);\n\n // Draw the blue circle.\n fill('blue');\n circle(0, 0, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle moves slowly from left to right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the x-coordinate.\n let x = frameCount * 0.2;\n\n // Translate the origin.\n translate(x, 50);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a p5.Vector object.\n let v = createVector(50, 50);\n\n // Translate the origin by the vector.\n translate(v);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two spheres sitting side-by-side on gray background. The sphere at the center is red. The sphere on the right is blue.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the red sphere.\n fill('red');\n sphere(10);\n\n // Translate the origin to the right.\n translate(30, 0, 0);\n\n // Draw the blue sphere.\n fill('blue');\n sphere(10);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 1859,
"params": [
{
- "name": "value",
- "description": "<p>default value of the input box. Defaults to an empty string <code>''</code>.</p>\n",
- "type": "String",
- "optional": true
+ "name": "x",
+ "description": "amount to translate along the positive x-axis.",
+ "type": "Number"
},
{
- "name": "type",
- "description": "<p>type of input. Defaults to <code>'text'</code>.</p>\n",
- "type": "String",
- "optional": true
+ "name": "y",
+ "description": "amount to translate along the positive y-axis.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "amount to translate along the positive z-axis.",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
- }
+ ]
},
{
- "line": 1929,
"params": [
{
- "name": "value",
- "description": "",
- "type": "String",
- "optional": true
+ "name": "vector",
+ "description": "vector by which to translate.",
+ "type": "p5.Vector"
}
- ],
- "return": {
- "description": "",
- "type": "p5.Element"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Transform",
+ "submodule": "Transform"
},
{
- "file": "src/dom/dom.js",
- "line": 1942,
- "description": "<p>Creates an <code><input></input></code> element of type <code>'file'</code>.</p>\n<p><code>createFileInput()</code> allows users to select local files for use in a sketch.\nIt returns a <a href=\"#/p5.File\">p5.File</a> object.</p>\n<p>The first parameter, <code>callback</code>, is a function that's called when the file\nloads. The callback function should have one parameter, <code>file</code>, that's a\n<a href=\"#/p5.File\">p5.File</a> object.</p>\n<p>The second parameter, <code>multiple</code>, is optional. It's a boolean value that\nallows loading multiple files if set to <code>true</code>. If <code>true</code>, <code>callback</code>\nwill be called once per file.</p>\n",
+ "name": "push",
+ "file": "src/scripts/parsers/in/p5.js/src/core/transform.js",
+ "line": 1683,
"itemtype": "method",
- "name": "createFileInput",
- "params": [
- {
- "name": "callback",
- "description": "<p>function to call once the file loads.</p>\n",
- "type": "Function"
- },
+ "description": "<p>Begins a drawing group that contains its own styles and transformations.</p>\n<p>By default, styles such as <a href=\"#/p5/fill\">fill()</a> and\ntransformations such as <a href=\"#/p5/rotate\">rotate()</a> are applied to\nall drawing that follows. The <code>push()</code> and <a href=\"#/p5/pop\">pop()</a>\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('🦟', x, y);</code></pre><p>In the code snippet above, the bug's position isn't affected by\n<code>translate(mouseX, mouseY)</code> because that transformation is contained\nbetween <code>push()</code> and <a href=\"#/p5/pop\">pop()</a>. The bug moves around\nthe entire canvas as expected.</p>\n<p>Note: <code>push()</code> and <a href=\"#/p5/pop\">pop()</a> are always called as a\npair. Both functions are required to begin and end a drawing group.</p>\n<p><code>push()</code> and <a href=\"#/p5/pop\">pop()</a> can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('🦟', x, y);</code></pre><p>In this version, the code to draw each eye is contained between its own\n<code>push()</code> and <a href=\"#/p5/pop\">pop()</a> functions. Doing so makes it\neasier to add details in the correct part of a drawing.</p>\n<p><code>push()</code> and <a href=\"#/p5/pop\">pop()</a> contain the effects of the\nfollowing functions:</p>\n<ul><li><a href=\"#/p5/fill\">fill()</a></li><li><a href=\"#/p5/noFill\">noFill()</a></li><li><a href=\"#/p5/noStroke\">noStroke()</a></li><li><a href=\"#/p5/stroke\">stroke()</a></li><li><a href=\"#/p5/tint\">tint()</a></li><li><a href=\"#/p5/noTint\">noTint()</a></li><li><a href=\"#/p5/strokeWeight\">strokeWeight()</a></li><li><a href=\"#/p5/strokeCap\">strokeCap()</a></li><li><a href=\"#/p5/strokeJoin\">strokeJoin()</a></li><li><a href=\"#/p5/imageMode\">imageMode()</a></li><li><a href=\"#/p5/rectMode\">rectMode()</a></li><li><a href=\"#/p5/ellipseMode\">ellipseMode()</a></li><li><a href=\"#/p5/colorMode\">colorMode()</a></li><li><a href=\"#/p5/textAlign\">textAlign()</a></li><li><a href=\"#/p5/textFont\">textFont()</a></li><li><a href=\"#/p5/textSize\">textSize()</a></li><li><a href=\"#/p5/textLeading\">textLeading()</a></li><li><a href=\"#/p5/applyMatrix\">applyMatrix()</a></li><li><a href=\"#/p5/resetMatrix\">resetMatrix()</a></li><li><a href=\"#/p5/rotate\">rotate()</a></li><li><a href=\"#/p5/scale\">scale()</a></li><li><a href=\"#/p5/shearX\">shearX()</a></li><li><a href=\"#/p5/shearY\">shearY()</a></li><li><a href=\"#/p5/translate\">translate()</a></li></ul><p>In WebGL mode, <code>push()</code> and <a href=\"#/p5/pop\">pop()</a> contain the\neffects of a few additional styles:</p>\n<ul><li><a href=\"#/p5/setCamera\">setCamera()</a></li><li><a href=\"#/p5/ambientLight\">ambientLight()</a></li><li><a href=\"#/p5/directionalLight\">directionalLight()</a></li><li><a href=\"#/p5/pointLight\">pointLight()</a> <a href=\"#/p5/texture\">texture()</a></li><li><a href=\"#/p5/specularMaterial\">specularMaterial()</a></li><li><a href=\"#/p5/shininess\">shininess()</a></li><li><a href=\"#/p5/normalMaterial\">normalMaterial()</a></li><li><a href=\"#/p5/shader\">shader()</a></li></ul>",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the left circle.\n circle(25, 50, 20);\n\n // Begin the drawing group.\n push();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Style the circle.\n strokeWeight(5);\n stroke('royalblue');\n fill('orange');\n\n // Draw the circle.\n circle(0, 0, 20);\n\n // End the drawing group.\n pop();\n\n // Draw the right circle.\n circle(75, 50, 20);\n\n describe(\n 'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(24);\n\n describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n background(200);\n\n // Begin the drawing group.\n push();\n\n // Translate the origin to the mouse's position.\n translate(mouseX, mouseY);\n\n // Style the face.\n noStroke();\n fill('green');\n\n // Draw a face.\n circle(0, 0, 60);\n\n // Style the eyes.\n fill('white');\n\n // Draw the left eye.\n push();\n translate(-20, -20);\n ellipse(0, 0, 30, 20);\n fill('black');\n circle(0, 0, 8);\n pop();\n\n // Draw the right eye.\n push();\n translate(20, -20);\n ellipse(0, 0, 30, 20);\n fill('black');\n circle(0, 0, 8);\n pop();\n\n // End the drawing group.\n pop();\n\n // Draw a bug.\n let x = random(0, 100);\n let y = random(0, 100);\n text('🦟', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the red sphere.\n push();\n translate(-25, 0, 0);\n noStroke();\n directionalLight(255, 0, 0, 0, 0, -1);\n sphere(20);\n pop();\n\n // Draw the blue sphere.\n push();\n translate(25, 0, 0);\n strokeWeight(0.3);\n stroke(0, 0, 255);\n noFill();\n sphere(20);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "multiple",
- "description": "<p>allow multiple files to be selected.</p>\n",
- "type": "Boolean",
- "optional": true
+ "params": []
}
],
- "return": {
- "description": "new <a href=\"#/p5.File\">p5.File</a> object.",
- "type": "p5.File"
- },
- "example": [
- "\n<div>\n<code>\n// Use the file input to select an image to\n// load and display.\nlet input;\nlet img;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a file input and place it beneath\n // the canvas.\n input = createFileInput(handleImage);\n input.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the image if loaded.\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\n// Create an image if the file is an image.\nfunction handleImage(file) {\n if (file.type === 'image') {\n img = createImg(file.data, '');\n img.hide();\n } else {\n img = null;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Use the file input to select multiple images\n// to load and display.\nlet input;\nlet images = [];\n\nfunction setup() {\n // Create a file input and place it beneath\n // the canvas. Allow it to load multiple files.\n input = createFileInput(handleImage, true);\n input.position(0, 100);\n}\n\nfunction draw() {\n background(200);\n\n // Draw the images if loaded. Each image\n // is drawn 20 pixels lower than the\n // previous image.\n for (let i = 0; i < images.length; i += 1) {\n // Calculate the y-coordinate.\n let y = i * 20;\n\n // Draw the image.\n image(img, 0, y, 100, 100);\n }\n\n 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.');\n}\n\n// Create an image if the file is an image,\n// then add it to the images array.\nfunction handleImage(file) {\n if (file.type === 'image') {\n let img = createImg(file.data, '');\n img.hide();\n images.push(img);\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 2068,
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Transform",
+ "submodule": "Transform"
},
{
- "file": "src/dom/dom.js",
- "line": 2115,
- "description": "<p>Creates a <code><video></code> element for simple audio/video playback.</p>\n<p><code>createVideo()</code> returns a new\n<a href=\"#/p5.MediaElement\">p5.MediaElement</a> object. Videos are shown by\ndefault. They can be hidden by calling <code>video.hide()</code> and drawn to the\ncanvas using <a href=\"#/p5/image\">image()</a>.</p>\n<p>The first parameter, <code>src</code>, is the path the video. If a single string is\npassed, as in <code>'assets/topsecret.mp4'</code>, a single video is loaded. An array\nof strings can be used to load the same video in different formats. For\nexample, <code>['assets/topsecret.mp4', 'assets/topsecret.ogv', 'assets/topsecret.webm']</code>.\nThis is useful for ensuring that the video can play across different browsers with\ndifferent capabilities. See\n<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>MDN</a>\nfor more information about supported formats.</p>\n<p>The second parameter, <code>callback</code>, is optional. It's a function to call once\nthe video is ready to play.</p>\n",
+ "name": "pop",
+ "file": "src/scripts/parsers/in/p5.js/src/core/transform.js",
+ "line": 1962,
"itemtype": "method",
- "name": "createVideo",
- "params": [
- {
- "name": "src",
- "description": "<p>path to a video file, or an array of paths for\n supporting different browsers.</p>\n",
- "type": "String|String[]"
- },
+ "description": "<p>Ends a drawing group that contains its own styles and transformations.</p>\n<p>By default, styles such as <a href=\"#/p5/fill\">fill()</a> and\ntransformations such as <a href=\"#/p5/rotate\">rotate()</a> are applied to\nall drawing that follows. The <a href=\"#/p5/push\">push()</a> and <code>pop()</code>\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('🦟', x, y);</code></pre><p>In the code snippet above, the bug's position isn't affected by\n<code>translate(mouseX, mouseY)</code> because that transformation is contained\nbetween <a href=\"#/p5/push\">push()</a> and <code>pop()</code>. The bug moves around\nthe entire canvas as expected.</p>\n<p>Note: <a href=\"#/p5/push\">push()</a> and <code>pop()</code> are always called as a\npair. Both functions are required to begin and end a drawing group.</p>\n<p><a href=\"#/p5/push\">push()</a> and <code>pop()</code> can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('🦟', x, y);</code></pre><p>In this version, the code to draw each eye is contained between its own\n<a href=\"#/p5/push\">push()</a> and <code>pop()</code> functions. Doing so makes it\neasier to add details in the correct part of a drawing.</p>\n<p><a href=\"#/p5/push\">push()</a> and <code>pop()</code> contain the effects of the\nfollowing functions:</p>\n<ul><li><a href=\"#/p5/fill\">fill()</a></li><li><a href=\"#/p5/noFill\">noFill()</a></li><li><a href=\"#/p5/noStroke\">noStroke()</a></li><li><a href=\"#/p5/stroke\">stroke()</a></li><li><a href=\"#/p5/tint\">tint()</a></li><li><a href=\"#/p5/noTint\">noTint()</a></li><li><a href=\"#/p5/strokeWeight\">strokeWeight()</a></li><li><a href=\"#/p5/strokeCap\">strokeCap()</a></li><li><a href=\"#/p5/strokeJoin\">strokeJoin()</a></li><li><a href=\"#/p5/imageMode\">imageMode()</a></li><li><a href=\"#/p5/rectMode\">rectMode()</a></li><li><a href=\"#/p5/ellipseMode\">ellipseMode()</a></li><li><a href=\"#/p5/colorMode\">colorMode()</a></li><li><a href=\"#/p5/textAlign\">textAlign()</a></li><li><a href=\"#/p5/textFont\">textFont()</a></li><li><a href=\"#/p5/textSize\">textSize()</a></li><li><a href=\"#/p5/textLeading\">textLeading()</a></li><li><a href=\"#/p5/applyMatrix\">applyMatrix()</a></li><li><a href=\"#/p5/resetMatrix\">resetMatrix()</a></li><li><a href=\"#/p5/rotate\">rotate()</a></li><li><a href=\"#/p5/scale\">scale()</a></li><li><a href=\"#/p5/shearX\">shearX()</a></li><li><a href=\"#/p5/shearY\">shearY()</a></li><li><a href=\"#/p5/translate\">translate()</a></li></ul><p>In WebGL mode, <a href=\"#/p5/push\">push()</a> and <code>pop()</code> contain the\neffects of a few additional styles:</p>\n<ul><li><a href=\"#/p5/setCamera\">setCamera()</a></li><li><a href=\"#/p5/ambientLight\">ambientLight()</a></li><li><a href=\"#/p5/directionalLight\">directionalLight()</a></li><li><a href=\"#/p5/pointLight\">pointLight()</a> <a href=\"#/p5/texture\">texture()</a></li><li><a href=\"#/p5/specularMaterial\">specularMaterial()</a></li><li><a href=\"#/p5/shininess\">shininess()</a></li><li><a href=\"#/p5/normalMaterial\">normalMaterial()</a></li><li><a href=\"#/p5/shader\">shader()</a></li></ul>",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the left circle.\n circle(25, 50, 20);\n\n // Begin the drawing group.\n push();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Style the circle.\n strokeWeight(5);\n stroke('royalblue');\n fill('orange');\n\n // Draw the circle.\n circle(0, 0, 20);\n\n // End the drawing group.\n pop();\n\n // Draw the right circle.\n circle(75, 50, 20);\n\n describe(\n 'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(24);\n\n describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n background(200);\n\n // Begin the drawing group.\n push();\n\n // Translate the origin to the mouse's position.\n translate(mouseX, mouseY);\n\n // Style the face.\n noStroke();\n fill('green');\n\n // Draw a face.\n circle(0, 0, 60);\n\n // Style the eyes.\n fill('white');\n\n // Draw the left eye.\n push();\n translate(-20, -20);\n ellipse(0, 0, 30, 20);\n fill('black');\n circle(0, 0, 8);\n pop();\n\n // Draw the right eye.\n push();\n translate(20, -20);\n ellipse(0, 0, 30, 20);\n fill('black');\n circle(0, 0, 8);\n pop();\n\n // End the drawing group.\n pop();\n\n // Draw a bug.\n let x = random(0, 100);\n let y = random(0, 100);\n text('🦟', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the red sphere.\n push();\n translate(-25, 0, 0);\n noStroke();\n directionalLight(255, 0, 0, 0, 0, -1);\n sphere(20);\n pop();\n\n // Draw the blue sphere.\n push();\n translate(25, 0, 0);\n strokeWeight(0.3);\n stroke(0, 0, 255);\n noFill();\n sphere(20);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "callback",
- "description": "<p>function to call once the video is ready to play.</p>\n",
- "type": "Function",
- "optional": true
+ "params": []
}
],
- "return": {
- "description": "new <a href=\"#/p5.MediaElement\">p5.MediaElement</a> object.",
- "type": "p5.MediaElement"
- },
- "example": [
- "\n<div class='notest'>\n<code>\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Note: this may not work in some browsers.\n let video = createVideo('assets/small.mp4');\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Provide an array options for different file formats.\n let video = createVideo(\n ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm']\n );\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nlet video;\n\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Provide an array options for different file formats.\n // Call mute() once the video loads.\n video = createVideo(\n ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],\n muteVideo\n );\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n\n// Mute the video once it loads.\nfunction muteVideo() {\n video.volume(0);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Transform",
+ "submodule": "Transform"
},
{
- "file": "src/dom/dom.js",
- "line": 2211,
+ "name": "storeItem",
+ "file": "src/scripts/parsers/in/p5.js/src/data/local_storage.js",
+ "line": 123,
+ "itemtype": "method",
+ "description": "<p>Stores a value in the web browser's local storage.</p>\n<p>Web browsers can save small amounts of data using the built-in\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">localStorage object</a>.\nData stored in <code>localStorage</code> can be retrieved at any point, even after\nrefreshing a page or restarting the browser. Data are stored as key-value\npairs.</p>\n<p><code>storeItem()</code> makes it easy to store values in <code>localStorage</code> and\n<a href=\"#/p5/getItem\">getItem()</a> makes it easy to retrieve them.</p>\n<p>The first parameter, <code>key</code>, is the name of the value to be stored as a\nstring.</p>\n<p>The second parameter, <code>value</code>, is the value to be stored. Values can have\nany type.</p>\n<p>Note: Sensitive data such as passwords or personal information shouldn't be\nstored in <code>localStorage</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Store the player's name.\n storeItem('name', 'Feist');\n\n // Store the player's score.\n storeItem('score', 1234);\n\n describe('The text \"Feist: 1234\" written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Retrieve the name.\n let name = getItem('name');\n\n // Retrieve the score.\n let score = getItem('score');\n\n // Display the score.\n text(`${name}: ${score}`, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an object.\n let p = { x: 50, y: 50 };\n\n // Store the object.\n storeItem('position', p);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Retrieve the object.\n let p = getItem('position');\n\n // Draw the circle.\n circle(p.x, p.y, 30);\n}\n</code>\n</div>\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let c = color('deeppink');\n\n // Store the object.\n storeItem('color', c);\n\n describe('A pink circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Retrieve the object.\n let c = getItem('color');\n\n // Style the circle.\n fill(c);\n\n // Draw the circle.\n circle(50, 50, 30);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "key",
+ "description": "name of the value.",
+ "type": "String"
+ },
+ {
+ "name": "value",
+ "description": "value to be stored.",
+ "type": "String|Number|Boolean|Object|Array"
+ }
+ ]
+ }
+ ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Data",
+ "submodule": "LocalStorage"
},
{
- "file": "src/dom/dom.js",
- "line": 2213,
- "description": "<p>Creates a hidden <code><audio></code> element for simple audio playback.</p>\n<p><code>createAudio()</code> returns a new\n<a href=\"#/p5.MediaElement\">p5.MediaElement</a> object.</p>\n<p>The first parameter, <code>src</code>, is the path the video. If a single string is\npassed, as in <code>'assets/video.mp4'</code>, a single video is loaded. An array\nof strings can be used to load the same video in different formats. For\nexample, <code>['assets/video.mp4', 'assets/video.ogv', 'assets/video.webm']</code>.\nThis is useful for ensuring that the video can play across different\nbrowsers with different capabilities. See\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats\" target=\"_blank\">MDN</a>\nfor more information about supported formats.</p>\n<p>The second parameter, <code>callback</code>, is optional. It's a function to call once\nthe audio is ready to play.</p>\n",
+ "name": "getItem",
+ "file": "src/scripts/parsers/in/p5.js/src/data/local_storage.js",
+ "line": 280,
"itemtype": "method",
- "name": "createAudio",
- "params": [
- {
- "name": "src",
- "description": "<p>path to an audio file, or an array of paths\n for supporting different browsers.</p>\n",
- "type": "String|String[]",
- "optional": true
- },
+ "description": "<p>Returns a value in the web browser's local storage.</p>\n<p>Web browsers can save small amounts of data using the built-in\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">localStorage object</a>.\nData stored in <code>localStorage</code> can be retrieved at any point, even after\nrefreshing a page or restarting the browser. Data are stored as key-value\npairs.</p>\n<p><a href=\"#/p5/storeItem\">storeItem()</a> makes it easy to store values in\n<code>localStorage</code> and <code>getItem()</code> makes it easy to retrieve them.</p>\n<p>The first parameter, <code>key</code>, is the name of the value to be stored as a\nstring.</p>\n<p>The second parameter, <code>value</code>, is the value to be retrieved a string. For\nexample, calling <code>getItem('size')</code> retrieves the value with the key <code>size</code>.</p>\n<p>Note: Sensitive data such as passwords or personal information shouldn't be\nstored in <code>localStorage</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Store the player's name.\n storeItem('name', 'Feist');\n\n // Store the player's score.\n storeItem('score', 1234);\n\n describe('The text \"Feist: 1234\" written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Retrieve the name.\n let name = getItem('name');\n\n // Retrieve the score.\n let score = getItem('score');\n\n // Display the score.\n text(`${name}: ${score}`, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an object.\n let p = { x: 50, y: 50 };\n\n // Store the object.\n storeItem('position', p);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Retrieve the object.\n let p = getItem('position');\n\n // Draw the circle.\n circle(p.x, p.y, 30);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let c = color('deeppink');\n\n // Store the object.\n storeItem('color', c);\n\n describe('A pink circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Retrieve the object.\n let c = getItem('color');\n\n // Style the circle.\n fill(c);\n\n // Draw the circle.\n circle(50, 50, 30);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "callback",
- "description": "<p>function to call once the audio is ready to play.</p>\n",
- "type": "Function",
- "optional": true
+ "params": [
+ {
+ "name": "key",
+ "description": "name of the value.",
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "stored item.",
+ "type": "String|Number|Boolean|Object|Array"
+ }
}
],
"return": {
- "description": "new <a href=\"#/p5.MediaElement\">p5.MediaElement</a> object.",
- "type": "p5.MediaElement"
+ "description": "stored item.",
+ "type": "String|Number|Boolean|Object|Array"
},
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "LocalStorage"
+ },
+ {
+ "name": "clearStorage",
+ "file": "src/scripts/parsers/in/p5.js/src/data/local_storage.js",
+ "line": 371,
+ "itemtype": "method",
+ "description": "<p>Removes all items in the web browser's local storage.</p>\n<p>Web browsers can save small amounts of data using the built-in\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">localStorage object</a>.\nData stored in <code>localStorage</code> can be retrieved at any point, even after\nrefreshing a page or restarting the browser. Data are stored as key-value\npairs. Calling <code>clearStorage()</code> removes all data from <code>localStorage</code>.</p>\n<p>Note: Sensitive data such as passwords or personal information shouldn't be\nstored in <code>localStorage</code>.</p>\n",
"example": [
- "\n<div class='notest'>\n<code>\nfunction setup() {\n noCanvas();\n\n // Load the audio.\n let beat = createAudio('assets/beat.mp3');\n\n // Show the default audio controls.\n beat.showControls();\n\n describe('An audio beat plays when the user double-clicks the square.');\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Double-click to clear localStorage.\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Store the player's name.\n storeItem('name', 'Feist');\n\n // Store the player's score.\n storeItem('score', 1234);\n\n describe(\n 'The text \"Feist: 1234\" written in black on a gray background. The text \"null: null\" appears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Retrieve the name.\n let name = getItem('name');\n\n // Retrieve the score.\n let score = getItem('score');\n\n // Display the score.\n text(`${name}: ${score}`, 50, 50);\n}\n\n// Clear localStorage when the user double-clicks.\nfunction doubleClicked() {\n clearStorage();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": []
+ }
],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Data",
+ "submodule": "LocalStorage"
},
{
- "file": "src/dom/dom.js",
- "line": 2259,
+ "name": "removeItem",
+ "file": "src/scripts/parsers/in/p5.js/src/data/local_storage.js",
+ "line": 445,
+ "itemtype": "method",
+ "description": "<p>Removes an item from the web browser's local storage.</p>\n<p>Web browsers can save small amounts of data using the built-in\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">localStorage object</a>.\nData stored in <code>localStorage</code> can be retrieved at any point, even after\nrefreshing a page or restarting the browser. Data are stored as key-value\npairs.</p>\n<p><a href=\"#/p5/storeItem\">storeItem()</a> makes it easy to store values in\n<code>localStorage</code> and <code>removeItem()</code> makes it easy to delete them.</p>\n<p>The parameter, <code>key</code>, is the name of the value to remove as a string. For\nexample, calling <code>removeItem('size')</code> removes the item with the key <code>size</code>.</p>\n<p>Note: Sensitive data such as passwords or personal information shouldn't be\nstored in <code>localStorage</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to remove an item from localStorage.\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Store the player's name.\n storeItem('name', 'Feist');\n\n // Store the player's score.\n storeItem('score', 1234);\n\n describe(\n 'The text \"Feist: 1234\" written in black on a gray background. The text \"Feist: null\" appears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Retrieve the name.\n let name = getItem('name');\n\n // Retrieve the score.\n let score = getItem('score');\n\n // Display the score.\n text(`${name}: ${score}`, 50, 50);\n}\n\n// Remove the word from localStorage when the user double-clicks.\nfunction doubleClicked() {\n removeItem('score');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "key",
+ "description": "name of the value to remove.",
+ "type": "String"
+ }
+ ]
+ }
+ ],
"class": "p5",
- "module": "DOM",
- "submodule": "DOM"
+ "static": false,
+ "module": "Data",
+ "submodule": "LocalStorage"
},
{
- "file": "src/dom/dom.js",
- "line": 2295,
- "description": "<p>Creates a <code><video></code> element that \"captures\" the audio/video stream from\nthe webcam and microphone.</p>\n<p><code>createCapture()</code> returns a new\n<a href=\"#/p5.MediaElement\">p5.MediaElement</a> object. Videos are shown by\ndefault. They can be hidden by calling <code>capture.hide()</code> and drawn to the\ncanvas using <a href=\"#/p5/image\">image()</a>.</p>\n<p>The first parameter, <code>type</code>, is optional. It sets the type of capture to\nuse. By default, <code>createCapture()</code> captures both audio and video. If <code>VIDEO</code>\nis passed, as in <code>createCapture(VIDEO)</code>, only video will be captured.\nIf <code>AUDIO</code> is passed, as in <code>createCapture(AUDIO)</code>, only audio will be\ncaptured. A constraints object can also be passed to customize the stream.\nSee the <a href=\"http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints\" target=\"_blank\">\nW3C documentation</a> for possible properties. Different browsers support different\nproperties.</p>\n<p>The 'flipped' property is an optional property which can be set to <code>{flipped:true}</code>\nto mirror the video output.If it is true then it means that video will be mirrored\nor flipped and if nothing is mentioned then by default it will be <code>false</code>.</p>\n<p>The second parameter,<code>callback</code>, is optional. It's a function to call once\nthe capture is ready for use. The callback function should have one\nparameter, <code>stream</code>, that's a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaStream\" target=\"_blank\">MediaStream</a> object.</p>\n<p>Note: <code>createCapture()</code> only works when running a sketch locally or using HTTPS. Learn more\n<a href=\"http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https\" target=\"_blank\">here</a>\nand <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia\" target=\"_blank\">here</a>.</p>\n",
+ "name": "select",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 101,
"itemtype": "method",
- "name": "createCapture",
- "params": [
- {
- "name": "type",
- "description": "<p>type of capture, either AUDIO or VIDEO,\n or a constraints object. Both video and audio\n audio streams are captured by default.</p>\n",
- "type": "String|Constant|Object",
- "optional": true
- },
- {
- "name": "flipped",
- "description": "<p>flip the capturing video and mirror the output with <code>{flipped:true}</code>. By\n default it is false.</p>\n",
- "type": "Object",
- "optional": true
- },
+ "description": "<p>Searches the page for the first element that matches the given\n<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>.</p>\n<p>The selector string can be an ID, class, tag name, or a combination.\n<code>select()</code> returns a <a href=\"#/p5.Element\">p5.Element</a> object if it\nfinds a match and <code>null</code> if not.</p>\n<p>The second parameter, <code>container</code>, is optional. It specifies a container to\nsearch within. <code>container</code> can be CSS selector string, a\n<a href=\"#/p5.Element\">p5.Element</a> object, or an\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement\" target=\"_blank\">HTMLElement</a> object.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n\n // Select the canvas by its tag.\n let cnv = select('canvas');\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n // Add a class attribute to the canvas.\n cnv.class('pinkborder');\n\n background(200);\n\n // Select the canvas by its class.\n cnv = select('.pinkborder');\n\n // Style its border.\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n // Set the canvas' ID.\n cnv.id('mycanvas');\n\n background(200);\n\n // Select the canvas by its ID.\n cnv = select('#mycanvas');\n\n // Style its border.\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "callback",
- "description": "<p>function to call once the stream\n has loaded.</p>\n",
- "type": "Function",
- "optional": true
+ "params": [
+ {
+ "name": "selectors",
+ "description": "CSS selector string of element to search for.",
+ "type": "String"
+ },
+ {
+ "name": "container",
+ "description": "CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>, or\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement\" target=\"_blank\">HTMLElement</a> to search within.",
+ "optional": 1,
+ "type": "String|p5.Element|HTMLElement"
+ }
+ ],
+ "return": {
+ "description": "<a href=\"#/p5.Element\">p5.Element</a> containing the element.",
+ "type": "p5.Element|"
+ }
}
],
"return": {
- "description": "new <a href=\"#/p5.MediaElement\">p5.MediaElement</a> object.",
- "type": "p5.MediaElement"
+ "description": "<a href=\"#/p5.Element\">p5.Element</a> containing the element.",
+ "type": "p5.Element|"
},
- "example": [
- "\n<div class='notest'>\n<code>\nfunction setup() {\n noCanvas();\n\n // Create the video capture.\n createCapture(VIDEO);\n\n describe('A video stream from the webcam.');\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the video capture and hide the element.\n capture = createCapture(VIDEO);\n capture.hide();\n\n describe('A video stream from the webcam with inverted colors.');\n}\n\nfunction draw() {\n // Draw the video capture within the canvas.\n image(capture, 0, 0, width, width * capture.height / capture.width);\n\n // Invert the colors in the stream.\n filter(INVERT);\n}\n</code>\n</div>\n<div class='notest'>\n<code>\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the video capture with mirrored output.\n capture = createCapture(VIDEO,{ flipped:true });\n capture.size(100,100);\n\n describe('A video stream from the webcam with flipped or mirrored output.');\n}\n\n</code>\n</div>\n\n<div class='notest norender'>\n<code>\nfunction setup() {\n createCanvas(480, 120);\n\n // Create a constraints object.\n let constraints = {\n video: {\n mandatory: {\n minWidth: 1280,\n minHeight: 720\n },\n optional: [{ maxFrameRate: 10 }]\n },\n audio: false\n };\n\n // Create the video capture.\n createCapture(constraints);\n\n describe('A video stream from the webcam.');\n}\n</code>\n</div>"
- ],
"class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 2493,
- "description": "<p>Creates a new <a href=\"#/p5.Element\">p5.Element</a> object.</p>\n<p>The first parameter, <code>tag</code>, is a string an HTML tag such as <code>'h5'</code>.</p>\n<p>The second parameter, <code>content</code>, is optional. It's a string that sets the\nHTML content to insert into the new element. New elements have no content\nby default.</p>\n",
+ "name": "selectAll",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 195,
"itemtype": "method",
- "name": "createElement",
- "params": [
- {
- "name": "tag",
- "description": "<p>tag for the new element.</p>\n",
- "type": "String"
- },
+ "description": "<p>Searches the page for all elements that matches the given\n<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>.</p>\n<p>The selector string can be an ID, class, tag name, or a combination.\n<code>selectAll()</code> returns an array of <a href=\"#/p5.Element\">p5.Element</a>\nobjects if it finds any matches and an empty array if none are found.</p>\n<p>The second parameter, <code>container</code>, is optional. It specifies a container to\nsearch within. <code>container</code> can be CSS selector string, a\n<a href=\"#/p5.Element\">p5.Element</a> object, or an\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement\" target=\"_blank\">HTMLElement</a> object.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create three buttons.\n createButton('1');\n createButton('2');\n createButton('3');\n\n // Select the buttons by their tag.\n let buttons = selectAll('button');\n\n // Position the buttons.\n for (let i = 0; i < 3; i += 1) {\n buttons[i].position(0, i * 30);\n }\n\n describe('Three buttons stacked vertically. The buttons are labeled, \"1\", \"2\", and \"3\".');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Create three buttons and position them.\n let b1 = createButton('1');\n b1.position(0, 0);\n let b2 = createButton('2');\n b2.position(0, 30);\n let b3 = createButton('3');\n b3.position(0, 60);\n\n // Add a class attribute to each button.\n b1.class('btn');\n b2.class('btn btn-pink');\n b3.class('btn');\n\n // Select the buttons by their class.\n let buttons = selectAll('.btn');\n let pinkButtons = selectAll('.btn-pink');\n\n // Style the selected buttons.\n buttons.forEach(setFont);\n pinkButtons.forEach(setColor);\n\n describe('Three buttons stacked vertically. The buttons are labeled, \"1\", \"2\", and \"3\". Buttons \"1\" and \"3\" are gray. Button \"2\" is pink.');\n}\n\n// Set a button's font to Comic Sans MS.\nfunction setFont(btn) {\n btn.style('font-family', 'Comic Sans MS');\n}\n\n// Set a button's background and font color.\nfunction setColor(btn) {\n btn.style('background', 'deeppink');\n btn.style('color', 'white');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "content",
- "description": "<p>HTML content to insert into the element.</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "selectors",
+ "description": "CSS selector string of element to search for.",
+ "type": "String"
+ },
+ {
+ "name": "container",
+ "description": "CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>, or\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement\" target=\"_blank\">HTMLElement</a> to search within.",
+ "optional": 1,
+ "type": "String|p5.Element|HTMLElement"
+ }
+ ],
+ "return": {
+ "description": "array of <a href=\"#/p5.Element\">p5.Element</a>s containing any elements found.",
+ "type": "p5.Element[]"
+ }
}
],
"return": {
- "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
- "type": "p5.Element"
+ "description": "array of <a href=\"#/p5.Element\">p5.Element</a>s containing any elements found.",
+ "type": "p5.Element[]"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h5 element with nothing in it.\n createElement('h5');\n\n describe('A gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h5 element with the content \"p5*js\".\n let h5 = createElement('h5', 'p5*js');\n\n // Set the element's style and position.\n h5.style('color', 'deeppink');\n h5.position(30, 15);\n\n describe('The text \"p5*js\" written in pink in the middle of a gray square.');\n}\n</code>\n</div>"
- ],
"class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 2554,
- "description": "<p>Adds a class to the element.</p>\n",
+ "name": "createElement",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 308,
"itemtype": "method",
- "name": "addClass",
- "params": [
+ "description": "<p>Creates a new <a href=\"#/p5.Element\">p5.Element</a> object.</p>\n<p>The first parameter, <code>tag</code>, is a string an HTML tag such as <code>'h5'</code>.</p>\n<p>The second parameter, <code>content</code>, is optional. It's a string that sets the\nHTML content to insert into the new element. New elements have no content\nby default.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h5 element with nothing in it.\n createElement('h5');\n\n describe('A gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h5 element with the content \"p5*js\".\n let h5 = createElement('h5', 'p5*js');\n\n // Set the element's style and position.\n h5.style('color', 'deeppink');\n h5.position(30, 15);\n\n describe('The text \"p5*js\" written in pink in the middle of a gray square.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "class",
- "description": "<p>name of class to add.</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "tag",
+ "description": "tag for the new element.",
+ "type": "String"
+ },
+ {
+ "name": "content",
+ "description": "HTML content to insert into the element.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n <div class='norender'>\n <code>\n function setup() {\n createCanvas(100, 100);\n background(200);\n // Create a div element.\n let div = createDiv('div');\n // Add a class to the div.\n div.addClass('myClass');\n describe('A gray square.');\n }\n </code>\n </div>"
- ],
- "class": "p5.Element",
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ },
+ "class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 2593,
- "description": "<p>Removes a class from the element.</p>\n",
+ "name": "removeElements",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 383,
"itemtype": "method",
- "name": "removeClass",
- "params": [
+ "description": "<p>Removes all elements created by p5.js, including any event handlers.</p>\n<p>There are two exceptions:\ncanvas elements created by <a href=\"#/p5/createCanvas\">createCanvas()</a>\nand <a href=\"#/p5.Renderer\">p5.Render</a> objects created by\n<a href=\"#/p5/createGraphics\">createGraphics()</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and place\n // it in the middle of the canvas.\n let p = createP('p5*js');\n p.position(25, 25);\n\n describe('A gray square with the text \"p5*js\" written in its center. The text disappears when the mouse is pressed.');\n}\n\n// Remove all elements when the mouse is pressed.\nfunction mousePressed() {\n removeElements();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a paragraph element and place\n // it at the top of the canvas.\n let p = createP('p5*js');\n p.position(25, 25);\n\n // Create a slider element and place it\n // beneath the canvas.\n slider = createSlider(0, 255, 200);\n slider.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n // Use the slider value to change the background color.\n let g = slider.value();\n background(g);\n}\n\n// Remove all elements when the mouse is double-clicked.\nfunction doubleClicked() {\n removeElements();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "class",
- "description": "<p>name of class to remove.</p>\n",
- "type": "String"
+ "params": []
}
],
- "chainable": 1,
- "example": [
- "\n<div class='norender'>\n<code>\n// In this example, a class is set when the div is created\n// and removed when mouse is pressed. This could link up\n// with a CSS style rule to toggle style properties.\n\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add a class to the div.\n div.addClass('myClass');\n\n describe('A gray square.');\n}\n\n// Remove 'myClass' from the div when the user presses the mouse.\nfunction mousePressed() {\n div.removeClass('myClass');\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
+ "class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 2636,
- "description": "<p>Checks if a class is already applied to element.</p>\n",
+ "name": "addElement",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 1311,
"itemtype": "method",
- "name": "hasClass",
- "return": {
- "description": "a boolean value if element has specified class.",
- "type": "Boolean"
- },
- "params": [
+ "description": "Helpers for create methods.",
+ "example": [],
+ "overloads": [
{
- "name": "c",
- "description": "<p>name of class to check.</p>\n",
- "type": "String"
+ "params": []
+ },
+ {
+ "params": []
}
],
- "example": [
- "\n<div class='norender'>\n<code>\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add the class 'show' to the div.\n div.addClass('show');\n\n describe('A gray square.');\n}\n\n// Toggle the class 'show' when the mouse is pressed.\nfunction mousePressed() {\n if (div.hasClass('show')) {\n div.addClass('show');\n } else {\n div.removeClass('show');\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
+ "class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 2677,
- "description": "<p>Toggles whether a class is applied to the element.</p>\n",
+ "name": "createDiv",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 450,
"itemtype": "method",
- "name": "toggleClass",
- "params": [
+ "description": "<p>Creates a <code><div></div></code> element.</p>\n<p><code><div></div></code> elements are commonly used as containers for\nother elements.</p>\n<p>The parameter <code>html</code> is optional. It accepts a string that sets the\ninner HTML of the new <code><div></div></code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element and set its position.\n let div = createDiv('p5*js');\n div.position(25, 35);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h3 element within the div.\n let div = createDiv('<h3>p5*js</h3>');\n div.position(20, 5);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "c",
- "description": "<p>class name to toggle.</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "html",
+ "description": "inner HTML for the new <code><div></div></code> element.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div class='norender'>\n<code>\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add the 'show' class to the div.\n div.addClass('show');\n\n describe('A gray square.');\n}\n\n// Toggle the 'show' class when the mouse is pressed.\nfunction mousePressed() {\n div.toggleClass('show');\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ },
+ "class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 2722,
- "description": "<p>Attaches the element as a child of another element.</p>\n<p><code>myElement.child()</code> accepts either a string ID, DOM node, or\n<a href=\"#/p5.Element\">p5.Element</a>. For example,\n<code>myElement.child(otherElement)</code>. If no argument is provided, an array of\nchildren DOM nodes is returned.</p>\n",
+ "name": "createP",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 485,
"itemtype": "method",
- "name": "child",
- "return": {
- "description": "an array of child nodes.",
- "type": "Node[]"
- },
+ "description": "<p>Creates a paragraph element.</p>\n<p><code><p></p></code> elements are commonly used for paragraph-length text.</p>\n<p>The parameter <code>html</code> is optional. It accepts a string that sets the\ninner HTML of the new <code><p></p></code>.</p>\n",
"example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n let div1 = createDiv('Child');\n\n // Make div1 the child of div0\n // using the p5.Element.\n div0.child(div1);\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n let div1 = createDiv('Child');\n\n // Give div1 an ID.\n div1.id('apples');\n\n // Make div1 the child of div0\n // using its ID.\n div0.child('apples');\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\n// This example assumes there is a div already on the page\n// with id \"myChildDiv\".\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n\n // Select the child element by its ID.\n let elt = document.getElementById('myChildDiv');\n\n // Make div1 the child of div0\n // using its HTMLElement object.\n div0.child(elt);\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its position.\n let p = createP('Tell me a story.');\n p.position(5, 0);\n\n describe('A gray square displaying the text \"Tell me a story.\" written in black.');\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 2722,
- "params": [],
- "return": {
- "description": "an array of child nodes.",
- "type": "Node[]"
- }
- },
- {
- "line": 2802,
"params": [
{
- "name": "child",
- "description": "<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n to add to the current element</p>\n",
- "type": "String|p5.Element",
- "optional": true
+ "name": "html",
+ "description": "inner HTML for the new <code><p></p></code> element.",
+ "optional": 1,
+ "type": "String"
}
],
- "chainable": 1
- }
- ]
- },
- {
- "file": "src/dom/dom.js",
- "line": 2827,
- "description": "<p>Centers the element either vertically, horizontally, or both.</p>\n<p><code>center()</code> will center the element relative to its parent or according to\nthe page's body if the element has no parent.</p>\n<p>If no argument is passed, as in <code>myElement.center()</code> the element is aligned\nboth vertically and horizontally.</p>\n",
- "itemtype": "method",
- "name": "center",
- "params": [
- {
- "name": "align",
- "description": "<p>passing 'vertical', 'horizontal' aligns element accordingly</p>\n",
- "type": "String",
- "optional": true
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element and style it.\n let div = createDiv('');\n div.size(10, 10);\n div.style('background-color', 'orange');\n\n // Center the div relative to the page's body.\n div.center();\n\n describe('A gray square and an orange rectangle. The rectangle is at the center of the page.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ },
+ "class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 2893,
- "description": "<p>Sets the inner HTML of the element, replacing any existing HTML.</p>\n<p>The second parameter, <code>append</code>, is optional. If <code>true</code> is passed, as in\n<code>myElement.html('hi', true)</code>, the HTML is appended instead of replacing\nexisting HTML.</p>\n<p>If no arguments are passed, as in <code>myElement.html()</code>, the element's inner\nHTML is returned.</p>\n",
+ "name": "createSpan",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 556,
"itemtype": "method",
- "name": "html",
- "return": {
- "description": "the inner HTML of the element",
- "type": "String"
- },
+ "description": "<p>Creates a <code><span></span></code> element.</p>\n<p><code><span></span></code> elements are commonly used as containers\nfor inline elements. For example, a <code><span></span></code>\ncan hold part of a sentence that's a\n<span style=\"color: deeppink;\">different</span> style.</p>\n<p>The parameter <code>html</code> is optional. It accepts a string that sets the\ninner HTML of the new <code><span></span></code>.</p>\n",
"example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the div element and set its size.\n let div = createDiv('');\n div.size(100, 100);\n\n // Set the inner HTML to \"hi\".\n div.html('hi');\n\n describe('A gray square with the word \"hi\" written beneath it.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element and set its size.\n let div = createDiv('Hello ');\n div.size(100, 100);\n\n // Append \"World\" to the div's HTML.\n div.html('World', true);\n\n describe('A gray square with the text \"Hello World\" written beneath it.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element.\n let div = createDiv('Hello');\n\n // Prints \"Hello\" to the console.\n print(div.html());\n\n describe('A gray square with the word \"Hello!\" written beneath it.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a span element and set its position.\n let span = createSpan('p5*js');\n span.position(25, 35);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Create a div element as a container.\n let div = createDiv();\n\n // Place the div at the center.\n div.position(25, 35);\n\n // Create a span element.\n let s1 = createSpan('p5');\n\n // Create a second span element.\n let s2 = createSpan('*');\n\n // Set the second span's font color.\n s2.style('color', 'deeppink');\n\n // Create a third span element.\n let s3 = createSpan('js');\n\n // Add all the spans to the container div.\n s1.parent(div);\n s2.parent(div);\n s3.parent(div);\n\n describe('A gray square with the text \"p5*js\" written in black at its center. The asterisk is pink.');\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 2893,
- "params": [],
- "return": {
- "description": "the inner HTML of the element",
- "type": "String"
- }
- },
- {
- "line": 2962,
"params": [
{
"name": "html",
- "description": "<p>the HTML to be placed inside the element</p>\n",
- "type": "String",
- "optional": true
- },
- {
- "name": "append",
- "description": "<p>whether to append HTML to existing</p>\n",
- "type": "Boolean",
- "optional": true
+ "description": "inner HTML for the new <code><span></span></code> element.",
+ "optional": 1,
+ "type": "String"
}
],
- "chainable": 1
- }
- ]
- },
- {
- "file": "src/dom/dom.js",
- "line": 2980,
- "description": "<p>Sets the element's position.</p>\n<p>The first two parameters, <code>x</code> and <code>y</code>, set the element's position relative\nto the top-left corner of the web page.</p>\n<p>The third parameter, <code>positionType</code>, is optional. It sets the element's\n<a target=\"_blank\"\nhref=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\">positioning scheme</a>.\n<code>positionType</code> is a string that can be either <code>'static'</code>, <code>'fixed'</code>,\n<code>'relative'</code>, <code>'sticky'</code>, <code>'initial'</code>, or <code>'inherit'</code>.</p>\n<p>If no arguments passed, as in <code>myElement.position()</code>, the method returns\nthe element's position in an object, as in <code>{ x: 0, y: 0 }</code>.</p>\n",
- "itemtype": "method",
- "name": "position",
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ }
+ }
+ ],
"return": {
- "description": "object of form `{ x: 0, y: 0 }` containing the element's position.",
- "type": "Object"
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
},
+ "class": "p5",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "createImg",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 615,
+ "itemtype": "method",
+ "description": "<p>Creates an <code><img></code> element that can appear outside of the canvas.</p>\n<p>The first parameter, <code>src</code>, is a string with the path to the image file.\n<code>src</code> should be a relative path, as in <code>'assets/image.png'</code>, or a URL, as\nin <code>'https://example.com/image.png'</code>.</p>\n<p>The second parameter, <code>alt</code>, is a string with the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes\" target=\"_blank\">alternate text</a>\nfor the image. An empty string <code>''</code> can be used for images that aren't displayed.</p>\n<p>The third parameter, <code>crossOrigin</code>, is optional. It's a string that sets the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes\" target=\"_blank\">crossOrigin property</a>\nof the image. Use <code>'anonymous'</code> or <code>'use-credentials'</code> to fetch the image\nwith cross-origin access.</p>\n<p>The fourth parameter, <code>callback</code>, is also optional. It sets a function to\ncall after the image loads. The new image is passed to the callback\nfunction as a <a href=\"#/p5.Element\">p5.Element</a> object.</p>\n",
"example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Positions the canvas 50px to the right and 100px\n // below the top-left corner of the window.\n cnv.position(50, 100);\n\n describe('A gray square that is 50 pixels to the right and 100 pixels down from the top-left corner of the web page.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Positions the canvas at the top-left corner\n // of the window with a 'fixed' position type.\n cnv.position(0, 0, 'fixed');\n\n describe('A gray square in the top-left corner of the web page.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n let img = createImg(\n 'https://p5js.org/assets/img/asterisk-01.png',\n 'The p5.js magenta asterisk.'\n );\n img.position(0, -10);\n\n describe('A gray square with a magenta asterisk in its center.');\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 2980,
- "params": [],
+ "params": [
+ {
+ "name": "src",
+ "description": "relative path or URL for the image.",
+ "type": "String"
+ },
+ {
+ "name": "alt",
+ "description": "alternate text for the image.",
+ "type": "String"
+ }
+ ],
"return": {
- "description": "object of form `{ x: 0, y: 0 }` containing the element's position.",
- "type": "Object"
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
}
},
{
- "line": 3031,
"params": [
{
- "name": "x",
- "description": "<p>x-position relative to top-left of window (optional)</p>\n",
- "type": "Number",
- "optional": true
+ "name": "src",
+ "type": "String"
},
{
- "name": "y",
- "description": "<p>y-position relative to top-left of window (optional)</p>\n",
- "type": "Number",
- "optional": true
+ "name": "alt",
+ "type": "String"
},
{
- "name": "positionType",
- "description": "<p>it can be static, fixed, relative, sticky, initial or inherit (optional)</p>\n",
- "type": "String",
- "optional": true
+ "name": "crossOrigin",
+ "description": "crossOrigin property to use when fetching the image.",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "successCallback",
+ "description": "function to call once the image loads. The new image will be passed\nto the function as a <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "optional": 1,
+ "type": "Function"
}
],
- "chainable": 1
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ }
}
- ]
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 3118,
- "description": "<p>Applies a style to the element by adding a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax\" target=\"_blank\">CSS declaration</a>.</p>\n<p>The first parameter, <code>property</code>, is a string. If the name of a style\nproperty is passed, as in <code>myElement.style('color')</code>, the method returns\nthe current value as a string or <code>null</code> if it hasn't been set. If a\n<code>property:style</code> string is passed, as in\n<code>myElement.style('color:deeppink')</code>, the method sets the style <code>property</code>\nto <code>value</code>.</p>\n<p>The second parameter, <code>value</code>, is optional. It sets the property's value.\n<code>value</code> can be a string, as in\n<code>myElement.style('color', 'deeppink')</code>, or a\n<a href=\"#/p5.Color\">p5.Color</a> object, as in\n<code>myElement.style('color', myColor)</code>.</p>\n",
+ "name": "createA",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 691,
"itemtype": "method",
- "name": "style",
- "return": {
- "description": "value of the property.",
- "type": "String"
- },
+ "description": "<p>Creates an <code><a></a></code> element that links to another web page.</p>\n<p>The first parmeter, <code>href</code>, is a string that sets the URL of the linked\npage.</p>\n<p>The second parameter, <code>html</code>, is a string that sets the inner HTML of the\nlink. It's common to use text, images, or buttons as links.</p>\n<p>The third parameter, <code>target</code>, is optional. It's a string that tells the\nweb browser where to open the link. By default, links open in the current\nbrowser tab. Passing <code>'_blank'</code> will cause the link to open in a new\nbrowser tab. MDN describes a few\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\" target=\"_blank\">other options</a>.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its font color to \"deeppink\".\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color', 'deeppink');\n\n describe('The text p5*js written in pink on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color('deeppink');\n\n // Create a paragraph element and set its font color using a p5.Color object.\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color', c);\n\n describe('The text p5*js written in pink on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its font color to \"deeppink\"\n // using property:value syntax.\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color:deeppink');\n\n describe('The text p5*js written in pink on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an empty paragraph element and set its font color to \"deeppink\".\n let p = createP();\n p.position(5, 5);\n p.style('color', 'deeppink');\n\n // Get the element's color as an RGB color string.\n let c = p.style('color');\n\n // Set the element's inner HTML using the RGB color string.\n p.html(c);\n\n describe('The text \"rgb(255, 20, 147)\" written in pink on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an anchor element that links to p5js.org.\n let a = createA('https://p5js.org/', 'p5*js');\n a.position(25, 35);\n\n describe('The text \"p5*js\" written at the center of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Create an anchor tag that links to p5js.org.\n // Open the link in a new tab.\n let a = createA('https://p5js.org/', 'p5*js', '_blank');\n a.position(25, 35);\n\n describe('The text \"p5*js\" written at the center of a gray square.');\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 3118,
"params": [
{
- "name": "property",
- "description": "<p>style property to set.</p>\n",
+ "name": "href",
+ "description": "URL of linked page.",
+ "type": "String"
+ },
+ {
+ "name": "html",
+ "description": "inner HTML of link element to display.",
+ "type": "String"
+ },
+ {
+ "name": "target",
+ "description": "target where the new link should open,\neither <code>'_blank'</code>, <code>'_self'</code>, <code>'_parent'</code>, or <code>'_top'</code>.",
+ "optional": 1,
"type": "String"
}
],
"return": {
- "description": "value of the property.",
- "type": "String"
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
}
- },
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "createSlider",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 821,
+ "itemtype": "method",
+ "description": "<p>Creates a slider <code><input></input></code> element.</p>\n<p>Range sliders are useful for quickly selecting numbers from a given range.</p>\n<p>The first two parameters, <code>min</code> and <code>max</code>, are numbers that set the\nslider's minimum and maximum.</p>\n<p>The third parameter, <code>value</code>, is optional. It's a number that sets the\nslider's default value.</p>\n<p>The fourth parameter, <code>step</code>, is also optional. It's a number that sets the\nspacing between each value in the slider's range. Setting <code>step</code> to 0\nallows the slider to move smoothly from <code>min</code> to <code>max</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n slider = createSlider(0, 255);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n slider = createSlider(0, 255, 0);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n // Set its step size to 50.\n slider = createSlider(0, 255, 0, 50);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n // Set its step size to 0 so that it moves smoothly.\n slider = createSlider(0, 255, 0, 0);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 3218,
"params": [
{
- "name": "property",
- "description": "",
- "type": "String"
+ "name": "min",
+ "description": "minimum value of the slider.",
+ "type": "Number"
+ },
+ {
+ "name": "max",
+ "description": "maximum value of the slider.",
+ "type": "Number"
},
{
"name": "value",
- "description": "<p>value to assign to the property.</p>\n",
- "type": "String|p5.Color"
+ "description": "default value of the slider.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "step",
+ "description": "size for each step in the slider's range.",
+ "optional": 1,
+ "type": "Number"
}
],
- "chainable": 1,
"return": {
- "description": "value of the property.",
- "type": "String"
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
}
}
- ]
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 3275,
- "description": "<p>Adds an\n<a href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#attributes\" target=\"_blank\">attribute</a>\nto the element.</p>\n<p>This method is useful for advanced tasks. Most commonly-used attributes,\nsuch as <code>id</code>, can be set with their dedicated methods. For example,\n<code>nextButton.id('next')</code> sets an element's <code>id</code> attribute. Calling\n<code>nextButton.attribute('id', 'next')</code> has the same effect.</p>\n<p>The first parameter, <code>attr</code>, is the attribute's name as a string. Calling\n<code>myElement.attribute('align')</code> returns the attribute's current value as a\nstring or <code>null</code> if it hasn't been set.</p>\n<p>The second parameter, <code>value</code>, is optional. It's a string used to set the\nattribute's value. For example, calling\n<code>myElement.attribute('align', 'center')</code> sets the element's horizontal\nalignment to <code>center</code>.</p>\n",
+ "name": "createButton",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 912,
"itemtype": "method",
- "name": "attribute",
- "return": {
- "description": "value of the attribute.",
- "type": "String"
- },
+ "description": "<p>Creates a <code><button></button></code> element.</p>\n<p>The first parameter, <code>label</code>, is a string that sets the label displayed on\nthe button.</p>\n<p>The second parameter, <code>value</code>, is optional. It's a string that sets the\nbutton's value. See\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value\" target=\"_blank\">MDN</a>\nfor more details.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a container div element and place it at the top-left corner.\n let container = createDiv();\n container.position(0, 0);\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"left\".\n let p1 = createP('hi');\n p1.parent(container);\n p1.attribute('align', 'left');\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"center\".\n let p2 = createP('hi');\n p2.parent(container);\n p2.attribute('align', 'center');\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"right\".\n let p3 = createP('hi');\n p3.parent(container);\n p3.attribute('align', 'right');\n\n describe('A gray square with the text \"hi\" written on three separate lines, each placed further to the right.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button and place it beneath the canvas.\n let button = createButton('click me');\n button.position(0, 100);\n\n // Call repaint() when the button is pressed.\n button.mousePressed(repaint);\n\n describe('A gray square with a button that says \"click me\" beneath it. The square changes color when the button is clicked.');\n}\n\n// Change the background color.\nfunction repaint() {\n let g = random(255);\n background(g);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet button;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button and set its value to 0.\n // Place the button beneath the canvas.\n button = createButton('click me', 'red');\n button.position(0, 100);\n\n // Call randomColor() when the button is pressed.\n button.mousePressed(randomColor);\n\n describe('A red square with a button that says \"click me\" beneath it. The square changes color when the button is clicked.');\n}\n\nfunction draw() {\n // Use the button's value to set the background color.\n let c = button.value();\n background(c);\n}\n\n// Set the button's value to a random color.\nfunction randomColor() {\n let c = random(['red', 'green', 'blue', 'yellow']);\n button.value(c);\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 3275,
- "params": [],
- "return": {
- "description": "value of the attribute.",
- "type": "String"
- }
- },
- {
- "line": 3330,
"params": [
{
- "name": "attr",
- "description": "<p>attribute to set.</p>\n",
+ "name": "label",
+ "description": "label displayed on the button.",
"type": "String"
},
{
"name": "value",
- "description": "<p>value to assign to the attribute.</p>\n",
+ "description": "value of the button.",
+ "optional": 1,
"type": "String"
}
],
- "chainable": 1
- }
- ]
- },
- {
- "file": "src/dom/dom.js",
- "line": 3359,
- "description": "<p>Removes an attribute from the element.</p>\n<p>The parameter <code>attr</code> is the attribute's name as a string. For example,\ncalling <code>myElement.removeAttribute('align')</code> removes its <code>align</code>\nattribute if it's been set.</p>\n",
- "itemtype": "method",
- "name": "removeAttribute",
- "params": [
- {
- "name": "attr",
- "description": "<p>attribute to remove.</p>\n",
- "type": "String"
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and place it in the center of the canvas.\n // Set its \"align\" attribute to \"center\".\n p = createP('hi');\n p.position(0, 20);\n p.attribute('align', 'center');\n\n describe('The text \"hi\" written in black at the center of a gray square. The text moves to the left edge when double-clicked.');\n}\n\n// Remove the 'align' attribute when the user double-clicks the paragraph.\nfunction doubleClicked() {\n p.removeAttribute('align');\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ },
+ "class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 3410,
- "description": "<p>Returns or sets the element's value.</p>\n<p>Calling <code>myElement.value()</code> returns the element's current value.</p>\n<p>The parameter, <code>value</code>, is an optional number or string. If provided,\nas in <code>myElement.value(123)</code>, it's used to set the element's value.</p>\n",
+ "name": "createCheckbox",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 1016,
"itemtype": "method",
- "name": "value",
- "return": {
- "description": "value of the element.",
- "type": "String|Number"
- },
+ "description": "<p>Creates a checkbox <code><input></input></code> element.</p>\n<p>Checkboxes extend the <a href=\"#/p5.Element\">p5.Element</a> class with a\n<code>checked()</code> method. Calling <code>myBox.checked()</code> returns <code>true</code> if it the box\nis checked and <code>false</code> if not.</p>\n<p>The first parameter, <code>label</code>, is optional. It's a string that sets the label\nto display next to the checkbox.</p>\n<p>The second parameter, <code>value</code>, is also optional. It's a boolean that sets the\ncheckbox's value.</p>\n",
"example": [
- "\n<div>\n<code>\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a text input and place it beneath the canvas.\n // Set its default value to \"hello\".\n input = createInput('hello');\n input.position(0, 100);\n\n describe('The text from an input box is displayed on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input's value to display a message.\n let msg = input.value();\n text(msg, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a text input and place it beneath the canvas.\n // Set its default value to \"hello\".\n input = createInput('hello');\n input.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input's value to display a message.\n let msg = input.value();\n text(msg, 0, 55);\n}\n\n// Reset the input's value.\nfunction doubleClicked() {\n input.value('hello');\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n checkbox = createCheckbox();\n checkbox.position(0, 100);\n\n describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n // Label the checkbox \"white\".\n checkbox = createCheckbox(' white');\n checkbox.position(0, 100);\n\n describe('A black square with a checkbox labeled \"white\" beneath it. The square turns white when the box is checked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n // Label the checkbox \"white\" and set its value to true.\n checkbox = createCheckbox(' white', true);\n checkbox.position(0, 100);\n\n describe('A white square with a checkbox labeled \"white\" beneath it. The square turns black when the box is unchecked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 3410,
- "params": [],
- "return": {
- "description": "value of the element.",
- "type": "String|Number"
- }
- },
- {
- "line": 3477,
"params": [
+ {
+ "name": "label",
+ "description": "label displayed after the checkbox.",
+ "optional": 1,
+ "type": "String"
+ },
{
"name": "value",
- "description": "",
- "type": "String|Number"
+ "description": "value of the checkbox. Checked is <code>true</code> and unchecked is <code>false</code>.",
+ "optional": 1,
+ "type": "Boolean"
}
],
- "chainable": 1
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ }
}
- ]
- },
- {
- "file": "src/dom/dom.js",
- "line": 3493,
- "description": "<p>Shows the current element.</p>\n",
- "itemtype": "method",
- "name": "show",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and hide it.\n p = createP('p5*js');\n p.position(10, 10);\n p.hide();\n\n describe('A gray square. The text \"p5*js\" appears when the user double-clicks the square.');\n}\n\n// Show the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.show();\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 3529,
- "description": "<p>Hides the current element.</p>\n",
- "itemtype": "method",
- "name": "hide",
- "chainable": 1,
- "example": [
- "\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element.\n p = createP('p5*js');\n p.position(10, 10);\n\n describe('The text \"p5*js\" at the center of a gray square. The text disappears when the user double-clicks the square.');\n}\n\n// Hide the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.hide();\n}\n</code>\n</div>"
],
- "class": "p5.Element",
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ },
+ "class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 3562,
- "description": "<p>Sets the element's width and height.</p>\n<p>Calling <code>myElement.size()</code> without an argument returns the element's size\nas an object with the properties <code>width</code> and <code>height</code>. For example,\n <code>{ width: 20, height: 10 }</code>.</p>\n<p>The first parameter, <code>width</code>, is optional. It's a number used to set the\nelement's width. Calling <code>myElement.size(10)</code></p>\n<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\nto 10 pixels.</p>\n<p>The constant <code>AUTO</code> can be used to adjust one dimension at a time while\nmaintaining the aspect ratio, which is <code>width / height</code>. For example,\nconsider an element that's 200 pixels wide and 100 pixels tall. Calling\n<code>myElement.size(20, AUTO)</code> sets the width to 20 pixels and height to 10\npixels.</p>\n<p>Note: In the case of elements that need to load data, such as images, wait\nto call <code>myElement.size()</code> until after the data loads.</p>\n",
+ "name": "createSelect",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 1243,
"itemtype": "method",
- "name": "size",
- "return": {
- "description": "width and height of the element in an object.",
- "type": "Object"
- },
+ "description": "<p>Creates a dropdown menu <code><select></select></code> element.</p>\n<p>The parameter is optional. If <code>true</code> is passed, as in\n<code>let mySelect = createSelect(true)</code>, then the dropdown will support\nmultiple selections. If an existing <code><select></select></code> element\nis passed, as in <code>let mySelect = createSelect(otherSelect)</code>, the existing\nelement will be wrapped in a new <a href=\"#/p5.Element\">p5.Element</a>\nobject.</p>\n<p>Dropdowns extend the <a href=\"#/p5.Element\">p5.Element</a> class with a few\nhelpful methods for managing options:</p>\n<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>",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a pink div element and place it at the top-left corner.\n let div = createDiv();\n div.position(10, 10);\n div.style('background-color', 'deeppink');\n\n // Set the div's width to 80 pixels and height to 20 pixels.\n div.size(80, 20);\n\n describe('A gray square with a pink rectangle near its top.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a pink div element and place it at the top-left corner.\n let div = createDiv();\n div.position(10, 10);\n div.style('background-color', 'deeppink');\n\n // Set the div's width to 80 pixels and height to 40 pixels.\n div.size(80, 40);\n\n // Get the div's size as an object.\n let s = div.size();\n\n // Display the div's dimensions.\n div.html(`${s.width} x ${s.height}`);\n\n describe('A gray square with a pink rectangle near its top. The text \"80 x 40\" is written within the rectangle.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img1;\nlet img2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Load an image of an astronaut on the moon\n // and place it at the top-left of the canvas.\n img1 = createImg(\n 'assets/moonwalk.jpg',\n 'An astronaut walking on the moon',\n ''\n );\n img1.position(0, 0);\n\n // Load an image of an astronaut on the moon\n // and place it at the top-left of the canvas.\n // Resize the image once it's loaded.\n img2 = createImg(\n 'assets/moonwalk.jpg',\n 'An astronaut walking on the moon',\n '',\n resizeImage\n );\n img2.position(0, 0);\n\n describe('A gray square two copies of a space image at the top-left. The copy in front is smaller.');\n}\n\n// Resize img2 and keep its aspect ratio.\nfunction resizeImage() {\n img2.size(50, AUTO);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n // Set the selected option to \"red\".\n mySelect.selected('red');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n // Set the selected option to \"red\".\n mySelect.selected('red');\n\n // Disable the \"yellow\" option.\n mySelect.disable('yellow');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options with names and values.\n mySelect.option('one', 'red');\n mySelect.option('two', 'green');\n mySelect.option('three', 'blue');\n mySelect.option('four', 'yellow');\n\n // Set the selected option to \"one\".\n mySelect.selected('one');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Hold CTRL to select multiple options on Windows and Linux.\n// Hold CMD to select multiple options on macOS.\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and allow multiple selections.\n // Place it beneath the canvas.\n mySelect = createSelect(true);\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the selected value(s) to draw circles.\n let colors = mySelect.selected();\n for (let i = 0; i < colors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = 10 + i * 20;\n\n // Access the color.\n let c = colors[i];\n\n // Draw the circle.\n fill(c);\n circle(x, 50, 20);\n }\n}\n</code>\n</div>"
],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 3562,
- "params": [],
+ "params": [
+ {
+ "name": "multiple",
+ "description": "support multiple selections.",
+ "optional": 1,
+ "type": "Boolean"
+ }
+ ],
"return": {
- "description": "width and height of the element in an object.",
- "type": "Object"
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
}
},
{
- "line": 3676,
"params": [
{
- "name": "w",
- "description": "<p>width of the element, either AUTO, or a number.</p>\n",
- "type": "Number|Constant",
- "optional": true
- },
- {
- "name": "h",
- "description": "<p>height of the element, either AUTO, or a number.</p>\n",
- "type": "Number|Constant",
- "optional": true
+ "name": "existing",
+ "description": "select element to wrap, either as a <a href=\"#/p5.Element\">p5.Element</a> or\na <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement\" target=\"_blank\">HTMLSelectElement</a>.",
+ "type": "Object"
}
],
- "chainable": 1
- }
- ]
- },
- {
- "file": "src/dom/dom.js",
- "line": 3731,
- "description": "<p>Removes the element, stops all audio/video streams, and removes all\ncallback functions.</p>\n",
- "itemtype": "method",
- "name": "remove",
- "example": [
- "\n<div>\n<code>\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element.\n p = createP('p5*js');\n p.position(10, 10);\n\n describe('The text \"p5*js\" written at the center of a gray square. ');\n}\n\n// Remove the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.remove();\n}\n</code>\n</div>"
+ "return": {
+ "description": "",
+ "type": "p5.Element"
+ }
+ }
],
- "class": "p5.Element",
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ },
+ "class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 3790,
- "description": "<p>Calls a function when the user drops a file on the element.</p>\n<p>The first parameter, <code>callback</code>, is a function to call once the file loads.\nThe callback function should have one parameter, <code>file</code>, that's a\n<a href=\"#/p5.File\">p5.File</a> object. If the user drops multiple files on\nthe element, <code>callback</code>, is called once for each file.</p>\n<p>The second parameter, <code>fxn</code>, is a function to call when the browser detects\none or more dropped files. The callback function should have one\nparameter, <code>event</code>, that's a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/DragEvent\">DragEvent</a>.</p>\n",
+ "name": "createRadio",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 1509,
"itemtype": "method",
- "name": "drop",
- "params": [
+ "description": "<p>Creates a radio button element.</p>\n<p>The parameter is optional. If a string is passed, as in\n<code>let myRadio = createSelect('food')</code>, then each radio option will\nhave <code>\"food\"</code> as its <code>name</code> parameter: <code><input name=\"food\"></input></code>.\nIf an existing <code><div></div></code> or <code><span></span></code>\nelement is passed, as in <code>let myRadio = createSelect(container)</code>, it will\nbecome the radio button's parent element.</p>\n<p>Radio buttons extend the <a href=\"#/p5.Element\">p5.Element</a> class with a few\nhelpful methods for managing options:</p>\n<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>",
+ "example": [
+ "<div>\n<code>\nlet style = document.createElement('style');\nstyle.innerHTML = `\n.p5-radio label {\n display: flex;\n align-items: center;\n }\n .p5-radio input {\n margin-right: 5px;\n }\n `;\ndocument.head.appendChild(style);\n\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.class('p5-radio');\n myRadio.size(60);\n\n // Add a few color options.\n myRadio.option('red');\n myRadio.option('yellow');\n myRadio.option('blue');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n describe('A yellow square with three color options listed, \"red\", \"yellow\", and \"blue\". The square changes color when the user selects a new option.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let g = myRadio.value();\n background(g);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.size(50);\n\n // Add a few color options.\n // Color values are labeled with\n // emotions they evoke.\n myRadio.option('red', 'love');\n myRadio.option('yellow', 'joy');\n myRadio.option('blue', 'trust');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n describe('A yellow square with three options listed, \"love\", \"joy\", and \"trust\". The square changes color when the user selects a new option.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let c = myRadio.value();\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.size(50);\n\n // Add a few color options.\n myRadio.option('red');\n myRadio.option('yellow');\n myRadio.option('blue');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n // Create a button and place it beneath the canvas.\n let btn = createButton('disable');\n btn.position(0, 100);\n\n // Call disableRadio() when btn is pressed.\n btn.mousePressed(disableRadio);\n\n 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.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let c = myRadio.value();\n background(c);\n}\n\n// Disable myRadio.\nfunction disableRadio() {\n myRadio.disable(true);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "callback",
- "description": "<p>called when a file loads. Called once for each file dropped.</p>\n",
- "type": "Function"
+ "params": [
+ {
+ "name": "containerElement",
+ "description": "container HTML Element, either a <code><div></div></code>\nor <code><span></span></code>.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ }
},
{
- "name": "fxn",
- "description": "<p>called once when any files are dropped.</p>\n",
- "type": "Function",
- "optional": true
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Drop an image on the canvas to view\n// this example.\nlet img;\n\nfunction setup() {\n let c = createCanvas(100, 100);\n\n background(200);\n\n // Call handleFile() when a file that's dropped on the canvas has loaded.\n c.drop(handleFile);\n\n describe('A gray square. When the user drops an image on the square, it is displayed.');\n}\n\n// Remove the existing image and display the new one.\nfunction handleFile(file) {\n // Remove the current image, if any.\n if (img) {\n img.remove();\n }\n\n // Create an <img> element with the\n // dropped file.\n img = createImg(file.data, '');\n img.hide();\n\n // Draw the image.\n image(img, 0, 0, width, height);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Drop an image on the canvas to view\n// this example.\nlet img;\nlet msg;\n\nfunction setup() {\n let c = createCanvas(100, 100);\n\n background(200);\n\n // Call functions when the user drops a file on the canvas\n // and when the file loads.\n c.drop(handleFile, handleDrop);\n\n 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.');\n}\n\n// Display the image when it loads.\nfunction handleFile(file) {\n // Remove the current image, if any.\n if (img) {\n img.remove();\n }\n\n // Create an img element with the dropped file.\n img = createImg(file.data, '');\n img.hide();\n\n // Draw the image.\n image(img, 0, 0, width, height);\n}\n\n// Display the file's name when it loads.\nfunction handleDrop(event) {\n // Remove current paragraph, if any.\n if (msg) {\n msg.remove();\n }\n\n // Use event to get the drop target's id.\n let id = event.target.id;\n\n // Write the canvas' id beneath it.\n msg = createP(id);\n msg.position(0, 100);\n\n // Set the font color randomly for each drop.\n let c = random(['red', 'green', 'blue']);\n msg.style('color', c);\n msg.style('font-size', '12px');\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 3945,
- "description": "<p>Makes the element draggable.</p>\n<p>The parameter, <code>elmnt</code>, is optional. If another\n<a href=\"#/p5.Element\">p5.Element</a> object is passed, as in\n<code>myElement.draggable(otherElement)</code>, the other element will become draggable.</p>\n",
- "itemtype": "method",
- "name": "draggable",
- "params": [
+ "params": [
+ {
+ "name": "name",
+ "description": "name parameter assigned to each option's <code><input></input></code> element.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ }
+ },
{
- "name": "elmnt",
- "description": "<p>another <a href=\"#/p5.Element\">p5.Element</a>.</p>\n",
- "type": "p5.Element",
- "optional": true
+ "params": [],
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nlet stickyNote;\nlet textInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element and style it.\n stickyNote = createDiv('Note');\n stickyNote.position(5, 5);\n stickyNote.size(80, 20);\n stickyNote.style('font-size', '16px');\n stickyNote.style('font-family', 'Comic Sans MS');\n stickyNote.style('background', 'orchid');\n stickyNote.style('padding', '5px');\n\n // Make the note draggable.\n stickyNote.draggable();\n\n // Create a panel div and style it.\n let panel = createDiv('');\n panel.position(5, 40);\n panel.size(80, 50);\n panel.style('background', 'orchid');\n panel.style('font-size', '16px');\n panel.style('padding', '5px');\n panel.style('text-align', 'center');\n\n // Make the panel draggable.\n panel.draggable();\n\n // Create a text input and style it.\n textInput = createInput('Note');\n textInput.size(70);\n\n // Add the input to the panel.\n textInput.parent(panel);\n\n // Call handleInput() when text is input.\n textInput.input(handleInput);\n\n describe(\n 'A gray square with two purple rectangles that move when dragged. The top rectangle displays the text that is typed into the bottom rectangle.'\n );\n}\n\n// Update stickyNote's HTML when text is input.\nfunction handleInput() {\n stickyNote.html(textInput.value());\n}\n</code>\n</div>"
- ],
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 4081,
- "class": "p5.Element",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 4158,
- "description": "<p>Path to the media element's source as a string.</p>\n",
- "itemtype": "property",
- "name": "src",
"return": {
- "description": "src",
- "type": "String"
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
},
- "example": [
- "\n<div>\n<code>\nlet beat;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"https://p5js.org/reference/assets/beat.mp3\" written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n textWrap(CHAR);\n text(beat.src, 10, 10, 80, 80);\n}\n</code>\n</div>"
- ],
- "class": "p5.MediaElement",
+ "class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 4215,
- "description": "<p>Plays audio or video from a media element.</p>\n",
+ "name": "createColorPicker",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 1732,
"itemtype": "method",
- "name": "play",
- "chainable": 1,
+ "description": "<p>Creates a color picker element.</p>\n<p>The parameter, <code>value</code>, is optional. If a color string or\n<a href=\"#/p5.Color\">p5.Color</a> object is passed, it will set the default\ncolor.</p>\n<p>Color pickers extend the <a href=\"#/p5.Element\">p5.Element</a> class with a\ncouple of helpful methods for managing colors:</p>\n<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>",
"example": [
- "\n<div>\n<code>\nlet beat;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display a message.\n text('Click to play', 50, 50);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. A beat plays when the user clicks the square.');\n}\n\n// Play the beat when the user presses the mouse.\nfunction mousePressed() {\n beat.play();\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet myPicker;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a color picker and set its position.\n myPicker = createColorPicker('deeppink');\n myPicker.position(0, 100);\n\n describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');\n}\n\nfunction draw() {\n // Use the color picker to paint the background.\n let c = myPicker.color();\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myPicker;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a color picker and set its position.\n myPicker = createColorPicker('deeppink');\n myPicker.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n // Use the color picker to paint the background.\n let c = myPicker.value();\n background(c);\n\n // Display the current color as a hex string.\n text(c, 25, 55);\n}\n</code>\n</div>"
],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 4281,
- "description": "<p>Stops a media element and sets its current time to 0.</p>\n<p>Calling <code>media.play()</code> will restart playing audio/video from the beginning.</p>\n",
- "itemtype": "method",
- "name": "stop",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nlet beat;\nlet isStopped = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to start\" written in black on a gray background. The beat starts or stops when the user presses the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isStopped === true) {\n text('Click to start', 50, 50);\n } else {\n text('Click to stop', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isStopped === true) {\n // If the beat is stopped, play it.\n beat.play();\n isStopped = false;\n } else {\n // If the beat is playing, stop it.\n beat.stop();\n isStopped = true;\n }\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "value",
+ "description": "default color as a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color\" target=\"_blank\">CSS color string</a>.",
+ "optional": 1,
+ "type": "String|p5.Color"
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ }
+ }
],
- "class": "p5.MediaElement",
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ },
+ "class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 4340,
- "description": "<p>Pauses a media element.</p>\n<p>Calling <code>media.play()</code> will resume playing audio/video from the moment it paused.</p>\n",
+ "name": "createInput",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 1843,
"itemtype": "method",
- "name": "pause",
- "chainable": 1,
+ "description": "<p>Creates a text <code><input></input></code> element.</p>\n<p>Call <code>myInput.size()</code> to set the length of the text box.</p>\n<p>The first parameter, <code>value</code>, is optional. It's a string that sets the\ninput's default value. The input is blank by default.</p>\n<p>The second parameter, <code>type</code>, is also optional. It's a string that\nspecifies the type of text being input. See MDN for a full\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input\" target=\"_blank\">list of options</a>.\nThe default is <code>'text'</code>.</p>\n",
"example": [
- "\n<div>\n<code>\nlet beat;\nlet isPaused = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. The beat plays or pauses when the user clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isPaused === true) {\n text('Click to play', 50, 50);\n } else {\n text('Click to pause', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isPaused === true) {\n // If the beat is paused,\n // play it.\n beat.play();\n isPaused = false;\n } else {\n // If the beat is playing,\n // pause it.\n beat.pause();\n isPaused = true;\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet myInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an input element and place it\n // beneath the canvas.\n myInput = createInput();\n myInput.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input to display a message.\n let msg = myInput.value();\n text(msg, 25, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an input element and place it\n // beneath the canvas. Set its default\n // text to \"hello!\".\n myInput = createInput('hello!');\n myInput.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input to display a message.\n let msg = myInput.value();\n text(msg, 25, 55);\n}\n</code>\n</div>"
],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 4400,
- "description": "<p>Plays the audio/video repeatedly in a loop.</p>\n",
- "itemtype": "method",
- "name": "loop",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nlet beat;\nlet isLooping = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isLooping === true) {\n text('Click to stop', 50, 50);\n } else {\n text('Click to loop', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isLooping === true) {\n // If the beat is looping, stop it.\n beat.stop();\n isLooping = false;\n } else {\n // If the beat is stopped, loop it.\n beat.loop();\n isLooping = true;\n }\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "value",
+ "description": "default value of the input box. Defaults to an empty string <code>''</code>.",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "type",
+ "description": "type of input. Defaults to <code>'text'</code>.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ }
+ },
+ {
+ "params": [
+ {
+ "name": "value",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "p5.Element"
+ }
+ }
],
- "class": "p5.MediaElement",
+ "return": {
+ "description": "new <a href=\"#/p5.Element\">p5.Element</a> object.",
+ "type": "p5.Element"
+ },
+ "class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 4458,
- "description": "<p>Stops the audio/video from playing in a loop.</p>\n<p>The media will stop when it finishes playing.</p>\n",
+ "name": "createFileInput",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/dom.js",
+ "line": 1953,
"itemtype": "method",
- "name": "noLoop",
- "chainable": 1,
+ "description": "<p>Creates an <code><input></input></code> element of type <code>'file'</code>.</p>\n<p><code>createFileInput()</code> allows users to select local files for use in a sketch.\nIt returns a <a href=\"#/p5.File\">p5.File</a> object.</p>\n<p>The first parameter, <code>callback</code>, is a function that's called when the file\nloads. The callback function should have one parameter, <code>file</code>, that's a\n<a href=\"#/p5.File\">p5.File</a> object.</p>\n<p>The second parameter, <code>multiple</code>, is optional. It's a boolean value that\nallows loading multiple files if set to <code>true</code>. If <code>true</code>, <code>callback</code>\nwill be called once per file.</p>\n",
"example": [
- "\n<div>\n<code>\nlet beat;\nlet isPlaying = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isPlaying === true) {\n text('Click to stop', 50, 50);\n } else {\n text('Click to play', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isPlaying === true) {\n // If the beat is playing, stop it.\n beat.stop();\n isPlaying = false;\n } else {\n // If the beat is stopped, play it.\n beat.play();\n isPlaying = true;\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Use the file input to select an image to\n// load and display.\nlet input;\nlet img;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a file input and place it beneath\n // the canvas.\n input = createFileInput(handleImage);\n input.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the image if loaded.\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\n// Create an image if the file is an image.\nfunction handleImage(file) {\n if (file.type === 'image') {\n img = createImg(file.data, '');\n img.hide();\n } else {\n img = null;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Use the file input to select multiple images\n// to load and display.\nlet input;\nlet images = [];\n\nfunction setup() {\n // Create a file input and place it beneath\n // the canvas. Allow it to load multiple files.\n input = createFileInput(handleImage, true);\n input.position(0, 100);\n}\n\nfunction draw() {\n background(200);\n\n // Draw the images if loaded. Each image\n // is drawn 20 pixels lower than the\n // previous image.\n for (let i = 0; i < images.length; i += 1) {\n // Calculate the y-coordinate.\n let y = i * 20;\n\n // Draw the image.\n image(img, 0, y, 100, 100);\n }\n\n 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.');\n}\n\n// Create an image if the file is an image,\n// then add it to the images array.\nfunction handleImage(file) {\n if (file.type === 'image') {\n let img = createImg(file.data, '');\n img.hide();\n images.push(img);\n }\n}\n</code>\n</div>"
],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 4538,
- "description": "<p>Sets the audio/video to play once it's loaded.</p>\n<p>The parameter, <code>shouldAutoplay</code>, is optional. Calling\n<code>media.autoplay()</code> without an argument causes the media to play\nautomatically. If <code>true</code> is passed, as in <code>media.autoplay(true)</code>, the\nmedia will automatically play. If <code>false</code> is passed, as in\n<code>media.autoPlay(false)</code>, it won't play automatically.</p>\n",
- "itemtype": "method",
- "name": "autoplay",
- "params": [
+ "overloads": [
{
- "name": "shouldAutoplay",
- "description": "<p>whether the element should autoplay.</p>\n",
- "type": "Boolean",
- "optional": true
+ "params": [
+ {
+ "name": "callback",
+ "description": "function to call once the file loads.",
+ "type": "Function"
+ },
+ {
+ "name": "multiple",
+ "description": "allow multiple files to be selected.",
+ "optional": 1,
+ "type": "Boolean"
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.File\">p5.File</a> object.",
+ "type": "p5.File"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div class='notest'>\n<code>\nlet video;\n\nfunction setup() {\n noCanvas();\n\n // Call handleVideo() once the video loads.\n video = createVideo('assets/fingers.mov', handleVideo);\n\n describe('A video of fingers walking on a treadmill.');\n}\n\n// Set the video's size and play it.\nfunction handleVideo() {\n video.size(100, 100);\n video.autoplay();\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nfunction setup() {\n noCanvas();\n\n // Load a video, but don't play it automatically.\n let video = createVideo('assets/fingers.mov', handleVideo);\n\n // Play the video when the user clicks on it.\n video.mousePressed(handlePress);\n\n describe('An image of fingers on a treadmill. They start walking when the user double-clicks on them.');\n}\n</code>\n</div>\n\n// Set the video's size and playback mode.\nfunction handleVideo() {\n video.size(100, 100);\n video.autoplay(false);\n}\n\n// Play the video.\nfunction handleClick() {\n video.play();\n}"
- ],
- "class": "p5.MediaElement",
+ "return": {
+ "description": "new <a href=\"#/p5.File\">p5.File</a> object.",
+ "type": "p5.File"
+ },
+ "class": "p5",
+ "static": false,
"module": "DOM",
"submodule": "DOM"
},
{
- "file": "src/dom/dom.js",
- "line": 4623,
- "description": "<p>Sets the audio/video volume.</p>\n<p>Calling <code>media.volume()</code> without an argument returns the current volume\nas a number in the range 0 (off) to 1 (maximum).</p>\n<p>The parameter, <code>val</code>, is optional. It's a number that sets the volume\nfrom 0 (off) to 1 (maximum). For example, calling <code>media.volume(0.5)</code>\nsets the volume to half of its maximum.</p>\n",
+ "name": "setMoveThreshold",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 453,
"itemtype": "method",
- "name": "volume",
- "return": {
- "description": "current volume.",
- "type": "Number"
- },
+ "description": "The <a href=\"#/p5/setMoveThreshold\">setMoveThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceMoved\">deviceMoved()</a> function. The default threshold is set to 0.5.",
"example": [
- "\n<div>\n<code>\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Produce a number between 0 and 1.\n let n = 0.5 * sin(frameCount * 0.01) + 0.5;\n\n // Use n to set the volume.\n dragon.volume(n);\n\n // Get the current volume and display it.\n let v = dragon.volume();\n\n // Round v to 1 decimal place for display.\n v = round(v, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the volume.\n text(`Volume: ${v}`, 50, 50);\n}\n</code>\n</div>"
+ "<div class=\"norender\">\n<code>\n// Run this example on a mobile device\n// You will need to move the device incrementally further\n// the closer the square's color gets to white in order to change the value.\n\nlet value = 0;\nlet threshold = 0.5;\nfunction setup() {\n setMoveThreshold(threshold);\n}\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device moves`);\n}\nfunction deviceMoved() {\n value = value + 5;\n threshold = threshold + 0.1;\n if (value > 255) {\n value = 0;\n threshold = 30;\n }\n setMoveThreshold(threshold);\n}\n</code>\n</div>"
],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 4623,
- "params": [],
- "return": {
- "description": "current volume.",
- "type": "Number"
- }
- },
- {
- "line": 4678,
"params": [
{
- "name": "val",
- "description": "<p>volume between 0.0 and 1.0.</p>\n",
+ "name": "value",
+ "description": "The threshold value",
"type": "Number"
}
- ],
- "chainable": 1
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Acceleration"
},
{
- "file": "src/dom/dom.js",
- "line": 4691,
- "description": "<p>Sets the audio/video playback speed.</p>\n<p>The parameter, <code>val</code>, is optional. It's a number that sets the playback\nspeed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2\nplays it at double speed, and so on. -1 plays the media at normal speed\nin reverse.</p>\n<p>Calling <code>media.speed()</code> returns the current speed as a number.</p>\n<p>Note: Not all browsers support backward playback. Even if they do,\nplayback might not be smooth.</p>\n",
+ "name": "setShakeThreshold",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 495,
"itemtype": "method",
- "name": "speed",
- "return": {
- "description": "current playback speed.",
- "type": "Number"
- },
+ "description": "The <a href=\"#/p5/setShakeThreshold\">setShakeThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceShaken\">deviceShaken()</a> function. The default threshold is set to 30.",
"example": [
- "\n<div>\n<code>\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Produce a number between 0 and 2.\n let n = sin(frameCount * 0.01) + 1;\n\n // Use n to set the playback speed.\n dragon.speed(n);\n\n // Get the current speed and display it.\n let s = dragon.speed();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the speed.\n text(`Speed: ${s}`, 50, 50);\n}\n</code>"
+ "<div class=\"norender\">\n<code>\n// Run this example on a mobile device\n// You will need to shake the device more firmly\n// the closer the box's fill gets to white in order to change the value.\n\nlet value = 0;\nlet threshold = 30;\nfunction setup() {\n setShakeThreshold(threshold);\n}\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device is being shaked`);\n}\nfunction deviceMoved() {\n value = value + 5;\n threshold = threshold + 5;\n if (value > 255) {\n value = 0;\n threshold = 30;\n }\n setShakeThreshold(threshold);\n}\n</code>\n</div>"
],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 4691,
- "params": [],
- "return": {
- "description": "current playback speed.",
- "type": "Number"
- }
- },
- {
- "line": 4749,
"params": [
{
- "name": "speed",
- "description": "<p>speed multiplier for playback.</p>\n",
+ "name": "value",
+ "description": "The threshold value",
"type": "Number"
}
- ],
- "chainable": 1
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Acceleration"
},
{
- "file": "src/dom/dom.js",
- "line": 4766,
- "description": "<p>Sets the media element's playback time.</p>\n<p>The parameter, <code>time</code>, is optional. It's a number that specifies the\ntime, in seconds, to jump to when playback begins.</p>\n<p>Calling <code>media.time()</code> without an argument returns the number of seconds\nthe audio/video has played.</p>\n<p>Note: Time resets to 0 when looping media restarts.</p>\n",
+ "name": "deviceMoved",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 618,
"itemtype": "method",
- "name": "time",
- "return": {
- "description": "current time (in seconds).",
- "type": "Number"
- },
+ "description": "The <a href=\"#/p5/deviceMoved\">deviceMoved()</a> function is called when the device is moved by more than\nthe threshold value along X, Y or Z axis. The default threshold is set to 0.5.\nThe threshold value can be changed using <a href=\"https://p5js.org/reference/p5/setMoveThreshold\">setMoveThreshold()</a>.",
"example": [
- "\n<div>\n<code>\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"S seconds\" on a gray square with media controls beneath it. The number \"S\" increases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the current playback time.\n let s = dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the playback time.\n text(`${s} seconds`, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n // Jump to 2 seconds to start.\n dragon.time(2);\n\n describe('The text \"S seconds\" on a gray square with media controls beneath it. The number \"S\" increases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the current playback time.\n let s = dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the playback time.\n text(`${s} seconds`, 50, 50);\n}\n</code>\n</div>"
+ "<div class=\"norender\">\n<code>\n// Run this example on a mobile device\n// Move the device around\n// to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device moves`);\n}\nfunction deviceMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n</code>\n</div>"
],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM",
"overloads": [
{
- "line": 4766,
- "params": [],
- "return": {
- "description": "current time (in seconds).",
- "type": "Number"
- }
- },
- {
- "line": 4854,
- "params": [
- {
- "name": "time",
- "description": "<p>time to jump to (in seconds).</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
+ "params": []
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Acceleration"
},
{
- "file": "src/dom/dom.js",
- "line": 4868,
- "description": "<p>Returns the audio/video's duration in seconds.</p>\n",
+ "name": "deviceTurned",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 618,
"itemtype": "method",
- "name": "duration",
- "return": {
- "description": "duration (in seconds).",
- "type": "Number"
- },
+ "description": "<p>The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> function is called when the device rotates by\nmore than 90 degrees continuously.</p>\n<p>The axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method is stored in the turnAxis\nvariable. The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method can be locked to trigger on any axis:\nX, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>\n",
"example": [
- "\n<div>\n<code>\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"S seconds left\" on a gray square with media controls beneath it. The number \"S\" decreases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the time remaining.\n let s = dragon.duration() - dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the time remaining.\n text(`${s} seconds left`, 50, 50);\n}\n</code>\n</div>"
+ "<div class=\"norender\">\n<code>\n// Run this example on a mobile device\n// Rotate the device by 90 degrees\n// to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device turns`);\n}\nfunction deviceTurned() {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n}\n</code>\n</div>\n<div>\n<code>\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when x-axis turns`);\n}\nfunction deviceTurned() {\n if (turnAxis === 'X') {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n }\n}\n</code>\n</div>"
],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 5024,
- "description": "<p>Calls a function when the audio/video reaches the end of its playback.</p>\n<p>The element is passed as an argument to the callback function.</p>\n<p>Note: The function won't be called if the media is looping.</p>\n",
- "itemtype": "method",
- "name": "onended",
- "params": [
+ "overloads": [
{
- "name": "callback",
- "description": "<p>function to call when playback ends.\n The <code>p5.MediaElement</code> is passed as\n the argument.</p>\n",
- "type": "Function"
+ "params": []
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nlet beat;\nlet isPlaying = false;\nlet isDone = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n // Call handleEnd() when the beat finishes.\n beat.onended(handleEnd);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different messages based on playback.\n if (isDone === true) {\n text('Done!', 50, 50);\n } else if (isPlaying === false) {\n text('Click to play', 50, 50);\n } else {\n text('Playing...', 50, 50);\n }\n}\n\n// Play the beat when the user presses the mouse.\nfunction mousePressed() {\n if (isPlaying === false) {\n isPlaying = true;\n beat.play();\n }\n}\n\n// Set isDone when playback ends.\nfunction handleEnd() {\n isDone = false;\n}\n</code>\n</div>"
- ],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 5093,
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Acceleration"
},
{
- "file": "src/dom/dom.js",
- "line": 5095,
- "description": "<p>Sends the element's audio to an output.</p>\n<p>The parameter, <code>audioNode</code>, can be an <code>AudioNode</code> or an object from the\n<code>p5.sound</code> library.</p>\n<p>If no element is provided, as in <code>myElement.connect()</code>, the element\nconnects to the main output. All connections are removed by the\n<code>.disconnect()</code> method.</p>\n<p>Note: This method is meant to be used with the p5.sound.js addon library.</p>\n",
+ "name": "deviceShaken",
+ "file": "src/scripts/parsers/in/p5.js/src/events/acceleration.js",
+ "line": 618,
"itemtype": "method",
- "name": "connect",
- "params": [
+ "description": "The <a href=\"#/p5/deviceShaken\">deviceShaken()</a> function is called when the device total acceleration\nchanges of accelerationX and accelerationY values is more than\nthe threshold value. The default threshold is set to 30.\nThe threshold value can be changed using <a href=\"https://p5js.org/reference/p5/setShakeThreshold\">setShakeThreshold()</a>.",
+ "example": [
+ "<div class=\"norender\">\n<code>\n// Run this example on a mobile device\n// Shake the device to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device shakes`);\n}\nfunction deviceShaken() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "audioNode",
- "description": "<p>AudioNode from the Web Audio API,\nor an object from the p5.sound library</p>\n",
- "type": "AudioNode|Object"
+ "params": []
}
],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Acceleration"
},
{
- "file": "src/dom/dom.js",
- "line": 5148,
- "description": "<p>Disconnect all Web Audio routing, including to the main output.</p>\n<p>This is useful if you want to re-route the output through audio effects,\nfor example.</p>\n",
+ "name": "keyPressed",
+ "file": "src/scripts/parsers/in/p5.js/src/events/keyboard.js",
+ "line": 461,
"itemtype": "method",
- "name": "disconnect",
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 5164,
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
+ "description": "<p>A function that's called once when any key is pressed.</p>\n<p>Declaring the function <code>keyPressed()</code> sets a code block to run once\nautomatically when the user presses any key:</p>\n<pre><code class=\"language-js\">function keyPressed() {\n // Code to run.\n}</code></pre><p>The <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a>\nvariables will be updated with the most recently typed value when\n<code>keyPressed()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function keyPressed() {\n if (key === 'c') {\n // Code to run.\n }\n\n if (keyCode === 13) { // Enter key\n // Code to run.\n }\n}</code></pre><p>The parameter, <code>event</code>, is optional. <code>keyPressed()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent\" target=\"_blank\">KeyboardEvent</a>\nobject with properties that describe the key press event:</p>\n<pre><code class=\"language-js\">function keyPressed(event) {\n // Code to run that uses the event.\n console.log(event);\n}</code></pre><p>Browsers may have default behaviors attached to various key events. For\nexample, some browsers may jump to the bottom of a web page when the\n<code>SPACE</code> key is pressed. To prevent any default behavior for this event, add\n<code>return false;</code> to the end of the function.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the background color when the user presses a key.\nfunction keyPressed() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square turns black when the user presses the \"b\" key. It turns white when the user presses the \"a\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Reassign value when the user presses the 'a' or 'b' key.\nfunction keyPressed() {\n if (key === 'a') {\n value = 255;\n } else if (key === 'b') {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square turns white when the user presses the left arrow key. It turns black when the user presses the right arrow key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the background color when the user presses an arrow key.\nfunction keyPressed() {\n if (keyCode === 37) { // Left arrow key\n value = 255;\n } else if (keyCode === 39) { // Right arrow key\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "event",
+ "description": "optional <code>KeyboardEvent</code> callback argument.",
+ "optional": 1,
+ "type": "KeyboardEvent"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Keyboard"
},
{
- "file": "src/dom/dom.js",
- "line": 5166,
- "description": "<p>Show the default\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement\" target=\"_blank\">HTMLMediaElement</a>\ncontrols.</p>\n<p>Note: The controls vary between web browsers.</p>\n",
+ "name": "keyReleased",
+ "file": "src/scripts/parsers/in/p5.js/src/events/keyboard.js",
+ "line": 638,
"itemtype": "method",
- "name": "showControls",
+ "description": "<p>A function that's called once when any key is released.</p>\n<p>Declaring the function <code>keyReleased()</code> sets a code block to run once\nautomatically when the user releases any key:</p>\n<pre><code class=\"language-js\">function keyReleased() {\n // Code to run.\n}</code></pre><p>The <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a>\nvariables will be updated with the most recently released value when\n<code>keyReleased()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function keyReleased() {\n if (key === 'c') {\n // Code to run.\n }\n\n if (keyCode === 13) { // Enter key\n // Code to run.\n }\n}</code></pre><p>The parameter, <code>event</code>, is optional. <code>keyReleased()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent\" target=\"_blank\">KeyboardEvent</a>\nobject with properties that describe the key press event:</p>\n<pre><code class=\"language-js\">function keyReleased(event) {\n // Code to run that uses the event.\n console.log(event);\n}</code></pre><p>Browsers may have default behaviors attached to various key events. To\nprevent any default behavior for this event, add <code>return false;</code> to the end\nof the function.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background('cornflowerblue');\n\n // Style the text.\n textAlign(CENTER);\n textSize(50);\n\n // Display a dragon.\n text('🐉', 50, 50);\n\n // Create a p5.MediaElement using createAudio().\n let dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('A dragon emoji, 🐉, 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>"
+ "<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user releases a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle value when the user releases a key.\nfunction keyReleased() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes white when the user releases the \"w\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Set value to 255 the user releases the 'w' key.\nfunction keyReleased() {\n if (key === 'w') {\n value = 255;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square turns white when the user presses and releases the left arrow key. It turns black when the user presses and releases the right arrow key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the background color when the user releases an arrow key.\nfunction keyReleased() {\n if (keyCode === 37) { // Left arrow key\n value = 255;\n } else if (keyCode === 39) { // Right arrow key\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "event",
+ "description": "optional <code>KeyboardEvent</code> callback argument.",
+ "optional": 1,
+ "type": "KeyboardEvent"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Keyboard"
},
{
- "file": "src/dom/dom.js",
- "line": 5207,
- "description": "<p>Hide the default\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement\" target=\"_blank\">HTMLMediaElement</a>\ncontrols.</p>\n",
+ "name": "keyTyped",
+ "file": "src/scripts/parsers/in/p5.js/src/events/keyboard.js",
+ "line": 794,
"itemtype": "method",
- "name": "hideControls",
+ "description": "<p>A function that's called once when keys with printable characters are pressed.</p>\n<p>Declaring the function <code>keyTyped()</code> sets a code block to run once\nautomatically when the user presses any key with a printable character such\nas <code>a</code> or 1. Modifier keys such as <code>SHIFT</code>, <code>CONTROL</code>, and the arrow keys\nwill be ignored:</p>\n<pre><code class=\"language-js\">function keyTyped() {\n // Code to run.\n}</code></pre><p>The <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a>\nvariables will be updated with the most recently released value when\n<code>keyTyped()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function keyTyped() {\n // Check for the \"c\" character using key.\n if (key === 'c') {\n // Code to run.\n }\n\n // Check for \"c\" using keyCode.\n if (keyCode === 67) { // 67 is the ASCII code for 'c'\n // Code to run.\n }\n}</code></pre><p>The parameter, <code>event</code>, is optional. <code>keyTyped()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent\" target=\"_blank\">KeyboardEvent</a>\nobject with properties that describe the key press event:</p>\n<pre><code class=\"language-js\">function keyReleased(event) {\n // Code to run that uses the event.\n console.log(event);\n}</code></pre><p>Note: Use the <a href=\"#/p5/keyPressed\">keyPressed()</a> function and\n<a href=\"#/p5/keyCode\">keyCode</a> system variable to respond to modifier\nkeys such as <code>ALT</code>.</p>\n<p>Browsers may have default behaviors attached to various key events. To\nprevent any default behavior for this event, add <code>return false;</code> to the end\nof the function.</p>\n",
"example": [
- "\n<div>\n<code>\nlet dragon;\nlet isHidden = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n\n // Display a different message when controls are hidden or shown.\n if (isHidden === true) {\n text('Double-click to show controls', 10, 20, 80, 80);\n } else {\n text('Double-click to hide controls', 10, 20, 80, 80);\n }\n}\n\n// Show/hide controls based on a double-click.\nfunction doubleClicked() {\n if (isHidden === true) {\n dragon.showControls();\n isHidden = false;\n } else {\n dragon.hideControls();\n isHidden = true;\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n// Note: Pressing special keys such as SPACE have no effect.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square changes color when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the square's color when the user types a printable key.\nfunction keyTyped() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square turns black when the user types the \"b\" key. It turns white when the user types the \"a\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Reassign value when the user types the 'a' or 'b' key.\nfunction keyTyped() {\n if (key === 'a') {\n value = 255;\n } else if (key === 'b') {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "event",
+ "description": "optional <code>KeyboardEvent</code> callback argument.",
+ "optional": 1,
+ "type": "KeyboardEvent"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Keyboard"
},
{
- "file": "src/dom/dom.js",
- "line": 5263,
- "description": "<p>Schedules a function to call when the audio/video reaches a specific time\nduring its playback.</p>\n<p>The first parameter, <code>time</code>, is the time, in seconds, when the function\nshould run. This value is passed to <code>callback</code> as its first argument.</p>\n<p>The second parameter, <code>callback</code>, is the function to call at the specified\ncue time.</p>\n<p>The third parameter, <code>value</code>, is optional and can be any type of value.\n<code>value</code> is passed to <code>callback</code>.</p>\n<p>Calling <code>media.addCue()</code> returns an ID as a string. This is useful for\nremoving the cue later.</p>\n",
+ "name": "keyIsDown",
+ "file": "src/scripts/parsers/in/p5.js/src/events/keyboard.js",
+ "line": 932,
"itemtype": "method",
- "name": "addCue",
- "params": [
- {
- "name": "time",
- "description": "<p>cue time to run the callback function.</p>\n",
- "type": "Number"
- },
- {
- "name": "callback",
- "description": "<p>function to call at the cue time.</p>\n",
- "type": "Function"
- },
+ "description": "<p>Returns <code>true</code> if the key it’s checking is pressed and <code>false</code> if not.</p>\n<p><code>keyIsDown()</code> is helpful when checking for multiple different key presses.\nFor example, <code>keyIsDown()</code> can be used to check if both <code>LEFT_ARROW</code> and\n<code>UP_ARROW</code> are pressed:</p>\n<pre><code class=\"language-js\">if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {\n // Move diagonally.\n}</code></pre><p><code>keyIsDown()</code> can check for key presses using\n<a href=\"#/p5/keyCode\">keyCode</a> values, as in <code>keyIsDown(37)</code> or\n<code>keyIsDown(LEFT_ARROW)</code>. Key codes can be found on websites such as\n<a href=\"https://keycode.info\" target=\"_blank\">keycode.info</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if an arrow key is pressed.\n if (keyIsDown(LEFT_ARROW) === true) {\n x -= 1;\n }\n\n if (keyIsDown(RIGHT_ARROW) === true) {\n x += 1;\n }\n\n if (keyIsDown(UP_ARROW) === true) {\n y -= 1;\n }\n\n if (keyIsDown(DOWN_ARROW) === true) {\n y += 1;\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle.\n circle(x, y, 5);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if an arrow key is pressed.\n if (keyIsDown('ArrowLeft') === true) {\n x -= 1;\n }\n\n if (keyIsDown('ArrowRight') === true) {\n x += 1;\n }\n\n if (keyIsDown('ArrowUp') === true) {\n y -= 1;\n }\n\n if (keyIsDown('ArrowDown') === true) {\n y += 1;\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle.\n circle(x, y, 5);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "value",
- "description": "<p>object to pass as the argument to\n <code>callback</code>.</p>\n",
- "type": "Object",
- "optional": true
+ "params": [
+ {
+ "name": "code",
+ "description": "key to check.",
+ "type": "Number|String"
+ }
+ ],
+ "return": {
+ "description": "whether the key is down or not.",
+ "type": "Boolean"
+ }
}
],
"return": {
- "description": "id ID of this cue,\n useful for `media.removeCue(id)`.",
- "type": "Number"
+ "description": "whether the key is down or not.",
+ "type": "Boolean"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n beat.addCue(6, changeBackground, 'lavender');\n\n describe('A red square with a beat playing in the background. Its color changes every 2 seconds while the audio plays.');\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n</code>\n</div>"
- ],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Keyboard"
},
{
- "file": "src/dom/dom.js",
- "line": 5328,
- "description": "<p>Removes a callback based on its ID.</p>\n",
+ "name": "mouseMoved",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 1157,
"itemtype": "method",
- "name": "removeCue",
- "params": [
+ "description": "<p>A function that's called when the mouse moves.</p>\n<p>Declaring the function <code>mouseMoved()</code> sets a code block to run\nautomatically when the user moves the mouse without clicking any mouse\nbuttons:</p>\n<pre><code class=\"language-js\">function mouseMoved() {\n // Code to run.\n}</code></pre><p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>mouseMoved()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function mouseMoved() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}</code></pre><p>The parameter, <code>event</code>, is optional. <code>mouseMoved()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the mouse move event:</p>\n<pre><code class=\"language-js\">function mouseMoved(event) {\n // Code to run that uses the event.\n console.log(event);\n}</code></pre><p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter as the mouse moves.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mouseMoved() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "id",
- "description": "<p>ID of the cue, created by <code>media.addCue()</code>.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "event",
+ "description": "optional <code>MouseEvent</code> argument.",
+ "optional": 1,
+ "type": "MouseEvent"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\nlet lavenderID;\nlet isRemoved = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n\n // Record the ID of the \"lavender\" callback.\n lavenderID = beat.addCue(6, changeBackground, 'lavender');\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Display different instructions based on the available callbacks.\n if (isRemoved === false) {\n text('Double-click to remove lavender.', 10, 10, 80, 80);\n } else {\n text('No more lavender.', 10, 10, 80, 80);\n }\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n\n// Remove the lavender color-change cue when the user double-clicks.\nfunction doubleClicked() {\n if (isRemoved === false) {\n beat.removeCue(lavenderID);\n isRemoved = true;\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Pointer"
},
{
- "file": "src/dom/dom.js",
- "line": 5399,
- "description": "<p>Removes all functions scheduled with <code>media.addCue()</code>.</p>\n",
+ "name": "mouseDragged",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 1157,
"itemtype": "method",
- "name": "clearCues",
+ "description": "<p>A function that's called when the mouse moves while a button is pressed.</p>\n<p>Declaring the function <code>mouseDragged()</code> sets a code block to run\nautomatically when the user clicks and drags the mouse:</p>\n<pre><code class=\"language-js\">function mouseDragged() {\n // Code to run.\n}</code></pre><p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>mouseDragged()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function mouseDragged() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}</code></pre><p>The parameter, <code>event</code>, is optional. <code>mouseDragged()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the mouse drag event:</p>\n<pre><code class=\"language-js\">function mouseDragged(event) {\n // Code to run that uses the event.\n console.log(event);\n}</code></pre><p>On touchscreen devices, <code>mouseDragged()</code> will run when a user moves a touch\npoint.</p>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n",
"example": [
- "\n<div>\n<code>\nlet isChanging = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n beat.addCue(6, changeBackground, 'lavender');\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Display different instructions based on the available callbacks.\n if (isChanging === true) {\n text('Double-click to stop changing.', 10, 10, 80, 80);\n } else {\n text('No more changes.', 10, 10, 80, 80);\n }\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n\n// Remove cued functions and stop changing colors when the user\n// double-clicks.\nfunction doubleClicked() {\n if (isChanging === true) {\n beat.clearCues();\n isChanging = false;\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter as the user drags the mouse.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mouseDragged() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
],
- "class": "p5.MediaElement",
- "module": "DOM",
- "submodule": "DOM"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "event",
+ "description": "optional <code>MouseEvent</code> argument.",
+ "optional": 1,
+ "type": "MouseEvent"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Pointer"
},
{
- "file": "src/dom/dom.js",
- "line": 5573,
- "description": "<p>Underlying\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File\" target=\"_blank\">File</a>\nobject. All <code>File</code> properties and methods are accessible.</p>\n",
- "itemtype": "property",
- "name": "file",
+ "name": "mousePressed",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 1320,
+ "itemtype": "method",
+ "description": "<p>A function that's called once when a mouse button is pressed.</p>\n<p>Declaring the function <code>mousePressed()</code> sets a code block to run\nautomatically when the user presses a mouse button:</p>\n<pre><code class=\"language-js\">function mousePressed() {\n // Code to run.\n}</code></pre><p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>mousePressed()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function mousePressed() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}</code></pre><p>The parameter, <code>event</code>, is optional. <code>mousePressed()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the mouse press event:</p>\n<pre><code class=\"language-js\">function mousePressed(event) {\n // Code to run that uses the event.\n console.log(event);\n}</code></pre><p>On touchscreen devices, <code>mousePressed()</code> will run when a user’s touch\nbegins.</p>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n<p>Note: <code>mousePressed()</code>, <a href=\"#/p5/mouseReleased\">mouseReleased()</a>,\nand <a href=\"#/p5/mouseClicked\">mouseClicked()</a> are all related.\n<code>mousePressed()</code> runs as soon as the user clicks the mouse.\n<a href=\"#/p5/mouseReleased\">mouseReleased()</a> runs as soon as the user\nreleases the mouse click. <a href=\"#/p5/mouseClicked\">mouseClicked()</a>\nruns immediately after <a href=\"#/p5/mouseReleased\">mouseReleased()</a>.</p>\n",
"example": [
- "\n<div>\n<code>\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayInfo() when the file loads.\n let input = createFileInput(displayInfo);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');\n}\n\n// Use the p5.File once it loads.\nfunction displayInfo(file) {\n background(200);\n\n // Display the p5.File's name.\n text(file.name, 10, 10, 80, 40);\n\n // Display the p5.File's type and subtype.\n text(`${file.type}/${file.subtype}`, 10, 70);\n\n // Display the p5.File's size in bytes.\n text(file.size, 10, 90);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter when the user presses a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mousePressed() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the circle.\n fill('orange');\n stroke('royalblue');\n strokeWeight(10);\n\n describe(\n 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'\n );\n}\n\nfunction draw() {\n background(220);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n// Set the stroke color and weight as soon as the user clicks.\nfunction mousePressed() {\n stroke('deeppink');\n strokeWeight(3);\n}\n\n// Set the stroke and fill colors as soon as the user releases\n// the mouse.\nfunction mouseReleased() {\n stroke('royalblue');\n\n // This is never visible because fill() is called\n // in mouseClicked() which runs immediately after\n // mouseReleased();\n fill('limegreen');\n}\n\n// Set the fill color and stroke weight after\n// mousePressed() and mouseReleased() are called.\nfunction mouseClicked() {\n fill('orange');\n strokeWeight(10);\n}\n</code>\n</div>"
],
- "class": "p5.File",
- "module": "DOM",
- "submodule": "DOM"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "event",
+ "description": "optional <code>MouseEvent</code> argument.",
+ "optional": 1,
+ "type": "MouseEvent"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Pointer"
},
{
- "file": "src/dom/dom.js",
- "line": 5622,
- "description": "<p>The file\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types\" target=\"_blank\">MIME type</a>\nas a string.</p>\n<p>For example, <code>'image'</code> and <code>'text'</code> are both MIME types.</p>\n",
- "itemtype": "property",
- "name": "type",
+ "name": "mouseReleased",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 1480,
+ "itemtype": "method",
+ "description": "<p>A function that's called once when a mouse button is released.</p>\n<p>Declaring the function <code>mouseReleased()</code> sets a code block to run\nautomatically when the user releases a mouse button after having pressed\nit:</p>\n<pre><code class=\"language-js\">function mouseReleased() {\n // Code to run.\n}</code></pre><p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>mouseReleased()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function mouseReleased() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}</code></pre><p>The parameter, <code>event</code>, is optional. <code>mouseReleased()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the mouse release event:</p>\n<pre><code class=\"language-js\">function mouseReleased(event) {\n // Code to run that uses the event.\n console.log(event);\n}</code></pre><p>On touchscreen devices, <code>mouseReleased()</code> will run when a user’s touch\nends.</p>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n<p>Note: <a href=\"#/p5/mousePressed\">mousePressed()</a>, <code>mouseReleased()</code>,\nand <a href=\"#/p5/mouseClicked\">mouseClicked()</a> are all related.\n<a href=\"#/p5/mousePressed\">mousePressed()</a> runs as soon as the user\nclicks the mouse. <code>mouseReleased()</code> runs as soon as the user releases the\nmouse click. <a href=\"#/p5/mouseClicked\">mouseClicked()</a> runs\nimmediately after <code>mouseReleased()</code>.</p>\n",
"example": [
- "\n<div>\n<code>\n// Use the file input to load a file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayType() when the file loads.\n let input = createFileInput(displayType);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its type is written in black.');\n}\n\n// Display the p5.File's type once it loads.\nfunction displayType(file) {\n background(200);\n\n // Display the p5.File's type.\n text(`This is file's type is: ${file.type}`, 10, 10, 80, 80);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter when the user presses and releases a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mouseReleased() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the circle.\n fill('orange');\n stroke('royalblue');\n strokeWeight(10);\n\n describe(\n 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'\n );\n}\n\nfunction draw() {\n background(220);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n// Set the stroke color and weight as soon as the user clicks.\nfunction mousePressed() {\n stroke('deeppink');\n strokeWeight(3);\n}\n\n// Set the stroke and fill colors as soon as the user releases\n// the mouse.\nfunction mouseReleased() {\n stroke('royalblue');\n\n // This is never visible because fill() is called\n // in mouseClicked() which runs immediately after\n // mouseReleased();\n fill('limegreen');\n}\n\n// Set the fill color and stroke weight after\n// mousePressed() and mouseReleased() are called.\nfunction mouseClicked() {\n fill('orange');\n strokeWeight(10);\n}\n</code>\n</div>"
],
- "class": "p5.File",
- "module": "DOM",
- "submodule": "DOM"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "event",
+ "description": "optional <code>MouseEvent</code> argument.",
+ "optional": 1,
+ "type": "MouseEvent"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Events",
+ "submodule": "Pointer"
},
{
- "file": "src/dom/dom.js",
- "line": 5660,
- "description": "<p>The file subtype as a string.</p>\n<p>For example, a file with an <code>'image'</code>\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types\" target=\"_blank\">MIME type</a>\nmay have a subtype such as <code>png</code> or <code>jpeg</code>.</p>\n",
- "itemtype": "property",
- "name": "subtype",
+ "name": "mouseClicked",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 1644,
+ "itemtype": "method",
+ "description": "<p>A function that's called once after a mouse button is pressed and released.</p>\n<p>Declaring the function <code>mouseClicked()</code> sets a code block to run\nautomatically when the user releases a mouse button after having pressed\nit:</p>\n<pre><code class=\"language-js\">function mouseClicked() {\n // Code to run.\n}</code></pre><p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>mouseClicked()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function mouseClicked() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}</code></pre><p>The parameter, <code>event</code>, is optional. <code>mouseClicked()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the mouse click event:</p>\n<pre><code class=\"language-js\">function mouseClicked(event) {\n // Code to run that uses the event.\n console.log(event);\n}</code></pre><p>On touchscreen devices, <code>mouseClicked()</code> will run when a user’s touch\nends.</p>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n<p>Note: <a href=\"#/p5/mousePressed\">mousePressed()</a>,\n<a href=\"#/p5/mouseReleased\">mouseReleased()</a>,\nand <code>mouseClicked()</code> are all related.\n<a href=\"#/p5/mousePressed\">mousePressed()</a> runs as soon as the user\nclicks the mouse. <a href=\"#/p5/mouseReleased\">mouseReleased()</a> runs as\nsoon as the user releases the mouse click. <code>mouseClicked()</code> runs\nimmediately after <a href=\"#/p5/mouseReleased\">mouseReleased()</a>.</p>\n",
"example": [
- "\n<div>\n<code>\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displaySubtype() when the file loads.\n let input = createFileInput(displaySubtype);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its subtype is written in black.');\n}\n\n// Display the p5.File's type once it loads.\nfunction displaySubtype(file) {\n background(200);\n\n // Display the p5.File's subtype.\n text(`This is file's subtype is: ${file.subtype}`, 10, 10, 80, 80);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user presses and releases a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the square's color when the user clicks.\nfunction mouseClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the circle.\n fill('orange');\n stroke('royalblue');\n strokeWeight(10);\n\n describe(\n 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'\n );\n}\n\nfunction draw() {\n background(220);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n// Set the stroke color and weight as soon as the user clicks.\nfunction mousePressed() {\n stroke('deeppink');\n strokeWeight(3);\n}\n\n// Set the stroke and fill colors as soon as the user releases\n// the mouse.\nfunction mouseReleased() {\n stroke('royalblue');\n\n // This is never visible because fill() is called\n // in mouseClicked() which runs immediately after\n // mouseReleased();\n fill('limegreen');\n}\n\n// Set the fill color and stroke weight after\n// mousePressed() and mouseReleased() are called.\nfunction mouseClicked() {\n fill('orange');\n strokeWeight(10);\n}\n</code>\n</div>"
],
- "class": "p5.File",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 5699,
- "description": "<p>The file name as a string.</p>\n",
- "itemtype": "property",
- "name": "name",
- "example": [
- "\n<div>\n<code>\n// Use the file input to load a\n// file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayName() when the file loads.\n let input = createFileInput(displayName);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its name is written in black.');\n}\n\n// Display the p5.File's name once it loads.\nfunction displayName(file) {\n background(200);\n\n // Display the p5.File's name.\n text(`This is file's name is: ${file.name}`, 10, 10, 80, 80);\n}\n</code>\n</div>"
- ],
- "class": "p5.File",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 5734,
- "description": "<p>The number of bytes in the file.</p>\n",
- "itemtype": "property",
- "name": "size",
- "example": [
- "\n<div>\n<code>\n// Use the file input to load a file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displaySize() when the file loads.\n let input = createFileInput(displaySize);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its size in bytes is written in black.');\n}\n\n// Display the p5.File's size in bytes once it loads.\nfunction displaySize(file) {\n background(200);\n\n // Display the p5.File's size.\n text(`This is file has ${file.size} bytes.`, 10, 10, 80, 80);\n}\n</code>\n</div>"
- ],
- "class": "p5.File",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/dom/dom.js",
- "line": 5769,
- "description": "<p>A string containing the file's data.</p>\n<p>Data can be either image data, text contents, or a parsed object in the\ncase of JSON and <a href=\"#/p5.XML\">p5.XML</a> objects.</p>\n",
- "itemtype": "property",
- "name": "data",
- "example": [
- "\n<div>\n<code>\n// Use the file input to load a file and display its info.\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a file input and place it beneath the canvas.\n // Call displayData() when the file loads.\n let input = createFileInput(displayData);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user loads a file, its data is written in black.');\n}\n\n// Display the p5.File's data once it loads.\nfunction displayData(file) {\n background(200);\n\n // Display the p5.File's data, which looks like a random string of characters.\n text(file.data, 10, 10, 80, 80);\n}\n</code>\n</div>"
- ],
- "class": "p5.File",
- "module": "DOM",
- "submodule": "DOM"
- },
- {
- "file": "src/events/acceleration.js",
- "line": 11,
- "description": "<p>The system variable deviceOrientation always contains the orientation of\nthe device. The value of this variable will either be set 'landscape'\nor 'portrait'. If no data is available it will be set to 'undefined'.\neither LANDSCAPE or PORTRAIT.</p>\n",
- "itemtype": "property",
- "name": "deviceOrientation",
- "type": "Constant",
- "readonly": "",
- "class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
- },
- {
- "file": "src/events/acceleration.js",
- "line": 23,
- "description": "<p>The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.</p>\n",
- "itemtype": "property",
- "name": "accelerationX",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationX);\n describe('Magnitude of device acceleration is displayed as ellipse size.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
- },
- {
- "file": "src/events/acceleration.js",
- "line": 45,
- "description": "<p>The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.</p>\n",
- "itemtype": "property",
- "name": "accelerationY",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationY);\n describe('Magnitude of device acceleration is displayed as ellipse size');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
- },
- {
- "file": "src/events/acceleration.js",
- "line": 67,
- "description": "<p>The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.</p>\n",
- "itemtype": "property",
- "name": "accelerationZ",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationZ);\n describe('Magnitude of device acceleration is displayed as ellipse size');\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "event",
+ "description": "optional <code>MouseEvent</code> argument.",
+ "optional": 1,
+ "type": "MouseEvent"
+ }
+ ]
+ }
],
"class": "p5",
+ "static": false,
"module": "Events",
- "submodule": "Acceleration"
- },
- {
- "file": "src/events/acceleration.js",
- "line": 90,
- "description": "<p>The system variable pAccelerationX always contains the acceleration of the\ndevice along the x axis in the frame previous to the current frame. Value\nis represented as meters per second squared.</p>\n",
- "itemtype": "property",
- "name": "pAccelerationX",
- "type": "Number",
- "readonly": "",
- "class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
- },
- {
- "file": "src/events/acceleration.js",
- "line": 100,
- "description": "<p>The system variable pAccelerationY always contains the acceleration of the\ndevice along the y axis in the frame previous to the current frame. Value\nis represented as meters per second squared.</p>\n",
- "itemtype": "property",
- "name": "pAccelerationY",
- "type": "Number",
- "readonly": "",
- "class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
- },
- {
- "file": "src/events/acceleration.js",
- "line": 110,
- "description": "<p>The system variable pAccelerationZ always contains the acceleration of the\ndevice along the z axis in the frame previous to the current frame. Value\nis represented as meters per second squared.</p>\n",
- "itemtype": "property",
- "name": "pAccelerationZ",
- "type": "Number",
- "readonly": "",
- "class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
+ "submodule": "Pointer"
},
{
- "file": "src/events/acceleration.js",
- "line": 131,
- "description": "<p>The system variable rotationX always contains the rotation of the\ndevice along the x axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> is set to DEGREES, the value will be -180 to 180. If\nit is set to RADIANS, the value will be -PI to PI.</p>\n<p>Note: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.</p>\n",
- "itemtype": "property",
- "name": "rotationX",
- "type": "Number",
- "readonly": "",
+ "name": "doubleClicked",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 1775,
+ "itemtype": "method",
+ "description": "<p>A function that's called once when a mouse button is clicked twice quickly.</p>\n<p>Declaring the function <code>doubleClicked()</code> sets a code block to run\nautomatically when the user presses and releases the mouse button twice\nquickly:</p>\n<pre><code class=\"language-js\">function doubleClicked() {\n // Code to run.\n}</code></pre><p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>doubleClicked()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function doubleClicked() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}</code></pre><p>The parameter, <code>event</code>, is optional. <code>doubleClicked()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the double-click event:</p>\n<pre><code class=\"language-js\">function doubleClicked(event) {\n // Code to run that uses the event.\n console.log(event);\n}</code></pre><p>On touchscreen devices, code placed in <code>doubleClicked()</code> will run after two\ntouches that occur within a short time.</p>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n //rotateZ(radians(rotationZ));\n rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the square's color when the user double-clicks.\nfunction doubleClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black circle at its center. When the user double-clicks on the circle, it changes color to white.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n fill(value);\n\n // Draw the circle.\n circle(50, 50, 80);\n}\n\n// Reassign value to 255 when the user double-clicks on the circle.\nfunction doubleClicked() {\n if (dist(50, 50, mouseX, mouseY) < 40) {\n value = 255;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
- },
- {
- "file": "src/events/acceleration.js",
- "line": 164,
- "description": "<p>The system variable rotationY always contains the rotation of the\ndevice along the y axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> is set to DEGREES, the value will be -90 to 90. If\nit is set to RADIANS, the value will be -PI/2 to PI/2.</p>\n<p>Note: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.</p>\n",
- "itemtype": "property",
- "name": "rotationY",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n //rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "event",
+ "description": "optional <code>MouseEvent</code> argument.",
+ "optional": 1,
+ "type": "MouseEvent"
+ }
+ ]
+ }
],
"class": "p5",
+ "static": false,
"module": "Events",
- "submodule": "Acceleration"
+ "submodule": "Pointer"
},
{
- "file": "src/events/acceleration.js",
- "line": 197,
- "description": "<p>The system variable rotationZ always contains the rotation of the\ndevice along the z axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> is set to DEGREES, the value will be 0 to 360. If\nit is set to RADIANS, the value will be 0 to 2*PI.</p>\n<p>Unlike rotationX and rotationY, this variable is available for devices\nwith a built-in compass only.</p>\n<p>Note: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.</p>\n",
+ "name": "mouseWheel",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 1923,
+ "itemtype": "method",
+ "description": "<p>A function that's called once when the mouse wheel moves.</p>\n<p>Declaring the function <code>mouseWheel()</code> sets a code block to run\nautomatically when the user scrolls with the mouse wheel:</p>\n<pre><code class=\"language-js\">function mouseWheel() {\n // Code to run.\n}</code></pre><p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>mouseWheel()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function mouseWheel() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}</code></pre><p>The parameter, <code>event</code>, is optional. <code>mouseWheel()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the mouse scroll event:</p>\n<pre><code class=\"language-js\">function mouseWheel(event) {\n // Code to run that uses the event.\n console.log(event);\n}</code></pre><p>The <code>event</code> object has many properties including <code>delta</code>, a <code>Number</code>\ncontaining the distance that the user scrolled. For example, <code>event.delta</code>\nmight have the value 5 when the user scrolls up. <code>event.delta</code> is positive\nif the user scrolls up and negative if they scroll down. The signs are\nopposite on macOS with \"natural\" scrolling enabled.</p>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n<p>Note: On Safari, <code>mouseWheel()</code> may only work as expected if\n<code>return false;</code> is added at the end of the function.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet circleSize = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. A white circle at its center grows up when the user scrolls the mouse wheel.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle\n circle(circleSize, 50, 50);\n}\n\n// Increment circleSize when the user scrolls the mouse wheel.\nfunction mouseWheel() {\n circleSize += 1;\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\nlet direction = '';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. An arrow at its center points up when the user scrolls up. The arrow points down when the user scrolls down.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Draw an arrow that points where\n // the mouse last scrolled.\n text(direction, 50, 50);\n}\n\n// Change direction when the user scrolls the mouse wheel.\nfunction mouseWheel(event) {\n if (event.delta > 0) {\n direction = '▲';\n } else {\n direction = '▼';\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
],
- "itemtype": "property",
- "name": "rotationZ",
- "type": "Number",
- "readonly": "",
- "class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
- },
- {
- "file": "src/events/acceleration.js",
- "line": 234,
- "description": "<p>The system variable pRotationX always contains the rotation of the\ndevice along the x axis in the frame previous to the current frame.\nIf the sketch <a href=\"#/p5/angleMode\"> angleMode()</a> is set to DEGREES,\nthe value will be -180 to 180. If it is set to RADIANS, the value will\nbe -PI to PI.</p>\n<p>pRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.</p>\n",
- "example": [
- "\n<div class='norender'>\n<code>\n// A simple if statement looking at whether\n// rotationX - pRotationX < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nlet rX = rotationX + 180;\nlet pRX = pRotationX + 180;\n\nif ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {\n rotateDirection = 'clockwise';\n} else if (rX - pRX < 0 || rX - pRX > 270) {\n rotateDirection = 'counter-clockwise';\n}\n\nprint(rotateDirection);\ndescribe('no image to display.');\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "event",
+ "description": "optional <code>WheelEvent</code> argument.",
+ "optional": 1,
+ "type": "WheelEvent"
+ }
+ ]
+ }
],
- "itemtype": "property",
- "name": "pRotationX",
- "type": "Number",
- "readonly": "",
"class": "p5",
+ "static": false,
"module": "Events",
- "submodule": "Acceleration"
+ "submodule": "Pointer"
},
{
- "file": "src/events/acceleration.js",
- "line": 278,
- "description": "<p>The system variable pRotationY always contains the rotation of the\ndevice along the y axis in the frame previous to the current frame.\nIf the sketch <a href=\"#/p5/angleMode\"> angleMode()</a> is set to DEGREES,\nthe value will be -90 to 90. If it is set to RADIANS, the value will\nbe -PI/2 to PI/2.</p>\n<p>pRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.</p>\n",
+ "name": "requestPointerLock",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 1988,
+ "itemtype": "method",
+ "description": "<p>Locks the mouse pointer to its current position and makes it invisible.</p>\n<p><code>requestPointerLock()</code> allows the mouse to move forever without leaving the\nscreen. Calling <code>requestPointerLock()</code> locks the values of\n<a href=\"#/p5/mouseX\">mouseX</a>, <a href=\"#/p5/mouseY\">mouseY</a>,\n<a href=\"#/p5/pmouseX\">pmouseX</a>, and <a href=\"#/p5/pmouseY\">pmouseY</a>.\n<a href=\"#/p5/movedX\">movedX</a> and <a href=\"#/p5/movedY\">movedY</a>\ncontinue updating and can be used to get the distance the mouse moved since\nthe last frame was drawn. Calling\n<a href=\"#/p5/exitPointerLock\">exitPointerLock()</a> resumes updating the\nmouse system variables.</p>\n<p>Note: Most browsers require an input, such as a click, before calling\n<code>requestPointerLock()</code>. It’s recommended to call <code>requestPointerLock()</code> in\nan event function such as <a href=\"#/p5/doubleClicked\">doubleClicked()</a>.</p>\n",
"example": [
- "\n<div class='norender'>\n<code>\n// A simple if statement looking at whether\n// rotationY - pRotationY < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nlet rY = rotationY + 180;\nlet pRY = pRotationY + 180;\n\nif ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {\n rotateDirection = 'clockwise';\n} else if (rY - pRY < 0 || rY - pRY > 270) {\n rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\ndescribe('no image to display.');\n</code>\n</div>"
+ "<div>\n<code>\nlet score = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the text \"Score: X\" at its center. The score increases when the user moves the mouse upward. It decreases when the user moves the mouse downward.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update the score.\n score -= movedY;\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the score.\n text(`Score: ${score}`, 50, 50);\n}\n\n// Lock the pointer when the user double-clicks.\nfunction doubleClicked() {\n requestPointerLock();\n}\n</code>\n</div>"
],
- "itemtype": "property",
- "name": "pRotationY",
- "type": "Number",
- "readonly": "",
- "class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
- },
- {
- "file": "src/events/acceleration.js",
- "line": 321,
- "description": "<p>The system variable pRotationZ always contains the rotation of the\ndevice along the z axis in the frame previous to the current frame.\nIf the sketch <a href=\"#/p5/angleMode\"> angleMode()</a> is set to DEGREES,\nthe value will be 0 to 360. If it is set to RADIANS, the value will\nbe 0 to 2*PI.</p>\n<p>pRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.</p>\n",
- "example": [
- "\n<div class='norender'>\n<code>\n// A simple if statement looking at whether\n// rotationZ - pRotationZ < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\nif (\n (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||\n rotationZ - pRotationZ < -270\n) {\n rotateDirection = 'clockwise';\n} else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {\n rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\ndescribe('no image to display.');\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": []
+ }
],
- "itemtype": "property",
- "name": "pRotationZ",
- "type": "Number",
- "readonly": "",
"class": "p5",
+ "static": false,
"module": "Events",
- "submodule": "Acceleration"
+ "submodule": "Pointer"
},
{
- "file": "src/events/acceleration.js",
- "line": 378,
- "description": "<p>When a device is rotated, the axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a>\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\nthe scope of deviceTurned().</p>\n",
- "itemtype": "property",
- "name": "turnAxis",
- "type": "String",
- "readonly": "",
+ "name": "exitPointerLock",
+ "file": "src/scripts/parsers/in/p5.js/src/events/pointer.js",
+ "line": 2057,
+ "itemtype": "method",
+ "description": "<p>Exits a pointer lock started with\n<a href=\"#/p5/requestPointerLock\">requestPointerLock</a>.</p>\n<p>Calling <code>requestPointerLock()</code> locks the values of\n<a href=\"#/p5/mouseX\">mouseX</a>, <a href=\"#/p5/mouseY\">mouseY</a>,\n<a href=\"#/p5/pmouseX\">pmouseX</a>, and <a href=\"#/p5/pmouseY\">pmouseY</a>.\nCalling <code>exitPointerLock()</code> resumes updating the mouse system variables.</p>\n<p>Note: Most browsers require an input, such as a click, before calling\n<code>requestPointerLock()</code>. It’s recommended to call <code>requestPointerLock()</code> in\nan event function such as <a href=\"#/p5/doubleClicked\">doubleClicked()</a>.</p>\n",
"example": [
- "\n<div>\n<code>\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device turns`);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when x-axis turns`);\n}\nfunction deviceTurned() {\n if (turnAxis === 'X') {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet isLocked = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a word at its center. The word changes between \"Unlocked\" and \"Locked\" when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Tell the user whether the pointer is locked.\n if (isLocked === true) {\n text('Locked', 50, 50);\n } else {\n text('Unlocked', 50, 50);\n }\n}\n\n// Toggle the pointer lock when the user double-clicks.\nfunction doubleClicked() {\n if (isLocked === true) {\n exitPointerLock();\n isLocked = false;\n } else {\n requestPointerLock();\n isLocked = true;\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
- },
- {
- "file": "src/events/acceleration.js",
- "line": 417,
- "description": "<p>The <a href=\"#/p5/setMoveThreshold\">setMoveThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceMoved\">deviceMoved()</a> function. The default threshold is set to 0.5.</p>\n",
- "itemtype": "method",
- "name": "setMoveThreshold",
- "params": [
+ "overloads": [
{
- "name": "value",
- "description": "<p>The threshold value</p>\n",
- "type": "Number"
+ "params": []
}
],
- "example": [
- "\n<div class=\"norender\">\n<code>\n// Run this example on a mobile device\n// You will need to move the device incrementally further\n// the closer the square's color gets to white in order to change the value.\n\nlet value = 0;\nlet threshold = 0.5;\nfunction setup() {\n setMoveThreshold(threshold);\n}\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device moves`);\n}\nfunction deviceMoved() {\n value = value + 5;\n threshold = threshold + 0.1;\n if (value > 255) {\n value = 0;\n threshold = 30;\n }\n setMoveThreshold(threshold);\n}\n</code>\n</div>"
- ],
"class": "p5",
+ "static": false,
"module": "Events",
- "submodule": "Acceleration"
+ "submodule": "Pointer"
},
{
- "file": "src/events/acceleration.js",
- "line": 459,
- "description": "<p>The <a href=\"#/p5/setShakeThreshold\">setShakeThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceShaken\">deviceShaken()</a> function. The default threshold is set to 30.</p>\n",
+ "name": "createImage",
+ "file": "src/scripts/parsers/in/p5.js/src/image/image.js",
+ "line": 150,
"itemtype": "method",
- "name": "setShakeThreshold",
- "params": [
+ "description": "<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a> object.</p>\n<p><code>createImage()</code> uses the <code>width</code> and <code>height</code> parameters to set the new\n<a href=\"#/p5.Image\">p5.Image</a> object's dimensions in pixels. The new\n<a href=\"#/p5.Image\">p5.Image</a> can be modified by updating its\n<a href=\"#/p5.Image/pixels\">pixels</a> array or by calling its\n<a href=\"#/p5.Image/get\">get()</a> and\n<a href=\"#/p5.Image/set\">set()</a> methods. The\n<a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method must be called\nbefore reading or modifying pixel values. The\n<a href=\"#/p5.Image/updatePixels\">updatePixels()</a> method must be called\nfor updates to take effect.</p>\n<p>Note: The new <a href=\"#/p5.Image\">p5.Image</a> object is transparent by\ndefault.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels into memory.\n img.loadPixels();\n\n // Set all the image's pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image's pixel values.\n img.updatePixels();\n\n // Draw the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels into memory.\n img.loadPixels();\n\n // Create a color gradient.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n // Calculate the transparency.\n let a = map(x, 0, img.width, 0, 255);\n\n // Create a p5.Color object.\n let c = color(0, a);\n\n // Set the pixel's color.\n img.set(x, y, c);\n }\n }\n\n // Update the image's pixels.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A square with a horizontal color gradient that transitions from gray to black.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the pixels into memory.\n img.loadPixels();\n // Get the current pixel density.\n let d = pixelDensity();\n\n // Calculate the pixel that is halfway through the image's pixel array.\n let halfImage = 4 * (d * img.width) * (d * img.height / 2);\n\n // Set half of the image's pixels to black.\n for (let i = 0; i < halfImage; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image's pixels.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "value",
- "description": "<p>The threshold value</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "width",
+ "description": "width in pixels.",
+ "type": "Integer"
+ },
+ {
+ "name": "height",
+ "description": "height in pixels.",
+ "type": "Integer"
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "p5.Image"
+ }
}
],
- "example": [
- "\n<div class=\"norender\">\n<code>\n// Run this example on a mobile device\n// You will need to shake the device more firmly\n// the closer the box's fill gets to white in order to change the value.\n\nlet value = 0;\nlet threshold = 30;\nfunction setup() {\n setShakeThreshold(threshold);\n}\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device is being shaked`);\n}\nfunction deviceMoved() {\n value = value + 5;\n threshold = threshold + 5;\n if (value > 255) {\n value = 0;\n threshold = 30;\n }\n setShakeThreshold(threshold);\n}\n</code>\n</div>"
- ],
+ "return": {
+ "description": "new <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "p5.Image"
+ },
"class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/events/acceleration.js",
- "line": 501,
- "description": "<p>The <a href=\"#/p5/deviceMoved\">deviceMoved()</a> function is called when the device is moved by more than\nthe threshold value along X, Y or Z axis. The default threshold is set to 0.5.\nThe threshold value can be changed using <a href=\"#/p5/setMoveThreshold\">setMoveThreshold()</a>.</p>\n",
+ "name": "saveCanvas",
+ "file": "src/scripts/parsers/in/p5.js/src/image/image.js",
+ "line": 274,
"itemtype": "method",
- "name": "deviceMoved",
+ "description": "<p>Saves the current canvas as an image.</p>\n<p>By default, <code>saveCanvas()</code> saves the canvas as a PNG image called\n<code>untitled.png</code>.</p>\n<p>The first parameter, <code>filename</code>, is optional. It's a string that sets the\nfile's name. If a file extension is included, as in\n<code>saveCanvas('drawing.png')</code>, then the image will be saved using that\nformat.</p>\n<p>The second parameter, <code>extension</code>, is also optional. It sets the files format.\nEither <code>'png'</code>, <code>'webp'</code>, or <code>'jpg'</code> can be used. For example, <code>saveCanvas('drawing', 'jpg')</code>\nsaves the canvas to a file called <code>drawing.jpg</code>.</p>\n<p>Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\n// Run this example on a mobile device\n// Move the device around\n// to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device moves`);\n}\nfunction deviceMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n</code>\n</div>"
+ "<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n background(255);\n\n // Save the canvas to 'untitled.png'.\n saveCanvas();\n\n describe('A white square.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas('myCanvas.jpg');\n\n describe('A white square.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas('myCanvas', 'jpg');\n\n describe('A white square.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'untitled.png'.\n saveCanvas(cnv);\n\n describe('A white square.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas(cnv, 'myCanvas.jpg');\n\n describe('A white square.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas(cnv, 'myCanvas', 'jpg');\n\n describe('A white square.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "selectedCanvas",
+ "description": "reference to a\nspecific HTML5 canvas element.",
+ "type": "p5.Framebuffer|p5.Element|HTMLCanvasElement"
+ },
+ {
+ "name": "filename",
+ "description": "file name. Defaults to 'untitled'.",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "extension",
+ "description": "file extension, either 'png', 'webp', or 'jpg'. Defaults to 'png'.",
+ "optional": 1,
+ "type": "String"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "filename",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "extension",
+ "optional": 1,
+ "type": "String"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/events/acceleration.js",
- "line": 531,
- "description": "<p>The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> function is called when the device rotates by\nmore than 90 degrees continuously.</p>\n<p>The axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method is stored in the turnAxis\nvariable. The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method can be locked to trigger on any axis:\nX, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>\n",
+ "name": "saveFrames",
+ "file": "src/scripts/parsers/in/p5.js/src/image/image.js",
+ "line": 658,
"itemtype": "method",
- "name": "deviceTurned",
+ "description": "<p>Captures a sequence of frames from the canvas that can be saved as images.</p>\n<p><code>saveFrames()</code> creates an array of frame objects. Each frame is stored as\nan object with its file type, file name, and image data as a string. For\nexample, the first saved frame might have the following properties:</p>\n<p><code>{ ext: 'png', filenmame: 'frame0', imageData: 'data:image/octet-stream;base64, abc123' }</code>.</p>\n<p>The first parameter, <code>filename</code>, sets the prefix for the file names. For\nexample, setting the prefix to <code>'frame'</code> would generate the image files\n<code>frame0.png</code>, <code>frame1.png</code>, and so on.</p>\n<p>The second parameter, <code>extension</code>, sets the file type to either <code>'png'</code> or\n<code>'jpg'</code>.</p>\n<p>The third parameter, <code>duration</code>, sets the duration to record in seconds.\nThe maximum duration is 15 seconds.</p>\n<p>The fourth parameter, <code>framerate</code>, sets the number of frames to record per\nsecond. The maximum frame rate value is 22. Limits are placed on <code>duration</code>\nand <code>framerate</code> to avoid using too much memory. Recording large canvases\ncan easily crash sketches or even web browsers.</p>\n<p>The fifth parameter, <code>callback</code>, is optional. If a function is passed,\nimage files won't be saved by default. The callback function can be used\nto process an array containing the data for each captured frame. The array\nof image data contains a sequence of objects with three properties for each\nframe: <code>imageData</code>, <code>filename</code>, and <code>extension</code>.</p>\n<p>Note: Frames are downloaded as individual image files by default.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\n// Run this example on a mobile device\n// Rotate the device by 90 degrees\n// to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device turns`);\n}\nfunction deviceTurned() {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n}\n</code>\n</div>\n<div>\n<code>\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when x-axis turns`);\n}\nfunction deviceTurned() {\n if (turnAxis === 'X') {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square repeatedly changes color from blue to pink.');\n}\n\nfunction draw() {\n let r = frameCount % 255;\n let g = 50;\n let b = 100;\n background(r, g, b);\n}\n\n// Save the frames when the user presses the 's' key.\nfunction keyPressed() {\n if (key === 's') {\n saveFrames('frame', 'png', 1, 5);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square repeatedly changes color from blue to pink.');\n}\n\nfunction draw() {\n let r = frameCount % 255;\n let g = 50;\n let b = 100;\n background(r, g, b);\n}\n\n// Print 5 frames when the user presses the mouse.\nfunction mousePressed() {\n saveFrames('frame', 'png', 1, 5, printFrames);\n}\n\n// Prints an array of objects containing raw image data, filenames, and extensions.\nfunction printFrames(frames) {\n for (let frame of frames) {\n print(frame);\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
- },
- {
- "file": "src/events/acceleration.js",
- "line": 589,
- "description": "<p>The <a href=\"#/p5/deviceShaken\">deviceShaken()</a> function is called when the device total acceleration\nchanges of accelerationX and accelerationY values is more than\nthe threshold value. The default threshold is set to 30.\nThe threshold value can be changed using <a href=\"#/p5/setShakeThreshold\">setShakeThreshold()</a>.</p>\n",
- "itemtype": "method",
- "name": "deviceShaken",
- "example": [
- "\n<div class=\"norender\">\n<code>\n// Run this example on a mobile device\n// Shake the device to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device shakes`);\n}\nfunction deviceShaken() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "filename",
+ "description": "prefix of file name.",
+ "type": "String"
+ },
+ {
+ "name": "extension",
+ "description": "file extension, either 'jpg' or 'png'.",
+ "type": "String"
+ },
+ {
+ "name": "duration",
+ "description": "duration in seconds to record. This parameter will be constrained to be less or equal to 15.",
+ "type": "Number"
+ },
+ {
+ "name": "framerate",
+ "description": "number of frames to save per second. This parameter will be constrained to be less or equal to 22.",
+ "type": "Number"
+ },
+ {
+ "name": "callback",
+ "description": "callback function that will be executed\nto handle the image data. This function\nshould accept an array as argument. The\narray will contain the specified number of\nframes of objects. Each object has three\nproperties: <code>imageData</code>, <code>filename</code>, and <code>extension</code>.",
+ "optional": 1,
+ "type": "function(Array)"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "Events",
- "submodule": "Acceleration"
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/events/keyboard.js",
- "line": 10,
- "description": "<p>A <code>Boolean</code> system variable that's <code>true</code> if any key is currently pressed\nand <code>false</code> if not.</p>\n",
- "itemtype": "property",
- "name": "keyIsPressed",
- "type": "Boolean",
- "readonly": "",
+ "name": "loadImage",
+ "file": "src/scripts/parsers/in/p5.js/src/image/loading_displaying.js",
+ "line": 105,
+ "itemtype": "method",
+ "description": "<p>Loads an image to create a <a href=\"#/p5.Image\">p5.Image</a> object.</p>\n<p><code>loadImage()</code> interprets the first parameter one of three ways. If the path\nto an image file is provided, <code>loadImage()</code> will load it. Paths to local\nfiles should be relative, such as <code>'assets/thundercat.jpg'</code>. URLs such as\n<code>'https://example.com/thundercat.jpg'</code> may be blocked due to browser\nsecurity. Raw image data can also be passed as a base64 encoded image in\nthe form <code>'data:image/png;base64,arandomsequenceofcharacters'</code>. The <code>path</code>\nparameter can also be defined as a <code>Request</code>\nobject for more advanced usage.</p>\n<p>The second parameter is optional. If a function is passed, it will be\ncalled once the image has loaded. The callback function can optionally use\nthe new <a href=\"#/p5.Image\">p5.Image</a> object. The return value of the\nfunction will be used as the final return value of <code>loadImage()</code>.</p>\n<p>The third parameter is also optional. If a function is passed, it will be\ncalled if the image fails to load. The callback function can optionally use\nthe event error. The return value of the function will be used as the final\nreturn value of <code>loadImage()</code>.</p>\n<p>This function returns a <code>Promise</code> and should be used in an <code>async</code> setup with\n<code>await</code>. See the examples for the usage syntax.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The white square turns black when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n if (keyIsPressed === true) {\n fill(0);\n } else {\n fill(255);\n }\n\n // Draw the square.\n square(25, 25, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The white square turns black when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n if (keyIsPressed) {\n fill(0);\n } else {\n fill(255);\n }\n\n // Draw the square.\n square(25, 25, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the word \"false\" at its center. The word switches to \"true\" when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the value of keyIsPressed.\n text(keyIsPressed, 50, 50);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\n// Load the image and create a p5.Image object.\nasync function setup() {\n img = await loadImage('assets/laDefense.jpg');\n createCanvas(100, 100);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n</code>\n</div>\n\n<div>\n<code>\nasync function setup() {\n // Call handleImage() once the image loads.\n await loadImage('assets/laDefense.jpg', handleImage);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n\n// Display the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nasync function setup() {\n // Call handleImage() once the image loads or\n // call handleError() if an error occurs.\n await loadImage('assets/laDefense.jpg', handleImage, handleError);\n}\n\n// Display the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n\n// Log the error.\nfunction handleError(event) {\n console.error('Oops!', event);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "path",
+ "description": "path of the image to be loaded or base64 encoded image.",
+ "type": "String|Request"
+ },
+ {
+ "name": "successCallback",
+ "description": "function called with\n<a href=\"#/p5.Image\">p5.Image</a> once it\nloads.",
+ "optional": 1,
+ "type": "function(p5.Image)"
+ },
+ {
+ "name": "failureCallback",
+ "description": "function called with event\nerror if the image fails to load.",
+ "optional": 1,
+ "type": "function(Event)"
+ }
+ ],
+ "return": {
+ "description": "the <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "Promise<p5.Image>"
+ }
+ }
],
+ "return": {
+ "description": "the <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "Promise<p5.Image>"
+ },
"class": "p5",
- "module": "Events",
- "submodule": "Keyboard"
+ "static": false,
+ "module": "Image",
+ "submodule": "Loading & Displaying"
},
{
- "file": "src/events/keyboard.js",
- "line": 102,
- "description": "<p>A <code>String</code> system variable that contains the value of the last key typed.</p>\n<p>The key variable is helpful for checking whether an\n<a href=\"https://en.wikipedia.org/wiki/ASCII#Printable_characters\" target=\"_blank\">ASCII</a>\nkey has been typed. For example, the expression <code>key === \"a\"</code> evaluates to\n<code>true</code> if the <code>a</code> key was typed and <code>false</code> if not. <code>key</code> doesn’t update\nfor special keys such as <code>LEFT_ARROW</code> and <code>ENTER</code>. Use keyCode instead for\nspecial keys. The <a href=\"#/p5/keyIsDown\">keyIsDown()</a> function should\nbe used to check for multiple different key presses at the same time.</p>\n",
- "itemtype": "property",
- "name": "key",
- "type": "String",
- "readonly": "",
+ "name": "saveGif",
+ "file": "src/scripts/parsers/in/p5.js/src/image/loading_displaying.js",
+ "line": 251,
+ "itemtype": "method",
+ "description": "<p>Generates a gif from a sketch and saves it to a file.</p>\n<p><code>saveGif()</code> may be called in <a href=\"#/p5/setup\">setup()</a> or at any\npoint while a sketch is running.</p>\n<p>The first parameter, <code>fileName</code>, sets the gif's file name.</p>\n<p>The second parameter, <code>duration</code>, sets the gif's duration in seconds.</p>\n<p>The third parameter, <code>options</code>, is optional. If an object is passed,\n<code>saveGif()</code> will use its properties to customize the gif. <code>saveGif()</code>\nrecognizes the properties <code>delay</code>, <code>units</code>, <code>silent</code>,\n<code>notificationDuration</code>, and <code>notificationID</code>.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The last key pressed is displayed at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the last key pressed.\n text(key, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses the keys \"w\", \"a\", \"s\", or \"d\". It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if a key is pressed.\n if (keyIsPressed === true) {\n if (key === 'w') {\n y -= 1;\n } else if (key === 's') {\n y += 1;\n } else if (key === 'a') {\n x -= 1;\n } else if (key === 'd') {\n x += 1;\n }\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle at (x, y).\n circle(x, y, 5);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n let c = frameCount % 255;\n fill(c);\n\n // Display the circle.\n circle(50, 50, 25);\n}\n\n// Save a 5-second gif when the user presses the 's' key.\nfunction keyPressed() {\n if (key === 's') {\n saveGif('mySketch', 5);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n let c = frameCount % 255;\n fill(c);\n\n // Display the circle.\n circle(50, 50, 25);\n}\n\n// Save a 5-second gif when the user presses the 's' key.\n// Wait 1 second after the key press before recording.\nfunction keyPressed() {\n if (key === 's') {\n saveGif('mySketch', 5, { delay: 1 });\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "filename",
+ "description": "file name of gif.",
+ "type": "String"
+ },
+ {
+ "name": "duration",
+ "description": "duration in seconds to capture from the sketch.",
+ "type": "Number"
+ },
+ {
+ "name": "options",
+ "description": "an object that can contain five more properties:\n<code>delay</code>, a Number specifying how much time to wait before recording;\n<code>units</code>, a String that can be either 'seconds' or 'frames'. By default it's 'seconds’;\n<code>silent</code>, a Boolean that defines presence of progress notifications. By default it’s <code>false</code>;\n<code>notificationDuration</code>, a Number that defines how long in seconds the final notification\nwill live. By default it's <code>0</code>, meaning the notification will never be removed;\n<code>notificationID</code>, a String that specifies the id of the notification's DOM element. By default it’s <code>'progressBar’</code>.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "Events",
- "submodule": "Keyboard"
+ "static": false,
+ "module": "Image",
+ "submodule": "Loading & Displaying"
},
{
- "file": "src/events/keyboard.js",
- "line": 184,
- "description": "<p>A <code>Number</code> system variable that contains the code of the last key typed.</p>\n<p>All keys have a <code>keyCode</code>. For example, the <code>a</code> key has the <code>keyCode</code> 65.\nThe <code>keyCode</code> variable is helpful for checking whether a special key has\nbeen typed. For example, the following conditional checks whether the enter\nkey has been typed:</p>\n<pre><code class=\"language-js\">if (keyCode === 13) {\n // Code to run if the enter key was pressed.\n}\n</code></pre>\n<p>The same code can be written more clearly using the system variable <code>ENTER</code>\nwhich has a value of 13:</p>\n<pre><code class=\"language-js\">if (keyCode === ENTER) {\n // Code to run if the enter key was pressed.\n}\n</code></pre>\n<p>The system variables <code>BACKSPACE</code>, <code>DELETE</code>, <code>ENTER</code>, <code>RETURN</code>, <code>TAB</code>,\n<code>ESCAPE</code>, <code>SHIFT</code>, <code>CONTROL</code>, <code>OPTION</code>, <code>ALT</code>, <code>UP_ARROW</code>, <code>DOWN_ARROW</code>,\n<code>LEFT_ARROW</code>, and <code>RIGHT_ARROW</code> are all helpful shorthands the key codes of\nspecial keys. Key codes can be found on websites such as\n<a href=\"http://keycode.info/\">keycode.info</a>.</p>\n",
- "itemtype": "property",
- "name": "keyCode",
- "type": "Integer",
- "readonly": "",
+ "name": "image",
+ "file": "src/scripts/parsers/in/p5.js/src/image/loading_displaying.js",
+ "line": 1034,
+ "itemtype": "method",
+ "description": "<p>Draws an image to the canvas.</p>\n<p>The first parameter, <code>img</code>, is the source image to be drawn. <code>img</code> can be\nany of the following objects:</p>\n<ul><li><a href=\"#/p5.Image\">p5.Image</a></li><li><a href=\"#/p5.Element\">p5.Element</a></li><li><a href=\"#/p5.Texture\">p5.Texture</a></li><li><a href=\"#/p5.Framebuffer\">p5.Framebuffer</a></li><li><a href=\"#/p5.FramebufferTexture\">p5.FramebufferTexture</a></li></ul><p>The second and third parameters, <code>dx</code> and <code>dy</code>, set the coordinates of the\ndestination image's top left corner. See\n<a href=\"#/p5/imageMode\">imageMode()</a> for other ways to position images.</p>\n<pre><code class=\"language-js example\">let img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe('An image of the underside of a white umbrella with a gridded ceiling above.');\n}</code></pre><p>Here's a diagram that explains how optional parameters work in <code>image()</code>:</p>\n<p><img src=\"assets/drawImage.png\"></img></p>\n<p>The fourth and fifth parameters, <code>dw</code> and <code>dh</code>, are optional. They set the\nthe width and height to draw the destination image. By default, <code>image()</code>\ndraws the full source image at its original size.</p>\n<p>The sixth and seventh parameters, <code>sx</code> and <code>sy</code>, are also optional.\nThese coordinates define the top left corner of a subsection to draw from\nthe source image.</p>\n<p>The eighth and ninth parameters, <code>sw</code> and <code>sh</code>, are also optional.\nThey define the width and height of a subsection to draw from the source\nimage. By default, <code>image()</code> draws the full subsection that begins at\n<code>(sx, sy)</code> and extends to the edges of the source image.</p>\n<p>The ninth parameter, <code>fit</code>, is also optional. It enables a subsection of\nthe source image to be drawn without affecting its aspect ratio. If\n<code>CONTAIN</code> is passed, the full subsection will appear within the destination\nrectangle. If <code>COVER</code> is passed, the subsection will completely cover the\ndestination rectangle. This may have the effect of zooming into the\nsubsection.</p>\n<p>The tenth and eleventh paremeters, <code>xAlign</code> and <code>yAlign</code>, are also\noptional. They determine how to align the fitted subsection. <code>xAlign</code> can\nbe set to either <code>LEFT</code>, <code>RIGHT</code>, or <code>CENTER</code>. <code>yAlign</code> can be set to\neither <code>TOP</code>, <code>BOTTOM</code>, or <code>CENTER</code>. By default, both <code>xAlign</code> and <code>yAlign</code>\nare set to <code>CENTER</code>.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The last key pressed and its code are displayed at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the last key pressed and its code.\n text(`${key} : ${keyCode}`, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if an arrow key is pressed.\n if (keyIsPressed === true) {\n if (keyCode === UP_ARROW) {\n y -= 1;\n } else if (keyCode === DOWN_ARROW) {\n y += 1;\n } else if (keyCode === LEFT_ARROW) {\n x -= 1;\n } else if (keyCode === RIGHT_ARROW) {\n x += 1;\n }\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle at (x, y).\n circle(x, y, 5);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image.\n image(img, 10, 10);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image 50x50.\n image(img, 0, 0, 50, 50);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the center of the image.\n image(img, 25, 25, 50, 50, 25, 25, 50, 50);\n\n describe('An image of a gridded ceiling drawn in the center of a dark gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/moonwalk.jpg');\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image and scale it to fit within the canvas.\n image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);\n\n describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/laDefense50.png');\n\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image and scale it to cover the canvas.\n image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);\n\n describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "img",
+ "description": "image to display.",
+ "type": "p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"
+ },
+ {
+ "name": "x",
+ "description": "x-coordinate of the top-left corner of the image.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the top-left corner of the image.",
+ "type": "Number"
+ },
+ {
+ "name": "width",
+ "description": "width to draw the image.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "height to draw the image.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "img",
+ "type": "p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"
+ },
+ {
+ "name": "dx",
+ "description": "the x-coordinate of the destination\nrectangle in which to draw the source image",
+ "type": "Number"
+ },
+ {
+ "name": "dy",
+ "description": "the y-coordinate of the destination\nrectangle in which to draw the source image",
+ "type": "Number"
+ },
+ {
+ "name": "dWidth",
+ "description": "the width of the destination rectangle",
+ "type": "Number"
+ },
+ {
+ "name": "dHeight",
+ "description": "the height of the destination rectangle",
+ "type": "Number"
+ },
+ {
+ "name": "sx",
+ "description": "the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle",
+ "type": "Number"
+ },
+ {
+ "name": "sy",
+ "description": "the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle",
+ "type": "Number"
+ },
+ {
+ "name": "sWidth",
+ "description": "the width of the subsection of the\nsource image to draw into the destination\nrectangle",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "sHeight",
+ "description": "the height of the subsection of the\nsource image to draw into the destination rectangle",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "fit",
+ "description": "either CONTAIN or COVER",
+ "optional": 1,
+ "type": "CONTAIN|COVER"
+ },
+ {
+ "name": "xAlign",
+ "description": "either LEFT, RIGHT or CENTER default is CENTER",
+ "optional": 1,
+ "type": "LEFT|RIGHT|CENTER"
+ },
+ {
+ "name": "yAlign",
+ "description": "either TOP, BOTTOM or CENTER default is CENTER",
+ "optional": 1,
+ "type": "TOP|BOTTOM|CENTER"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "Events",
- "submodule": "Keyboard"
+ "static": false,
+ "module": "Image",
+ "submodule": "Loading & Displaying"
},
{
- "file": "src/events/keyboard.js",
- "line": 284,
- "description": "<p>A function that's called once when any key is pressed.</p>\n<p>Declaring the function <code>keyPressed()</code> sets a code block to run once\nautomatically when the user presses any key:</p>\n<pre><code class=\"language-js\">function keyPressed() {\n // Code to run.\n}\n</code></pre>\n<p>The <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a>\nvariables will be updated with the most recently typed value when\n<code>keyPressed()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function keyPressed() {\n if (key === 'c') {\n // Code to run.\n }\n\n if (keyCode === ENTER) {\n // Code to run.\n }\n}\n</code></pre>\n<p>The parameter, <code>event</code>, is optional. <code>keyPressed()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent\" target=\"_blank\">KeyboardEvent</a>\nobject with properties that describe the key press event:</p>\n<pre><code class=\"language-js\">function keyPressed(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>Browsers may have default behaviors attached to various key events. For\nexample, some browsers may jump to the bottom of a web page when the\n<code>SPACE</code> key is pressed. To prevent any default behavior for this event, add\n<code>return false;</code> to the end of the function.</p>\n",
+ "name": "tint",
+ "file": "src/scripts/parsers/in/p5.js/src/image/loading_displaying.js",
+ "line": 1269,
"itemtype": "method",
- "name": "keyPressed",
- "params": [
+ "description": "<p>Tints images using a color.</p>\n<p>The version of <code>tint()</code> with one parameter interprets it one of four ways.\nIf the parameter is a number, it's interpreted as a grayscale value. If the\nparameter is a string, it's interpreted as a CSS color string. An array of\n<code>[R, G, B, A]</code> values or a <a href=\"#/p5.Color\">p5.Color</a> object can\nalso be used to set the tint color.</p>\n<p>The version of <code>tint()</code> with two parameters uses the first one as a\ngrayscale value and the second as an alpha value. For example, calling\n<code>tint(255, 128)</code> will make an image 50% transparent.</p>\n<p>The version of <code>tint()</code> with three parameters interprets them as RGB or\nHSB values, depending on the current\n<a href=\"#/p5/colorMode\">colorMode()</a>. The optional fourth parameter\nsets the alpha value. For example, <code>tint(255, 0, 0, 100)</code> will give images\na red tint and make them transparent.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100);\n\n // Left image.\n image(img, 0, 0);\n\n // Right image.\n // Tint with a CSS color string.\n tint('red');\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100);\n\n // Left image.\n image(img, 0, 0);\n\n // Right image.\n // Tint with RGB values.\n tint(255, 0, 0);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n*\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100);\n\n // Left.\n image(img, 0, 0);\n\n // Right.\n // Tint with RGBA values.\n tint(255, 0, 0, 100);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100);\n\n // Left.\n image(img, 0, 0);\n\n // Right.\n // Tint with grayscale and alpha values.\n tint(255, 180);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "event",
- "description": "<p>optional <code>KeyboardEvent</code> callback argument.</p>\n",
- "type": "KeyboardEvent",
- "optional": true
+ "params": [
+ {
+ "name": "v1",
+ "description": "red or hue value.",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "description": "green or saturation value.",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "description": "blue or brightness.",
+ "type": "Number"
+ },
+ {
+ "name": "alpha",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "value",
+ "description": "CSS color string.",
+ "type": "String"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "gray",
+ "description": "grayscale value.",
+ "type": "Number"
+ },
+ {
+ "name": "alpha",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "values",
+ "description": "array containing the red, green, blue &\nalpha components of the color.",
+ "type": "Number[]"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "color",
+ "description": "the tint color",
+ "type": "p5.Color"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the background color when the user presses a key.\nfunction keyPressed() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square turns black when the user presses the \"b\" key. It turns white when the user presses the \"a\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Reassign value when the user presses the 'a' or 'b' key.\nfunction keyPressed() {\n if (key === 'a') {\n value = 255;\n } else if (key === 'b') {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square turns white when the user presses the left arrow key. It turns black when the user presses the right arrow key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the background color when the user presses an arrow key.\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW) {\n value = 255;\n } else if (keyCode === RIGHT_ARROW) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Events",
- "submodule": "Keyboard"
+ "static": false,
+ "module": "Image",
+ "submodule": "Loading & Displaying"
},
{
- "file": "src/events/keyboard.js",
- "line": 472,
- "description": "<p>A function that's called once when any key is released.</p>\n<p>Declaring the function <code>keyReleased()</code> sets a code block to run once\nautomatically when the user releases any key:</p>\n<pre><code class=\"language-js\">function keyReleased() {\n // Code to run.\n}\n</code></pre>\n<p>The <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a>\nvariables will be updated with the most recently released value when\n<code>keyReleased()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function keyReleased() {\n if (key === 'c') {\n // Code to run.\n }\n\n if (keyCode === ENTER) {\n // Code to run.\n }\n}\n</code></pre>\n<p>The parameter, <code>event</code>, is optional. <code>keyReleased()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent\" target=\"_blank\">KeyboardEvent</a>\nobject with properties that describe the key press event:</p>\n<pre><code class=\"language-js\">function keyReleased(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>Browsers may have default behaviors attached to various key events. To\nprevent any default behavior for this event, add <code>return false;</code> to the end\nof the function.</p>\n",
+ "name": "noTint",
+ "file": "src/scripts/parsers/in/p5.js/src/image/loading_displaying.js",
+ "line": 1308,
"itemtype": "method",
- "name": "keyReleased",
- "params": [
+ "description": "<p>Removes the current tint set by <a href=\"#/p5/tint\">tint()</a>.</p>\n<p><code>noTint()</code> restores images to their original colors.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100);\n\n // Left.\n // Tint with a CSS color string.\n tint('red');\n image(img, 0, 0);\n\n // Right.\n // Remove the tint.\n noTint();\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "event",
- "description": "<p>optional <code>KeyboardEvent</code> callback argument.</p>\n",
- "type": "KeyboardEvent",
- "optional": true
+ "params": []
}
],
- "example": [
- "\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user releases a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle value when the user releases a key.\nfunction keyReleased() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes white when the user releases the \"w\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Set value to 255 the user releases the 'w' key.\nfunction keyReleased() {\n if (key === 'w') {\n value = 255;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square turns white when the user presses and releases the left arrow key. It turns black when the user presses and releases the right arrow key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the background color when the user releases an arrow key.\nfunction keyReleased() {\n if (keyCode === LEFT_ARROW) {\n value = 255;\n } else if (keyCode === RIGHT_ARROW) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Events",
- "submodule": "Keyboard"
+ "static": false,
+ "module": "Image",
+ "submodule": "Loading & Displaying"
},
{
- "file": "src/events/keyboard.js",
- "line": 653,
- "description": "<p>A function that's called once when keys with printable characters are pressed.</p>\n<p>Declaring the function <code>keyTyped()</code> sets a code block to run once\nautomatically when the user presses any key with a printable character such\nas <code>a</code> or 1. Modifier keys such as <code>SHIFT</code>, <code>CONTROL</code>, and the arrow keys\nwill be ignored:</p>\n<pre><code class=\"language-js\">function keyTyped() {\n // Code to run.\n}\n</code></pre>\n<p>The <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a>\nvariables will be updated with the most recently released value when\n<code>keyTyped()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function keyTyped() {\n // Check for the \"c\" character using key.\n if (key === 'c') {\n // Code to run.\n }\n\n // Check for \"c\" using keyCode.\n if (keyCode === 67) {\n // Code to run.\n }\n}\n</code></pre>\n<p>The parameter, <code>event</code>, is optional. <code>keyTyped()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent\" target=\"_blank\">KeyboardEvent</a>\nobject with properties that describe the key press event:</p>\n<pre><code class=\"language-js\">function keyReleased(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>Note: Use the <a href=\"#/p5/keyPressed\">keyPressed()</a> function and\n<a href=\"#/p5/keyCode\">keyCode</a> system variable to respond to modifier\nkeys such as <code>ALT</code>.</p>\n<p>Browsers may have default behaviors attached to various key events. To\nprevent any default behavior for this event, add <code>return false;</code> to the end\nof the function.</p>\n",
+ "name": "imageMode",
+ "file": "src/scripts/parsers/in/p5.js/src/image/loading_displaying.js",
+ "line": 1415,
"itemtype": "method",
- "name": "keyTyped",
- "params": [
- {
- "name": "event",
- "description": "<p>optional <code>KeyboardEvent</code> callback argument.</p>\n",
- "type": "KeyboardEvent",
- "optional": true
- }
- ],
+ "description": "<p>Changes the location from which images are drawn when\n<a href=\"#/p5/image\">image()</a> is called.</p>\n<p>By default, the first\ntwo parameters of <a href=\"#/p5/image\">image()</a> are the x- and\ny-coordinates of the image's upper-left corner. The next parameters are\nits width and height. This is the same as calling <code>imageMode(CORNER)</code>.</p>\n<p><code>imageMode(CORNERS)</code> also uses the first two parameters of\n<a href=\"#/p5/image\">image()</a> as the x- and y-coordinates of the image's\ntop-left corner. The third and fourth parameters are the coordinates of its\nbottom-right corner.</p>\n<p><code>imageMode(CENTER)</code> uses the first two parameters of\n<a href=\"#/p5/image\">image()</a> as the x- and y-coordinates of the image's\ncenter. The next parameters are its width and height.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n// Note: Pressing special keys such as SPACE have no effect.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square changes color when the user presses a key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the square's color when the user types a printable key.\nfunction keyTyped() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square turns black when the user types the \"b\" key. It turns white when the user types the \"a\" key.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Reassign value when the user types the 'a' or 'b' key.\nfunction keyTyped() {\n if (key === 'a') {\n value = 255;\n } else if (key === 'b') {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Use CORNER mode.\n imageMode(CORNER);\n\n // Display the image.\n image(img, 10, 10, 50, 50);\n\n describe('A square image of a brick wall is drawn at the top left of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Use CORNERS mode.\n imageMode(CORNERS);\n\n // Display the image.\n image(img, 10, 10, 90, 40);\n\n describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Use CENTER mode.\n imageMode(CENTER);\n\n // Display the image.\n image(img, 50, 50, 80, 80);\n\n describe('A square image of a brick wall is drawn on a gray square.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Keyboard"
- },
- {
- "file": "src/events/keyboard.js",
- "line": 799,
- "description": "<p>The onblur function is called when the user is no longer focused\non the p5 element. Because the keyup events will not fire if the user is\nnot focused on the element we must assume all keys currently down have\nbeen released.</p>\n",
- "class": "p5",
- "module": "Events",
- "submodule": "Keyboard"
- },
- {
- "file": "src/events/keyboard.js",
- "line": 809,
- "description": "<p>Returns <code>true</code> if the key it’s checking is pressed and <code>false</code> if not.</p>\n<p><code>keyIsDown()</code> is helpful when checking for multiple different key presses.\nFor example, <code>keyIsDown()</code> can be used to check if both <code>LEFT_ARROW</code> and\n<code>UP_ARROW</code> are pressed:</p>\n<pre><code class=\"language-js\">if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {\n // Move diagonally.\n}\n</code></pre>\n<p><code>keyIsDown()</code> can check for key presses using\n<a href=\"#/p5/keyCode\">keyCode</a> values, as in <code>keyIsDown(37)</code> or\n<code>keyIsDown(LEFT_ARROW)</code>. Key codes can be found on websites such as\n<a href=\"https://keycode.info\" target=\"_blank\">keycode.info</a>.</p>\n",
- "itemtype": "method",
- "name": "keyIsDown",
- "params": [
+ "overloads": [
{
- "name": "code",
- "description": "<p>key to check.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "mode",
+ "description": "either CORNER, CORNERS, or CENTER.",
+ "type": "CORNER|CORNERS|CENTER"
+ }
+ ]
}
],
- "return": {
- "description": "whether the key is down or not.",
- "type": "Boolean"
- },
- "example": [
- "\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if an arrow key is pressed.\n if (keyIsDown(LEFT_ARROW) === true) {\n x -= 1;\n }\n\n if (keyIsDown(RIGHT_ARROW) === true) {\n x += 1;\n }\n\n if (keyIsDown(UP_ARROW) === true) {\n y -= 1;\n }\n\n if (keyIsDown(DOWN_ARROW) === true) {\n y += 1;\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle.\n circle(x, y, 5);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click on the canvas to begin detecting key presses.\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe(\n 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'\n );\n}\n\nfunction draw() {\n // Update x and y if an arrow key is pressed.\n if (keyIsDown(37) === true) {\n x -= 1;\n }\n\n if (keyIsDown(39) === true) {\n x += 1;\n }\n\n if (keyIsDown(38) === true) {\n y -= 1;\n }\n\n if (keyIsDown(40) === true) {\n y += 1;\n }\n\n // Style the circle.\n fill(0);\n\n // Draw the circle.\n circle(x, y, 5);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Events",
- "submodule": "Keyboard"
+ "static": false,
+ "module": "Image",
+ "submodule": "Loading & Displaying"
},
{
- "file": "src/events/mouse.js",
- "line": 12,
- "description": "<p>A <code>Number</code> system variable that tracks the mouse's horizontal movement.</p>\n<p><code>movedX</code> tracks how many pixels the mouse moves left or right between\nframes. <code>movedX</code> will have a negative value if the mouse moves left between\nframes and a positive value if it moves right. <code>movedX</code> can be calculated\nas <code>mouseX - pmouseX</code>.</p>\n<p>Note: <code>movedX</code> continues updating even when\n<a href=\"#/p5/requestPointerLock\">requestPointerLock()</a> is active.</p>\n",
- "itemtype": "property",
- "name": "movedX",
- "type": "Number",
- "readonly": "",
+ "name": "blend",
+ "file": "src/scripts/parsers/in/p5.js/src/image/pixels.js",
+ "line": 271,
+ "itemtype": "method",
+ "description": "<p>Copies a region of pixels from one image to another.</p>\n<p>The first parameter, <code>srcImage</code>, is the\n<a href=\"#/p5.Image\">p5.Image</a> object to blend.</p>\n<p>The next four parameters, <code>sx</code>, <code>sy</code>, <code>sw</code>, and <code>sh</code> determine the region\nto blend from the source image. <code>(sx, sy)</code> is the top-left corner of the\nregion. <code>sw</code> and <code>sh</code> are the regions width and height.</p>\n<p>The next four parameters, <code>dx</code>, <code>dy</code>, <code>dw</code>, and <code>dh</code> determine the region\nof the canvas to blend into. <code>(dx, dy)</code> is the top-left corner of the\nregion. <code>dw</code> and <code>dh</code> are the regions width and height.</p>\n<p>The tenth parameter, <code>blendMode</code>, sets the effect used to blend the images'\ncolors. The options are <code>BLEND</code>, <code>DARKEST</code>, <code>LIGHTEST</code>, <code>DIFFERENCE</code>,\n<code>MULTIPLY</code>, <code>EXCLUSION</code>, <code>SCREEN</code>, <code>REPLACE</code>, <code>OVERLAY</code>, <code>HARD_LIGHT</code>,\n<code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>, <code>ADD</code>, or <code>NORMAL</code></p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The text \">>\" appears when the user moves the mouse to the right. The text \"<<\" appears when the user moves the mouse to the left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display >> when movedX is positive and\n // << when it's negative.\n if (movedX > 0) {\n text('>>', 50, 50);\n } else if (movedX < 0) {\n text('<<', 50, 50);\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img0;\nlet img1;\n\nasync function setup() {\n // Load the images.\n img0 = await loadImage('assets/rockies.jpg');\n img1 = await loadImage('assets/bricks_third.jpg');\n\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img0);\n\n // Display the bricks.\n image(img1, 0, 0);\n\n // Display the bricks faded into the landscape.\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img0;\nlet img1;\n\nasync function setup() {\n // Load the images.\n img0 = await loadImage('assets/rockies.jpg');\n img1 = await loadImage('assets/bricks_third.jpg');\n\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img0);\n\n // Display the bricks.\n image(img1, 0, 0);\n\n // Display the bricks partially transparent.\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img0;\nlet img1;\n\nasync function setup() {\n // Load the images.\n img0 = await loadImage('assets/rockies.jpg');\n img1 = await loadImage('assets/bricks_third.jpg');\n\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img0);\n\n // Display the bricks.\n image(img1, 0, 0);\n\n // Display the bricks washed out into the landscape.\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n\n 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.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Mouse"
- },
- {
- "file": "src/events/mouse.js",
- "line": 57,
- "description": "<p>A <code>Number</code> system variable that tracks the mouse's vertical movement.</p>\n<p><code>movedY</code> tracks how many pixels the mouse moves up or down between\nframes. <code>movedY</code> will have a negative value if the mouse moves up between\nframes and a positive value if it moves down. <code>movedY</code> can be calculated\nas <code>mouseY - pmouseY</code>.</p>\n<p>Note: <code>movedY</code> continues updating even when\n<a href=\"#/p5/requestPointerLock\">requestPointerLock()</a> is active.</p>\n",
- "itemtype": "property",
- "name": "movedY",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. The text \"▲\" appears when the user moves the mouse upward. The text \"▼\" appears when the user moves the mouse downward.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display ▼ when movedY is positive and\n // ▲ when it's negative.\n if (movedY > 0) {\n text('▼', 50, 50);\n } else if (movedY < 0) {\n text('▲', 50, 50);\n }\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "srcImage",
+ "description": "source image.",
+ "type": "p5.Image"
+ },
+ {
+ "name": "sx",
+ "description": "x-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "description": "y-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "description": "source image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "description": "source image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "description": "x-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "description": "y-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "description": "destination image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "description": "destination image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "blendMode",
+ "description": "the blend mode. either\nBLEND, DARKEST, LIGHTEST, DIFFERENCE,\nMULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\nSOFT_LIGHT, DODGE, BURN, ADD or NORMAL.",
+ "type": "BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "sx",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "type": "Integer"
+ },
+ {
+ "name": "blendMode",
+ "type": "BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "Events",
- "submodule": "Mouse"
+ "static": false,
+ "module": "Image",
+ "submodule": "Pixels"
},
{
- "file": "src/events/mouse.js",
- "line": 109,
- "description": "<p>A <code>Number</code> system variable that tracks the mouse's horizontal position.</p>\n<p>In 2D mode, <code>mouseX</code> keeps track of the mouse's position relative to the\ntop-left corner of the canvas. For example, if the mouse is 50 pixels from\nthe left edge of the canvas, then <code>mouseX</code> will be 50.</p>\n<p>In WebGL mode, <code>mouseX</code> keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse is 50 pixels to the right\nof the canvas' center, then <code>mouseX</code> will be 50.</p>\n<p>If touch is used instead of the mouse, then <code>mouseX</code> will hold the\nx-coordinate of the most recent touch point.</p>\n",
- "itemtype": "property",
- "name": "mouseX",
- "type": "Number",
- "readonly": "",
+ "name": "copy",
+ "file": "src/scripts/parsers/in/p5.js/src/image/pixels.js",
+ "line": 346,
+ "itemtype": "method",
+ "description": "<p>Copies pixels from a source image to a region of the canvas.</p>\n<p>The first parameter, <code>srcImage</code>, is the\n<a href=\"#/p5.Image\">p5.Image</a> object to blend. The source image can be\nthe canvas itself or a\n<a href=\"#/p5.Image\">p5.Image</a> object. <code>copy()</code> will scale pixels from\nthe source region if it isn't the same size as the destination region.</p>\n<p>The next four parameters, <code>sx</code>, <code>sy</code>, <code>sw</code>, and <code>sh</code> determine the region\nto copy from the source image. <code>(sx, sy)</code> is the top-left corner of the\nregion. <code>sw</code> and <code>sh</code> are the region's width and height.</p>\n<p>The next four parameters, <code>dx</code>, <code>dy</code>, <code>dw</code>, and <code>dh</code> determine the region\nof the canvas to copy into. <code>(dx, dy)</code> is the top-left corner of the\nregion. <code>dw</code> and <code>dh</code> are the region's width and height.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A vertical black line moves left and right following the mouse's x-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Draw a vertical line that follows the mouse's x-coordinate.\n line(mouseX, 0, mouseX, 100);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A vertical black line moves left and right following the mouse's x-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let mx = mouseX - 50;\n\n // Draw the line.\n line(mx, -50, mx, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet font;\n\n// Load a font for WebGL mode.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n \"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 0, 0);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img);\n\n // Copy a region of pixels to another spot.\n copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n\n // Outline the copied region.\n stroke(255);\n noFill();\n square(7, 22, 10);\n\n 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.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Mouse"
- },
- {
- "file": "src/events/mouse.js",
- "line": 220,
- "description": "<p>A <code>Number</code> system variable that tracks the mouse's vertical position.</p>\n<p>In 2D mode, <code>mouseY</code> keeps track of the mouse's position relative to the\ntop-left corner of the canvas. For example, if the mouse is 50 pixels from\nthe top edge of the canvas, then <code>mouseY</code> will be 50.</p>\n<p>In WebGL mode, <code>mouseY</code> keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse is 50 pixels below the\ncanvas' center, then <code>mouseY</code> will be 50.</p>\n<p>If touch is used instead of the mouse, then <code>mouseY</code> will hold the\ny-coordinate of the most recent touch point.</p>\n",
- "itemtype": "property",
- "name": "mouseY",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A horizontal black line moves up and down following the mouse's y-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Draw a horizontal line that follows the mouse's y-coordinate.\n line(0, mouseY, 100, mouseY);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\"A horizontal black line moves up and down following the mouse's y-position.\");\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let my = mouseY - 50;\n\n // Draw the line.\n line(-50, my, 50, my);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet font;\n\n// Load a font for WebGL mode.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n \"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the mouse's coordinates.\n text(`x: ${mouseX} y: ${mouseY}`, 0, 0);\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "srcImage",
+ "description": "source image.",
+ "type": "p5.Image|p5.Element"
+ },
+ {
+ "name": "sx",
+ "description": "x-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "description": "y-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "description": "source image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "description": "source image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "description": "x-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "description": "y-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "description": "destination image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "description": "destination image height.",
+ "type": "Integer"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "sx",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "type": "Integer"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "Events",
- "submodule": "Mouse"
+ "static": false,
+ "module": "Image",
+ "submodule": "Pixels"
},
{
- "file": "src/events/mouse.js",
- "line": 331,
- "description": "<p>A <code>Number</code> system variable that tracks the mouse's previous horizontal\nposition.</p>\n<p>In 2D mode, <code>pmouseX</code> keeps track of the mouse's position relative to the\ntop-left corner of the canvas. Its value is\n<a href=\"#/p5/mouseX\">mouseX</a> from the previous frame. For example, if\nthe mouse was 50 pixels from the left edge of the canvas during the last\nframe, then <code>pmouseX</code> will be 50.</p>\n<p>In WebGL mode, <code>pmouseX</code> keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse was 50 pixels to the right\nof the canvas' center during the last frame, then <code>pmouseX</code> will be 50.</p>\n<p>If touch is used instead of the mouse, then <code>pmouseX</code> will hold the\nx-coordinate of the last touch point.</p>\n<p>Note: <code>pmouseX</code> is reset to the current <a href=\"#/p5/mouseX\">mouseX</a>\nvalue at the start of each touch event.</p>\n",
- "itemtype": "property",
- "name": "pmouseX",
- "type": "Number",
- "readonly": "",
+ "name": "filter",
+ "file": "src/scripts/parsers/in/p5.js/src/image/pixels.js",
+ "line": 695,
+ "itemtype": "method",
+ "description": "<p>Applies an image filter to the canvas.</p>\n<p>The preset options are:</p>\n<p><code>INVERT</code>\nInverts the colors in the image. No parameter is used.</p>\n<p><code>GRAY</code>\nConverts the image to grayscale. No parameter is used.</p>\n<p><code>THRESHOLD</code>\nConverts the image to black and white. Pixels with a grayscale value\nabove a given threshold are converted to white. The rest are converted to\nblack. The threshold must be between 0.0 (black) and 1.0 (white). If no\nvalue is specified, 0.5 is used.</p>\n<p><code>OPAQUE</code>\nSets the alpha channel to entirely opaque. No parameter is used.</p>\n<p><code>POSTERIZE</code>\nLimits the number of colors in the image. Each color channel is limited to\nthe number of colors specified. Values between 2 and 255 are valid, but\nresults are most noticeable with lower values. The default value is 4.</p>\n<p><code>BLUR</code>\nBlurs the image. The level of blurring is specified by a blur radius. Larger\nvalues increase the blur. The default value is 4. A gaussian blur is used\nin <code>P2D</code> mode. A box blur is used in <code>WEBGL</code> mode.</p>\n<p><code>ERODE</code>\nReduces the light areas. No parameter is used.</p>\n<p><code>DILATE</code>\nIncreases the light areas. No parameter is used.</p>\n<p><code>filter()</code> uses WebGL in the background by default because it's faster.\nThis can be disabled in <code>P2D</code> mode by adding a <code>false</code> argument, as in\n<code>filter(BLUR, false)</code>. This may be useful to keep computation off the GPU\nor to work around a lack of WebGL support.</p>\n<p>In WebgL mode, <code>filter()</code> can also use custom shaders. See\n<a href=\"#/p5/createFilterShader\">createFilterShader()</a> for more\ninformation.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n line(pmouseX, pmouseY, mouseX, mouseY);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let pmx = pmouseX - 50;\n let pmy = pmouseY - 50;\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Draw the line.\n line(pmx, pmy, mx, my);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the INVERT filter.\n filter(INVERT);\n\n describe('A blue brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the GRAY filter.\n filter(GRAY);\n\n describe('A brick wall drawn in grayscale.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the THRESHOLD filter.\n filter(THRESHOLD);\n\n describe('A brick wall drawn in black and white.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the OPAQUE filter.\n filter(OPAQUE);\n\n describe('A red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the POSTERIZE filter.\n filter(POSTERIZE, 3);\n\n describe('An image of a red brick wall drawn with limited color palette.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the BLUR filter.\n filter(BLUR, 3);\n\n describe('A blurry image of a red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the DILATE filter.\n filter(DILATE);\n\n describe('A red brick wall with bright lines between each brick.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the ERODE filter.\n filter(ERODE);\n\n describe('A red brick wall with faint lines between each brick.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the BLUR filter.\n // Don't use WebGL.\n filter(BLUR, 3, false);\n\n describe('A blurry image of a red brick wall.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Mouse"
- },
- {
- "file": "src/events/mouse.js",
- "line": 400,
- "description": "<p>A <code>Number</code> system variable that tracks the mouse's previous vertical\nposition.</p>\n<p>In 2D mode, <code>pmouseY</code> keeps track of the mouse's position relative to the\ntop-left corner of the canvas. Its value is\n<a href=\"#/p5/mouseY\">mouseY</a> from the previous frame. For example, if\nthe mouse was 50 pixels from the top edge of the canvas during the last\nframe, then <code>pmouseY</code> will be 50.</p>\n<p>In WebGL mode, <code>pmouseY</code> keeps track of the mouse's position relative to the\ncenter of the canvas. For example, if the mouse was 50 pixels below the\ncanvas' center during the last frame, then <code>pmouseY</code> will be 50.</p>\n<p>If touch is used instead of the mouse, then <code>pmouseY</code> will hold the\ny-coordinate of the last touch point.</p>\n<p>Note: <code>pmouseY</code> is reset to the current <a href=\"#/p5/mouseY\">mouseY</a>\nvalue at the start of each touch event.</p>\n",
- "itemtype": "property",
- "name": "pmouseY",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n line(pmouseX, pmouseY, mouseX, mouseY);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A line follows the mouse as it moves. The line grows longer with faster movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust coordinates for WebGL mode.\n // The origin (0, 0) is at the center of the canvas.\n let pmx = pmouseX - 50;\n let pmy = pmouseY - 50;\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Draw the line.\n line(pmx, pmy, mx, my);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Events",
- "submodule": "Mouse"
- },
- {
- "file": "src/events/mouse.js",
- "line": 469,
- "description": "<p>A <code>Number</code> variable that tracks the mouse's horizontal position within the\nbrowser.</p>\n<p><code>winMouseX</code> keeps track of the mouse's position relative to the top-left\ncorner of the browser window. For example, if the mouse is 50 pixels from\nthe left edge of the browser, then <code>winMouseX</code> will be 50.</p>\n<p>On a touchscreen device, <code>winMouseX</code> will hold the x-coordinate of the most\nrecent touch point.</p>\n<p>Note: Use <a href=\"#/p5/mouseX\">mouseX</a> to track the mouse’s\nx-coordinate within the canvas.</p>\n",
- "itemtype": "property",
- "name": "winMouseX",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates within the browser window.\n text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "filterType",
+ "description": "either THRESHOLD, GRAY, OPAQUE, INVERT,\nPOSTERIZE, BLUR, ERODE, DILATE or BLUR.",
+ "type": "THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|BLUR|ERODE|DILATE|BLUR"
+ },
+ {
+ "name": "filterParam",
+ "description": "parameter unique to each filter.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "useWebGL",
+ "description": "flag to control whether to use fast\nWebGL filters (GPU) or original image\nfilters (CPU); defaults to <code>true</code>.",
+ "optional": 1,
+ "type": "Boolean"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "filterType",
+ "type": "THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|BLUR|ERODE|DILATE|BLUR"
+ },
+ {
+ "name": "filterParam",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "useWebGL",
+ "optional": 1,
+ "type": "Boolean"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "shaderFilter",
+ "description": "shader that's been loaded, with the\nfrag shader using a <code>tex0</code> uniform.",
+ "type": "p5.Shader"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "Events",
- "submodule": "Mouse"
+ "static": false,
+ "module": "Image",
+ "submodule": "Pixels"
},
{
- "file": "src/events/mouse.js",
- "line": 510,
- "description": "<p>A <code>Number</code> variable that tracks the mouse's vertical position within the\nbrowser.</p>\n<p><code>winMouseY</code> keeps track of the mouse's position relative to the top-left\ncorner of the browser window. For example, if the mouse is 50 pixels from\nthe top edge of the browser, then <code>winMouseY</code> will be 50.</p>\n<p>On a touchscreen device, <code>winMouseY</code> will hold the y-coordinate of the most\nrecent touch point.</p>\n<p>Note: Use <a href=\"#/p5/mouseY\">mouseY</a> to track the mouse’s\ny-coordinate within the canvas.</p>\n",
- "itemtype": "property",
- "name": "winMouseY",
- "type": "Number",
- "readonly": "",
+ "name": "get",
+ "file": "src/scripts/parsers/in/p5.js/src/image/pixels.js",
+ "line": 884,
+ "itemtype": "method",
+ "description": "<p>Gets a pixel or a region of pixels from the canvas.</p>\n<p><code>get()</code> is easy to use but it's not as fast as\n<a href=\"#/p5/pixels\">pixels</a>. Use <a href=\"#/p5/pixels\">pixels</a>\nto read many pixel values.</p>\n<p>The version of <code>get()</code> with no parameters returns the entire canvas.</p>\n<p>The version of <code>get()</code> with two parameters interprets them as\ncoordinates. It returns an array with the <code>[R, G, B, A]</code> values of the\npixel at the given point.</p>\n<p>The version of <code>get()</code> with four parameters interprets them as coordinates\nand dimensions. It returns a subsection of the canvas as a\n<a href=\"#/p5.Image\">p5.Image</a> object. The first two parameters are the\ncoordinates for the upper-left corner of the subsection. The last two\nparameters are the width and height of the subsection.</p>\n<p>Use <a href=\"#/p5.Image/get\">p5.Image.get()</a> to work directly with\n<a href=\"#/p5.Image\">p5.Image</a> objects.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\"A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse's coordinates within the browser window.\n text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get the entire canvas.\n let c = get();\n\n // Display half the canvas.\n image(c, 50, 0);\n\n describe('Two identical mountain landscapes shown side-by-side.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get the color of a pixel.\n let c = get(50, 90);\n\n // Style the square with the pixel's color.\n fill(c);\n noStroke();\n\n // Display the square.\n square(25, 25, 50);\n\n describe('A mountain landscape with an olive green square in its center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get a region of the image.\n let c = get(0, 0, 50, 50);\n\n // Display the region.\n image(c, 50, 50);\n\n describe('A mountain landscape drawn on top of another mountain landscape.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Mouse"
- },
- {
- "file": "src/events/mouse.js",
- "line": 551,
- "description": "<p>A <code>Number</code> variable that tracks the mouse's previous horizontal position\nwithin the browser.</p>\n<p><code>pwinMouseX</code> keeps track of the mouse's position relative to the top-left\ncorner of the browser window. Its value is\n<a href=\"#/p5/winMouseX\">winMouseX</a> from the previous frame. For\nexample, if the mouse was 50 pixels from\nthe left edge of the browser during the last frame, then <code>pwinMouseX</code> will\nbe 50.</p>\n<p>On a touchscreen device, <code>pwinMouseX</code> will hold the x-coordinate of the most\nrecent touch point. <code>pwinMouseX</code> is reset to the current\n<a href=\"#/p5/winMouseX\">winMouseX</a> value at the start of each touch\nevent.</p>\n<p>Note: Use <a href=\"#/p5/pmouseX\">pmouseX</a> to track the mouse’s previous\nx-coordinate within the canvas.</p>\n",
- "itemtype": "property",
- "name": "pwinMouseX",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A gray square. A white circle at its center grows larger when the mouse moves horizontally.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's diameter.\n let d = winMouseX - pwinMouseX;\n\n // Draw the circle.\n circle(50, 50, d);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Create the canvas and set its position.\n let cnv = createCanvas(100, 100);\n cnv.position(20, 20);\n\n describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display pwinMouseX.\n text(pwinMouseX, 50, 50);\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "w",
+ "description": "width of the subsection to be returned.",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "description": "height of the subsection to be returned.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "p5.Image"
+ }
+ },
+ {
+ "params": [],
+ "return": {
+ "description": "whole canvas as a <a href=\"#/p5.Image\">p5.Image</a>.",
+ "type": "p5.Image"
+ }
+ },
+ {
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "color of the pixel at (x, y) in array format <code>[R, G, B, A]</code>.",
+ "type": "Number[]"
+ }
+ }
],
+ "return": {
+ "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "p5.Image"
+ },
"class": "p5",
- "module": "Events",
- "submodule": "Mouse"
+ "static": false,
+ "module": "Image",
+ "submodule": "Pixels"
},
{
- "file": "src/events/mouse.js",
- "line": 622,
- "description": "<p>A <code>Number</code> variable that tracks the mouse's previous vertical position\nwithin the browser.</p>\n<p><code>pwinMouseY</code> keeps track of the mouse's position relative to the top-left\ncorner of the browser window. Its value is\n<a href=\"#/p5/winMouseY\">winMouseY</a> from the previous frame. For\nexample, if the mouse was 50 pixels from\nthe top edge of the browser during the last frame, then <code>pwinMouseY</code> will\nbe 50.</p>\n<p>On a touchscreen device, <code>pwinMouseY</code> will hold the y-coordinate of the most\nrecent touch point. <code>pwinMouseY</code> is reset to the current\n<a href=\"#/p5/winMouseY\">winMouseY</a> value at the start of each touch\nevent.</p>\n<p>Note: Use <a href=\"#/p5/pmouseY\">pmouseY</a> to track the mouse’s previous\ny-coordinate within the canvas.</p>\n",
- "itemtype": "property",
- "name": "pwinMouseY",
- "type": "Number",
- "readonly": "",
+ "name": "loadPixels",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 1321,
+ "itemtype": "method",
+ "description": "<p>Loads the current value of each pixel on the canvas into the\n<a href=\"#/p5/pixels\">pixels</a> array.</p>\n<p><code>loadPixels()</code> must be called before reading from or writing to\n<a href=\"#/p5/pixels\">pixels</a>.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(10);\n\n describe('A gray square. A white circle at its center grows larger when the mouse moves vertically.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's diameter.\n let d = winMouseY - pwinMouseY;\n\n // Draw the circle.\n circle(50, 50, d);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Create the canvas and set its position.\n let cnv = createCanvas(100, 100);\n cnv.position(20, 20);\n\n describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display pwinMouseY.\n text(pwinMouseY, 50, 50);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0, 100, 100);\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Load the pixels array.\n loadPixels();\n\n // Copy the top half of the canvas to the bottom.\n for (let i = 0; i < halfImage; i += 1) {\n pixels[i + halfImage] = pixels[i];\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('Two identical images of mountain landscapes, one on top of the other.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Load the pixels array.\n myBuffer.loadPixels();\n\n // Get the number of pixels in the\n // top half of the framebuffer.\n let numPixels = myBuffer.pixels.length / 2;\n\n // Set the framebuffer's top half to pink.\n for (let i = 0; i < numPixels; i += 4) {\n myBuffer.pixels[i] = 255;\n myBuffer.pixels[i + 1] = 102;\n myBuffer.pixels[i + 2] = 204;\n myBuffer.pixels[i + 3] = 255;\n }\n\n // Update the pixels array.\n myBuffer.updatePixels();\n\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, -50, -50);\n\n describe('A pink rectangle above a gray rectangle.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Mouse"
- },
- {
- "file": "src/events/mouse.js",
- "line": 693,
- "description": "<p>A String system variable that contains the value of the last mouse button\npressed.</p>\n<p>The <code>mouseButton</code> variable is either <code>LEFT</code>, <code>RIGHT</code>, or <code>CENTER</code>,\ndepending on which button was pressed last.</p>\n<p>Note: Different browsers may track <code>mouseButton</code> differently. See\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\" target=\"_blank\">MDN</a>\nfor more information.</p>\n",
- "itemtype": "property",
- "name": "mouseButton",
- "type": "Constant",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with black text at its center. The text changes from 0 to either \"left\" or \"right\" when the user clicks a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouse button.\n text(mouseButton, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n \"A gray square. Different shapes appear at its center depending on the mouse button that's clicked.\"\n );\n}\n\nfunction draw() {\n background(200);\n\n if (mouseIsPressed === true) {\n if (mouseButton === LEFT) {\n circle(50, 50, 50);\n }\n if (mouseButton === RIGHT) {\n square(25, 25, 50);\n }\n if (mouseButton === CENTER) {\n triangle(23, 75, 50, 20, 78, 75);\n }\n }\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": []
+ },
+ {
+ "params": []
+ }
],
"class": "p5",
- "module": "Events",
- "submodule": "Mouse"
+ "static": false,
+ "module": "Rendering"
},
{
- "file": "src/events/mouse.js",
- "line": 761,
- "description": "<p>A <code>Boolean</code> system variable that's <code>true</code> if the mouse is pressed and\n<code>false</code> if not.</p>\n",
- "itemtype": "property",
- "name": "mouseIsPressed",
- "type": "Boolean",
- "readonly": "",
+ "name": "set",
+ "file": "src/scripts/parsers/in/p5.js/src/image/pixels.js",
+ "line": 1053,
+ "itemtype": "method",
+ "description": "<p>Sets the color of a pixel or draws an image to the canvas.</p>\n<p><code>set()</code> is easy to use but it's not as fast as\n<a href=\"#/p5/pixels\">pixels</a>. Use <a href=\"#/p5/pixels\">pixels</a>\nto set many pixel values.</p>\n<p><code>set()</code> interprets the first two parameters as x- and y-coordinates. It\ninterprets the last parameter as a grayscale value, a <code>[R, G, B, A]</code> pixel\narray, a <a href=\"#/p5.Color\">p5.Color</a> object, or a\n<a href=\"#/p5.Image\">p5.Image</a> object. If an image is passed, the first\ntwo parameters set the coordinates for the image's upper-left corner,\nregardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p><a href=\"#/p5/updatePixels\">updatePixels()</a> must be called after using\n<code>set()</code> for changes to appear.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the word \"false\" at its center. The word changes to \"true\" when the user presses a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the mouseIsPressed variable.\n text(mouseIsPressed, 25, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a white square at its center. The inner square turns black when the user presses the mouse.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n if (mouseIsPressed === true) {\n fill(0);\n } else {\n fill(255);\n }\n\n // Draw the square.\n square(25, 25, 50);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set four pixels to black.\n set(30, 20, 0);\n set(85, 20, 0);\n set(85, 75, 0);\n set(30, 75, 0);\n\n // Update the canvas.\n updatePixels();\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let black = color(0);\n\n // Set four pixels to black.\n set(30, 20, black);\n set(85, 20, black);\n set(85, 75, black);\n set(30, 75, black);\n\n // Update the canvas.\n updatePixels();\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Draw a horizontal color gradient.\n for (let x = 0; x < 100; x += 1) {\n for (let y = 0; y < 100; y += 1) {\n // Calculate the grayscale value.\n let c = map(x, 0, 100, 0, 255);\n\n // Set the pixel using the grayscale value.\n set(x, y, c);\n }\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A horiztonal color gradient from black to white.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Use the image to set all pixels.\n set(0, 0, img);\n\n // Update the canvas.\n updatePixels();\n\n describe('An image of a mountain landscape.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Mouse"
- },
- {
- "file": "src/events/mouse.js",
- "line": 882,
- "description": "<p>A function that's called when the mouse moves.</p>\n<p>Declaring the function <code>mouseMoved()</code> sets a code block to run\nautomatically when the user moves the mouse without clicking any mouse\nbuttons:</p>\n<pre><code class=\"language-js\">function mouseMoved() {\n // Code to run.\n}\n</code></pre>\n<p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>mouseMoved()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function mouseMoved() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n</code></pre>\n<p>The parameter, <code>event</code>, is optional. <code>mouseMoved()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the mouse move event:</p>\n<pre><code class=\"language-js\">function mouseMoved(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n",
- "itemtype": "method",
- "name": "mouseMoved",
- "params": [
+ "overloads": [
{
- "name": "event",
- "description": "<p>optional <code>MouseEvent</code> argument.</p>\n",
- "type": "MouseEvent",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "c",
+ "description": "grayscale value | pixel array |\n<a href=\"#/p5.Color\">p5.Color</a> object | <a href=\"#/p5.Image\">p5.Image</a> to copy.",
+ "type": "Number|Number[]|Object"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter as the mouse moves.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mouseMoved() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Events",
- "submodule": "Mouse"
+ "static": false,
+ "module": "Image",
+ "submodule": "Pixels"
},
{
- "file": "src/events/mouse.js",
- "line": 968,
- "description": "<p>A function that's called when the mouse moves while a button is pressed.</p>\n<p>Declaring the function <code>mouseDragged()</code> sets a code block to run\nautomatically when the user clicks and drags the mouse:</p>\n<pre><code class=\"language-js\">function mouseDragged() {\n // Code to run.\n}\n</code></pre>\n<p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>mouseDragged()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function mouseDragged() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n</code></pre>\n<p>The parameter, <code>event</code>, is optional. <code>mouseDragged()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the mouse drag event:</p>\n<pre><code class=\"language-js\">function mouseDragged(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>On touchscreen devices, <code>mouseDragged()</code> will run when a user moves a touch\npoint if <a href=\"#/p5/touchMoved\">touchMoved()</a> isn’t declared. If\n<a href=\"#/p5/touchMoved\">touchMoved()</a> is declared, then\n<a href=\"#/p5/touchMoved\">touchMoved()</a> will run when a user moves a\ntouch point and <code>mouseDragged()</code> won’t.</p>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n",
+ "name": "updatePixels",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 1515,
"itemtype": "method",
- "name": "mouseDragged",
- "params": [
- {
- "name": "event",
- "description": "<p>optional <code>MouseEvent</code> argument.</p>\n",
- "type": "MouseEvent",
- "optional": true
- }
- ],
+ "description": "<p>Updates the canvas with the RGBA values in the\n<a href=\"#/p5/pixels\">pixels</a> array.</p>\n<p><code>updatePixels()</code> only needs to be called after changing values in the\n<a href=\"#/p5/pixels\">pixels</a> array. Such changes can be made directly\nafter calling <a href=\"#/p5/loadPixels\">loadPixels()</a> or by calling\n<a href=\"#/p5/set\">set()</a>.</p>\n",
"example": [
- "\n<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter as the user drags the mouse.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mouseDragged() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0, 100, 100);\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Load the pixels array.\n loadPixels();\n\n // Copy the top half of the canvas to the bottom.\n for (let i = 0; i < halfImage; i += 1) {\n pixels[i + halfImage] = pixels[i];\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('Two identical images of mountain landscapes, one on top of the other.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Load the pixels array.\n myBuffer.loadPixels();\n\n // Get the number of pixels in the\n // top half of the framebuffer.\n let numPixels = myBuffer.pixels.length / 2;\n\n // Set the framebuffer's top half to pink.\n for (let i = 0; i < numPixels; i += 4) {\n myBuffer.pixels[i] = 255;\n myBuffer.pixels[i + 1] = 102;\n myBuffer.pixels[i + 2] = 204;\n myBuffer.pixels[i + 3] = 255;\n }\n\n // Update the pixels array.\n myBuffer.updatePixels();\n\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, -50, -50);\n\n describe('A pink rectangle above a gray rectangle.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Mouse"
- },
- {
- "file": "src/events/mouse.js",
- "line": 1084,
- "description": "<p>A function that's called once when a mouse button is pressed.</p>\n<p>Declaring the function <code>mousePressed()</code> sets a code block to run\nautomatically when the user presses a mouse button:</p>\n<pre><code class=\"language-js\">function mousePressed() {\n // Code to run.\n}\n</code></pre>\n<p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>mousePressed()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function mousePressed() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n</code></pre>\n<p>The parameter, <code>event</code>, is optional. <code>mousePressed()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the mouse press event:</p>\n<pre><code class=\"language-js\">function mousePressed(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>On touchscreen devices, <code>mousePressed()</code> will run when a user’s touch\nbegins if <a href=\"#/p5/touchStarted\">touchStarted()</a> isn’t declared. If\n<a href=\"#/p5/touchStarted\">touchStarted()</a> is declared, then\n<a href=\"#/p5/touchStarted\">touchStarted()</a> will run when a user’s touch\nbegins and <code>mousePressed()</code> won’t.</p>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n<p>Note: <code>mousePressed()</code>, <a href=\"#/p5/mouseReleased\">mouseReleased()</a>,\nand <a href=\"#/p5/mouseClicked\">mouseClicked()</a> are all related.\n<code>mousePressed()</code> runs as soon as the user clicks the mouse.\n<a href=\"#/p5/mouseReleased\">mouseReleased()</a> runs as soon as the user\nreleases the mouse click. <a href=\"#/p5/mouseClicked\">mouseClicked()</a>\nruns immediately after <a href=\"#/p5/mouseReleased\">mouseReleased()</a>.</p>\n",
- "itemtype": "method",
- "name": "mousePressed",
- "params": [
+ "overloads": [
{
- "name": "event",
- "description": "<p>optional <code>MouseEvent</code> argument.</p>\n",
- "type": "MouseEvent",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the upper-left corner of region\nto update.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the upper-left corner of region\nto update.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "w",
+ "description": "width of region to update.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "description": "height of region to update.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": []
}
],
- "example": [
- "\n<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter when the user presses a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mousePressed() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the circle.\n fill('orange');\n stroke('royalblue');\n strokeWeight(10);\n\n describe(\n 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'\n );\n}\n\nfunction draw() {\n background(220);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n// Set the stroke color and weight as soon as the user clicks.\nfunction mousePressed() {\n stroke('deeppink');\n strokeWeight(3);\n}\n\n// Set the stroke and fill colors as soon as the user releases\n// the mouse.\nfunction mouseReleased() {\n stroke('royalblue');\n\n // This is never visible because fill() is called\n // in mouseClicked() which runs immediately after\n // mouseReleased();\n fill('limegreen');\n}\n\n// Set the fill color and stroke weight after\n// mousePressed() and mouseReleased() are called.\nfunction mouseClicked() {\n fill('orange');\n strokeWeight(10);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Events",
- "submodule": "Mouse"
+ "static": false,
+ "module": "Rendering"
},
{
- "file": "src/events/mouse.js",
- "line": 1256,
- "description": "<p>A function that's called once when a mouse button is released.</p>\n<p>Declaring the function <code>mouseReleased()</code> sets a code block to run\nautomatically when the user releases a mouse button after having pressed\nit:</p>\n<pre><code class=\"language-js\">function mouseReleased() {\n // Code to run.\n}\n</code></pre>\n<p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>mouseReleased()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function mouseReleased() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n</code></pre>\n<p>The parameter, <code>event</code>, is optional. <code>mouseReleased()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the mouse release event:</p>\n<pre><code class=\"language-js\">function mouseReleased(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>On touchscreen devices, <code>mouseReleased()</code> will run when a user’s touch\nends if <a href=\"#/p5/touchEnded\">touchEnded()</a> isn’t declared. If\n<a href=\"#/p5/touchEnded\">touchEnded()</a> is declared, then\n<a href=\"#/p5/touchEnded\">touchEnded()</a> will run when a user’s touch\nends and <code>mouseReleased()</code> won’t.</p>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n<p>Note: <a href=\"#/p5/mousePressed\">mousePressed()</a>, <code>mouseReleased()</code>,\nand <a href=\"#/p5/mouseClicked\">mouseClicked()</a> are all related.\n<a href=\"#/p5/mousePressed\">mousePressed()</a> runs as soon as the user\nclicks the mouse. <code>mouseReleased()</code> runs as soon as the user releases the\nmouse click. <a href=\"#/p5/mouseClicked\">mouseClicked()</a> runs\nimmediately after <code>mouseReleased()</code>.</p>\n",
+ "name": "loadJSON",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 293,
"itemtype": "method",
- "name": "mouseReleased",
- "params": [
+ "description": "<p>Loads a JSON file to create an <code>Object</code>.</p>\n<p>JavaScript Object Notation\n(<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/JSON\" target=\"_blank\">JSON</a>)\nis a standard format for sending data between applications. The format is\nbased on JavaScript objects which have keys and values. JSON files store\ndata in an object with strings as keys. Values can be strings, numbers,\nBooleans, arrays, <code>null</code>, or other objects.</p>\n<p>The first parameter, <code>path</code>, is a string with the path to the file.\nPaths to local files should be relative, as in\n<code>loadJSON('assets/data.json')</code>. URLs such as\n<code>'https://example.com/data.json'</code> may be blocked due to browser security.\nThe <code>path</code> parameter can also be defined as a <code>Request</code>\nobject for more advanced usage.</p>\n<p>The second parameter, <code>successCallback</code>, is optional. If a function is\npassed, as in <code>loadJSON('assets/data.json', handleData)</code>, then the\n<code>handleData()</code> function will be called once the data loads. The object\ncreated from the JSON data will be passed to <code>handleData()</code> as its only argument.\nThe return value of the <code>handleData()</code> function will be used as the final return\nvalue of <code>loadJSON('assets/data.json', handleData)</code>.</p>\n<p>The third parameter, <code>failureCallback</code>, is also optional. If a function is\npassed, as in <code>loadJSON('assets/data.json', handleData, handleFailure)</code>,\nthen the <code>handleFailure()</code> function will be called if an error occurs while\nloading. The <code>Error</code> object will be passed to <code>handleFailure()</code> as its only\nargument. The return value of the <code>handleFailure()</code> function will be used as the\nfinal return value of <code>loadJSON('assets/data.json', handleData, handleFailure)</code>.</p>\n<p>This function returns a <code>Promise</code> and should be used in an <code>async</code> setup with\n<code>await</code>. See the examples for the usage syntax.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myData;\n\nasync function setup() {\n myData = await loadJSON('assets/data.json');\n createCanvas(100, 100);\n\n background(200);\n\n // Style the circle.\n fill(myData.color);\n noStroke();\n\n // Draw the circle.\n circle(myData.x, myData.y, myData.d);\n\n describe('A pink circle on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myData;\n\nasync function setup() {\n myData = await loadJSON('assets/data.json');\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object and make it transparent.\n let c = color(myData.color);\n c.setAlpha(80);\n\n // Style the circles.\n fill(c);\n noStroke();\n\n // Iterate over the myData.bubbles array.\n for (let b of myData.bubbles) {\n // Draw a circle for each bubble.\n circle(b.x, b.y, b.d);\n }\n\n describe('Several pink bubbles floating in a blue sky.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myData;\n\nasync function setup() {\n myData = await loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');\n createCanvas(100, 100);\n\n background(200);\n\n // Get data about the most recent earthquake.\n let quake = myData.features[0].properties;\n\n // Draw a circle based on the earthquake's magnitude.\n circle(50, 50, quake.mag * 10);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(11);\n\n // Display the earthquake's location.\n text(quake.place, 5, 80, 100);\n\n describe(`A white circle on a gray background. The text \"${quake.place}\" is written beneath the circle.`);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet bigQuake;\n\n// Load the GeoJSON and preprocess it.\nasync function setup() {\n await loadJSON(\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',\n handleData\n );\n\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a circle based on the earthquake's magnitude.\n circle(50, 50, bigQuake.mag * 10);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(11);\n\n // Display the earthquake's location.\n text(bigQuake.place, 5, 80, 100);\n\n describe(`A white circle on a gray background. The text \"${bigQuake.place}\" is written beneath the circle.`);\n}\n\n// Find the biggest recent earthquake.\nfunction handleData(data) {\n let maxMag = 0;\n // Iterate over the earthquakes array.\n for (let quake of data.features) {\n // Reassign bigQuake if a larger\n // magnitude quake is found.\n if (quake.properties.mag > maxMag) {\n bigQuake = quake.properties;\n }\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nlet bigQuake;\n\n// Load the GeoJSON and preprocess it.\nasync function setup() {\n await loadJSON(\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',\n handleData,\n handleError\n );\n\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a circle based on the earthquake's magnitude.\n circle(50, 50, bigQuake.mag * 10);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(11);\n\n // Display the earthquake's location.\n text(bigQuake.place, 5, 80, 100);\n\n describe(`A white circle on a gray background. The text \"${bigQuake.place}\" is written beneath the circle.`);\n}\n\n// Find the biggest recent earthquake.\nfunction handleData(data) {\n let maxMag = 0;\n // Iterate over the earthquakes array.\n for (let quake of data.features) {\n // Reassign bigQuake if a larger\n // magnitude quake is found.\n if (quake.properties.mag > maxMag) {\n bigQuake = quake.properties;\n }\n }\n}\n\n// Log any errors to the console.\nfunction handleError(error) {\n console.log('Oops!', error);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "event",
- "description": "<p>optional <code>MouseEvent</code> argument.</p>\n",
- "type": "MouseEvent",
- "optional": true
+ "params": [
+ {
+ "name": "path",
+ "description": "path of the JSON file to be loaded.",
+ "type": "String|Request"
+ },
+ {
+ "name": "successCallback",
+ "description": "function to call once the data is loaded. Will be passed the object.",
+ "optional": 1,
+ "type": "Function"
+ },
+ {
+ "name": "errorCallback",
+ "description": "function to call if the data fails to load. Will be passed an <code>Error</code> event object.",
+ "optional": 1,
+ "type": "Function"
+ }
+ ],
+ "return": {
+ "description": "object containing the loaded data.",
+ "type": "Promise<Object>"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter when the user presses and releases a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction mouseReleased() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the circle.\n fill('orange');\n stroke('royalblue');\n strokeWeight(10);\n\n describe(\n 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'\n );\n}\n\nfunction draw() {\n background(220);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n// Set the stroke color and weight as soon as the user clicks.\nfunction mousePressed() {\n stroke('deeppink');\n strokeWeight(3);\n}\n\n// Set the stroke and fill colors as soon as the user releases\n// the mouse.\nfunction mouseReleased() {\n stroke('royalblue');\n\n // This is never visible because fill() is called\n // in mouseClicked() which runs immediately after\n // mouseReleased();\n fill('limegreen');\n}\n\n// Set the fill color and stroke weight after\n// mousePressed() and mouseReleased() are called.\nfunction mouseClicked() {\n fill('orange');\n strokeWeight(10);\n}\n</code>\n</div>"
- ],
+ "return": {
+ "description": "object containing the loaded data.",
+ "type": "Promise<Object>"
+ },
"class": "p5",
- "module": "Events",
- "submodule": "Mouse"
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/events/mouse.js",
- "line": 1429,
- "description": "<p>A function that's called once after a mouse button is pressed and released.</p>\n<p>Declaring the function <code>mouseClicked()</code> sets a code block to run\nautomatically when the user releases a mouse button after having pressed\nit:</p>\n<pre><code class=\"language-js\">function mouseClicked() {\n // Code to run.\n}\n</code></pre>\n<p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>mouseClicked()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function mouseClicked() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n</code></pre>\n<p>The parameter, <code>event</code>, is optional. <code>mouseClicked()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the mouse click event:</p>\n<pre><code class=\"language-js\">function mouseClicked(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>On touchscreen devices, <code>mouseClicked()</code> will run when a user’s touch\nends if <a href=\"#/p5/touchEnded\">touchEnded()</a> isn’t declared. If\n<a href=\"#/p5/touchEnded\">touchEnded()</a> is declared, then\n<a href=\"#/p5/touchEnded\">touchEnded()</a> will run when a user’s touch\nends and <code>mouseClicked()</code> won’t.</p>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n<p>Note: <a href=\"#/p5/mousePressed\">mousePressed()</a>,\n<a href=\"#/p5/mouseReleased\">mouseReleased()</a>,\nand <code>mouseClicked()</code> are all related.\n<a href=\"#/p5/mousePressed\">mousePressed()</a> runs as soon as the user\nclicks the mouse. <a href=\"#/p5/mouseReleased\">mouseReleased()</a> runs as\nsoon as the user releases the mouse click. <code>mouseClicked()</code> runs\nimmediately after <a href=\"#/p5/mouseReleased\">mouseReleased()</a>.</p>\n",
+ "name": "loadStrings",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 440,
"itemtype": "method",
- "name": "mouseClicked",
- "params": [
- {
- "name": "event",
- "description": "<p>optional <code>MouseEvent</code> argument.</p>\n",
- "type": "MouseEvent",
- "optional": true
- }
- ],
+ "description": "<p>Loads a text file to create an <code>Array</code>.</p>\n<p>The first parameter, <code>path</code>, is always a string with the path to the file.\nPaths to local files should be relative, as in\n<code>loadStrings('assets/data.txt')</code>. URLs such as\n<code>'https://example.com/data.txt'</code> may be blocked due to browser security.\nThe <code>path</code> parameter can also be defined as a <code>Request</code>\nobject for more advanced usage.</p>\n<p>The second parameter, <code>successCallback</code>, is optional. If a function is\npassed, as in <code>loadStrings('assets/data.txt', handleData)</code>, then the\n<code>handleData()</code> function will be called once the data loads. The array\ncreated from the text data will be passed to <code>handleData()</code> as its only\nargument. The return value of the <code>handleData()</code> function will be used as\nthe final return value of <code>loadStrings('assets/data.txt', handleData)</code>.</p>\n<p>The third parameter, <code>failureCallback</code>, is also optional. If a function is\npassed, as in <code>loadStrings('assets/data.txt', handleData, handleFailure)</code>,\nthen the <code>handleFailure()</code> function will be called if an error occurs while\nloading. The <code>Error</code> object will be passed to <code>handleFailure()</code> as its only\nargument. The return value of the <code>handleFailure()</code> function will be used as\nthe final return value of <code>loadStrings('assets/data.txt', handleData, handleFailure)</code>.</p>\n<p>This function returns a <code>Promise</code> and should be used in an <code>async</code> setup with\n<code>await</code>. See the examples for the usage syntax.</p>\n",
"example": [
- "\n<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user presses and releases a mouse button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the square's color when the user clicks.\nfunction mouseClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Style the circle.\n fill('orange');\n stroke('royalblue');\n strokeWeight(10);\n\n describe(\n 'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'\n );\n}\n\nfunction draw() {\n background(220);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n\n// Set the stroke color and weight as soon as the user clicks.\nfunction mousePressed() {\n stroke('deeppink');\n strokeWeight(3);\n}\n\n// Set the stroke and fill colors as soon as the user releases\n// the mouse.\nfunction mouseReleased() {\n stroke('royalblue');\n\n // This is never visible because fill() is called\n // in mouseClicked() which runs immediately after\n // mouseReleased();\n fill('limegreen');\n}\n\n// Set the fill color and stroke weight after\n// mousePressed() and mouseReleased() are called.\nfunction mouseClicked() {\n fill('orange');\n strokeWeight(10);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet myData;\n\nasync function setup() {\n myData = await loadStrings('assets/test.txt');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Select a random line from the text.\n let phrase = random(myData);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display the text.\n text(phrase, 10, 50, 90);\n\n describe(`The text \"${phrase}\" written in black on a gray background.`);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet lastLine;\n\n// Load the text and preprocess it.\nasync function setup() {\n await loadStrings('assets/test.txt', handleData);\n\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display the text.\n text(lastLine, 10, 50, 90);\n\n describe('The text \"I talk like an orange\" written in black on a gray background.');\n}\n\n// Select the last line from the text.\nfunction handleData(data) {\n lastLine = data[data.length - 1];\n}\n</code>\n</div>\n\n<div>\n<code>\nlet lastLine;\n\n// Load the text and preprocess it.\nasync function setup() {\n await loadStrings('assets/test.txt', handleData, handleError);\n\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display the text.\n text(lastLine, 10, 50, 90);\n\n describe('The text \"I talk like an orange\" written in black on a gray background.');\n}\n\n// Select the last line from the text.\nfunction handleData(data) {\n lastLine = data[data.length - 1];\n}\n\n// Log any errors to the console.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Mouse"
- },
- {
- "file": "src/events/mouse.js",
- "line": 1585,
- "description": "<p>A function that's called once when a mouse button is clicked twice quickly.</p>\n<p>Declaring the function <code>doubleClicked()</code> sets a code block to run\nautomatically when the user presses and releases the mouse button twice\nquickly:</p>\n<pre><code class=\"language-js\">function doubleClicked() {\n // Code to run.\n}\n</code></pre>\n<p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>doubleClicked()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function doubleClicked() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n</code></pre>\n<p>The parameter, <code>event</code>, is optional. <code>doubleClicked()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the double-click event:</p>\n<pre><code class=\"language-js\">function doubleClicked(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>On touchscreen devices, code placed in <code>doubleClicked()</code> will run after two\ntouches that occur within a short time.</p>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n",
- "itemtype": "method",
- "name": "doubleClicked",
- "params": [
+ "overloads": [
{
- "name": "event",
- "description": "<p>optional <code>MouseEvent</code> argument.</p>\n",
- "type": "MouseEvent",
- "optional": true
+ "params": [
+ {
+ "name": "path",
+ "description": "path of the text file to be loaded.",
+ "type": "String|Request"
+ },
+ {
+ "name": "successCallback",
+ "description": "function to call once the data is\nloaded. Will be passed the array.",
+ "optional": 1,
+ "type": "Function"
+ },
+ {
+ "name": "errorCallback",
+ "description": "function to call if the data fails to\nload. Will be passed an <code>Error</code> event\nobject.",
+ "optional": 1,
+ "type": "Function"
+ }
+ ],
+ "return": {
+ "description": "new array containing the loaded text.",
+ "type": "Promise<String[]>"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square changes color when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle the square's color when the user double-clicks.\nfunction doubleClicked() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black circle at its center. When the user double-clicks on the circle, it changes color to white.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n fill(value);\n\n // Draw the circle.\n circle(50, 50, 80);\n}\n\n// Reassign value to 255 when the user double-clicks on the circle.\nfunction doubleClicked() {\n if (dist(50, 50, mouseX, mouseY) < 40) {\n value = 255;\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
- ],
+ "return": {
+ "description": "new array containing the loaded text.",
+ "type": "Promise<String[]>"
+ },
"class": "p5",
- "module": "Events",
- "submodule": "Mouse"
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/events/mouse.js",
- "line": 1732,
- "description": "<p>A function that's called once when the mouse wheel moves.</p>\n<p>Declaring the function <code>mouseWheel()</code> sets a code block to run\nautomatically when the user scrolls with the mouse wheel:</p>\n<pre><code class=\"language-js\">function mouseWheel() {\n // Code to run.\n}\n</code></pre>\n<p>The mouse system variables, such as <a href=\"#/p5/mouseX\">mouseX</a> and\n<a href=\"#/p5/mouseY\">mouseY</a>, will be updated with their most recent\nvalue when <code>mouseWheel()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function mouseWheel() {\n if (mouseX < 50) {\n // Code to run if the mouse is on the left.\n }\n\n if (mouseY > 50) {\n // Code to run if the mouse is near the bottom.\n }\n}\n</code></pre>\n<p>The parameter, <code>event</code>, is optional. <code>mouseWheel()</code> is always passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\" target=\"_blank\">MouseEvent</a>\nobject with properties that describe the mouse scroll event:</p>\n<pre><code class=\"language-js\">function mouseWheel(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>The <code>event</code> object has many properties including <code>delta</code>, a <code>Number</code>\ncontaining the distance that the user scrolled. For example, <code>event.delta</code>\nmight have the value 5 when the user scrolls up. <code>event.delta</code> is positive\nif the user scrolls up and negative if they scroll down. The signs are\nopposite on macOS with \"natural\" scrolling enabled.</p>\n<p>Browsers may have default behaviors attached to various mouse events. For\nexample, some browsers highlight text when the user moves the mouse while\npressing a mouse button. To prevent any default behavior for this event,\nadd <code>return false;</code> to the end of the function.</p>\n<p>Note: On Safari, <code>mouseWheel()</code> may only work as expected if\n<code>return false;</code> is added at the end of the function.</p>\n",
+ "name": "loadTable",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 514,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "mouseWheel",
- "params": [
- {
- "name": "event",
- "description": "<p>optional <code>WheelEvent</code> argument.</p>\n",
- "type": "WheelEvent",
- "optional": true
- }
- ],
+ "description": "<p>Reads the contents of a file or URL and creates a <a href=\"#/p5.Table\">p5.Table</a> object with\nits values. If a file is specified, it must be located in the sketch's\n\"data\" folder. The filename parameter can also be a URL to a file found\nonline. By default, the file is assumed to be comma-separated (in CSV\nformat). Table only looks for a header row if the 'header' option is\nincluded.</p>\n<p>This function returns a <code>Promise</code> and should be used in an <code>async</code> setup with\n<code>await</code>. See the examples for the usage syntax.</p>\n<p>All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.</p>\n",
"example": [
- "\n<div>\n<code>\nlet circleSize = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. A white circle at its center grows up when the user scrolls the mouse wheel.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle\n circle(50, 50, circleSize);\n}\n\n// Increment circleSize when the user scrolls the mouse wheel.\nfunction mouseWheel() {\n circleSize += 1;\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>\n\n<div>\n<code>\nlet direction = '';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. An arrow at its center points up when the user scrolls up. The arrow points down when the user scrolls down.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Draw an arrow that points where\n // the mouse last scrolled.\n text(direction, 50, 50);\n}\n\n// Change direction when the user scrolls the mouse wheel.\nfunction mouseWheel(event) {\n if (event.delta > 0) {\n direction = '▲';\n } else {\n direction = '▼';\n }\n // Uncomment to prevent any default behavior.\n // return false;\n}\n</code>\n</div>"
+ "<div class='norender'>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas\n createCanvas(200, 200);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Get the second row (index 1)\n let row = table.getRow(1);\n\n // Set text properties\n fill(0); // Set text color to black\n textSize(16); // Adjust text size as needed\n\n // Display each column value in the row on the canvas.\n // Using an offset for y-position so each value appears on a new line.\n for (let c = 0; c < table.getColumnCount(); c++) {\n text(row.getString(c), 10, 30 + c * 20);\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Mouse"
- },
- {
- "file": "src/events/mouse.js",
- "line": 1866,
- "description": "<p>Locks the mouse pointer to its current position and makes it invisible.</p>\n<p><code>requestPointerLock()</code> allows the mouse to move forever without leaving the\nscreen. Calling <code>requestPointerLock()</code> locks the values of\n<a href=\"#/p5/mouseX\">mouseX</a>, <a href=\"#/p5/mouseY\">mouseY</a>,\n<a href=\"#/p5/pmouseX\">pmouseX</a>, and <a href=\"#/p5/pmouseY\">pmouseY</a>.\n<a href=\"#/p5/movedX\">movedX</a> and <a href=\"#/p5/movedY\">movedY</a>\ncontinue updating and can be used to get the distance the mouse moved since\nthe last frame was drawn. Calling\n<a href=\"#/p5/exitPointerLock\">exitPointerLock()</a> resumes updating the\nmouse system variables.</p>\n<p>Note: Most browsers require an input, such as a click, before calling\n<code>requestPointerLock()</code>. It’s recommended to call <code>requestPointerLock()</code> in\nan event function such as <a href=\"#/p5/doubleClicked\">doubleClicked()</a>.</p>\n",
- "itemtype": "method",
- "name": "requestPointerLock",
- "example": [
- "\n<div>\n<code>\nlet score = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the text \"Score: X\" at its center. The score increases when the user moves the mouse upward. It decreases when the user moves the mouse downward.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update the score.\n score -= movedY;\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the score.\n text(`Score: ${score}`, 50, 50);\n}\n\n// Lock the pointer when the user double-clicks.\nfunction doubleClicked() {\n requestPointerLock();\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "filename",
+ "description": "name of the file or URL to load",
+ "type": "String|Request"
+ },
+ {
+ "name": "separator",
+ "description": "the separator character used by the file, defaults to <code>','</code>",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "header",
+ "description": "\"header\" to indicate table has header row",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "callback",
+ "description": "function to be executed after\n<a href=\"#/p5/loadTable\">loadTable()</a> completes. On success, the\n<a href=\"#/p5.Table\">Table</a> object is passed in as the\nfirst argument.",
+ "optional": 1,
+ "type": "Function"
+ },
+ {
+ "name": "errorCallback",
+ "description": "function to be executed if\nthere is an error, response is passed\nin as first argument",
+ "optional": 1,
+ "type": "Function"
+ }
+ ],
+ "return": {
+ "description": "<a href=\"#/p5.Table\">Table</a> object containing data",
+ "type": "Promise<Object>"
+ }
+ }
],
+ "return": {
+ "description": "<a href=\"#/p5.Table\">Table</a> object containing data",
+ "type": "Promise<Object>"
+ },
"class": "p5",
- "module": "Events",
- "submodule": "Mouse"
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/events/mouse.js",
- "line": 1932,
- "description": "<p>Exits a pointer lock started with\n<a href=\"#/p5/requestPointerLock\">requestPointerLock</a>.</p>\n<p>Calling <code>requestPointerLock()</code> locks the values of\n<a href=\"#/p5/mouseX\">mouseX</a>, <a href=\"#/p5/mouseY\">mouseY</a>,\n<a href=\"#/p5/pmouseX\">pmouseX</a>, and <a href=\"#/p5/pmouseY\">pmouseY</a>.\nCalling <code>exitPointerLock()</code> resumes updating the mouse system variables.</p>\n<p>Note: Most browsers require an input, such as a click, before calling\n<code>requestPointerLock()</code>. It’s recommended to call <code>requestPointerLock()</code> in\nan event function such as <a href=\"#/p5/doubleClicked\">doubleClicked()</a>.</p>\n",
+ "name": "loadXML",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 719,
"itemtype": "method",
- "name": "exitPointerLock",
- "example": [
- "\n<div>\n<code>\nlet isLocked = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a word at its center. The word changes between \"Unlocked\" and \"Locked\" when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Tell the user whether the pointer is locked.\n if (isLocked === true) {\n text('Locked', 50, 50);\n } else {\n text('Unlocked', 50, 50);\n }\n}\n\n// Toggle the pointer lock when the user double-clicks.\nfunction doubleClicked() {\n if (isLocked === true) {\n exitPointerLock();\n isLocked = false;\n } else {\n requestPointerLock();\n isLocked = true;\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Events",
- "submodule": "Mouse"
- },
- {
- "file": "src/events/touch.js",
- "line": 10,
- "description": "<p>An <code>Array</code> of all the current touch points on a touchscreen device.</p>\n<p>The <code>touches</code> array is empty by default. When the user touches their\nscreen, a new touch point is tracked and added to the array. Touch points\nare <code>Objects</code> with the following properties:</p>\n<pre><code class=\"language-js\">// Iterate over the touches array.\nfor (let touch of touches) {\n // x-coordinate relative to the top-left\n // corner of the canvas.\n console.log(touch.x);\n\n // y-coordinate relative to the top-left\n // corner of the canvas.\n console.log(touch.y);\n\n // x-coordinate relative to the top-left\n // corner of the browser.\n console.log(touch.winX);\n\n // y-coordinate relative to the top-left\n // corner of the browser.\n console.log(touch.winY);\n\n // ID number\n console.log(touch.id);\n}\n</code></pre>\n",
- "itemtype": "property",
- "name": "touches",
- "type": "Object[]",
- "readonly": "",
+ "description": "<p>Loads an XML file to create a <a href=\"#/p5.XML\">p5.XML</a> object.</p>\n<p>Extensible Markup Language\n(<a href=\"https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction\" target=\"_blank\">XML</a>)\nis a standard format for sending data between applications. Like HTML, the\nXML format is based on tags and attributes, as in\n<code><time units=\"s\">1234</time></code>.</p>\n<p>The first parameter, <code>path</code>, is always a string with the path to the file.\nPaths to local files should be relative, as in\n<code>loadXML('assets/data.xml')</code>. URLs such as <code>'https://example.com/data.xml'</code>\nmay be blocked due to browser security. The <code>path</code> parameter can also be defined\nas a <code>Request</code>\nobject for more advanced usage.</p>\n<p>The second parameter, <code>successCallback</code>, is optional. If a function is\npassed, as in <code>loadXML('assets/data.xml', handleData)</code>, then the\n<code>handleData()</code> function will be called once the data loads. The\n<a href=\"#/p5.XML\">p5.XML</a> object created from the data will be passed\nto <code>handleData()</code> as its only argument. The return value of the <code>handleData()</code>\nfunction will be used as the final return value of <code>loadXML('assets/data.xml', handleData)</code>.</p>\n<p>The third parameter, <code>failureCallback</code>, is also optional. If a function is\npassed, as in <code>loadXML('assets/data.xml', handleData, handleFailure)</code>, then\nthe <code>handleFailure()</code> function will be called if an error occurs while\nloading. The <code>Error</code> object will be passed to <code>handleFailure()</code> as its only\nargument. The return value of the <code>handleFailure()</code> function will be used as the\nfinal return value of <code>loadXML('assets/data.xml', handleData, handleFailure)</code>.</p>\n<p>This function returns a <code>Promise</code> and should be used in an <code>async</code> setup with\n<code>await</code>. See the examples for the usage syntax.</p>\n",
"example": [
- "\n<div>\n<code>\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. White circles appear where the user touches the square.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a circle at each touch point.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square. Labels appear where the user touches the square, displaying the coordinates.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a label above each touch point.\n for (let touch of touches) {\n text(`${touch.x}, ${touch.y}`, touch.x, touch.y - 40);\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nasync function setup() {\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal tags.\n let mammals = myXML.getChildren('mammal');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the mammals array.\n for (let i = 0; i < mammals.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the mammal's common name.\n let name = mammals[i].getContent();\n\n // Display the mammal's name.\n text(name, 20, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Zebra\" written on three separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nlet lastMammal;\n\n// Load the XML and create a p5.XML object.\nasync function setup() {\n await loadXML('assets/animals.xml', handleData);\n\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Display the content of the last mammal element.\n text(lastMammal, 50, 50);\n\n describe('The word \"Zebra\" written in black on a gray background.');\n}\n\n// Get the content of the last mammal element.\nfunction handleData(data) {\n // Get an array with all mammal elements.\n let mammals = data.getChildren('mammal');\n\n // Get the content of the last mammal.\n lastMammal = mammals[mammals.length - 1].getContent();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet lastMammal;\n\n// Load the XML and preprocess it.\nasync function setup() {\n await loadXML('assets/animals.xml', handleData, handleError);\n\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Display the content of the last mammal element.\n text(lastMammal, 50, 50);\n\n describe('The word \"Zebra\" written in black on a gray background.');\n}\n\n// Get the content of the last mammal element.\nfunction handleData(data) {\n // Get an array with all mammal elements.\n let mammals = data.getChildren('mammal');\n\n // Get the content of the last mammal.\n lastMammal = mammals[mammals.length - 1].getContent();\n}\n\n// Log any errors to the console.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Touch"
- },
- {
- "file": "src/events/touch.js",
- "line": 125,
- "description": "<p>A function that's called once each time the user touches the screen.</p>\n<p>Declaring a function called <code>touchStarted()</code> sets a code block to run\nautomatically each time the user begins touching a touchscreen device:</p>\n<pre><code class=\"language-js\">function touchStarted() {\n // Code to run.\n}\n</code></pre>\n<p>The <a href=\"#/p5/touches\">touches</a> array will be updated with the most\nrecent touch points when <code>touchStarted()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function touchStarted() {\n // Paint over the background.\n background(200);\n\n // Mark each touch point once with a circle.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n</code></pre>\n<p>The parameter, event, is optional. <code>touchStarted()</code> will be passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent\" target=\"_blank\">TouchEvent</a>\nobject with properties that describe the touch event:</p>\n<pre><code class=\"language-js\">function touchStarted(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>On touchscreen devices, <a href=\"#/p5/mousePressed\">mousePressed()</a> will\nrun when a user’s touch starts if <code>touchStarted()</code> isn’t declared. If\n<code>touchStarted()</code> is declared, then <code>touchStarted()</code> will run when a user’s\ntouch starts and <a href=\"#/p5/mousePressed\">mousePressed()</a> won’t.</p>\n<p>Note: <code>touchStarted()</code>, <a href=\"#/p5/touchEnded\">touchEnded()</a>, and\n<a href=\"#/p5/touchMoved\">touchMoved()</a> are all related.\n<code>touchStarted()</code> runs as soon as the user touches a touchscreen device.\n<a href=\"#/p5/touchEnded\">touchEnded()</a> runs as soon as the user ends a\ntouch. <a href=\"#/p5/touchMoved\">touchMoved()</a> runs repeatedly as the\nuser moves any touch points.</p>\n",
- "itemtype": "method",
- "name": "touchStarted",
- "params": [
+ "overloads": [
{
- "name": "event",
- "description": "<p>optional <code>TouchEvent</code> argument.</p>\n",
- "type": "TouchEvent",
- "optional": true
+ "params": [
+ {
+ "name": "path",
+ "description": "path of the XML file to be loaded.",
+ "type": "String|Request"
+ },
+ {
+ "name": "successCallback",
+ "description": "function to call once the data is\nloaded. Will be passed the\n<a href=\"#/p5.XML\">p5.XML</a> object.",
+ "optional": 1,
+ "type": "Function"
+ },
+ {
+ "name": "errorCallback",
+ "description": "function to call if the data fails to\nload. Will be passed an <code>Error</code> event\nobject.",
+ "optional": 1,
+ "type": "Function"
+ }
+ ],
+ "return": {
+ "description": "XML data loaded into a <a href=\"#/p5.XML\">p5.XML</a>\nobject.",
+ "type": "Promise<p5.XML>"
+ }
}
],
- "example": [
- "\n<div>\n<code>\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square switches color between black and white each time the user touches the screen.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle colors with each touch.\nfunction touchStarted() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet bgColor = 50;\nlet fillColor = 255;\nlet borderWidth = 0.5;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'\n );\n}\n\nfunction draw() {\n background(bgColor);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n fill(0);\n noStroke();\n\n // Display the number of touch points.\n text(touches.length, 50, 20);\n\n // Style the touch points.\n fill(fillColor);\n stroke(0);\n strokeWeight(borderWidth);\n\n // Display the touch points as circles.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n\n// Set the background color to a random grayscale value.\nfunction touchStarted() {\n bgColor = random(80, 255);\n}\n\n// Set the fill color to a random grayscale value.\nfunction touchEnded() {\n fillColor = random(0, 255);\n}\n\n// Set the stroke weight.\nfunction touchMoved() {\n // Increment the border width.\n borderWidth += 0.1;\n\n // Reset the border width once it's too thick.\n if (borderWidth > 20) {\n borderWidth = 0.5;\n }\n}\n</code>\n</div>"
- ],
+ "return": {
+ "description": "XML data loaded into a <a href=\"#/p5.XML\">p5.XML</a>\nobject.",
+ "type": "Promise<p5.XML>"
+ },
"class": "p5",
- "module": "Events",
- "submodule": "Touch"
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/events/touch.js",
- "line": 295,
- "description": "<p>A function that's called when the user touches the screen and moves.</p>\n<p>Declaring the function <code>touchMoved()</code> sets a code block to run\nautomatically when the user touches a touchscreen device and moves:</p>\n<pre><code class=\"language-js\">function touchMoved() {\n // Code to run.\n}\n</code></pre>\n<p>The <a href=\"#/p5/touches\">touches</a> array will be updated with the most\nrecent touch points when <code>touchMoved()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function touchMoved() {\n // Paint over the background.\n background(200);\n\n // Mark each touch point while the user moves.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n</code></pre>\n<p>The parameter, event, is optional. <code>touchMoved()</code> will be passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent\" target=\"_blank\">TouchEvent</a>\nobject with properties that describe the touch event:</p>\n<pre><code class=\"language-js\">function touchMoved(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>On touchscreen devices, <a href=\"#/p5/mouseDragged\">mouseDragged()</a> will\nrun when the user’s touch points move if <code>touchMoved()</code> isn’t declared. If\n<code>touchMoved()</code> is declared, then <code>touchMoved()</code> will run when a user’s\ntouch points move and <a href=\"#/p5/mouseDragged\">mouseDragged()</a> won’t.</p>\n<p>Note: <a href=\"#/p5/touchStarted\">touchStarted()</a>,\n<a href=\"#/p5/touchEnded\">touchEnded()</a>, and\n<code>touchMoved()</code> are all related.\n<a href=\"#/p5/touchStarted\">touchStarted()</a> runs as soon as the user\ntouches a touchscreen device. <a href=\"#/p5/touchEnded\">touchEnded()</a>\nruns as soon as the user ends a touch. <code>touchMoved()</code> runs repeatedly as\nthe user moves any touch points.</p>\n",
+ "name": "loadBytes",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 775,
"itemtype": "method",
- "name": "touchMoved",
- "params": [
- {
- "name": "event",
- "description": "<p>optional TouchEvent argument.</p>\n",
- "type": "TouchEvent",
- "optional": true
- }
- ],
+ "description": "This method is suitable for fetching files up to size of 64MB.",
"example": [
- "\n<div>\n<code>\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square becomes lighter when the user touches the screen and moves.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\nfunction touchMoved() {\n // Update the grayscale value.\n value += 5;\n\n // Reset the grayscale value.\n if (value > 255) {\n value = 0;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet bgColor = 50;\nlet fillColor = 255;\nlet borderWidth = 0.5;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'\n );\n}\n\nfunction draw() {\n background(bgColor);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n fill(0);\n noStroke();\n\n // Display the number of touch points.\n text(touches.length, 50, 20);\n\n // Style the touch points.\n fill(fillColor);\n stroke(0);\n strokeWeight(borderWidth);\n\n // Display the touch points as circles.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n\n// Set the background color to a random grayscale value.\nfunction touchStarted() {\n bgColor = random(80, 255);\n}\n\n// Set the fill color to a random grayscale value.\nfunction touchEnded() {\n fillColor = random(0, 255);\n}\n\n// Set the stroke weight.\nfunction touchMoved() {\n // Increment the border width.\n borderWidth += 0.1;\n\n // Reset the border width once it's too thick.\n if (borderWidth > 20) {\n borderWidth = 0.5;\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet data;\n\nasync function setup() {\ncreateCanvas(100, 100); // Create a canvas\ndata = await loadBytes('assets/mammals.xml'); // Load the bytes from the XML file\n\nbackground(255); // Set a white background\nfill(0); // Set text color to black\n\n// Display the first 5 byte values on the canvas in hexadecimal format\nfor (let i = 0; i < 5; i++) {\nlet byteHex = data[i].toString(16);\ntext(byteHex, 10, 18 * (i + 1)); // Adjust spacing as needed\n}\n\ndescribe('no image displayed, displays first 5 bytes of mammals.xml in hexadecimal format');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Events",
- "submodule": "Touch"
- },
- {
- "file": "src/events/touch.js",
- "line": 468,
- "description": "<p>A function that's called once each time a screen touch ends.</p>\n<p>Declaring the function <code>touchEnded()</code> sets a code block to run\nautomatically when the user stops touching a touchscreen device:</p>\n<pre><code class=\"language-js\">function touchEnded() {\n // Code to run.\n}\n</code></pre>\n<p>The <a href=\"#/p5/touches\">touches</a> array will be updated with the most\nrecent touch points when <code>touchEnded()</code> is called by p5.js:</p>\n<pre><code class=\"language-js\">function touchEnded() {\n // Paint over the background.\n background(200);\n\n // Mark each remaining touch point when the user stops\n // a touch.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n</code></pre>\n<p>The parameter, event, is optional. <code>touchEnded()</code> will be passed a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent\" target=\"_blank\">TouchEvent</a>\nobject with properties that describe the touch event:</p>\n<pre><code class=\"language-js\">function touchEnded(event) {\n // Code to run that uses the event.\n console.log(event);\n}\n</code></pre>\n<p>On touchscreen devices, <a href=\"#/p5/mouseReleased\">mouseReleased()</a> will\nrun when the user’s touch ends if <code>touchEnded()</code> isn’t declared. If\n<code>touchEnded()</code> is declared, then <code>touchEnded()</code> will run when a user’s\ntouch ends and <a href=\"#/p5/mouseReleased\">mouseReleased()</a> won’t.</p>\n<p>Note: <a href=\"#/p5/touchStarted\">touchStarted()</a>,\n<code>touchEnded()</code>, and <a href=\"#/p5/touchMoved\">touchMoved()</a> are all\nrelated. <a href=\"#/p5/touchStarted\">touchStarted()</a> runs as soon as the\nuser touches a touchscreen device. <code>touchEnded()</code> runs as soon as the user\nends a touch. <a href=\"#/p5/touchMoved\">touchMoved()</a> runs repeatedly as\nthe user moves any touch points.</p>\n",
- "itemtype": "method",
- "name": "touchEnded",
- "params": [
+ "overloads": [
{
- "name": "event",
- "description": "<p>optional <code>TouchEvent</code> argument.</p>\n",
- "type": "TouchEvent",
- "optional": true
+ "params": [
+ {
+ "name": "file",
+ "description": "name of the file or URL to load",
+ "type": "String|Request"
+ },
+ {
+ "name": "callback",
+ "description": "function to be executed after <a href=\"#/p5/loadBytes\">loadBytes()</a>\ncompletes",
+ "optional": 1,
+ "type": "Function"
+ },
+ {
+ "name": "errorCallback",
+ "description": "function to be executed if there\nis an error",
+ "optional": 1,
+ "type": "Function"
+ }
+ ],
+ "return": {
+ "description": "a Uint8Array containing the loaded buffer",
+ "type": "Promise<Uint8Array>"
+ }
}
],
- "example": [
- "\n<div>\n<code>\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet value = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a black square at its center. The inner square switches color between black and white each time the user stops touching the screen.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the square.\n fill(value);\n\n // Draw the square.\n square(25, 25, 50);\n}\n\n// Toggle colors when a touch ends.\nfunction touchEnded() {\n if (value === 0) {\n value = 255;\n } else {\n value = 0;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// On a touchscreen device, touch the canvas using one or more fingers\n// at the same time.\n\nlet bgColor = 50;\nlet fillColor = 255;\nlet borderWidth = 0.5;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'\n );\n}\n\nfunction draw() {\n background(bgColor);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n fill(0);\n noStroke();\n\n // Display the number of touch points.\n text(touches.length, 50, 20);\n\n // Style the touch points.\n fill(fillColor);\n stroke(0);\n strokeWeight(borderWidth);\n\n // Display the touch points as circles.\n for (let touch of touches) {\n circle(touch.x, touch.y, 40);\n }\n}\n\n// Set the background color to a random grayscale value.\nfunction touchStarted() {\n bgColor = random(80, 255);\n}\n\n// Set the fill color to a random grayscale value.\nfunction touchEnded() {\n fillColor = random(0, 255);\n}\n\n// Set the stroke weight.\nfunction touchMoved() {\n // Increment the border width.\n borderWidth += 0.1;\n\n // Reset the border width once it's too thick.\n if (borderWidth > 20) {\n borderWidth = 0.5;\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Events",
- "submodule": "Touch"
- },
- {
- "file": "src/image/filters.js",
- "line": 1,
- "description": "<p>This module defines the filters for use with image buffers.</p>\n<p>This module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.</p>\n<p>Generally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.</p>\n<p>A number of functions are borrowed/adapted from\n<a href=\"http://www.html5rocks.com/en/tutorials/canvas/imagefilters/\">http://www.html5rocks.com/en/tutorials/canvas/imagefilters/</a>\nor the java processing implementation.</p>\n",
- "class": "p5",
- "module": "Events"
- },
- {
- "file": "src/image/image.js",
- "line": 8,
- "description": "<p>This module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> class\nfor drawing images to the main display canvas.</p>\n",
+ "return": {
+ "description": "a Uint8Array containing the loaded buffer",
+ "type": "Promise<Uint8Array>"
+ },
"class": "p5",
- "module": "Image",
- "submodule": "Image"
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/image/image.js",
- "line": 15,
- "description": "<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a> object.</p>\n<p><code>createImage()</code> uses the <code>width</code> and <code>height</code> parameters to set the new\n<a href=\"#/p5.Image\">p5.Image</a> object's dimensions in pixels. The new\n<a href=\"#/p5.Image\">p5.Image</a> can be modified by updating its\n<a href=\"#/p5.Image/pixels\">pixels</a> array or by calling its\n<a href=\"#/p5.Image/get\">get()</a> and\n<a href=\"#/p5.Image/set\">set()</a> methods. The\n<a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method must be called\nbefore reading or modifying pixel values. The\n<a href=\"#/p5.Image/updatePixels\">updatePixels()</a> method must be called\nfor updates to take effect.</p>\n<p>Note: The new <a href=\"#/p5.Image\">p5.Image</a> object is transparent by\ndefault.</p>\n",
+ "name": "loadBlob",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 834,
"itemtype": "method",
- "name": "createImage",
- "params": [
- {
- "name": "width",
- "description": "<p>width in pixels.</p>\n",
- "type": "Integer"
- },
+ "description": "Loads a file at the given path as a Blob, then returns the resulting data or\npasses it to a success callback function, if provided. On load, this function\nreturns a <code>Promise</code> that resolves to a Blob containing the file data.",
+ "example": [
+ "<div>\n<code>\nlet myBlob;\n\nasync function setup() {\n createCanvas(200, 200);\n background(220);\n try {\n // 1. Load an image file as a Blob.\n myBlob = await loadBlob('assets/flower-1.png');\n\n // 2. Convert the Blob into an object URL.\n const objectUrl = URL.createObjectURL(myBlob);\n\n // 3. Load that object URL into a p5.Image.\n loadImage(objectUrl, (img) => {\n // 4. Display the loaded image.\n image(img, 0, 0, width, height);\n });\n } catch (err) {\n console.error('Error loading blob:', err);\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "height",
- "description": "<p>height in pixels.</p>\n",
- "type": "Integer"
+ "params": [
+ {
+ "name": "path",
+ "description": "The path or Request object pointing to the file\nyou want to load.",
+ "type": "String|Request"
+ },
+ {
+ "name": "successCallback",
+ "description": "Optional. A function to be called if the\nfile successfully loads, receiving the\nresulting Blob as its only argument.",
+ "optional": 1,
+ "type": "Function"
+ },
+ {
+ "name": "errorCallback",
+ "description": "Optional. A function to be called if an\nerror occurs during loading; receives the\nerror object as its only argument.",
+ "optional": 1,
+ "type": "Function"
+ }
+ ],
+ "return": {
+ "description": "A promise that resolves with the loaded Blob.",
+ "type": "Promise<Blob>"
+ }
}
],
"return": {
- "description": "new <a href=\"#/p5.Image\">p5.Image</a> object.",
- "type": "p5.Image"
+ "description": "A promise that resolves with the loaded Blob.",
+ "type": "Promise<Blob>"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels into memory.\n img.loadPixels();\n\n // Set all the image's pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image's pixel values.\n img.updatePixels();\n\n // Draw the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels into memory.\n img.loadPixels();\n\n // Create a color gradient.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n // Calculate the transparency.\n let a = map(x, 0, img.width, 0, 255);\n\n // Create a p5.Color object.\n let c = color(0, a);\n\n // Set the pixel's color.\n img.set(x, y, c);\n }\n }\n\n // Update the image's pixels.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A square with a horizontal color gradient that transitions from gray to black.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the pixels into memory.\n img.loadPixels();\n // Get the current pixel density.\n let d = pixelDensity();\n\n // Calculate the pixel that is halfway through the image's pixel array.\n let halfImage = 4 * (d * img.width) * (d * img.height / 2);\n\n // Set half of the image's pixels to black.\n for (let i = 0; i < halfImage; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image's pixels.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Image",
- "submodule": "Image"
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/image/image.js",
- "line": 153,
- "description": "<p>Saves the current canvas as an image.</p>\n<p>By default, <code>saveCanvas()</code> saves the canvas as a PNG image called\n<code>untitled.png</code>.</p>\n<p>The first parameter, <code>filename</code>, is optional. It's a string that sets the\nfile's name. If a file extension is included, as in\n<code>saveCanvas('drawing.png')</code>, then the image will be saved using that\nformat.</p>\n<p>The second parameter, <code>extension</code>, is also optional. It sets the files format.\nEither <code>'png'</code>, <code>'webp'</code>, or <code>'jpg'</code> can be used. For example, <code>saveCanvas('drawing', 'jpg')</code>\nsaves the canvas to a file called <code>drawing.jpg</code>.</p>\n<p>Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.</p>\n",
+ "name": "httpGet",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 904,
"itemtype": "method",
- "name": "saveCanvas",
+ "description": "Method for executing an HTTP GET request. If data type is not specified,\nit will default to <code>'text'</code>. This is equivalent to\ncalling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return\na Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer\nwhich can be used to initialize typed arrays (such as Uint8Array).",
"example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n background(255);\n\n // Save the canvas to 'untitled.png'.\n saveCanvas();\n\n describe('A white square.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas('myCanvas.jpg');\n\n describe('A white square.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas('myCanvas', 'jpg');\n\n describe('A white square.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'untitled.png'.\n saveCanvas(cnv);\n\n describe('A white square.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas(cnv, 'myCanvas.jpg');\n\n describe('A white square.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(255);\n\n // Save the canvas to 'myCanvas.jpg'.\n saveCanvas(cnv, 'myCanvas', 'jpg');\n\n describe('A white square.');\n}\n</code>\n</div>"
+ "<div class='norender'><code>\n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\nlet earthquakes;\nasync function setup() {\n // Get the most recent earthquake in the database\n let url =\n'https://earthquake.usgs.gov/fdsnws/event/1/query?' +\n 'format=geojson&limit=1&orderby=time';\n earthquakes = await httpGet(url, 'json');\n}\n\nfunction draw() {\n if (!earthquakes) {\n // Wait until the earthquake data has loaded before drawing.\n return;\n }\n background(200);\n // Get the magnitude and name of the earthquake out of the loaded JSON\n let earthquakeMag = earthquakes.features[0].properties.mag;\n let earthquakeName = earthquakes.features[0].properties.place;\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n textAlign(CENTER);\n text(earthquakeName, 0, height - 30, width, 30);\n noLoop();\n}\n</code></div>"
],
- "class": "p5",
- "module": "Image",
- "submodule": "Image",
"overloads": [
{
- "line": 153,
"params": [
{
- "name": "selectedCanvas",
- "description": "<p>reference to a\n specific HTML5 canvas element.</p>\n",
- "type": "p5.Framebuffer|p5.Element|HTMLCanvasElement"
+ "name": "path",
+ "description": "name of the file or url to load",
+ "type": "String|Request"
},
{
- "name": "filename",
- "description": "<p>file name. Defaults to 'untitled'.</p>\n",
- "type": "String",
- "optional": true
+ "name": "datatype",
+ "description": "\"json\", \"jsonp\", \"binary\", \"arrayBuffer\",\n\"xml\", or \"text\"",
+ "optional": 1,
+ "type": "String"
},
{
- "name": "extension",
- "description": "<p>file extension, either 'png', 'webp', or 'jpg'. Defaults to 'png'.</p>\n",
- "type": "String",
- "optional": true
+ "name": "callback",
+ "description": "function to be executed after\n<a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\nas first argument",
+ "optional": 1,
+ "type": "Function"
+ },
+ {
+ "name": "errorCallback",
+ "description": "function to be executed if\nthere is an error, response is passed\nin as first argument",
+ "optional": 1,
+ "type": "Function"
}
- ]
+ ],
+ "return": {
+ "description": "A promise that resolves with the data when the operation\ncompletes successfully or rejects with the error after\none occurs.",
+ "type": "Promise"
+ }
},
{
- "line": 267,
"params": [
{
- "name": "filename",
- "description": "",
- "type": "String",
- "optional": true
+ "name": "path",
+ "type": "String|Request"
},
{
- "name": "extension",
- "description": "",
- "type": "String",
- "optional": true
+ "name": "callback",
+ "type": "Function"
+ },
+ {
+ "name": "errorCallback",
+ "optional": 1,
+ "type": "Function"
}
- ]
- }
- ]
- },
- {
- "file": "src/image/image.js",
- "line": 561,
- "description": "<p>Captures a sequence of frames from the canvas that can be saved as images.</p>\n<p><code>saveFrames()</code> creates an array of frame objects. Each frame is stored as\nan object with its file type, file name, and image data as a string. For\nexample, the first saved frame might have the following properties:</p>\n<p><code>{ ext: 'png', filename: 'frame0', imageData: 'data:image/octet-stream;base64, abc123' }</code>.</p>\n<p>The first parameter, <code>filename</code>, sets the prefix for the file names. For\nexample, setting the prefix to <code>'frame'</code> would generate the image files\n<code>frame0.png</code>, <code>frame1.png</code>, and so on.</p>\n<p>The second parameter, <code>extension</code>, sets the file type to either <code>'png'</code> or\n<code>'jpg'</code>.</p>\n<p>The third parameter, <code>duration</code>, sets the duration to record in seconds.\nThe maximum duration is 15 seconds.</p>\n<p>The fourth parameter, <code>framerate</code>, sets the number of frames to record per\nsecond. The maximum frame rate value is 22. Limits are placed on <code>duration</code>\nand <code>framerate</code> to avoid using too much memory. Recording large canvases\ncan easily crash sketches or even web browsers.</p>\n<p>The fifth parameter, <code>callback</code>, is optional. If a function is passed,\nimage files won't be saved by default. The callback function can be used\nto process an array containing the data for each captured frame. The array\nof image data contains a sequence of objects with three properties for each\nframe: <code>imageData</code>, <code>filename</code>, and <code>extension</code>.</p>\n<p>Note: Frames are downloaded as individual image files by default.</p>\n",
- "itemtype": "method",
- "name": "saveFrames",
- "params": [
- {
- "name": "filename",
- "description": "<p>prefix of file name.</p>\n",
- "type": "String"
- },
- {
- "name": "extension",
- "description": "<p>file extension, either 'jpg' or 'png'.</p>\n",
- "type": "String"
- },
- {
- "name": "duration",
- "description": "<p>duration in seconds to record. This parameter will be constrained to be less or equal to 15.</p>\n",
- "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>\n",
- "type": "Number"
- },
- {
- "name": "callback",
- "description": "<p>callback function that will be executed\n to handle the image data. This function\n should accept an array as argument. The\n array will contain the specified number of\n frames of objects. Each object has three\n properties: <code>imageData</code>, <code>filename</code>, and <code>extension</code>.</p>\n",
- "type": "Function(Array)",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square repeatedly changes color from blue to pink.');\n}\n\nfunction draw() {\n let r = frameCount % 255;\n let g = 50;\n let b = 100;\n background(r, g, b);\n}\n\n// Save the frames when the user presses the 's' key.\nfunction keyPressed() {\n if (key === 's') {\n saveFrames('frame', 'png', 1, 5);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square repeatedly changes color from blue to pink.');\n}\n\nfunction draw() {\n let r = frameCount % 255;\n let g = 50;\n let b = 100;\n background(r, g, b);\n}\n\n// Print 5 frames when the user presses the mouse.\nfunction mousePressed() {\n saveFrames('frame', 'png', 1, 5, printFrames);\n}\n\n// Prints an array of objects containing raw image data, filenames, and extensions.\nfunction printFrames(frames) {\n for (let frame of frames) {\n print(frame);\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Image",
- "submodule": "Image"
- },
- {
- "file": "src/image/loading_displaying.js",
- "line": 18,
- "description": "<p>Loads an image to create a <a href=\"#/p5.Image\">p5.Image</a> object.</p>\n<p><code>loadImage()</code> interprets the first parameter one of three ways. If the path\nto an image file is provided, <code>loadImage()</code> will load it. Paths to local\nfiles should be relative, such as <code>'assets/thundercat.jpg'</code>. URLs such as\n<code>'https://example.com/thundercat.jpg'</code> may be blocked due to browser\nsecurity. Raw image data can also be passed as a base64 encoded image in\nthe form <code>'data:image/png;base64,arandomsequenceofcharacters'</code>.</p>\n<p>The second parameter is optional. If a function is passed, it will be\ncalled once the image has loaded. The callback function can optionally use\nthe new <a href=\"#/p5.Image\">p5.Image</a> object.</p>\n<p>The third parameter is also optional. If a function is passed, it will be\ncalled if the image fails to load. The callback function can optionally use\nthe event error.</p>\n<p>Images can take time to load. Calling <code>loadImage()</code> in\n<a href=\"#/p5/preload\">preload()</a> ensures images load before they're\nused in <a href=\"#/p5/setup\">setup()</a> or <a href=\"#/p5/draw\">draw()</a>.</p>\n",
- "itemtype": "method",
- "name": "loadImage",
- "params": [
- {
- "name": "path",
- "description": "<p>path of the image to be loaded or base64 encoded image.</p>\n",
- "type": "String"
- },
- {
- "name": "successCallback",
- "description": "<p>function called with\n <a href=\"#/p5.Image\">p5.Image</a> once it\n loads.</p>\n",
- "type": "function(p5.Image)",
- "optional": true
- },
- {
- "name": "failureCallback",
- "description": "<p>function called with event\n error if the image fails to load.</p>\n",
- "type": "Function(Event)",
- "optional": true
+ ],
+ "return": {
+ "description": "",
+ "type": "Promise"
+ }
}
],
"return": {
- "description": "the <a href=\"#/p5.Image\">p5.Image</a> object.",
- "type": "p5.Image"
+ "description": "A promise that resolves with the data when the operation\ncompletes successfully or rejects with the error after\none occurs.",
+ "type": "Promise"
},
- "example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Call handleImage() once the image loads.\n loadImage('assets/laDefense.jpg', handleImage);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n\n// Display the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Call handleImage() once the image loads or\n // call handleError() if an error occurs.\n loadImage('assets/laDefense.jpg', handleImage, handleError);\n}\n\n// Display the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n\n// Log the error.\nfunction handleError(event) {\n console.error('Oops!', event);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Image",
- "submodule": "Loading & Displaying"
- },
- {
- "file": "src/image/loading_displaying.js",
- "line": 204,
- "description": "<p>Generates a gif from a sketch and saves it to a file.</p>\n<p><code>saveGif()</code> may be called in <a href=\"#/p5/setup\">setup()</a> or at any\npoint while a sketch is running.</p>\n<p>The first parameter, <code>fileName</code>, sets the gif's file name.</p>\n<p>The second parameter, <code>duration</code>, sets the gif's duration in seconds.</p>\n<p>The third parameter, <code>options</code>, is optional. If an object is passed,\n<code>saveGif()</code> will use its properties to customize the gif. <code>saveGif()</code>\nrecognizes the properties <code>delay</code>, <code>units</code>, <code>silent</code>,\n<code>notificationDuration</code>, and <code>notificationID</code>.</p>\n",
- "itemtype": "method",
- "name": "saveGif",
- "params": [
- {
- "name": "filename",
- "description": "<p>file name of gif.</p>\n",
- "type": "String"
- },
- {
- "name": "duration",
- "description": "<p>duration in seconds to capture from the sketch.</p>\n",
- "type": "Number"
- },
- {
- "name": "options",
- "description": "<p>an object that can contain five more properties:\n <code>delay</code>, a Number specifying how much time to wait before recording;\n <code>units</code>, a String that can be either 'seconds' or 'frames'. By default it's 'seconds’;\n <code>silent</code>, a Boolean that defines presence of progress notifications. By default it’s <code>false</code>;\n <code>notificationDuration</code>, a Number that defines how long in seconds the final notification\n will live. By default it's <code>0</code>, meaning the notification will never be removed;\n <code>notificationID</code>, a String that specifies the id of the notification's DOM element. By default it’s <code>'progressBar’</code>.</p>\n",
- "type": "Object",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n let c = frameCount % 255;\n fill(c);\n\n // Display the circle.\n circle(50, 50, 25);\n}\n\n// Save a 5-second gif when the user presses the 's' key.\nfunction keyPressed() {\n if (key === 's') {\n saveGif('mySketch', 5);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n let c = frameCount % 255;\n fill(c);\n\n // Display the circle.\n circle(50, 50, 25);\n}\n\n// Save a 5-second gif when the user presses the 's' key.\n// Wait 1 second after the key press before recording.\nfunction keyPressed() {\n if (key === 's') {\n saveGif('mySketch', 5, { delay: 1 });\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Image",
- "submodule": "Loading & Displaying"
- },
- {
- "file": "src/image/loading_displaying.js",
- "line": 639,
- "description": "<p>Helper function for loading GIF-based images</p>\n",
"class": "p5",
- "module": "Image",
- "submodule": "Loading & Displaying"
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/image/loading_displaying.js",
- "line": 888,
- "description": "<p>Draws an image to the canvas.</p>\n<p>The first parameter, <code>img</code>, is the source image to be drawn. <code>img</code> can be\nany of the following objects:</p>\n<ul>\n<li><a href=\"#/p5.Image\">p5.Image</a></li>\n<li><a href=\"#/p5.Element\">p5.Element</a></li>\n<li><a href=\"#/p5.Texture\">p5.Texture</a></li>\n<li><a href=\"#/p5.Framebuffer\">p5.Framebuffer</a></li>\n<li><a href=\"#/p5.FramebufferTexture\">p5.FramebufferTexture</a></li>\n</ul>\n<p>The second and third parameters, <code>dx</code> and <code>dy</code>, set the coordinates of the\ndestination image's top left corner. See\n<a href=\"#/p5/imageMode\">imageMode()</a> for other ways to position images.</p>\n<p>Here's a diagram that explains how optional parameters work in <code>image()</code>:</p>\n<p><img src=\"assets/drawImage.png\"></img></p>\n<p>The fourth and fifth parameters, <code>dw</code> and <code>dh</code>, are optional. They set the\nthe width and height to draw the destination image. By default, <code>image()</code>\ndraws the full source image at its original size.</p>\n<p>The sixth and seventh parameters, <code>sx</code> and <code>sy</code>, are also optional.\nThese coordinates define the top left corner of a subsection to draw from\nthe source image.</p>\n<p>The eighth and ninth parameters, <code>sw</code> and <code>sh</code>, are also optional.\nThey define the width and height of a subsection to draw from the source\nimage. By default, <code>image()</code> draws the full subsection that begins at\n<code>(sx, sy)</code> and extends to the edges of the source image.</p>\n<p>The ninth parameter, <code>fit</code>, is also optional. It enables a subsection of\nthe source image to be drawn without affecting its aspect ratio. If\n<code>CONTAIN</code> is passed, the full subsection will appear within the destination\nrectangle. If <code>COVER</code> is passed, the subsection will completely cover the\ndestination rectangle. This may have the effect of zooming into the\nsubsection.</p>\n<p>The tenth and eleventh paremeters, <code>xAlign</code> and <code>yAlign</code>, are also\noptional. They determine how to align the fitted subsection. <code>xAlign</code> can\nbe set to either <code>LEFT</code>, <code>RIGHT</code>, or <code>CENTER</code>. <code>yAlign</code> can be set to\neither <code>TOP</code>, <code>BOTTOM</code>, or <code>CENTER</code>. By default, both <code>xAlign</code> and <code>yAlign</code>\nare set to <code>CENTER</code>.</p>\n",
+ "name": "httpPost",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 1001,
"itemtype": "method",
- "name": "image",
+ "description": "Method for executing an HTTP POST request. If data type is not specified,\nit will default to <code>'text'</code>. This is equivalent to\ncalling <code>httpDo(path, 'POST')</code>.",
"example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe('An image of the underside of a white umbrella with a gridded ceiling above.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image.\n image(img, 10, 10);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image 50x50.\n image(img, 0, 0, 50, 50);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the center of the image.\n image(img, 25, 25, 50, 50, 25, 25, 50, 50);\n\n describe('An image of a gridded ceiling drawn in the center of a dark gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/moonwalk.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image and scale it to fit within the canvas.\n image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);\n\n describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n // Image is 50 x 50 pixels.\n img = loadImage('assets/laDefense50.png');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image and scale it to cover the canvas.\n image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);\n\n describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Examples use jsonplaceholder.typicode.com for a Mock Data API\n\nlet url = 'https://jsonplaceholder.typicode.com/posts';\nlet postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very cool.' };\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n}\n\nfunction mousePressed() {\n httpPost(url, 'json', postData, function(result) {\n strokeWeight(2);\n text(result.body, mouseX, mouseY);\n });\n}\n</code>\n</div>\n\n<div><code>\nlet url = 'ttps://invalidURL'; // A bad URL that will cause errors\nlet postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n}\n\nfunction mousePressed() {\n httpPost(\n url,\n 'json',\n postData,\n function(result) {\n // ... won't be called\n },\n function(error) {\n strokeWeight(2);\n text(error.toString(), mouseX, mouseY);\n }\n );\n}\n</code></div>"
],
- "class": "p5",
- "module": "Image",
- "submodule": "Loading & Displaying",
"overloads": [
{
- "line": 888,
"params": [
{
- "name": "img",
- "description": "<p>image to display.</p>\n",
- "type": "p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"
+ "name": "path",
+ "description": "name of the file or url to load",
+ "type": "String|Request"
},
{
- "name": "x",
- "description": "<p>x-coordinate of the top-left corner of the image.</p>\n",
- "type": "Number"
+ "name": "data",
+ "description": "param data passed sent with request",
+ "optional": 1,
+ "type": "Object|Boolean"
},
{
- "name": "y",
- "description": "<p>y-coordinate of the top-left corner of the image.</p>\n",
- "type": "Number"
+ "name": "datatype",
+ "description": "\"json\", \"jsonp\", \"xml\", or \"text\".\nIf omitted, <a href=\"#/p5/httpPost\">httpPost()</a> will guess.",
+ "optional": 1,
+ "type": "String"
},
{
- "name": "width",
- "description": "<p>width to draw the image.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "callback",
+ "description": "function to be executed after\n<a href=\"#/p5/httpPost\">httpPost()</a> completes, data is passed in\nas first argument",
+ "optional": 1,
+ "type": "Function"
},
{
- "name": "height",
- "description": "<p>height to draw the image.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "errorCallback",
+ "description": "function to be executed if\nthere is an error, response is passed\nin as first argument",
+ "optional": 1,
+ "type": "Function"
}
- ]
+ ],
+ "return": {
+ "description": "A promise that resolves with the data when the operation\ncompletes successfully or rejects with the error after\none occurs.",
+ "type": "Promise"
+ }
},
{
- "line": 1074,
"params": [
{
- "name": "img",
- "description": "",
- "type": "p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"
- },
- {
- "name": "dx",
- "description": "<p>the x-coordinate of the destination\n rectangle in which to draw the source image</p>\n",
- "type": "Number"
- },
- {
- "name": "dy",
- "description": "<p>the y-coordinate of the destination\n rectangle in which to draw the source image</p>\n",
- "type": "Number"
- },
- {
- "name": "dWidth",
- "description": "<p>the width of the destination rectangle</p>\n",
- "type": "Number"
- },
- {
- "name": "dHeight",
- "description": "<p>the height of the destination rectangle</p>\n",
- "type": "Number"
- },
- {
- "name": "sx",
- "description": "<p>the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n",
- "type": "Number"
+ "name": "path",
+ "type": "String|Request"
},
{
- "name": "sy",
- "description": "<p>the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n",
- "type": "Number"
+ "name": "data",
+ "type": "Object|Boolean"
},
{
- "name": "sWidth",
- "description": "<p>the width of the subsection of the\n source image to draw into the destination\n rectangle</p>\n",
- "type": "Number",
- "optional": true
+ "name": "callback",
+ "optional": 1,
+ "type": "Function"
},
{
- "name": "sHeight",
- "description": "<p>the height of the subsection of the\n source image to draw into the destination rectangle</p>\n",
- "type": "Number",
- "optional": true
- },
+ "name": "errorCallback",
+ "optional": 1,
+ "type": "Function"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "Promise"
+ }
+ },
+ {
+ "params": [
{
- "name": "fit",
- "description": "<p>either CONTAIN or COVER</p>\n",
- "type": "Constant",
- "optional": true
+ "name": "path",
+ "type": "String|Request"
},
{
- "name": "xAlign",
- "description": "<p>either LEFT, RIGHT or CENTER default is CENTER</p>\n",
- "type": "Constant",
- "optional": true
+ "name": "callback",
+ "optional": 1,
+ "type": "Function"
},
{
- "name": "yAlign",
- "description": "<p>either TOP, BOTTOM or CENTER default is CENTER</p>\n",
- "type": "Constant",
- "optional": true
+ "name": "errorCallback",
+ "optional": 1,
+ "type": "Function"
}
- ]
+ ],
+ "return": {
+ "description": "",
+ "type": "Promise"
+ }
}
- ]
+ ],
+ "return": {
+ "description": "A promise that resolves with the data when the operation\ncompletes successfully or rejects with the error after\none occurs.",
+ "type": "Promise"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/image/loading_displaying.js",
- "line": 1192,
- "description": "<p>Tints images using a color.</p>\n<p>The version of <code>tint()</code> with one parameter interprets it one of four ways.\nIf the parameter is a number, it's interpreted as a grayscale value. If the\nparameter is a string, it's interpreted as a CSS color string. An array of\n<code>[R, G, B, A]</code> values or a <a href=\"#/p5.Color\">p5.Color</a> object can\nalso be used to set the tint color.</p>\n<p>The version of <code>tint()</code> with two parameters uses the first one as a\ngrayscale value and the second as an alpha value. For example, calling\n<code>tint(255, 128)</code> will make an image 50% transparent.</p>\n<p>The version of <code>tint()</code> with three parameters interprets them as RGB or\nHSB values, depending on the current\n<a href=\"#/p5/colorMode\">colorMode()</a>. The optional fourth parameter\nsets the alpha value. For example, <code>tint(255, 0, 0, 100)</code> will give images\na red tint and make them transparent.</p>\n",
+ "name": "httpDo",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 1135,
"itemtype": "method",
- "name": "tint",
+ "description": "<p>Method for executing an HTTP request. If data type is not specified,\nit will default to <code>'text'</code>.</p>\n<p>This function is meant for more advanced usage of HTTP requests in p5.js. It is\nbest used when a <code>Request</code>\nobject is passed to the <code>path</code> parameter.</p>\n<p>This method is suitable for fetching files up to size of 64MB when \"GET\" is used.</p>\n",
"example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left image.\n image(img, 0, 0);\n\n // Right image.\n // Tint with a CSS color string.\n tint('red');\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left image.\n image(img, 0, 0);\n\n // Right image.\n // Tint with RGB values.\n tint(255, 0, 0);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left.\n image(img, 0, 0);\n\n // Right.\n // Tint with RGBA values.\n tint(255, 0, 0, 100);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left.\n image(img, 0, 0);\n\n // Right.\n // Tint with grayscale and alpha values.\n tint(255, 180);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\n\n// displays an animation of all USGS earthquakes\nlet earthquakes;\nlet eqFeatureIndex = 0;\n\nfunction setup() {\n let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';\n httpDo(\n url,\n {\n method: 'GET',\n // Other Request options, like special headers for apis\n headers: { authorization: 'Bearer secretKey' }\n },\n function(res) {\n earthquakes = res;\n }\n );\n}\n\nfunction draw() {\n // wait until the data is loaded\n if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {\n return;\n }\n clear();\n\n let feature = earthquakes.features[eqFeatureIndex];\n let mag = feature.properties.mag;\n let rad = mag / 11 * ((width + height) / 2);\n fill(255, 0, 0, 100);\n ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);\n\n if (eqFeatureIndex >= earthquakes.features.length) {\n eqFeatureIndex = 0;\n } else {\n eqFeatureIndex += 1;\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Image",
- "submodule": "Loading & Displaying",
"overloads": [
{
- "line": 1192,
"params": [
{
- "name": "v1",
- "description": "<p>red or hue value.</p>\n",
- "type": "Number"
+ "name": "path",
+ "description": "name of the file or url to load",
+ "type": "String|Request"
},
{
- "name": "v2",
- "description": "<p>green or saturation value.</p>\n",
- "type": "Number"
+ "name": "method",
+ "description": "either \"GET\", \"POST\", \"PUT\", \"DELETE\",\nor other HTTP request methods",
+ "optional": 1,
+ "type": "String"
},
{
- "name": "v3",
- "description": "<p>blue or brightness.</p>\n",
- "type": "Number"
+ "name": "datatype",
+ "description": "\"json\", \"jsonp\", \"xml\", or \"text\"",
+ "optional": 1,
+ "type": "String"
},
{
- "name": "alpha",
- "description": "",
- "type": "Number",
- "optional": true
- }
- ]
- },
- {
- "line": 1318,
- "params": [
- {
- "name": "value",
- "description": "<p>CSS color string.</p>\n",
- "type": "String"
- }
- ]
- },
- {
- "line": 1323,
- "params": [
+ "name": "data",
+ "description": "param data passed sent with request",
+ "optional": 1,
+ "type": "Object"
+ },
{
- "name": "gray",
- "description": "<p>grayscale value.</p>\n",
- "type": "Number"
+ "name": "callback",
+ "description": "function to be executed after\n<a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\nas first argument",
+ "optional": 1,
+ "type": "Function"
},
{
- "name": "alpha",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "errorCallback",
+ "description": "function to be executed if\nthere is an error, response is passed\nin as first argument",
+ "optional": 1,
+ "type": "Function"
}
- ]
+ ],
+ "return": {
+ "description": "A promise that resolves with the data when the operation\ncompletes successfully or rejects with the error after\none occurs.",
+ "type": "Promise"
+ }
},
{
- "line": 1329,
"params": [
{
- "name": "values",
- "description": "<p>array containing the red, green, blue &\n alpha components of the color.</p>\n",
- "type": "Number[]"
- }
- ]
- },
- {
- "line": 1335,
- "params": [
+ "name": "path",
+ "type": "String|Request"
+ },
{
- "name": "color",
- "description": "<p>the tint color</p>\n",
- "type": "p5.Color"
+ "name": "callback",
+ "optional": 1,
+ "type": "Function"
+ },
+ {
+ "name": "errorCallback",
+ "optional": 1,
+ "type": "Function"
}
- ]
+ ],
+ "return": {
+ "description": "",
+ "type": "Promise"
+ }
}
- ]
+ ],
+ "return": {
+ "description": "A promise that resolves with the data when the operation\ncompletes successfully or rejects with the error after\none occurs.",
+ "type": "Promise"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/image/loading_displaying.js",
- "line": 1345,
- "description": "<p>Removes the current tint set by <a href=\"#/p5/tint\">tint()</a>.</p>\n<p><code>noTint()</code> restores images to their original colors.</p>\n",
+ "name": "createWriter",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 1304,
"itemtype": "method",
- "name": "noTint",
+ "description": "<p>Creates a new <a href=\"#/p5.PrintWriter\">p5.PrintWriter</a> object.</p>\n<p><a href=\"#/p5.PrintWriter\">p5.PrintWriter</a> objects provide a way to\nsave a sequence of text data, called the print stream, to the user's\ncomputer. They're low-level objects that enable precise control of text\noutput. Functions such as\n<a href=\"#/p5/saveStrings\">saveStrings()</a> and\n<a href=\"#/p5/saveJSON\">saveJSON()</a> are easier to use for simple file\nsaving.</p>\n<p>The first parameter, <code>filename</code>, is the name of the file to be written. If\na string is passed, as in <code>createWriter('words.txt')</code>, a new\n<a href=\"#/p5.PrintWriter\">p5.PrintWriter</a> object will be created that\nwrites to a file named <code>words.txt</code>.</p>\n<p>The second parameter, <code>extension</code>, is optional. If a string is passed, as\nin <code>createWriter('words', 'csv')</code>, the first parameter will be interpreted\nas the file name and the second parameter as the extension.</p>\n",
"example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left.\n // Tint with a CSS color string.\n tint('red');\n image(img, 0, 0);\n\n // Right.\n // Remove the tint.\n noTint();\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('xo.txt');\n\n // Add some lines to the print stream.\n myWriter.print('XOO');\n myWriter.print('OXO');\n myWriter.print('OOX');\n\n // Save the file and close the print stream.\n myWriter.close();\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create a p5.PrintWriter object.\n // Use the file format .csv.\n let myWriter = createWriter('mauna_loa_co2', 'csv');\n\n // Add some lines to the print stream.\n myWriter.print('date,ppm_co2');\n myWriter.print('1960-01-01,316.43');\n myWriter.print('1970-01-01,325.06');\n myWriter.print('1980-01-01,337.9');\n myWriter.print('1990-01-01,353.86');\n myWriter.print('2000-01-01,369.45');\n myWriter.print('2020-01-01,413.61');\n\n // Save the file and close the print stream.\n myWriter.close();\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Image",
- "submodule": "Loading & Displaying"
- },
- {
- "file": "src/image/loading_displaying.js",
- "line": 1395,
- "description": "<p>Changes the location from which images are drawn when\n<a href=\"#/p5/image\">image()</a> is called.</p>\n<p>By default, the first\ntwo parameters of <a href=\"#/p5/image\">image()</a> are the x- and\ny-coordinates of the image's upper-left corner. The next parameters are\nits width and height. This is the same as calling <code>imageMode(CORNER)</code>.</p>\n<p><code>imageMode(CORNERS)</code> also uses the first two parameters of\n<a href=\"#/p5/image\">image()</a> as the x- and y-coordinates of the image's\ntop-left corner. The third and fourth parameters are the coordinates of its\nbottom-right corner.</p>\n<p><code>imageMode(CENTER)</code> uses the first two parameters of\n<a href=\"#/p5/image\">image()</a> as the x- and y-coordinates of the image's\ncenter. The next parameters are its width and height.</p>\n",
- "itemtype": "method",
- "name": "imageMode",
- "params": [
+ "overloads": [
{
- "name": "mode",
- "description": "<p>either CORNER, CORNERS, or CENTER.</p>\n",
- "type": "Constant"
+ "params": [
+ {
+ "name": "name",
+ "description": "name of the file to create.",
+ "type": "String"
+ },
+ {
+ "name": "extension",
+ "description": "format to use for the file.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "stream for writing data.",
+ "type": "p5.PrintWriter"
+ }
}
],
- "example": [
- "\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use CORNER mode.\n imageMode(CORNER);\n\n // Display the image.\n image(img, 10, 10, 50, 50);\n\n describe('A square image of a brick wall is drawn at the top left of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use CORNERS mode.\n imageMode(CORNERS);\n\n // Display the image.\n image(img, 10, 10, 90, 40);\n\n describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use CENTER mode.\n imageMode(CENTER);\n\n // Display the image.\n image(img, 50, 50, 80, 80);\n\n describe('A square image of a brick wall is drawn on a gray square.');\n}\n</code>\n</div>"
- ],
+ "return": {
+ "description": "stream for writing data.",
+ "type": "p5.PrintWriter"
+ },
"class": "p5",
- "module": "Image",
- "submodule": "Loading & Displaying"
- },
- {
- "file": "src/image/p5.Image.js",
- "line": 9,
- "description": "<p>This module defines the <a href=\"#/p5.Image\">p5.Image</a> class and P5 methods for\ndrawing images to the main display canvas.</p>\n",
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/image/p5.Image.js",
- "line": 114,
- "description": "<p>The image's width in pixels.</p>\n",
- "type": "{Number}",
- "itemtype": "property",
- "name": "width",
- "readonly": "",
+ "name": "write",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 1425,
+ "itemtype": "method",
+ "description": "<p>Writes data to the print stream without adding new lines.</p>\n<p>The parameter, <code>data</code>, is the data to write. <code>data</code> can be a number or\nstring, as in <code>myWriter.write('hi')</code>, or an array of numbers and strings,\nas in <code>myWriter.write([1, 2, 3])</code>. A comma will be inserted between array\narray elements when they're added to the print stream.</p>\n",
"example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Calculate the center coordinates.\n let x = img.width / 2;\n let y = img.height / 2;\n\n // Draw a circle at the image's center.\n circle(x, y, 20);\n\n describe('An image of a mountain landscape with a white circle drawn in the middle.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('numbers.txt');\n\n // Add some data to the print stream.\n myWriter.write('1,2,3,');\n myWriter.write(['4', '5', '6']);\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n</code>\n</div>"
],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
- },
- {
- "file": "src/image/p5.Image.js",
- "line": 151,
- "description": "<p>The image's height in pixels.</p>\n",
- "type": "{Number}",
- "itemtype": "property",
- "name": "height",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Calculate the center coordinates.\n let x = img.width / 2;\n let y = img.height / 2;\n\n // Draw a circle at the image's center.\n circle(x, y, 20);\n\n describe('An image of a mountain landscape with a white circle drawn in the middle.');\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "data",
+ "description": "data to be written as a string, number,\nor array of strings and numbers.",
+ "type": "String|Number|Array"
+ }
+ ]
+ }
],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/image/p5.Image.js",
- "line": 198,
- "description": "<p>An array containing the color of each pixel in the image.</p>\n<p>Colors are stored as numbers representing red, green, blue, and alpha\n(RGBA) values. <code>img.pixels</code> is a one-dimensional array for performance\nreasons.</p>\n<p>Each pixel occupies four elements in the pixels array, one for each\nRGBA value. For example, the pixel at coordinates (0, 0) stores its\nRGBA values at <code>img.pixels[0]</code>, <code>img.pixels[1]</code>, <code>img.pixels[2]</code>,\nand <code>img.pixels[3]</code>, respectively. The next pixel at coordinates (1, 0)\nstores its RGBA values at <code>img.pixels[4]</code>, <code>img.pixels[5]</code>,\n<code>img.pixels[6]</code>, and <code>img.pixels[7]</code>. And so on. The <code>img.pixels</code> array\nfor a 100×100 <a href=\"#/p5.Image\">p5.Image</a> object has\n100 × 100 × 4 = 40,000 elements.</p>\n<p>Accessing the RGBA values for a pixel in the image requires a little\nmath as shown in the examples below. The\n<a href=\"#/p5.Image/loadPixels\">img.loadPixels()</a>\nmethod must be called before accessing the <code>img.pixels</code> array. The\n<a href=\"#/p5.Image/updatePixels\">img.updatePixels()</a> method must be\ncalled after any changes are made.</p>\n",
- "itemtype": "property",
- "name": "pixels",
- "type": "Number[]",
+ "name": "close",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 1566,
+ "itemtype": "method",
+ "description": "Saves the file and closes the print stream.",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to red.\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 255;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A red square drawn in the middle of a gray square.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('cat.txt');\n\n // Add some data to the print stream.\n // ASCII art courtesy Wikipedia:\n // https://en.wikipedia.org/wiki/ASCII_art\n myWriter.print(' (\\\\_/) ');\n myWriter.print(\"(='.'=)\");\n myWriter.print('(\")_(\")');\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n</code>\n</div>"
],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/image/p5.Image.js",
- "line": 299,
- "description": "<p>Gets or sets the pixel density for high pixel density displays.</p>\n<p>By default, the density will be set to 1.</p>\n<p>Call this method with no arguments to get the default density, or pass\nin a number to set the density. If a non-positive number is provided,\nit defaults to 1.</p>\n",
+ "name": "save",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 1688,
"itemtype": "method",
- "name": "pixelDensity",
- "params": [
+ "description": "Saves a given element(image, text, json, csv, wav, or html) to the client's\ncomputer. The first parameter can be a pointer to element we want to save.\nThe element can be one of <a href=\"#/p5.Element\">p5.Element</a>,an Array of\nStrings, an Array of JSON, a JSON object, a <a href=\"#/p5.Table\">p5.Table\n</a>, a <a href=\"#/p5.Image\">p5.Image</a>, or a p5.SoundFile (requires\np5.sound). The second parameter is a filename (including extension).The\nthird parameter is for options specific to this type of object. This method\nwill save a file that fits the given parameters.\nIf it is called without specifying an element, by default it will save the\nwhole canvas as an image file. You can optionally specify a filename as\nthe first parameter in such a case.\nNote that it is not recommended to\ncall this method within draw, as it will open a new save dialog on every\nrender.",
+ "example": [
+ "<div class=\"norender\"><code>\n// Saves the canvas as an image\ncnv = createCanvas(300, 300);\nsave(cnv, 'myCanvas.jpg');\n\n// Saves the canvas as an image by default\nsave('myCanvas.jpg');\ndescribe('An example for saving a canvas as an image.');\n</code></div>\n\n<div class=\"norender\"><code>\n// Saves p5.Image as an image\nimg = createImage(10, 10);\nsave(img, 'myImage.png');\ndescribe('An example for saving a p5.Image element as an image.');\n</code></div>\n\n<div class=\"norender\"><code>\n// Saves p5.Renderer object as an image\nobj = createGraphics(100, 100);\nsave(obj, 'myObject.png');\ndescribe('An example for saving a p5.Renderer element.');\n</code></div>\n\n<div class=\"norender\"><code>\nlet myTable = new p5.Table();\n// Saves table as html file\nsave(myTable, 'myTable.html');\n\n// Comma Separated Values\nsave(myTable, 'myTable.csv');\n\n// Tab Separated Values\nsave(myTable, 'myTable.tsv');\n\ndescribe(`An example showing how to save a table in formats of\n HTML, CSV and TSV.`);\n</code></div>\n\n<div class=\"norender\"><code>\nlet myJSON = { a: 1, b: true };\n\n// Saves pretty JSON\nsave(myJSON, 'my.json');\n\n// Optimizes JSON filesize\nsave(myJSON, 'my.json', true);\n\ndescribe('An example for saving JSON to a txt file with some extra arguments.');\n</code></div>\n\n<div class=\"norender\"><code>\n// Saves array of strings to text file with line breaks after each item\nlet arrayOfStrings = ['a', 'b'];\nsave(arrayOfStrings, 'my.txt');\ndescribe(`An example for saving an array of strings to text file\n with line breaks.`);\n</code></div>"
+ ],
+ "overloads": [
{
- "name": "density",
- "description": "<p>A scaling factor for the number of pixels per\nside</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "objectOrFilename",
+ "description": "If filename is provided, will\nsave canvas as an image with\neither png or jpg extension\ndepending on the filename.\nIf object is provided, will\nsave depending on the object\nand filename (see examples\nabove).",
+ "optional": 1,
+ "type": "Object|String"
+ },
+ {
+ "name": "filename",
+ "description": "If an object is provided as the first\nparameter, then the second parameter\nindicates the filename,\nand should include an appropriate\nfile extension (see examples above).",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "options",
+ "description": "Additional options depend on\nfiletype. For example, when saving JSON,\n<code>true</code> indicates that the\noutput will be optimized for filesize,\nrather than readability.",
+ "optional": 1,
+ "type": "Boolean|String"
+ }
+ ]
}
],
- "return": {
- "description": "The current density if called without arguments, or the instance for chaining if setting density.",
- "type": "Number"
- },
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
- },
- {
- "file": "src/image/p5.Image.js",
- "line": 342,
- "description": "<p>Helper function for animating GIF-based images with time</p>\n",
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
- },
- {
- "file": "src/image/p5.Image.js",
- "line": 373,
- "description": "<p>Helper fxn for sharing pixel methods</p>\n",
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/image/p5.Image.js",
- "line": 381,
- "description": "<p>Loads the current value of each pixel in the image into the <code>img.pixels</code>\narray.</p>\n<p><code>img.loadPixels()</code> must be called before reading or modifying pixel\nvalues.</p>\n",
+ "name": "saveJSON",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 1863,
"itemtype": "method",
- "name": "loadPixels",
+ "description": "<p>Saves an <code>Object</code> or <code>Array</code> to a JSON file.</p>\n<p>JavaScript Object Notation\n(<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/JSON\" target=\"_blank\">JSON</a>)\nis a standard format for sending data between applications. The format is\nbased on JavaScript objects which have keys and values. JSON files store\ndata in an object with strings as keys. Values can be strings, numbers,\nBooleans, arrays, <code>null</code>, or other objects.</p>\n<p>The first parameter, <code>json</code>, is the data to save. The data can be an array,\nas in <code>[1, 2, 3]</code>, or an object, as in\n<code>{ x: 50, y: 50, color: 'deeppink' }</code>.</p>\n<p>The second parameter, <code>filename</code>, is a string that sets the file's name.\nFor example, calling <code>saveJSON([1, 2, 3], 'data.json')</code> saves the array\n<code>[1, 2, 3]</code> to a file called <code>data.json</code> on the user's computer.</p>\n<p>The third parameter, <code>optimize</code>, is optional. If <code>true</code> is passed, as in\n<code>saveJSON([1, 2, 3], 'data.json', true)</code>, then all unneeded whitespace will\nbe removed to reduce the file size.</p>\n<p>Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an array.\n let data = [1, 2, 3];\n\n // Save the JSON file.\n saveJSON(data, 'numbers.json');\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an object.\n let data = { x: mouseX, y: mouseY };\n\n // Save the JSON file.\n saveJSON(data, 'state.json');\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an object.\n let data = { x: mouseX, y: mouseY };\n\n // Save the JSON file and reduce its size.\n saveJSON(data, 'state.json', true);\n }\n}\n</code>\n</div>"
],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "json",
+ "description": "data to save.",
+ "type": "Array|Object"
+ },
+ {
+ "name": "filename",
+ "description": "name of the file to be saved.",
+ "type": "String"
+ },
+ {
+ "name": "optimize",
+ "description": "whether to trim unneeded whitespace. Defaults\nto <code>true</code>.",
+ "optional": 1,
+ "type": "Boolean"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/image/p5.Image.js",
- "line": 462,
- "description": "<p>Updates the canvas with the RGBA values in the\n<a href=\"#/p5.Image/pixels\">img.pixels</a> array.</p>\n<p><code>img.updatePixels()</code> only needs to be called after changing values in\nthe <a href=\"#/p5.Image/pixels\">img.pixels</a> array. Such changes can be\nmade directly after calling\n<a href=\"#/p5.Image/loadPixels\">img.loadPixels()</a> or by calling\n<a href=\"#/p5.Image/set\">img.set()</a>.</p>\n<p>The optional parameters <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code> define a\nsubsection of the image to update. Doing so can improve performance in\nsome cases.</p>\n<p>If the image was loaded from a GIF, then calling <code>img.updatePixels()</code>\nwill update the pixels in current frame.</p>\n",
+ "name": "saveStrings",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 2007,
"itemtype": "method",
- "name": "updatePixels",
+ "description": "<p>Saves an <code>Array</code> of <code>String</code>s to a file, one per line.</p>\n<p>The first parameter, <code>list</code>, is an array with the strings to save.</p>\n<p>The second parameter, <code>filename</code>, is a string that sets the file's name.\nFor example, calling <code>saveStrings(['0', '01', '011'], 'data.txt')</code> saves\nthe array <code>['0', '01', '011']</code> to a file called <code>data.txt</code> on the user's\ncomputer.</p>\n<p>The third parameter, <code>extension</code>, is optional. If a string is passed, as in\n<code>saveStrings(['0', '01', '0</code>1'], 'data', 'txt')`, the second parameter will\nbe interpreted as the file name and the third parameter as the extension.</p>\n<p>The fourth parameter, <code>isCRLF</code>, is also optional, If <code>true</code> is passed, as\nin <code>saveStrings(['0', '01', '011'], 'data', 'txt', true)</code>, then two\ncharacters, <code>\\r\\n</code> , will be added to the end of each string to create new\nlines in the saved file. <code>\\r</code> is a carriage return (CR) and <code>\\n</code> is a line\nfeed (LF). By default, only <code>\\n</code> (line feed) is added to each string in\norder to create new lines.</p>\n<p>Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an array.\n let data = ['0', '01', '011'];\n\n // Save the text file.\n saveStrings(data, 'data.txt');\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an array.\n // ASCII art courtesy Wikipedia:\n // https://en.wikipedia.org/wiki/ASCII_art\n let data = [' (\\\\_/) ', \"(='.'=)\", '(\")_(\")'];\n\n // Save the text file.\n saveStrings(data, 'cat', 'txt');\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an array.\n // +--+\n // / /|\n // +--+ +\n // | |/\n // +--+\n let data = [' +--+', ' / /|', '+--+ +', '| |/', '+--+'];\n\n // Save the text file.\n // Use CRLF for line endings.\n saveStrings(data, 'box', 'txt', true);\n }\n}\n</code>\n</div>"
],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image",
"overloads": [
{
- "line": 462,
"params": [
{
- "name": "x",
- "description": "<p>x-coordinate of the upper-left corner\n of the subsection to update.</p>\n",
- "type": "Integer"
+ "name": "list",
+ "description": "data to save.",
+ "type": "String[]"
},
{
- "name": "y",
- "description": "<p>y-coordinate of the upper-left corner\n of the subsection to update.</p>\n",
- "type": "Integer"
+ "name": "filename",
+ "description": "name of file to be saved.",
+ "type": "String"
},
{
- "name": "w",
- "description": "<p>width of the subsection to update.</p>\n",
- "type": "Integer"
+ "name": "extension",
+ "description": "format to use for the file.",
+ "optional": 1,
+ "type": "String"
},
{
- "name": "h",
- "description": "<p>height of the subsection to update.</p>\n",
- "type": "Integer"
+ "name": "isCRLF",
+ "description": "whether to add <code>\\r\\n</code> to the end of each\nstring. Defaults to <code>false</code>.",
+ "optional": 1,
+ "type": "Boolean"
}
]
- },
- {
- "line": 555,
- "params": []
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "src/image/p5.Image.js",
- "line": 563,
- "description": "<p>Gets a pixel or a region of pixels from the image.</p>\n<p><code>img.get()</code> is easy to use but it's not as fast as\n<a href=\"#/p5.Image/pixels\">img.pixels</a>. Use\n<a href=\"#/p5.Image/pixels\">img.pixels</a> to read many pixel values.</p>\n<p>The version of <code>img.get()</code> with no parameters returns the entire image.</p>\n<p>The version of <code>img.get()</code> with two parameters, as in <code>img.get(10, 20)</code>,\ninterprets them as coordinates. It returns an array with the\n<code>[R, G, B, A]</code> values of the pixel at the given point.</p>\n<p>The version of <code>img.get()</code> with four parameters, as in\n<code>img,get(10, 20, 50, 90)</code>, interprets them as\ncoordinates and dimensions. The first two parameters are the coordinates\nof the upper-left corner of the subsection. The last two parameters are\nthe width and height of the subsection. It returns a subsection of the\ncanvas in a new <a href=\"#/p5.Image\">p5.Image</a> object.</p>\n<p>Use <code>img.get()</code> instead of <a href=\"#/p5/get\">get()</a> to work directly\nwith images.</p>\n",
+ "name": "saveTable",
+ "file": "src/scripts/parsers/in/p5.js/src/io/files.js",
+ "line": 2070,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "get",
- "return": {
- "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
- "type": "p5.Image"
- },
+ "description": "Writes the contents of a <a href=\"#/p5.Table\">Table</a> object to a file. Defaults to a\ntext file with comma-separated-values ('csv') but can also\nuse tab separation ('tsv'), or generate an HTML table ('html').\nThe file saving process and location of the saved file will\nvary between web browsers.",
"example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy the image.\n let img2 = get();\n\n // Display the copied image on the right.\n image(img2, 50, 0);\n\n describe('Two identical mountain landscapes shown side-by-side.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get a pixel's color.\n let c = img.get(50, 90);\n\n // Style the square using the pixel's color.\n fill(c);\n noStroke();\n\n // Draw the square.\n square(25, 25, 50);\n\n describe('A mountain landscape with an olive green square in its center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy half of the image.\n let img2 = img.get(0, 0, img.width / 2, img.height / 2);\n\n // Display half of the image.\n image(img2, 50, 50);\n\n describe('A mountain landscape drawn on top of another mountain landscape.');\n}\n</code>\n</div>"
+ "<div><code>\nlet table;\n\nfunction setup() {\n table = new p5.Table();\n\n table.addColumn('id');\n table.addColumn('species');\n table.addColumn('name');\n\n let newRow = table.addRow();\n newRow.setNum('id', table.getRowCount() - 1);\n newRow.setString('species', 'Panthera leo');\n newRow.setString('name', 'Lion');\n\n // To save, un-comment next line then click 'run'\n // saveTable(table, 'new.csv');\n\n describe('no image displayed');\n}\n\n// Saves the following to a file called 'new.csv':\n// id,species,name\n// 0,Panthera leo,Lion\n</code></div>"
],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image",
"overloads": [
{
- "line": 563,
"params": [
{
- "name": "x",
- "description": "<p>x-coordinate of the pixel.</p>\n",
- "type": "Number"
+ "name": "Table",
+ "description": "the <a href=\"#/p5.Table\">Table</a> object to save to a file",
+ "type": "p5.Table"
},
{
- "name": "y",
- "description": "<p>y-coordinate of the pixel.</p>\n",
- "type": "Number"
+ "name": "filename",
+ "description": "the filename to which the Table should be saved",
+ "type": "String"
},
{
- "name": "w",
- "description": "<p>width of the subsection to be returned.</p>\n",
- "type": "Number"
- },
+ "name": "options",
+ "description": "can be one of \"tsv\", \"csv\", or \"html\"",
+ "optional": 1,
+ "type": "String"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
+ },
+ {
+ "name": "abs",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 45,
+ "itemtype": "method",
+ "description": "<p>Calculates the absolute value of a number.</p>\n<p>A number's absolute value is its distance from zero on the number line.\n-5 and 5 are both five units away from zero, so calling <code>abs(-5)</code> and\n<code>abs(5)</code> both return 5. The absolute value of a number is always positive.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square with a vertical black line that divides it in half. A white rectangle gets taller when the user moves the mouse away from the line.');\n}\n\nfunction draw() {\n background(200);\n\n // Divide the canvas.\n line(50, 0, 50, 100);\n\n // Calculate the mouse's distance from the middle.\n let h = abs(mouseX - 50);\n\n // Draw a rectangle based on the mouse's distance\n // from the middle.\n rect(0, 100 - h, 100, h);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
{
- "name": "h",
- "description": "<p>height of the subsection to be returned.</p>\n",
+ "name": "n",
+ "description": "number to compute.",
"type": "Number"
}
],
"return": {
- "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
- "type": "p5.Image"
- }
- },
- {
- "line": 678,
- "params": [],
- "return": {
- "description": "whole <a href=\"#/p5.Image\">p5.Image</a>",
- "type": "p5.Image"
+ "description": "absolute value of given number.",
+ "type": "Number"
}
- },
+ }
+ ],
+ "return": {
+ "description": "absolute value of given number.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
+ },
+ {
+ "name": "ceil",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 88,
+ "itemtype": "method",
+ "description": "<p>Calculates the closest integer value that is greater than or equal to a\nnumber.</p>\n<p>For example, calling <code>ceil(9.03)</code> and <code>ceil(9.97)</code> both return the value\n10.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n noStroke();\n\n // Draw the left rectangle.\n let r = 0.3;\n fill(r, 0, 0);\n rect(0, 0, 50, 100);\n\n // Round r up to 1.\n r = ceil(r);\n\n // Draw the right rectangle.\n fill(r, 0, 0);\n rect(50, 0, 50, 100);\n\n describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 682,
"params": [
{
- "name": "x",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "",
+ "name": "n",
+ "description": "number to round up.",
"type": "Number"
}
],
"return": {
- "description": "color of the pixel at (x, y) in array format `[R, G, B, A]`.",
- "type": "Number[]"
+ "description": "rounded up number.",
+ "type": "Integer"
}
}
- ]
- },
- {
- "file": "src/image/p5.Image.js",
- "line": 697,
- "description": "<p>Sets the color of one or more pixels within an image.</p>\n<p><code>img.set()</code> is easy to use but it's not as fast as\n<a href=\"#/p5.Image/pixels\">img.pixels</a>. Use\n<a href=\"#/p5.Image/pixels\">img.pixels</a> to set many pixel values.</p>\n<p><code>img.set()</code> interprets the first two parameters as x- and y-coordinates. It\ninterprets the last parameter as a grayscale value, a <code>[R, G, B, A]</code> pixel\narray, a <a href=\"#/p5.Color\">p5.Color</a> object, or another\n<a href=\"#/p5.Image\">p5.Image</a> object.</p>\n<p><a href=\"#/p5.Image/updatePixels\">img.updatePixels()</a> must be called\nafter using <code>img.set()</code> for changes to appear.</p>\n",
- "itemtype": "method",
- "name": "set",
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate of the pixel.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the pixel.</p>\n",
- "type": "Number"
- },
- {
- "name": "a",
- "description": "<p>grayscale value | pixel array |\n <a href=\"#/p5.Color\">p5.Color</a> object |\n <a href=\"#/p5.Image\">p5.Image</a> to copy.</p>\n",
- "type": "Number|Number[]|Object"
- }
- ],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Set four pixels to black.\n img.set(30, 20, 0);\n img.set(85, 20, 0);\n img.set(85, 75, 0);\n img.set(30, 75, 0);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Create a p5.Color object.\n let black = color(0);\n\n // Set four pixels to black.\n img.set(30, 20, black);\n img.set(85, 20, black);\n img.set(85, 75, black);\n img.set(30, 75, black);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Draw a color gradient.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n let c = map(x, 0, img.width, 0, 255);\n img.set(x, y, c);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A square with a horiztonal color gradient from black to white drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Image object.\n let img2 = createImage(100, 100);\n\n // Set the blank image's pixels using the landscape.\n img2.set(0, 0, img);\n\n // Display the second image.\n image(img2, 0, 0);\n\n describe('An image of a mountain landscape.');\n}\n</code>\n</div>"
],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
+ "return": {
+ "description": "rounded up number.",
+ "type": "Integer"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/image/p5.Image.js",
- "line": 837,
- "description": "<p>Resizes the image to a given width and height.</p>\n<p>The image's original aspect ratio can be kept by passing 0 for either\n<code>width</code> or <code>height</code>. For example, calling <code>img.resize(50, 0)</code> on an image\nthat was 500 × 300 pixels will resize it to 50 × 30 pixels.</p>\n",
+ "name": "constrain",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 149,
"itemtype": "method",
- "name": "resize",
- "params": [
- {
- "name": "width",
- "description": "<p>resized image width.</p>\n",
- "type": "Number"
- },
+ "description": "Constrains a number between a minimum and maximum value.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n let x = constrain(mouseX, 33, 67);\n let y = 50;\n\n strokeWeight(5);\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');\n}\n\nfunction draw() {\n background(200);\n\n // Set boundaries and draw them.\n let leftWall = 25;\n let rightWall = 75;\n line(leftWall, 0, leftWall, 100);\n line(rightWall, 0, rightWall, 100);\n\n // Draw a circle that follows the mouse freely.\n fill(255);\n circle(mouseX, 33, 9);\n\n // Draw a circle that's constrained.\n let xc = constrain(mouseX, leftWall, rightWall);\n fill(0);\n circle(xc, 67, 9);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "height",
- "description": "<p>resized image height.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "n",
+ "description": "number to constrain.",
+ "type": "Number"
+ },
+ {
+ "name": "low",
+ "description": "minimum limit.",
+ "type": "Number"
+ },
+ {
+ "name": "high",
+ "description": "maximum limit.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "constrained number.",
+ "type": "Number"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image.\n img.resize(50, 100);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(0, 30);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(60, 0);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
+ "return": {
+ "description": "constrained number.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/image/p5.Image.js",
- "line": 1006,
- "description": "<p>Copies pixels from a source image to this image.</p>\n<p>The first parameter, <code>srcImage</code>, is an optional\n<a href=\"#/p5.Image\">p5.Image</a> object to copy. If a source image isn't\npassed, then <code>img.copy()</code> can copy a region of this image to another\nregion.</p>\n<p>The next four parameters, <code>sx</code>, <code>sy</code>, <code>sw</code>, and <code>sh</code> determine the region\nto copy from the source image. <code>(sx, sy)</code> is the top-left corner of the\nregion. <code>sw</code> and <code>sh</code> are the region's width and height.</p>\n<p>The next four parameters, <code>dx</code>, <code>dy</code>, <code>dw</code>, and <code>dh</code> determine the region\nof this image to copy into. <code>(dx, dy)</code> is the top-left corner of the\nregion. <code>dw</code> and <code>dh</code> are the region's width and height.</p>\n<p>Calling <code>img.copy()</code> will scale pixels from the source region if it isn't\nthe same size as the destination region.</p>\n",
+ "name": "dist",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 1690,
"itemtype": "method",
- "name": "copy",
+ "description": "<p>Calculates the distance between two points.</p>\n<p>The version of <code>dist()</code> with four parameters calculates distance in two\ndimensions.</p>\n<p>The version of <code>dist()</code> with six parameters calculates distance in three\ndimensions.</p>\n<p>Use <a href=\"#/p5.Vector/dist\">p5.Vector.dist()</a> to calculate the\ndistance between two <a href=\"#/p5.Vector\">p5.Vector</a> objects.</p>\n",
"example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Copy one region of the image to another.\n img.copy(7, 22, 10, 10, 35, 25, 50, 50);\n\n // Display the image.\n image(img, 0, 0);\n\n // Outline the copied region.\n stroke(255);\n noFill();\n square(7, 22, 10);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\n// Load the images.\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Calculate the center of the bricks image.\n let x = bricks.width / 2;\n let y = bricks.height / 2;\n\n // Copy the bricks to the mountains image.\n mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates.\n let x1 = 10;\n let y1 = 50;\n let x2 = 90;\n let y2 = 50;\n\n // Draw the points and a line connecting them.\n line(x1, y1, x2, y2);\n strokeWeight(5);\n point(x1, y1);\n point(x2, y2);\n\n // Calculate the distance.\n let d = dist(x1, y1, x2, y2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the distance.\n text(d, 43, 40);\n\n describe('Two dots connected by a horizontal line. The number 80 is written above the center of the line.');\n}\n</code>\n</div>",
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the distance between them.\n let d = v1.dist(v2);\n\n // Prints \"1.414...\" to the console.\n print(d);\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the distance between them.\n let d = p5.Vector.dist(v1, v2);\n\n // Prints \"1.414...\" to the console.\n print(d);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(20, 70);\n drawArrow(origin, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.sub(v2, v1);\n drawArrow(v1, v3, 'purple');\n\n // Style the text.\n textAlign(CENTER);\n\n // Display the magnitude. The same as floor(v3.mag());\n let m = floor(p5.Vector.dist(v1, v2));\n text(m, 50, 75);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image",
"overloads": [
{
- "line": 1006,
"params": [
{
- "name": "srcImage",
- "description": "<p>source image.</p>\n",
- "type": "p5.Image|p5.Element"
- },
- {
- "name": "sx",
- "description": "<p>x-coordinate of the source's upper-left corner.</p>\n",
- "type": "Integer"
- },
- {
- "name": "sy",
- "description": "<p>y-coordinate of the source's upper-left corner.</p>\n",
- "type": "Integer"
- },
- {
- "name": "sw",
- "description": "<p>source image width.</p>\n",
- "type": "Integer"
- },
- {
- "name": "sh",
- "description": "<p>source image height.</p>\n",
- "type": "Integer"
- },
- {
- "name": "dx",
- "description": "<p>x-coordinate of the destination's upper-left corner.</p>\n",
- "type": "Integer"
+ "name": "x1",
+ "description": "x-coordinate of the first point.",
+ "type": "Number"
},
{
- "name": "dy",
- "description": "<p>y-coordinate of the destination's upper-left corner.</p>\n",
- "type": "Integer"
+ "name": "y1",
+ "description": "y-coordinate of the first point.",
+ "type": "Number"
},
{
- "name": "dw",
- "description": "<p>destination image width.</p>\n",
- "type": "Integer"
+ "name": "x2",
+ "description": "x-coordinate of the second point.",
+ "type": "Number"
},
{
- "name": "dh",
- "description": "<p>destination image height.</p>\n",
- "type": "Integer"
+ "name": "y2",
+ "description": "y-coordinate of the second point.",
+ "type": "Number"
}
- ]
+ ],
+ "return": {
+ "description": "distance between the two points.",
+ "type": "Number"
+ }
},
{
- "line": 1094,
"params": [
{
- "name": "sx",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "sy",
- "description": "",
- "type": "Integer"
+ "name": "x1",
+ "type": "Number"
},
{
- "name": "sw",
- "description": "",
- "type": "Integer"
+ "name": "y1",
+ "type": "Number"
},
{
- "name": "sh",
- "description": "",
- "type": "Integer"
+ "name": "z1",
+ "description": "z-coordinate of the first point.",
+ "type": "Number"
},
{
- "name": "dx",
- "description": "",
- "type": "Integer"
+ "name": "x2",
+ "type": "Number"
},
{
- "name": "dy",
- "description": "",
- "type": "Integer"
+ "name": "y2",
+ "type": "Number"
},
{
- "name": "dw",
- "description": "",
- "type": "Integer"
- },
+ "name": "z2",
+ "description": "z-coordinate of the second point.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "distance between the two points.",
+ "type": "Number"
+ }
+ },
+ {
+ "params": [
{
- "name": "dh",
- "description": "",
- "type": "Integer"
+ "name": "v",
+ "description": "x, y, and z coordinates of a <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
}
- ]
+ ],
+ "return": {
+ "description": "distance.",
+ "type": "Number"
+ }
}
- ]
+ ],
+ "return": {
+ "description": "distance between the two points.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math"
},
{
- "file": "src/image/p5.Image.js",
- "line": 1109,
- "description": "<p>Masks part of the image with another.</p>\n<p><code>img.mask()</code> uses another <a href=\"#/p5.Image\">p5.Image</a> object's\nalpha channel as the alpha channel for this image. Masks are cumulative\nand can't be removed once applied. If the mask has a different\npixel density from this image, the mask will be scaled.</p>\n",
+ "name": "exp",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 293,
"itemtype": "method",
- "name": "mask",
- "params": [
+ "description": "Calculates the value of Euler's number e (2.71828...) raised to the power\nof a number.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = exp(1);\n circle(10, 10, d);\n\n // Left-center.\n d = exp(2);\n circle(20, 20, d);\n\n // Right-center.\n d = exp(3);\n circle(40, 40, d);\n\n // Bottom-right.\n d = exp(4);\n circle(80, 80, d);\n\n describe('A series of circles that grow exponentially from top left to bottom right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that grow exponentially from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 0.005 * exp(x * 0.1);\n\n // Draw a point.\n point(x, y);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "srcImage",
- "description": "<p>source image.</p>\n",
- "type": "p5.Image"
+ "params": [
+ {
+ "name": "n",
+ "description": "exponent to raise.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "e^n",
+ "type": "Number"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nlet photo;\nlet maskImage;\n\n// Load the images.\nfunction preload() {\n photo = loadImage('assets/rockies.jpg');\n maskImage = loadImage('assets/mask2.png');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the mask.\n photo.mask(maskImage);\n\n // Display the image.\n image(photo, 0, 0);\n\n describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
+ "return": {
+ "description": "e^n",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/image/p5.Image.js",
- "line": 1199,
- "description": "<p>Applies an image filter to the image.</p>\n<p>The preset options are:</p>\n<p><code>INVERT</code>\nInverts the colors in the image. No parameter is used.</p>\n<p><code>GRAY</code>\nConverts the image to grayscale. No parameter is used.</p>\n<p><code>THRESHOLD</code>\nConverts the image to black and white. Pixels with a grayscale value\nabove a given threshold are converted to white. The rest are converted to\nblack. The threshold must be between 0.0 (black) and 1.0 (white). If no\nvalue is specified, 0.5 is used.</p>\n<p><code>OPAQUE</code>\nSets the alpha channel to be entirely opaque. No parameter is used.</p>\n<p><code>POSTERIZE</code>\nLimits the number of colors in the image. Each color channel is limited to\nthe number of colors specified. Values between 2 and 255 are valid, but\nresults are most noticeable with lower values. The default value is 4.</p>\n<p><code>BLUR</code>\nBlurs the image. The level of blurring is specified by a blur radius. Larger\nvalues increase the blur. The default value is 4. A gaussian blur is used\nin <code>P2D</code> mode. A box blur is used in <code>WEBGL</code> mode.</p>\n<p><code>ERODE</code>\nReduces the light areas. No parameter is used.</p>\n<p><code>DILATE</code>\nIncreases the light areas. No parameter is used.</p>\n",
+ "name": "floor",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 331,
"itemtype": "method",
- "name": "filter",
- "params": [
- {
- "name": "filterType",
- "description": "<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, ERODE, DILATE or BLUR.</p>\n",
- "type": "Constant"
- },
+ "description": "Calculates the closest integer value that is less than or equal to the\nvalue of a number.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n noStroke();\n\n // Draw the left rectangle.\n let r = 0.8;\n fill(r, 0, 0);\n rect(0, 0, 50, 100);\n\n // Round r down to 0.\n r = floor(r);\n\n // Draw the right rectangle.\n fill(r, 0, 0);\n rect(50, 0, 50, 100);\n\n describe('Two rectangles. The one on the left is bright red and the one on the right is black.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "filterParam",
- "description": "<p>parameter unique to each filter.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "n",
+ "description": "number to round down.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "rounded down number.",
+ "type": "Integer"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the INVERT filter.\n img.filter(INVERT);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blue brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the GRAY filter.\n img.filter(GRAY);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in grayscale.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the THRESHOLD filter.\n img.filter(THRESHOLD);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in black and white.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the OPAQUE filter.\n img.filter(OPAQUE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the POSTERIZE filter.\n img.filter(POSTERIZE, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a red brick wall drawn with a limited color palette.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the BLUR filter.\n img.filter(BLUR, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blurry image of a red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the DILATE filter.\n img.filter(DILATE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with bright lines between each brick.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Apply the ERODE filter.\n img.filter(ERODE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with faint lines between each brick.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
+ "return": {
+ "description": "rounded down number.",
+ "type": "Integer"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/image/p5.Image.js",
- "line": 1430,
- "description": "<p>Copies a region of pixels from another image into this one.</p>\n<p>The first parameter, <code>srcImage</code>, is the\n<a href=\"#/p5.Image\">p5.Image</a> object to blend.</p>\n<p>The next four parameters, <code>sx</code>, <code>sy</code>, <code>sw</code>, and <code>sh</code> determine the region\nto blend from the source image. <code>(sx, sy)</code> is the top-left corner of the\nregion. <code>sw</code> and <code>sh</code> are the regions width and height.</p>\n<p>The next four parameters, <code>dx</code>, <code>dy</code>, <code>dw</code>, and <code>dh</code> determine the region\nof the canvas to blend into. <code>(dx, dy)</code> is the top-left corner of the\nregion. <code>dw</code> and <code>dh</code> are the regions width and height.</p>\n<p>The tenth parameter, <code>blendMode</code>, sets the effect used to blend the images'\ncolors. The options are <code>BLEND</code>, <code>DARKEST</code>, <code>LIGHTEST</code>, <code>DIFFERENCE</code>,\n<code>MULTIPLY</code>, <code>EXCLUSION</code>, <code>SCREEN</code>, <code>REPLACE</code>, <code>OVERLAY</code>, <code>HARD_LIGHT</code>,\n<code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>, <code>ADD</code>, or <code>NORMAL</code>.</p>\n",
+ "name": "lerp",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 419,
"itemtype": "method",
- "name": "blend",
+ "description": "<p>Calculates a number between two numbers at a specific increment.</p>\n<p>The <code>amt</code> parameter is the amount to interpolate between the two numbers.\n0.0 is equal to the first number, 0.1 is very near the first number, 0.5 is\nhalf-way in between, and 1.0 is equal to the second number. The <code>lerp()</code>\nfunction is convenient for creating motion along a straight path and for\ndrawing dotted lines.</p>\n<p>If the value of <code>amt</code> is less than 0 or more than 1, <code>lerp()</code> will return a\nnumber outside of the original interval. For example, calling\n<code>lerp(0, 10, 1.5)</code> will return 15.</p>\n",
"example": [
- "\n<div>\n<code>\nlet mountains;\nlet bricks;\n\n// Load the images.\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\n// Load the images.\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\n// Load the images.\nfunction preload() {\n mountains = loadImage('assets/rockies.jpg');\n bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n 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.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Declare variables for coordinates.\n let a = 20;\n let b = 80;\n let c = lerp(a, b, 0.2);\n let d = lerp(a, b, 0.5);\n let e = lerp(a, b, 0.8);\n\n strokeWeight(5);\n\n // Draw the original points in black.\n stroke(0);\n point(a, 50);\n point(b, 50);\n\n // Draw the lerped points in gray.\n stroke(100);\n point(c, 50);\n point(d, 50);\n point(e, 50);\n\n describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 50;\nlet y = 50;\nlet targetX = 50;\nlet targetY = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A white circle at the center of a gray canvas. The circle moves to where the user clicks, then moves smoothly back to the center.');\n}\n\nfunction draw() {\n background(220);\n\n // Move x and y toward the target.\n x = lerp(x, targetX, 0.05);\n y = lerp(y, targetY, 0.05);\n\n // Draw the circle.\n circle(x, y, 20);\n}\n\n// Set x and y when the user clicks the mouse.\nfunction mouseClicked() {\n x = mouseX;\n y = mouseY;\n}\n</code>\n</div>"
],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image",
"overloads": [
{
- "line": 1430,
"params": [
{
- "name": "srcImage",
- "description": "<p>source image</p>\n",
- "type": "p5.Image"
+ "name": "start",
+ "description": "first value.",
+ "type": "Number"
},
{
- "name": "sx",
- "description": "<p>x-coordinate of the source's upper-left corner.</p>\n",
- "type": "Integer"
+ "name": "stop",
+ "description": "second value.",
+ "type": "Number"
},
{
- "name": "sy",
- "description": "<p>y-coordinate of the source's upper-left corner.</p>\n",
- "type": "Integer"
- },
- {
- "name": "sw",
- "description": "<p>source image width.</p>\n",
- "type": "Integer"
- },
- {
- "name": "sh",
- "description": "<p>source image height.</p>\n",
- "type": "Integer"
- },
- {
- "name": "dx",
- "description": "<p>x-coordinate of the destination's upper-left corner.</p>\n",
- "type": "Integer"
- },
- {
- "name": "dy",
- "description": "<p>y-coordinate of the destination's upper-left corner.</p>\n",
- "type": "Integer"
- },
- {
- "name": "dw",
- "description": "<p>destination image width.</p>\n",
- "type": "Integer"
- },
- {
- "name": "dh",
- "description": "<p>destination image height.</p>\n",
- "type": "Integer"
- },
- {
- "name": "blendMode",
- "description": "<p>the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>\n<p>Available blend modes are: normal | multiply | screen | overlay |\n darken | lighten | color-dodge | color-burn | hard-light |\n soft-light | difference | exclusion | hue | saturation |\n color | luminosity</p>\n<p><a href=\"http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/\">http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</a></p>\n",
- "type": "Constant"
- }
- ]
- },
- {
- "line": 1556,
- "params": [
- {
- "name": "sx",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "sy",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "sw",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "sh",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "dx",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "dy",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "dw",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "dh",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "blendMode",
- "description": "",
- "type": "Constant"
+ "name": "amt",
+ "description": "number.",
+ "type": "Number"
}
- ]
- }
- ]
- },
- {
- "file": "src/image/p5.Image.js",
- "line": 1600,
- "description": "<p>Saves the image to a file.</p>\n<p>By default, <code>img.save()</code> saves the image as a PNG image called\n<code>untitled.png</code>.</p>\n<p>The first parameter, <code>filename</code>, is optional. It's a string that sets the\nfile's name. If a file extension is included, as in\n<code>img.save('drawing.png')</code>, then the image will be saved using that\nformat.</p>\n<p>The second parameter, <code>extension</code>, is also optional. It sets the files format.\nEither <code>'png'</code> or <code>'jpg'</code> can be used. For example, <code>img.save('drawing', 'jpg')</code>\nsaves the canvas to a file called <code>drawing.jpg</code>.</p>\n<p>Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.</p>\n<p>The image will only be downloaded as an animated GIF if it was loaded\nfrom a GIF file. See <a href=\"#/p5/saveGif\">saveGif()</a> to create new\nGIFs.</p>\n",
- "itemtype": "method",
- "name": "save",
- "params": [
- {
- "name": "filename",
- "description": "<p>filename. Defaults to 'untitled'.</p>\n",
- "type": "String"
- },
- {
- "name": "extension",
- "description": "<p>file extension, either 'png' or 'jpg'.\n Defaults to 'png'.</p>\n",
- "type": "String",
- "optional": true
+ ],
+ "return": {
+ "description": "lerped value.",
+ "type": "Number"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a mountain landscape. The image is downloaded when the user presses the \"s\", \"j\", or \"p\" key.');\n}\n\n// Save the image with different options when the user presses a key.\nfunction keyPressed() {\n if (key === 's') {\n img.save();\n } else if (key === 'j') {\n img.save('rockies.jpg');\n } else if (key === 'p') {\n img.save('rockies', 'png');\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
- },
- {
- "file": "src/image/p5.Image.js",
- "line": 1668,
- "description": "<p>Restarts an animated GIF at its first frame.</p>\n",
- "itemtype": "method",
- "name": "reset",
- "example": [
- "\n<div>\n<code>\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Reset the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.reset();\n}\n</code>\n</div>"
- ],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
- },
- {
- "file": "src/image/p5.Image.js",
- "line": 1716,
- "description": "<p>Gets the index of the current frame in an animated GIF.</p>\n",
- "itemtype": "method",
- "name": "getCurrentFrame",
"return": {
- "description": "index of the GIF's current frame.",
+ "description": "lerped value.",
"type": "Number"
},
- "example": [
- "\n<div>\n<code>\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');\n}\n\nfunction draw() {\n // Get the index of the current GIF frame.\n let index = gif.getCurrentFrame();\n\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current frame.\n text(index, 10, 90);\n}\n</code>\n</div>"
- ],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/image/p5.Image.js",
- "line": 1758,
- "description": "<p>Sets the current frame in an animated GIF.</p>\n",
+ "name": "log",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 480,
"itemtype": "method",
- "name": "setFrame",
- "params": [
+ "description": "<p>Calculates the natural logarithm (the base-e logarithm) of a number.</p>\n<p><code>log()</code> expects the <code>n</code> parameter to be a value greater than 0 because\nthe natural logarithm is defined that way.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = log(50);\n circle(33, 33, d);\n\n // Bottom-right.\n d = log(500000000);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is about five times larger.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher slowly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate coordinates.\n let x = frameCount;\n let y = 15 * log(x);\n\n // Draw a point.\n point(x, y);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "index",
- "description": "<p>index of the frame to display.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "n",
+ "description": "number greater than 0.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "natural logarithm of n.",
+ "type": "Number"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nlet gif;\nlet frameSlider;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Get the index of the last frame.\n let maxFrame = gif.numFrames() - 1;\n\n // Create a slider to control which frame is drawn.\n frameSlider = createSlider(0, maxFrame);\n frameSlider.position(10, 80);\n frameSlider.size(80);\n\n describe('A cartoon eye looks around when a slider is moved.');\n}\n\nfunction draw() {\n // Get the slider's value.\n let index = frameSlider.value();\n\n // Set the GIF's frame.\n gif.setFrame(index);\n\n // Display the image.\n image(gif, 0, 0);\n}\n</code>\n</div>"
- ],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
- },
- {
- "file": "src/image/p5.Image.js",
- "line": 1818,
- "description": "<p>Returns the number of frames in an animated GIF.</p>\n",
- "itemtype": "method",
- "name": "numFrames",
"return": {
- "description": "number of frames in the GIF.",
+ "description": "natural logarithm of n.",
"type": "Number"
},
- "example": [
- "\n<div>\n<code>\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A cartoon eye looks around. The text \"n / 125\" is shown at the bottom of the canvas.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current state of playback.\n let total = gif.numFrames();\n let index = gif.getCurrentFrame();\n text(`${index} / ${total}`, 30, 90);\n}\n</code>\n</div>"
- ],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
- },
- {
- "file": "src/image/p5.Image.js",
- "line": 1858,
- "description": "<p>Plays an animated GIF that was paused with\n<a href=\"#/p5.Image/pause\">img.pause()</a>.</p>\n",
- "itemtype": "method",
- "name": "play",
- "example": [
- "\n<div>\n<code>\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user releases the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n</code>\n</div>"
- ],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/image/p5.Image.js",
- "line": 1903,
- "description": "<p>Pauses an animated GIF.</p>\n<p>The GIF can be resumed by calling\n<a href=\"#/p5.Image/play\">img.play()</a>.</p>\n",
+ "name": "mag",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 530,
"itemtype": "method",
- "name": "pause",
+ "description": "<p>Calculates the magnitude, or length, of a vector.</p>\n<p>A vector can be thought of in different ways. In one view, a vector is a\npoint in space. The vector's components, <code>x</code> and <code>y</code>, are the point's\ncoordinates <code>(x, y)</code>. A vector's magnitude is the distance from the origin\n<code>(0, 0)</code> to <code>(x, y)</code>. <code>mag(x, y)</code> is a shortcut for calling\n<code>dist(0, 0, x, y)</code>.</p>\n<p>A vector can also be thought of as an arrow pointing in space. This view is\nhelpful for programming motion. See <a href=\"#/p5.Vector\">p5.Vector</a> for\nmore details.</p>\n<p>Use <a href=\"#/p5.Vector/mag\">p5.Vector.mag()</a> to calculate the\nmagnitude of a <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n",
"example": [
- "\n<div>\n<code>\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user presses the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the vector's components.\n let x = 30;\n let y = 40;\n\n // Calculate the magnitude.\n let m = mag(x, y);\n\n // Style the text.\n textSize(16);\n\n // Display the vector and its magnitude.\n line(0, 0, x, y);\n text(m, x, y);\n\n describe('A diagonal line is drawn from the top left of the canvas. The number 50 is written at the end of the line.');\n}\n</code>\n</div>"
],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
- },
- {
- "file": "src/image/p5.Image.js",
- "line": 1952,
- "description": "<p>Changes the delay between frames in an animated GIF.</p>\n<p>The first parameter, <code>delay</code>, is the length of the delay in milliseconds.</p>\n<p>The second parameter, <code>index</code>, is optional. If provided, only the frame\nat <code>index</code> will have its delay modified. All other frames will keep\ntheir default delay.</p>\n",
- "itemtype": "method",
- "name": "delay",
- "params": [
- {
- "name": "d",
- "description": "<p>delay in milliseconds between switching frames.</p>\n",
- "type": "Number"
- },
+ "overloads": [
{
- "name": "index",
- "description": "<p>index of the frame that will have its delay modified.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "description": "first component.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "second component.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "magnitude of vector.",
+ "type": "Number"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nlet gifFast;\nlet gifSlow;\n\n// Load the images.\nfunction preload() {\n gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Resize the images.\n gifFast.resize(50, 50);\n gifSlow.resize(50, 50);\n\n // Set the delay lengths.\n gifFast.delay(10);\n gifSlow.delay(100);\n\n describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');\n}\n\nfunction draw() {\n // Display the images.\n image(gifFast, 0, 0);\n image(gifSlow, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet gif;\n\n// Load the image.\nfunction preload() {\n gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the delay of frame 67.\n gif.delay(3000, 67);\n\n describe('An animated eye looking around. It pauses for three seconds while it looks down.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n}\n</code>\n</div>"
- ],
- "class": "p5.Image",
- "module": "Image",
- "submodule": "Image"
- },
- {
- "file": "src/image/pixels.js",
- "line": 12,
- "description": "<p>An array containing the color of each pixel on the canvas.</p>\n<p>Colors are stored as numbers representing red, green, blue, and alpha\n(RGBA) values. <code>pixels</code> is a one-dimensional array for performance reasons.</p>\n<p>Each pixel occupies four elements in the <code>pixels</code> array, one for each RGBA\nvalue. For example, the pixel at coordinates (0, 0) stores its RGBA values\nat <code>pixels[0]</code>, <code>pixels[1]</code>, <code>pixels[2]</code>, and <code>pixels[3]</code>, respectively.\nThe next pixel at coordinates (1, 0) stores its RGBA values at <code>pixels[4]</code>,\n<code>pixels[5]</code>, <code>pixels[6]</code>, and <code>pixels[7]</code>. And so on. The <code>pixels</code> array\nfor a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.</p>\n<p>Some displays use several smaller pixels to set the color at a single\npoint. The <a href=\"#/p5/pixelDensity\">pixelDensity()</a> function returns\nthe pixel density of the canvas. High density displays often have a\n<a href=\"#/p5/pixelDensity\">pixelDensity()</a> of 2. On such a display, the\n<code>pixels</code> array for a 100×100 canvas has 200 × 200 × 4 =\n160,000 elements.</p>\n<p>Accessing the RGBA values for a point on the canvas requires a little math\nas shown below. The <a href=\"#/p5/loadPixels\">loadPixels()</a> function\nmust be called before accessing the <code>pixels</code> array. The\n<a href=\"#/p5/updatePixels\">updatePixels()</a> function must be called\nafter any changes are made.</p>\n",
- "itemtype": "property",
- "name": "pixels",
- "type": "Number[]",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Load the pixels array.\n loadPixels();\n\n // Set the dot's coordinates.\n let x = 50;\n let y = 50;\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Set the pixel(s) at the center of the canvas black.\n for (let i = 0; i < d; i += 1) {\n for (let j = 0; j < d; j += 1) {\n let index = 4 * ((y * d + j) * width * d + (x * d + i));\n // Red.\n pixels[index] = 0;\n // Green.\n pixels[index + 1] = 0;\n // Blue.\n pixels[index + 2] = 0;\n // Alpha.\n pixels[index + 3] = 255;\n }\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A black dot in the middle of a gray rectangle.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Load the pixels array.\n loadPixels();\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Make the top half of the canvas red.\n for (let i = 0; i < halfImage; i += 4) {\n // Red.\n pixels[i] = 255;\n // Green.\n pixels[i + 1] = 0;\n // Blue.\n pixels[i + 2] = 0;\n // Alpha.\n pixels[i + 3] = 255;\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A red rectangle drawn above a gray rectangle.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let pink = color(255, 102, 204);\n\n // Load the pixels array.\n loadPixels();\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Make the top half of the canvas red.\n for (let i = 0; i < halfImage; i += 4) {\n pixels[i] = red(pink);\n pixels[i + 1] = green(pink);\n pixels[i + 2] = blue(pink);\n pixels[i + 3] = alpha(pink);\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A pink rectangle drawn above a gray rectangle.');\n}\n</code>\n</div>"
- ],
+ "return": {
+ "description": "magnitude of vector.",
+ "type": "Number"
+ },
"class": "p5",
- "module": "Image",
- "submodule": "Pixels"
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/image/pixels.js",
- "line": 148,
- "description": "<p>Copies a region of pixels from one image to another.</p>\n<p>The first parameter, <code>srcImage</code>, is the\n<a href=\"#/p5.Image\">p5.Image</a> object to blend.</p>\n<p>The next four parameters, <code>sx</code>, <code>sy</code>, <code>sw</code>, and <code>sh</code> determine the region\nto blend from the source image. <code>(sx, sy)</code> is the top-left corner of the\nregion. <code>sw</code> and <code>sh</code> are the regions width and height.</p>\n<p>The next four parameters, <code>dx</code>, <code>dy</code>, <code>dw</code>, and <code>dh</code> determine the region\nof the canvas to blend into. <code>(dx, dy)</code> is the top-left corner of the\nregion. <code>dw</code> and <code>dh</code> are the regions width and height.</p>\n<p>The tenth parameter, <code>blendMode</code>, sets the effect used to blend the images'\ncolors. The options are <code>BLEND</code>, <code>DARKEST</code>, <code>LIGHTEST</code>, <code>DIFFERENCE</code>,\n<code>MULTIPLY</code>, <code>EXCLUSION</code>, <code>SCREEN</code>, <code>REPLACE</code>, <code>OVERLAY</code>, <code>HARD_LIGHT</code>,\n<code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>, <code>ADD</code>, or <code>NORMAL</code></p>\n",
+ "name": "map",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 606,
"itemtype": "method",
- "name": "blend",
+ "description": "<p>Re-maps a number from one range to another.</p>\n<p>For example, calling <code>map(2, 0, 10, 0, 100)</code> returns 20. The first three\narguments set the original value to 2 and the original range from 0 to 10.\nThe last two arguments set the target range from 0 to 100. 20's position\nin the target range [0, 100] is proportional to 2's position in the\noriginal range [0, 10].</p>\n<p>The sixth parameter, <code>withinBounds</code>, is optional. By default, <code>map()</code> can\nreturn values outside of the target range. For example,\n<code>map(11, 0, 10, 0, 100)</code> returns 110. Passing <code>true</code> as the sixth parameter\nconstrains the remapped value to the target range. For example,\n<code>map(11, 0, 10, 0, 100, true)</code> returns 100.</p>\n",
"example": [
- "\n<div>\n<code>\nlet img0;\nlet img1;\n\n// Load the images.\nfunction preload() {\n img0 = loadImage('assets/rockies.jpg');\n img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img0);\n\n // Display the bricks.\n image(img1, 0, 0);\n\n // Display the bricks faded into the landscape.\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img0;\nlet img1;\n\n// Load the images.\nfunction preload() {\n img0 = loadImage('assets/rockies.jpg');\n img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img0);\n\n // Display the bricks.\n image(img1, 0, 0);\n\n // Display the bricks partially transparent.\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img0;\nlet img1;\n\n// Load the images.\nfunction preload() {\n img0 = loadImage('assets/rockies.jpg');\n img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img0);\n\n // Display the bricks.\n image(img1, 0, 0);\n\n // Display the bricks washed out into the landscape.\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n\n 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.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two horizontal lines. The top line grows horizontally as the mouse moves to the right. The bottom line also grows horizontally but is scaled to stay on the left half of the canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the top line.\n line(0, 25, mouseX, 25);\n\n // Remap mouseX from [0, 100] to [0, 50].\n let x = map(mouseX, 0, 100, 0, 50);\n\n // Draw the bottom line.\n line(0, 75, 0, x);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle changes color from black to white as the mouse moves from left to right.');\n}\n\nfunction draw() {\n background(200);\n\n // Remap mouseX from [0, 100] to [0, 255]\n let c = map(mouseX, 0, 100, 0, 255);\n\n // Style the circle.\n fill(c);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Image",
- "submodule": "Pixels",
"overloads": [
{
- "line": 148,
"params": [
{
- "name": "srcImage",
- "description": "<p>source image.</p>\n",
- "type": "p5.Image"
- },
- {
- "name": "sx",
- "description": "<p>x-coordinate of the source's upper-left corner.</p>\n",
- "type": "Integer"
- },
- {
- "name": "sy",
- "description": "<p>y-coordinate of the source's upper-left corner.</p>\n",
- "type": "Integer"
+ "name": "value",
+ "description": "the value to be remapped.",
+ "type": "Number"
},
{
- "name": "sw",
- "description": "<p>source image width.</p>\n",
- "type": "Integer"
+ "name": "start1",
+ "description": "lower bound of the value's current range.",
+ "type": "Number"
},
{
- "name": "sh",
- "description": "<p>source image height.</p>\n",
- "type": "Integer"
+ "name": "stop1",
+ "description": "upper bound of the value's current range.",
+ "type": "Number"
},
{
- "name": "dx",
- "description": "<p>x-coordinate of the destination's upper-left corner.</p>\n",
- "type": "Integer"
+ "name": "start2",
+ "description": "lower bound of the value's target range.",
+ "type": "Number"
},
{
- "name": "dy",
- "description": "<p>y-coordinate of the destination's upper-left corner.</p>\n",
- "type": "Integer"
+ "name": "stop2",
+ "description": "upper bound of the value's target range.",
+ "type": "Number"
},
{
- "name": "dw",
- "description": "<p>destination image width.</p>\n",
- "type": "Integer"
- },
- {
- "name": "dh",
- "description": "<p>destination image height.</p>\n",
- "type": "Integer"
- },
- {
- "name": "blendMode",
- "description": "<p>the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>\n",
- "type": "Constant"
- }
- ]
- },
- {
- "line": 267,
- "params": [
- {
- "name": "sx",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "sy",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "sw",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "sh",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "dx",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "dy",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "dw",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "dh",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "blendMode",
- "description": "",
- "type": "Constant"
+ "name": "withinBounds",
+ "description": "constrain the value to the newly mapped range.",
+ "optional": 1,
+ "type": "Boolean"
}
- ]
+ ],
+ "return": {
+ "description": "remapped number.",
+ "type": "Number"
+ }
}
- ]
+ ],
+ "return": {
+ "description": "remapped number.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/image/pixels.js",
- "line": 288,
- "description": "<p>Copies pixels from a source image to a region of the canvas.</p>\n<p>The first parameter, <code>srcImage</code>, is the\n<a href=\"#/p5.Image\">p5.Image</a> object to blend. The source image can be\nthe canvas itself or a\n<a href=\"#/p5.Image\">p5.Image</a> object. <code>copy()</code> will scale pixels from\nthe source region if it isn't the same size as the destination region.</p>\n<p>The next four parameters, <code>sx</code>, <code>sy</code>, <code>sw</code>, and <code>sh</code> determine the region\nto copy from the source image. <code>(sx, sy)</code> is the top-left corner of the\nregion. <code>sw</code> and <code>sh</code> are the region's width and height.</p>\n<p>The next four parameters, <code>dx</code>, <code>dy</code>, <code>dw</code>, and <code>dh</code> determine the region\nof the canvas to copy into. <code>(dx, dy)</code> is the top-left corner of the\nregion. <code>dw</code> and <code>dh</code> are the region's width and height.</p>\n",
+ "name": "max",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 686,
"itemtype": "method",
- "name": "copy",
+ "description": "<p>Returns the largest value in a sequence of numbers.</p>\n<p>The version of <code>max()</code> with one parameter interprets it as an array of\nnumbers and returns the largest number.</p>\n<p>The version of <code>max()</code> with two or more parameters interprets them as\nindividual numbers and returns the largest number.</p>\n",
"example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the mountains as the background.\n background(img);\n\n // Copy a region of pixels to another spot.\n copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n\n // Outline the copied region.\n stroke(255);\n noFill();\n square(7, 22, 10);\n\n 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.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the maximum of 10, 5, and 20.\n let m = max(10, 5, 20);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the max.\n text(m, 50, 50);\n\n describe('The number 20 written in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [10, 5, 20];\n\n // Calculate the maximum of the array.\n let m = max(numbers);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the max.\n text(m, 50, 50);\n\n describe('The number 20 written in the middle of a gray square.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Image",
- "submodule": "Pixels",
"overloads": [
{
- "line": 288,
"params": [
{
- "name": "srcImage",
- "description": "<p>source image.</p>\n",
- "type": "p5.Image|p5.Element"
- },
- {
- "name": "sx",
- "description": "<p>x-coordinate of the source's upper-left corner.</p>\n",
- "type": "Integer"
- },
- {
- "name": "sy",
- "description": "<p>y-coordinate of the source's upper-left corner.</p>\n",
- "type": "Integer"
- },
- {
- "name": "sw",
- "description": "<p>source image width.</p>\n",
- "type": "Integer"
- },
- {
- "name": "sh",
- "description": "<p>source image height.</p>\n",
- "type": "Integer"
- },
- {
- "name": "dx",
- "description": "<p>x-coordinate of the destination's upper-left corner.</p>\n",
- "type": "Integer"
- },
- {
- "name": "dy",
- "description": "<p>y-coordinate of the destination's upper-left corner.</p>\n",
- "type": "Integer"
- },
- {
- "name": "dw",
- "description": "<p>destination image width.</p>\n",
- "type": "Integer"
+ "name": "n0",
+ "description": "first number to compare.",
+ "type": "Number"
},
{
- "name": "dh",
- "description": "<p>destination image height.</p>\n",
- "type": "Integer"
+ "name": "n1",
+ "description": "second number to compare.",
+ "type": "Number"
}
- ]
+ ],
+ "return": {
+ "description": "maximum number.",
+ "type": "Number"
+ }
},
{
- "line": 345,
"params": [
{
- "name": "sx",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "sy",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "sw",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "sh",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "dx",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "dy",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "dw",
- "description": "",
- "type": "Integer"
- },
- {
- "name": "dh",
- "description": "",
- "type": "Integer"
+ "name": "nums",
+ "description": "numbers to compare.",
+ "type": "Number[]"
}
- ]
+ ],
+ "return": {
+ "description": "",
+ "type": "Number"
+ }
}
- ]
+ ],
+ "return": {
+ "description": "maximum number.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/image/pixels.js",
- "line": 442,
- "description": "<p>Applies an image filter to the canvas.</p>\n<p>The preset options are:</p>\n<p><code>INVERT</code>\nInverts the colors in the image. No parameter is used.</p>\n<p><code>GRAY</code>\nConverts the image to grayscale. No parameter is used.</p>\n<p><code>THRESHOLD</code>\nConverts the image to black and white. Pixels with a grayscale value\nabove a given threshold are converted to white. The rest are converted to\nblack. The threshold must be between 0.0 (black) and 1.0 (white). If no\nvalue is specified, 0.5 is used.</p>\n<p><code>OPAQUE</code>\nSets the alpha channel to entirely opaque. No parameter is used.</p>\n<p><code>POSTERIZE</code>\nLimits the number of colors in the image. Each color channel is limited to\nthe number of colors specified. Values between 2 and 255 are valid, but\nresults are most noticeable with lower values. The default value is 4.</p>\n<p><code>BLUR</code>\nBlurs the image. The level of blurring is specified by a blur radius. Larger\nvalues increase the blur. The default value is 4. A gaussian blur is used\nin <code>P2D</code> mode. A box blur is used in <code>WEBGL</code> mode.</p>\n<p><code>ERODE</code>\nReduces the light areas. No parameter is used.</p>\n<p><code>DILATE</code>\nIncreases the light areas. No parameter is used.</p>\n<p><code>filter()</code> uses WebGL in the background by default because it's faster.\nThis can be disabled in <code>P2D</code> mode by adding a <code>false</code> argument, as in\n<code>filter(BLUR, false)</code>. This may be useful to keep computation off the GPU\nor to work around a lack of WebGL support.</p>\n<p>In WebgL mode, <code>filter()</code> can also use custom shaders. See\n<a href=\"#/p5/createFilterShader\">createFilterShader()</a> for more\ninformation.</p>\n",
+ "name": "min",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 769,
"itemtype": "method",
- "name": "filter",
+ "description": "<p>Returns the smallest value in a sequence of numbers.</p>\n<p>The version of <code>min()</code> with one parameter interprets it as an array of\nnumbers and returns the smallest number.</p>\n<p>The version of <code>min()</code> with two or more parameters interprets them as\nindividual numbers and returns the smallest number.</p>\n",
"example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the INVERT filter.\n filter(INVERT);\n\n describe('A blue brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the GRAY filter.\n filter(GRAY);\n\n describe('A brick wall drawn in grayscale.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the THRESHOLD filter.\n filter(THRESHOLD);\n\n describe('A brick wall drawn in black and white.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the OPAQUE filter.\n filter(OPAQUE);\n\n describe('A red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the POSTERIZE filter.\n filter(POSTERIZE, 3);\n\n describe('An image of a red brick wall drawn with limited color palette.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the BLUR filter.\n filter(BLUR, 3);\n\n describe('A blurry image of a red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the DILATE filter.\n filter(DILATE);\n\n describe('A red brick wall with bright lines between each brick.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the ERODE filter.\n filter(ERODE);\n\n describe('A red brick wall with faint lines between each brick.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Apply the BLUR filter.\n // Don't use WebGL.\n filter(BLUR, 3, false);\n\n describe('A blurry image of a red brick wall.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the minimum of 10, 5, and 20.\n let m = min(10, 5, 20);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the min.\n text(m, 50, 50);\n\n describe('The number 5 written in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [10, 5, 20];\n\n // Calculate the minimum of the array.\n let m = min(numbers);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the min.\n text(m, 50, 50);\n\n describe('The number 5 written in the middle of a gray square.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Image",
- "submodule": "Pixels",
"overloads": [
{
- "line": 442,
- "params": [
- {
- "name": "filterType",
- "description": "<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.</p>\n",
- "type": "Constant"
- },
- {
- "name": "filterParam",
- "description": "<p>parameter unique to each filter.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "useWebGL",
- "description": "<p>flag to control whether to use fast\n WebGL filters (GPU) or original image\n filters (CPU); defaults to <code>true</code>.</p>\n",
- "type": "Boolean",
- "optional": true
- }
- ]
- },
- {
- "line": 715,
"params": [
{
- "name": "filterType",
- "description": "",
- "type": "Constant"
+ "name": "n0",
+ "description": "first number to compare.",
+ "type": "Number"
},
{
- "name": "useWebGL",
- "description": "",
- "type": "Boolean",
- "optional": true
+ "name": "n1",
+ "description": "second number to compare.",
+ "type": "Number"
}
- ]
+ ],
+ "return": {
+ "description": "minimum number.",
+ "type": "Number"
+ }
},
{
- "line": 720,
"params": [
{
- "name": "shaderFilter",
- "description": "<p>shader that's been loaded, with the\n frag shader using a <code>tex0</code> uniform.</p>\n",
- "type": "p5.Shader"
+ "name": "nums",
+ "description": "numbers to compare.",
+ "type": "Number[]"
}
- ]
+ ],
+ "return": {
+ "description": "",
+ "type": "Number"
+ }
}
- ]
+ ],
+ "return": {
+ "description": "minimum number.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/image/pixels.js",
- "line": 820,
- "description": "<p>Gets a pixel or a region of pixels from the canvas.</p>\n<p><code>get()</code> is easy to use but it's not as fast as\n<a href=\"#/p5/pixels\">pixels</a>. Use <a href=\"#/p5/pixels\">pixels</a>\nto read many pixel values.</p>\n<p>The version of <code>get()</code> with no parameters returns the entire canvas.</p>\n<p>The version of <code>get()</code> with two parameters interprets them as\ncoordinates. It returns an array with the <code>[R, G, B, A]</code> values of the\npixel at the given point.</p>\n<p>The version of <code>get()</code> with four parameters interprets them as coordinates\nand dimensions. It returns a subsection of the canvas as a\n<a href=\"#/p5.Image\">p5.Image</a> object. The first two parameters are the\ncoordinates for the upper-left corner of the subsection. The last two\nparameters are the width and height of the subsection.</p>\n<p>Use <a href=\"#/p5.Image/get\">p5.Image.get()</a> to work directly with\n<a href=\"#/p5.Image\">p5.Image</a> objects.</p>\n",
+ "name": "norm",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 823,
"itemtype": "method",
- "name": "get",
- "return": {
- "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
- "type": "p5.Image"
- },
+ "description": "<p>Maps a number from one range to a value between 0 and 1.</p>\n<p>For example, <code>norm(2, 0, 10)</code> returns 0.2. 2's position in the original\nrange [0, 10] is proportional to 0.2's position in the range [0, 1]. This\nis the same as calling <code>map(2, 0, 10, 0, 1)</code>.</p>\n<p>Numbers outside of the original range are not constrained between 0 and 1.\nOut-of-range values are often intentional and useful.</p>\n",
"example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get the entire canvas.\n let c = get();\n\n // Display half the canvas.\n image(c, 50, 0);\n\n describe('Two identical mountain landscapes shown side-by-side.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get the color of a pixel.\n let c = get(50, 90);\n\n // Style the square with the pixel's color.\n fill(c);\n noStroke();\n\n // Display the square.\n square(25, 25, 50);\n\n describe('A mountain landscape with an olive green square in its center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get a region of the image.\n let c = get(0, 0, 50, 50);\n\n // Display the region.\n image(c, 50, 50);\n\n describe('A mountain landscape drawn on top of another mountain landscape.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n describe('A square changes color from black to red as the mouse moves from left to right.');\n}\n\nfunction draw() {\n // Calculate the redValue.\n let redValue = norm(mouseX, 0, 100);\n\n // Paint the background.\n background(redValue, 0, 0);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Image",
- "submodule": "Pixels",
"overloads": [
{
- "line": 820,
"params": [
{
- "name": "x",
- "description": "<p>x-coordinate of the pixel.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the pixel.</p>\n",
+ "name": "value",
+ "description": "incoming value to be normalized.",
"type": "Number"
},
{
- "name": "w",
- "description": "<p>width of the subsection to be returned.</p>\n",
+ "name": "start",
+ "description": "lower bound of the value's current range.",
"type": "Number"
},
{
- "name": "h",
- "description": "<p>height of the subsection to be returned.</p>\n",
+ "name": "stop",
+ "description": "upper bound of the value's current range.",
"type": "Number"
}
],
"return": {
- "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
- "type": "p5.Image"
+ "description": "normalized number.",
+ "type": "Number"
}
- },
- {
- "line": 931,
- "params": [],
- "return": {
- "description": "whole canvas as a <a href=\"#/p5.Image\">p5.Image</a>.",
- "type": "p5.Image"
- }
- },
+ }
+ ],
+ "return": {
+ "description": "normalized number.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
+ },
+ {
+ "name": "pow",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 872,
+ "itemtype": "method",
+ "description": "<p>Calculates exponential expressions such as <var>2<sup>3</sup></var>.</p>\n<p>For example, <code>pow(2, 3)</code> evaluates the expression\n2 × 2 × 2. <code>pow(2, -3)</code> evaluates 1 ÷\n(2 × 2 × 2).</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the base of the exponent.\n let base = 3;\n\n // Top-left.\n let d = pow(base, 1);\n circle(10, 10, d);\n\n // Left-center.\n d = pow(base, 2);\n circle(20, 20, d);\n\n // Right-center.\n d = pow(base, 3);\n circle(40, 40, d);\n\n // Bottom-right.\n d = pow(base, 4);\n circle(80, 80, d);\n\n describe('A series of circles that grow exponentially from top left to bottom right.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 935,
"params": [
{
- "name": "x",
- "description": "",
+ "name": "n",
+ "description": "base of the exponential expression.",
"type": "Number"
},
{
- "name": "y",
- "description": "",
+ "name": "e",
+ "description": "power by which to raise the base.",
"type": "Number"
}
],
"return": {
- "description": "color of the pixel at (x, y) in array format `[R, G, B, A]`.",
- "type": "Number[]"
+ "description": "n^e.",
+ "type": "Number"
}
}
- ]
- },
- {
- "file": "src/image/pixels.js",
- "line": 946,
- "description": "<p>Loads the current value of each pixel on the canvas into the\n<a href=\"#/p5/pixels\">pixels</a> array.</p>\n<p><code>loadPixels()</code> must be called before reading from or writing to\n<a href=\"#/p5/pixels\">pixels</a>.</p>\n",
- "itemtype": "method",
- "name": "loadPixels",
- "example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0, 100, 100);\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Load the pixels array.\n loadPixels();\n\n // Copy the top half of the canvas to the bottom.\n for (let i = 0; i < halfImage; i += 1) {\n pixels[i + halfImage] = pixels[i];\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('Two identical images of mountain landscapes, one on top of the other.');\n}\n</code>\n</div>"
],
+ "return": {
+ "description": "n^e.",
+ "type": "Number"
+ },
"class": "p5",
- "module": "Image",
- "submodule": "Pixels"
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/image/pixels.js",
- "line": 997,
- "description": "<p>Sets the color of a pixel or draws an image to the canvas.</p>\n<p><code>set()</code> is easy to use but it's not as fast as\n<a href=\"#/p5/pixels\">pixels</a>. Use <a href=\"#/p5/pixels\">pixels</a>\nto set many pixel values.</p>\n<p><code>set()</code> interprets the first two parameters as x- and y-coordinates. It\ninterprets the last parameter as a grayscale value, a <code>[R, G, B, A]</code> pixel\narray, a <a href=\"#/p5.Color\">p5.Color</a> object, or a\n<a href=\"#/p5.Image\">p5.Image</a> object. If an image is passed, the first\ntwo parameters set the coordinates for the image's upper-left corner,\nregardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p><a href=\"#/p5/updatePixels\">updatePixels()</a> must be called after using\n<code>set()</code> for changes to appear.</p>\n",
+ "name": "round",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 933,
"itemtype": "method",
- "name": "set",
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate of the pixel.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the pixel.</p>\n",
- "type": "Number"
- },
+ "description": "<p>Calculates the integer closest to a number.</p>\n<p>For example, <code>round(133.8)</code> returns the value 134.</p>\n<p>The second parameter, <code>decimals</code>, is optional. It sets the number of\ndecimal places to use when rounding. For example, <code>round(12.34, 1)</code> returns\n12.3. <code>decimals</code> is 0 by default.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Round a number.\n let x = round(4.2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the rounded number.\n text(x, 50, 50);\n\n describe('The number 4 written in middle of the canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Round a number to 2 decimal places.\n let x = round(12.782383, 2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the rounded number.\n text(x, 50, 50);\n\n describe('The number 12.78 written in middle of canvas.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "c",
- "description": "<p>grayscale value | pixel array |\n <a href=\"#/p5.Color\">p5.Color</a> object | <a href=\"#/p5.Image\">p5.Image</a> to copy.</p>\n",
- "type": "Number|Number[]|Object"
+ "params": [
+ {
+ "name": "n",
+ "description": "number to round.",
+ "type": "Number"
+ },
+ {
+ "name": "decimals",
+ "description": "number of decimal places to round to, default is 0.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "rounded number.",
+ "type": "Integer"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set four pixels to black.\n set(30, 20, 0);\n set(85, 20, 0);\n set(85, 75, 0);\n set(30, 75, 0);\n\n // Update the canvas.\n updatePixels();\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let black = color(0);\n\n // Set four pixels to black.\n set(30, 20, black);\n set(85, 20, black);\n set(85, 75, black);\n set(30, 75, black);\n\n // Update the canvas.\n updatePixels();\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(255);\n\n // Draw a horizontal color gradient.\n for (let x = 0; x < 100; x += 1) {\n for (let y = 0; y < 100; y += 1) {\n // Calculate the grayscale value.\n let c = map(x, 0, 100, 0, 255);\n\n // Set the pixel using the grayscale value.\n set(x, y, c);\n }\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('A horiztonal color gradient from black to white.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use the image to set all pixels.\n set(0, 0, img);\n\n // Update the canvas.\n updatePixels();\n\n describe('An image of a mountain landscape.');\n}\n</code>\n</div>"
- ],
+ "return": {
+ "description": "rounded number.",
+ "type": "Integer"
+ },
"class": "p5",
- "module": "Image",
- "submodule": "Pixels"
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/image/pixels.js",
- "line": 1118,
- "description": "<p>Updates the canvas with the RGBA values in the\n<a href=\"#/p5/pixels\">pixels</a> array.</p>\n<p><code>updatePixels()</code> only needs to be called after changing values in the\n<a href=\"#/p5/pixels\">pixels</a> array. Such changes can be made directly\nafter calling <a href=\"#/p5/loadPixels\">loadPixels()</a> or by calling\n<a href=\"#/p5/set\">set()</a>.</p>\n",
+ "name": "sq",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 999,
"itemtype": "method",
- "name": "updatePixels",
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate of the upper-left corner of region\n to update.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the upper-left corner of region\n to update.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "w",
- "description": "<p>width of region to update.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Calculates the square of a number.</p>\n<p>Squaring a number means multiplying the number by itself. For example,\n<code>sq(3)</code> evaluates 3 × 3 which is 9. <code>sq(-3)</code> evaluates -3 × -3\nwhich is also 9. Multiplying two negative numbers produces a positive\nnumber. The value returned by <code>sq()</code> is always positive.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = sq(3);\n circle(33, 33, d);\n\n // Bottom-right.\n d = sq(6);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is four times larger.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher quickly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 0.01 * sq(x);\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "h",
- "description": "<p>height of region to update.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "n",
+ "description": "number to square.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "squared number.",
+ "type": "Number"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0, 100, 100);\n\n // Get the pixel density.\n let d = pixelDensity();\n\n // Calculate the halfway index in the pixels array.\n let halfImage = 4 * (d * width) * (d * height / 2);\n\n // Load the pixels array.\n loadPixels();\n\n // Copy the top half of the canvas to the bottom.\n for (let i = 0; i < halfImage; i += 1) {\n pixels[i + halfImage] = pixels[i];\n }\n\n // Update the canvas.\n updatePixels();\n\n describe('Two identical images of mountain landscapes, one on top of the other.');\n}\n</code>\n</div>"
- ],
+ "return": {
+ "description": "squared number.",
+ "type": "Number"
+ },
"class": "p5",
- "module": "Image",
- "submodule": "Pixels"
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/io/files.js",
- "line": 17,
- "description": "<p>Loads a JSON file to create an <code>Object</code>.</p>\n<p>JavaScript Object Notation\n(<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/JSON\" target=\"_blank\">JSON</a>)\nis a standard format for sending data between applications. The format is\nbased on JavaScript objects which have keys and values. JSON files store\ndata in an object with strings as keys. Values can be strings, numbers,\nBooleans, arrays, <code>null</code>, or other objects.</p>\n<p>The first parameter, <code>path</code>, is always a string with the path to the file.\nPaths to local files should be relative, as in\n<code>loadJSON('assets/data.json')</code>. URLs such as\n<code>'https://example.com/data.json'</code> may be blocked due to browser security.</p>\n<p>The second parameter, <code>successCallback</code>, is optional. If a function is\npassed, as in <code>loadJSON('assets/data.json', handleData)</code>, then the\n<code>handleData()</code> function will be called once the data loads. The object\ncreated from the JSON data will be passed to <code>handleData()</code> as its only argument.</p>\n<p>The third parameter, <code>failureCallback</code>, is also optional. If a function is\npassed, as in <code>loadJSON('assets/data.json', handleData, handleFailure)</code>,\nthen the <code>handleFailure()</code> function will be called if an error occurs while\nloading. The <code>Error</code> object will be passed to <code>handleFailure()</code> as its only\nargument.</p>\n<p>Note: Data can take time to load. Calling <code>loadJSON()</code> within\n<a href=\"#/p5/preload\">preload()</a> ensures data loads before it's used in\n<a href=\"#/p5/setup\">setup()</a> or <a href=\"#/p5/draw\">draw()</a>.</p>\n",
+ "name": "sqrt",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 1059,
"itemtype": "method",
- "name": "loadJSON",
- "params": [
- {
- "name": "path",
- "description": "<p>path of the JSON file to be loaded.</p>\n",
- "type": "String"
- },
- {
- "name": "successCallback",
- "description": "<p>function to call once the data is loaded. Will be passed the object.</p>\n",
- "type": "Function",
- "optional": true
- },
+ "description": "<p>Calculates the square root of a number.</p>\n<p>A number's square root can be multiplied by itself to produce the original\nnumber. For example, <code>sqrt(9)</code> returns 3 because 3 × 3 = 9. <code>sqrt()</code>\nalways returns a positive value. <code>sqrt()</code> doesn't work with negative arguments\nsuch as <code>sqrt(-9)</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = sqrt(16);\n circle(33, 33, d);\n\n // Bottom-right.\n d = sqrt(1600);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher slowly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 5 * sqrt(x);\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "errorCallback",
- "description": "<p>function to call if the data fails to load. Will be passed an <code>Error</code> event object.</p>\n",
- "type": "Function",
- "optional": true
+ "params": [
+ {
+ "name": "n",
+ "description": "non-negative number to square root.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "square root of number.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "object containing the loaded data.",
- "type": "Object"
+ "description": "square root of number.",
+ "type": "Number"
},
- "example": [
- "\n\n<div>\n<code>\nlet myData;\n\n// Load the JSON and create an object.\nfunction preload() {\n myData = loadJSON('assets/data.json');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the circle.\n fill(myData.color);\n noStroke();\n\n // Draw the circle.\n circle(myData.x, myData.y, myData.d);\n\n describe('A pink circle on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myData;\n\n// Load the JSON and create an object.\nfunction preload() {\n myData = loadJSON('assets/data.json');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object and make it transparent.\n let c = color(myData.color);\n c.setAlpha(80);\n\n // Style the circles.\n fill(c);\n noStroke();\n\n // Iterate over the myData.bubbles array.\n for (let b of myData.bubbles) {\n // Draw a circle for each bubble.\n circle(b.x, b.y, b.d);\n }\n\n describe('Several pink bubbles floating in a blue sky.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myData;\n\n// Load the GeoJSON and create an object.\nfunction preload() {\n myData = loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get data about the most recent earthquake.\n let quake = myData.features[0].properties;\n\n // Draw a circle based on the earthquake's magnitude.\n circle(50, 50, quake.mag * 10);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(11);\n\n // Display the earthquake's location.\n text(quake.place, 5, 80, 100);\n\n describe(`A white circle on a gray background. The text \"${quake.place}\" is written beneath the circle.`);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet bigQuake;\n\n// Load the GeoJSON and preprocess it.\nfunction preload() {\n loadJSON(\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',\n handleData\n );\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a circle based on the earthquake's magnitude.\n circle(50, 50, bigQuake.mag * 10);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(11);\n\n // Display the earthquake's location.\n text(bigQuake.place, 5, 80, 100);\n\n describe(`A white circle on a gray background. The text \"${bigQuake.place}\" is written beneath the circle.`);\n}\n\n// Find the biggest recent earthquake.\nfunction handleData(data) {\n let maxMag = 0;\n // Iterate over the earthquakes array.\n for (let quake of data.features) {\n // Reassign bigQuake if a larger\n // magnitude quake is found.\n if (quake.properties.mag > maxMag) {\n bigQuake = quake.properties;\n }\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nlet bigQuake;\n\n// Load the GeoJSON and preprocess it.\nfunction preload() {\n loadJSON(\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',\n handleData,\n handleError\n );\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a circle based on the earthquake's magnitude.\n circle(50, 50, bigQuake.mag * 10);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(11);\n\n // Display the earthquake's location.\n text(bigQuake.place, 5, 80, 100);\n\n describe(`A white circle on a gray background. The text \"${bigQuake.place}\" is written beneath the circle.`);\n}\n\n// Find the biggest recent earthquake.\nfunction handleData(data) {\n let maxMag = 0;\n // Iterate over the earthquakes array.\n for (let quake of data.features) {\n // Reassign bigQuake if a larger\n // magnitude quake is found.\n if (quake.properties.mag > maxMag) {\n bigQuake = quake.properties;\n }\n }\n}\n\n// Log any errors to the console.\nfunction handleError(error) {\n console.log('Oops!', error);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "IO",
- "submodule": "Input"
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/io/files.js",
- "line": 309,
- "description": "<p>Loads a text file to create an <code>Array</code>.</p>\n<p>The first parameter, <code>path</code>, is always a string with the path to the file.\nPaths to local files should be relative, as in\n<code>loadStrings('assets/data.txt')</code>. URLs such as\n<code>'https://example.com/data.txt'</code> may be blocked due to browser security.</p>\n<p>The second parameter, <code>successCallback</code>, is optional. If a function is\npassed, as in <code>loadStrings('assets/data.txt', handleData)</code>, then the\n<code>handleData()</code> function will be called once the data loads. The array\ncreated from the text data will be passed to <code>handleData()</code> as its only\nargument.</p>\n<p>The third parameter, <code>failureCallback</code>, is also optional. If a function is\npassed, as in <code>loadStrings('assets/data.txt', handleData, handleFailure)</code>,\nthen the <code>handleFailure()</code> function will be called if an error occurs while\nloading. The <code>Error</code> object will be passed to <code>handleFailure()</code> as its only\nargument.</p>\n<p>Note: Data can take time to load. Calling <code>loadStrings()</code> within\n<a href=\"#/p5/preload\">preload()</a> ensures data loads before it's used in\n<a href=\"#/p5/setup\">setup()</a> or <a href=\"#/p5/draw\">draw()</a>.</p>\n",
+ "name": "fract",
+ "file": "src/scripts/parsers/in/p5.js/src/math/calculation.js",
+ "line": 1096,
"itemtype": "method",
- "name": "loadStrings",
- "params": [
- {
- "name": "path",
- "description": "<p>path of the text file to be loaded.</p>\n",
- "type": "String"
- },
- {
- "name": "successCallback",
- "description": "<p>function to call once the data is\n loaded. Will be passed the array.</p>\n",
- "type": "Function",
- "optional": true
- },
+ "description": "<p>Calculates the fractional part of a number.</p>\n<p>A number's fractional part includes its decimal values. For example,\n<code>fract(12.34)</code> returns 0.34.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Original number.\n let n = 56.78;\n text(n, 50, 33);\n\n // Fractional part.\n let f = fract(n);\n text(f, 50, 67);\n\n describe('The number 56.78 written above the number 0.78.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "errorCallback",
- "description": "<p>function to call if the data fails to\n load. Will be passed an <code>Error</code> event\n object.</p>\n",
- "type": "Function",
- "optional": true
+ "params": [
+ {
+ "name": "n",
+ "description": "number whose fractional part will be found.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "fractional part of n.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "new array containing the loaded text.",
- "type": "String[]"
+ "description": "fractional part of n.",
+ "type": "Number"
},
- "example": [
- "\n\n<div>\n<code>\nlet myData;\n\n// Load the text and create an array.\nfunction preload() {\n myData = loadStrings('assets/test.txt');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Select a random line from the text.\n let phrase = random(myData);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display the text.\n text(phrase, 10, 50, 90);\n\n describe(`The text \"${phrase}\" written in black on a gray background.`);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet lastLine;\n\n// Load the text and preprocess it.\nfunction preload() {\n loadStrings('assets/test.txt', handleData);\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display the text.\n text(lastLine, 10, 50, 90);\n\n describe('The text \"I talk like an orange\" written in black on a gray background.');\n}\n\n// Select the last line from the text.\nfunction handleData(data) {\n lastLine = data[data.length - 1];\n}\n</code>\n</div>\n\n<div>\n<code>\nlet lastLine;\n\n// Load the text and preprocess it.\nfunction preload() {\n loadStrings('assets/test.txt', handleData, handleError);\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display the text.\n text(lastLine, 10, 50, 90);\n\n describe('The text \"I talk like an orange\" written in black on a gray background.');\n}\n\n// Select the last line from the text.\nfunction handleData(data) {\n lastLine = data[data.length - 1];\n}\n\n// Log any errors to the console.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "IO",
- "submodule": "Input"
+ "static": false,
+ "module": "Math",
+ "submodule": "Calculation"
},
{
- "file": "src/io/files.js",
- "line": 505,
- "description": "<p>Reads the contents of a file or URL and creates a <a href=\"#/p5.Table\">p5.Table</a> object with\nits values. If a file is specified, it must be located in the sketch's\n\"data\" folder. The filename parameter can also be a URL to a file found\nonline. By default, the file is assumed to be comma-separated (in CSV\nformat). Table only looks for a header row if the 'header' option is\nincluded.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadTable\">loadTable()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject:</p>\n<p>All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.</p>\n",
+ "name": "createVector",
+ "file": "src/scripts/parsers/in/p5.js/src/math/math.js",
+ "line": 98,
"itemtype": "method",
- "name": "loadTable",
- "params": [
- {
- "name": "filename",
- "description": "<p>name of the file or URL to load</p>\n",
- "type": "String"
- },
- {
- "name": "extension",
- "description": "<p>parse the table by comma-separated values \"csv\", semicolon-separated\n values \"ssv\", or tab-separated values \"tsv\"</p>\n",
- "type": "String",
- "optional": true
- },
- {
- "name": "header",
- "description": "<p>\"header\" to indicate table has header row</p>\n",
- "type": "String",
- "optional": true
- },
- {
- "name": "callback",
- "description": "<p>function to be executed after\n <a href=\"#/p5/loadTable\">loadTable()</a> completes. On success, the\n <a href=\"#/p5.Table\">Table</a> object is passed in as the\n first argument.</p>\n",
- "type": "Function",
- "optional": true
- },
+ "description": "<p>Creates a new <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n<p>A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection. This view is helpful for programming motion.</p>\n<p>A vector's components determine its magnitude and direction. For example,\ncalling <code>createVector(3, 4)</code> creates a new\n<a href=\"#/p5.Vector\">p5.Vector</a> object with an x-component of 3 and a\ny-component of 4. From the origin, this vector's tip is 3 units to the\nright and 4 units down.</p>\n<p>You can also pass N dimensions to the <code>createVector</code> function. For example,\ncalling <code>createVector(1, 2, 3, 4)</code> creates a vector with four components.\nThis allows for flexibility in representing vectors in higher-dimensional\nspaces.</p>\n<p><a href=\"#/p5.Vector\">p5.Vector</a> objects are often used to program\nmotion because they simplify the math. For example, a moving ball has a\nposition and a velocity. Position describes where the ball is in space. The\nball's position vector extends from the origin to the ball's center.\nVelocity describes the ball's speed and the direction it's moving. If the\nball is moving straight up, its velocity vector points straight up. Adding\nthe ball's velocity vector to its position vector moves it, as in\n<code>pos.add(vel)</code>. Vector math relies on methods inside the\n<a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(25, 25);\n let p2 = createVector(50, 50);\n let p3 = createVector(75, 75);\n\n // Draw the dots.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots form a diagonal line from top left to bottom right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pos;\nlet vel;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n pos = createVector(50, 100);\n vel = createVector(0, -1);\n\n describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');\n}\n\nfunction draw() {\n background(200);\n\n // Add velocity to position.\n pos.add(vel);\n\n // If the dot reaches the top of the canvas,\n // restart from the bottom.\n if (pos.y < 0) {\n pos.y = 100;\n }\n\n // Draw the dot.\n strokeWeight(5);\n point(pos);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "errorCallback",
- "description": "<p>function to be executed if\n there is an error, response is passed\n in as first argument</p>\n",
- "type": "Function",
- "optional": true
+ "params": [
+ {
+ "name": "components",
+ "description": "Components of the vector."
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ }
}
],
"return": {
- "description": "<a href=\"#/p5.Table\">Table</a> object containing data",
- "type": "Object"
+ "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
},
- "example": [
- "\n<div class='norender'>\n<code>\n// Given the following CSV file called \"mammals.csv\"\n// located in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n //the file can be remote\n //table = loadTable(\"https://p5js.org/reference/assets/mammals.csv\",\n // \"csv\", \"header\");\n}\n\nfunction setup() {\n //count the columns\n print(table.getRowCount() + ' total rows in table');\n print(table.getColumnCount() + ' total columns in table');\n\n print(table.getColumn('name'));\n //[\"Goat\", \"Leopard\", \"Zebra\"]\n\n //cycle through the table\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++) {\n print(table.getString(r, c));\n }\n describe(`randomly generated text from a file,\n for example \"i smell like butter\"`);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "IO",
- "submodule": "Input"
+ "static": false,
+ "module": "Math"
},
{
- "file": "src/io/files.js",
- "line": 780,
- "description": "<p>Loads an XML file to create a <a href=\"#/p5.XML\">p5.XML</a> object.</p>\n<p>Extensible Markup Language\n(<a href=\"https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction\" target=\"_blank\">XML</a>)\nis a standard format for sending data between applications. Like HTML, the\nXML format is based on tags and attributes, as in\n<code><time units=\"s\">1234</time></code>.</p>\n<p>The first parameter, <code>path</code>, is always a string with the path to the file.\nPaths to local files should be relative, as in\n<code>loadXML('assets/data.xml')</code>. URLs such as <code>'https://example.com/data.xml'</code>\nmay be blocked due to browser security.</p>\n<p>The second parameter, <code>successCallback</code>, is optional. If a function is\npassed, as in <code>loadXML('assets/data.xml', handleData)</code>, then the\n<code>handleData()</code> function will be called once the data loads. The\n<a href=\"#/p5.XML\">p5.XML</a> object created from the data will be passed\nto <code>handleData()</code> as its only argument.</p>\n<p>The third parameter, <code>failureCallback</code>, is also optional. If a function is\npassed, as in <code>loadXML('assets/data.xml', handleData, handleFailure)</code>, then\nthe <code>handleFailure()</code> function will be called if an error occurs while\nloading. The <code>Error</code> object will be passed to <code>handleFailure()</code> as its only\nargument.</p>\n<p>Note: Data can take time to load. Calling <code>loadXML()</code> within\n<a href=\"#/p5/preload\">preload()</a> ensures data loads before it's used in\n<a href=\"#/p5/setup\">setup()</a> or <a href=\"#/p5/draw\">draw()</a>.</p>\n",
+ "name": "noise",
+ "file": "src/scripts/parsers/in/p5.js/src/math/noise.js",
+ "line": 251,
"itemtype": "method",
- "name": "loadXML",
- "params": [
- {
- "name": "path",
- "description": "<p>path of the XML file to be loaded.</p>\n",
- "type": "String"
- },
+ "description": "<p>Returns random numbers that can be tuned to feel organic.</p>\n<p>Values returned by <a href=\"#/p5/random\">random()</a> and\n<a href=\"#/p5/randomGaussian\">randomGaussian()</a> can change by large\namounts between function calls. By contrast, values returned by <code>noise()</code>\ncan be made \"smooth\". Calls to <code>noise()</code> with similar inputs will produce\nsimilar outputs. <code>noise()</code> is used to create textures, motion, shapes,\nterrains, and so on. Ken Perlin invented <code>noise()</code> while animating the\noriginal <em>Tron</em> film in the 1980s.</p>\n<p><code>noise()</code> always returns values between 0 and 1. It returns the same value\nfor a given input while a sketch is running. <code>noise()</code> produces different\nresults each time a sketch runs. The\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a> function can be used to generate\nthe same sequence of Perlin noise values each time a sketch runs.</p>\n<p>The character of the noise can be adjusted in two ways. The first way is to\nscale the inputs. <code>noise()</code> interprets inputs as coordinates. The sequence\nof noise values will be smoother when the input coordinates are closer. The\nsecond way is to use the <a href=\"#/p5/noiseDetail\">noiseDetail()</a>\nfunction.</p>\n<p>The version of <code>noise()</code> with one parameter computes noise values in one\ndimension. This dimension can be thought of as space, as in <code>noise(x)</code>, or\ntime, as in <code>noise(t)</code>.</p>\n<p>The version of <code>noise()</code> with two parameters computes noise values in two\ndimensions. These dimensions can be thought of as space, as in\n<code>noise(x, y)</code>, or space and time, as in <code>noise(x, t)</code>.</p>\n<p>The version of <code>noise()</code> with three parameters computes noise values in\nthree dimensions. These dimensions can be thought of as space, as in\n<code>noise(x, y, z)</code>, or space and time, as in <code>noise(x, y, t)</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot moves randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 100 * noise(0.005 * frameCount);\n let y = 100 * noise(0.005 * frameCount + 10000);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot moves randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.005;\n\n // Scale the input coordinate.\n let nt = noiseScale * frameCount;\n\n // Compute the noise values.\n let x = noiseLevel * noise(nt);\n let y = noiseLevel * noise(nt + 10000);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A hilly terrain drawn in gray against a black sky.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.02;\n\n // Scale the input coordinate.\n let x = frameCount;\n let nx = noiseScale * x;\n\n // Compute the noise value.\n let y = noiseLevel * noise(nx);\n\n // Draw the line.\n line(x, 0, x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A calm sea drawn in gray against a black sky.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.002;\n\n // Iterate from left to right.\n for (let x = 0; x < 100; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let y = noiseLevel * noise(nx, nt);\n\n // Draw the line.\n line(x, 0, x, y);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.01;\n\n // Iterate from top to bottom.\n for (let y = 0; y < 100; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < 100; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n\n // Compute the noise value.\n let c = noiseLevel * noise(nx, ny);\n\n // Draw the point.\n stroke(c);\n point(x, y);\n }\n }\n\n describe('A gray cloudy pattern.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray cloudy pattern that changes.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.009;\n\n // Iterate from top to bottom.\n for (let y = 0; y < 100; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < width; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let c = noiseLevel * noise(nx, ny, nt);\n\n // Draw the point.\n stroke(c);\n point(x, y);\n }\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "successCallback",
- "description": "<p>function to call once the data is\n loaded. Will be passed the\n <a href=\"#/p5.XML\">p5.XML</a> object.</p>\n",
- "type": "Function",
- "optional": true
- },
- {
- "name": "errorCallback",
- "description": "<p>function to call if the data fails to\n load. Will be passed an <code>Error</code> event\n object.</p>\n",
- "type": "Function",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate in noise space.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate in noise space.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z-coordinate in noise space.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "Perlin noise value at specified coordinates.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "XML data loaded into a <a href=\"#/p5.XML\">p5.XML</a>\n object.",
- "type": "p5.XML"
+ "description": "Perlin noise value at specified coordinates.",
+ "type": "Number"
},
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Noise"
+ },
+ {
+ "name": "noiseDetail",
+ "file": "src/scripts/parsers/in/p5.js/src/math/noise.js",
+ "line": 391,
+ "itemtype": "method",
+ "description": "<p>Adjusts the character of the noise produced by the\n<a href=\"#/p5/noise\">noise()</a> function.</p>\n<p>Perlin noise values are created by adding layers of noise together. The\nnoise layers, called octaves, are similar to harmonics in music. Lower\noctaves contribute more to the output signal. They define the overall\nintensity of the noise. Higher octaves create finer-grained details.</p>\n<p>By default, noise values are created by combining four octaves. Each higher\noctave contributes half as much (50% less) compared to its predecessor.\n<code>noiseDetail()</code> changes the number of octaves and the falloff amount. For\nexample, calling <code>noiseDetail(6, 0.25)</code> ensures that\n<a href=\"#/p5/noise\">noise()</a> will use six octaves. Each higher octave\nwill contribute 25% as much (75% less) compared to its predecessor. Falloff\nvalues between 0 and 1 are valid. However, falloff values greater than 0.5\nmight result in noise values greater than 1.</p>\n",
"example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal tags.\n let mammals = myXML.getChildren('mammal');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the mammals array.\n for (let i = 0; i < mammals.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the mammal's common name.\n let name = mammals[i].getContent();\n\n // Display the mammal's name.\n text(name, 20, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Zebra\" written on three separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nlet lastMammal;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n loadXML('assets/animals.xml', handleData);\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Display the content of the last mammal element.\n text(lastMammal, 50, 50);\n\n describe('The word \"Zebra\" written in black on a gray background.');\n}\n\n// Get the content of the last mammal element.\nfunction handleData(data) {\n // Get an array with all mammal elements.\n let mammals = data.getChildren('mammal');\n\n // Get the content of the last mammal.\n lastMammal = mammals[mammals.length - 1].getContent();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet lastMammal;\n\n// Load the XML and preprocess it.\nfunction preload() {\n loadXML('assets/animals.xml', handleData, handleError);\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Display the content of the last mammal element.\n text(lastMammal, 50, 50);\n\n describe('The word \"Zebra\" written in black on a gray background.');\n}\n\n// Get the content of the last mammal element.\nfunction handleData(data) {\n // Get an array with all mammal elements.\n let mammals = data.getChildren('mammal');\n\n // Get the content of the last mammal.\n lastMammal = mammals[mammals.length - 1].getContent();\n}\n\n// Log any errors to the console.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.02;\n\n // Iterate from top to bottom.\n for (let y = 0; y < 100; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < 50; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n\n // Compute the noise value with six octaves\n // and a low falloff factor.\n noiseDetail(6, 0.25);\n let c = noiseLevel * noise(nx, ny);\n\n // Draw the left side.\n stroke(c);\n point(x, y);\n\n // Compute the noise value with four octaves\n // and a high falloff factor.\n noiseDetail(4, 0.5);\n c = noiseLevel * noise(nx, ny);\n\n // Draw the right side.\n stroke(c);\n point(x + 50, y);\n }\n }\n\n describe('Two gray cloudy patterns. The pattern on the right is cloudier than the pattern on the left.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "lod",
+ "description": "number of octaves to be used by the noise.",
+ "type": "Number"
+ },
+ {
+ "name": "falloff",
+ "description": "falloff factor for each octave.",
+ "type": "Number"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "IO",
- "submodule": "Input"
+ "static": false,
+ "module": "Math",
+ "submodule": "Noise"
},
{
- "file": "src/io/files.js",
- "line": 986,
- "description": "<p>This method is suitable for fetching files up to size of 64MB.</p>\n",
+ "name": "noiseSeed",
+ "file": "src/scripts/parsers/in/p5.js/src/math/noise.js",
+ "line": 442,
"itemtype": "method",
- "name": "loadBytes",
- "params": [
- {
- "name": "file",
- "description": "<p>name of the file or URL to load</p>\n",
- "type": "String"
- },
- {
- "name": "callback",
- "description": "<p>function to be executed after <a href=\"#/p5/loadBytes\">loadBytes()</a>\n completes</p>\n",
- "type": "Function",
- "optional": true
- },
+ "description": "<p>Sets the seed value for the <a href=\"#/p5/noise\">noise()</a> function.</p>\n<p>By default, <a href=\"#/p5/noise\">noise()</a> produces different results\neach time a sketch is run. Calling <code>noiseSeed()</code> with a constant argument,\nsuch as <code>noiseSeed(99)</code>, makes <a href=\"#/p5/noise\">noise()</a> produce the\nsame results each time a sketch is run.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the noise seed for consistent results.\n noiseSeed(99);\n\n describe('A black rectangle that grows randomly, first to the right and then to the left.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.005;\n\n // Scale the input coordinate.\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let x = noiseLevel * noise(nt);\n\n // Draw the line.\n line(x, 0, x, height);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "errorCallback",
- "description": "<p>function to be executed if there\n is an error</p>\n",
- "type": "Function",
- "optional": true
+ "params": [
+ {
+ "name": "seed",
+ "description": "seed value.",
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "an object whose 'bytes' property will be the loaded buffer",
- "type": "Object"
- },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Noise"
+ },
+ {
+ "name": "randomSeed",
+ "file": "src/scripts/parsers/in/p5.js/src/math/random.js",
+ "line": 80,
+ "itemtype": "method",
+ "description": "<p>Sets the seed value for the <a href=\"#/p5/random\">random()</a> and\n<a href=\"#/p5/randomGaussian\">randomGaussian()</a> functions.</p>\n<p>By default, <a href=\"#/p5/random\">random()</a> and\n<a href=\"#/p5/randomGaussian\">randomGaussian()</a> produce different\nresults each time a sketch is run. Calling <code>randomSeed()</code> with a constant\nargument, such as <code>randomSeed(99)</code>, makes these functions produce the same\nresults each time a sketch is run.</p>\n",
"example": [
- "\n<div class='norender'><code>\nlet data;\n\nfunction preload() {\n data = loadBytes('assets/mammals.xml');\n}\n\nfunction setup() {\n for (let i = 0; i < 5; i++) {\n console.log(data.bytes[i].toString(16));\n }\n describe('no image displayed');\n}\n</code></div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the white circle.\n circle(x, y, 10);\n\n // Set a random seed for consistency.\n randomSeed(99);\n\n // Get random coordinates.\n x = random(0, 100);\n y = random(0, 100);\n\n // Draw the black circle.\n fill(0);\n circle(x, y, 10);\n\n describe('A white circle appears at a random position. A black circle appears at (27.4, 25.8).');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "seed",
+ "description": "seed value.",
+ "type": "Number"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "IO",
- "submodule": "Input"
+ "static": false,
+ "module": "Math",
+ "submodule": "Random"
},
{
- "file": "src/io/files.js",
- "line": 1043,
- "description": "<p>Method for executing an HTTP GET request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return\na Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer\nwhich can be used to initialize typed arrays (such as Uint8Array).</p>\n",
+ "name": "random",
+ "file": "src/scripts/parsers/in/p5.js/src/math/random.js",
+ "line": 263,
"itemtype": "method",
- "name": "httpGet",
- "return": {
- "description": "A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.",
- "type": "Promise"
- },
+ "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(['🦁', '🐯', '🐻'])</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",
"example": [
- "\n<div class='norender'><code>\n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\nlet earthquakes;\nfunction preload() {\n // Get the most recent earthquake in the database\n let url =\n 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +\n 'format=geojson&limit=1&orderby=time';\n httpGet(url, 'jsonp', false, function(response) {\n // when the HTTP request completes, populate the variable that holds the\n // earthquake data used in the visualization.\n earthquakes = response;\n });\n}\n\nfunction draw() {\n if (!earthquakes) {\n // Wait until the earthquake data has loaded before drawing.\n return;\n }\n background(200);\n // Get the magnitude and name of the earthquake out of the loaded JSON\n let earthquakeMag = earthquakes.features[0].properties.mag;\n let earthquakeName = earthquakes.features[0].properties.place;\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n textAlign(CENTER);\n text(earthquakeName, 0, height - 30, width, 30);\n noLoop();\n}\n</code></div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw a point.\n strokeWeight(5);\n point(x, y);\n\n describe('A black dot appears in a random position on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(100);\n let y = random(100);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n\n describe('A black dot appears in a random position on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of emoji strings.\n let animals = ['🦁', '🐯', '🐻'];\n\n // Choose a random element from the array.\n let choice = random(animals);\n\n // Style the text.\n textAlign(CENTER);\n textSize(20);\n\n // Display the emoji.\n text(choice, 50, 50);\n\n describe('An animal face is displayed at random. Either a lion, tiger, or bear.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A black dot moves around randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(100);\n let y = random(100);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A black dot moves around randomly in the middle of a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Get random coordinates between 45 and 55.\n let x = random(45, 55);\n let y = random(45, 55);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A black dot moves around randomly leaving a trail.');\n}\n\nfunction draw() {\n // Update x and y randomly.\n x += random(-1, 1);\n y += random(-1, 1);\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "IO",
- "submodule": "Input",
"overloads": [
{
- "line": 1043,
"params": [
{
- "name": "path",
- "description": "<p>name of the file or url to load</p>\n",
- "type": "String"
- },
- {
- "name": "datatype",
- "description": "<p>\"json\", \"jsonp\", \"binary\", \"arrayBuffer\",\n \"xml\", or \"text\"</p>\n",
- "type": "String",
- "optional": true
- },
- {
- "name": "data",
- "description": "<p>param data passed sent with request</p>\n",
- "type": "Object|Boolean",
- "optional": true
- },
- {
- "name": "callback",
- "description": "<p>function to be executed after\n <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n as first argument</p>\n",
- "type": "Function",
- "optional": true
+ "name": "min",
+ "description": "lower bound (inclusive).",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "errorCallback",
- "description": "<p>function to be executed if\n there is an error, response is passed\n in as first argument</p>\n",
- "type": "Function",
- "optional": true
+ "name": "max",
+ "description": "upper bound (exclusive).",
+ "optional": 1,
+ "type": "Number"
}
],
"return": {
- "description": "A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.",
- "type": "Promise"
+ "description": "random number.",
+ "type": "Number"
}
},
{
- "line": 1097,
"params": [
{
- "name": "path",
- "description": "",
- "type": "String"
- },
- {
- "name": "data",
- "description": "",
- "type": "Object|Boolean"
- },
- {
- "name": "callback",
- "description": "",
- "type": "Function",
- "optional": true
- },
- {
- "name": "errorCallback",
- "description": "",
- "type": "Function",
- "optional": true
+ "name": "choices",
+ "description": "array to choose from.",
+ "type": "Array"
}
],
"return": {
- "description": "",
- "type": "Promise"
+ "description": "random element from the array."
}
- },
+ }
+ ],
+ "return": {
+ "description": "random number.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Random"
+ },
+ {
+ "name": "randomGaussian",
+ "file": "src/scripts/parsers/in/p5.js/src/math/random.js",
+ "line": 353,
+ "itemtype": "method",
+ "description": "<p>Returns a random number fitting a Gaussian, or normal, distribution.</p>\n<p>Normal distributions look like bell curves when plotted. Values from a\nnormal distribution cluster around a central value called the mean. The\ncluster's standard deviation describes its spread.</p>\n<p>By default, <code>randomGaussian()</code> produces different results each time a\nsketch runs. The <a href=\"#/p5/randomSeed\">randomSeed()</a> function can be\nused to generate the same sequence of numbers each time a sketch runs.</p>\n<p>There's no minimum or maximum value that <code>randomGaussian()</code> might return.\nValues far from the mean are very unlikely and values near the mean are\nvery likely.</p>\n<p>The version of <code>randomGaussian()</code> with no parameters returns values with a\nmean of 0 and standard deviation of 1.</p>\n<p>The version of <code>randomGaussian()</code> with one parameter interprets the\nargument passed as the mean. The standard deviation is 1.</p>\n<p>The version of <code>randomGaussian()</code> with two parameters interprets the first\nargument passed as the mean and the second as the standard deviation.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n 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.');\n}\n\nfunction draw() {\n // Style the circles.\n noStroke();\n fill(0, 10);\n\n // Uniform distribution between 0 and 100.\n let x = random(100);\n let y = 25;\n circle(x, y, 5);\n\n // Gaussian distribution with a mean of 50 and sd of 1.\n x = randomGaussian(50);\n y = 50;\n circle(x, y, 5);\n\n // Gaussian distribution with a mean of 50 and sd of 10.\n x = randomGaussian(50, 10);\n y = 75;\n circle(x, y, 5);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 1105,
"params": [
{
- "name": "path",
- "description": "",
- "type": "String"
- },
- {
- "name": "callback",
- "description": "",
- "type": "Function"
+ "name": "mean",
+ "description": "mean.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "errorCallback",
- "description": "",
- "type": "Function",
- "optional": true
+ "name": "sd",
+ "description": "standard deviation.",
+ "optional": 1,
+ "type": "Number"
}
],
"return": {
- "description": "",
- "type": "Promise"
+ "description": "random number.",
+ "type": "Number"
}
}
- ]
+ ],
+ "return": {
+ "description": "random number.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Random"
},
{
- "file": "src/io/files.js",
- "line": 1119,
- "description": "<p>Method for executing an HTTP POST request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling <code>httpDo(path, 'POST')</code>.</p>\n",
+ "name": "acos",
+ "file": "src/scripts/parsers/in/p5.js/src/math/trigonometry.js",
+ "line": 79,
"itemtype": "method",
- "name": "httpPost",
- "return": {
- "description": "A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.",
- "type": "Promise"
- },
+ "description": "<p>Calculates the arc cosine of a number.</p>\n<p><code>acos()</code> is the inverse of <a href=\"#/p5/cos\">cos()</a>. It expects\narguments in the range -1 to 1. By default, <code>acos()</code> returns values in the\nrange 0 to π (about 3.14). If the\n<a href=\"#/p5/angleMode\">angleMode()</a> is <code>DEGREES</code>, then values are\nreturned in the range 0 to 180.</p>\n",
"example": [
- "\n<div>\n<code>\n// Examples use jsonplaceholder.typicode.com for a Mock Data API\n\nlet url = 'https://jsonplaceholder.typicode.com/posts';\nlet postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very cool.' };\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n}\n\nfunction mousePressed() {\n httpPost(url, 'json', postData, function(result) {\n strokeWeight(2);\n text(result.body, mouseX, mouseY);\n });\n}\n</code>\n</div>\n\n<div><code>\nlet url = 'ttps://invalidURL'; // A bad URL that will cause errors\nlet postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n}\n\nfunction mousePressed() {\n httpPost(\n url,\n 'json',\n postData,\n function(result) {\n // ... won't be called\n },\n function(error) {\n strokeWeight(2);\n text(error.toString(), mouseX, mouseY);\n }\n );\n}\n</code></div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate cos() and acos() values.\n let a = PI;\n let c = cos(a);\n let ac = acos(c);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(c, 3)}`, 35, 50);\n text(`${round(ac, 3)}`, 35, 75);\n\n describe('The numbers 3.142, -1, and 3.142 written on separate rows.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate cos() and acos() values.\n let a = PI + QUARTER_PI;\n let c = cos(a);\n let ac = acos(c);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(c, 3)}`, 35, 50);\n text(`${round(ac, 3)}`, 35, 75);\n\n describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "IO",
- "submodule": "Input",
"overloads": [
{
- "line": 1119,
"params": [
{
- "name": "path",
- "description": "<p>name of the file or url to load</p>\n",
- "type": "String"
- },
- {
- "name": "datatype",
- "description": "<p>\"json\", \"jsonp\", \"xml\", or \"text\".\n If omitted, <a href=\"#/p5/httpPost\">httpPost()</a> will guess.</p>\n",
- "type": "String",
- "optional": true
- },
- {
- "name": "data",
- "description": "<p>param data passed sent with request</p>\n",
- "type": "Object|Boolean",
- "optional": true
- },
- {
- "name": "callback",
- "description": "<p>function to be executed after\n <a href=\"#/p5/httpPost\">httpPost()</a> completes, data is passed in\n as first argument</p>\n",
- "type": "Function",
- "optional": true
- },
- {
- "name": "errorCallback",
- "description": "<p>function to be executed if\n there is an error, response is passed\n in as first argument</p>\n",
- "type": "Function",
- "optional": true
+ "name": "value",
+ "description": "value whose arc cosine is to be returned.",
+ "type": "Number"
}
],
"return": {
- "description": "A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.",
- "type": "Promise"
+ "description": "arc cosine of the given value.",
+ "type": "Number"
}
- },
+ }
+ ],
+ "return": {
+ "description": "arc cosine of the given value.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Trigonometry"
+ },
+ {
+ "name": "asin",
+ "file": "src/scripts/parsers/in/p5.js/src/math/trigonometry.js",
+ "line": 141,
+ "itemtype": "method",
+ "description": "<p>Calculates the arc sine of a number.</p>\n<p><code>asin()</code> is the inverse of <a href=\"#/p5/sin\">sin()</a>. It expects input\nvalues in the range of -1 to 1. By default, <code>asin()</code> returns values in the\nrange -π ÷ 2 (about -1.57) to π ÷ 2 (about 1.57). If\nthe <a href=\"#/p5/angleMode\">angleMode()</a> is <code>DEGREES</code> then values are\nreturned in the range -90 to 90.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate sin() and asin() values.\n let a = PI / 3;\n let s = sin(a);\n let as = asin(s);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(s, 3)}`, 35, 50);\n text(`${round(as, 3)}`, 35, 75);\n\n describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate sin() and asin() values.\n let a = PI + PI / 3;\n let s = sin(a);\n let as = asin(s);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(s, 3)}`, 35, 50);\n text(`${round(as, 3)}`, 35, 75);\n\n describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 1186,
"params": [
{
- "name": "path",
- "description": "",
- "type": "String"
- },
- {
- "name": "data",
- "description": "",
- "type": "Object|Boolean"
- },
- {
- "name": "callback",
- "description": "",
- "type": "Function",
- "optional": true
- },
- {
- "name": "errorCallback",
- "description": "",
- "type": "Function",
- "optional": true
+ "name": "value",
+ "description": "value whose arc sine is to be returned.",
+ "type": "Number"
}
],
"return": {
- "description": "",
- "type": "Promise"
+ "description": "arc sine of the given value.",
+ "type": "Number"
}
- },
+ }
+ ],
+ "return": {
+ "description": "arc sine of the given value.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Trigonometry"
+ },
+ {
+ "name": "atan",
+ "file": "src/scripts/parsers/in/p5.js/src/math/trigonometry.js",
+ "line": 203,
+ "itemtype": "method",
+ "description": "<p>Calculates the arc tangent of a number.</p>\n<p><code>atan()</code> is the inverse of <a href=\"#/p5/tan\">tan()</a>. It expects input\nvalues in the range of -Infinity to Infinity. By default, <code>atan()</code> returns\nvalues in the range -π ÷ 2 (about -1.57) to π ÷ 2\n(about 1.57). If the <a href=\"#/p5/angleMode\">angleMode()</a> is <code>DEGREES</code>\nthen values are returned in the range -90 to 90.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate tan() and atan() values.\n let a = PI / 3;\n let t = tan(a);\n let at = atan(t);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(t, 3)}`, 35, 50);\n text(`${round(at, 3)}`, 35, 75);\n\n describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate tan() and atan() values.\n let a = PI + PI / 3;\n let t = tan(a);\n let at = atan(t);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(t, 3)}`, 35, 50);\n text(`${round(at, 3)}`, 35, 75);\n\n describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 1194,
"params": [
{
- "name": "path",
- "description": "",
- "type": "String"
- },
- {
- "name": "callback",
- "description": "",
- "type": "Function"
- },
- {
- "name": "errorCallback",
- "description": "",
- "type": "Function",
- "optional": true
+ "name": "value",
+ "description": "value whose arc tangent is to be returned.",
+ "type": "Number"
}
],
"return": {
- "description": "",
- "type": "Promise"
+ "description": "arc tangent of the given value.",
+ "type": "Number"
}
}
- ]
+ ],
+ "return": {
+ "description": "arc tangent of the given value.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Trigonometry"
},
{
- "file": "src/io/files.js",
- "line": 1208,
- "description": "<p>Method for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.<br><br>\nFor more advanced use, you may also pass in the path as the first argument\nand a object as the second argument, the signature follows the one specified\nin the Fetch API specification.\nThis method is suitable for fetching files up to size of 64MB when \"GET\" is used.</p>\n",
+ "name": "atan2",
+ "file": "src/scripts/parsers/in/p5.js/src/math/trigonometry.js",
+ "line": 280,
"itemtype": "method",
- "name": "httpDo",
- "return": {
- "description": "A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.",
- "type": "Promise"
- },
+ "description": "<p>Calculates the angle formed by a point, the origin, and the positive\nx-axis.</p>\n<p><code>atan2()</code> is most often used for orienting geometry to the mouse's\nposition, as in <code>atan2(mouseY, mouseX)</code>. The first parameter is the point's\ny-coordinate and the second parameter is its x-coordinate.</p>\n<p>By default, <code>atan2()</code> returns values in the range\n-π (about -3.14) to π (3.14). If the\n<a href=\"#/p5/angleMode\">angleMode()</a> is <code>DEGREES</code>, then values are\nreturned in the range -180 to 180.</p>\n",
"example": [
- "\n<div>\n<code>\n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\n\n// displays an animation of all USGS earthquakes\nlet earthquakes;\nlet eqFeatureIndex = 0;\n\nfunction preload() {\n let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';\n httpDo(\n url,\n {\n method: 'GET',\n // Other Request options, like special headers for apis\n headers: { authorization: 'Bearer secretKey' }\n },\n function(res) {\n earthquakes = res;\n }\n );\n}\n\nfunction draw() {\n // wait until the data is loaded\n if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {\n return;\n }\n clear();\n\n let feature = earthquakes.features[eqFeatureIndex];\n let mag = feature.properties.mag;\n let rad = mag / 11 * ((width + height) / 2);\n fill(255, 0, 0, 100);\n ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);\n\n if (eqFeatureIndex >= earthquakes.features.length) {\n eqFeatureIndex = 0;\n } else {\n eqFeatureIndex += 1;\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle at the top-left of the canvas rotates with mouse movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the angle between the mouse\n // and the origin.\n let a = atan2(mouseY, mouseX);\n\n // Rotate.\n rotate(a);\n\n // Draw the shape.\n rect(0, 0, 60, 10);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle at the center of the canvas rotates with mouse movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Get the mouse's coordinates relative to the origin.\n let x = mouseX - 50;\n let y = mouseY - 50;\n\n // Calculate the angle between the mouse and the origin.\n let a = atan2(y, x);\n\n // Rotate.\n rotate(a);\n\n // Draw the shape.\n rect(-30, -5, 60, 10);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "IO",
- "submodule": "Input",
"overloads": [
{
- "line": 1208,
"params": [
{
- "name": "path",
- "description": "<p>name of the file or url to load</p>\n",
- "type": "String"
- },
- {
- "name": "method",
- "description": "<p>either \"GET\", \"POST\", or \"PUT\",\n defaults to \"GET\"</p>\n",
- "type": "String",
- "optional": true
- },
- {
- "name": "datatype",
- "description": "<p>\"json\", \"jsonp\", \"xml\", or \"text\"</p>\n",
- "type": "String",
- "optional": true
- },
- {
- "name": "data",
- "description": "<p>param data passed sent with request</p>\n",
- "type": "Object",
- "optional": true
- },
- {
- "name": "callback",
- "description": "<p>function to be executed after\n <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n as first argument</p>\n",
- "type": "Function",
- "optional": true
+ "name": "y",
+ "description": "y-coordinate of the point.",
+ "type": "Number"
},
{
- "name": "errorCallback",
- "description": "<p>function to be executed if\n there is an error, response is passed\n in as first argument</p>\n",
- "type": "Function",
- "optional": true
+ "name": "x",
+ "description": "x-coordinate of the point.",
+ "type": "Number"
}
],
"return": {
- "description": "A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs.",
- "type": "Promise"
+ "description": "arc tangent of the given point.",
+ "type": "Number"
}
- },
+ }
+ ],
+ "return": {
+ "description": "arc tangent of the given point.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Trigonometry"
+ },
+ {
+ "name": "cos",
+ "file": "src/scripts/parsers/in/p5.js/src/math/trigonometry.js",
+ "line": 361,
+ "itemtype": "method",
+ "description": "<p>Calculates the cosine of an angle.</p>\n<p><code>cos()</code> is useful for many geometric tasks in creative coding. The values\nreturned oscillate between -1 and 1 as the input angle increases. <code>cos()</code>\ncalculates the cosine of an angle, using radians by default, or according\nto if <a href=\"#/p5/angleMode\">angleMode()</a> setting (RADIANS or DEGREES).</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.05) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form a wave pattern.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 30 * cos(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form an infinity symbol.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.1) + 50;\n let y = 10 * sin(frameCount * 0.2) + 50;\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 1279,
"params": [
{
- "name": "path",
- "description": "",
- "type": "String"
- },
- {
- "name": "options",
- "description": "<p>Request object options as documented in the\n \"fetch\" API\n<a href=\"https://developer.mozilla.org/en/docs/Web/API/Fetch_API\">reference</a></p>\n",
- "type": "Object"
- },
- {
- "name": "callback",
- "description": "",
- "type": "Function",
- "optional": true
- },
- {
- "name": "errorCallback",
- "description": "",
- "type": "Function",
- "optional": true
+ "name": "angle",
+ "description": "the angle, in radians by default, or according to if <a href=\"/reference/p5/angleMode/\">angleMode()</a> setting (RADIANS or DEGREES).",
+ "type": "Number"
}
],
"return": {
- "description": "",
- "type": "Promise"
+ "description": "cosine of the angle.",
+ "type": "Number"
}
}
- ]
+ ],
+ "return": {
+ "description": "cosine of the angle.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Trigonometry"
},
{
- "file": "src/io/files.js",
- "line": 1444,
- "description": "<p>Creates a new <a href=\"#/p5.PrintWriter\">p5.PrintWriter</a> object.</p>\n<p><a href=\"#/p5.PrintWriter\">p5.PrintWriter</a> objects provide a way to\nsave a sequence of text data, called the <em>print stream</em>, to the user's\ncomputer. They're low-level objects that enable precise control of text\noutput. Functions such as\n<a href=\"#/p5/saveStrings\">saveStrings()</a> and\n<a href=\"#/p5/saveJSON\">saveJSON()</a> are easier to use for simple file\nsaving.</p>\n<p>The first parameter, <code>filename</code>, is the name of the file to be written. If\na string is passed, as in <code>createWriter('words.txt')</code>, a new\n<a href=\"#/p5.PrintWriter\">p5.PrintWriter</a> object will be created that\nwrites to a file named <code>words.txt</code>.</p>\n<p>The second parameter, <code>extension</code>, is optional. If a string is passed, as\nin <code>createWriter('words', 'csv')</code>, the first parameter will be interpreted\nas the file name and the second parameter as the extension.</p>\n",
+ "name": "sin",
+ "file": "src/scripts/parsers/in/p5.js/src/math/trigonometry.js",
+ "line": 442,
"itemtype": "method",
- "name": "createWriter",
- "params": [
- {
- "name": "name",
- "description": "<p>name of the file to create.</p>\n",
- "type": "String"
- },
+ "description": "<p>Calculates the sine of an angle.</p>\n<p><code>sin()</code> is useful for many geometric tasks in creative coding. The values\nreturned oscillate between -1 and 1 as the input angle increases. <code>sin()</code>\ncalculates the sine of an angle, using radians by default, or according to\nif <a href=\"#/p5/angleMode\">angleMode()</a> setting (RADIANS or DEGREES).</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates up and down.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 50;\n let y = 30 * sin(frameCount * 0.05) + 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form a wave pattern.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 30 * sin(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form an infinity symbol.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.1) + 50;\n let y = 10 * sin(frameCount * 0.2) + 50;\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "extension",
- "description": "<p>format to use for the file.</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "angle",
+ "description": "the angle, in radians by default, or according to if <a href=\"/reference/p5/angleMode/\">angleMode()</a> setting (RADIANS or DEGREES).",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "sine of the angle.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "stream for writing data.",
- "type": "p5.PrintWriter"
+ "description": "sine of the angle.",
+ "type": "Number"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('xo.txt');\n\n // Add some lines to the print stream.\n myWriter.print('XOO');\n myWriter.print('OXO');\n myWriter.print('OOX');\n\n // Save the file and close the print stream.\n myWriter.close();\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create a p5.PrintWriter object.\n // Use the file format .csv.\n let myWriter = createWriter('mauna_loa_co2', 'csv');\n\n // Add some lines to the print stream.\n myWriter.print('date,ppm_co2');\n myWriter.print('1960-01-01,316.43');\n myWriter.print('1970-01-01,325.06');\n myWriter.print('1980-01-01,337.9');\n myWriter.print('1990-01-01,353.86');\n myWriter.print('2000-01-01,369.45');\n myWriter.print('2020-01-01,413.61');\n\n // Save the file and close the print stream.\n myWriter.close();\n }\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "IO",
- "submodule": "Output"
+ "static": false,
+ "module": "Math",
+ "submodule": "Trigonometry"
},
{
- "file": "src/io/files.js",
- "line": 1622,
- "description": "<p>Writes data to the print stream without adding new lines.</p>\n<p>The parameter, <code>data</code>, is the data to write. <code>data</code> can be a number or\nstring, as in <code>myWriter.write('hi')</code>, or an array of numbers and strings,\nas in <code>myWriter.write([1, 2, 3])</code>. A comma will be inserted between array\narray elements when they're added to the print stream.</p>\n",
+ "name": "tan",
+ "file": "src/scripts/parsers/in/p5.js/src/math/trigonometry.js",
+ "line": 481,
"itemtype": "method",
- "name": "write",
- "params": [
+ "description": "<p>Calculates the tangent of an angle.</p>\n<p><code>tan()</code> is useful for many geometric tasks in creative coding. The values\nreturned range from -Infinity to Infinity and repeat periodically as the\ninput angle increases. <code>tan()</code> calculates the tan of an angle, using radians\nby default, or according to\nif <a href=\"#/p5/angleMode\">angleMode()</a> setting (RADIANS or DEGREES).</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n 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.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 5 * tan(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "data",
- "description": "<p>data to be written as a string, number,\n or array of strings and numbers.</p>\n",
- "type": "String|Number|Array"
+ "params": [
+ {
+ "name": "angle",
+ "description": "the angle, in radians by default, or according to if <a href=\"/reference/p5/angleMode/\">angleMode()</a> setting (RADIANS or DEGREES).",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "tangent of the angle.",
+ "type": "Number"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('numbers.txt');\n\n // Add some data to the print stream.\n myWriter.write('1,2,3,');\n myWriter.write(['4', '5', '6']);\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n</code>\n</div>"
- ],
- "class": "p5.PrintWriter",
- "module": "IO",
- "submodule": "Output"
+ "return": {
+ "description": "tangent of the angle.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Trigonometry"
},
{
- "file": "src/io/files.js",
- "line": 1672,
- "description": "<p>Writes data to the print stream with new lines added.</p>\n<p>The parameter, <code>data</code>, is the data to write. <code>data</code> can be a number or\nstring, as in <code>myWriter.print('hi')</code>, or an array of numbers and strings,\nas in <code>myWriter.print([1, 2, 3])</code>. A comma will be inserted between array\narray elements when they're added to the print stream.</p>\n",
+ "name": "degrees",
+ "file": "src/scripts/parsers/in/p5.js/src/math/trigonometry.js",
+ "line": 519,
"itemtype": "method",
- "name": "print",
- "params": [
+ "description": "<p>Converts an angle measured in radians to its value in degrees.</p>\n<p>Degrees and radians are both units for measuring angles. There are 360˚ in\none full rotation. A full rotation is 2 × π (about 6.28) radians.</p>\n<p>The same angle can be expressed in with either unit. For example, 90° is a\nquarter of a full rotation. The same angle is 2 × π ÷ 4\n(about 1.57) radians.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the angle conversion.\n let rad = QUARTER_PI;\n let deg = degrees(rad);\n\n // Display the conversion.\n text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);\n\n describe('The text \"0.79 rad = 45˚\".');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "data",
- "description": "<p>data to be written as a string, number,\n or array of strings and numbers.</p>\n",
- "type": "String|Number|Array"
+ "params": [
+ {
+ "name": "radians",
+ "description": "radians value to convert to degrees.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "converted angle.",
+ "type": "Number"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('numbers.txt');\n\n // Add some data to the print stream.\n myWriter.print('1,2,3,');\n myWriter.print(['4', '5', '6']);\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n</code>\n</div>"
- ],
- "class": "p5.PrintWriter",
- "module": "IO",
- "submodule": "Output"
+ "return": {
+ "description": "converted angle.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Trigonometry"
},
{
- "file": "src/io/files.js",
- "line": 1722,
- "description": "<p>Clears all data from the print stream.</p>\n",
+ "name": "radians",
+ "file": "src/scripts/parsers/in/p5.js/src/math/trigonometry.js",
+ "line": 555,
"itemtype": "method",
- "name": "clear",
+ "description": "<p>Converts an angle measured in degrees to its value in radians.</p>\n<p>Degrees and radians are both units for measuring angles. There are 360˚ in\none full rotation. A full rotation is 2 × π (about 6.28) radians.</p>\n<p>The same angle can be expressed in with either unit. For example, 90° is a\nquarter of a full rotation. The same angle is 2 × π ÷ 4\n(about 1.57) radians.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('numbers.txt');\n\n // Add some data to the print stream.\n myWriter.print('Hello p5*js!');\n\n // Clear the print stream.\n myWriter.clear();\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Caclulate the angle conversion.\n let deg = 45;\n let rad = radians(deg);\n\n // Display the angle conversion.\n text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);\n\n describe('The text \"45˚ = 0.785 rad\".');\n}\n</code>\n</div>"
],
- "class": "p5.PrintWriter",
- "module": "IO",
- "submodule": "Output"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "degrees",
+ "description": "degree value to convert to radians.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "converted angle.",
+ "type": "Number"
+ }
+ }
+ ],
+ "return": {
+ "description": "converted angle.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Trigonometry"
},
{
- "file": "src/io/files.js",
- "line": 1767,
- "description": "<p>Saves the file and closes the print stream.</p>\n",
+ "name": "angleMode",
+ "file": "src/scripts/parsers/in/p5.js/src/math/trigonometry.js",
+ "line": 746,
"itemtype": "method",
- "name": "close",
+ "description": "<p>Changes the unit system used to measure angles.</p>\n<p>Degrees and radians are both units for measuring angles. There are 360˚ in\none full rotation. A full rotation is 2 × π (about 6.28) radians.</p>\n<p>Functions such as <a href=\"#/p5/rotate\">rotate()</a> and\n<a href=\"#/p5/sin\">sin()</a> expect angles measured radians by default.\nCalling <code>angleMode(DEGREES)</code> switches to degrees. Calling\n<code>angleMode(RADIANS)</code> switches back to radians.</p>\n<p>Calling <code>angleMode()</code> with no arguments returns current angle mode, which\nis either <code>RADIANS</code> or <code>DEGREES</code>.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('cat.txt');\n\n // Add some data to the print stream.\n // ASCII art courtesy Wikipedia:\n // https://en.wikipedia.org/wiki/ASCII_art\n myWriter.print(' (\\\\_/) ');\n myWriter.print(\"(='.'=)\");\n myWriter.print('(\")_(\")');\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Rotate 1/8 turn.\n rotate(QUARTER_PI);\n\n // Draw a line.\n line(0, 0, 80, 0);\n\n describe('A diagonal line radiating from the top-left corner of a square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Rotate 1/8 turn.\n rotate(45);\n\n // Draw a line.\n line(0, 0, 80, 0);\n\n describe('A diagonal line radiating from the top-left corner of a square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Calculate the angle to rotate.\n let angle = TWO_PI / 7;\n\n // Move the origin to the center.\n translate(50, 50);\n\n // Style the flower.\n noStroke();\n fill(255, 50);\n\n // Draw the flower.\n for (let i = 0; i < 7; i += 1) {\n ellipse(0, 0, 80, 20);\n rotate(angle);\n }\n\n describe('A translucent white flower on a dark background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Calculate the angle to rotate.\n let angle = 360 / 7;\n\n // Move the origin to the center.\n translate(50, 50);\n\n // Style the flower.\n noStroke();\n fill(255, 50);\n\n // Draw the flower.\n for (let i = 0; i < 7; i += 1) {\n ellipse(0, 0, 80, 20);\n rotate(angle);\n }\n\n describe('A translucent white flower on a dark background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.05) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 2.86) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the upper line.\n rotate(PI / 6);\n line(0, 0, 80, 0);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw the lower line.\n rotate(30);\n line(0, 0, 80, 0);\n\n 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.');\n}\n</code>\n</div>"
],
- "class": "p5.PrintWriter",
- "module": "IO",
- "submodule": "Output"
- },
- {
- "file": "src/io/files.js",
- "line": 1835,
- "description": "<p>Saves a given element(image, text, json, csv, wav, or html) to the client's\ncomputer. The first parameter can be a pointer to element we want to save.\nThe element can be one of <a href=\"#/p5.Element\">p5.Element</a>,an Array of\nStrings, an Array of JSON, a JSON object, a <a href=\"#/p5.Table\">p5.Table\n</a>, a <a href=\"#/p5.Image\">p5.Image</a>, or a p5.SoundFile (requires\np5.sound). The second parameter is a filename (including extension).The\nthird parameter is for options specific to this type of object. This method\nwill save a file that fits the given parameters.\nIf it is called without specifying an element, by default it will save the\nwhole canvas as an image file. You can optionally specify a filename as\nthe first parameter in such a case.\n<strong>Note that it is not recommended to\ncall this method within draw, as it will open a new save dialog on every\nrender.</strong></p>\n",
- "itemtype": "method",
- "name": "save",
- "params": [
- {
- "name": "objectOrFilename",
- "description": "<p>If filename is provided, will\n save canvas as an image with\n either png or jpg extension\n depending on the filename.\n If object is provided, will\n save depending on the object\n and filename (see examples\n above).</p>\n",
- "type": "Object|String",
- "optional": true
- },
+ "overloads": [
{
- "name": "filename",
- "description": "<p>If an object is provided as the first\n parameter, then the second parameter\n indicates the filename,\n and should include an appropriate\n file extension (see examples above).</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "mode",
+ "description": "either RADIANS or DEGREES.",
+ "type": "RADIANS|DEGREES"
+ }
+ ]
},
{
- "name": "options",
- "description": "<p>Additional options depend on\n filetype. For example, when saving JSON,\n <code>true</code> indicates that the\n output will be optimized for filesize,\n rather than readability.</p>\n",
- "type": "Boolean|String",
- "optional": true
+ "params": [],
+ "return": {
+ "description": "mode either RADIANS or DEGREES",
+ "type": "RADIANS|DEGREES"
+ }
}
],
+ "return": {
+ "description": "mode either RADIANS or DEGREES",
+ "type": "RADIANS|DEGREES"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Math",
+ "submodule": "Trigonometry"
+ },
+ {
+ "name": "arc",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/2d_primitives.js",
+ "line": 311,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Draws an arc.</p>\n<p>An arc is a section of an ellipse defined by the <code>x</code>, <code>y</code>, <code>w</code>, and\n<code>h</code> parameters. <code>x</code> and <code>y</code> set the location of the arc's center. <code>w</code> and\n<code>h</code> set the arc's width and height. See\n<a href=\"#/p5/ellipse\">ellipse()</a> and\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a> for more details.</p>\n<p>The fifth and sixth parameters, <code>start</code> and <code>stop</code>, set the angles\nbetween which to draw the arc. Arcs are always drawn clockwise from\n<code>start</code> to <code>stop</code>. Angles are always given in radians.</p>\n<p>The seventh parameter, <code>mode</code>, is optional. It determines the arc's fill\nstyle. The fill modes are a semi-circle (<code>OPEN</code>), a closed semi-circle\n(<code>CHORD</code>), or a closed pie segment (<code>PIE</code>).</p>\n<p>The eighth parameter, <code>detail</code>, is also optional. It determines how many\nvertices are used to draw the arc in WebGL mode. The default value is 25.</p>\n",
"example": [
- "\n <div class=\"norender\"><code>\n // Saves the canvas as an image\n cnv = createCanvas(300, 300);\n save(cnv, 'myCanvas.jpg');\n\n // Saves the canvas as an image by default\n save('myCanvas.jpg');\n describe('An example for saving a canvas as an image.');\n </code></div>\n\n <div class=\"norender\"><code>\n // Saves p5.Image as an image\n img = createImage(10, 10);\n save(img, 'myImage.png');\n describe('An example for saving a p5.Image element as an image.');\n </code></div>\n\n <div class=\"norender\"><code>\n // Saves p5.Renderer object as an image\n obj = createGraphics(100, 100);\n save(obj, 'myObject.png');\n describe('An example for saving a p5.Renderer element.');\n </code></div>\n\n <div class=\"norender\"><code>\n let myTable = new p5.Table();\n // Saves table as html file\n save(myTable, 'myTable.html');\n\n // Comma Separated Values\n save(myTable, 'myTable.csv');\n\n // Tab Separated Values\n save(myTable, 'myTable.tsv');\n\n describe(`An example showing how to save a table in formats of\n HTML, CSV and TSV.`);\n </code></div>\n\n <div class=\"norender\"><code>\n let myJSON = { a: 1, b: true };\n\n // Saves pretty JSON\n save(myJSON, 'my.json');\n\n // Optimizes JSON filesize\n save(myJSON, 'my.json', true);\n\n describe('An example for saving JSON to a txt file with some extra arguments.');\n </code></div>\n\n <div class=\"norender\"><code>\n // Saves array of strings to text file with line breaks after each item\n let arrayOfStrings = ['a', 'b'];\n save(arrayOfStrings, 'my.txt');\n describe(`An example for saving an array of strings to text file\n with line breaks.`);\n </code></div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n arc(50, 50, 80, 80, 0, PI + HALF_PI);\n\n describe('A white circle on a gray canvas. The top-right quarter of the circle is missing.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n arc(50, 50, 80, 40, 0, PI + HALF_PI);\n\n describe('A white ellipse on a gray canvas. The top-right quarter of the ellipse is missing.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Bottom-right.\n arc(50, 55, 50, 50, 0, HALF_PI);\n\n noFill();\n\n // Bottom-left.\n arc(50, 55, 60, 60, HALF_PI, PI);\n\n // Top-left.\n arc(50, 55, 70, 70, PI, PI + QUARTER_PI);\n\n // Top-right.\n arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n\n describe(\n 'A shattered outline of an circle with a quarter of a white circle at the bottom-right.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Default fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n\n describe('A white circle with the top-right third missing. The bottom is outlined in black.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // OPEN fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n\n describe(\n 'A white circle missing a section from the top-right. The bottom is outlined in black.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // CHORD fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n\n describe('A white circle with a black outline missing a section from the top-right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // PIE fill mode.\n arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n\n describe('A white circle with a black outline. The top-right third is missing.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // PIE fill mode.\n arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE);\n\n describe('A white circle with a black outline. The top-right third is missing.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // PIE fill mode with 5 vertices.\n arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE, 5);\n\n describe('A white circle with a black outline. The top-right third is missing.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A yellow circle on a black background. The circle opens and closes its mouth.');\n}\n\nfunction draw() {\n background(0);\n\n // Style the arc.\n noStroke();\n fill(255, 255, 0);\n\n // Update start and stop angles.\n let biteSize = PI / 16;\n let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;\n let endAngle = TWO_PI - startAngle;\n\n // Draw the arc.\n arc(50, 50, 80, 80, startAngle, endAngle, PIE);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the arc's ellipse.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the arc's ellipse.",
+ "type": "Number"
+ },
+ {
+ "name": "w",
+ "description": "width of the arc's ellipse by default.",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "description": "height of the arc's ellipse by default.",
+ "type": "Number"
+ },
+ {
+ "name": "start",
+ "description": "angle to start the arc, specified in radians.",
+ "type": "Number"
+ },
+ {
+ "name": "stop",
+ "description": "angle to stop the arc, specified in radians.",
+ "type": "Number"
+ },
+ {
+ "name": "mode",
+ "description": "optional parameter to determine the way of drawing\nthe arc. either CHORD, PIE, or OPEN.",
+ "optional": 1,
+ "type": "CHORD|PIE|OPEN"
+ },
+ {
+ "name": "detail",
+ "description": "optional parameter for WebGL mode only. This is to\nspecify the number of vertices that makes up the\nperimeter of the arc. Default value is 25. Won't\ndraw a stroke for a detail of more than 50.",
+ "optional": 1,
+ "type": "Integer"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "IO",
- "submodule": "Output"
+ "static": false,
+ "module": "Shape",
+ "submodule": "2D Primitives"
},
{
- "file": "src/io/files.js",
- "line": 1979,
- "description": "<p>Saves an <code>Object</code> or <code>Array</code> to a JSON file.</p>\n<p>JavaScript Object Notation\n(<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/JSON\" target=\"_blank\">JSON</a>)\nis a standard format for sending data between applications. The format is\nbased on JavaScript objects which have keys and values. JSON files store\ndata in an object with strings as keys. Values can be strings, numbers,\nBooleans, arrays, <code>null</code>, or other objects.</p>\n<p>The first parameter, <code>json</code>, is the data to save. The data can be an array,\nas in <code>[1, 2, 3]</code>, or an object, as in\n<code>{ x: 50, y: 50, color: 'deeppink' }</code>.</p>\n<p>The second parameter, <code>filename</code>, is a string that sets the file's name.\nFor example, calling <code>saveJSON([1, 2, 3], 'data.json')</code> saves the array\n<code>[1, 2, 3]</code> to a file called <code>data.json</code> on the user's computer.</p>\n<p>The third parameter, <code>optimize</code>, is optional. If <code>true</code> is passed, as in\n<code>saveJSON([1, 2, 3], 'data.json', true)</code>, then all unneeded whitespace will\nbe removed to reduce the file size.</p>\n<p>Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.</p>\n",
+ "name": "ellipse",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/2d_primitives.js",
+ "line": 479,
"itemtype": "method",
- "name": "saveJSON",
- "params": [
- {
- "name": "json",
- "description": "<p>data to save.</p>\n",
- "type": "Array|Object"
- },
+ "chainable": 1,
+ "description": "<p>Draws an ellipse (oval).</p>\n<p>An ellipse is a round shape defined by the <code>x</code>, <code>y</code>, <code>w</code>, and\n<code>h</code> parameters. <code>x</code> and <code>y</code> set the location of its center. <code>w</code> and\n<code>h</code> set its width and height. See\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a> for other ways to set\nits position.</p>\n<p>If no height is set, the value of width is used for both the width and\nheight. If a negative height or width is specified, the absolute value is\ntaken.</p>\n<p>The fifth parameter, <code>detail</code>, is also optional. It determines how many\nvertices are used to draw the ellipse in WebGL mode. The default value is\n25.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n ellipse(50, 50, 80, 80);\n\n describe('A white circle on a gray canvas.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n ellipse(50, 50, 80);\n\n describe('A white circle on a gray canvas.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n ellipse(50, 50, 80, 40);\n\n describe('A white ellipse on a gray canvas.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n ellipse(0, 0, 80, 40);\n\n describe('A white ellipse on a gray canvas.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Use 6 vertices.\n ellipse(0, 0, 80, 40, 6);\n\n describe('A white hexagon on a gray canvas.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "filename",
- "description": "<p>name of the file to be saved.</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the center of the ellipse.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the center of the ellipse.",
+ "type": "Number"
+ },
+ {
+ "name": "w",
+ "description": "width of the ellipse.",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "description": "height of the ellipse.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
},
{
- "name": "optimize",
- "description": "<p>whether to trim unneeded whitespace. Defaults\n to <code>true</code>.</p>\n",
- "type": "Boolean",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "w",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "type": "Number"
+ },
+ {
+ "name": "detail",
+ "description": "optional parameter for WebGL mode only. This is to\nspecify the number of vertices that makes up the\nperimeter of the ellipse. Default value is 25. Won't\ndraw a stroke for a detail of more than 50.",
+ "optional": 1,
+ "type": "Integer"
+ }
+ ]
}
],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "2D Primitives"
+ },
+ {
+ "name": "circle",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/2d_primitives.js",
+ "line": 529,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Draws a circle.</p>\n<p>A circle is a round shape defined by the <code>x</code>, <code>y</code>, and <code>d</code> parameters.\n<code>x</code> and <code>y</code> set the location of its center. <code>d</code> sets its width and height (diameter).\nEvery point on the circle's edge is the same distance, <code>0.5 * d</code>, from its center.\n<code>0.5 * d</code> (half the diameter) is the circle's radius.\nSee <a href=\"#/p5/ellipseMode\">ellipseMode()</a> for other ways to set its position.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an array.\n let data = [1, 2, 3];\n\n // Save the JSON file.\n saveJSON(data, 'numbers.json');\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an object.\n let data = { x: mouseX, y: mouseY };\n\n // Save the JSON file.\n saveJSON(data, 'state.json');\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an object.\n let data = { x: mouseX, y: mouseY };\n\n // Save the JSON file and reduce its size.\n saveJSON(data, 'state.json', true);\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n circle(50, 50, 25);\n\n describe('A white circle with black outline in the middle of a gray canvas.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n circle(0, 0, 25);\n\n describe('A white circle with black outline in the middle of a gray canvas.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the center of the circle.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the center of the circle.",
+ "type": "Number"
+ },
+ {
+ "name": "d",
+ "description": "diameter of the circle.",
+ "type": "Number"
+ }
+ ]
+ }
],
"class": "p5",
- "module": "IO",
- "submodule": "Output"
+ "static": false,
+ "module": "Shape",
+ "submodule": "2D Primitives"
},
{
- "file": "src/io/files.js",
- "line": 2118,
- "description": "<p>Saves an <code>Array</code> of <code>String</code>s to a file, one per line.</p>\n<p>The first parameter, <code>list</code>, is an array with the strings to save.</p>\n<p>The second parameter, <code>filename</code>, is a string that sets the file's name.\nFor example, calling <code>saveStrings(['0', '01', '011'], 'data.txt')</code> saves\nthe array <code>['0', '01', '011']</code> to a file called <code>data.txt</code> on the user's\ncomputer.</p>\n<p>The third parameter, <code>extension</code>, is optional. If a string is passed, as in\n<code>saveStrings(['0', '01', '0</code>1'], 'data', 'txt')`, the second parameter will\nbe interpreted as the file name and the third parameter as the extension.</p>\n<p>The fourth parameter, <code>isCRLF</code>, is also optional, If <code>true</code> is passed, as\nin <code>saveStrings(['0', '01', '011'], 'data', 'txt', true)</code>, then two\ncharacters, <code>\\r\\n</code> , will be added to the end of each string to create new\nlines in the saved file. <code>\\r</code> is a carriage return (CR) and <code>\\n</code> is a line\nfeed (LF). By default, only <code>\\n</code> (line feed) is added to each string in\norder to create new lines.</p>\n<p>Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.</p>\n",
+ "name": "line",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/2d_primitives.js",
+ "line": 702,
"itemtype": "method",
- "name": "saveStrings",
- "params": [
- {
- "name": "list",
- "description": "<p>data to save.</p>\n",
- "type": "String[]"
- },
- {
- "name": "filename",
- "description": "<p>name of file to be saved.</p>\n",
- "type": "String"
- },
+ "chainable": 1,
+ "description": "<p>Draws a straight line between two points.</p>\n<p>A line's default width is one pixel. The version of <code>line()</code> with four\nparameters draws the line in 2D. To color a line, use the\n<a href=\"#/p5/stroke\">stroke()</a> function. To change its width, use the\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a> function. A line\ncan't be filled, so the <a href=\"#/p5/fill\">fill()</a> function won't\naffect the line's color.</p>\n<p>The version of <code>line()</code> with six parameters allows the line to be drawn in\n3D space. Doing so requires adding the <code>WEBGL</code> argument to\n<a href=\"#/p5/createCanvas\">createCanvas()</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n line(30, 20, 85, 75);\n\n describe(\n 'A black line on a gray canvas running from top-center to bottom-right.'\n );\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n stroke('magenta');\n strokeWeight(5);\n\n line(30, 20, 85, 75);\n\n describe(\n 'A thick, magenta line on a gray canvas running from top-center to bottom-right.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n line(30, 20, 85, 20);\n\n // Right.\n stroke(126);\n line(85, 20, 85, 75);\n\n // Bottom.\n stroke(255);\n line(85, 75, 30, 75);\n\n describe(\n 'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'\n );\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n line(-20, -30, 35, 25);\n\n describe(\n 'A black line on a gray canvas running from top-center to bottom-right.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black line connecting two spheres. The scene spins slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw a line.\n line(0, 0, 0, 30, 20, -10);\n\n // Draw the center sphere.\n sphere(10);\n\n // Translate to the second point.\n translate(30, 20, -10);\n\n // Draw the bottom-right sphere.\n sphere(10);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "extension",
- "description": "<p>format to use for the file.</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "x1",
+ "description": "the x-coordinate of the first point.",
+ "type": "Number"
+ },
+ {
+ "name": "y1",
+ "description": "the y-coordinate of the first point.",
+ "type": "Number"
+ },
+ {
+ "name": "x2",
+ "description": "the x-coordinate of the second point.",
+ "type": "Number"
+ },
+ {
+ "name": "y2",
+ "description": "the y-coordinate of the second point.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "isCRLF",
- "description": "<p>whether to add <code>\\r\\n</code> to the end of each\n string. Defaults to <code>false</code>.</p>\n",
- "type": "Boolean",
- "optional": true
+ "params": [
+ {
+ "name": "x1",
+ "type": "Number"
+ },
+ {
+ "name": "y1",
+ "type": "Number"
+ },
+ {
+ "name": "z1",
+ "description": "the z-coordinate of the first point.",
+ "type": "Number"
+ },
+ {
+ "name": "x2",
+ "type": "Number"
+ },
+ {
+ "name": "y2",
+ "type": "Number"
+ },
+ {
+ "name": "z2",
+ "description": "the z-coordinate of the second point.",
+ "type": "Number"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an array.\n let data = ['0', '01', '011'];\n\n // Save the text file.\n saveStrings(data, 'data.txt');\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an array.\n // ASCII art courtesy Wikipedia:\n // https://en.wikipedia.org/wiki/ASCII_art\n let data = [' (\\\\_/) ', \"(='.'=)\", '(\")_(\")'];\n\n // Save the text file.\n saveStrings(data, 'cat', 'txt');\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an array.\n // +--+\n // / /|\n // +--+ +\n // | |/\n // +--+\n let data = [' +--+', ' / /|', '+--+ +', '| |/', '+--+'];\n\n // Save the text file.\n // Use CRLF for line endings.\n saveStrings(data, 'box', 'txt', true);\n }\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "IO",
- "submodule": "Output"
+ "static": false,
+ "module": "Shape",
+ "submodule": "2D Primitives"
},
{
- "file": "src/io/files.js",
- "line": 2275,
- "description": "<p>Writes the contents of a <a href=\"#/p5.Table\">Table</a> object to a file. Defaults to a\ntext file with comma-separated-values ('csv') but can also\nuse tab separation ('tsv'), or generate an HTML table ('html').\nThe file saving process and location of the saved file will\nvary between web browsers.</p>\n",
+ "name": "point",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/2d_primitives.js",
+ "line": 886,
"itemtype": "method",
- "name": "saveTable",
- "params": [
- {
- "name": "Table",
- "description": "<p>the <a href=\"#/p5.Table\">Table</a> object to save to a file</p>\n",
- "type": "p5.Table"
- },
+ "chainable": 1,
+ "description": "<p>Draws a single point in space.</p>\n<p>A point's default width is one pixel. To color a point, use the\n<a href=\"#/p5/stroke\">stroke()</a> function. To change its width, use the\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a> function. A point\ncan't be filled, so the <a href=\"#/p5/fill\">fill()</a> function won't\naffect the point's color.</p>\n<p>The version of <code>point()</code> with two parameters allows the point's location to\nbe set with its x- and y-coordinates, as in <code>point(10, 20)</code>.</p>\n<p>The version of <code>point()</code> with three parameters allows the point to be drawn\nin 3D space with x-, y-, and z-coordinates, as in <code>point(10, 20, 30)</code>.\nDoing so requires adding the <code>WEBGL</code> argument to\n<a href=\"#/p5/createCanvas\">createCanvas()</a>.</p>\n<p>The version of <code>point()</code> with one parameter allows the point's location to\nbe set with a <a href=\"#/p5/p5.Vector\">p5.Vector</a> object.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n point(30, 20);\n\n // Top-right.\n point(85, 20);\n\n // Bottom-right.\n point(85, 75);\n\n // Bottom-left.\n point(30, 75);\n\n describe(\n 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n point(30, 20);\n\n // Top-right.\n point(70, 20);\n\n // Style the next points.\n stroke('purple');\n strokeWeight(10);\n\n // Bottom-right.\n point(70, 80);\n\n // Bottom-left.\n point(30, 80);\n\n describe(\n 'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let a = createVector(30, 20);\n point(a);\n\n // Top-right.\n let b = createVector(70, 20);\n point(b);\n\n // Bottom-right.\n let c = createVector(70, 80);\n point(c);\n\n // Bottom-left.\n let d = createVector(30, 80);\n point(d);\n\n describe(\n 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two purple points drawn on a gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the points.\n stroke('purple');\n strokeWeight(10);\n\n // Top-left.\n point(-20, -30);\n\n // Bottom-right.\n point(20, 30);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two purple points drawn on a gray canvas. The scene spins slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Style the points.\n stroke('purple');\n strokeWeight(10);\n\n // Top-left.\n point(-20, -30, 0);\n\n // Bottom-right.\n point(20, 30, -50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "filename",
- "description": "<p>the filename to which the Table should be saved</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "x",
+ "description": "the x-coordinate.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "the y-coordinate.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "the z-coordinate (for WebGL mode).",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
},
{
- "name": "options",
- "description": "<p>can be one of \"tsv\", \"csv\", or \"html\"</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "coordinateVector",
+ "description": "the coordinate vector.",
+ "type": "p5.Vector"
+ }
+ ]
}
],
- "example": [
- "\n<div><code>\n let table;\n\n function setup() {\n table = new p5.Table();\n\n table.addColumn('id');\n table.addColumn('species');\n table.addColumn('name');\n\n let newRow = table.addRow();\n newRow.setNum('id', table.getRowCount() - 1);\n newRow.setString('species', 'Panthera leo');\n newRow.setString('name', 'Lion');\n\n // To save, un-comment next line then click 'run'\n // saveTable(table, 'new.csv');\n\n describe('no image displayed');\n }\n\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n </code></div>"
- ],
"class": "p5",
- "module": "IO",
- "submodule": "Output"
- },
- {
- "file": "src/io/p5.Table.js",
- "line": 9,
- "description": "<p>Table Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.\nCSV files are\n<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, often with the data in quotes. TSV\nfiles use tabs as separators, and usually don't bother with the\nquotes.\nFile names should end with .csv if they're comma separated.\nA rough \"spec\" for CSV can be found\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.</p>\n<p>Possible options include:</p>\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>",
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "static": false,
+ "module": "Shape",
+ "submodule": "2D Primitives"
},
{
- "file": "src/io/p5.Table.js",
- "line": 43,
- "description": "<p>An array containing the names of the columns in the table, if the \"header\" the table is\nloaded with the \"header\" parameter.</p>\n",
- "type": "{String[]}",
- "itemtype": "property",
- "name": "columns",
+ "name": "quad",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/2d_primitives.js",
+ "line": 1047,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Draws a quadrilateral (four-sided shape).</p>\n<p>Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The\nfirst pair of parameters <code>(x1, y1)</code> sets the quad's first point. The next\nthree pairs of parameters set the coordinates for its next three points\n<code>(x2, y2)</code>, <code>(x3, y3)</code>, and <code>(x4, y4)</code>. Points should be added in either\nclockwise or counter-clockwise order.</p>\n<p>The version of <code>quad()</code> with twelve parameters allows the quad to be drawn\nin 3D space. Doing so requires adding the <code>WEBGL</code> argument to\n<a href=\"#/p5/createCanvas\">createCanvas()</a>.</p>\n<p>The thirteenth and fourteenth parameters are optional. In WebGL mode, they\nset the number of segments used to draw the quadrilateral in the x- and\ny-directions. They're both 2 by default.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //print the column names\n for (let c = 0; c < table.getColumnCount(); c++) {\n print('column ' + c + ' is named ' + table.columns[c]);\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(20, 20, 80, 20, 80, 80, 20, 80);\n\n describe('A white square with a black outline drawn on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(20, 30, 80, 30, 80, 70, 20, 70);\n\n describe('A white rectangle with a black outline drawn on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(50, 62, 86, 50, 50, 38, 14, 50);\n\n describe('A white rhombus with a black outline drawn on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n quad(20, 50, 80, 30, 80, 70, 20, 70);\n\n describe('A white trapezoid with a black outline drawn on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n quad(-30, -30, 30, -30, 30, 30, -30, 30);\n\n describe('A white square with a black outline drawn on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A wavy white surface spins around on gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the quad.\n quad(-30, -30, 0, 30, -30, 0, 30, 30, 20, -30, 30, -20);\n}\n</code>\n</div>"
],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
- },
- {
- "file": "src/io/p5.Table.js",
- "line": 80,
- "description": "<p>An array containing the <a href=\"#/p5.Table\">p5.TableRow</a> objects that make up the\nrows of the table. The same result as calling <a href=\"#/p5/getRows\">getRows()</a></p>\n",
- "type": "{p5.TableRow[]}",
- "itemtype": "property",
- "name": "rows",
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
- },
- {
- "file": "src/io/p5.Table.js",
- "line": 90,
- "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,\nan empty row is created. Typically, you would store a reference to\nthe new row in a TableRow object (see newRow in the example above),\nand then set individual values using <a href=\"#/p5/set\">set()</a>.</p>\n<p>If a <a href=\"#/p5.TableRow\">p5.TableRow</a> object is included as a parameter, then that row is\nduplicated and added to the table.</p>\n",
- "itemtype": "method",
- "name": "addRow",
- "params": [
- {
- "name": "row",
- "description": "<p>row to be added to the table</p>\n",
- "type": "p5.TableRow",
- "optional": true
- }
- ],
- "return": {
- "description": "the row that was added",
- "type": "p5.TableRow"
- },
- "example": [
- "\n <div class=\"norender\">\n <code>\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //add a row\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n }\n </code>\n </div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
- },
- {
- "file": "src/io/p5.Table.js",
- "line": 152,
- "description": "<p>Removes a row from the table object.</p>\n",
- "itemtype": "method",
- "name": "removeRow",
- "params": [
+ "overloads": [
{
- "name": "id",
- "description": "<p>ID number of the row to remove</p>\n",
- "type": "Integer"
- }
- ],
- "example": [
- "\n<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //remove the first row\n table.removeRow(0);\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n}\n</code>\n</div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
- },
- {
- "file": "src/io/p5.Table.js",
- "line": 198,
- "description": "<p>Returns a reference to the specified <a href=\"#/p5.TableRow\">p5.TableRow</a>. The reference\ncan then be used to get and set values of the selected row.</p>\n",
- "itemtype": "method",
- "name": "getRow",
- "params": [
+ "params": [
+ {
+ "name": "x1",
+ "description": "the x-coordinate of the first point.",
+ "type": "Number"
+ },
+ {
+ "name": "y1",
+ "description": "the y-coordinate of the first point.",
+ "type": "Number"
+ },
+ {
+ "name": "x2",
+ "description": "the x-coordinate of the second point.",
+ "type": "Number"
+ },
+ {
+ "name": "y2",
+ "description": "the y-coordinate of the second point.",
+ "type": "Number"
+ },
+ {
+ "name": "x3",
+ "description": "the x-coordinate of the third point.",
+ "type": "Number"
+ },
+ {
+ "name": "y3",
+ "description": "the y-coordinate of the third point.",
+ "type": "Number"
+ },
+ {
+ "name": "x4",
+ "description": "the x-coordinate of the fourth point.",
+ "type": "Number"
+ },
+ {
+ "name": "y4",
+ "description": "the y-coordinate of the fourth point.",
+ "type": "Number"
+ },
+ {
+ "name": "detailX",
+ "description": "number of segments in the x-direction.",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "detailY",
+ "description": "number of segments in the y-direction.",
+ "optional": 1,
+ "type": "Integer"
+ }
+ ]
+ },
{
- "name": "rowID",
- "description": "<p>ID number of the row to get</p>\n",
- "type": "Integer"
+ "params": [
+ {
+ "name": "x1",
+ "type": "Number"
+ },
+ {
+ "name": "y1",
+ "type": "Number"
+ },
+ {
+ "name": "z1",
+ "description": "the z-coordinate of the first point.",
+ "type": "Number"
+ },
+ {
+ "name": "x2",
+ "type": "Number"
+ },
+ {
+ "name": "y2",
+ "type": "Number"
+ },
+ {
+ "name": "z2",
+ "description": "the z-coordinate of the second point.",
+ "type": "Number"
+ },
+ {
+ "name": "x3",
+ "type": "Number"
+ },
+ {
+ "name": "y3",
+ "type": "Number"
+ },
+ {
+ "name": "z3",
+ "description": "the z-coordinate of the third point.",
+ "type": "Number"
+ },
+ {
+ "name": "x4",
+ "type": "Number"
+ },
+ {
+ "name": "y4",
+ "type": "Number"
+ },
+ {
+ "name": "z4",
+ "description": "the z-coordinate of the fourth point.",
+ "type": "Number"
+ },
+ {
+ "name": "detailX",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "detailY",
+ "optional": 1,
+ "type": "Integer"
+ }
+ ]
}
],
- "return": {
- "description": "<a href=\"#/p5.TableRow\">p5.TableRow</a> object",
- "type": "p5.TableRow"
- },
- "example": [
- "\n<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n let row = table.getRow(1);\n //print it column by column\n //note: a row is an object, not an array\n for (let c = 0; c < table.getColumnCount(); c++) {\n print(row.getString(c));\n }\n\n describe('no image displayed');\n}\n</code>\n</div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "2D Primitives"
},
{
- "file": "src/io/p5.Table.js",
- "line": 242,
- "description": "<p>Gets all rows from the table. Returns an array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s.</p>\n",
+ "name": "rect",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/2d_primitives.js",
+ "line": 1205,
"itemtype": "method",
- "name": "getRows",
- "return": {
- "description": "Array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s",
- "type": "p5.TableRow[]"
- },
+ "chainable": 1,
+ "description": "<p>Draws a rectangle.</p>\n<p>A rectangle is a four-sided shape defined by the <code>x</code>, <code>y</code>, <code>w</code>, and <code>h</code>\nparameters. <code>x</code> and <code>y</code> set the location of its top-left corner. <code>w</code> sets\nits width and <code>h</code> sets its height. Every angle in the rectangle measures\n90˚. See <a href=\"#/p5/rectMode\">rectMode()</a> for other ways to define\nrectangles.</p>\n<p>The version of <code>rect()</code> with five parameters creates a rounded rectangle. The\nfifth parameter sets the radius for all four corners.</p>\n<p>The version of <code>rect()</code> with eight parameters also creates a rounded\nrectangle. Each of the last four parameters set the radius of a corner. The\nradii start with the top-left corner and move clockwise around the\nrectangle. If any of these parameters are omitted, they are set to the\nvalue of the last radius that was set.</p>\n",
"example": [
- "\n <div class=\"norender\">\n <code>\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n\n //warning: rows is an array of objects\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n }\n </code>\n </div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rect(30, 20, 55, 55);\n\n describe('A white square with a black outline on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rect(30, 20, 55, 40);\n\n describe('A white rectangle with a black outline on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give all corners a radius of 20.\n rect(30, 20, 55, 50, 20);\n\n describe('A white rectangle with a black outline and round edges on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give each corner a unique radius.\n rect(30, 20, 55, 50, 20, 15, 10, 5);\n\n describe('A white rectangle with a black outline and round edges of different radii.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n rect(-20, -30, 55, 55);\n\n describe('A white square with a black outline on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around on gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the rectangle.\n rect(-20, -30, 55, 55);\n}\n</code>\n</div>"
],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
- },
- {
- "file": "src/io/p5.Table.js",
- "line": 289,
- "description": "<p>Finds the first row in the Table that contains the value\nprovided, and returns a reference to that row. Even if\nmultiple rows are possible matches, only the first matching\nrow is returned. The column to search may be specified by\neither its ID or title.</p>\n",
- "itemtype": "method",
- "name": "findRow",
- "params": [
+ "overloads": [
{
- "name": "value",
- "description": "<p>The value to match</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the rectangle.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the rectangle.",
+ "type": "Number"
+ },
+ {
+ "name": "w",
+ "description": "width of the rectangle.",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "description": "height of the rectangle.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "tl",
+ "description": "optional radius of top-left corner.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "tr",
+ "description": "optional radius of top-right corner.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "br",
+ "description": "optional radius of bottom-right corner.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "bl",
+ "description": "optional radius of bottom-left corner.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
},
{
- "name": "column",
- "description": "<p>ID number or title of the\n column to search</p>\n",
- "type": "Integer|String"
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "w",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "type": "Number"
+ },
+ {
+ "name": "detailX",
+ "description": "number of segments in the x-direction (for WebGL mode).",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "detailY",
+ "description": "number of segments in the y-direction (for WebGL mode).",
+ "optional": 1,
+ "type": "Integer"
+ }
+ ]
}
],
- "return": {
- "description": "",
- "type": "p5.TableRow"
- },
- "example": [
- "\n <div class=\"norender\">\n <code>\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //find the animal named zebra\n let row = table.findRow('Zebra', 'name');\n //find the corresponding species\n print(row.getString('species'));\n describe('no image displayed');\n }\n </code>\n </div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "2D Primitives"
},
{
- "file": "src/io/p5.Table.js",
- "line": 351,
- "description": "<p>Finds the rows in the Table that contain the value\nprovided, and returns references to those rows. Returns an\nArray, so for must be used to iterate through all the rows,\nas shown in the example above. The column to search may be\nspecified by either its ID or title.</p>\n",
+ "name": "square",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/2d_primitives.js",
+ "line": 1319,
"itemtype": "method",
- "name": "findRows",
- "params": [
- {
- "name": "value",
- "description": "<p>The value to match</p>\n",
- "type": "String"
- },
+ "chainable": 1,
+ "description": "<p>Draws a square.</p>\n<p>A square is a four-sided shape defined by the <code>x</code>, <code>y</code>, and <code>s</code>\nparameters. <code>x</code> and <code>y</code> set the location of its top-left corner. <code>s</code> sets\nits width and height. Every angle in the square measures 90˚ and all its\nsides are the same length. See <a href=\"#/p5/rectMode\">rectMode()</a> for\nother ways to define squares.</p>\n<p>The version of <code>square()</code> with four parameters creates a rounded square.\nThe fourth parameter sets the radius for all four corners.</p>\n<p>The version of <code>square()</code> with seven parameters also creates a rounded\nsquare. Each of the last four parameters set the radius of a corner. The\nradii start with the top-left corner and move clockwise around the\nsquare. If any of these parameters are omitted, they are set to the\nvalue of the last radius that was set.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n square(30, 20, 55);\n\n describe('A white square with a black outline in on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give all corners a radius of 20.\n square(30, 20, 55, 20);\n\n describe(\n 'A white square with a black outline and round edges on a gray canvas.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Give each corner a unique radius.\n square(30, 20, 55, 20, 15, 10, 5);\n\n describe('A white square with a black outline and round edges of different radii.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n square(-20, -30, 55);\n\n describe('A white square with a black outline in on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around on gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the square.\n square(-20, -30, 55);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "column",
- "description": "<p>ID number or title of the\n column to search</p>\n",
- "type": "Integer|String"
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the square.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the square.",
+ "type": "Number"
+ },
+ {
+ "name": "s",
+ "description": "side size of the square.",
+ "type": "Number"
+ },
+ {
+ "name": "tl",
+ "description": "optional radius of top-left corner.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "tr",
+ "description": "optional radius of top-right corner.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "br",
+ "description": "optional radius of bottom-right corner.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "bl",
+ "description": "optional radius of bottom-left corner.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "An Array of TableRow objects",
- "type": "p5.TableRow[]"
- },
- "example": [
- "\n <div class=\"norender\">\n <code>\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //add another goat\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Scape Goat');\n newRow.setString('name', 'Goat');\n\n //find the rows containing animals named Goat\n let rows = table.findRows('Goat', 'name');\n print(rows.length + ' Goats found');\n describe('no image displayed');\n }\n </code>\n </div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "2D Primitives"
},
{
- "file": "src/io/p5.Table.js",
- "line": 417,
- "description": "<p>Finds the first row in the Table that matches the regular\nexpression provided, and returns a reference to that row.\nEven if multiple rows are possible matches, only the first\nmatching row is returned. The column to search may be\nspecified by either its ID or title.</p>\n",
+ "name": "triangle",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/2d_primitives.js",
+ "line": 1432,
"itemtype": "method",
- "name": "matchRow",
- "params": [
- {
- "name": "regexp",
- "description": "<p>The regular expression to match</p>\n",
- "type": "String|RegExp"
- },
+ "chainable": 1,
+ "description": "<p>Draws a triangle.</p>\n<p>A triangle is a three-sided shape defined by three points. The\nfirst two parameters specify the triangle's first point <code>(x1, y1)</code>. The\nmiddle two parameters specify its second point <code>(x2, y2)</code>. And the last two\nparameters specify its third point <code>(x3, y3)</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n triangle(30, 75, 58, 20, 86, 75);\n\n describe('A white triangle with a black outline on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n triangle(-20, 25, 8, -30, 36, 25);\n\n describe('A white triangle with a black outline on a gray canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white triangle spins around on a gray canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the triangle.\n triangle(-20, 25, 8, -30, 36, 25);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "column",
- "description": "<p>The column ID (number) or\n title (string)</p>\n",
- "type": "String|Integer"
+ "params": [
+ {
+ "name": "x1",
+ "description": "x-coordinate of the first point.",
+ "type": "Number"
+ },
+ {
+ "name": "y1",
+ "description": "y-coordinate of the first point.",
+ "type": "Number"
+ },
+ {
+ "name": "x2",
+ "description": "x-coordinate of the second point.",
+ "type": "Number"
+ },
+ {
+ "name": "y2",
+ "description": "y-coordinate of the second point.",
+ "type": "Number"
+ },
+ {
+ "name": "x3",
+ "description": "x-coordinate of the third point.",
+ "type": "Number"
+ },
+ {
+ "name": "y3",
+ "description": "y-coordinate of the third point.",
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "TableRow object",
- "type": "p5.TableRow"
- },
- "example": [
- "\n<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //Search using specified regex on a given column, return TableRow object\n let mammal = table.matchRow(new RegExp('ant'), 1);\n print(mammal.getString(1));\n //Output \"Panthera pardus\"\n}\n</code>\n</div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "2D Primitives"
},
{
- "file": "src/io/p5.Table.js",
- "line": 475,
- "description": "<p>Finds the rows in the Table that match the regular expression provided,\nand returns references to those rows. Returns an array, so for must be\nused to iterate through all the rows, as shown in the example. The\ncolumn to search may be specified by either its ID or title.</p>\n",
+ "name": "ellipseMode",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/attributes.js",
+ "line": 87,
"itemtype": "method",
- "name": "matchRows",
- "params": [
- {
- "name": "regexp",
- "description": "<p>The regular expression to match</p>\n",
- "type": "String"
- },
+ "chainable": 1,
+ "description": "<p>Changes where ellipses, circles, and arcs are drawn.</p>\n<p>By default, the first two parameters of\n<a href=\"#/p5/ellipse\">ellipse()</a>, <a href=\"#/p5/circle\">circle()</a>,\nand <a href=\"#/p5/arc\">arc()</a>\nare the x- and y-coordinates of the shape's center. The next parameters set\nthe shape's width and height. This is the same as calling\n<code>ellipseMode(CENTER)</code>.</p>\n<p><code>ellipseMode(RADIUS)</code> also uses the first two parameters to set the x- and\ny-coordinates of the shape's center. The next parameters are half of the\nshapes's width and height. Calling <code>ellipse(0, 0, 10, 15)</code> draws a shape\nwith a width of 20 and height of 30.</p>\n<p><code>ellipseMode(CORNER)</code> uses the first two parameters as the upper-left\ncorner of the shape. The next parameters are its width and height.</p>\n<p><code>ellipseMode(CORNERS)</code> uses the first two parameters as the location of one\ncorner of the ellipse's bounding box. The next parameters are the location\nof the opposite corner.</p>\n<p>The argument passed to <code>ellipseMode()</code> must be written in ALL CAPS because\nthe constants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>, and <code>CORNERS</code> are defined this\nway. JavaScript is a case-sensitive language.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // White ellipse.\n ellipseMode(RADIUS);\n fill(255);\n ellipse(50, 50, 30, 30);\n\n // Gray ellipse.\n ellipseMode(CENTER);\n fill(100);\n ellipse(50, 50, 30, 30);\n\n describe('A white circle with a gray circle at its center. Both circles have black outlines.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // White ellipse.\n ellipseMode(CORNER);\n fill(255);\n ellipse(25, 25, 50, 50);\n\n // Gray ellipse.\n ellipseMode(CORNERS);\n fill(100);\n ellipse(25, 25, 50, 50);\n\n describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "column",
- "description": "<p>The column ID (number) or\n title (string)</p>\n",
- "type": "String|Integer",
- "optional": true
+ "params": [
+ {
+ "name": "mode",
+ "description": "either CENTER, RADIUS, CORNER, or CORNERS",
+ "type": "CENTER|RADIUS|CORNER|CORNERS"
+ }
+ ]
}
],
- "return": {
- "description": "An Array of TableRow objects",
- "type": "p5.TableRow[]"
- },
- "example": [
- "\n<div class=\"norender\">\n<code>\nlet table;\n\nfunction setup() {\n table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', 'Lion');\n newRow.setString('type', 'Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', 'Snake');\n newRow.setString('type', 'Reptile');\n\n newRow = table.addRow();\n newRow.setString('name', 'Mosquito');\n newRow.setString('type', 'Insect');\n\n newRow = table.addRow();\n newRow.setString('name', 'Lizard');\n newRow.setString('type', 'Reptile');\n\n let rows = table.matchRows('R.*', 'type');\n for (let i = 0; i < rows.length; i++) {\n print(rows[i].getString('name') + ': ' + rows[i].getString('type'));\n }\n}\n// Sketch prints:\n// Snake: Reptile\n// Lizard: Reptile\n</code>\n</div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Attributes"
},
{
- "file": "src/io/p5.Table.js",
- "line": 542,
- "description": "<p>Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.</p>\n",
+ "name": "noSmooth",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/attributes.js",
+ "line": 170,
"itemtype": "method",
- "name": "getColumn",
- "params": [
+ "chainable": 1,
+ "description": "<p>Draws certain features with jagged (aliased) edges.</p>\n<p><a href=\"#/p5/smooth\">smooth()</a> is active by default. In 2D mode,\n<code>noSmooth()</code> is helpful for scaling up images without blurring. The\nfunctions don't affect shapes or fonts.</p>\n<p>In WebGL mode, <code>noSmooth()</code> causes all shapes to be drawn with jagged\n(aliased) edges. The functions don't affect images or fonts.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet heart;\n\nasync function setup() {\n // Load a pixelated heart image from an image data string.\n heart = await loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');\n createCanvas(100, 100);\n\n background(50);\n\n // Antialiased hearts.\n image(heart, 10, 10);\n image(heart, 20, 10, 16, 16);\n image(heart, 40, 10, 32, 32);\n\n // Aliased hearts.\n noSmooth();\n image(heart, 10, 60);\n image(heart, 20, 60, 16, 16);\n image(heart, 40, 60, 32, 32);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A white circle on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Disable smoothing.\n noSmooth();\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A pixelated white circle on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "column",
- "description": "<p>String or Number of the column to return</p>\n",
- "type": "String|Number"
+ "params": []
}
],
- "return": {
- "description": "Array of column values",
- "type": "Array"
- },
- "example": [
- "\n <div class=\"norender\">\n <code>\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //getColumn returns an array that can be printed directly\n print(table.getColumn('species'));\n //outputs [\"Capra hircus\", \"Panthera pardus\", \"Equus zebra\"]\n describe('no image displayed');\n }\n </code>\n </div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Attributes"
},
{
- "file": "src/io/p5.Table.js",
- "line": 592,
- "description": "<p>Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.</p>\n",
+ "name": "rectMode",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/attributes.js",
+ "line": 287,
"itemtype": "method",
- "name": "clearRows",
+ "chainable": 1,
+ "description": "<p>Changes where rectangles and squares are drawn.</p>\n<p>By default, the first two parameters of\n<a href=\"#/p5/rect\">rect()</a> and <a href=\"#/p5/square\">square()</a>,\nare the x- and y-coordinates of the shape's upper left corner. The next parameters set\nthe shape's width and height. This is the same as calling\n<code>rectMode(CORNER)</code>.</p>\n<p><code>rectMode(CORNERS)</code> also uses the first two parameters as the location of\none of the corners. The next parameters are the location of the opposite\ncorner. This mode only works for <a href=\"#/p5/rect\">rect()</a>.</p>\n<p><code>rectMode(CENTER)</code> uses the first two parameters as the x- and\ny-coordinates of the shape's center. The next parameters are its width and\nheight.</p>\n<p><code>rectMode(RADIUS)</code> also uses the first two parameters as the x- and\ny-coordinates of the shape's center. The next parameters are\nhalf of the shape's width and height.</p>\n<p>The argument passed to <code>rectMode()</code> must be written in ALL CAPS because the\nconstants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>, and <code>CORNERS</code> are defined this way.\nJavaScript is a case-sensitive language.</p>\n",
"example": [
- "\n <div class=\"norender\">\n <code>\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.clearRows();\n print(table.getRowCount() + ' total rows in table');\n print(table.getColumnCount() + ' total columns in table');\n describe('no image displayed');\n }\n </code>\n </div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(CORNER);\n fill(255);\n rect(25, 25, 50, 50);\n\n rectMode(CORNERS);\n fill(100);\n rect(25, 25, 50, 50);\n\n describe('A small gray square drawn at the top-left corner of a white square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(RADIUS);\n fill(255);\n rect(50, 50, 30, 30);\n\n rectMode(CENTER);\n fill(100);\n rect(50, 50, 30, 30);\n\n describe('A small gray square drawn at the center of a white square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(CORNER);\n fill(255);\n square(25, 25, 50);\n\n describe('A white square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n rectMode(RADIUS);\n fill(255);\n square(50, 50, 30);\n\n rectMode(CENTER);\n fill(100);\n square(50, 50, 30);\n\n describe('A small gray square drawn at the center of a white square.');\n}\n</code>\n</div>"
],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
- },
- {
- "file": "src/io/p5.Table.js",
- "line": 631,
- "description": "<p>Use <a href=\"#/p5/addColumn\">addColumn()</a> to add a new column to a <a href=\"#/p5.Table\">Table</a> object.\nTypically, you will want to specify a title, so the column\nmay be easily referenced later by name. (If no title is\nspecified, the new column's title will be null.)</p>\n",
- "itemtype": "method",
- "name": "addColumn",
- "params": [
+ "overloads": [
{
- "name": "title",
- "description": "<p>title of the given column</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "mode",
+ "description": "either CORNER, CORNERS, CENTER, or RADIUS",
+ "type": "CENTER|RADIUS|CORNER|CORNERS"
+ }
+ ]
}
],
- "example": [
- "\n <div class=\"norender\">\n <code>\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.addColumn('carnivore');\n table.set(0, 'carnivore', 'no');\n table.set(1, 'carnivore', 'yes');\n table.set(2, 'carnivore', 'no');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n }\n </code>\n </div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Attributes"
},
{
- "file": "src/io/p5.Table.js",
- "line": 680,
- "description": "<p>Returns the total number of columns in a Table.</p>\n",
+ "name": "smooth",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/attributes.js",
+ "line": 372,
"itemtype": "method",
- "name": "getColumnCount",
- "return": {
- "description": "Number of columns in this table",
- "type": "Integer"
- },
+ "chainable": 1,
+ "description": "<p>Draws certain features with smooth (antialiased) edges.</p>\n<p><code>smooth()</code> is active by default. In 2D mode,\n<a href=\"#/p5/noSmooth\">noSmooth()</a> is helpful for scaling up images\nwithout blurring. The functions don't affect shapes or fonts.</p>\n<p>In WebGL mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> causes all shapes to\nbe drawn with jagged (aliased) edges. The functions don't affect images or\nfonts.</p>\n",
"example": [
- "\n <div>\n <code>\n // given the cvs file \"blobs.csv\" in /assets directory\n // ID, Name, Flavor, Shape, Color\n // Blob1, Blobby, Sweet, Blob, Pink\n // Blob2, Saddy, Savory, Blob, Blue\n\n let table;\n\n function preload() {\n table = loadTable('assets/blobs.csv');\n }\n\n function setup() {\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n }\n\n function draw() {\n let numOfColumn = table.getColumnCount();\n text('There are ' + numOfColumn + ' columns in the table.', 100, 50);\n }\n </code>\n </div>"
+ "<div>\n<code>\nlet heart;\n\nasync function setup() {\n // Load a pixelated heart image from an image data string.\n heart = await loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');\n\n createCanvas(100, 100);\n\n background(50);\n\n // Antialiased hearts.\n image(heart, 10, 10);\n image(heart, 20, 10, 16, 16);\n image(heart, 40, 10, 32, 32);\n\n // Aliased hearts.\n noSmooth();\n image(heart, 10, 60);\n image(heart, 20, 60, 16, 16);\n image(heart, 40, 60, 32, 32);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A white circle on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Disable smoothing.\n noSmooth();\n\n background(200);\n\n circle(0, 0, 80);\n\n describe('A pixelated white circle on a gray background.');\n}\n</code>\n</div>"
],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Attributes"
},
{
- "file": "src/io/p5.Table.js",
- "line": 716,
- "description": "<p>Returns the total number of rows in a Table.</p>\n",
+ "name": "strokeCap",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/attributes.js",
+ "line": 425,
"itemtype": "method",
- "name": "getRowCount",
- "return": {
- "description": "Number of rows in this table",
- "type": "Integer"
- },
+ "chainable": 1,
+ "description": "<p>Sets the style for rendering the ends of lines.</p>\n<p>The caps for line endings are either rounded (<code>ROUND</code>), squared\n(<code>SQUARE</code>), or extended (<code>PROJECT</code>). The default cap is <code>ROUND</code>.</p>\n<p>The argument passed to <code>strokeCap()</code> must be written in ALL CAPS because\nthe constants <code>ROUND</code>, <code>SQUARE</code>, and <code>PROJECT</code> are defined this way.\nJavaScript is a case-sensitive language.</p>\n",
"example": [
- "\n <div>\n <code>\n // given the cvs file \"blobs.csv\" in /assets directory\n //\n // ID, Name, Flavor, Shape, Color\n // Blob1, Blobby, Sweet, Blob, Pink\n // Blob2, Saddy, Savory, Blob, Blue\n\n let table;\n\n function preload() {\n table = loadTable('assets/blobs.csv');\n }\n\n function setup() {\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n }\n\n function draw() {\n text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);\n }\n </code>\n </div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n strokeWeight(12);\n\n // Top.\n strokeCap(ROUND);\n line(20, 30, 80, 30);\n\n // Middle.\n strokeCap(SQUARE);\n line(20, 50, 80, 50);\n\n // Bottom.\n strokeCap(PROJECT);\n line(20, 70, 80, 70);\n\n describe(\n 'Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.'\n );\n}\n</code>\n</div>"
],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
- },
- {
- "file": "src/io/p5.Table.js",
- "line": 752,
- "description": "<p>Removes any of the specified characters (or \"tokens\").</p>\n<p>If no column is specified, then the values in all columns and\nrows are processed. A specific column may be referenced by\neither its ID or title.</p>\n",
- "itemtype": "method",
- "name": "removeTokens",
- "params": [
- {
- "name": "chars",
- "description": "<p>String listing characters to be removed</p>\n",
- "type": "String"
- },
+ "overloads": [
{
- "name": "column",
- "description": "<p>Column ID (number)\n or name (string)</p>\n",
- "type": "String|Integer",
- "optional": true
+ "params": [
+ {
+ "name": "cap",
+ "description": "either ROUND, SQUARE, or PROJECT",
+ "type": "ROUND|SQUARE|PROJECT"
+ }
+ ]
}
],
- "example": [
- "\n <div class=\"norender\"><code>\n function setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' $Lion ,');\n newRow.setString('type', ',,,Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', '$Snake ');\n newRow.setString('type', ',,,Reptile');\n\n table.removeTokens(',$ ');\n print(table.getArray());\n }\n\n // prints:\n // 0 \"Lion\" \"Mamal\"\n // 1 \"Snake\" \"Reptile\"\n </code></div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Attributes"
},
{
- "file": "src/io/p5.Table.js",
- "line": 824,
- "description": "<p>Trims leading and trailing whitespace, such as spaces and tabs,\nfrom String table values. If no column is specified, then the\nvalues in all columns and rows are trimmed. A specific column\nmay be referenced by either its ID or title.</p>\n",
+ "name": "strokeJoin",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/attributes.js",
+ "line": 524,
"itemtype": "method",
- "name": "trim",
- "params": [
+ "chainable": 1,
+ "description": "<p>Sets the style of the joints that connect line segments.</p>\n<p>Joints are either mitered (<code>MITER</code>), beveled (<code>BEVEL</code>), or rounded\n(<code>ROUND</code>). The default joint is <code>MITER</code> in 2D mode and <code>ROUND</code> in WebGL\nmode.</p>\n<p>The argument passed to <code>strokeJoin()</code> must be written in ALL CAPS because\nthe constants <code>MITER</code>, <code>BEVEL</code>, and <code>ROUND</code> are defined this way.\nJavaScript is a case-sensitive language.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n noFill();\n strokeWeight(10);\n strokeJoin(MITER);\n\n // Draw the line.\n beginShape();\n vertex(35, 20);\n vertex(65, 50);\n vertex(35, 80);\n endShape();\n\n describe('A right-facing arrowhead shape with a pointed tip in center of canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n noFill();\n strokeWeight(10);\n strokeJoin(BEVEL);\n\n // Draw the line.\n beginShape();\n vertex(35, 20);\n vertex(65, 50);\n vertex(35, 80);\n endShape();\n\n describe('A right-facing arrowhead shape with a flat tip in center of canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the line.\n noFill();\n strokeWeight(10);\n strokeJoin(ROUND);\n\n // Draw the line.\n beginShape();\n vertex(35, 20);\n vertex(65, 50);\n vertex(35, 80);\n endShape();\n\n describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "column",
- "description": "<p>Column ID (number)\n or name (string)</p>\n",
- "type": "String|Integer",
- "optional": true
+ "params": [
+ {
+ "name": "join",
+ "description": "either MITER, BEVEL, or ROUND",
+ "type": "MITER|BEVEL|ROUND"
+ }
+ ]
}
],
- "example": [
- "\n <div class=\"norender\"><code>\n function setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' Lion ,');\n newRow.setString('type', ' Mammal ');\n\n newRow = table.addRow();\n newRow.setString('name', ' Snake ');\n newRow.setString('type', ' Reptile ');\n\n table.trim();\n print(table.getArray());\n }\n\n // prints:\n // 0 \"Lion\" \"Mamal\"\n // 1 \"Snake\" \"Reptile\"\n </code></div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Attributes"
},
{
- "file": "src/io/p5.Table.js",
- "line": 888,
- "description": "<p>Use <a href=\"#/p5/removeColumn\">removeColumn()</a> to remove an existing column from a Table\nobject. The column to be removed may be identified by either\nits title (a String) or its index value (an int).\nremoveColumn(0) would remove the first column, removeColumn(1)\nwould remove the second column, and so on.</p>\n",
+ "name": "strokeWeight",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/attributes.js",
+ "line": 591,
"itemtype": "method",
- "name": "removeColumn",
- "params": [
- {
- "name": "column",
- "description": "<p>columnName (string) or ID (number)</p>\n",
- "type": "String|Integer"
- }
- ],
+ "chainable": 1,
+ "description": "<p>Sets the width of the stroke used for points, lines, and the outlines of\nshapes.</p>\n<p>Note: <code>strokeWeight()</code> is affected by transformations, especially calls to\n<a href=\"#/p5/scale\">scale()</a>.</p>\n",
"example": [
- "\n <div class=\"norender\">\n <code>\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.removeColumn('id');\n print(table.getColumnCount());\n describe('no image displayed');\n }\n </code>\n </div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n line(20, 20, 80, 20);\n\n // Middle.\n strokeWeight(4);\n line(20, 40, 80, 40);\n\n // Bottom.\n strokeWeight(10);\n line(20, 70, 80, 70);\n\n describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n line(20, 20, 80, 20);\n\n // Scale by a factor of 5.\n scale(5);\n\n // Bottom. Coordinates are adjusted for scaling.\n line(4, 8, 16, 8);\n\n describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');\n}\n</code>\n</div>"
],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
- },
- {
- "file": "src/io/p5.Table.js",
- "line": 950,
- "description": "<p>Stores a value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.</p>\n",
- "itemtype": "method",
- "name": "set",
- "params": [
- {
- "name": "row",
- "description": "<p>row ID</p>\n",
- "type": "Integer"
- },
- {
- "name": "column",
- "description": "<p>column ID (Number)\n or title (String)</p>\n",
- "type": "String|Integer"
- },
+ "overloads": [
{
- "name": "value",
- "description": "<p>value to assign</p>\n",
- "type": "String|Number"
+ "params": [
+ {
+ "name": "weight",
+ "description": "the weight of the stroke (in pixels).",
+ "type": "Number"
+ }
+ ]
}
],
- "example": [
- "\n<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n table.set(0, 'species', 'Canis Lupus');\n table.set(0, 'name', 'Wolf');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n}\n</code>\n</div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Attributes"
},
{
- "file": "src/io/p5.Table.js",
- "line": 998,
- "description": "<p>Stores a Float value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.</p>\n",
+ "name": "bezier",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/curves.js",
+ "line": 203,
"itemtype": "method",
- "name": "setNum",
- "params": [
- {
- "name": "row",
- "description": "<p>row ID</p>\n",
- "type": "Integer"
- },
- {
- "name": "column",
- "description": "<p>column ID (Number)\n or title (String)</p>\n",
- "type": "String|Integer"
- },
- {
- "name": "value",
- "description": "<p>value to assign</p>\n",
- "type": "Number"
- }
- ],
+ "chainable": 1,
+ "description": "<p>Draws a Bézier curve.</p>\n<p>Bézier curves can form shapes and curves that slope gently. They're defined\nby two anchor points and two control points. Bézier curves provide more\ncontrol than the spline curves created with the\n<a href=\"#/p5/curve\">curve()</a> function.</p>\n<p>The first two parameters, <code>x1</code> and <code>y1</code>, set the first anchor point. The\nfirst anchor point is where the curve starts.</p>\n<p>The next four parameters, <code>x2</code>, <code>y2</code>, <code>x3</code>, and <code>y3</code>, set the two control\npoints. The control points \"pull\" the curve towards them.</p>\n<p>The seventh and eighth parameters, <code>x4</code> and <code>y4</code>, set the last anchor\npoint. The last anchor point is where the curve ends.</p>\n<p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of\n<code>bezier()</code> has twelve arguments because each point has x-, y-,\nand z-coordinates.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n table.setNum(1, 'id', 1);\n\n print(table.getColumn(0));\n //[\"0\", 1, \"2\"]\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(85, 20);\n point(15, 80);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(10, 10);\n point(90, 90);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(85, 20, 10, 10, 90, 90, 15, 80);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(85, 20, 10, 10);\n line(15, 80, 90, 90);\n\n describe(\n 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the mouse near the red dot in the top-left corner\n// and drag to change the curve's shape.\n\nlet x2 = 10;\nlet y2 = 10;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(85, 20);\n point(15, 80);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x2, y2);\n point(90, 90);\n\n // Draw a black bezier curve.\n noFill();\n stroke(0);\n strokeWeight(1);\n bezier(85, 20, x2, y2, 90, 90, 15, 80);\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(85, 20, x2, y2);\n line(15, 80, 90, 90);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x2, y2) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x2 = mouseX;\n y2 = mouseY;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background('skyblue');\n\n // Draw the red balloon.\n fill('red');\n bezier(50, 60, 5, 15, 95, 15, 50, 60);\n\n // Draw the balloon string.\n line(50, 60, 50, 80);\n\n describe('A red balloon in a blue sky.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red balloon in a blue sky. The balloon rotates slowly, revealing that it is flat.');\n}\n\nfunction draw() {\n background('skyblue');\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the red balloon.\n fill('red');\n bezier(0, 0, 0, -45, -45, 0, 45, -45, 0, 0, 0, 0);\n\n // Draw the balloon string.\n line(0, 0, 0, 0, 20, 0);\n}\n</code>\n</div>"
],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
- },
- {
- "file": "src/io/p5.Table.js",
- "line": 1043,
- "description": "<p>Stores a String value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.</p>\n",
- "itemtype": "method",
- "name": "setString",
- "params": [
- {
- "name": "row",
- "description": "<p>row ID</p>\n",
- "type": "Integer"
- },
+ "overloads": [
{
- "name": "column",
- "description": "<p>column ID (Number)\n or title (String)</p>\n",
- "type": "String|Integer"
+ "params": [
+ {
+ "name": "x1",
+ "description": "x-coordinate of the first anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "y1",
+ "description": "y-coordinate of the first anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "x2",
+ "description": "x-coordinate of the first control point.",
+ "type": "Number"
+ },
+ {
+ "name": "y2",
+ "description": "y-coordinate of the first control point.",
+ "type": "Number"
+ },
+ {
+ "name": "x3",
+ "description": "x-coordinate of the second control point.",
+ "type": "Number"
+ },
+ {
+ "name": "y3",
+ "description": "y-coordinate of the second control point.",
+ "type": "Number"
+ },
+ {
+ "name": "x4",
+ "description": "x-coordinate of the second anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "y4",
+ "description": "y-coordinate of the second anchor point.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "value",
- "description": "<p>value to assign</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "x1",
+ "type": "Number"
+ },
+ {
+ "name": "y1",
+ "type": "Number"
+ },
+ {
+ "name": "z1",
+ "description": "z-coordinate of the first anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "x2",
+ "type": "Number"
+ },
+ {
+ "name": "y2",
+ "type": "Number"
+ },
+ {
+ "name": "z2",
+ "description": "z-coordinate of the first control point.",
+ "type": "Number"
+ },
+ {
+ "name": "x3",
+ "type": "Number"
+ },
+ {
+ "name": "y3",
+ "type": "Number"
+ },
+ {
+ "name": "z3",
+ "description": "z-coordinate of the second control point.",
+ "type": "Number"
+ },
+ {
+ "name": "x4",
+ "type": "Number"
+ },
+ {
+ "name": "y4",
+ "type": "Number"
+ },
+ {
+ "name": "z4",
+ "description": "z-coordinate of the second anchor point.",
+ "type": "Number"
+ }
+ ]
}
],
- "example": [
- "\n<div class=\"norender\"><code>\n// Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //add a row\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n print(table.getArray());\n\n describe('no image displayed');\n}\n</code></div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Curves"
},
{
- "file": "src/io/p5.Table.js",
- "line": 1087,
- "description": "<p>Retrieves a value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.</p>\n",
+ "name": "bezierPoint",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/curves.js",
+ "line": 331,
"itemtype": "method",
- "name": "get",
- "params": [
- {
- "name": "row",
- "description": "<p>row ID</p>\n",
- "type": "Integer"
- },
+ "description": "<p>Calculates coordinates along a Bézier curve using interpolation.</p>\n<p><code>bezierPoint()</code> calculates coordinates along a Bézier curve using the\nanchor and control points. It expects points in the same order as the\n<a href=\"#/p5/bezier\">bezier()</a> function. <code>bezierPoint()</code> works one axis\nat a time. Passing the anchor and control points' x-coordinates will\ncalculate the x-coordinate of a point on the curve. Passing the anchor and\ncontrol points' y-coordinates will calculate the y-coordinate of a point on\nthe curve.</p>\n<p>The first parameter, <code>a</code>, is the coordinate of the first anchor point.</p>\n<p>The second and third parameters, <code>b</code> and <code>c</code>, are the coordinates of the\ncontrol points.</p>\n<p>The fourth parameter, <code>d</code>, is the coordinate of the last anchor point.</p>\n<p>The fifth parameter, <code>t</code>, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 85;\n let x2 = 10;\n let x3 = 90;\n let x4 = 15;\n let y1 = 20;\n let y2 = 10;\n let y3 = 90;\n let y4 = 80;\n\n // Style the curve.\n noFill();\n\n // Draw the curve.\n bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw circles along the curve's path.\n fill(255);\n\n // Top-right.\n let x = bezierPoint(x1, x2, x3, x4, 0);\n let y = bezierPoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Center.\n x = bezierPoint(x1, x2, x3, x4, 0.5);\n y = bezierPoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Bottom-left.\n x = bezierPoint(x1, x2, x3, x4, 1);\n y = bezierPoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n describe('A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black s-curve on a gray square. A white circle moves back and forth along the curve.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 85;\n let x2 = 10;\n let x3 = 90;\n let x4 = 15;\n let y1 = 20;\n let y2 = 10;\n let y3 = 90;\n let y4 = 80;\n\n // Draw the curve.\n noFill();\n bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Calculate the circle's coordinates.\n let t = 0.5 * sin(frameCount * 0.01) + 0.5;\n let x = bezierPoint(x1, x2, x3, x4, t);\n let y = bezierPoint(y1, y2, y3, y4, t);\n\n // Draw the circle.\n fill(255);\n circle(x, y, 5);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "column",
- "description": "<p>columnName (string) or\n ID (number)</p>\n",
- "type": "String|Integer"
+ "params": [
+ {
+ "name": "a",
+ "description": "coordinate of first control point.",
+ "type": "Number"
+ },
+ {
+ "name": "b",
+ "description": "coordinate of first anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "c",
+ "description": "coordinate of second anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "d",
+ "description": "coordinate of second control point.",
+ "type": "Number"
+ },
+ {
+ "name": "t",
+ "description": "amount to interpolate between 0 and 1.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "coordinate of the point on the curve.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "",
- "type": "String|Number"
+ "description": "coordinate of the point on the curve.",
+ "type": "Number"
},
- "example": [
- "\n<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.get(0, 1));\n //Capra hircus\n print(table.get(0, 'species'));\n //Capra hircus\n describe('no image displayed');\n}\n</code>\n</div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Curves"
},
{
- "file": "src/io/p5.Table.js",
- "line": 1131,
- "description": "<p>Retrieves a Float value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.</p>\n",
+ "name": "bezierTangent",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/curves.js",
+ "line": 449,
"itemtype": "method",
- "name": "getNum",
- "params": [
- {
- "name": "row",
- "description": "<p>row ID</p>\n",
- "type": "Integer"
- },
+ "description": "<p>Calculates coordinates along a line that's tangent to a Bézier curve.</p>\n<p>Tangent lines skim the surface of a curve. A tangent line's slope equals\nthe curve's slope at the point where it intersects.</p>\n<p><code>bezierTangent()</code> calculates coordinates along a tangent line using the\nBézier curve's anchor and control points. It expects points in the same\norder as the <a href=\"#/p5/bezier\">bezier()</a> function. <code>bezierTangent()</code>\nworks one axis at a time. Passing the anchor and control points'\nx-coordinates will calculate the x-coordinate of a point on the tangent\nline. Passing the anchor and control points' y-coordinates will calculate\nthe y-coordinate of a point on the tangent line.</p>\n<p>The first parameter, <code>a</code>, is the coordinate of the first anchor point.</p>\n<p>The second and third parameters, <code>b</code> and <code>c</code>, are the coordinates of the\ncontrol points.</p>\n<p>The fourth parameter, <code>d</code>, is the coordinate of the last anchor point.</p>\n<p>The fifth parameter, <code>t</code>, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 85;\n let x2 = 10;\n let x3 = 90;\n let x4 = 15;\n let y1 = 20;\n let y2 = 10;\n let y3 = 90;\n let y4 = 80;\n\n // Style the curve.\n noFill();\n\n // Draw the curve.\n bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw tangents along the curve's path.\n fill(255);\n\n // Top-right circle.\n stroke(0);\n let x = bezierPoint(x1, x2, x3, x4, 0);\n let y = bezierPoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Top-right tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n let tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0);\n let ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Center circle.\n stroke(0);\n x = bezierPoint(x1, x2, x3, x4, 0.5);\n y = bezierPoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Center tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0.5);\n ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0.5);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Bottom-left circle.\n stroke(0);\n x = bezierPoint(x1, x2, x3, x4, 1);\n y = bezierPoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n // Bottom-left tangent.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.1 * bezierTangent(x1, x2, x3, x4, 1);\n ty = 0.1 * bezierTangent(y1, y2, y3, y4, 1);\n line(x + tx, y + ty, x - tx, y - ty);\n\n describe(\n 'A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles. Red tangent lines extend from the white circles.'\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "column",
- "description": "<p>columnName (string) or\n ID (number)</p>\n",
- "type": "String|Integer"
+ "params": [
+ {
+ "name": "a",
+ "description": "coordinate of first anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "b",
+ "description": "coordinate of first control point.",
+ "type": "Number"
+ },
+ {
+ "name": "c",
+ "description": "coordinate of second control point.",
+ "type": "Number"
+ },
+ {
+ "name": "d",
+ "description": "coordinate of second anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "t",
+ "description": "amount to interpolate between 0 and 1.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "coordinate of a point on the tangent line.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "",
+ "description": "coordinate of a point on the tangent line.",
"type": "Number"
},
- "example": [
- "\n<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.getNum(1, 0) + 100);\n //id 1 + 100 = 101\n describe('no image displayed');\n}\n</code>\n</div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Curves"
},
{
- "file": "src/io/p5.Table.js",
- "line": 1173,
- "description": "<p>Retrieves a String value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.</p>\n",
+ "name": "spline",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/curves.js",
+ "line": 655,
"itemtype": "method",
- "name": "getString",
- "params": [
- {
- "name": "row",
- "description": "<p>row ID</p>\n",
- "type": "Integer"
+ "chainable": 1,
+ "description": "<p>Draws a curve using a Catmull-Rom spline.</p>\n<p>Spline curves can form shapes and curves that slope gently. They’re like\ncables that are attached to a set of points. Splines are defined by two\nanchor points and two control points.</p>\n<p>The first two parameters, <code>x1</code> and <code>y1</code>, set the first control point. This\npoint isn’t drawn and can be thought of as the curve’s starting point.</p>\n<p>The next four parameters, <code>x2</code>, <code>y2</code>, <code>x3</code>, and <code>y3</code>, set the two anchor\npoints. The anchor points are the start and end points of the curve’s\nvisible segment.</p>\n<p>The seventh and eighth parameters, <code>x4</code> and <code>y4</code>, set the last control\npoint. This point isn’t drawn and can be thought of as the curve’s ending\npoint.</p>\n<p>Spline curves can also be drawn in 3D using WebGL mode. The 3D version of\n<code>spline()</code> has twelve arguments because each point has x-, y-, and\nz-coordinates.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n spline(5, 26, 73, 24, 73, 61, 15, 65);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n spline(5, 26, 5, 26, 73, 24, 73, 61);\n spline(73, 24, 73, 61, 15, 65, 15, 65);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(73, 24);\n point(73, 61);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(5, 26);\n point(15, 65);\n\n describe(\n 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x1 = 5;\nlet y1 = 26;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n spline(x1, y1, 73, 24, 73, 61, 15, 65);\n\n // Draw red spline curves from the anchor points to the control points.\n stroke(255, 0, 0);\n spline(x1, y1, x1, y1, 73, 24, 73, 61);\n spline(73, 24, 73, 61, 15, 65, 15, 65);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(73, 24);\n point(73, 61);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x1, y1);\n point(15, 65);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x1, y1) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x1 = mouseX;\n y1 = mouseY;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background('skyblue');\n\n // Draw the red balloon.\n fill('red');\n spline(-150, 275, 50, 60, 50, 60, 250, 275);\n\n // Draw the balloon string.\n line(50, 60, 50, 80);\n\n describe('A red balloon in a blue sky.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red balloon in a blue sky.');\n}\n\nfunction draw() {\n background('skyblue');\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Draw the red balloon.\n fill('red');\n spline(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0);\n\n // Draw the balloon string.\n line(0, 10, 0, 0, 30, 0);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x1",
+ "description": "x-coordinate of the first control point.",
+ "type": "Number"
+ },
+ {
+ "name": "y1",
+ "description": "y-coordinate of the first control point.",
+ "type": "Number"
+ },
+ {
+ "name": "x2",
+ "description": "x-coordinate of the first anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "y2",
+ "description": "y-coordinate of the first anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "x3",
+ "description": "x-coordinate of the second anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "y3",
+ "description": "y-coordinate of the second anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "x4",
+ "description": "x-coordinate of the second control point.",
+ "type": "Number"
+ },
+ {
+ "name": "y4",
+ "description": "y-coordinate of the second control point.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "column",
- "description": "<p>columnName (string) or\n ID (number)</p>\n",
- "type": "String|Integer"
+ "params": [
+ {
+ "name": "x1",
+ "type": "Number"
+ },
+ {
+ "name": "y1",
+ "type": "Number"
+ },
+ {
+ "name": "z1",
+ "description": "z-coordinate of the first control point.",
+ "type": "Number"
+ },
+ {
+ "name": "x2",
+ "type": "Number"
+ },
+ {
+ "name": "y2",
+ "type": "Number"
+ },
+ {
+ "name": "z2",
+ "description": "z-coordinate of the first anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "x3",
+ "type": "Number"
+ },
+ {
+ "name": "y3",
+ "type": "Number"
+ },
+ {
+ "name": "z3",
+ "description": "z-coordinate of the second anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "x4",
+ "type": "Number"
+ },
+ {
+ "name": "y4",
+ "type": "Number"
+ },
+ {
+ "name": "z4",
+ "description": "z-coordinate of the second control point.",
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "",
- "type": "String"
- },
- "example": [
- "\n<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n // table is comma separated value \"CSV\"\n // and has specifiying header for column labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.getString(0, 0)); // 0\n print(table.getString(0, 1)); // Capra hircus\n print(table.getString(0, 2)); // Goat\n print(table.getString(1, 0)); // 1\n print(table.getString(1, 1)); // Panthera pardus\n print(table.getString(1, 2)); // Leopard\n print(table.getString(2, 0)); // 2\n print(table.getString(2, 1)); // Equus zebra\n print(table.getString(2, 2)); // Zebra\n describe('no image displayed');\n}\n</code>\n</div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Curves"
},
{
- "file": "src/io/p5.Table.js",
- "line": 1223,
- "description": "<p>Retrieves all table data and returns as an object. If a column name is\npassed in, each row object will be stored with that attribute as its\ntitle.</p>\n",
+ "name": "splinePoint",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/curves.js",
+ "line": 776,
"itemtype": "method",
- "name": "getObject",
- "params": [
+ "description": "<p>Calculates coordinates along a spline curve using interpolation.</p>\n<p><code>splinePoint()</code> calculates coordinates along a spline curve using the\nanchor and control points. It expects points in the same order as the\n<a href=\"#/p5/spline\">spline()</a> function. <code>splinePoint()</code> works one axis\nat a time. Passing the anchor and control points' x-coordinates will\ncalculate the x-coordinate of a point on the curve. Passing the anchor and\ncontrol points' y-coordinates will calculate the y-coordinate of a point on\nthe curve.</p>\n<p>The first parameter, <code>a</code>, is the coordinate of the first control point.</p>\n<p>The second and third parameters, <code>b</code> and <code>c</code>, are the coordinates of the\nanchor points.</p>\n<p>The fourth parameter, <code>d</code>, is the coordinate of the last control point.</p>\n<p>The fifth parameter, <code>t</code>, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 5;\n let y1 = 26;\n let x2 = 73;\n let y2 = 24;\n let x3 = 73;\n let y3 = 61;\n let x4 = 15;\n let y4 = 65;\n\n // Draw the curve.\n noFill();\n spline(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw circles along the curve's path.\n fill(255);\n\n // Top.\n let x = splinePoint(x1, x2, x3, x4, 0);\n let y = splinePoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Center.\n x = splinePoint(x1, x2, x3, x4, 0.5);\n y = splinePoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Bottom.\n x = splinePoint(x1, x2, x3, x4, 1);\n y = splinePoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black curve on a gray square. A white circle moves back and forth along the curve.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 5;\n let y1 = 26;\n let x2 = 73;\n let y2 = 24;\n let x3 = 73;\n let y3 = 61;\n let x4 = 15;\n let y4 = 65;\n\n // Draw the curve.\n noFill();\n spline(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Calculate the circle's coordinates.\n let t = 0.5 * sin(frameCount * 0.01) + 0.5;\n let x = splinePoint(x1, x2, x3, x4, t);\n let y = splinePoint(y1, y2, y3, y4, t);\n\n // Draw the circle.\n fill(255);\n circle(x, y, 5);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "headerColumn",
- "description": "<p>Name of the column which should be used to\n title each row object (optional)</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "a",
+ "description": "coordinate of first anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "b",
+ "description": "coordinate of first control point.",
+ "type": "Number"
+ },
+ {
+ "name": "c",
+ "description": "coordinate of second control point.",
+ "type": "Number"
+ },
+ {
+ "name": "d",
+ "description": "coordinate of second anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "t",
+ "description": "amount to interpolate between 0 and 1.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "coordinate of a point on the curve.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "",
- "type": "Object"
+ "description": "coordinate of a point on the curve.",
+ "type": "Number"
},
- "example": [
- "\n<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n let tableObject = table.getObject();\n\n print(tableObject);\n //outputs an object\n\n describe('no image displayed');\n}\n</code>\n</div>"
- ],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Curves"
},
{
- "file": "src/io/p5.Table.js",
- "line": 1285,
- "description": "<p>Retrieves all table data and returns it as a multidimensional array.</p>\n",
+ "name": "splineTangent",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/curves.js",
+ "line": 891,
"itemtype": "method",
- "name": "getArray",
- "return": {
- "description": "",
- "type": "Array"
- },
+ "description": "<p>Calculates coordinates along a line that's tangent to a spline curve.</p>\n<p>Tangent lines skim the surface of a curve. A tangent line's slope equals\nthe curve's slope at the point where it intersects.</p>\n<p><code>splineTangent()</code> calculates coordinates along a tangent line using the\nspline curve's anchor and control points. It expects points in the same\norder as the <a href=\"#/p5/spline\">spline()</a> function. <code>splineTangent()</code>\nworks one axis at a time. Passing the anchor and control points'\nx-coordinates will calculate the x-coordinate of a point on the tangent\nline. Passing the anchor and control points' y-coordinates will calculate\nthe y-coordinate of a point on the tangent line.</p>\n<p>The first parameter, <code>a</code>, is the coordinate of the first control point.</p>\n<p>The second and third parameters, <code>b</code> and <code>c</code>, are the coordinates of the\nanchor points.</p>\n<p>The fourth parameter, <code>d</code>, is the coordinate of the last control point.</p>\n<p>The fifth parameter, <code>t</code>, is the amount to interpolate along the curve. 0\nis the first anchor point, 1 is the second anchor point, and 0.5 is halfway\nbetween them.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leoperd\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n // table is comma separated value \"CSV\"\n // and has specifiying header for column labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n let tableArray = table.getArray();\n for (let i = 0; i < tableArray.length; i++) {\n print(tableArray[i]);\n }\n describe('no image displayed');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates for the curve's anchor and control points.\n let x1 = 5;\n let y1 = 26;\n let x2 = 73;\n let y2 = 24;\n let x3 = 73;\n let y3 = 61;\n let x4 = 15;\n let y4 = 65;\n\n // Draw the curve.\n noFill();\n spline(x1, y1, x2, y2, x3, y3, x4, y4);\n\n // Draw tangents along the curve's path.\n fill(255);\n\n // Top circle.\n stroke(0);\n let x = splinePoint(x1, x2, x3, x4, 0);\n let y = splinePoint(y1, y2, y3, y4, 0);\n circle(x, y, 5);\n\n // Top tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n let tx = 0.2 * splineTangent(x1, x2, x3, x4, 0);\n let ty = 0.2 * splineTangent(y1, y2, y3, y4, 0);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Center circle.\n stroke(0);\n x = splinePoint(x1, x2, x3, x4, 0.5);\n y = splinePoint(y1, y2, y3, y4, 0.5);\n circle(x, y, 5);\n\n // Center tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.2 * splineTangent(x1, x2, x3, x4, 0.5);\n ty = 0.2 * splineTangent(y1, y2, y3, y4, 0.5);\n line(x + tx, y + ty, x - tx, y - ty);\n\n // Bottom circle.\n stroke(0);\n x = splinePoint(x1, x2, x3, x4, 1);\n y = splinePoint(y1, y2, y3, y4, 1);\n circle(x, y, 5);\n\n // Bottom tangent line.\n // Scale the tangent point to draw a shorter line.\n stroke(255, 0, 0);\n tx = 0.2 * splineTangent(x1, x2, x3, x4, 1);\n ty = 0.2 * splineTangent(y1, y2, y3, y4, 1);\n line(x + tx, y + ty, x - tx, y - ty);\n\n describe(\n 'A black curve on a gray square. A white circle moves back and forth along the curve.'\n );\n}\n</code>\n</div>"
],
- "class": "p5.Table",
- "module": "IO",
- "submodule": "Table"
- },
- {
- "file": "src/io/p5.TableRow.js",
- "line": 36,
- "description": "<p>Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n",
- "itemtype": "method",
- "name": "set",
- "params": [
- {
- "name": "column",
- "description": "<p>Column ID (Number)\n or Title (String)</p>\n",
- "type": "String|Integer"
- },
+ "overloads": [
{
- "name": "value",
- "description": "<p>The value to be stored</p>\n",
- "type": "String|Number"
+ "params": [
+ {
+ "name": "a",
+ "description": "coordinate of first control point.",
+ "type": "Number"
+ },
+ {
+ "name": "b",
+ "description": "coordinate of first anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "c",
+ "description": "coordinate of second anchor point.",
+ "type": "Number"
+ },
+ {
+ "name": "d",
+ "description": "coordinate of second control point.",
+ "type": "Number"
+ },
+ {
+ "name": "t",
+ "description": "amount to interpolate between 0 and 1.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "coordinate of a point on the tangent line.",
+ "type": "Number"
+ }
}
],
- "example": [
- "\n <div class=\"norender\"><code>\n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n //print the results\n print(table.getArray());\n\n describe('no image displayed');\n }\n </code></div>"
- ],
- "class": "p5.TableRow",
- "module": "IO",
- "submodule": "Table"
+ "return": {
+ "description": "coordinate of a point on the tangent line.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Curves"
},
{
- "file": "src/io/p5.TableRow.js",
- "line": 97,
- "description": "<p>Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n",
+ "name": "bezierOrder",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/custom_shapes.js",
+ "line": 1645,
"itemtype": "method",
- "name": "setNum",
- "params": [
- {
- "name": "column",
- "description": "<p>Column ID (Number)\n or Title (String)</p>\n",
- "type": "String|Integer"
- },
- {
- "name": "value",
- "description": "<p>The value to be stored\n as a Float</p>\n",
- "type": "Number|String"
- }
- ],
+ "description": "<p>Influences the shape of the Bézier curve segment in a custom shape.\nBy default, this is 3; the other possible parameter is 2. This\nresults in quadratic Bézier curves.</p>\n<p><code>bezierVertex()</code> adds a curved segment to custom shapes. The Bézier curves\nit creates are defined like those made by the\n<a href=\"#/p5/bezier\">bezier()</a> function. <code>bezierVertex()</code> must be\ncalled between the\n<a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions. There must be at least\none call to <a href=\"#/p5/vertex\">bezierVertex()</a>, before\na number of <code>bezierVertex()</code> calls that is a multiple of the parameter\nset by <a href=\"#/p5/bezierOrder\">bezierOrder(...)</a> (default 3).</p>\n<p>Each curve of order 3 requires three calls to <code>bezierVertex</code>, so\n2 curves would need 7 calls to <code>bezierVertex()</code>:\n(1 one initial anchor point, two sets of 3 curves describing the curves)\nWith <code>bezierOrder(2)</code>, two curves would need 5 calls: 1 + 2 + 2.</p>\n<p>Bézier curves can also be drawn in 3D using WebGL mode.</p>\n<p>Note: <code>bezierVertex()</code> won’t work when an argument is passed to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n",
"example": [
- "\n <div class=\"norender\"><code>\n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].setNum('id', r + 10);\n }\n\n print(table.getArray());\n\n describe('no image displayed');\n }\n </code></div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // set the order to 2 for a quadratic Bézier curve\n bezierOrder(2);\n\n // Add the first anchor point.\n bezierVertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(80, 20);\n bezierVertex(50, 50);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.');\n}\n</code>\n</div>"
],
- "class": "p5.TableRow",
- "module": "IO",
- "submodule": "Table"
- },
- {
- "file": "src/io/p5.TableRow.js",
- "line": 140,
- "description": "<p>Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n",
- "itemtype": "method",
- "name": "setString",
- "params": [
+ "overloads": [
{
- "name": "column",
- "description": "<p>Column ID (Number)\n or Title (String)</p>\n",
- "type": "String|Integer"
+ "params": [
+ {
+ "name": "order",
+ "description": "The new order to set. Can be either 2 or 3, by default 3",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "value",
- "description": "<p>The value to be stored\n as a String</p>\n",
- "type": "String|Number|Boolean|Object"
- }
- ],
- "example": [
- "\n <div class=\"norender\"><code>\n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n let name = rows[r].getString('name');\n rows[r].setString('name', 'A ' + name + ' named George');\n }\n\n print(table.getArray());\n\n describe('no image displayed');\n }\n </code></div>"
- ],
- "class": "p5.TableRow",
- "module": "IO",
- "submodule": "Table"
- },
- {
- "file": "src/io/p5.TableRow.js",
- "line": 184,
- "description": "<p>Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n",
- "itemtype": "method",
- "name": "get",
- "params": [
- {
- "name": "column",
- "description": "<p>columnName (string) or\n ID (number)</p>\n",
- "type": "String|Integer"
+ "params": [],
+ "return": {
+ "description": "The current Bézier order.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "",
- "type": "String|Number"
+ "description": "The current Bézier order.",
+ "type": "Number"
},
- "example": [
- "\n <div class=\"norender\"><code>\n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let names = [];\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n names.push(rows[r].get('name'));\n }\n\n print(names);\n\n describe('no image displayed');\n }\n </code></div>"
- ],
- "class": "p5.TableRow",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Custom Shapes"
},
{
- "file": "src/io/p5.TableRow.js",
- "line": 231,
- "description": "<p>Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n",
+ "name": "splineVertex",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/custom_shapes.js",
+ "line": 2046,
"itemtype": "method",
- "name": "getNum",
- "params": [
- {
- "name": "column",
- "description": "<p>columnName (string) or\n ID (number)</p>\n",
- "type": "String|Integer"
- }
+ "chainable": 1,
+ "description": "<p>Adds a spline curve segment to a custom shape.</p>\n<p><code>splineVertex()</code> adds a curved segment to custom shapes. The spline curves\nit creates are defined like those made by the\n<a href=\"#/p5/curve\">curve()</a> function. <code>splineVertex()</code> must be called\nbetween the <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions.</p>\n<p>Spline curves can form shapes and curves that slope gently. They’re like\ncables that are attached to a set of points. Splines are defined by two\nanchor points and two control points. <code>splineVertex()</code> must be called at\nleast four times between\n<a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> in order to draw a curve:</p>\n<pre><code class=\"language-js\">beginShape();\n\n// Add the first control point.\nsplineVertex(84, 91);\n\n// Add the anchor points to draw between.\nsplineVertex(68, 19);\nsplineVertex(21, 17);\n\n// Add the second control point.\nsplineVertex(32, 91);\n\nendShape();</code></pre><p>The code snippet above would only draw the curve between the anchor points,\nsimilar to the <a href=\"#/p5/curve\">curve()</a> function. The segments\nbetween the control and anchor points can be drawn by calling\n<code>splineVertex()</code> with the coordinates of the control points:</p>\n<pre><code class=\"language-js\">beginShape();\n\n// Add the first control point and draw a segment to it.\nsplineVertex(84, 91);\nsplineVertex(84, 91);\n\n// Add the anchor points to draw between.\nsplineVertex(68, 19);\nsplineVertex(21, 17);\n\n// Add the second control point.\nsplineVertex(32, 91);\n\n// Uncomment the next line to draw the segment to the second control point.\n// splineVertex(32, 91);\n\nendShape();</code></pre><p>The first two parameters, <code>x</code> and <code>y</code>, set the vertex’s location. For\nexample, calling <code>splineVertex(10, 10)</code> adds a point to the curve at\n<code>(10, 10)</code>.</p>\n<p>Spline curves can also be drawn in 3D using WebGL mode. The 3D version of\n<code>splineVertex()</code> has three arguments because each point has x-, y-, and\nz-coordinates. By default, the vertex’s z-coordinate is set to 0.</p>\n<p>Note: <code>splineVertex()</code> won’t work when an argument is passed to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point.\n splineVertex(32, 91);\n\n // Add the anchor points.\n splineVertex(21, 17);\n splineVertex(68, 19);\n\n // Add the second control point.\n splineVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(32, 91);\n point(84, 91);\n\n describe(\n 'A black curve drawn on a gray background. The curve has black dots at its ends. Two red dots appear near the bottom of the canvas.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n splineVertex(32, 91);\n splineVertex(32, 91);\n\n // Add the anchor points.\n splineVertex(21, 17);\n splineVertex(68, 19);\n\n // Add the second control point.\n splineVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(32, 91);\n point(84, 91);\n\n describe(\n 'A black curve drawn on a gray background. The curve passes through one red dot and two black dots. Another red dot appears near the bottom of the canvas.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n splineVertex(32, 91);\n splineVertex(32, 91);\n\n // Add the anchor points.\n splineVertex(21, 17);\n splineVertex(68, 19);\n\n // Add the second control point and draw a segment to it.\n splineVertex(84, 91);\n splineVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(32, 91);\n point(84, 91);\n\n describe(\n 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the mouse near the red dot in the bottom-left corner\n// and drag to change the curve's shape.\n\nlet x1 = 32;\nlet y1 = 91;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the shape.\n noFill();\n stroke(0);\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n splineVertex(x1, y1);\n splineVertex(x1, y1);\n\n // Add the anchor points.\n splineVertex(21, 17);\n splineVertex(68, 19);\n\n // Add the second control point and draw a segment to it.\n splineVertex(84, 91);\n splineVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n // Style the anchor and control points.\n strokeWeight(5);\n\n // Draw the anchor points in black.\n stroke(0);\n point(21, 17);\n point(68, 19);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x1, y1);\n point(84, 91);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x1, y1) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x1 = mouseX;\n y1 = mouseY;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first control point and draw a segment to it.\n splineVertex(32, 91);\n splineVertex(32, 91);\n\n // Add the anchor points.\n splineVertex(21, 17);\n splineVertex(68, 19);\n\n // Add the second control point.\n splineVertex(84, 91);\n splineVertex(84, 91);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A ghost shape drawn in white on a gray background.');\n}\n</code>\n</div>",
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A ghost shape drawn in white on a blue background. When the user drags the mouse, the scene rotates to reveal the outline of a second ghost.');\n}\n\nfunction draw() {\n background('midnightblue');\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the first ghost.\n noStroke();\n fill('ghostwhite');\n\n beginShape();\n splineVertex(-28, 41, 0);\n splineVertex(-28, 41, 0);\n splineVertex(-29, -33, 0);\n splineVertex(18, -31, 0);\n splineVertex(34, 41, 0);\n splineVertex(34, 41, 0);\n endShape();\n\n // Draw the second ghost.\n noFill();\n stroke('ghostwhite');\n\n beginShape();\n splineVertex(-28, 41, -20);\n splineVertex(-28, 41, -20);\n splineVertex(-29, -33, -20);\n splineVertex(18, -31, -20);\n splineVertex(34, 41, -20);\n splineVertex(34, 41, -20);\n endShape();\n}\n</code>\n</div>"
],
- "return": {
- "description": "Float Floating point number",
- "type": "Number"
- },
- "example": [
- "\n <div class=\"norender\"><code>\n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n let minId = Infinity;\n let maxId = -Infinity;\n for (let r = 0; r < rows.length; r++) {\n let id = rows[r].getNum('id');\n minId = min(minId, id);\n maxId = min(maxId, id);\n }\n print('minimum id = ' + minId + ', maximum id = ' + maxId);\n describe('no image displayed');\n }\n </code></div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the vertex",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the vertex",
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z-coordinate of the vertex.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "u",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "v",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "type": "Number"
+ },
+ {
+ "name": "u",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "v",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ }
],
- "class": "p5.TableRow",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Custom Shapes"
},
{
- "file": "src/io/p5.TableRow.js",
- "line": 285,
- "description": "<p>Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n",
+ "name": "splineProperty",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/custom_shapes.js",
+ "line": 2121,
"itemtype": "method",
- "name": "getString",
- "params": [
+ "description": "<p>Sets the property of a curve.</p>\n<p>For example, set tightness,\nuse <code>splineProperty('tightness', t)</code>, with <code>t</code> between 0 and 1,\nat 0 as default.</p>\n<p>Spline curves are like cables that are attached to a set of points.\nAdjusting tightness adjusts how tightly the cable is\nattached to the points. The parameter, tightness, determines\nhow the curve fits to the vertex points. By default,\ntightness is set to 0. Setting tightness to 1, as in\n<code>splineProperty('tightness', 1)</code>, connects the curve's points\nusing straight lines. Values in the range from –5 to 5\ndeform curves while leaving them recognizable.</p>\n<p>This function can also be used to set 'ends' property\n(see also: the <a href=\"#/p5/curveDetail\">curveDetail()</a> example),\nsuch as: <code>splineProperty('ends', EXCLUDE)</code> to exclude\nvertices, or <code>splineProperty('ends', INCLUDE)</code> to include them.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Move the mouse left and right to see the curve change.\n\nfunction setup() {\n createCanvas(100, 100);\n describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right');\n}\n\nfunction draw() {\n background(200);\n\n // Set the curve's tightness using the mouse.\n let t = map(mouseX, 0, 100, -5, 5, true);\n splineProperty('tightness', t);\n\n // Draw the curve.\n noFill();\n beginShape();\n splineVertex(10, 26);\n splineVertex(10, 26);\n splineVertex(83, 24);\n splineVertex(83, 61);\n splineVertex(25, 65);\n splineVertex(25, 65);\n endShape();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "property",
+ "type": "String"
+ },
+ {
+ "name": "value",
+ "description": "Value to set the given property to."
+ }
+ ]
+ },
{
- "name": "column",
- "description": "<p>columnName (string) or\n ID (number)</p>\n",
- "type": "String|Integer"
+ "params": [
+ {
+ "name": "property",
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "The current value for the given property."
+ }
}
],
"return": {
- "description": "String",
- "type": "String"
+ "description": "The current value for the given property."
},
- "example": [
- "\n <div class=\"norender\"><code>\n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n let longest = '';\n for (let r = 0; r < rows.length; r++) {\n let species = rows[r].getString('species');\n if (longest.length < species.length) {\n longest = species;\n }\n }\n\n print('longest: ' + longest);\n\n describe('no image displayed');\n }\n </code></div>"
- ],
- "class": "p5.TableRow",
- "module": "IO",
- "submodule": "Table"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Custom Shapes"
},
{
- "file": "src/io/p5.XML.js",
- "line": 77,
- "description": "<p>Returns the element's parent element as a new <a href=\"#/p5.XML\">p5.XML</a>\nobject.</p>\n",
+ "name": "splineProperties",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/custom_shapes.js",
+ "line": 2139,
"itemtype": "method",
- "name": "getParent",
+ "description": "<p>Get or set multiple spline properties at once.</p>\n<p>Similar to <a href=\"#/p5/splineProperty\">splineProperty()</a>:\n<code>splineProperty('tightness', t)</code> is the same as\n<code>splineProperties({'tightness': t})</code></p>\n",
+ "example": [],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "properties",
+ "description": "An object containing key-value pairs to set.",
+ "type": "Object"
+ }
+ ]
+ },
+ {
+ "params": [],
+ "return": {
+ "description": "The current spline properties.",
+ "type": "Object"
+ }
+ }
+ ],
"return": {
- "description": "parent element.",
- "type": "p5.XML"
+ "description": "The current spline properties.",
+ "type": "Object"
},
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal elements.\n let mammals = myXML.getChildren('mammal');\n\n // Get the first mammal element.\n let firstMammal = mammals[0];\n\n // Get the parent element.\n let parent = firstMammal.getParent();\n\n // Get the parent element's name.\n let name = parent.getName();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the parent element's name.\n text(name, 50, 50);\n\n describe('The word \"animals\" written in black on a gray background.');\n}\n</code>\n</div>"
- ],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Custom Shapes"
},
{
- "file": "src/io/p5.XML.js",
- "line": 128,
- "description": "<p>Returns the element's name as a <code>String</code>.</p>\n<p>An XML element's name is given by its tag. For example, the element\n<code><language>JavaScript</language></code> has the name <code>language</code>.</p>\n",
+ "name": "vertex",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/custom_shapes.js",
+ "line": 2366,
"itemtype": "method",
- "name": "getName",
- "return": {
- "description": "name of the element.",
- "type": "String"
- },
+ "description": "<p>Adds a vertex to a custom shape.</p>\n<p><code>vertex()</code> sets the coordinates of vertices drawn between the\n<a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions.</p>\n<p>The first two parameters, <code>x</code> and <code>y</code>, set the x- and y-coordinates of the\nvertex.</p>\n<p>The third parameter, <code>z</code>, is optional. It sets the z-coordinate of the\nvertex in WebGL mode. By default, <code>z</code> is 0.</p>\n<p>The fourth and fifth parameters, <code>u</code> and <code>v</code>, are also optional. They set\nthe u- and v-coordinates for the vertex’s texture when used with\n<a href=\"#/p5/endShape\">endShape()</a>. By default, <code>u</code> and <code>v</code> are both 0.</p>\n",
"example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal elements.\n let mammals = myXML.getChildren('mammal');\n\n // Get the first mammal element.\n let firstMammal = mammals[0];\n\n // Get the mammal element's name.\n let name = firstMammal.getName();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's name.\n text(name, 50, 50);\n\n describe('The word \"mammal\" written in black on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n strokeWeight(3);\n\n // Start drawing the shape.\n // Only draw the vertices.\n beginShape(POINTS);\n\n // Add the vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four black dots that form a square are drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0);\n vertex(35, -30, 0);\n vertex(35, 25, 0);\n vertex(-20, 25, 0);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square spins around slowly on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0);\n vertex(35, -30, 0);\n vertex(35, 25, 0);\n vertex(-20, 25, 0);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load an image to apply as a texture.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe('A photograph of a ceiling rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Style the shape.\n noStroke();\n\n // Apply the texture.\n texture(img);\n textureMode(NORMAL);\n\n // Start drawing the shape\n beginShape();\n\n // Add vertices.\n vertex(-20, -30, 0, 0, 0);\n vertex(35, -30, 0, 1, 0);\n vertex(35, 25, 0, 1, 1);\n vertex(-20, 25, 0, 0, 1);\n\n // Stop drawing the shape.\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet vid;\nfunction setup() {\n // Load a video and create a p5.MediaElement object.\n vid = createVideo('/assets/fingers.mov');\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw a custom shape using uv coordinates.\n beginShape();\n vertex(-40, -40, 0, 0);\n vertex(40, -40, 1, 0);\n vertex(40, 40, 1, 1);\n vertex(-40, 40, 0, 1);\n endShape();\n}\n</code>\n</div>"
],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the vertex.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the vertex.",
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "u",
+ "description": "u-coordinate of the vertex's texture.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "v",
+ "description": "v-coordinate of the vertex's texture.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "type": "Number"
+ },
+ {
+ "name": "u",
+ "description": "u-coordinate of the vertex's texture.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "v",
+ "description": "v-coordinate of the vertex's texture.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Custom Shapes"
},
{
- "file": "src/io/p5.XML.js",
- "line": 178,
- "description": "<p>Sets the element's tag name.</p>\n<p>An XML element's name is given by its tag. For example, the element\n<code><language>JavaScript</language></code> has the name <code>language</code>.</p>\n<p>The parameter, <code>name</code>, is the element's new name as a string. For example,\ncalling <code>myXML.setName('planet')</code> will make the element's new tag name\n<code><planet></planet></code>.</p>\n",
+ "name": "beginContour",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/custom_shapes.js",
+ "line": 2487,
"itemtype": "method",
- "name": "setName",
- "params": [
+ "description": "<p>Begins creating a hole within a flat shape.</p>\n<p>The <code>beginContour()</code> and <a href=\"#/p5/endContour\">endContour()</a>\nfunctions allow for creating negative space within custom shapes that are\nflat. <code>beginContour()</code> begins adding vertices to a negative space and\n<a href=\"#/p5/endContour\">endContour()</a> stops adding them.\n<code>beginContour()</code> and <a href=\"#/p5/endContour\">endContour()</a> must be\ncalled between <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a>.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a>\ndon't work between <code>beginContour()</code> and\n<a href=\"#/p5/endContour\">endContour()</a>. It's also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or\n<a href=\"#/p5/rect\">rect()</a>, between <code>beginContour()</code> and\n<a href=\"#/p5/endContour\">endContour()</a>.</p>\n<p>Note: The vertices that define a negative space must \"wind\" in the opposite\ndirection from the outer shape. First, draw vertices for the outer shape\nclockwise order. Then, draw vertices for the negative space in\ncounter-clockwise order.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(10, 10);\n vertex(90, 10);\n vertex(90, 90);\n vertex(10, 90);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(30, 30);\n vertex(30, 70);\n vertex(70, 70);\n vertex(70, 30);\n endContour(CLOSE);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(-40, -40);\n vertex(40, -40);\n vertex(40, 40);\n vertex(-40, 40);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(-20, -20);\n vertex(-20, 20);\n vertex(20, 20);\n vertex(20, -20);\n endContour(CLOSE);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "name",
- "description": "<p>new tag name of the element.</p>\n",
- "type": "String"
+ "params": []
}
],
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the element's original name.\n let oldName = myXML.getName();\n\n // Set the element's name.\n myXML.setName('monsters');\n\n // Get the element's new name.\n let newName = myXML.getName();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's names.\n text(oldName, 50, 33);\n text(newName, 50, 67);\n\n describe(\n 'The words \"animals\" and \"monsters\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code></div>"
- ],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Custom Shapes"
},
{
- "file": "src/io/p5.XML.js",
- "line": 242,
- "description": "<p>Returns <code>true</code> if the element has child elements and <code>false</code> if not.</p>\n",
+ "name": "endContour",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/custom_shapes.js",
+ "line": 2593,
"itemtype": "method",
- "name": "hasChildren",
- "return": {
- "description": "whether the element has children.",
- "type": "Boolean"
- },
+ "description": "<p>Stops creating a hole within a flat shape.</p>\n<p>The <a href=\"#/p5/beginContour\">beginContour()</a> and <code>endContour()</code>\nfunctions allow for creating negative space within custom shapes that are\nflat. <a href=\"#/p5/beginContour\">beginContour()</a> begins adding vertices\nto a negative space and <code>endContour()</code> stops adding them.\n<a href=\"#/p5/beginContour\">beginContour()</a> and <code>endContour()</code> must be\ncalled between <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a>.</p>\n<p>By default,\nthe controur has an <code>OPEN</code> end, and to close it,\ncall <code>endContour(CLOSE)</code>. The CLOSE contour mode closes splines smoothly.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a>\ndon't work between <a href=\"#/p5/beginContour\">beginContour()</a> and\n<code>endContour()</code>. It's also not possible to use other shapes, such as\n<a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a>,\nbetween <a href=\"#/p5/beginContour\">beginContour()</a> and <code>endContour()</code>.</p>\n<p>Note: The vertices that define a negative space must \"wind\" in the opposite\ndirection from the outer shape. First, draw vertices for the outer shape\nclockwise order. Then, draw vertices for the negative space in\ncounter-clockwise order.</p>\n",
"example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Check whether the element has child elements.\n let isParent = myXML.hasChildren();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Style the text.\n if (isParent === true) {\n text('Parent', 50, 50);\n } else {\n text('Not Parent', 50, 50);\n }\n\n describe('The word \"Parent\" written in black on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(10, 10);\n vertex(90, 10);\n vertex(90, 90);\n vertex(10, 90);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(30, 30);\n vertex(30, 70);\n vertex(70, 70);\n vertex(70, 30);\n endContour(CLOSE);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white square with a square hole in its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n beginShape();\n\n // Exterior vertices, clockwise winding.\n vertex(-40, -40);\n vertex(40, -40);\n vertex(40, 40);\n vertex(-40, 40);\n\n // Interior vertices, counter-clockwise winding.\n beginContour();\n vertex(-20, -20);\n vertex(-20, 20);\n vertex(20, 20);\n vertex(20, -20);\n endContour(CLOSE);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n}\n</code>\n</div>"
],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "mode",
+ "description": "By default, the value is OPEN",
+ "optional": 1,
+ "type": "OPEN|CLOSE"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Custom Shapes"
},
{
- "file": "src/io/p5.XML.js",
- "line": 287,
- "description": "<p>Returns an array with the names of the element's child elements as\n<code>String</code>s.</p>\n",
+ "name": "beginShape",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/vertex.js",
+ "line": 399,
"itemtype": "method",
- "name": "listChildren",
- "return": {
- "description": "names of the child elements.",
- "type": "String[]"
- },
+ "chainable": 1,
+ "description": "<p>Begins adding vertices to a custom shape.</p>\n<p>The <code>beginShape()</code> and <a href=\"#/p5/endShape\">endShape()</a> functions\nallow for creating custom shapes in 2D or 3D. <code>beginShape()</code> begins adding\nvertices to a custom shape and <a href=\"#/p5/endShape\">endShape()</a> stops\nadding them.</p>\n<p>The parameter, <code>kind</code>, sets the kind of shape to make. The available kinds are:</p>\n<ul><li><code>PATH</code> (the default) to draw shapes by tracing out the path along their edges.</li><li><code>POINTS</code> to draw a series of points.</li><li><code>LINES</code> to draw a series of unconnected line segments.</li><li><code>TRIANGLES</code> to draw a series of separate triangles.</li><li><code>TRIANGLE_FAN</code> to draw a series of connected triangles sharing the first vertex in a fan-like fashion.</li><li><code>TRIANGLE_STRIP</code> to draw a series of connected triangles in strip fashion.</li><li><code>QUADS</code> to draw a series of separate quadrilaterals (quads).</li><li><code>QUAD_STRIP</code> to draw quad strip using adjacent edges to form the next quad.</li></ul><p>After calling <code>beginShape()</code>, shapes can be built by calling\n<a href=\"#/p5/vertex\">vertex()</a>,\n<a href=\"#/p5/bezierVertex\">bezierVertex()</a>, and/or\n<a href=\"#/p5/splineVertex\">splineVertex()</a>. Calling\n<a href=\"#/p5/endShape\">endShape()</a> will stop adding vertices to the\nshape. Each shape will be outlined with the current stroke color and filled\nwith the current fill color.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>, and\n<a href=\"#/p5/scale\">scale()</a> don't work between <code>beginShape()</code> and\n<a href=\"#/p5/endShape\">endShape()</a>. It's also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or\n<a href=\"#/p5/rect\">rect()</a>, between <code>beginShape()</code> and\n<a href=\"#/p5/endShape\">endShape()</a>.</p>\n",
"example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the names of the element's children as an array.\n let children = myXML.listChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the child element's name.\n text(children[i], 10, y);\n }\n\n describe(\n 'The words \"mammal\", \"mammal\", \"mammal\", and \"reptile\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape(CLOSE);\n\n describe('A white square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Only draw the vertices (points).\n beginShape(POINTS);\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four black dots that form a square are drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Only draw lines between alternating pairs of vertices.\n beginShape(LINES);\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Two horizontal black lines on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Three black lines form a sideways U shape on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // Add vertices.\n vertex(30, 20);\n vertex(85, 20);\n vertex(85, 75);\n vertex(30, 75);\n\n // Stop drawing the shape.\n // Connect the first and last vertices.\n endShape(CLOSE);\n\n describe('A black outline of a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of triangles.\n beginShape(TRIANGLES);\n\n // Left triangle.\n vertex(30, 75);\n vertex(40, 20);\n vertex(50, 75);\n\n // Right triangle.\n vertex(60, 20);\n vertex(70, 75);\n vertex(80, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Two white triangles drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of triangles.\n beginShape(TRIANGLE_STRIP);\n\n // Add vertices.\n vertex(30, 75);\n vertex(40, 20);\n vertex(50, 75);\n vertex(60, 20);\n vertex(70, 75);\n vertex(80, 20);\n vertex(90, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Five white triangles that are interleaved drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of triangles that share their first vertex.\n beginShape(TRIANGLE_FAN);\n\n // Add vertices.\n vertex(57.5, 50);\n vertex(57.5, 15);\n vertex(92, 50);\n vertex(57.5, 85);\n vertex(22, 50);\n vertex(57.5, 15);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Four white triangles form a square are drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(QUADS);\n\n // Left rectangle.\n vertex(30, 20);\n vertex(30, 75);\n vertex(50, 75);\n vertex(50, 20);\n\n // Right rectangle.\n vertex(65, 20);\n vertex(65, 75);\n vertex(85, 75);\n vertex(85, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Two white rectangles drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(QUAD_STRIP);\n\n // Add vertices.\n vertex(30, 20);\n vertex(30, 75);\n vertex(50, 20);\n vertex(50, 75);\n vertex(65, 20);\n vertex(65, 75);\n vertex(85, 20);\n vertex(85, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('Three white rectangles that share edges are drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(PATH);\n\n // Add the vertices.\n vertex(-30, -30, 0);\n vertex(30, -30, 0);\n vertex(30, -10, 0);\n vertex(-10, -10, 0);\n vertex(-10, 10, 0);\n vertex(30, 10, 0);\n vertex(30, 30, 0);\n vertex(-30, 30, 0);\n\n // Stop drawing the shape.\n // Connect the first and last vertices.\n endShape(CLOSE);\n\n describe('A blocky C shape drawn in white on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag with the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A blocky C shape drawn in red, blue, and green on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Start drawing the shape.\n // Draw a series of quadrilaterals.\n beginShape(PATH);\n\n // Add the vertices.\n fill('red');\n stroke('red');\n vertex(-30, -30, 0);\n vertex(30, -30, 0);\n vertex(30, -10, 0);\n fill('green');\n stroke('green');\n vertex(-10, -10, 0);\n vertex(-10, 10, 0);\n vertex(30, 10, 0);\n fill('blue');\n stroke('blue');\n vertex(30, 30, 0);\n vertex(-30, 30, 0);\n\n // Stop drawing the shape.\n // Connect the first and last vertices.\n endShape(CLOSE);\n}\n</code>\n</div>"
],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
- },
- {
- "file": "src/io/p5.XML.js",
- "line": 342,
- "description": "<p>Returns an array with the element's child elements as new\n<a href=\"#/p5.XML\">p5.XML</a> objects.</p>\n<p>The parameter, <code>name</code>, is optional. If a string is passed, as in\n<code>myXML.getChildren('cat')</code>, then the method will only return child elements\nwith the tag <code><cat></code>.</p>\n",
- "itemtype": "method",
- "name": "getChildren",
- "params": [
+ "overloads": [
{
- "name": "name",
- "description": "<p>name of the elements to return.</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "kind",
+ "description": "either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\nTRIANGLE_STRIP, QUADS, QUAD_STRIP or PATH. Defaults to PATH.",
+ "optional": 1,
+ "type": "POINTS|LINES|TRIANGLES|TRIANGLE_FAN|TRIANGLE_STRIP|QUADS|QUAD_STRIP|PATH"
+ }
+ ]
}
],
- "return": {
- "description": "child elements.",
- "type": "p5.XML[]"
- },
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array of the child elements.\n let children = myXML.getChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", \"Zebra\", and \"Turtle\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array of the child elements\n // that are mammals.\n let children = myXML.getChildren('mammal');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Zebra\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>"
- ],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Custom Shapes"
},
{
- "file": "src/io/p5.XML.js",
- "line": 448,
- "description": "<p>Returns the first matching child element as a new\n<a href=\"#/p5.XML\">p5.XML</a> object.</p>\n<p>The parameter, <code>name</code>, is optional. If a string is passed, as in\n<code>myXML.getChild('cat')</code>, then the first child element with the tag\n<code><cat></code> will be returned. If a number is passed, as in\n<code>myXML.getChild(1)</code>, then the child element at that index will be returned.</p>\n",
+ "name": "bezierVertex",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/vertex.js",
+ "line": 686,
"itemtype": "method",
- "name": "getChild",
- "params": [
- {
- "name": "name",
- "description": "<p>element name or index.</p>\n",
- "type": "String|Integer"
- }
- ],
- "return": {
- "description": "child element.",
- "type": "p5.XML"
- },
+ "description": "<p>Adds a Bézier curve segment to a custom shape.</p>\n<p><code>bezierVertex()</code> adds a curved segment to custom shapes. The Bézier curves\nit creates are defined like those made by the\n<a href=\"#/p5/bezier\">bezier()</a> function. <code>bezierVertex()</code> must be\ncalled between the\n<a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions.\nBézier need a starting point. Building a shape\nonly with Bézier curves needs one initial\ncall to <a href=\"#/p5/vertex\">bezierVertex()</a>, before\na number of <code>bezierVertex()</code> calls that is a multiple of the parameter\nset by <a href=\"#/p5/bezierOrder\">bezierOrder(...)</a> (default 3).\nBut shapes can mix different types of vertices, so if there\nare some previous vertices, then the initial anchor is not needed,\nonly the multiples of 3 (or the Bézier order) calls to\n<code>bezierVertex</code> for each curve.</p>\n<p>Each curve of order 3 requires three calls to <code>bezierVertex</code>, so\n2 curves would need 7 calls to <code>bezierVertex()</code>:\n(1 one initial anchor point, two sets of 3 curves describing the curves)\nWith <code>bezierOrder(2)</code>, two curves would need 5 calls: 1 + 2 + 2.</p>\n<p>Bézier curves can also be drawn in 3D using WebGL mode.</p>\n<p>Note: <code>bezierVertex()</code> won’t work when an argument is passed to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n",
"example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first child element that is a mammal.\n let goat = myXML.getChild('mammal');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Get the child element's content.\n let content = goat.getContent();\n\n // Display the child element's content.\n text(content, 50, 50);\n\n describe('The word \"Goat\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the child element at index 1.\n let leopard = myXML.getChild(1);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Get the child element's content.\n let content = leopard.getContent();\n\n // Display the child element's content.\n text(content, 50, 50);\n\n describe('The word \"Leopard\" written in black on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shape.\n noFill();\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n bezierVertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(80, 0);\n bezierVertex(80, 75);\n bezierVertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A black C curve on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(30, 20);\n point(30, 75);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(80, 0);\n point(80, 75);\n\n // Style the shape.\n noFill();\n stroke(0);\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n bezierVertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(80, 0);\n bezierVertex(80, 75);\n bezierVertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(30, 20, 80, 0);\n line(30, 75, 80, 75);\n\n describe(\n 'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the mouse near the red dot in the top-right corner\n// and drag to change the curve's shape.\n\nlet x2 = 80;\nlet y2 = 0;\nlet isChanging = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the anchor points in black.\n stroke(0);\n strokeWeight(5);\n point(30, 20);\n point(30, 75);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(x2, y2);\n point(80, 75);\n\n // Style the shape.\n noFill();\n stroke(0);\n strokeWeight(1);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n bezierVertex(30, 20);\n\n // Add the Bézier vertex.\n bezierVertex(x2, y2);\n bezierVertex(80, 75);\n bezierVertex(30, 75);\n\n // Stop drawing the shape.\n endShape();\n\n // Draw red lines from the anchor points to the control points.\n stroke(255, 0, 0);\n line(30, 20, x2, y2);\n line(30, 75, 80, 75);\n}\n\n// Start changing the first control point if the user clicks near it.\nfunction mousePressed() {\n if (dist(mouseX, mouseY, x2, y2) < 20) {\n isChanging = true;\n }\n}\n\n// Stop changing the first control point when the user releases the mouse.\nfunction mouseReleased() {\n isChanging = false;\n}\n\n// Update the first control point while the user drags the mouse.\nfunction mouseDragged() {\n if (isChanging === true) {\n x2 = mouseX;\n y2 = mouseY;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Start drawing the shape.\n beginShape();\n\n // Add the first anchor point.\n bezierVertex(30, 20);\n\n // Add the Bézier vertices.\n bezierVertex(80, 0);\n bezierVertex(80, 75);\n bezierVertex(30, 75);\n\n bezierVertex(50, 80);\n bezierVertex(60, 25);\n bezierVertex(30, 20);\n\n // Stop drawing the shape.\n endShape();\n\n describe('A crescent moon shape drawn in white on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A crescent moon shape drawn in white on a blue background. When the user drags the mouse, the scene rotates and a second moon is revealed.');\n}\n\nfunction draw() {\n background('midnightblue');\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the moons.\n noStroke();\n fill('lemonchiffon');\n\n // Draw the first moon.\n beginShape();\n bezierVertex(-20, -30, 0);\n\n bezierVertex(30, -50, 0);\n bezierVertex(30, 25, 0);\n bezierVertex(-20, 25, 0);\n\n bezierVertex(0, 30, 0);\n bezierVertex(10, -25, 0);\n bezierVertex(-20, -30, 0);\n endShape();\n\n // Draw the second moon.\n beginShape();\n\n bezierVertex(-20, -30, -20);\n\n bezierVertex(30, -50, -20);\n bezierVertex(30, 25, -20);\n bezierVertex(-20, 25, -20);\n\n bezierVertex(0, 30, -20);\n bezierVertex(10, -25, -20);\n bezierVertex(-20, -30, -20);\n\n endShape();\n}\n</code>\n</div>"
],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
- },
- {
- "file": "src/io/p5.XML.js",
- "line": 538,
- "description": "<p>Adds a new child element and returns a reference to it.</p>\n<p>The parameter, <code>child</code>, is the <a href=\"#/p5.XML\">p5.XML</a> object to add\nas a child element. For example, calling <code>myXML.addChild(otherXML)</code> inserts\n<code>otherXML</code> as a child element of <code>myXML</code>.</p>\n",
- "itemtype": "method",
- "name": "addChild",
- "params": [
+ "overloads": [
{
- "name": "child",
- "description": "<p>child element to add.</p>\n",
- "type": "p5.XML"
- }
- ],
- "return": {
- "description": "added child element.",
- "type": "p5.XML"
- },
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a new p5.XML object.\n let newAnimal = new p5.XML();\n\n // Set its properties.\n newAnimal.setName('hydrozoa');\n newAnimal.setAttribute('id', 4);\n newAnimal.setAttribute('species', 'Physalia physalis');\n newAnimal.setContent('Bluebottle');\n\n // Add the child element.\n myXML.addChild(newAnimal);\n\n // Get the first child element that is a hydrozoa.\n let blueBottle = myXML.getChild('hydrozoa');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Get the child element's content.\n let content = blueBottle.getContent();\n\n // Display the child element's content.\n text(content, 50, 50);\n\n describe('The word \"Bluebottle\" written in black on a gray background.');\n}\n</code>\n</div>"
- ],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
- },
- {
- "file": "src/io/p5.XML.js",
- "line": 603,
- "description": "<p>Removes the first matching child element.</p>\n<p>The parameter, <code>name</code>, is the child element to remove. If a string is\npassed, as in <code>myXML.removeChild('cat')</code>, then the first child element\nwith the tag <code><cat></code> will be removed. If a number is passed, as in\n<code>myXML.removeChild(1)</code>, then the child element at that index will be\nremoved.</p>\n",
- "itemtype": "method",
- "name": "removeChild",
- "params": [
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the first control point.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the first control point.",
+ "type": "Number"
+ },
+ {
+ "name": "u",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "v",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
{
- "name": "name",
- "description": "<p>name or index of the child element to remove.</p>\n",
- "type": "String|Integer"
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "type": "Number"
+ },
+ {
+ "name": "u",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "v",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Remove the first mammal element.\n myXML.removeChild('mammal');\n\n // Get an array of child elements.\n let children = myXML.getChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Leopard\", \"Zebra\", and \"Turtle\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Remove the element at index 2.\n myXML.removeChild(2);\n\n // Get an array of child elements.\n let children = myXML.getChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Turtle\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>"
- ],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
- },
- {
- "file": "src/io/p5.XML.js",
- "line": 723,
- "description": "<p>Returns the number of attributes the element has.</p>\n",
- "itemtype": "method",
- "name": "getAttributeCount",
- "return": {
- "description": "number of attributes.",
- "type": "Integer"
- },
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first child element.\n let first = myXML.getChild(0);\n\n // Get the number of attributes.\n let numAttributes = first.getAttributeCount();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the number of attributes.\n text(numAttributes, 50, 50);\n\n describe('The number \"2\" written in black on a gray background.');\n}\n</code>\n</div>"
- ],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Custom Shapes"
},
{
- "file": "src/io/p5.XML.js",
- "line": 767,
- "description": "<p>Returns an <code>Array</code> with the names of the element's attributes.</p>\n<p>Note: Use\n<a href=\"#/p5.XML/getString\">myXML.getString()</a> or\n<a href=\"#/p5.XML/getNum\">myXML.getNum()</a> to return an attribute's value.</p>\n",
+ "name": "endShape",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/vertex.js",
+ "line": 876,
"itemtype": "method",
- "name": "listAttributes",
- "return": {
- "description": "attribute names.",
- "type": "String[]"
- },
+ "chainable": 1,
+ "description": "<p>Concludes the vertices of a custom shape.</p>\n<p>The <a href=\"#/p5/beginShape\">beginShape()</a> and <code>endShape()</code> functions\nallow for creating custom shapes in 2D or 3D.\n<a href=\"#/p5/beginShape\">beginShape()</a> begins adding vertices to a\ncustom shape and <code>endShape()</code> stops adding them.</p>\n<p>The first parameter, <code>mode</code>, is optional. By default, the first and last\nvertices of a shape aren't connected. If the constant <code>CLOSE</code> is passed, as\nin <code>endShape(CLOSE)</code>, then the first and last vertices will be connected.\nWhen CLOSE mode is used for splines (with <code>splineVeertex()</code>), the shape is ended smoothly.</p>\n<p>The second parameter, <code>count</code>, is also optional. In WebGL mode, it’s more\nefficient to draw many copies of the same shape using a technique called\n<a href=\"https://webglfundamentals.org/webgl/lessons/webgl-instanced-drawing.html\" target=\"_blank\">instancing</a>.\nThe <code>count</code> parameter tells WebGL mode how many copies to draw. For\nexample, calling <code>endShape(CLOSE, 400)</code> after drawing a custom shape will\nmake it efficient to draw 400 copies. This feature requires\n<a href=\"https://p5js.org/tutorials/intro-to-shaders/\" target=\"_blank\">writing a custom shader</a>.</p>\n<p>After calling <a href=\"#/p5/beginShape\">beginShape()</a>, shapes can be\nbuilt by calling <a href=\"#/p5/vertex\">vertex()</a>,\n<a href=\"#/p5/bezierVertex\">bezierVertex()</a> and/or\n<a href=\"#/p5/splineVertex\">splineVertex()</a>. Calling\n<code>endShape()</code> will stop adding vertices to the\nshape. Each shape will be outlined with the current stroke color and filled\nwith the current fill color.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>, and\n<a href=\"#/p5/scale\">scale()</a> don't work between\n<a href=\"#/p5/beginShape\">beginShape()</a> and <code>endShape()</code>. It's also not\npossible to use other shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or\n<a href=\"#/p5/rect\">rect()</a>, between\n<a href=\"#/p5/beginShape\">beginShape()</a> and <code>endShape()</code>.</p>\n",
"example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first child element.\n let first = myXML.getChild(0);\n\n // Get the number of attributes.\n let attributes = first.listAttributes();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's attributes.\n text(attributes, 50, 50);\n\n describe('The text \"id,species\" written in black on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the shapes.\n noFill();\n\n // Left triangle.\n beginShape();\n vertex(20, 20);\n vertex(45, 20);\n vertex(45, 80);\n endShape(CLOSE);\n\n // Right triangle.\n beginShape();\n vertex(50, 20);\n vertex(75, 20);\n vertex(75, 80);\n endShape();\n\n describe(\n 'Two sets of black lines drawn on a gray background. The three lines on the left form a right triangle. The two lines on the right form a right angle.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n\n beginShape();\n\n splineVertex(32, 91);\n splineVertex(21, 17);\n splineVertex(68, 19);\n splineVertex(82, 91);\n\n endShape(CLOSE);\n\n describe(\n 'A curvy four-sided slightly lopsided blob.'\n );\n}\n</div>\n</code>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `#version 300 es\n\nprecision mediump float;\n\nin vec3 aPosition;\nflat out int instanceID;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nvoid main() {\n\n // Copy the instance ID to the fragment shader.\n instanceID = gl_InstanceID;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // gl_InstanceID represents a numeric value for each instance.\n // Using gl_InstanceID allows us to move each instance separately.\n // Here we move each instance horizontally by ID * 23.\n float xOffset = float(gl_InstanceID) * 23.0;\n\n // Apply the offset to the final position.\n gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -\n vec4(xOffset, 0.0, 0.0, 0.0));\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `#version 300 es\n\nprecision mediump float;\n\nout vec4 outColor;\nflat in int instanceID;\nuniform float numInstances;\n\nvoid main() {\n vec4 red = vec4(1.0, 0.0, 0.0, 1.0);\n vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);\n\n // Normalize the instance ID.\n float normId = float(instanceID) / numInstances;\n\n // Mix between two colors using the normalized instance ID.\n outColor = mix(red, blue, normId);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n background(220);\n\n // Compile and apply the p5.Shader.\n shader(myShader);\n\n // Set the numInstances uniform.\n myShader.setUniform('numInstances', 4);\n\n // Translate the origin to help align the drawing.\n translate(25, -10);\n\n // Style the shapes.\n noStroke();\n\n // Draw the shapes.\n beginShape();\n vertex(0, 0);\n vertex(0, 20);\n vertex(20, 20);\n vertex(20, 0);\n vertex(0, 0);\n endShape(CLOSE, 4);\n\n describe('A row of four squares. Their colors transition from purple on the left to red on the right');\n}\n</code>\n</div>"
],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
- },
- {
- "file": "src/io/p5.XML.js",
- "line": 821,
- "description": "<p>Returns <code>true</code> if the element has a given attribute and <code>false</code> if not.</p>\n<p>The parameter, <code>name</code>, is a string with the name of the attribute being\nchecked.</p>\n<p>Note: Use\n<a href=\"#/p5.XML/getString\">myXML.getString()</a> or\n<a href=\"#/p5.XML/getNum\">myXML.getNum()</a> to return an attribute's value.</p>\n",
- "itemtype": "method",
- "name": "hasAttribute",
- "params": [
+ "overloads": [
{
- "name": "name",
- "description": "<p>name of the attribute to be checked.</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "mode",
+ "description": "use CLOSE to close the shape",
+ "optional": 1,
+ "type": "CLOSE"
+ },
+ {
+ "name": "count",
+ "description": "number of times you want to draw/instance the shape (for WebGL mode).",
+ "optional": 1,
+ "type": "Integer"
+ }
+ ]
}
],
- "return": {
- "description": "whether the element has the attribute.",
- "type": "Boolean"
- },
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first mammal child element.\n let mammal = myXML.getChild('mammal');\n\n // Check whether the element has an\n // species attribute.\n let hasSpecies = mammal.hasAttribute('species');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display whether the element has a species attribute.\n if (hasSpecies === true) {\n text('Species', 50, 50);\n } else {\n text('No species', 50, 50);\n }\n\n describe('The text \"Species\" written in black on a gray background.');\n}\n</code>\n</div>"
- ],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Custom Shapes"
},
{
- "file": "src/io/p5.XML.js",
- "line": 884,
- "description": "<p>Return an attribute's value as a <code>Number</code>.</p>\n<p>The first parameter, <code>name</code>, is a string with the name of the attribute\nbeing checked. For example, calling <code>myXML.getNum('id')</code> returns the\nelement's <code>id</code> attribute as a number.</p>\n<p>The second parameter, <code>defaultValue</code>, is optional. If a number is passed,\nas in <code>myXML.getNum('id', -1)</code>, it will be returned if the attribute\ndoesn't exist or can't be converted to a number.</p>\n<p>Note: Use\n<a href=\"#/p5.XML/getString\">myXML.getString()</a> or\n<a href=\"#/p5.XML/getNum\">myXML.getNum()</a> to return an attribute's value.</p>\n",
+ "name": "normal",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/vertex.js",
+ "line": 1068,
"itemtype": "method",
- "name": "getNum",
- "params": [
+ "chainable": 1,
+ "description": "<p>Sets the normal vector for vertices in a custom 3D shape.</p>\n<p>3D shapes created with <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> are made by connecting sets of\npoints called vertices. Each vertex added with\n<a href=\"#/p5/vertex\">vertex()</a> has a normal vector that points away\nfrom it. The normal vector controls how light reflects off the shape.</p>\n<p><code>normal()</code> can be called two ways with different parameters to define the\nnormal vector's components.</p>\n<p>The first way to call <code>normal()</code> has three parameters, <code>x</code>, <code>y</code>, and <code>z</code>.\nIf <code>Number</code>s are passed, as in <code>normal(1, 2, 3)</code>, they set the x-, y-, and\nz-components of the normal vector.</p>\n<p>The second way to call <code>normal()</code> has one parameter, <code>vector</code>. If a\n<a href=\"#/p5.Vector\">p5.Vector</a> object is passed, as in\n<code>normal(myVector)</code>, its components will be used to set the normal vector.</p>\n<p><code>normal()</code> changes the normal vector of vertices added to a custom shape\nwith <a href=\"#/p5/vertex\">vertex()</a>. <code>normal()</code> must be called between\nthe <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions, just like\n<a href=\"#/p5/vertex\">vertex()</a>. The normal vector set by calling\n<code>normal()</code> will affect all following vertices until <code>normal()</code> is called\nagain:</p>\n<pre><code class=\"language-js\">beginShape();\n\n// Set the vertex normal.\nnormal(-0.4, -0.4, 0.8);\n\n// Add a vertex.\nvertex(-30, -30, 0);\n\n// Set the vertex normal.\nnormal(0, 0, 1);\n\n// Add vertices.\nvertex(30, -30, 0);\nvertex(30, 30, 0);\n\n// Set the vertex normal.\nnormal(0.4, -0.4, 0.8);\n\n// Add a vertex.\nvertex(-30, 30, 0);\n\nendShape();</code></pre>",
+ "example": [
+ "<div>\n<code>\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the shape.\n normalMaterial();\n noStroke();\n\n // Draw the shape.\n beginShape();\n vertex(-30, -30, 0);\n vertex(30, -30, 0);\n vertex(30, 30, 0);\n vertex(-30, 30, 0);\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the shape.\n normalMaterial();\n noStroke();\n\n // Draw the shape.\n // Use normal() to set vertex normals.\n beginShape();\n normal(-0.4, -0.4, 0.8);\n vertex(-30, -30, 0);\n\n normal(0, 0, 1);\n vertex(30, -30, 0);\n vertex(30, 30, 0);\n\n normal(0.4, -0.4, 0.8);\n vertex(-30, 30, 0);\n endShape();\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\n// Click the and drag the mouse to view the scene from a different angle.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the shape.\n normalMaterial();\n noStroke();\n\n // Create p5.Vector objects.\n let n1 = createVector(-0.4, -0.4, 0.8);\n let n2 = createVector(0, 0, 1);\n let n3 = createVector(0.4, -0.4, 0.8);\n\n // Draw the shape.\n // Use normal() to set vertex normals.\n beginShape();\n normal(n1);\n vertex(-30, -30, 0);\n\n normal(n2);\n vertex(30, -30, 0);\n vertex(30, 30, 0);\n\n normal(n3);\n vertex(-30, 30, 0);\n endShape();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "name",
- "description": "<p>name of the attribute to be checked.</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "vector",
+ "description": "vertex normal as a <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ }
+ ]
},
{
- "name": "defaultValue",
- "description": "<p>value to return if the attribute doesn't exist.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "description": "x-component of the vertex normal.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-component of the vertex normal.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z-component of the vertex normal.",
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "attribute value as a number.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's ID.\n let id = reptile.getNum('id');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the ID attribute.\n text(`${content} is ${id + 1}th`, 5, 50, 90);\n\n describe(`The text \"${content} is ${id + 1}th\" written in black on a gray background.`);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's size.\n let weight = reptile.getNum('weight', 135);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the ID attribute.\n text(`${content} is ${weight}kg`, 5, 50, 90);\n\n describe(\n `The text \"${content} is ${weight}kg\" written in black on a gray background.`\n );\n}\n</code>\n</div>"
- ],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Custom Shapes"
},
{
- "file": "src/io/p5.XML.js",
- "line": 989,
- "description": "<p>Return an attribute's value as a string.</p>\n<p>The first parameter, <code>name</code>, is a string with the name of the attribute\nbeing checked. For example, calling <code>myXML.getString('color')</code> returns the\nelement's <code>id</code> attribute as a string.</p>\n<p>The second parameter, <code>defaultValue</code>, is optional. If a string is passed,\nas in <code>myXML.getString('color', 'deeppink')</code>, it will be returned if the\nattribute doesn't exist.</p>\n<p>Note: Use\n<a href=\"#/p5.XML/getString\">myXML.getString()</a> or\n<a href=\"#/p5.XML/getNum\">myXML.getNum()</a> to return an attribute's value.</p>\n",
+ "name": "vertexProperty",
+ "file": "src/scripts/parsers/in/p5.js/src/shape/vertex.js",
+ "line": 1244,
"itemtype": "method",
- "name": "getString",
- "params": [
- {
- "name": "name",
- "description": "<p>name of the attribute to be checked.</p>\n",
- "type": "String"
- },
+ "description": "<p>Sets the shader's vertex property or attribute variables.</p>\n<p>A vertex property, or vertex attribute, is a variable belonging to a vertex in a shader. p5.js provides some\ndefault properties, such as <code>aPosition</code>, <code>aNormal</code>, <code>aVertexColor</code>, etc. These are\nset using <a href=\"#/p5/vertex\">vertex()</a>, <a href=\"#/p5/normal\">normal()</a>\nand <a href=\"#/p5/fill\">fill()</a> respectively. Custom properties can also\nbe defined within <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a>.</p>\n<p>The first parameter, <code>propertyName</code>, is a string with the property's name.\nThis is the same variable name which should be declared in the shader, such as\n<code>in vec3 aProperty</code>, similar to .<code>setUniform()</code>.</p>\n<p>The second parameter, <code>data</code>, is the value assigned to the shader variable. This\nvalue will be applied to subsequent vertices created with\n<a href=\"#/p5/vertex\">vertex()</a>. It can be a Number or an array of numbers,\nand in the shader program the type can be declared according to the WebGL\nspecification. Common types include <code>float</code>, <code>vec2</code>, <code>vec3</code>, <code>vec4</code> or matrices.</p>\n<p>See also the <a href=\"#/p5/vertexProperty\">vertexProperty()</a> method on\n<a href=\"#/p5/Geometry\">Geometry</a> objects.</p>\n",
+ "example": [
+ "<div>\n<code>\nconst vertSrc = `#version 300 es\n precision mediump float;\n uniform mat4 uModelViewMatrix;\n uniform mat4 uProjectionMatrix;\n\n in vec3 aPosition;\n in vec2 aOffset;\n\n void main(){\n vec4 positionVec4 = vec4(aPosition.xyz, 1.0);\n positionVec4.xy += aOffset;\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n }\n`;\n\nconst fragSrc = `#version 300 es\n precision mediump float;\n out vec4 outColor;\n void main(){\n outColor = vec4(0.0, 1.0, 1.0, 1.0);\n }\n`;\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n\n // Create and use the custom shader.\n const myShader = createShader(vertSrc, fragSrc);\n shader(myShader);\n\n describe('A wobbly, cyan circle on a gray background.');\n}\n\nfunction draw(){\n // Set the styles\n background(125);\n noStroke();\n\n // Draw the circle.\n beginShape();\n for (let i = 0; i < 30; i++){\n const x = 40 * cos(i/30 * TWO_PI);\n const y = 40 * sin(i/30 * TWO_PI);\n\n // Apply some noise to the coordinates.\n const xOff = 10 * noise(x + millis()/1000) - 5;\n const yOff = 10 * noise(y + millis()/1000) - 5;\n\n // Apply these noise values to the following vertex.\n vertexProperty('aOffset', [xOff, yOff]);\n vertex(x, y);\n }\n endShape(CLOSE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myShader;\nconst cols = 10;\nconst rows = 10;\nconst cellSize = 6;\n\nconst vertSrc = `#version 300 es\n precision mediump float;\n uniform mat4 uProjectionMatrix;\n uniform mat4 uModelViewMatrix;\n\n in vec3 aPosition;\n in vec3 aNormal;\n in vec3 aVertexColor;\n in float aDistance;\n\n out vec3 vVertexColor;\n\n void main(){\n vec4 positionVec4 = vec4(aPosition, 1.0);\n positionVec4.xyz += aDistance * aNormal * 2.0;;\n vVertexColor = aVertexColor;\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n }\n`;\n\nconst fragSrc = `#version 300 es\n precision mediump float;\n\n in vec3 vVertexColor;\n out vec4 outColor;\n\n void main(){\n outColor = vec4(vVertexColor, 1.0);\n }\n`;\n\nfunction setup(){\n createCanvas(100, 100, WEBGL);\n\n // Create and apply the custom shader.\n myShader = createShader(vertSrc, fragSrc);\n shader(myShader);\n noStroke();\n describe('A blue grid, which moves away from the mouse position, on a gray background.');\n}\n\nfunction draw(){\n background(200);\n\n // Draw the grid in the middle of the screen.\n translate(-cols*cellSize/2, -rows*cellSize/2);\n beginShape(QUADS);\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n\n // Calculate the cell position.\n let x = i * cellSize;\n let y = j * cellSize;\n\n fill(j/rows*255, j/cols*255, 255);\n\n // Calculate the distance from the corner of each cell to the mouse.\n let distance = dist(x, y, mouseX, mouseY);\n\n // Send the distance to the shader.\n vertexProperty('aDistance', min(distance, 100));\n\n vertex(x, y);\n vertex(x + cellSize, y);\n vertex(x + cellSize, y + cellSize);\n vertex(x, y + cellSize);\n }\n }\n endShape();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "defaultValue",
- "description": "<p>value to return if the attribute doesn't exist.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "attributeName",
+ "description": "the name of the vertex attribute.",
+ "type": "String"
+ },
+ {
+ "name": "data",
+ "description": "the data tied to the vertex attribute.",
+ "type": "Number|Number[]"
+ }
+ ]
}
],
- "return": {
- "description": "attribute value as a string.",
- "type": "String"
- },
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's species.\n let species = reptile.getString('species');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the species attribute.\n text(`${content}: ${species}`, 5, 50, 90);\n\n describe(`The text \"${content}: ${species}\" written in black on a gray background.`);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's color.\n let attribute = reptile.getString('color', 'green');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n fill(attribute);\n\n // Display the element's content.\n text(content, 50, 50);\n\n describe(`The text \"${content}\" written in green on a gray background.`);\n}\n</code>\n</div>"
- ],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "Custom Shapes"
},
{
- "file": "src/io/p5.XML.js",
- "line": 1093,
- "description": "<p>Sets an attribute to a given value.</p>\n<p>The first parameter, <code>name</code>, is a string with the name of the attribute\nbeing set.</p>\n<p>The second parameter, <code>value</code>, is the attribute's new value. For example,\ncalling <code>myXML.setAttribute('id', 123)</code> sets the <code>id</code> attribute to the\nvalue 123.</p>\n",
+ "name": "loadFont",
+ "file": "src/scripts/parsers/in/p5.js/src/type/p5.Font.js",
+ "line": 1317,
"itemtype": "method",
- "name": "setAttribute",
- "params": [
+ "description": "<p>Loads a font and creates a <a href=\"#/p5.Font\">p5.Font</a> object.\n<code>loadFont()</code> can load fonts in either .otf or .ttf format. Loaded fonts can\nbe used to style text on the canvas and in HTML elements.</p>\n<p>The first parameter, <code>path</code>, is the path to a font file.\nPaths to local files should be relative. For example,\n<code>'assets/inconsolata.otf'</code>. The Inconsolata font used in the following\nexamples can be downloaded for free\n<a href=\"https://www.fontsquirrel.com/fonts/inconsolata\" target=\"_blank\">here</a>.\nPaths to remote files should be URLs. For example,\n<code>'https://example.com/inconsolata.otf'</code>. URLs may be blocked due to browser\nsecurity.</p>\n<p>In 2D mode, <code>path</code> can take on a few other forms. It could be a path to a CSS file,\nsuch as one from <a href=\"https://fonts.google.com/\">Google Fonts.</a> It could also\nbe a string with a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face\">CSS <code>@font-face</code> declaration.</a></p>\n<p>The second parameter, <code>successCallback</code>, is optional. If a function is\npassed, it will be called once the font has loaded. The callback function\nmay use the new <a href=\"#/p5.Font\">p5.Font</a> object if needed.</p>\n<p>The third parameter, <code>failureCallback</code>, is also optional. If a function is\npassed, it will be called if the font fails to load. The callback function\nmay use the error\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Event\" target=\"_blank\">Event</a>\nobject if needed.</p>\n<p>Fonts can take time to load. <code>await</code> the result of <code>loadFont()</code> in\n<a href=\"#/p5/setup\">setup()</a> before using the result.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet font;\n\nasync function setup() {\n createCanvas(100, 100);\n font = await loadFont('assets/inconsolata.otf');\n fill('deeppink');\n textFont(font);\n textSize(36);\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n loadFont('assets/inconsolata.otf', font => {\n fill('deeppink');\n textFont(font);\n textSize(36);\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n });\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n loadFont('assets/inconsolata.otf', success, failure);\n}\n\nfunction success(font) {\n fill('deeppink');\n textFont(font);\n textSize(36);\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n}\n\nfunction failure(event) {\n console.error('Oops!', event);\n}\n</code>\n</div>",
+ "<div>\n<code>\nasync function setup() {\n createCanvas(100, 100);\n await loadFont('assets/inconsolata.otf');\n let p = createP('p5*js');\n p.style('color', 'deeppink');\n p.style('font-family', 'Inconsolata');\n p.style('font-size', '36px');\n p.position(10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n}\n</code>\n</div>",
+ "<div class=\"norender\">\n<code>\n// Some other forms of loading fonts:\nloadFont(\"https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap\");\nloadFont(`@font-face { font-family: \"Bricolage Grotesque\", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: \"wdth\" 100; }`);\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "name",
- "description": "<p>name of the attribute to be set.</p>\n",
- "type": "String"
- },
+ "params": [
+ {
+ "name": "path",
+ "description": "path of the font or CSS file to be loaded, or a CSS <code>@font-face</code> string.",
+ "type": "String"
+ },
+ {
+ "name": "name",
+ "description": "An alias that can be used for this font in <code>textFont()</code>. Defaults to the name in the font's metadata.",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "options",
+ "description": "An optional object with extra CSS font face descriptors, or p5.js font settings.",
+ "optional": 1,
+ "type": "Object"
+ },
+ {
+ "name": "options.sets",
+ "description": "(Experimental) An optional string of list of strings with Unicode character set names that should be included. When a CSS file is used as the font, it may contain multiple font files. The font best matching the requested character sets will be picked.",
+ "optional": 1,
+ "type": "String|String[]"
+ },
+ {
+ "name": "successCallback",
+ "description": "function called with the\n<a href=\"#/p5.Font\">p5.Font</a> object after it\nloads.",
+ "optional": 1,
+ "type": "Function"
+ },
+ {
+ "name": "failureCallback",
+ "description": "function called with the error\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Event\" target=\"_blank\">Event</a>\nobject if the font fails to load.",
+ "optional": 1,
+ "type": "Function"
+ }
+ ],
+ "return": {
+ "description": "<a href=\"#/p5.Font\">p5.Font</a> object.",
+ "type": "Promise<p5.Font>"
+ }
+ },
{
- "name": "value",
- "description": "<p>attribute's new value.</p>\n",
- "type": "Number|String|Boolean"
+ "params": [
+ {
+ "name": "path",
+ "description": "path of the font to be loaded.",
+ "type": "String"
+ },
+ {
+ "name": "successCallback",
+ "description": "function called with the\n<a href=\"#/p5.Font\">p5.Font</a> object after it\nloads.",
+ "optional": 1,
+ "type": "Function"
+ },
+ {
+ "name": "failureCallback",
+ "description": "function called with the error\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Event\" target=\"_blank\">Event</a>\nobject if the font fails to load.",
+ "optional": 1,
+ "type": "Function"
+ }
+ ],
+ "return": {
+ "description": "The font.",
+ "type": "Promise<p5.Font>"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Set the reptile's color.\n reptile.setAttribute('color', 'green');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's color.\n let attribute = reptile.getString('color');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's content.\n text(`${content} is ${attribute}`, 5, 50, 90);\n\n describe(\n `The text \"${content} is ${attribute}\" written in green on a gray background.`\n );\n}\n</code>\n</div>"
- ],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
+ "return": {
+ "description": "<a href=\"#/p5.Font\">p5.Font</a> object.",
+ "type": "Promise<p5.Font>"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/io/p5.XML.js",
- "line": 1153,
- "description": "<p>Returns the element's content as a <code>String</code>.</p>\n<p>The parameter, <code>defaultValue</code>, is optional. If a string is passed, as in\n<code>myXML.getContent('???')</code>, it will be returned if the element has no\ncontent.</p>\n",
+ "name": "text",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "getContent",
- "params": [
+ "description": "<p>Draws text to the canvas.</p>\n<p>The first parameter, <code>str</code>, is the text to be drawn. The second and third\nparameters, <code>x</code> and <code>y</code>, set the coordinates of the text's bottom-left\ncorner. See <a href=\"#/p5/textAlign\">textAlign()</a> for other ways to\nalign text.</p>\n<p>The fourth and fifth parameters, <code>maxWidth</code> and <code>maxHeight</code>, are optional.\nThey set the dimensions of the invisible rectangle containing the text. By\ndefault, they set its maximum width and height. See\n<a href=\"#/p5/rectMode\">rectMode()</a> for other ways to define the\nrectangular text box. Text will wrap to fit within the text box. Text\noutside of the box won't be drawn.</p>\n<p>Text can be styled a few ways. Call the <a href=\"#/p5/fill\">fill()</a>\nfunction to set the text's fill color. Call\n<a href=\"#/p5/stroke\">stroke()</a> and\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a> to set the text's outline.\nCall <a href=\"#/p5/textSize\">textSize()</a> and\n<a href=\"#/p5/textFont\">textFont()</a> to set the text's size and font,\nrespectively.</p>\n<p>Note: <code>WEBGL</code> mode only supports fonts loaded with\n<a href=\"#/p5/loadFont\">loadFont()</a>. Calling\n<a href=\"#/p5/stroke\">stroke()</a> has no effect in <code>WEBGL</code> mode.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\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 createCanvas(100, 100);\n background('skyblue');\n textSize(100);\n text('🌈', 0, 100);\n\n describe('A rainbow in a blue sky.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\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>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\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>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\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>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\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>",
+ "<div modernizr='webgl'>\n<code>\nlet font;\n\nasync function setup() {\n createCanvas(100, 100, WEBGL);\n font = await loadFont('assets/inconsolata.otf');\n textFont(font);\n textSize(32);\n textAlign(CENTER, CENTER);\n}\n\nfunction draw() {\n background(200);\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>"
+ ],
+ "overloads": [
{
- "name": "defaultValue",
- "description": "<p>value to return if the element has no\n content.</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "str",
+ "description": "text to be displayed.",
+ "type": "String|Object|Array|Number|Boolean"
+ },
+ {
+ "name": "x",
+ "description": "x-coordinate of the text box.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the text box.",
+ "type": "Number"
+ },
+ {
+ "name": "maxWidth",
+ "description": "maximum width of the text box. See\n<a href=\"#/p5/rectMode\">rectMode()</a> for\nother options.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "maxHeight",
+ "description": "maximum height of the text box. See\n<a href=\"#/p5/rectMode\">rectMode()</a> for\nother options.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "element's content as a string.",
- "type": "String"
- },
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's content.\n text(content, 5, 50, 90);\n\n describe(`The text \"${content}\" written in green on a gray background.`);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.XML object.\n let blankSpace = new p5.XML();\n\n // Get the element's content and use a default value.\n let content = blankSpace.getContent('Your name');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's content.\n text(content, 5, 50, 90);\n\n describe(`The text \"${content}\" written in green on a gray background.`);\n}\n</code>\n</div>"
- ],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
+ "class": "p5",
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/io/p5.XML.js",
- "line": 1232,
- "description": "<p>Sets the element's content.</p>\n<p>An element's content is the text between its tags. For example, the element\n<code><language>JavaScript</language></code> has the content <code>JavaScript</code>.</p>\n<p>The parameter, <code>content</code>, is a string with the element's new content.</p>\n",
+ "name": "textAlign",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "setContent",
- "params": [
+ "description": "<p>Sets the way text is aligned when <a href=\"#/p5/text\">text()</a> is called.</p>\n<p>By default, calling <code>text('hi', 10, 20)</code> places the bottom-left corner of\nthe text's bounding box at (10, 20).</p>\n<p>The first parameter, <code>horizAlign</code>, changes the way\n<a href=\"#/p5/text\">text()</a> interprets x-coordinates. By default, the\nx-coordinate sets the left edge of the bounding box. <code>textAlign()</code> accepts\nthe following values for <code>horizAlign</code>: <code>LEFT</code>, <code>CENTER</code>, or <code>RIGHT</code>.</p>\n<p>The second parameter, <code>vertAlign</code>, is optional. It changes the way\n<a href=\"#/p5/text\">text()</a> interprets y-coordinates. By default, the\ny-coordinate sets the bottom edge of the bounding box. <code>textAlign()</code>\naccepts the following values for <code>vertAlign</code>: <code>TOP</code>, <code>BOTTOM</code>, <code>CENTER</code>,\nor <code>BASELINE</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a vertical line.\n strokeWeight(0.5);\n line(50, 0, 50, 100);\n\n // Top line.\n textSize(16);\n textAlign(RIGHT);\n text('ABCD', 50, 30);\n\n // Middle line.\n textAlign(CENTER);\n text('EFGH', 50, 50);\n\n // Bottom line.\n textAlign(LEFT);\n text('IJKL', 50, 70);\n\n describe('The letters ABCD displayed at top-left, EFGH at center, and IJKL at bottom-right. A vertical line divides the canvas in half.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n strokeWeight(0.5);\n\n // First line.\n line(0, 12, width, 12);\n textAlign(CENTER, TOP);\n text('TOP', 50, 12);\n\n // Second line.\n line(0, 37, width, 37);\n textAlign(CENTER, CENTER);\n text('CENTER', 50, 37);\n\n // Third line.\n line(0, 62, width, 62);\n textAlign(CENTER, BASELINE);\n text('BASELINE', 50, 62);\n\n // Fourth line.\n line(0, 97, width, 97);\n textAlign(CENTER, BOTTOM);\n text('BOTTOM', 50, 97);\n\n describe('The words \"TOP\", \"CENTER\", \"BASELINE\", and \"BOTTOM\" each drawn relative to a horizontal line. Their positions demonstrate different vertical alignments.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "content",
- "description": "<p>new content for the element.</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "horizAlign",
+ "description": "horizontal alignment",
+ "type": "LEFT|CENTER|RIGHT"
+ },
+ {
+ "name": "vertAlign",
+ "description": "vertical alignment",
+ "optional": 1,
+ "type": "TOP|BOTTOM|CENTER|BASELINE"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's original content.\n let oldContent = reptile.getContent();\n\n // Set the reptile's content.\n reptile.setContent('Loggerhead');\n\n // Get the reptile's new content.\n let newContent = reptile.getContent();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's old and new content.\n text(`${oldContent}: ${newContent}`, 5, 50, 90);\n\n describe(\n `The text \"${oldContent}: ${newContent}\" written in green on a gray background.`\n );\n}\n</code>\n</div>"
- ],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
+ "class": "p5",
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/io/p5.XML.js",
- "line": 1291,
- "description": "<p>Returns the element as a <code>String</code>.</p>\n<p><code>myXML.serialize()</code> is useful for sending the element over the network or\nsaving it to a file.</p>\n",
+ "name": "textAscent",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "serialize",
- "return": {
- "description": "element as a string.",
- "type": "String"
- },
+ "description": "<p>Returns the ascent of the text.</p>\n<p>The <code>textAscent()</code> function calculates the distance from the baseline to the\nhighest point of the current font. This value represents the ascent, which is essential\nfor determining the overall height of the text along with <code>textDescent()</code>. If\na text string is provided as an argument, the ascent is calculated based on that specific\nstring; otherwise, the ascent of the current font is returned.</p>\n",
"example": [
- "\n<div>\n<code>\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n // Use the file format .xml.\n let myWriter = createWriter('animals', 'xml');\n\n // Serialize the XML data to a string.\n let data = myXML.serialize();\n\n // Write the data to the print stream.\n myWriter.write(data);\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(400, 300);\n background(220);\n\n textSize(48);\n textAlign(LEFT, BASELINE);\n textFont('Georgia');\n\n let s = \"Hello, p5.js!\";\n let x = 50, y = 150;\n\n fill(0);\n text(s, x, y);\n\n // Get the ascent of the current font\n let asc = textAscent();\n\n // Draw a red line at the baseline and a blue line at the ascent position\n stroke('red');\n line(x, y, x + 200, y); // Baseline\n stroke('blue');\n line(x, y - asc, x + 200, y - asc); // Ascent (top of text)\n\n noStroke();\n fill(0);\n textSize(16);\n text(\"textAscent: \" + asc.toFixed(2) + \" pixels\", x, y - asc - 10);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet font;\n\nasync function setup() {\n font = await loadFont('assets/inconsolata.otf');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textFont(font);\n\n // Different for each font.\n let fontScale = 0.8;\n\n let baseY = 75;\n strokeWeight(0.5);\n\n // Draw small text.\n textSize(24);\n text('dp', 0, baseY);\n\n // Draw baseline and ascent.\n let a = textAscent() * fontScale;\n line(0, baseY, 23, baseY);\n line(23, baseY - a, 23, baseY);\n\n // Draw large text.\n textSize(48);\n text('dp', 45, baseY);\n\n // Draw baseline and ascent.\n a = textAscent() * fontScale;\n line(45, baseY, 91, baseY);\n line(91, baseY - a, 91, baseY);\n\n 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\".');\n}\n</code>\n</div>"
],
- "class": "p5.XML",
- "module": "IO",
- "submodule": "Input"
- },
- {
- "file": "src/math/calculation.js",
- "line": 10,
- "description": "<p>Calculates the absolute value of a number.</p>\n<p>A number's absolute value is its distance from zero on the number line.\n-5 and 5 are both five units away from zero, so calling <code>abs(-5)</code> and\n<code>abs(5)</code> both return 5. The absolute value of a number is always positive.</p>\n",
- "itemtype": "method",
- "name": "abs",
- "params": [
+ "overloads": [
{
- "name": "n",
- "description": "<p>number to compute.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "txt",
+ "description": "(Optional) The text string for which to calculate the ascent.\nIf omitted, the function returns the ascent for the current font.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "The ascent value in pixels.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "absolute value of given number.",
+ "description": "The ascent value in pixels.",
"type": "Number"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square with a vertical black line that divides it in half. A white rectangle gets taller when the user moves the mouse away from the line.');\n}\n\nfunction draw() {\n background(200);\n\n // Divide the canvas.\n line(50, 0, 50, 100);\n\n // Calculate the mouse's distance from the middle.\n let h = abs(mouseX - 50);\n\n // Draw a rectangle based on the mouse's distance\n // from the middle.\n rect(0, 100 - h, 100, h);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 48,
- "description": "<p>Calculates the closest integer value that is greater than or equal to a\nnumber.</p>\n<p>For example, calling <code>ceil(9.03)</code> and <code>ceil(9.97)</code> both return the value\n10.</p>\n",
+ "name": "textDescent",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "ceil",
- "params": [
+ "description": "<p>Returns the descent of the text.</p>\n<p>The <code>textDescent()</code> function calculates the distance from the baseline to the\nlowest point of the current font. This value represents the descent, which, when combined\nwith the ascent (from <code>textAscent()</code>), determines the overall vertical span of the text.\nIf a text string is provided as an argument, the descent is calculated based on that specific string;\notherwise, the descent of the current font is returned.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(400, 300);\n background(220);\n\n textSize(48);\n textAlign(LEFT, BASELINE);\n textFont('Georgia');\n\n let s = \"Hello, p5.js!\";\n let x = 50, y = 150;\n\n fill(0);\n text(s, x, y);\n\n // Get the descent of the current font\n let desc = textDescent();\n\n // Draw a red line at the baseline and a blue line at the bottom of the text\n stroke('red');\n line(x, y, x + 200, y); // Baseline\n stroke('blue');\n line(x, y + desc, x + 200, y + desc); // Descent (bottom of text)\n\n noStroke();\n fill(0);\n textSize(16);\n text(\"textDescent: \" + desc.toFixed(2) + \" pixels\", x, y + desc + 20);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet font;\n\nasync function setup() {\n font = await loadFont('assets/inconsolata.otf');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Style the font.\n textFont(font);\n\n // Different for each font.\n let fontScale = 0.9;\n\n let baseY = 75;\n strokeWeight(0.5);\n\n // Draw small text.\n textSize(24);\n text('dp', 0, baseY);\n\n // Draw baseline and descent.\n let d = textDescent() * fontScale;\n line(0, baseY, 23, baseY);\n line(23, baseY, 23, baseY + d);\n\n // Draw large text.\n textSize(48);\n text('dp', 45, baseY);\n\n // Draw baseline and descent.\n d = textDescent() * fontScale;\n line(45, baseY, 91, baseY);\n line(91, baseY, 91, baseY + d);\n\n 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\".');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "n",
- "description": "<p>number to round up.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "txt",
+ "description": "(Optional) The text string for which to calculate the descent.\nIf omitted, the function returns the descent for the current font.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "The descent value in pixels.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "rounded up number.",
- "type": "Integer"
+ "description": "The descent value in pixels.",
+ "type": "Number"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n noStroke();\n\n // Draw the left rectangle.\n let r = 0.3;\n fill(r, 0, 0);\n rect(0, 0, 50, 100);\n\n // Round r up to 1.\n r = ceil(r);\n\n // Draw the right rectangle.\n fill(r, 0, 0);\n rect(50, 0, 50, 100);\n\n describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 91,
- "description": "<p>Constrains a number between a minimum and maximum value.</p>\n",
+ "name": "textLeading",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "constrain",
- "params": [
- {
- "name": "n",
- "description": "<p>number to constrain.</p>\n",
- "type": "Number"
- },
- {
- "name": "low",
- "description": "<p>minimum limit.</p>\n",
- "type": "Number"
- },
+ "description": "<p>Sets the spacing between lines of text when\n<a href=\"#/p5/text\">text()</a> is called.</p>\n<p>Note: Spacing is measured in pixels.</p>\n<p>Calling <code>textLeading()</code> without an argument returns the current spacing.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // \"\\n\" starts a new line of text.\n let lines = 'one\\ntwo';\n\n // Left.\n text(lines, 10, 25);\n\n // Right.\n textLeading(30);\n text(lines, 70, 25);\n\n 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.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "high",
- "description": "<p>maximum limit.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "leading",
+ "description": "The new text leading to apply, in pixels",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "If no arguments are provided, the current text leading",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "constrained number.",
+ "description": "If no arguments are provided, the current text leading",
"type": "Number"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n let x = constrain(mouseX, 33, 67);\n let y = 50;\n\n strokeWeight(5);\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');\n}\n\nfunction draw() {\n background(200);\n\n // Set boundaries and draw them.\n let leftWall = 25;\n let rightWall = 75;\n line(leftWall, 0, leftWall, 100);\n line(rightWall, 0, rightWall, 100);\n\n // Draw a circle that follows the mouse freely.\n fill(255);\n circle(mouseX, 33, 9);\n\n // Draw a circle that's constrained.\n let xc = constrain(mouseX, leftWall, rightWall);\n fill(0);\n circle(xc, 67, 9);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 155,
- "description": "<p>Calculates the distance between two points.</p>\n<p>The version of <code>dist()</code> with four parameters calculates distance in two\ndimensions.</p>\n<p>The version of <code>dist()</code> with six parameters calculates distance in three\ndimensions.</p>\n<p>Use <a href=\"#/p5.Vector/dist\">p5.Vector.dist()</a> to calculate the\ndistance between two <a href=\"#/p5.Vector\">p5.Vector</a> objects.</p>\n",
+ "name": "textFont",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "dist",
- "return": {
- "description": "distance between the two points.",
- "type": "Number"
- },
+ "description": "<p>Sets the font used by the <a href=\"#/p5/text\">text()</a> function.</p>\n<p>The first parameter, <code>font</code>, sets the font. <code>textFont()</code> recognizes either\na <a href=\"#/p5.Font\">p5.Font</a> object or a string with the name of a\nsystem font. For example, <code>'Courier New'</code>.</p>\n<p>The second parameter, <code>size</code>, is optional. It sets the font size in pixels.\nThis has the same effect as calling <a href=\"#/p5/textSize\">textSize()</a>.</p>\n<p>Note: <code>WEBGL</code> mode only supports fonts loaded with\n<a href=\"#/p5/loadFont\">loadFont()</a>.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates.\n let x1 = 10;\n let y1 = 50;\n let x2 = 90;\n let y2 = 50;\n\n // Draw the points and a line connecting them.\n line(x1, y1, x2, y2);\n strokeWeight(5);\n point(x1, y1);\n point(x2, y2);\n\n // Calculate the distance.\n let d = dist(x1, y1, x2, y2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the distance.\n text(d, 43, 40);\n\n describe('Two dots connected by a horizontal line. The number 80 is written above the center of the line.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n textFont('Courier New');\n textSize(24);\n text('hi', 35, 55);\n\n describe('The text \"hi\" written in a black, monospace font on a gray background.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n background('black');\n fill('palegreen');\n textFont('Courier New', 10);\n text('You turn to the left and see a door. Do you enter?', 5, 5, 90, 90);\n text('>', 5, 70);\n\n describe('A text prompt from a game is written in a green, monospace font on a black background.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n textFont('Verdana');\n let currentFont = textFont();\n text(currentFont, 25, 50);\n\n describe('The text \"Verdana\" written in a black, sans-serif font on a gray background.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet fontRegular;\nlet fontItalic;\nlet fontBold;\n\nasync function setup() {\n createCanvas(100, 100);\n fontRegular = await loadFont('assets/Regular.otf');\n fontItalic = await loadFont('assets/Italic.ttf');\n fontBold = await loadFont('assets/Bold.ttf');\n\n background(200);\n textFont(fontRegular);\n text('I am Normal', 10, 30);\n textFont(fontItalic);\n text('I am Italic', 10, 50);\n textFont(fontBold);\n text('I am Bold', 10, 70);\n\n 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.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Math",
- "submodule": "Calculation",
"overloads": [
{
- "line": 155,
"params": [
{
- "name": "x1",
- "description": "<p>x-coordinate of the first point.</p>\n",
- "type": "Number"
- },
- {
- "name": "y1",
- "description": "<p>y-coordinate of the first point.</p>\n",
- "type": "Number"
+ "name": "font",
+ "description": "The font to apply",
+ "type": "p5.Font|String|Object"
},
{
- "name": "x2",
- "description": "<p>x-coordinate of the second point.</p>\n",
+ "name": "size",
+ "description": "An optional text size to apply.",
+ "optional": 1,
"type": "Number"
- },
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Typography"
+ },
+ {
+ "name": "textSize",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
+ "itemtype": "method",
+ "description": "<p>Sets or gets the current text size.</p>\n<p>The <code>textSize()</code> function is used to specify the size of the text\nthat will be rendered on the canvas. When called with an argument, it sets the\ntext size to the specified value (which can be a number representing pixels or a\nCSS-style string, e.g., '32px', '2em'). When called without an argument, it\nreturns the current text size in pixels.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(600, 200);\n background(240);\n\n // Set the text size to 48 pixels\n textSize(48);\n textAlign(CENTER, CENTER);\n textFont(\"Georgia\");\n\n // Draw text using the current text size\n fill(0);\n text(\"Hello, p5.js!\", width / 2, height / 2);\n\n // Retrieve and display the current text size\n let currentSize = textSize();\n fill(50);\n textSize(16);\n text(\"Current text size: \" + currentSize, width / 2, height - 20);\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n textSize(12);\n text('Font Size 12', 10, 30);\n\n // Middle.\n textSize(14);\n text('Font Size 14', 10, 60);\n\n // Bottom.\n textSize(16);\n text('Font Size 16', 10, 90);\n\n describe('The text \"Font Size 12\" drawn small, \"Font Size 14\" drawn medium, and \"Font Size 16\" drawn large.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
{
- "name": "y2",
- "description": "<p>y-coordinate of the second point.</p>\n",
+ "name": "size",
+ "description": "The size to set for the text.",
"type": "Number"
}
],
"return": {
- "description": "distance between the two points.",
+ "description": "If no arguments are provided, the current text size in pixels.",
"type": "Number"
}
},
{
- "line": 209,
+ "params": [],
+ "return": {
+ "description": "The current text size in pixels.",
+ "type": "Number"
+ }
+ }
+ ],
+ "return": {
+ "description": "If no arguments are provided, the current text size in pixels.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Typography"
+ },
+ {
+ "name": "textStyle",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
+ "itemtype": "method",
+ "description": "<p>Sets the style for system fonts when\n<a href=\"#/p5/text\">text()</a> is called.</p>\n<p>The parameter, <code>style</code>, can be either <code>NORMAL</code>, <code>ITALIC</code>, <code>BOLD</code>, or\n<code>BOLDITALIC</code>.</p>\n<p><code>textStyle()</code> may be overridden by CSS styling. This function doesn't\naffect fonts loaded with <a href=\"#/p5/loadFont\">loadFont()</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(12);\n textAlign(CENTER);\n\n // First row.\n textStyle(NORMAL);\n text('Normal', 50, 15);\n\n // Second row.\n textStyle(ITALIC);\n text('Italic', 50, 40);\n\n // Third row.\n textStyle(BOLD);\n text('Bold', 50, 65);\n\n // Fourth row.\n textStyle(BOLDITALIC);\n text('Bold Italic', 50, 90);\n\n describe('The words \"Normal\" displayed normally, \"Italic\" in italic, \"Bold\" in bold, and \"Bold Italic\" in bold italics.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
"params": [
{
- "name": "x1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z1",
- "description": "<p>z-coordinate of the first point.</p>\n",
- "type": "Number"
- },
- {
- "name": "x2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z2",
- "description": "<p>z-coordinate of the second point.</p>\n",
- "type": "Number"
+ "name": "style",
+ "description": "The style to use",
+ "type": "NORMAL|ITALIC|BOLD|BOLDITALIC"
}
],
"return": {
- "description": "distance between the two points.",
- "type": "Number"
+ "description": "If no arguments are provided, the current style",
+ "type": "NORMAL|ITALIC|BOLD|BOLDITALIC"
}
- }
- ]
- },
- {
- "file": "src/math/calculation.js",
- "line": 230,
- "description": "<p>Calculates the value of Euler's number e (2.71828...) raised to the power\nof a number.</p>\n",
- "itemtype": "method",
- "name": "exp",
- "params": [
+ },
{
- "name": "n",
- "description": "<p>exponent to raise.</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "",
+ "type": "NORMAL|BOLD|ITALIC|BOLDITALIC"
+ }
}
],
"return": {
- "description": "e^n",
- "type": "Number"
+ "description": "If no arguments are provided, the current style",
+ "type": "NORMAL|ITALIC|BOLD|BOLDITALIC"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = exp(1);\n circle(10, 10, d);\n\n // Left-center.\n d = exp(2);\n circle(20, 20, d);\n\n // Right-center.\n d = exp(3);\n circle(40, 40, d);\n\n // Bottom-right.\n d = exp(4);\n circle(80, 80, d);\n\n describe('A series of circles that grow exponentially from top left to bottom right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that grow exponentially from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 0.005 * exp(x * 0.1);\n\n // Draw a point.\n point(x, y);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 294,
- "description": "<p>Calculates the closest integer value that is less than or equal to the\nvalue of a number.</p>\n",
+ "name": "textWidth",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "floor",
- "params": [
- {
- "name": "n",
- "description": "<p>number to round down.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "rounded down number.",
- "type": "Integer"
- },
+ "description": "<p>Calculates the width of the given text string in pixels.</p>\n<p>The <code>textWidth()</code> function processes the provided text string to determine its tight bounding box\nbased on the current text properties such as font, textSize, and textStyle. Internally, it splits\nthe text into individual lines (if line breaks are present) and computes the bounding box for each\nline using the renderer’s measurement functions. The final width is determined as the maximum width\namong all these lines.</p>\n<p>For example, if the text contains multiple lines due to wrapping or explicit line breaks, textWidth()\nwill return the width of the longest line.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n noStroke();\n\n // Draw the left rectangle.\n let r = 0.8;\n fill(r, 0, 0);\n rect(0, 0, 50, 100);\n\n // Round r down to 0.\n r = floor(r);\n\n // Draw the right rectangle.\n fill(r, 0, 0);\n rect(50, 0, 50, 100);\n\n describe('Two rectangles. The one on the left is bright red and the one on the right is black.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(200, 200);\n background(220);\n\n // Set text size and alignment\n textSize(48);\n textAlign(LEFT, TOP);\n\n let myText = \"Hello\";\n\n // Calculate the width of the text\n let tw = textWidth(myText);\n\n // Draw the text on the canvas\n fill(0);\n text(myText, 50, 50);\n\n // Display the text width below\n noStroke();\n fill(0);\n textSize(20);\n text(\"Text width: \" + tw, 10, 150);\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(28);\n strokeWeight(0.5);\n\n // Calculate the text width.\n let s = 'yoyo';\n let w = textWidth(s);\n\n // Display the text.\n text(s, 22, 55);\n\n // Underline the text.\n line(22, 55, 22 + w, 55);\n\n describe('The word \"yoyo\" underlined.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(28);\n strokeWeight(0.5);\n\n // Calculate the text width.\n // \"\\n\" starts a new line.\n let s = 'yo\\nyo';\n let w = textWidth(s);\n\n // Display the text.\n text(s, 22, 55);\n\n // Underline the text.\n line(22, 55, 22 + w, 55);\n\n describe('The word \"yo\" written twice, one copy beneath the other. The words are divided by a horizontal line.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Math",
- "submodule": "Calculation"
- },
- {
- "file": "src/math/calculation.js",
- "line": 332,
- "description": "<p>Calculates a number between two numbers at a specific increment.</p>\n<p>The <code>amt</code> parameter is the amount to interpolate between the two numbers.\n0.0 is equal to the first number, 0.1 is very near the first number, 0.5 is\nhalf-way in between, and 1.0 is equal to the second number. The <code>lerp()</code>\nfunction is convenient for creating motion along a straight path and for\ndrawing dotted lines.</p>\n<p>If the value of <code>amt</code> is less than 0 or more than 1, <code>lerp()</code> will return a\nnumber outside of the original interval. For example, calling\n<code>lerp(0, 10, 1.5)</code> will return 15.</p>\n",
- "itemtype": "method",
- "name": "lerp",
- "params": [
- {
- "name": "start",
- "description": "<p>first value.</p>\n",
- "type": "Number"
- },
- {
- "name": "stop",
- "description": "<p>second value.</p>\n",
- "type": "Number"
- },
+ "overloads": [
{
- "name": "amt",
- "description": "<p>number.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "text",
+ "description": "The text to measure",
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "The width of the text",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "lerped value.",
+ "description": "The width of the text",
"type": "Number"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Declare variables for coordinates.\n let a = 20;\n let b = 80;\n let c = lerp(a, b, 0.2);\n let d = lerp(a, b, 0.5);\n let e = lerp(a, b, 0.8);\n\n strokeWeight(5);\n\n // Draw the original points in black.\n stroke(0);\n point(a, 50);\n point(b, 50);\n\n // Draw the lerped points in gray.\n stroke(100);\n point(c, 50);\n point(d, 50);\n point(e, 50);\n\n describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 50;\nlet y = 50;\nlet targetX = 50;\nlet targetY = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A white circle at the center of a gray canvas. The circle moves to where the user clicks, then moves smoothly back to the center.');\n}\n\nfunction draw() {\n background(220);\n\n // Move x and y toward the target.\n x = lerp(x, targetX, 0.05);\n y = lerp(y, targetY, 0.05);\n\n // Draw the circle.\n circle(x, y, 20);\n}\n\n// Set x and y when the user clicks the mouse.\nfunction mouseClicked() {\n x = mouseX;\n y = mouseY;\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 423,
- "description": "<p>Calculates the natural logarithm (the base-e logarithm) of a number.</p>\n<p><code>log()</code> expects the <code>n</code> parameter to be a value greater than 0 because\nthe natural logarithm is defined that way.</p>\n",
+ "name": "textWrap",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "log",
- "params": [
- {
- "name": "n",
- "description": "<p>number greater than 0.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "natural logarithm of n.",
- "type": "Number"
- },
+ "description": "<p>Sets the style for wrapping text when\n<a href=\"#/p5/text\">text()</a> is called.</p>\n<p>The parameter, <code>style</code>, can be one of the following values:</p>\n<p><code>WORD</code> starts new lines of text at spaces. If a string of text doesn't\nhave spaces, it may overflow the text box and the canvas. This is the\ndefault style.</p>\n<p><code>CHAR</code> starts new lines as needed to stay within the text box.</p>\n<p><code>textWrap()</code> only works when the maximum width is set for a text box. For\nexample, calling <code>text('Have a wonderful day', 0, 10, 100)</code> sets the\nmaximum width to 100 pixels.</p>\n<p>Calling <code>textWrap()</code> without an argument returns the current style.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = log(50);\n circle(33, 33, d);\n\n // Bottom-right.\n d = log(500000000);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is about five times larger.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher slowly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate coordinates.\n let x = frameCount;\n let y = 15 * log(x);\n\n // Draw a point.\n point(x, y);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(20);\n textWrap(WORD);\n\n // Display the text.\n text('Have a wonderful day', 0, 10, 100);\n\n describe('The text \"Have a wonderful day\" written across three lines.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(20);\n textWrap(CHAR);\n\n // Display the text.\n text('Have a wonderful day', 0, 10, 100);\n\n describe('The text \"Have a wonderful day\" written across two lines.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(20);\n textWrap(CHAR);\n\n // Display the text.\n text('祝你有美好的一天', 0, 10, 100);\n\n describe('The text \"祝你有美好的一天\" written across two lines.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Math",
- "submodule": "Calculation"
- },
- {
- "file": "src/math/calculation.js",
- "line": 481,
- "description": "<p>Calculates the magnitude, or length, of a vector.</p>\n<p>A vector can be thought of in different ways. In one view, a vector is a\npoint in space. The vector's components, <code>x</code> and <code>y</code>, are the point's\ncoordinates <code>(x, y)</code>. A vector's magnitude is the distance from the origin\n<code>(0, 0)</code> to <code>(x, y)</code>. <code>mag(x, y)</code> is a shortcut for calling\n<code>dist(0, 0, x, y)</code>.</p>\n<p>A vector can also be thought of as an arrow pointing in space. This view is\nhelpful for programming motion. See <a href=\"#/p5.Vector\">p5.Vector</a> for\nmore details.</p>\n<p>Use <a href=\"#/p5.Vector/mag\">p5.Vector.mag()</a> to calculate the\nmagnitude of a <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n",
- "itemtype": "method",
- "name": "mag",
- "params": [
+ "overloads": [
{
- "name": "x",
- "description": "<p>first component.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "style",
+ "description": "The wrapping style to use",
+ "type": "WORD|CHAR"
+ }
+ ],
+ "return": {
+ "description": "If no arguments are provided, the current wrapping style",
+ "type": "CHAR|WORD"
+ }
},
{
- "name": "y",
- "description": "<p>second component.</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "The current wrapping style",
+ "type": "CHAR|WORD"
+ }
}
],
"return": {
- "description": "magnitude of vector.",
- "type": "Number"
+ "description": "If no arguments are provided, the current wrapping style",
+ "type": "CHAR|WORD"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the vector's components.\n let x = 30;\n let y = 40;\n\n // Calculate the magnitude.\n let m = mag(x, y);\n\n // Style the text.\n textSize(16);\n\n // Display the vector and its magnitude.\n line(0, 0, x, y);\n text(m, x, y);\n\n describe('A diagonal line is drawn from the top left of the canvas. The number 50 is written at the end of the line.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 534,
- "description": "<p>Re-maps a number from one range to another.</p>\n<p>For example, calling <code>map(2, 0, 10, 0, 100)</code> returns 20. The first three\narguments set the original value to 2 and the original range from 0 to 10.\nThe last two arguments set the target range from 0 to 100. 20's position\nin the target range [0, 100] is proportional to 2's position in the\noriginal range [0, 10].</p>\n<p>The sixth parameter, <code>withinBounds</code>, is optional. By default, <code>map()</code> can\nreturn values outside of the target range. For example,\n<code>map(11, 0, 10, 0, 100)</code> returns 110. Passing <code>true</code> as the sixth parameter\nconstrains the remapped value to the target range. For example,\n<code>map(11, 0, 10, 0, 100, true)</code> returns 100.</p>\n",
+ "name": "textBounds",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "map",
- "params": [
- {
- "name": "value",
- "description": "<p>the value to be remapped.</p>\n",
- "type": "Number"
- },
- {
- "name": "start1",
- "description": "<p>lower bound of the value's current range.</p>\n",
- "type": "Number"
- },
- {
- "name": "stop1",
- "description": "<p>upper bound of the value's current range.</p>\n",
- "type": "Number"
- },
- {
- "name": "start2",
- "description": "<p>lower bound of the value's target range.</p>\n",
- "type": "Number"
- },
- {
- "name": "stop2",
- "description": "<p>upper bound of the value's target range.</p>\n",
- "type": "Number"
- },
+ "description": "<p>Computes the tight bounding box for a block of text.</p>\n<p>The <code>textBounds()</code> function calculates the precise pixel boundaries that enclose\nthe rendered text based on the current text properties (such as font, textSize, textStyle, and\nalignment). If the text spans multiple lines (due to line breaks or wrapping), the function\nmeasures each line individually and then aggregates these measurements into a single bounding box.\nThe resulting object contains the x and y coordinates along with the width (w) and height (h)\nof the text block.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(300, 200);\n background(220);\n\n // Set up text properties for clarity\n textSize(32);\n textAlign(LEFT, TOP);\n\n let txt = \"Hello, World!\";\n // Compute the bounding box for the text starting at (50, 50)\n let bounds = textBounds(txt, 50, 50);\n\n // Draw the text\n fill(0);\n text(txt, 50, 50);\n\n // Draw the computed bounding box in red to visualize the measured area\n noFill();\n stroke('red');\n rect(bounds.x, bounds.y, bounds.w, bounds.h);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "withinBounds",
- "description": "<p>constrain the value to the newly mapped range.</p>\n",
- "type": "Boolean",
- "optional": true
+ "params": [
+ {
+ "name": "str",
+ "description": "The text string to measure.",
+ "type": "String"
+ },
+ {
+ "name": "x",
+ "description": "The x-coordinate where the text is drawn.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "The y-coordinate where the text is drawn.",
+ "type": "Number"
+ },
+ {
+ "name": "width",
+ "description": "(Optional) The maximum width available for the text block.\nWhen specified, the text may be wrapped to fit within this width.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "(Optional) The maximum height available for the text block.\nAny lines exceeding this height will be truncated.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "An object with properties <code>x</code>, <code>y</code>, <code>w</code>, and <code>h</code> that represent the tight\nbounding box of the rendered text.",
+ "type": "Object"
+ }
}
],
"return": {
- "description": "remapped number.",
- "type": "Number"
+ "description": "An object with properties <code>x</code>, <code>y</code>, <code>w</code>, and <code>h</code> that represent the tight\nbounding box of the rendered text.",
+ "type": "Object"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two horizontal lines. The top line grows horizontally as the mouse moves to the right. The bottom line also grows horizontally but is scaled to stay on the left half of the canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the top line.\n line(0, 25, mouseX, 25);\n\n // Remap mouseX from [0, 100] to [0, 50].\n let x = map(mouseX, 0, 100, 0, 50);\n\n // Draw the bottom line.\n line(0, 75, x, 75);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle changes color from black to white as the mouse moves from left to right.');\n}\n\nfunction draw() {\n background(200);\n\n // Remap mouseX from [0, 100] to [0, 255]\n let c = map(mouseX, 0, 100, 0, 255);\n\n // Style the circle.\n fill(c);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 618,
- "description": "<p>Returns the largest value in a sequence of numbers.</p>\n<p>The version of <code>max()</code> with one parameter interprets it as an array of\nnumbers and returns the largest number.</p>\n<p>The version of <code>max()</code> with two or more parameters interprets them as\nindividual numbers and returns the largest number.</p>\n",
+ "name": "textDirection",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "max",
- "return": {
- "description": "maximum number.",
- "type": "Number"
- },
+ "description": "<p>Sets or gets the text drawing direction.</p>\n<p>The <code>textDirection()</code> function allows you to specify the direction in which text is\nrendered on the canvas. When provided with a <code>direction</code> parameter (such as \"ltr\" for\nleft-to-right, \"rtl\" for right-to-left, or \"inherit\"), it updates the renderer's state with that\nvalue and applies the new setting. When called without any arguments, it returns the current text\ndirection. This function is particularly useful for rendering text in languages with different\nwriting directions.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the maximum of 10, 5, and 20.\n let m = max(10, 5, 20);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the max.\n text(m, 50, 50);\n\n describe('The number 20 written in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [10, 5, 20];\n\n // Calculate the maximum of the array.\n let m = max(numbers);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the max.\n text(m, 50, 50);\n\n describe('The number 20 written in the middle of a gray square.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(300, 300);\n background(240);\n\n textSize(32);\n textFont(\"Georgia\");\n textAlign(LEFT, TOP);\n\n // Set text direction to right-to-left and draw Arabic text.\n textDirection(\"rtl\");\n fill(0);\n text(\"مرحبًا!\", 50, 50);\n\n // Set text direction to left-to-right and draw English text.\n textDirection(\"ltr\");\n text(\"Hello, p5.js!\", 50, 150);\n\n // Display the current text direction.\n textSize(16);\n fill(50);\n textAlign(LEFT, TOP);\n text(\"Current textDirection: \" + textDirection(), 50, 250);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Math",
- "submodule": "Calculation",
"overloads": [
{
- "line": 618,
"params": [
{
- "name": "n0",
- "description": "<p>first number to compare.</p>\n",
- "type": "Number"
- },
- {
- "name": "n1",
- "description": "<p>second number to compare.</p>\n",
- "type": "Number"
+ "name": "direction",
+ "description": "The text direction to set (\"ltr\", \"rtl\", or \"inherit\").",
+ "type": "String"
}
],
"return": {
- "description": "maximum number.",
- "type": "Number"
+ "description": "If no arguments are provided, the current text direction, either \"ltr\", \"rtl\", or \"inherit\"",
+ "type": "String"
}
},
{
- "line": 680,
- "params": [
- {
- "name": "nums",
- "description": "<p>numbers to compare.</p>\n",
- "type": "Number[]"
- }
- ],
+ "params": [],
"return": {
- "description": "",
- "type": "Number"
+ "description": "The current text direction, either \"ltr\", \"rtl\", or \"inherit\"",
+ "type": "String"
}
}
- ]
+ ],
+ "return": {
+ "description": "If no arguments are provided, the current text direction, either \"ltr\", \"rtl\", or \"inherit\"",
+ "type": "String"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 695,
- "description": "<p>Returns the smallest value in a sequence of numbers.</p>\n<p>The version of <code>min()</code> with one parameter interprets it as an array of\nnumbers and returns the smallest number.</p>\n<p>The version of <code>min()</code> with two or more parameters interprets them as\nindividual numbers and returns the smallest number.</p>\n",
+ "name": "textProperty",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "min",
- "return": {
- "description": "minimum number.",
- "type": "Number"
- },
+ "description": "<p>Sets or gets a single text property for the renderer.</p>\n<p>The <code>textProperty()</code> function allows you to set or retrieve a single text-related property,\nsuch as <code>textAlign</code>, <code>textBaseline</code>, <code>fontStyle</code>, or any other property\nthat may be part of the renderer's state, its drawing context, or the canvas style.</p>\n<p>When called with a <code>prop</code> and a <code>value</code>, the function sets the property by checking\nfor its existence in the renderer's state, the drawing context, or the canvas style. If the property is\nsuccessfully modified, the function applies the updated text properties. If called with only the\n<code>prop</code> parameter, the function returns the current value of that property.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the minimum of 10, 5, and 20.\n let m = min(10, 5, 20);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the min.\n text(m, 50, 50);\n\n describe('The number 5 written in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [10, 5, 20];\n\n // Calculate the minimum of the array.\n let m = min(numbers);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the min.\n text(m, 50, 50);\n\n describe('The number 5 written in the middle of a gray square.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(300, 300);\n background(240);\n\n // Set the text alignment to CENTER and the baseline to TOP using textProperty.\n textProperty(\"textAlign\", CENTER);\n textProperty(\"textBaseline\", TOP);\n\n // Set additional text properties and draw the text.\n textSize(32);\n textFont(\"Georgia\");\n fill(0);\n text(\"Hello, World!\", width / 2, 50);\n\n // Retrieve and display the current text properties.\n let currentAlign = textProperty(\"textAlign\");\n let currentBaseline = textProperty(\"textBaseline\");\n\n textSize(16);\n textAlign(LEFT, TOP);\n fill(50);\n text(\"Current textAlign: \" + currentAlign, 50, 150);\n text(\"Current textBaseline: \" + currentBaseline, 50, 170);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Math",
- "submodule": "Calculation",
"overloads": [
{
- "line": 695,
"params": [
{
- "name": "n0",
- "description": "<p>first number to compare.</p>\n",
- "type": "Number"
+ "name": "prop",
+ "description": "The name of the text property to set or get.",
+ "type": "String"
},
{
- "name": "n1",
- "description": "<p>second number to compare.</p>\n",
- "type": "Number"
+ "name": "value",
+ "description": "The value to set for the specified text property. If omitted, the current\nvalue of the property is returned"
}
],
"return": {
- "description": "minimum number.",
- "type": "Number"
+ "description": "If no arguments are provided, the current value of the specified text property"
}
},
{
- "line": 757,
"params": [
{
- "name": "nums",
- "description": "<p>numbers to compare.</p>\n",
- "type": "Number[]"
+ "name": "prop",
+ "description": "The name of the text property to set or get.",
+ "type": "String"
}
],
"return": {
- "description": "",
- "type": "Number"
+ "description": "The current value of the specified text property"
}
}
- ]
+ ],
+ "return": {
+ "description": "If no arguments are provided, the current value of the specified text property"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 772,
- "description": "<p>Maps a number from one range to a value between 0 and 1.</p>\n<p>For example, <code>norm(2, 0, 10)</code> returns 0.2. 2's position in the original\nrange [0, 10] is proportional to 0.2's position in the range [0, 1]. This\nis the same as calling <code>map(2, 0, 10, 0, 1)</code>.</p>\n<p>Numbers outside of the original range are not constrained between 0 and 1.\nOut-of-range values are often intentional and useful.</p>\n",
+ "name": "textProperties",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "norm",
- "params": [
- {
- "name": "value",
- "description": "<p>incoming value to be normalized.</p>\n",
- "type": "Number"
- },
+ "description": "<p>Gets or sets text properties in batch, similar to calling <code>textProperty()</code>\nmultiple times.</p>\n<p>If an object is passed in, <code>textProperty(key, value)</code> will be called for you\non every key/value pair in the object.</p>\n<p>If no arguments are passed in, an object will be returned with all the current\nproperties.</p>\n",
+ "example": [],
+ "overloads": [
{
- "name": "start",
- "description": "<p>lower bound of the value's current range.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "properties",
+ "description": "An object whose keys are properties to set, and whose\nvalues are what they should be set to.",
+ "type": "Object"
+ }
+ ]
},
{
- "name": "stop",
- "description": "<p>upper bound of the value's current range.</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "An object with all the possible properties and their current values.",
+ "type": "Object"
+ }
}
],
"return": {
- "description": "normalized number.",
- "type": "Number"
+ "description": "An object with all the possible properties and their current values.",
+ "type": "Object"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n describe('A square changes color from black to red as the mouse moves from left to right.');\n}\n\nfunction draw() {\n // Calculate the redValue.\n let redValue = norm(mouseX, 0, 100);\n\n // Paint the background.\n background(redValue, 0, 0);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 815,
- "description": "<p>Calculates exponential expressions such as <var>2<sup>3</sup></var>.</p>\n<p>For example, <code>pow(2, 3)</code> evaluates the expression\n2 × 2 × 2. <code>pow(2, -3)</code> evaluates 1 ÷\n(2 × 2 × 2).</p>\n",
+ "name": "fontBounds",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "pow",
- "params": [
- {
- "name": "n",
- "description": "<p>base of the exponential expression.</p>\n",
- "type": "Number"
- },
+ "description": "<p>Computes a generic (non-tight) bounding box for a block of text.</p>\n<p>The <code>fontBounds()</code> function calculates the bounding box for the text based on the\nfont's intrinsic metrics (such as <code>fontBoundingBoxAscent</code> and\n<code>fontBoundingBoxDescent</code>). Unlike <code>textBounds()</code>, which measures the exact\npixel boundaries of the rendered text, <code>fontBounds()</code> provides a looser measurement\nderived from the font’s default spacing. This measurement is useful for layout purposes where\na consistent approximation of the text's dimensions is desired.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(300, 200);\n background(240);\n\n textSize(32);\n textAlign(LEFT, TOP);\n textFont('Georgia');\n\n let txt = \"Hello, World!\";\n // Compute the bounding box based on the font's intrinsic metrics\n let bounds = fontBounds(txt, 50, 50);\n\n fill(0);\n text(txt, 50, 50);\n\n noFill();\n stroke('green');\n rect(bounds.x, bounds.y, bounds.w, bounds.h);\n\n noStroke();\n fill(50);\n textSize(15);\n text(\"Font Bounds: x=\" + bounds.x.toFixed(1) + \", y=\" + bounds.y.toFixed(1) +\n \", w=\" + bounds.w.toFixed(1) + \", h=\" + bounds.h.toFixed(1), 8, 100);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "e",
- "description": "<p>power by which to raise the base.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "str",
+ "description": "The text string to measure.",
+ "type": "String"
+ },
+ {
+ "name": "x",
+ "description": "The x-coordinate where the text is drawn.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "The y-coordinate where the text is drawn.",
+ "type": "Number"
+ },
+ {
+ "name": "width",
+ "description": "(Optional) The maximum width available for the text block.\nWhen specified, the text may be wrapped to fit within this width.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "(Optional) The maximum height available for the text block.\nAny lines exceeding this height will be truncated.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "An object with properties <code>x</code>, <code>y</code>, <code>w</code>, and <code>h</code> representing the loose\nbounding box of the text based on the font's intrinsic metrics.",
+ "type": "Object"
+ }
}
],
"return": {
- "description": "n^e.",
- "type": "Number"
+ "description": "An object with properties <code>x</code>, <code>y</code>, <code>w</code>, and <code>h</code> representing the loose\nbounding box of the text based on the font's intrinsic metrics.",
+ "type": "Object"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the base of the exponent.\n let base = 3;\n\n // Top-left.\n let d = pow(base, 1);\n circle(10, 10, d);\n\n // Left-center.\n d = pow(base, 2);\n circle(20, 20, d);\n\n // Right-center.\n d = pow(base, 3);\n circle(40, 40, d);\n\n // Bottom-right.\n d = pow(base, 4);\n circle(80, 80, d);\n\n describe('A series of circles that grow exponentially from top left to bottom right.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 861,
- "description": "<p>Calculates the integer closest to a number.</p>\n<p>For example, <code>round(133.8)</code> returns the value 134.</p>\n<p>The second parameter, <code>decimals</code>, is optional. It sets the number of\ndecimal places to use when rounding. For example, <code>round(12.34, 1)</code> returns\n12.3. <code>decimals</code> is 0 by default.</p>\n",
+ "name": "fontWidth",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "round",
- "params": [
- {
- "name": "n",
- "description": "<p>number to round.</p>\n",
- "type": "Number"
- },
+ "description": "<p>Returns the loose width of a text string based on the current font.</p>\n<p>The <code>fontWidth()</code> function measures the width of the provided text string using\nthe font's default measurement (i.e., the width property from the text metrics returned by\nthe browser). Unlike <code>textWidth()</code>, which calculates the tight pixel boundaries\nof the text glyphs, <code>fontWidth()</code> uses the font's intrinsic spacing, which may include\nadditional space for character spacing and kerning. This makes it useful for scenarios where\nan approximate width is sufficient for layout and positioning.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(300, 200);\n background(240);\n\n textSize(32);\n textAlign(LEFT, TOP);\n textFont('Georgia');\n\n let s = \"Hello, World!\";\n let fw = fontWidth(s);\n\n fill(0);\n text(s, 50, 50);\n\n stroke('blue');\n line(50, 90, 50 + fw, 90);\n\n noStroke();\n fill(50);\n textSize(16);\n text(\"Font width: \" + fw.toFixed(2) + \" pixels\", 50, 100);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "decimals",
- "description": "<p>number of decimal places to round to, default is 0.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "theText",
+ "description": "The text string to measure.",
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "The loose width of the text in pixels.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "rounded number.",
- "type": "Integer"
+ "description": "The loose width of the text in pixels.",
+ "type": "Number"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Round a number.\n let x = round(4.2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the rounded number.\n text(x, 50, 50);\n\n describe('The number 4 written in middle of the canvas.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Round a number to 2 decimal places.\n let x = round(12.782383, 2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the rounded number.\n text(x, 50, 50);\n\n describe('The number 12.78 written in middle of canvas.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 928,
- "description": "<p>Calculates the square of a number.</p>\n<p>Squaring a number means multiplying the number by itself. For example,\n<code>sq(3)</code> evaluates 3 × 3 which is 9. <code>sq(-3)</code> evaluates -3 × -3\nwhich is also 9. Multiplying two negative numbers produces a positive\nnumber. The value returned by <code>sq()</code> is always positive.</p>\n",
+ "name": "fontAscent",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "sq",
- "params": [
+ "description": "<p>Returns the loose ascent of the text based on the font's intrinsic metrics.</p>\n<p>The <code>fontAscent()</code> function calculates the ascent of the text using the font's\nintrinsic metrics (e.g., <code>fontBoundingBoxAscent</code>). This value represents the space\nabove the baseline that the font inherently occupies, and is useful for layout purposes when\nan approximate vertical measurement is required.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(300, 300);\n background(220);\n\n textSize(48);\n textAlign(LEFT, BASELINE);\n textFont('Georgia');\n\n let s = \"Hello, p5.js!\";\n let x = 50, y = 150;\n\n fill(0);\n text(s, x, y);\n\n // Get the font descent of the current font\n let fasc = fontAscent();\n\n // Draw a red line at the baseline and a blue line at the ascent position\n stroke('red');\n line(x, y, x + 200, y); // Baseline\n stroke('blue');\n line(x, y - fasc, x + 200, y - fasc); // Font ascent position\n\n noStroke();\n fill(0);\n textSize(16);\n text(\"fontAscent: \" + fasc.toFixed(2) + \" pixels\", x, y + fdesc + 20);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "n",
- "description": "<p>number to square.</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "The loose ascent value in pixels.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "squared number.",
+ "description": "The loose ascent value in pixels.",
"type": "Number"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = sq(3);\n circle(33, 33, d);\n\n // Bottom-right.\n d = sq(6);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is four times larger.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher quickly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 0.01 * sq(x);\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 988,
- "description": "<p>Calculates the square root of a number.</p>\n<p>A number's square root can be multiplied by itself to produce the original\nnumber. For example, <code>sqrt(9)</code> returns 3 because 3 × 3 = 9. <code>sqrt()</code>\nalways returns a positive value. <code>sqrt()</code> doesn't work with negative arguments\nsuch as <code>sqrt(-9)</code>.</p>\n",
+ "name": "fontDescent",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "sqrt",
- "params": [
+ "description": "<p>Returns the loose descent of the text based on the font's intrinsic metrics.</p>\n<p>The <code>fontDescent()</code> function calculates the descent of the text using the font's\nintrinsic metrics (e.g., <code>fontBoundingBoxDescent</code>). This value represents the space\nbelow the baseline that the font inherently occupies, and is useful for layout purposes when\nan approximate vertical measurement is required.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(300, 300);\n background(220);\n\n textSize(48);\n textAlign(LEFT, BASELINE);\n textFont('Georgia');\n\n let s = \"Hello, p5.js!\";\n let x = 50, y = 150;\n\n fill(0);\n text(s, x, y);\n\n // Get the font descent of the current font\n let fdesc = fontDescent();\n\n // Draw a red line at the baseline and a blue line at the descent position\n stroke('red');\n line(x, y, x + 200, y); // Baseline\n stroke('blue');\n line(x, y + fdesc, x + 200, y + fdesc); // Font descent position\n\n noStroke();\n fill(0);\n textSize(16);\n text(\"fontDescent: \" + fdesc.toFixed(2) + \" pixels\", x, y + fdesc + 20);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "n",
- "description": "<p>non-negative number to square root.</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "The loose descent value in pixels.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "square root of number.",
+ "description": "The loose descent value in pixels.",
"type": "Number"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = sqrt(16);\n circle(33, 33, d);\n\n // Bottom-right.\n d = sqrt(1600);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher slowly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 5 * sqrt(x);\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/calculation.js",
- "line": 1048,
- "description": "<p>Calculates the fractional part of a number.</p>\n<p>A number's fractional part includes its decimal values. For example,\n<code>fract(12.34)</code> returns 0.34.</p>\n",
+ "name": "textWeight",
+ "file": "src/scripts/parsers/in/p5.js/src/type/textCore.js",
+ "line": 1401,
"itemtype": "method",
- "name": "fract",
- "params": [
+ "description": "<p>Sets or gets the current font weight.</p>\n<p>The <code>textWeight()</code> function is used to specify the weight (thickness) of the text.\nWhen a numeric value is provided, it sets the font weight to that value and updates the\nrendering properties accordingly (including the \"font-variation-settings\" on the canvas style).\nWhen called without an argument, it returns the current font weight setting.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(300, 200);\n background(240);\n\n // Set text alignment, size, and font\n textAlign(LEFT, TOP);\n textSize(20);\n textFont(\"Georgia\");\n\n // Draw text with a normal weight (lighter appearance)\n push();\n textWeight(400); // Set font weight to 400\n fill(0);\n text(\"Normal\", 50, 50);\n let normalWeight = textWeight(); // Should return 400\n pop();\n\n // Draw text with a bold weight (heavier appearance)\n push();\n textWeight(900); // Set font weight to 900\n fill(0);\n text(\"Bold\", 50, 100);\n let boldWeight = textWeight(); // Should return 900\n pop();\n\n // Display the current font weight values on the canvas\n textSize(16);\n fill(50);\n text(\"Normal Weight: \" + normalWeight, 150, 52);\n text(\"Bold Weight: \" + boldWeight, 150, 100);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet font;\n\nasync function setup() {\n createCanvas(100, 100);\n font = await loadFont(\n 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'\n );\n}\n\nfunction draw() {\n background(255);\n textFont(font);\n textAlign(LEFT, TOP);\n textSize(35);\n textWeight(sin(millis() * 0.002) * 200 + 400);\n text('p5*js', 0, 10);\n describe('The text p5*js pulsing its weight over time');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "n",
- "description": "<p>number whose fractional part will be found.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "weight",
+ "description": "The numeric weight value to set for the text.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "If no arguments are provided, the current font weight",
+ "type": "Number"
+ }
+ },
+ {
+ "params": [],
+ "return": {
+ "description": "The current font weight",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "fractional part of n.",
+ "description": "If no arguments are provided, the current font weight",
"type": "Number"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Original number.\n let n = 56.78;\n text(n, 50, 33);\n\n // Fractional part.\n let f = fract(n);\n text(f, 50, 67);\n\n describe('The number 56.78 written above the number 0.78.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Calculation"
+ "static": false,
+ "module": "Typography"
},
{
- "file": "src/math/math.js",
- "line": 10,
- "description": "<p>Creates a new <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n<p>A vector can be thought of in different ways. In one view, a vector is like\nan arrow pointing in space. Vectors have both magnitude (length) and\ndirection. This view is helpful for programming motion.</p>\n<p>A vector's components determine its magnitude and direction. For example,\ncalling <code>createVector(3, 4)</code> creates a new\n<a href=\"#/p5.Vector\">p5.Vector</a> object with an x-component of 3 and a\ny-component of 4. From the origin, this vector's tip is 3 units to the\nright and 4 units down.</p>\n<p><a href=\"#/p5.Vector\">p5.Vector</a> objects are often used to program\nmotion because they simplify the math. For example, a moving ball has a\nposition and a velocity. Position describes where the ball is in space. The\nball's position vector extends from the origin to the ball's center.\nVelocity describes the ball's speed and the direction it's moving. If the\nball is moving straight up, its velocity vector points straight up. Adding\nthe ball's velocity vector to its position vector moves it, as in\n<code>pos.add(vel)</code>. Vector math relies on methods inside the\n<a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\n",
+ "name": "float",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/conversion.js",
+ "line": 84,
"itemtype": "method",
- "name": "createVector",
- "params": [
- {
- "name": "x",
- "description": "<p>x component of the vector.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Converts a <code>String</code> to a floating point (decimal) <code>Number</code>.</p>\n<p><code>float()</code> converts strings that resemble numbers, such as <code>'12.34'</code>, into\nnumbers.</p>\n<p>The parameter, <code>str</code>, is the string value to convert. For example, calling\n<code>float('12.34')</code> returns the number <code>12.34</code>. If an array of strings is\npassed, as in <code>float(['12.34', '56.78'])</code>, then an array of numbers will be\nreturned.</p>\n<p>Note: If a string can't be converted to a number, as in <code>float('giraffe')</code>,\nthen the value <code>NaN</code> (not a number) will be returned.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = '12.3';\n\n // Convert the string to a number.\n let converted = float(original);\n\n // Double the converted value.\n let twice = converted * 2;\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(12);\n\n // Display the original and converted values.\n text(`${original} × 2 = ${twice}`, 50, 50);\n\n describe('The text \"12.3 × 2 = 24.6\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of strings.\n let original = ['60', '30', '15'];\n\n // Convert the strings to numbers.\n let diameters = float(original);\n\n for (let d of diameters) {\n // Draw a circle.\n circle(50, 50, d);\n }\n\n describe('Three white, concentric circles on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "y",
- "description": "<p>y component of the vector.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "str",
+ "description": "string to convert.",
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "converted number.",
+ "type": "Number"
+ }
},
{
- "name": "z",
- "description": "<p>z component of the vector.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "ns",
+ "description": "array of strings to convert.",
+ "type": "String[]"
+ }
+ ],
+ "return": {
+ "description": "converted numbers.",
+ "type": "Number[]"
+ }
}
],
"return": {
- "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
- "type": "p5.Vector"
+ "description": "converted number.",
+ "type": "Number"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(25, 25);\n let p2 = createVector(50, 50);\n let p3 = createVector(75, 75);\n\n // Draw the dots.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots form a diagonal line from top left to bottom right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pos;\nlet vel;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n pos = createVector(50, 100);\n vel = createVector(0, -1);\n\n describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');\n}\n\nfunction draw() {\n background(200);\n\n // Add velocity to position.\n pos.add(vel);\n\n // If the dot reaches the top of the canvas,\n // restart from the bottom.\n if (pos.y < 0) {\n pos.y = 100;\n }\n\n // Draw the dot.\n strokeWeight(5);\n point(pos);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Vector"
+ "static": false,
+ "module": "Data",
+ "submodule": "Conversion"
},
{
- "file": "src/math/noise.js",
- "line": 36,
- "description": "<p>Returns random numbers that can be tuned to feel organic.</p>\n<p>Values returned by <a href=\"#/p5/random\">random()</a> and\n<a href=\"#/p5/randomGaussian\">randomGaussian()</a> can change by large\namounts between function calls. By contrast, values returned by <code>noise()</code>\ncan be made \"smooth\". Calls to <code>noise()</code> with similar inputs will produce\nsimilar outputs. <code>noise()</code> is used to create textures, motion, shapes,\nterrains, and so on. Ken Perlin invented <code>noise()</code> while animating the\noriginal <em>Tron</em> film in the 1980s.</p>\n<p><code>noise()</code> always returns values between 0 and 1. It returns the same value\nfor a given input while a sketch is running. <code>noise()</code> produces different\nresults each time a sketch runs. The\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a> function can be used to generate\nthe same sequence of Perlin noise values each time a sketch runs.</p>\n<p>The character of the noise can be adjusted in two ways. The first way is to\nscale the inputs. <code>noise()</code> interprets inputs as coordinates. The sequence\nof noise values will be smoother when the input coordinates are closer. The\nsecond way is to use the <a href=\"#/p5/noiseDetail\">noiseDetail()</a>\nfunction.</p>\n<p>The version of <code>noise()</code> with one parameter computes noise values in one\ndimension. This dimension can be thought of as space, as in <code>noise(x)</code>, or\ntime, as in <code>noise(t)</code>.</p>\n<p>The version of <code>noise()</code> with two parameters computes noise values in two\ndimensions. These dimensions can be thought of as space, as in\n<code>noise(x, y)</code>, or space and time, as in <code>noise(x, t)</code>.</p>\n<p>The version of <code>noise()</code> with three parameters computes noise values in\nthree dimensions. These dimensions can be thought of as space, as in\n<code>noise(x, y, z)</code>, or space and time, as in <code>noise(x, y, t)</code>.</p>\n",
+ "name": "int",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/conversion.js",
+ "line": 215,
"itemtype": "method",
- "name": "noise",
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate in noise space.</p>\n",
- "type": "Number"
- },
+ "description": "<p>Converts a <code>Boolean</code>, <code>String</code>, or decimal <code>Number</code> to an integer.</p>\n<p><code>int()</code> converts values to integers. Integers are positive or negative\nnumbers without decimals. If the original value has decimals, as in -34.56,\nthey're removed to produce an integer such as -34.</p>\n<p>The parameter, <code>n</code>, is the value to convert. If <code>n</code> is a Boolean, as in\n<code>int(false)</code> or <code>int(true)</code>, then the number 0 (<code>false</code>) or 1 (<code>true</code>) will\nbe returned. If <code>n</code> is a string or number, as in <code>int('45')</code> or\n<code>int(67.89)</code>, then an integer will be returned. If an array is passed, as\nin <code>int([12.34, 56.78])</code>, then an array of integers will be returned.</p>\n<p>Note: If a value can't be converted to a number, as in <code>int('giraffe')</code>,\nthen the value <code>NaN</code> (not a number) will be returned.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a Boolean variable.\n let original = false;\n\n // Convert the Boolean to an integer.\n let converted = int(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"false : 0\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = '12.34';\n\n // Convert the string to an integer.\n let converted = int(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Display the original and converted values.\n text(`${original} ≈ ${converted}`, 50, 50);\n\n describe('The text \"12.34 ≈ 12\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a decimal number variable.\n let original = 12.34;\n\n // Convert the decimal number to an integer.\n let converted = int(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Display the original and converted values.\n text(`${original} ≈ ${converted}`, 50, 50);\n\n describe('The text \"12.34 ≈ 12\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of strings.\n let original = ['60', '30', '15'];\n\n // Convert the strings to integers.\n let diameters = int(original);\n\n for (let d of diameters) {\n // Draw a circle.\n circle(50, 50, d);\n }\n\n describe('Three white, concentric circles on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "y",
- "description": "<p>y-coordinate in noise space.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "n",
+ "description": "value to convert.",
+ "type": "String|Boolean|Number"
+ }
+ ],
+ "return": {
+ "description": "converted number.",
+ "type": "Number"
+ }
},
{
- "name": "z",
- "description": "<p>z-coordinate in noise space.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "ns",
+ "description": "values to convert.",
+ "type": "Array"
+ }
+ ],
+ "return": {
+ "description": "converted numbers.",
+ "type": "Number[]"
+ }
}
],
"return": {
- "description": "Perlin noise value at specified coordinates.",
+ "description": "converted number.",
"type": "Number"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot moves randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 100 * noise(0.005 * frameCount);\n let y = 100 * noise(0.005 * frameCount + 10000);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot moves randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.005;\n\n // Scale the input coordinate.\n let nt = noiseScale * frameCount;\n\n // Compute the noise values.\n let x = noiseLevel * noise(nt);\n let y = noiseLevel * noise(nt + 10000);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A hilly terrain drawn in gray against a black sky.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.02;\n\n // Scale the input coordinate.\n let x = frameCount;\n let nx = noiseScale * x;\n\n // Compute the noise value.\n let y = noiseLevel * noise(nx);\n\n // Draw the line.\n line(x, 0, x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A calm sea drawn in gray against a black sky.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.002;\n\n // Iterate from left to right.\n for (let x = 0; x < width; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let y = noiseLevel * noise(nx, nt);\n\n // Draw the line.\n line(x, 0, x, y);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.01;\n\n // Iterate from top to bottom.\n for (let y = 0; y < height; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < width; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n\n // Compute the noise value.\n let c = noiseLevel * noise(nx, ny);\n\n // Draw the point.\n stroke(c);\n point(x, y);\n }\n }\n\n describe('A gray cloudy pattern.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray cloudy pattern that changes.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.009;\n\n // Iterate from top to bottom.\n for (let y = 0; y < height; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < width; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let c = noiseLevel * noise(nx, ny, nt);\n\n // Draw the point.\n stroke(c);\n point(x, y);\n }\n }\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Noise"
+ "static": false,
+ "module": "Data",
+ "submodule": "Conversion"
},
{
- "file": "src/math/noise.js",
- "line": 331,
- "description": "<p>Adjusts the character of the noise produced by the\n<a href=\"#/p5/noise\">noise()</a> function.</p>\n<p>Perlin noise values are created by adding layers of noise together. The\nnoise layers, called octaves, are similar to harmonics in music. Lower\noctaves contribute more to the output signal. They define the overall\nintensity of the noise. Higher octaves create finer-grained details.</p>\n<p>By default, noise values are created by combining four octaves. Each higher\noctave contributes half as much (50% less) compared to its predecessor.\n<code>noiseDetail()</code> changes the number of octaves and the falloff amount. For\nexample, calling <code>noiseDetail(6, 0.25)</code> ensures that\n<a href=\"#/p5/noise\">noise()</a> will use six octaves. Each higher octave\nwill contribute 25% as much (75% less) compared to its predecessor. Falloff\nvalues between 0 and 1 are valid. However, falloff values greater than 0.5\nmight result in noise values greater than 1.</p>\n",
+ "name": "str",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/conversion.js",
+ "line": 332,
"itemtype": "method",
- "name": "noiseDetail",
- "params": [
- {
- "name": "lod",
- "description": "<p>number of octaves to be used by the noise.</p>\n",
- "type": "Number"
- },
- {
- "name": "falloff",
- "description": "<p>falloff factor for each octave.</p>\n",
- "type": "Number"
- }
- ],
+ "description": "<p>Converts a <code>Boolean</code> or <code>Number</code> to <code>String</code>.</p>\n<p><code>str()</code> converts values to strings. See the\n<a href=\"#/p5/String\">String</a> reference page for guidance on using\ntemplate literals instead.</p>\n<p>The parameter, <code>n</code>, is the value to convert. If <code>n</code> is a Boolean, as in\n<code>str(false)</code> or <code>str(true)</code>, then the value will be returned as a string,\nas in <code>'false'</code> or <code>'true'</code>. If <code>n</code> is a number, as in <code>str(123)</code>, then its\nvalue will be returned as a string, as in <code>'123'</code>. If an array is passed,\nas in <code>str([12.34, 56.78])</code>, then an array of strings will be returned.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.02;\n\n // Iterate from top to bottom.\n for (let y = 0; y < height; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < width / 2; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n\n // Compute the noise value with six octaves\n // and a low falloff factor.\n noiseDetail(6, 0.25);\n let c = noiseLevel * noise(nx, ny);\n\n // Draw the left side.\n stroke(c);\n point(x, y);\n\n // Compute the noise value with four octaves\n // and a high falloff factor.\n noiseDetail(4, 0.5);\n c = noiseLevel * noise(nx, ny);\n\n // Draw the right side.\n stroke(c);\n point(x + 50, y);\n }\n }\n\n describe('Two gray cloudy patterns. The pattern on the right is cloudier than the pattern on the left.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a Boolean variable.\n let original = false;\n\n // Convert the Boolean to a string.\n let converted = str(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"false : false\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 123;\n\n // Convert the number to a string.\n let converted = str(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} = ${converted}`, 50, 50);\n\n describe('The text \"123 = 123\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let original = [12, 34, 56];\n\n // Convert the numbers to strings.\n let strings = str(original);\n\n // Create an empty string variable.\n let final = '';\n\n // Concatenate all the strings.\n for (let s of strings) {\n final += s;\n }\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the concatenated string.\n text(final, 50, 50);\n\n describe('The text \"123456\" written in black on a gray background.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Math",
- "submodule": "Noise"
- },
- {
- "file": "src/math/noise.js",
- "line": 405,
- "description": "<p>Sets the seed value for the <a href=\"#/p5/noise\">noise()</a> function.</p>\n<p>By default, <a href=\"#/p5/noise\">noise()</a> produces different results\neach time a sketch is run. Calling <code>noiseSeed()</code> with a constant argument,\nsuch as <code>noiseSeed(99)</code>, makes <a href=\"#/p5/noise\">noise()</a> produce the\nsame results each time a sketch is run.</p>\n",
- "itemtype": "method",
- "name": "noiseSeed",
- "params": [
+ "overloads": [
{
- "name": "seed",
- "description": "<p>seed value.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "n",
+ "description": "value to convert.",
+ "type": "String|Boolean|Number"
+ }
+ ],
+ "return": {
+ "description": "converted string.",
+ "type": "String"
+ }
}
],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the noise seed for consistent results.\n noiseSeed(99);\n\n describe('A black rectangle that grows randomly, first to the right and then to the left.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.005;\n\n // Scale the input coordinate.\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let x = noiseLevel * noise(nt);\n\n // Draw the line.\n line(x, 0, x, height);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Math",
- "submodule": "Noise"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 113,
- "description": "<p>The x component of the vector</p>\n",
- "type": "{Number}",
- "itemtype": "property",
- "name": "x",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 120,
- "description": "<p>The y component of the vector</p>\n",
- "type": "{Number}",
- "itemtype": "property",
- "name": "y",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 127,
- "description": "<p>The z component of the vector</p>\n",
- "type": "{Number}",
- "itemtype": "property",
- "name": "z",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 136,
- "description": "<p>Returns a string representation of a vector.</p>\n<p>Calling <code>toString()</code> is useful for printing vectors to the console while\ndebugging.</p>\n",
- "itemtype": "method",
- "name": "toString",
"return": {
- "description": "string representation of the vector.",
+ "description": "converted string.",
"type": "String"
},
- "example": [
- "\n<div class = \"norender\">\n<code>\nfunction setup() {\n let v = createVector(20, 30);\n\n // Prints 'p5.Vector Object : [20, 30, 0]'.\n print(v.toString());\n}\n</code>\n</div>"
- ],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Conversion"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 161,
- "description": "<p>Sets the vector's <code>x</code>, <code>y</code>, and <code>z</code> components.</p>\n<p><code>set()</code> can use separate numbers, as in <code>v.set(1, 2, 3)</code>, a\n<a href=\"#/p5.Vector\">p5.Vector</a> object, as in <code>v.set(v2)</code>, or an\narray of numbers, as in <code>v.set([1, 2, 3])</code>.</p>\n<p>If a value isn't provided for a component, it will be set to 0. For\nexample, <code>v.set(4, 5)</code> sets <code>v.x</code> to 4, <code>v.y</code> to 5, and <code>v.z</code> to 0.\nCalling <code>set()</code> with no arguments, as in <code>v.set()</code>, sets all the vector's\ncomponents to 0.</p>\n",
+ "name": "boolean",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/conversion.js",
+ "line": 455,
"itemtype": "method",
- "name": "set",
- "chainable": 1,
+ "description": "<p>Converts a <code>String</code> or <code>Number</code> to a <code>Boolean</code>.</p>\n<p><code>boolean()</code> converts values to <code>true</code> or <code>false</code>.</p>\n<p>The parameter, <code>n</code>, is the value to convert. If <code>n</code> is a string, then\n<code>boolean('true')</code> will return <code>true</code> and every other string value will\nreturn <code>false</code>. If <code>n</code> is a number, then <code>boolean(0)</code> will return <code>false</code>\nand every other numeric value will return <code>true</code>. If an array is passed, as\n<code>in boolean([0, 1, 'true', 'blue'])</code>, then an array of Boolean values will\nbe returned.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top left.\n let pos = createVector(25, 25);\n point(pos);\n\n // Top right.\n // set() with numbers.\n pos.set(75, 25);\n point(pos);\n\n // Bottom right.\n // set() with a p5.Vector.\n let p2 = createVector(75, 75);\n pos.set(p2);\n point(pos);\n\n // Bottom left.\n // set() with an array.\n let arr = [25, 75];\n pos.set(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 0;\n\n // Convert the number to a Boolean value.\n let converted = boolean(original);\n\n // Style the circle based on the converted value.\n if (converted === true) {\n fill('blue');\n } else {\n fill('red');\n }\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe('A red circle on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = 'true';\n\n // Convert the string to a Boolean value.\n let converted = boolean(original);\n\n // Style the circle based on the converted value.\n if (converted === true) {\n fill('blue');\n } else {\n fill('red');\n }\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe('A blue circle on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of values.\n let original = [0, 'hi', 123, 'true'];\n\n // Convert the array to a Boolean values.\n let converted = boolean(original);\n\n // Iterate over the array of converted Boolean values.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Style the circle based on the converted value.\n if (converted[i] === true) {\n fill('blue');\n } else {\n fill('red');\n }\n\n // Calculate the x-coordinate.\n let x = (i + 1) * 20;\n\n // Draw the circle.\n circle(x, 50, 15);\n }\n\n describe(\n 'A row of circles on a gray background. The two circles on the left are red and the two on the right are blue.'\n );\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 161,
"params": [
{
- "name": "x",
- "description": "<p>x component of the vector.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "y",
- "description": "<p>y component of the vector.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "z",
- "description": "<p>z component of the vector.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "n",
+ "description": "value to convert.",
+ "type": "String|Boolean|Number"
}
],
- "chainable": 1
+ "return": {
+ "description": "converted Boolean value.",
+ "type": "Boolean"
+ }
},
{
- "line": 215,
"params": [
{
- "name": "value",
- "description": "<p>vector to set.</p>\n",
- "type": "p5.Vector|Number[]"
+ "name": "ns",
+ "description": "values to convert.",
+ "type": "Array"
}
],
- "chainable": 1
+ "return": {
+ "description": "converted Boolean values.",
+ "type": "Boolean[]"
+ }
}
- ]
+ ],
+ "return": {
+ "description": "converted Boolean value.",
+ "type": "Boolean"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Conversion"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 239,
- "description": "<p>Returns a copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n",
+ "name": "byte",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/conversion.js",
+ "line": 602,
"itemtype": "method",
- "name": "copy",
- "return": {
- "description": "copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object.",
- "type": "p5.Vector"
- },
+ "description": "<p>Converts a <code>Boolean</code>, <code>String</code>, or <code>Number</code> to its byte value.</p>\n<p><code>byte()</code> converts a value to an integer (whole number) between -128 and\n127. Values greater than 127 wrap around while negative values are\nunchanged. For example, 128 becomes -128 and -129 remains the same.</p>\n<p>The parameter, <code>n</code>, is the value to convert. If <code>n</code> is a Boolean, as in\n<code>byte(false)</code> or <code>byte(true)</code>, the number 0 (<code>false</code>) or 1 (<code>true</code>) will be\nreturned. If <code>n</code> is a string or number, as in <code>byte('256')</code> or <code>byte(256)</code>,\nthen the byte value will be returned. Decimal values are ignored. If an\narray is passed, as in <code>byte([true, 123, '456'])</code>, then an array of byte\nvalues will be returned.</p>\n<p>Note: If a value can't be converted to a number, as in <code>byte('giraffe')</code>,\nthen the value <code>NaN</code> (not a number) will be returned.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100 ,100);\n\n background(200);\n\n // Create a p5.Vector object.\n let pos = createVector(50, 50);\n\n // Make a copy.\n let pc = pos.copy();\n\n // Draw the point.\n strokeWeight(5);\n point(pc);\n\n describe('A black point drawn in the middle of a gray square.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a Boolean variable.\n let original = true;\n\n // Convert the Boolean to its byte value.\n let converted = byte(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"true : 1\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = '256';\n\n // Convert the string to its byte value.\n let converted = byte(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"256 : 0\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 256;\n\n // Convert the number to its byte value.\n let converted = byte(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"256 : 0\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of values.\n let original = [false, '64', 383];\n\n // Convert the array elements to their byte values.\n let converted = byte(original);\n\n // Iterate over the converted array elements.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Style the circle.\n fill(converted[i]);\n\n // Calculate the x-coordinate.\n let x = (i + 1) * 25;\n\n // Draw the circle.\n circle(x, 50, 20);\n }\n\n describe(\n 'Three gray circles on a gray background. The circles get lighter from left to right.'\n );\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 239,
- "params": [],
+ "params": [
+ {
+ "name": "n",
+ "description": "value to convert.",
+ "type": "String|Boolean|Number"
+ }
+ ],
"return": {
- "description": "copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object.",
- "type": "p5.Vector"
+ "description": "converted byte value.",
+ "type": "Number"
}
},
{
- "line": 3341,
"params": [
{
- "name": "v",
- "description": "<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to create a copy of</p>\n",
- "type": "p5.Vector"
+ "name": "ns",
+ "description": "values to convert.",
+ "type": "Array"
}
],
- "static": 1,
"return": {
- "description": "the copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object",
- "type": "p5.Vector"
+ "description": "converted byte values.",
+ "type": "Number[]"
}
}
- ]
+ ],
+ "return": {
+ "description": "converted byte value.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Conversion"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 282,
- "description": "<p>Adds to a vector's <code>x</code>, <code>y</code>, and <code>z</code> components.</p>\n<p><code>add()</code> can use separate numbers, as in <code>v.add(1, 2, 3)</code>,\nanother <a href=\"#/p5.Vector\">p5.Vector</a> object, as in <code>v.add(v2)</code>, or\nan array of numbers, as in <code>v.add([1, 2, 3])</code>.</p>\n<p>If a value isn't provided for a component, it won't change. For\nexample, <code>v.add(4, 5)</code> adds 4 to <code>v.x</code>, 5 to <code>v.y</code>, and 0 to <code>v.z</code>.\nCalling <code>add()</code> with no arguments, as in <code>v.add()</code>, has no effect.</p>\n<p>The static version of <code>add()</code>, as in <code>p5.Vector.add(v2, v1)</code>, returns a new\n<a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginals.</p>\n",
+ "name": "char",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/conversion.js",
+ "line": 720,
"itemtype": "method",
- "name": "add",
- "chainable": 1,
+ "description": "<p>Converts a <code>Number</code> or <code>String</code> to a single-character <code>String</code>.</p>\n<p><code>char()</code> converts numbers to their single-character string representations.</p>\n<p>The parameter, <code>n</code>, is the value to convert. If a number is passed, as in\n<code>char(65)</code>, the corresponding single-character string is returned. If a\nstring is passed, as in <code>char('65')</code>, the string is converted to an integer\n(whole number) and the corresponding single-character string is returned.\nIf an array is passed, as in <code>char([65, 66, 67])</code>, an array of\nsingle-character strings is returned.</p>\n<p>See <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode\" target=\"_blank\">MDN</a>\nfor more information about conversions.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top left.\n let pos = createVector(25, 25);\n point(pos);\n\n // Top right.\n // Add numbers.\n pos.add(50, 0);\n point(pos);\n\n // Bottom right.\n // Add a p5.Vector.\n let p2 = createVector(0, 50);\n pos.add(p2);\n point(pos);\n\n // Bottom left.\n // Add an array.\n let arr = [-50, 0];\n pos.add(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top left.\n let p1 = createVector(25, 25);\n\n // Center.\n let p2 = createVector(50, 50);\n\n // Bottom right.\n // Add p1 and p2.\n let p3 = p5.Vector.add(p1, p2);\n\n // Draw the points.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots in a diagonal line from top left to bottom right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(-30, 20);\n drawArrow(v1, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.add(v1, v2);\n drawArrow(origin, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 65;\n\n // Convert the number to a char.\n let converted = char(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"65 : A\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = '65';\n\n // Convert the string to a char.\n let converted = char(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"65 : A\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let original = ['65', 66, '67'];\n\n // Convert the string to a char.\n let converted = char(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Iterate over elements of the converted array.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the original and converted values.\n text(`${original[i]} : ${converted[i]}`, 50, y);\n }\n\n describe(\n 'The text \"65 : A\", \"66 : B\", and \"67 : C\" written on three separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 282,
- "params": [
- {
- "name": "x",
- "description": "<p>x component of the vector to be added.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y component of the vector to be added.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "z",
- "description": "<p>z component of the vector to be added.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 411,
"params": [
{
- "name": "value",
- "description": "<p>The vector to add</p>\n",
- "type": "p5.Vector|Number[]"
+ "name": "n",
+ "description": "value to convert.",
+ "type": "String|Number"
}
],
- "chainable": 1
+ "return": {
+ "description": "converted single-character string.",
+ "type": "String"
+ }
},
{
- "line": 3353,
"params": [
{
- "name": "v1",
- "description": "<p>A <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n",
- "type": "p5.Vector"
- },
- {
- "name": "v2",
- "description": "<p>A <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n",
- "type": "p5.Vector"
- },
- {
- "name": "target",
- "description": "<p>vector to receive the result.</p>\n",
- "type": "p5.Vector",
- "optional": true
+ "name": "ns",
+ "description": "values to convert.",
+ "type": "Array"
}
],
- "static": 1,
"return": {
- "description": "resulting <a href=\"#/p5.Vector\">p5.Vector</a>.",
- "type": "p5.Vector"
+ "description": "converted single-character strings.",
+ "type": "String[]"
}
}
- ]
+ ],
+ "return": {
+ "description": "converted single-character string.",
+ "type": "String"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Conversion"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 466,
- "description": "<p>Performs modulo (remainder) division with a vector's <code>x</code>, <code>y</code>, and <code>z</code>\ncomponents.</p>\n<p><code>rem()</code> can use separate numbers, as in <code>v.rem(1, 2, 3)</code>,\nanother <a href=\"#/p5.Vector\">p5.Vector</a> object, as in <code>v.rem(v2)</code>, or\nan array of numbers, as in <code>v.rem([1, 2, 3])</code>.</p>\n<p>If only one value is provided, as in <code>v.rem(2)</code>, then all the components\nwill be set to their values modulo 2. If two values are provided, as in\n<code>v.rem(2, 3)</code>, then <code>v.z</code> won't change. Calling <code>rem()</code> with no\narguments, as in <code>v.rem()</code>, has no effect.</p>\n<p>The static version of <code>rem()</code>, as in <code>p5.Vector.rem(v2, v1)</code>, returns a\nnew <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginals.</p>\n",
+ "name": "unchar",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/conversion.js",
+ "line": 809,
"itemtype": "method",
- "name": "rem",
- "chainable": 1,
+ "description": "<p>Converts a single-character <code>String</code> to a <code>Number</code>.</p>\n<p><code>unchar()</code> converts single-character strings to their corresponding\ninteger (whole number).</p>\n<p>The parameter, <code>n</code>, is the character to convert. For example,\n<code>unchar('A')</code>, returns the number 65. If an array is passed, as in\n<code>unchar(['A', 'B', 'C'])</code>, an array of integers is returned.</p>\n",
"example": [
- "\n<div class='norender'>\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2);\n\n // Prints 'p5.Vector Object : [1, 0, 1]'.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2, 3);\n\n // Prints 'p5.Vector Object : [1, 1, 5]'.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2, 3, 4);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4, 5);\n let v2 = createVector(2, 3, 4);\n\n // Divide a p5.Vector.\n v1.rem(v2);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide an array.\n let arr = [2, 3, 4];\n v.rem(arr);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4, 5);\n let v2 = createVector(2, 3, 4);\n\n // Divide without modifying the original vectors.\n let v3 = p5.Vector.rem(v1, v2);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v3.toString());\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = 'A';\n\n // Convert the string to a number.\n let converted = unchar(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"A : 65\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of characters.\n let original = ['A', 'B', 'C'];\n\n // Convert the string to a number.\n let converted = unchar(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Iterate over elements of the converted array.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the original and converted values.\n text(`${original[i]} : ${converted[i]}`, 50, y);\n }\n\n describe(\n 'The text \"A : 65\", \"B : 66\", and \"C :67\" written on three separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 466,
"params": [
{
- "name": "x",
- "description": "<p>x component of divisor vector.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y component of divisor vector.</p>\n",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "<p>z component of divisor vector.</p>\n",
- "type": "Number"
+ "name": "n",
+ "description": "value to convert.",
+ "type": "String"
}
],
- "chainable": 1
+ "return": {
+ "description": "converted number.",
+ "type": "Number"
+ }
},
{
- "line": 583,
"params": [
{
- "name": "value",
- "description": "<p>divisor vector.</p>\n",
- "type": "p5.Vector | Number[]"
+ "name": "ns",
+ "description": "values to convert.",
+ "type": "String[]"
}
],
- "chainable": 1
- },
+ "return": {
+ "description": "converted numbers.",
+ "type": "Number[]"
+ }
+ }
+ ],
+ "return": {
+ "description": "converted number.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Conversion"
+ },
+ {
+ "name": "hex",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/conversion.js",
+ "line": 931,
+ "itemtype": "method",
+ "description": "<p>Converts a <code>Number</code> to a <code>String</code> with its hexadecimal value.</p>\n<p><code>hex()</code> converts a number to a string with its hexadecimal number value.\nHexadecimal (hex) numbers are base-16, which means there are 16 unique\ndigits. Hex extends the numbers 0–9 with the letters A–F. For example, the\nnumber <code>11</code> (eleven) in base-10 is written as the letter <code>B</code> in hex.</p>\n<p>The first parameter, <code>n</code>, is the number to convert. For example, <code>hex(20)</code>,\nreturns the string <code>'00000014'</code>. If an array is passed, as in\n<code>hex([1, 10, 100])</code>, an array of hexadecimal strings is returned.</p>\n<p>The second parameter, <code>digits</code>, is optional. If a number is passed, as in\n<code>hex(20, 2)</code>, it sets the number of hexadecimal digits to display. For\nexample, calling <code>hex(20, 2)</code> returns the string <code>'14'</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 20;\n\n // Convert the number to a hex string.\n let converted = hex(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Display the original and converted values.\n text(`${original} = ${converted}`, 50, 50);\n\n describe('The text \"20 = 00000014\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 20;\n\n // Convert the number to a hex string.\n // Only display two hex digits.\n let converted = hex(original, 2);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} = ${converted}`, 50, 50);\n\n describe('The text \"20 = 14\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let original = [1, 10, 100];\n\n // Convert the numbers to hex strings.\n // Only use two hex digits.\n let converted = hex(original, 2);\n\n // Style the text.\n textAlign(RIGHT, CENTER);\n textSize(16);\n\n // Iterate over the converted values.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the original and converted values.\n text(`${ original[i]} = ${converted[i]}`, 75, y);\n }\n\n describe(\n 'The text \"1 = 01\", \"10 = 0A\", and \"100 = 64\" written on three separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 3380,
"params": [
{
- "name": "v1",
- "description": "<p>The dividend <a href=\"#/p5.Vector\">p5.Vector</a></p>\n",
- "type": "p5.Vector"
+ "name": "n",
+ "description": "value to convert.",
+ "type": "Number"
},
{
- "name": "v2",
- "description": "<p>The divisor <a href=\"#/p5.Vector\">p5.Vector</a></p>\n",
- "type": "p5.Vector"
+ "name": "digits",
+ "description": "number of digits to include.",
+ "optional": 1,
+ "type": "Number"
}
],
- "static": 1
+ "return": {
+ "description": "converted hexadecimal value.",
+ "type": "String"
+ }
},
{
- "line": 3386,
"params": [
{
- "name": "v1",
- "description": "",
- "type": "p5.Vector"
+ "name": "ns",
+ "description": "values to convert.",
+ "type": "Number[]"
},
{
- "name": "v2",
- "description": "",
- "type": "p5.Vector"
- }
+ "name": "digits",
+ "optional": 1,
+ "type": "Number"
+ }
],
- "static": 1,
"return": {
- "description": "The resulting <a href=\"#/p5.Vector\">p5.Vector</a>",
- "type": "p5.Vector"
+ "description": "converted hexadecimal values.",
+ "type": "String[]"
}
}
- ]
+ ],
+ "return": {
+ "description": "converted hexadecimal value.",
+ "type": "String"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Conversion"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 635,
- "description": "<p>Subtracts from a vector's <code>x</code>, <code>y</code>, and <code>z</code> components.</p>\n<p><code>sub()</code> can use separate numbers, as in <code>v.sub(1, 2, 3)</code>, another\n<a href=\"#/p5.Vector\">p5.Vector</a> object, as in <code>v.sub(v2)</code>, or an array\nof numbers, as in <code>v.sub([1, 2, 3])</code>.</p>\n<p>If a value isn't provided for a component, it won't change. For\nexample, <code>v.sub(4, 5)</code> subtracts 4 from <code>v.x</code>, 5 from <code>v.y</code>, and 0 from <code>v.z</code>.\nCalling <code>sub()</code> with no arguments, as in <code>v.sub()</code>, has no effect.</p>\n<p>The static version of <code>sub()</code>, as in <code>p5.Vector.sub(v2, v1)</code>, returns a new\n<a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginals.</p>\n",
+ "name": "unhex",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/conversion.js",
+ "line": 1037,
"itemtype": "method",
- "name": "sub",
- "chainable": 1,
+ "description": "<p>Converts a <code>String</code> with a hexadecimal value to a <code>Number</code>.</p>\n<p><code>unhex()</code> converts a string with its hexadecimal number value to a number.\nHexadecimal (hex) numbers are base-16, which means there are 16 unique\ndigits. Hex extends the numbers 0–9 with the letters A–F. For example, the\nnumber <code>11</code> (eleven) in base-10 is written as the letter <code>B</code> in hex.</p>\n<p>The first parameter, <code>n</code>, is the hex string to convert. For example,\n<code>unhex('FF')</code>, returns the number 255. If an array is passed, as in\n<code>unhex(['00', '80', 'FF'])</code>, an array of numbers is returned.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom right.\n let pos = createVector(75, 75);\n point(pos);\n\n // Top right.\n // Subtract numbers.\n pos.sub(0, 50);\n point(pos);\n\n // Top left.\n // Subtract a p5.Vector.\n let p2 = createVector(50, 0);\n pos.sub(p2);\n point(pos);\n\n // Bottom left.\n // Subtract an array.\n let arr = [0, -50];\n pos.sub(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(75, 75);\n let p2 = createVector(50, 50);\n\n // Subtract without modifying the original vectors.\n let p3 = p5.Vector.sub(p1, p2);\n\n // Draw the points.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots in a diagonal line from top left to bottom right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(20, 70);\n drawArrow(origin, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.sub(v2, v1);\n drawArrow(v1, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a a hex string variable\n let original = 'FF';\n\n // Convert the hex string to a number.\n let converted = unhex(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} = ${converted}`, 50, 50);\n\n describe('The text \"FF = 255\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let original = ['00', '80', 'FF'];\n\n // Convert the numbers to hex strings.\n // Only use two hex digits.\n let converted = unhex(original, 2);\n\n // Style the text.\n textAlign(RIGHT, CENTER);\n textSize(16);\n\n // Iterate over the converted values.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the original and converted values.\n text(`${ original[i]} = ${converted[i]}`, 80, y);\n }\n\n describe(\n 'The text \"00 = 0\", \"80 = 128\", and \"FF = 255\" written on three separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 635,
"params": [
{
- "name": "x",
- "description": "<p>x component of the vector to subtract.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y component of the vector to subtract.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "z",
- "description": "<p>z component of the vector to subtract.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "n",
+ "description": "value to convert.",
+ "type": "String"
}
],
- "chainable": 1
+ "return": {
+ "description": "converted number.",
+ "type": "Number"
+ }
},
{
- "line": 761,
"params": [
{
- "name": "value",
- "description": "<p>the vector to subtract</p>\n",
- "type": "p5.Vector|Number[]"
+ "name": "ns",
+ "description": "values to convert.",
+ "type": "String[]"
}
],
- "chainable": 1
- },
+ "return": {
+ "description": "converted numbers.",
+ "type": "Number[]"
+ }
+ }
+ ],
+ "return": {
+ "description": "converted number.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Conversion"
+ },
+ {
+ "name": "day",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/time_date.js",
+ "line": 39,
+ "itemtype": "method",
+ "description": "Returns the current day as a number from 1–31.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current day.\n let d = day();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the day.\n text(`Current day: ${d}`, 20, 50, 60);\n\n describe(`The text 'Current day: ${d}' written in black on a gray background.`);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 3405,
- "params": [
- {
- "name": "v1",
- "description": "<p>A <a href=\"#/p5.Vector\">p5.Vector</a> to subtract from</p>\n",
- "type": "p5.Vector"
- },
- {
- "name": "v2",
- "description": "<p>A <a href=\"#/p5.Vector\">p5.Vector</a> to subtract</p>\n",
- "type": "p5.Vector"
- },
- {
- "name": "target",
- "description": "<p>vector to receive the result.</p>\n",
- "type": "p5.Vector",
- "optional": true
- }
- ],
- "static": 1,
+ "params": [],
"return": {
- "description": "The resulting <a href=\"#/p5.Vector\">p5.Vector</a>",
- "type": "p5.Vector"
+ "description": "current day between 1 and 31.",
+ "type": "Integer"
}
}
- ]
+ ],
+ "return": {
+ "description": "current day between 1 and 31.",
+ "type": "Integer"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Time & Date"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 785,
- "description": "<p>Multiplies a vector's <code>x</code>, <code>y</code>, and <code>z</code> components.</p>\n<p><code>mult()</code> can use separate numbers, as in <code>v.mult(1, 2, 3)</code>, another\n<a href=\"#/p5.Vector\">p5.Vector</a> object, as in <code>v.mult(v2)</code>, or an array\nof numbers, as in <code>v.mult([1, 2, 3])</code>.</p>\n<p>If only one value is provided, as in <code>v.mult(2)</code>, then all the components\nwill be multiplied by 2. If a value isn't provided for a component, it\nwon't change. For example, <code>v.mult(4, 5)</code> multiplies <code>v.x</code> by 4, <code>v.y</code> by 5,\nand <code>v.z</code> by 1. Calling <code>mult()</code> with no arguments, as in <code>v.mult()</code>, has\nno effect.</p>\n<p>The static version of <code>mult()</code>, as in <code>p5.Vector.mult(v, 2)</code>, returns a new\n<a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginals.</p>\n",
+ "name": "hour",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/time_date.js",
+ "line": 73,
"itemtype": "method",
- "name": "mult",
- "chainable": 1,
+ "description": "Returns the current hour as a number from 0–23.",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Center.\n // Multiply all components by 2.\n p.mult(2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Multiply p.x * 2 and p.y * 3\n p.mult(2, 3);\n point(p);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Multiply p.x * 2 and p.y * 3\n let arr = [2, 3];\n p.mult(arr);\n point(p);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Multiply p.x * p2.x and p.y * p2.y\n let p2 = createVector(2, 3);\n p.mult(p2);\n point(p);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top-left.\n let p = createVector(25, 25);\n point(p);\n\n // Bottom-right.\n // Create a new p5.Vector with\n // p3.x = p.x * p2.x\n // p3.y = p.y * p2.y\n let p2 = createVector(2, 3);\n let p3 = p5.Vector.mult(p, p2);\n point(p3);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extending from the top left corner. The blue arrow is twice the length of the red arrow.');\n}\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(25, 25);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = p5.Vector.mult(v1, 2);\n drawArrow(origin, v2, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current hour.\n let h = hour();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the hour.\n text(`Current hour: ${h}`, 20, 50, 60);\n\n describe(`The text 'Current hour: ${h}' written in black on a gray background.`);\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 785,
- "params": [
- {
- "name": "n",
- "description": "<p>The number to multiply with the vector</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- },
+ "params": [],
+ "return": {
+ "description": "current hour between 0 and 23.",
+ "type": "Integer"
+ }
+ }
+ ],
+ "return": {
+ "description": "current hour between 0 and 23.",
+ "type": "Integer"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Time & Date"
+ },
+ {
+ "name": "minute",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/time_date.js",
+ "line": 107,
+ "itemtype": "method",
+ "description": "Returns the current minute as a number from 0–59.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current minute.\n let m = minute();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the minute.\n text(`Current minute: ${m}`, 10, 50, 80);\n\n describe(`The text 'Current minute: ${m}' written in black on a gray background.`);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "current minute between 0 and 59.",
+ "type": "Integer"
+ }
+ }
+ ],
+ "return": {
+ "description": "current minute between 0 and 59.",
+ "type": "Integer"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Time & Date"
+ },
+ {
+ "name": "millis",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/time_date.js",
+ "line": 229,
+ "itemtype": "method",
+ "description": "<p>Returns the number of milliseconds since a sketch started running.</p>\n<p><code>millis()</code> keeps track of how long a sketch has been running in\nmilliseconds (thousandths of a second). This information is often\nhelpful for timing events and animations.</p>\n<p>If a sketch has a\n<a href=\"#/p5/setup\">setup()</a> function, then <code>millis()</code> begins tracking\ntime before the code in <a href=\"#/p5/setup\">setup()</a> runs. If a\nsketch includes a <a href=\"#/p5/preload\">preload()</a> function, then\n<code>millis()</code> begins tracking time as soon as the code in\n<a href=\"#/p5/preload\">preload()</a> starts running.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the number of milliseconds the sketch has run.\n let ms = millis();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(10);\n textFont('Courier New');\n\n // Display how long it took setup() to be called.\n text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);\n\n describe(\n `The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The text \"Running time: S sec\" written in black on a gray background. The number S increases as the sketch runs.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the number of seconds the sketch has run.\n let s = millis() / 1000;\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(10);\n textFont('Courier New');\n\n // Display how long the sketch has run.\n text(`Running time: ${nf(s, 1, 1)} sec`, 5, 50, 90);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle oscillates left and right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the number of seconds the sketch has run.\n let s = millis() / 1000;\n\n // Calculate an x-coordinate.\n let x = 30 * sin(s) + 50;\n\n // Draw the circle.\n circle(x, 50, 30);\n}\n</code>\n</div>\n\n<div>\n<code>\nasync function setup() {\n // Load the GeoJSON.\n await loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');\n createCanvas(100, 100);\n\n background(200);\n\n // Get the number of milliseconds the sketch has run.\n let ms = millis();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(11);\n\n // Display how long it took to load the data.\n text(`It took ${round(ms, 2)} ms to load the data`, 5, 50, 100);\n\n describe(\n `The text \"It took ${round(ms, 2)} ms to load the data\" written in black on a gray background.`\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "number of milliseconds since starting the sketch.",
+ "type": "Number"
+ }
+ }
+ ],
+ "return": {
+ "description": "number of milliseconds since starting the sketch.",
+ "type": "Number"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Time & Date"
+ },
+ {
+ "name": "month",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/time_date.js",
+ "line": 268,
+ "itemtype": "method",
+ "description": "Returns the current month as a number from 1–12.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current month.\n let m = month();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the month.\n text(`Current month: ${m}`, 10, 50, 80);\n\n describe(`The text 'Current month: ${m}' written in black on a gray background.`);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "current month between 1 and 12.",
+ "type": "Integer"
+ }
+ }
+ ],
+ "return": {
+ "description": "current month between 1 and 12.",
+ "type": "Integer"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Time & Date"
+ },
+ {
+ "name": "second",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/time_date.js",
+ "line": 303,
+ "itemtype": "method",
+ "description": "Returns the current second as a number from 0–59.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current second.\n let s = second();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the second.\n text(`Current second: ${s}`, 10, 50, 80);\n\n describe(`The text 'Current second: ${s}' written in black on a gray background.`);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "current second between 0 and 59.",
+ "type": "Integer"
+ }
+ }
+ ],
+ "return": {
+ "description": "current second between 0 and 59.",
+ "type": "Integer"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Time & Date"
+ },
+ {
+ "name": "year",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/time_date.js",
+ "line": 337,
+ "itemtype": "method",
+ "description": "Returns the current year as a number such as 1999.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current year.\n let y = year();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the year.\n text(`Current year: ${y}`, 10, 50, 80);\n\n describe(`The text 'Current year: ${y}' written in black on a gray background.`);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "current year.",
+ "type": "Integer"
+ }
+ }
+ ],
+ "return": {
+ "description": "current year.",
+ "type": "Integer"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "IO",
+ "submodule": "Time & Date"
+ },
+ {
+ "name": "nf",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/utility_functions.js",
+ "line": 93,
+ "itemtype": "method",
+ "description": "<p>Converts a <code>Number</code> into a <code>String</code> with a given number of digits.</p>\n<p><code>nf()</code> converts numbers such as <code>123.45</code> into strings formatted with a set\nnumber of digits, as in <code>'123.4500'</code>.</p>\n<p>The first parameter, <code>num</code>, is the number to convert to a string. For\nexample, calling <code>nf(123.45)</code> returns the string <code>'123.45'</code>. If an array of\nnumbers is passed, as in <code>nf([123.45, 67.89])</code>, an array of formatted\nstrings will be returned.</p>\n<p>The second parameter, <code>left</code>, is optional. If a number is passed, as in\n<code>nf(123.45, 4)</code>, it sets the minimum number of digits to include to the\nleft of the decimal place. If <code>left</code> is larger than the number of digits in\n<code>num</code>, then unused digits will be set to 0. For example, calling\n<code>nf(123.45, 4)</code> returns the string <code>'0123.45'</code>.</p>\n<p>The third parameter, <code>right</code>, is also optional. If a number is passed, as\nin <code>nf(123.45, 4, 1)</code>, it sets the minimum number of digits to include to\nthe right of the decimal place. If <code>right</code> is smaller than the number of\ndecimal places in <code>num</code>, then <code>num</code> will be rounded to the given number of\ndecimal places. For example, calling <code>nf(123.45, 4, 1)</code> returns the string\n<code>'0123.5'</code>. If right is larger than the number of decimal places in <code>num</code>,\nthen unused decimal places will be set to 0. For example, calling\n<code>nf(123.45, 4, 3)</code> returns the string <code>'0123.450'</code>.</p>\n<p>When the number is negative, for example, calling <code>nf(-123.45, 5, 2)</code>\nreturns the string <code>'-00123.45'</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(16);\n\n // Create a number variable.\n let number = 123.45;\n\n // Display the number as a string.\n let formatted = nf(number);\n text(formatted, 20, 20);\n\n let negative = nf(-number, 4, 2);\n text(negative, 20, 40);\n\n // Display the number with four digits\n // to the left of the decimal.\n let left = nf(number, 4);\n text(left, 20, 60);\n\n // Display the number with four digits\n // to the left of the decimal and one\n // to the right.\n let right = nf(number, 4, 1);\n text(right, 20, 80);\n\n describe(\n 'The numbers \"123.45\", \"-0123.45\", \"0123.45\", and \"0123.5\" written on four separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 965,
"params": [
{
- "name": "x",
- "description": "<p>number to multiply with the x component of the vector.</p>\n",
- "type": "Number"
+ "name": "num",
+ "description": "number to format.",
+ "type": "Number|String"
},
{
- "name": "y",
- "description": "<p>number to multiply with the y component of the vector.</p>\n",
- "type": "Number"
+ "name": "left",
+ "description": "number of digits to include to the left of\nthe decimal point.",
+ "optional": 1,
+ "type": "Integer|String"
},
{
- "name": "z",
- "description": "<p>number to multiply with the z component of the vector.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "right",
+ "description": "number of digits to include to the right\nof the decimal point.",
+ "optional": 1,
+ "type": "Integer|String"
}
],
- "chainable": 1
+ "return": {
+ "description": "formatted string.",
+ "type": "String"
+ }
},
{
- "line": 973,
"params": [
{
- "name": "arr",
- "description": "<p>array to multiply with the components of the vector.</p>\n",
+ "name": "nums",
+ "description": "numbers to format.",
"type": "Number[]"
- }
- ],
- "chainable": 1
- },
- {
- "line": 979,
- "params": [
+ },
{
- "name": "v",
- "description": "<p>vector to multiply with the components of the original vector.</p>\n",
- "type": "p5.Vector"
+ "name": "left",
+ "optional": 1,
+ "type": "Integer|String"
+ },
+ {
+ "name": "right",
+ "optional": 1,
+ "type": "Integer|String"
}
],
- "chainable": 1
- },
- {
- "line": 3435,
- "params": [
- {
- "name": "x",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "",
- "type": "Number",
- "optional": true
- }
- ],
- "static": 1,
- "return": {
- "description": "resulting new <a href=\"#/p5.Vector\">p5.Vector</a>.",
- "type": "p5.Vector"
- }
- },
- {
- "line": 3444,
- "params": [
- {
- "name": "v",
- "description": "",
- "type": "p5.Vector"
- },
- {
- "name": "n",
- "description": "",
- "type": "Number"
- },
- {
- "name": "target",
- "description": "<p>vector to receive the result.</p>\n",
- "type": "p5.Vector",
- "optional": true
- }
- ],
- "static": 1,
"return": {
- "description": "The resulting new <a href=\"#/p5.Vector\">p5.Vector</a>",
- "type": "p5.Vector"
+ "description": "formatted strings.",
+ "type": "String[]"
}
- },
+ }
+ ],
+ "return": {
+ "description": "formatted string.",
+ "type": "String"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Utility Functions"
+ },
+ {
+ "name": "nfc",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/utility_functions.js",
+ "line": 226,
+ "itemtype": "method",
+ "description": "<p>Converts a <code>Number</code> into a <code>String</code> with commas to mark units of 1,000.</p>\n<p><code>nfc()</code> converts numbers such as 12345 into strings formatted with commas\nto mark the thousands place, as in <code>'12,345'</code>.</p>\n<p>The first parameter, <code>num</code>, is the number to convert to a string. For\nexample, calling <code>nfc(12345)</code> returns the string <code>'12,345'</code>.</p>\n<p>The second parameter, <code>right</code>, is optional. If a number is passed, as in\n<code>nfc(12345, 1)</code>, it sets the minimum number of digits to include to the\nright of the decimal place. If <code>right</code> is smaller than the number of\ndecimal places in <code>num</code>, then <code>num</code> will be rounded to the given number of\ndecimal places. For example, calling <code>nfc(12345.67, 1)</code> returns the string\n<code>'12,345.7'</code>. If <code>right</code> is larger than the number of decimal places in\n<code>num</code>, then unused decimal places will be set to 0. For example, calling\n<code>nfc(12345.67, 3)</code> returns the string <code>'12,345.670'</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(16);\n\n // Create a number variable.\n let number = 12345;\n\n // Display the number as a string.\n let commas = nfc(number);\n text(commas, 15, 33);\n\n // Display the number with four digits\n // to the left of the decimal.\n let decimals = nfc(number, 2);\n text(decimals, 15, 67);\n\n describe(\n 'The numbers \"12,345\" and \"12,345.00\" written on separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [12345, 6789];\n\n // Convert the numbers to formatted strings.\n let formatted = nfc(numbers);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < formatted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 33;\n\n // Display the original and formatted numbers.\n text(`${numbers[i]} : ${formatted[i]}`, 50, y);\n }\n\n describe(\n 'The text \"12345 : 12,345\" and \"6789 : 6,789\" written on two separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 3453,
"params": [
{
- "name": "v0",
- "description": "",
- "type": "p5.Vector"
- },
- {
- "name": "v1",
- "description": "",
- "type": "p5.Vector"
+ "name": "num",
+ "description": "number to format.",
+ "type": "Number|String"
},
{
- "name": "target",
- "description": "",
- "type": "p5.Vector",
- "optional": true
+ "name": "right",
+ "description": "number of digits to include to the right\nof the decimal point.",
+ "optional": 1,
+ "type": "Integer|String"
}
],
- "static": 1,
"return": {
- "description": "The resulting new <a href=\"#/p5.Vector\">p5.Vector</a>",
- "type": "p5.Vector"
+ "description": "formatted string.",
+ "type": "String"
}
},
{
- "line": 3462,
"params": [
{
- "name": "v0",
- "description": "",
- "type": "p5.Vector"
- },
- {
- "name": "arr",
- "description": "",
+ "name": "nums",
+ "description": "numbers to format.",
"type": "Number[]"
},
{
- "name": "target",
- "description": "",
- "type": "p5.Vector",
- "optional": true
+ "name": "right",
+ "optional": 1,
+ "type": "Integer|String"
}
],
- "static": 1,
"return": {
- "description": "The resulting new <a href=\"#/p5.Vector\">p5.Vector</a>",
- "type": "p5.Vector"
+ "description": "formatted strings.",
+ "type": "String[]"
}
}
- ]
+ ],
+ "return": {
+ "description": "formatted string.",
+ "type": "String"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Utility Functions"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 1065,
- "description": "<p>Divides a vector's <code>x</code>, <code>y</code>, and <code>z</code> components.</p>\n<p><code>div()</code> can use separate numbers, as in <code>v.div(1, 2, 3)</code>, another\n<a href=\"#/p5.Vector\">p5.Vector</a> object, as in <code>v.div(v2)</code>, or an array\nof numbers, as in <code>v.div([1, 2, 3])</code>.</p>\n<p>If only one value is provided, as in <code>v.div(2)</code>, then all the components\nwill be divided by 2. If a value isn't provided for a component, it\nwon't change. For example, <code>v.div(4, 5)</code> divides <code>v.x</code> by, <code>v.y</code> by 5,\nand <code>v.z</code> by 1. Calling <code>div()</code> with no arguments, as in <code>v.div()</code>, has\nno effect.</p>\n<p>The static version of <code>div()</code>, as in <code>p5.Vector.div(v, 2)</code>, returns a new\n<a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginals.</p>\n",
+ "name": "nfp",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/utility_functions.js",
+ "line": 368,
"itemtype": "method",
- "name": "div",
- "chainable": 1,
+ "description": "<p>Converts a <code>Number</code> into a <code>String</code> with a plus or minus sign.</p>\n<p><code>nfp()</code> converts numbers such as 123 into strings formatted with a <code>+</code> or\n<code>-</code> symbol to mark whether they're positive or negative, as in <code>'+123'</code>.</p>\n<p>The first parameter, <code>num</code>, is the number to convert to a string. For\nexample, calling <code>nfp(123.45)</code> returns the string <code>'+123.45'</code>. If an array\nof numbers is passed, as in <code>nfp([123.45, -6.78])</code>, an array of formatted\nstrings will be returned.</p>\n<p>The second parameter, <code>left</code>, is optional. If a number is passed, as in\n<code>nfp(123.45, 4)</code>, it sets the minimum number of digits to include to the\nleft of the decimal place. If <code>left</code> is larger than the number of digits in\n<code>num</code>, then unused digits will be set to 0. For example, calling\n<code>nfp(123.45, 4)</code> returns the string <code>'+0123.45'</code>.</p>\n<p>The third parameter, <code>right</code>, is also optional. If a number is passed, as\nin <code>nfp(123.45, 4, 1)</code>, it sets the minimum number of digits to include to\nthe right of the decimal place. If <code>right</code> is smaller than the number of\ndecimal places in <code>num</code>, then <code>num</code> will be rounded to the given number of\ndecimal places. For example, calling <code>nfp(123.45, 4, 1)</code> returns the\nstring <code>'+0123.5'</code>. If <code>right</code> is larger than the number of decimal places\nin <code>num</code>, then unused decimal places will be set to 0. For example,\ncalling <code>nfp(123.45, 4, 3)</code> returns the string <code>'+0123.450'</code>.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Center.\n let p = createVector(50, 50);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 2\n p.div(2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n p.div(2, 3);\n point(p);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n let arr = [2, 3];\n p.div(arr);\n point(p);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n let p2 = createVector(2, 3);\n p.div(p2);\n point(p);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Create a new p5.Vector with\n // p3.x = p.x / p2.x\n // p3.y = p.y / p2.y\n let p2 = createVector(2, 3);\n let p3 = p5.Vector.div(p, p2);\n point(p3);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = p5.Vector.div(v1, 2);\n drawArrow(origin, v2, 'blue');\n\n describe('Two arrows extending from the top left corner. The blue arrow is half the length of the red arrow.');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create number variables.\n let positive = 123;\n let negative = -123;\n\n // Convert the positive number to a formatted string.\n let p = nfp(positive);\n\n // Convert the negative number to a formatted string\n // with four digits to the left of the decimal\n // and two digits to the right of the decimal.\n let n = nfp(negative, 4, 2);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Display the original and formatted numbers.\n text(`${positive} : ${p}`, 50, 33);\n text(`${negative} : ${n}`, 50, 67);\n\n describe(\n 'The text \"123 : +123\" and \"-123 : -123.00\" written on separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create number variables.\n let numbers = [123, -4.56];\n\n // Convert the numbers to formatted strings\n // with four digits to the left of the decimal\n // and one digit to the right of the decimal.\n let formatted = nfp(numbers, 4, 1);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < formatted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 33;\n\n // Display the original and formatted numbers.\n text(`${numbers[i]} : ${formatted[i]}`, 50, y);\n }\n\n describe(\n 'The text \"123 : +0123.0\" and \"-4.56 : 00-4.6\" written on separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 1065,
- "params": [
- {
- "name": "n",
- "description": "<p>The number to divide the vector by</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 1247,
"params": [
{
- "name": "x",
- "description": "<p>number to divide with the x component of the vector.</p>\n",
+ "name": "num",
+ "description": "number to format.",
"type": "Number"
},
{
- "name": "y",
- "description": "<p>number to divide with the y component of the vector.</p>\n",
- "type": "Number"
+ "name": "left",
+ "description": "number of digits to include to the left of the\ndecimal point.",
+ "optional": 1,
+ "type": "Integer"
},
{
- "name": "z",
- "description": "<p>number to divide with the z component of the vector.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "right",
+ "description": "number of digits to include to the right of the\ndecimal point.",
+ "optional": 1,
+ "type": "Integer"
}
],
- "chainable": 1
+ "return": {
+ "description": "formatted string.",
+ "type": "String"
+ }
},
{
- "line": 1255,
"params": [
{
- "name": "arr",
- "description": "<p>array to divide the components of the vector by.</p>\n",
+ "name": "nums",
+ "description": "numbers to format.",
"type": "Number[]"
- }
- ],
- "chainable": 1
- },
- {
- "line": 1261,
- "params": [
- {
- "name": "v",
- "description": "<p>vector to divide the components of the original vector by.</p>\n",
- "type": "p5.Vector"
- }
- ],
- "chainable": 1
- },
- {
- "line": 3520,
- "params": [
- {
- "name": "x",
- "description": "",
- "type": "Number"
},
{
- "name": "y",
- "description": "",
- "type": "Number"
+ "name": "left",
+ "optional": 1,
+ "type": "Integer"
},
{
- "name": "z",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "right",
+ "optional": 1,
+ "type": "Integer"
}
],
- "static": 1,
"return": {
- "description": "The resulting new <a href=\"#/p5.Vector\">p5.Vector</a>",
- "type": "p5.Vector"
+ "description": "formatted strings.",
+ "type": "String[]"
}
- },
+ }
+ ],
+ "return": {
+ "description": "formatted string.",
+ "type": "String"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Utility Functions"
+ },
+ {
+ "name": "nfs",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/utility_functions.js",
+ "line": 485,
+ "itemtype": "method",
+ "description": "<p>Converts a positive <code>Number</code> into a <code>String</code> with an extra space in front.</p>\n<p><code>nfs()</code> converts positive numbers such as 123.45 into strings formatted\nwith an extra space in front, as in ' 123.45'. Doing so can be helpful for\naligning positive and negative numbers.</p>\n<p>The first parameter, <code>num</code>, is the number to convert to a string. For\nexample, calling <code>nfs(123.45)</code> returns the string <code>' 123.45'</code>.</p>\n<p>The second parameter, <code>left</code>, is optional. If a number is passed, as in\n<code>nfs(123.45, 4)</code>, it sets the minimum number of digits to include to the\nleft of the decimal place. If <code>left</code> is larger than the number of digits in\n<code>num</code>, then unused digits will be set to 0. For example, calling\n<code>nfs(123.45, 4)</code> returns the string <code>' 0123.45'</code>.</p>\n<p>The third parameter, <code>right</code>, is also optional. If a number is passed, as\nin <code>nfs(123.45, 4, 1)</code>, it sets the minimum number of digits to include to\nthe right of the decimal place. If <code>right</code> is smaller than the number of\ndecimal places in <code>num</code>, then <code>num</code> will be rounded to the given number of\ndecimal places. For example, calling <code>nfs(123.45, 4, 1)</code> returns the\nstring <code>' 0123.5'</code>. If <code>right</code> is larger than the number of decimal places\nin <code>num</code>, then unused decimal places will be set to 0. For example,\ncalling <code>nfs(123.45, 4, 3)</code> returns the string <code>' 0123.450'</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create number variables.\n let positive = 123;\n let negative = -123;\n\n // Convert the positive number to a formatted string.\n let formatted = nfs(positive);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Display the negative number and the formatted positive number.\n text(negative, 50, 33);\n text(formatted, 50, 67);\n\n describe(\n 'The numbers -123 and 123 written on separate lines. The numbers align vertically. The text is in black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let number = 123.45;\n\n // Convert the positive number to a formatted string.\n // Use four digits to the left of the decimal and\n // one digit to the right.\n let formatted = nfs(number, 4, 1);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Display a negative version of the number and\n // the formatted positive version.\n text('-0123.5', 50, 33);\n text(formatted, 50, 67);\n\n describe(\n 'The numbers \"-0123.5\" and \"0123.5\" written on separate lines. The numbers align vertically. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 3529,
"params": [
{
- "name": "v",
- "description": "",
- "type": "p5.Vector"
+ "name": "num",
+ "description": "number to format.",
+ "type": "Number"
},
{
- "name": "n",
- "description": "",
- "type": "Number"
+ "name": "left",
+ "description": "number of digits to include to the left of the\ndecimal point.",
+ "optional": 1,
+ "type": "Integer"
},
{
- "name": "target",
- "description": "<p>The vector to receive the result</p>\n",
- "type": "p5.Vector",
- "optional": true
+ "name": "right",
+ "description": "number of digits to include to the right of the\ndecimal point.",
+ "optional": 1,
+ "type": "Integer"
}
],
- "static": 1,
"return": {
- "description": "The resulting new <a href=\"#/p5.Vector\">p5.Vector</a>",
- "type": "p5.Vector"
+ "description": "formatted string.",
+ "type": "String"
}
},
{
- "line": 3538,
"params": [
{
- "name": "v0",
- "description": "",
- "type": "p5.Vector"
+ "name": "nums",
+ "description": "numbers to format.",
+ "type": "Array"
},
{
- "name": "v1",
- "description": "",
- "type": "p5.Vector"
+ "name": "left",
+ "optional": 1,
+ "type": "Integer"
},
{
- "name": "target",
- "description": "",
- "type": "p5.Vector",
- "optional": true
+ "name": "right",
+ "optional": 1,
+ "type": "Integer"
}
],
- "static": 1,
"return": {
- "description": "The resulting new <a href=\"#/p5.Vector\">p5.Vector</a>",
- "type": "p5.Vector"
+ "description": "formatted strings.",
+ "type": "String[]"
}
- },
+ }
+ ],
+ "return": {
+ "description": "formatted string.",
+ "type": "String"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Utility Functions"
+ },
+ {
+ "name": "splitTokens",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/utility_functions.js",
+ "line": 638,
+ "deprecated": true,
+ "deprecationMessage": "This will be removed in a future version of p5.js to make way for a new, friendlier version :)",
+ "itemtype": "method",
+ "description": "<p>Splits a <code>String</code> into pieces and returns an array containing the pieces.</p>\n<p><code>splitTokens()</code> is an enhanced version of\n<a href=\"#/p5/split\">split()</a>. It can split a string when any characters\nfrom a list are detected.</p>\n<p>The first parameter, <code>value</code>, is the string to split.</p>\n<p>The second parameter, <code>delim</code>, is optional. It sets the character(s) that\nshould be used to split the string. <code>delim</code> can be a single string, as in\n<code>splitTokens('rock...paper...scissors...shoot', '...')</code>, or an array of\nstrings, as in\n<code>splitTokens('rock;paper,scissors...shoot, [';', ',', '...'])</code>. By default,\nif no <code>delim</code> characters are specified, then any whitespace character is\nused to split. Whitespace characters include tab (<code>\\t</code>), line feed (<code>\\n</code>),\ncarriage return (<code>\\r</code>), form feed (<code>\\f</code>), and space.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'rock paper scissors shoot';\n\n // Split the string at each space.\n let words = splitTokens(string);\n\n // Print the array to the console.\n print(words);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Iterate over the words array.\n for (let i = 0; i < words.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Display the word.\n text(words[i], 50, y);\n }\n\n describe(\n 'The words \"rock\", \"paper\", \"scissors\", and \"shoot\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'rock...paper...scissors...shoot';\n\n // Split the string at each ...\n let words = splitTokens(string, '...');\n\n // Print the array to the console.\n print(words);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Iterate over the words array.\n for (let i = 0; i < words.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Display the word.\n text(words[i], 50, y);\n }\n\n describe(\n 'The words \"rock\", \"paper\", \"scissors\", and \"shoot\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'rock;paper,scissors...shoot';\n\n // Split the string at each semicolon, comma, or ...\n let words = splitTokens(string, [';', ',', '...']);\n\n // Print the array to the console.\n print(words);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Iterate over the words array.\n for (let i = 0; i < words.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Display the word.\n text(words[i], 50, y);\n }\n\n describe(\n 'The words \"rock\", \"paper\", \"scissors\", and \"shoot\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 3547,
"params": [
{
- "name": "v0",
- "description": "",
- "type": "p5.Vector"
- },
- {
- "name": "arr",
- "description": "",
- "type": "Number[]"
+ "name": "value",
+ "description": "string to split.",
+ "type": "String"
},
{
- "name": "target",
- "description": "",
- "type": "p5.Vector",
- "optional": true
+ "name": "delim",
+ "description": "character(s) to use for splitting the string.",
+ "optional": 1,
+ "type": "String"
}
],
- "static": 1,
"return": {
- "description": "The resulting new <a href=\"#/p5.Vector\">p5.Vector</a>",
- "type": "p5.Vector"
+ "description": "separated strings.",
+ "type": "String[]"
}
}
- ]
+ ],
+ "return": {
+ "description": "separated strings.",
+ "type": "String[]"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Utility Functions"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 1362,
- "description": "<p>Calculates the magnitude (length) of the vector.</p>\n<p>Use <a href=\"#/p5/mag\">mag()</a> to calculate the magnitude of a 2D vector\nusing components as in <code>mag(x, y)</code>.</p>\n",
+ "name": "shuffle",
+ "file": "src/scripts/parsers/in/p5.js/src/utilities/utility_functions.js",
+ "line": 762,
"itemtype": "method",
- "name": "mag",
- "return": {
- "description": "magnitude of the vector.",
- "type": "Number"
- },
+ "description": "<p>Shuffles the elements of an array.</p>\n<p>The first parameter, <code>array</code>, is the array to be shuffled. For example,\ncalling <code>shuffle(myArray)</code> will shuffle the elements of <code>myArray</code>. By\ndefault, the original array won’t be modified. Instead, a copy will be\ncreated, shuffled, and returned.</p>\n<p>The second parameter, <code>modify</code>, is optional. If <code>true</code> is passed, as in\n<code>shuffle(myArray, true)</code>, then the array will be shuffled in place without\nmaking a copy.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector object.\n let p = createVector(30, 40);\n\n // Draw a line from the origin.\n line(0, 0, p.x, p.y);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the vector's magnitude.\n let m = p.mag();\n text(m, p.x, p.y);\n\n 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.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of colors.\n let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];\n\n // Create a shuffled copy of the array.\n let shuffledColors = shuffle(colors);\n\n // Draw a row of circles using the original array.\n for (let i = 0; i < colors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = (i + 1) * 12.5;\n\n // Style the circle.\n let c = colors[i];\n fill(c);\n\n // Draw the circle.\n circle(x, 33, 10);\n }\n\n // Draw a row of circles using the original array.\n for (let i = 0; i < shuffledColors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = (i + 1) * 12.5;\n\n // Style the circle.\n let c = shuffledColors[i];\n fill(c);\n\n // Draw the circle.\n circle(x, 67, 10);\n }\n\n describe(\n 'Two rows of circles on a gray background. The top row follows the color sequence ROYGBIV. The bottom row has all the same colors but they are shuffled.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of colors.\n let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];\n\n // Shuffle the array.\n shuffle(colors, true);\n\n // Draw a row of circles using the original array.\n for (let i = 0; i < colors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = (i + 1) * 12.5;\n\n // Style the circle.\n let c = colors[i];\n fill(c);\n\n // Draw the circle.\n circle(x, 50, 10);\n }\n\n describe(\n 'A row of colorful circles on a gray background. Their sequence changes each time the sketch runs.'\n );\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 1362,
- "params": [],
- "return": {
- "description": "magnitude of the vector.",
- "type": "Number"
- }
- },
- {
- "line": 3682,
"params": [
{
- "name": "vecT",
- "description": "<p>The vector to return the magnitude of</p>\n",
- "type": "p5.Vector"
+ "name": "array",
+ "description": "array to shuffle.",
+ "type": "Array"
+ },
+ {
+ "name": "bool",
+ "description": "if <code>true</code>, shuffle the original array in place. Defaults to <code>false</code>.",
+ "optional": 1,
+ "type": "Boolean"
}
],
- "static": 1,
"return": {
- "description": "The magnitude of vecT",
- "type": "Number"
+ "description": "shuffled array.",
+ "type": "Array"
}
}
- ]
+ ],
+ "return": {
+ "description": "shuffled array.",
+ "type": "Array"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Data",
+ "submodule": "Utility Functions"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 1402,
- "description": "<p>Calculates the magnitude (length) of the vector squared.</p>\n",
+ "name": "strokeMode",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/3d_primitives.js",
+ "line": 98,
"itemtype": "method",
- "name": "magSq",
- "return": {
- "description": "squared magnitude of the vector.",
- "type": "Number"
- },
+ "description": "<p>Sets the stroke rendering mode to balance performance and visual features when drawing lines.</p>\n<p><code>strokeMode()</code> offers two modes:</p>\n<ul><li><code>SIMPLE</code>: Optimizes for speed by disabling caps, joins, and stroke color features.\nUse this mode for faster line rendering when these visual details are unnecessary.</li><li><code>FULL</code>: Enables caps, joins, and stroke color for lines.\nThis mode provides enhanced visuals but may reduce performance due to additional processing.</li></ul><p>Choose the mode that best suits your application's needs to either improve rendering speed or enhance visual quality.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector object.\n let p = createVector(30, 40);\n\n // Draw a line from the origin.\n line(0, 0, p.x, p.y);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the vector's magnitude squared.\n let m = p.magSq();\n text(m, p.x, p.y);\n\n 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.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(300, 300, WEBGL);\n describe('A sphere with red stroke and a red, wavy line on a gray background. The wavy line have caps, joins and colors.');\n}\n\nfunction draw() {\n background(128);\n strokeMode(FULL); // Enables detailed rendering with caps, joins, and stroke color.\n push();\n strokeWeight(1);\n translate(0, -50, 0);\n sphere(50);\n pop();\n orbitControl();\n\n noFill();\n strokeWeight(15);\n stroke('red');\n beginShape();\n bezierOrder(2); // Sets the order of the Bezier curve.\n bezierVertex(80, 80);\n bezierVertex(50, -40);\n bezierVertex(-80, 80);\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(300, 300, WEBGL);\n describe('A sphere with red stroke and a wavy line without full curve decorations without caps and color on a gray background.');\n}\n\nfunction draw() {\n background(128);\n strokeMode(SIMPLE); // Simplifies stroke rendering for better performance.\n \n // Draw sphere\n push();\n strokeWeight(1);\n translate(0, -50, 0);\n sphere(50);\n pop();\n orbitControl();\n\n // Draw modified wavy red line\n noFill();\n strokeWeight(15);\n stroke('red');\n beginShape();\n bezierOrder(2); // Sets the order of the Bezier curve.\n bezierVertex(80, 80);\n bezierVertex(50, -40);\n bezierVertex(-80, 80);\n endShape();\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 1402,
- "params": [],
- "return": {
- "description": "squared magnitude of the vector.",
- "type": "Number"
- }
- },
- {
- "line": 3698,
"params": [
{
- "name": "vecT",
- "description": "<p>the vector to return the squared magnitude of</p>\n",
- "type": "p5.Vector"
+ "name": "mode",
+ "description": "<p>The stroke mode to set. Possible values are:</p>\n<ul><li><code>'SIMPLE'</code>: Fast rendering without caps, joins, or stroke color.</li><li><code>'FULL'</code>: Detailed rendering with caps, joins, and stroke color.</li></ul>",
+ "type": "String"
}
- ],
- "static": 1,
- "return": {
- "description": "the squared magnitude of vecT",
- "type": "Number"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 1441,
- "description": "<p>Calculates the dot product of two vectors.</p>\n<p>The dot product is a number that describes the overlap between two vectors.\nVisually, the dot product can be thought of as the \"shadow\" one vector\ncasts on another. The dot product's magnitude is largest when two vectors\npoint in the same or opposite directions. Its magnitude is 0 when two\nvectors form a right angle.</p>\n<p>The version of <code>dot()</code> with one parameter interprets it as another\n<a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n<p>The version of <code>dot()</code> with multiple parameters interprets them as the\n<code>x</code>, <code>y</code>, and <code>z</code> components of another vector.</p>\n<p>The static version of <code>dot()</code>, as in <code>p5.Vector.dot(v1, v2)</code>, is the same\nas calling <code>v1.dot(v2)</code>.</p>\n",
+ "name": "buildGeometry",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/3d_primitives.js",
+ "line": 333,
"itemtype": "method",
- "name": "dot",
- "return": {
- "description": "dot product.",
- "type": "Number"
- },
+ "description": "<p>Creates a custom <a href=\"#/p5.Geometry\">p5.Geometry</a> object from\nsimpler 3D shapes.</p>\n<p><code>buildGeometry()</code> helps with creating complex 3D shapes from simpler ones\nsuch as <a href=\"#/p5/sphere\">sphere()</a>. It can help to make sketches\nmore performant. For example, if a complex 3D shape doesn’t change while a\nsketch runs, then it can be created with <code>buildGeometry()</code>. Creating a\n<a href=\"#/p5.Geometry\">p5.Geometry</a> object once and then drawing it\nwill run faster than repeatedly drawing the individual pieces.</p>\n<p>The parameter, <code>callback</code>, is a function with the drawing instructions for\nthe new <a href=\"#/p5.Geometry\">p5.Geometry</a> object. It will be called\nonce to create the new 3D shape.</p>\n<p>See <a href=\"#/p5/beginGeometry\">beginGeometry()</a> and\n<a href=\"#/p5/endGeometry\">endGeometry()</a> for another way to build 3D\nshapes.</p>\n<p>Note: <code>buildGeometry()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4);\n let v2 = createVector(3, 0);\n\n // Calculate the dot product.\n let dp = v1.dot(v2);\n\n // Prints \"9\" to the console.\n print(dp);\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the dot product.\n let dp = p5.Vector.dot(v1, v2);\n\n // Prints \"0\" to the console.\n print(dp);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Center.\n let v0 = createVector(50, 50);\n\n // Draw the black arrow.\n let v1 = createVector(30, 0);\n drawArrow(v0, v1, 'black');\n\n // Draw the red arrow.\n let v2 = createVector(mouseX - 50, mouseY - 50);\n drawArrow(v0, v2, 'red');\n\n // Display the dot product.\n let dp = v2.dot(v1);\n text(`v2 • v1 = ${dp}`, 10, 20);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createShape);\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\n// Create p5.Geometry object from a single cone.\nfunction createShape() {\n cone();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the arrow.\n shape = buildGeometry(createArrow);\n\n describe('A white arrow drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrow.\n noStroke();\n\n // Draw the arrow.\n model(shape);\n}\n\nfunction createArrow() {\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createArrow);\n\n describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the p5.Geometry object again.\n model(shape);\n}\n\nfunction createArrow() {\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n\n describe('A set of white spheres on a gray background. The spheres are positioned randomly. Their positions reset when the user presses the Reset button.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = buildGeometry(createParticles);\n}\n\nfunction createParticles() {\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 1441,
"params": [
{
- "name": "x",
- "description": "<p>x component of the vector.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y component of the vector.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "z",
- "description": "<p>z component of the vector.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "callback",
+ "description": "function that draws the shape.",
+ "type": "Function"
}
],
"return": {
- "description": "dot product.",
- "type": "Number"
+ "description": "new 3D shape.",
+ "type": "p5.Geometry"
}
- },
+ }
+ ],
+ "return": {
+ "description": "new 3D shape.",
+ "type": "p5.Geometry"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
+ },
+ {
+ "name": "freeGeometry",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/3d_primitives.js",
+ "line": 451,
+ "itemtype": "method",
+ "description": "<p>Clears a <a href=\"#/p5.Geometry\">p5.Geometry</a> object from the graphics\nprocessing unit (GPU) memory.</p>\n<p><a href=\"#/p5.Geometry\">p5.Geometry</a> objects can contain lots of data\nabout their vertices, surface normals, colors, and so on. Complex 3D shapes\ncan use lots of memory which is a limited resource in many GPUs. Calling\n<code>freeGeometry()</code> can improve performance by freeing a\n<a href=\"#/p5.Geometry\">p5.Geometry</a> object’s resources from GPU memory.\n<code>freeGeometry()</code> works with <a href=\"#/p5.Geometry\">p5.Geometry</a> objects\ncreated with <a href=\"#/p5/beginGeometry\">beginGeometry()</a> and\n<a href=\"#/p5/endGeometry\">endGeometry()</a>,\n<a href=\"#/p5/buildGeometry\">buildGeometry()</a>, and\n<a href=\"#/p5/loadModel\">loadModel()</a>.</p>\n<p>The parameter, <code>geometry</code>, is the <a href=\"#/p5.Geometry\">p5.Geometry</a>\nobject to be freed.</p>\n<p>Note: A <a href=\"#/p5.Geometry\">p5.Geometry</a> object can still be drawn\nafter its resources are cleared from GPU memory. It may take longer to draw\nthe first time it’s redrawn.</p>\n<p>Note: <code>freeGeometry()</code> can only be used in WebGL mode.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Geometry object.\n beginGeometry();\n cone();\n let shape = endGeometry();\n\n // Draw the shape.\n model(shape);\n\n // Free the shape's resources.\n freeGeometry(shape);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = buildGeometry(createParticles);\n}\n\nfunction createParticles() {\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 1542,
"params": [
{
- "name": "v",
- "description": "<p><a href=\"#/p5.Vector\">p5.Vector</a> to be dotted.</p>\n",
- "type": "p5.Vector"
+ "name": "geometry",
+ "description": "3D shape whose resources should be freed.",
+ "type": "p5.Geometry"
}
- ],
- "return": {
- "description": "",
- "type": "Number"
- }
- },
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
+ },
+ {
+ "name": "plane",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/3d_primitives.js",
+ "line": 557,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Draws a plane.</p>\n<p>A plane is a four-sided, flat shape with every angle measuring 90˚. It’s\nsimilar to a rectangle and offers advanced drawing features in WebGL mode.</p>\n<p>The first parameter, <code>width</code>, is optional. If a <code>Number</code> is passed, as in\n<code>plane(20)</code>, it sets the plane’s width and height. By default, <code>width</code> is\n50.</p>\n<p>The second parameter, <code>height</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>plane(20, 30)</code>, it sets the plane’s height. By default, <code>height</code> is\nset to the plane’s <code>width</code>.</p>\n<p>The third parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>plane(20, 30, 5)</code> it sets the number of triangle subdivisions to use\nalong the x-axis. All 3D shapes are made by connecting triangles to form\ntheir surfaces. By default, <code>detailX</code> is 1.</p>\n<p>The fourth parameter, <code>detailY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>plane(20, 30, 5, 7)</code> it sets the number of triangle subdivisions to\nuse along the y-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, <code>detailY</code> is 1.</p>\n<p>Note: <code>plane()</code> can only be used in WebGL mode.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white plane on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the plane.\n plane();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white plane on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the plane.\n // Set its width and height to 30.\n plane(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white plane on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the plane.\n // Set its width to 30 and height to 50.\n plane(30, 50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 3576,
"params": [
{
- "name": "v1",
- "description": "<p>first <a href=\"#/p5.Vector\">p5.Vector</a>.</p>\n",
- "type": "p5.Vector"
+ "name": "width",
+ "description": "width of the plane.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "v2",
- "description": "<p>second <a href=\"#/p5.Vector\">p5.Vector</a>.</p>\n",
- "type": "p5.Vector"
+ "name": "height",
+ "description": "height of the plane.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "detailX",
+ "description": "number of triangle subdivisions along the x-axis.",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "detailY",
+ "description": "number of triangle subdivisions along the y-axis.",
+ "optional": 1,
+ "type": "Integer"
}
- ],
- "static": 1,
- "return": {
- "description": "dot product.",
- "type": "Number"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 1554,
- "description": "<p>Calculates the cross product of two vectors.</p>\n<p>The cross product is a vector that points straight out of the plane created\nby two vectors. The cross product's magnitude is the area of the parallelogram\nformed by the original two vectors.</p>\n<p>The static version of <code>cross()</code>, as in <code>p5.Vector.cross(v1, v2)</code>, is the same\nas calling <code>v1.cross(v2)</code>.</p>\n",
+ "name": "box",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/3d_primitives.js",
+ "line": 699,
"itemtype": "method",
- "name": "cross",
- "return": {
- "description": "cross product as a <a href=\"#/p5.Vector\">p5.Vector</a>.",
- "type": "p5.Vector"
- },
+ "chainable": 1,
+ "description": "<p>Draws a box (rectangular prism).</p>\n<p>A box is a 3D shape with six faces. Each face makes a 90˚ with four\nneighboring faces.</p>\n<p>The first parameter, <code>width</code>, is optional. If a <code>Number</code> is passed, as in\n<code>box(20)</code>, it sets the box’s width and height. By default, <code>width</code> is 50.</p>\n<p>The second parameter, <code>height</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>box(20, 30)</code>, it sets the box’s height. By default, <code>height</code> is set\nto the box’s <code>width</code>.</p>\n<p>The third parameter, <code>depth</code>, is also optional. If a <code>Number</code> is passed, as\nin <code>box(20, 30, 40)</code>, it sets the box’s depth. By default, <code>depth</code> is set\nto the box’s <code>height</code>.</p>\n<p>The fourth parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>box(20, 30, 40, 5)</code>, it sets the number of triangle subdivisions to\nuse along the x-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, <code>detailX</code> is 1.</p>\n<p>The fifth parameter, <code>detailY</code>, is also optional. If a number is passed, as\nin <code>box(20, 30, 40, 5, 7)</code>, it sets the number of triangle subdivisions to\nuse along the y-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, <code>detailY</code> is 1.</p>\n<p>Note: <code>box()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(3, 4);\n\n // Calculate the cross product.\n let cp = v1.cross(v2);\n\n // Prints \"p5.Vector Object : [0, 0, 4]\" to the console.\n print(cp.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(3, 4);\n\n // Calculate the cross product.\n let cp = p5.Vector.cross(v1, v2);\n\n // Prints \"p5.Vector Object : [0, 0, 4]\" to the console.\n print(cp.toString());\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n // Set its width and height to 30.\n box(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n // Set its width to 30 and height to 50.\n box(30, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n // Set its width to 30, height to 50, and depth to 10.\n box(30, 50, 10);\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 1554,
"params": [
{
- "name": "v",
- "description": "<p><a href=\"#/p5.Vector\">p5.Vector</a> to be crossed.</p>\n",
- "type": "p5.Vector"
- }
- ],
- "return": {
- "description": "cross product as a <a href=\"#/p5.Vector\">p5.Vector</a>.",
- "type": "p5.Vector"
- }
- },
- {
- "line": 3590,
- "params": [
+ "name": "width",
+ "description": "width of the box.",
+ "optional": 1,
+ "type": "Number"
+ },
{
- "name": "v1",
- "description": "<p>first <a href=\"#/p5.Vector\">p5.Vector</a>.</p>\n",
- "type": "p5.Vector"
+ "name": "height",
+ "description": "height of the box.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "v2",
- "description": "<p>second <a href=\"#/p5.Vector\">p5.Vector</a>.</p>\n",
- "type": "p5.Vector"
+ "name": "depth",
+ "description": "depth of the box.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "detailX",
+ "description": "number of triangle subdivisions along the x-axis.",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "detailY",
+ "description": "number of triangle subdivisions along the y-axis.",
+ "optional": 1,
+ "type": "Integer"
}
- ],
- "static": 1,
- "return": {
- "description": "cross product.",
- "type": "Number"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 1612,
- "description": "<p>Calculates the distance between two points represented by vectors.</p>\n<p>A point's coordinates can be represented by the components of a vector\nthat extends from the origin to the point.</p>\n<p>The static version of <code>dist()</code>, as in <code>p5.Vector.dist(v1, v2)</code>, is the same\nas calling <code>v1.dist(v2)</code>.</p>\n<p>Use <a href=\"#/p5/dist\">dist()</a> to calculate the distance between points\nusing coordinates as in <code>dist(x1, y1, x2, y2)</code>.</p>\n",
+ "name": "sphere",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/3d_primitives.js",
+ "line": 831,
"itemtype": "method",
- "name": "dist",
- "return": {
- "description": "distance.",
- "type": "Number"
- },
+ "chainable": 1,
+ "description": "<p>Draws a sphere.</p>\n<p>A sphere is a 3D shape with triangular faces that connect to form a round\nsurface. Spheres with few faces look like crystals. Spheres with many faces\nhave smooth surfaces and look like balls.</p>\n<p>The first parameter, <code>radius</code>, is optional. If a <code>Number</code> is passed, as in\n<code>sphere(20)</code>, it sets the radius of the sphere. By default, <code>radius</code> is 50.</p>\n<p>The second parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>sphere(20, 5)</code>, it sets the number of triangle subdivisions to use\nalong the x-axis. All 3D shapes are made by connecting triangles to form\ntheir surfaces. By default, <code>detailX</code> is 24.</p>\n<p>The third parameter, <code>detailY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>sphere(20, 5, 2)</code>, it sets the number of triangle subdivisions to\nuse along the y-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, <code>detailY</code> is 16.</p>\n<p>Note: <code>sphere()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the distance between them.\n let d = v1.dist(v2);\n\n // Prints \"1.414...\" to the console.\n print(d);\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the distance between them.\n let d = p5.Vector.dist(v1, v2);\n\n // Prints \"1.414...\" to the console.\n print(d);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(20, 70);\n drawArrow(origin, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.sub(v2, v1);\n drawArrow(v1, v3, 'purple');\n\n // Style the text.\n textAlign(CENTER);\n\n // Display the magnitude. The same as floor(v3.mag());\n let m = floor(p5.Vector.dist(v1, v2));\n text(m, 50, 75);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n sphere();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n // Set its radius to 30.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n // Set its radius to 30.\n // Set its detailX to 6.\n sphere(30, 6);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n // Set its radius to 30.\n // Set its detailX to 24.\n // Set its detailY to 4.\n sphere(30, 24, 4);\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 1612,
"params": [
{
- "name": "v",
- "description": "<p>x, y, and z coordinates of a <a href=\"#/p5.Vector\">p5.Vector</a>.</p>\n",
- "type": "p5.Vector"
- }
- ],
- "return": {
- "description": "distance.",
- "type": "Number"
- }
- },
- {
- "line": 3605,
- "params": [
+ "name": "radius",
+ "description": "radius of the sphere. Defaults to 50.",
+ "optional": 1,
+ "type": "Number"
+ },
{
- "name": "v1",
- "description": "<p>The first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n",
- "type": "p5.Vector"
+ "name": "detailX",
+ "description": "number of triangle subdivisions along the x-axis. Defaults to 24.",
+ "optional": 1,
+ "type": "Integer"
},
{
- "name": "v2",
- "description": "<p>The second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n",
- "type": "p5.Vector"
+ "name": "detailY",
+ "description": "number of triangle subdivisions along the y-axis. Defaults to 16.",
+ "optional": 1,
+ "type": "Integer"
}
- ],
- "static": 1,
- "return": {
- "description": "The distance",
- "type": "Number"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 1726,
- "description": "<p>Scales the components of a <a href=\"#/p5.Vector\">p5.Vector</a> object so\nthat its magnitude is 1.</p>\n<p>The static version of <code>normalize()</code>, as in <code>p5.Vector.normalize(v)</code>,\nreturns a new <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change\nthe original.</p>\n",
+ "name": "cylinder",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/3d_primitives.js",
+ "line": 1052,
"itemtype": "method",
- "name": "normalize",
- "return": {
- "description": "normalized <a href=\"#/p5.Vector\">p5.Vector</a>.",
- "type": "p5.Vector"
- },
+ "chainable": 1,
+ "description": "<p>Draws a cylinder.</p>\n<p>A cylinder is a 3D shape with triangular faces that connect a flat bottom\nto a flat top. Cylinders with few faces look like boxes. Cylinders with\nmany faces have smooth surfaces.</p>\n<p>The first parameter, <code>radius</code>, is optional. If a <code>Number</code> is passed, as in\n<code>cylinder(20)</code>, it sets the radius of the cylinder’s base. By default,\n<code>radius</code> is 50.</p>\n<p>The second parameter, <code>height</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>cylinder(20, 30)</code>, it sets the cylinder’s height. By default,\n<code>height</code> is set to the cylinder’s <code>radius</code>.</p>\n<p>The third parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>cylinder(20, 30, 5)</code>, it sets the number of edges used to form the\ncylinder's top and bottom. Using more edges makes the top and bottom look\nmore like circles. By default, <code>detailX</code> is 24.</p>\n<p>The fourth parameter, <code>detailY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>cylinder(20, 30, 5, 2)</code>, it sets the number of triangle subdivisions\nto use along the y-axis, between cylinder's the top and bottom. All 3D\nshapes are made by connecting triangles to form their surfaces. By default,\n<code>detailY</code> is 1.</p>\n<p>The fifth parameter, <code>bottomCap</code>, is also optional. If a <code>false</code> is passed,\nas in <code>cylinder(20, 30, 5, 2, false)</code> the cylinder’s bottom won’t be drawn.\nBy default, <code>bottomCap</code> is <code>true</code>.</p>\n<p>The sixth parameter, <code>topCap</code>, is also optional. If a <code>false</code> is passed, as\nin <code>cylinder(20, 30, 5, 2, false, false)</code> the cylinder’s top won’t be\ndrawn. By default, <code>topCap</code> is <code>true</code>.</p>\n<p>Note: <code>cylinder()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector.\n let v = createVector(10, 20, 2);\n\n // Normalize.\n v.normalize();\n\n // Prints \"p5.Vector Object : [0.445..., 0.890..., 0.089...]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector.\n let v0 = createVector(10, 20, 2);\n\n // Create a normalized copy.\n let v1 = p5.Vector.normalize(v0);\n\n // Prints \"p5.Vector Object : [10, 20, 2]\" to the console.\n print(v0.toString());\n // Prints \"p5.Vector Object : [0.445..., 0.890..., 0.089...]\" to the console.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.\");\n}\n\nfunction draw() {\n background(240);\n\n // Vector to the center.\n let v0 = createVector(50, 50);\n\n // Vector from the center to the mouse.\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n // Circle's radius.\n let r = 25;\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n v1.normalize();\n drawArrow(v0, v1.mult(r), 'blue');\n\n // Draw the circle.\n noFill();\n circle(50, 50, r * 2);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n cylinder();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius and height to 30.\n cylinder(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n cylinder(30, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 5.\n cylinder(30, 50, 5);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 2.\n cylinder(30, 50, 24, 2);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background. Its top is missing.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 1.\n // Don't draw its bottom.\n cylinder(30, 50, 24, 1, false);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background. Its top and bottom are missing.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 1.\n // Don't draw its bottom or top.\n cylinder(30, 50, 24, 1, false, false);\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 1726,
- "params": [],
- "return": {
- "description": "normalized <a href=\"#/p5.Vector\">p5.Vector</a>.",
- "type": "p5.Vector"
- }
- },
- {
- "line": 3711,
"params": [
{
- "name": "v",
- "description": "<p>The vector to normalize</p>\n",
- "type": "p5.Vector"
+ "name": "radius",
+ "description": "radius of the cylinder. Defaults to 50.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "target",
- "description": "<p>The vector to receive the result</p>\n",
- "type": "p5.Vector",
- "optional": true
+ "name": "height",
+ "description": "height of the cylinder. Defaults to the value of <code>radius</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "detailX",
+ "description": "number of edges along the top and bottom. Defaults to 24.",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "detailY",
+ "description": "number of triangle subdivisions along the y-axis. Defaults to 1.",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "bottomCap",
+ "description": "whether to draw the cylinder's bottom. Defaults to <code>true</code>.",
+ "optional": 1,
+ "type": "Boolean"
+ },
+ {
+ "name": "topCap",
+ "description": "whether to draw the cylinder's top. Defaults to <code>true</code>.",
+ "optional": 1,
+ "type": "Boolean"
}
- ],
- "static": 1,
- "return": {
- "description": "The vector v, normalized to a length of 1",
- "type": "p5.Vector"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 1835,
- "description": "<p>Limits a vector's magnitude to a maximum value.</p>\n<p>The static version of <code>limit()</code>, as in <code>p5.Vector.limit(v, 5)</code>, returns a\nnew <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginal.</p>\n",
+ "name": "cone",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/3d_primitives.js",
+ "line": 1273,
"itemtype": "method",
- "name": "limit",
"chainable": 1,
+ "description": "<p>Draws a cone.</p>\n<p>A cone is a 3D shape with triangular faces that connect a flat bottom to a\nsingle point. Cones with few faces look like pyramids. Cones with many\nfaces have smooth surfaces.</p>\n<p>The first parameter, <code>radius</code>, is optional. If a <code>Number</code> is passed, as in\n<code>cone(20)</code>, it sets the radius of the cone’s base. By default, <code>radius</code> is\n50.</p>\n<p>The second parameter, <code>height</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>cone(20, 30)</code>, it sets the cone’s height. By default, <code>height</code> is\nset to the cone’s <code>radius</code>.</p>\n<p>The third parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>cone(20, 30, 5)</code>, it sets the number of edges used to form the\ncone's base. Using more edges makes the base look more like a circle. By\ndefault, <code>detailX</code> is 24.</p>\n<p>The fourth parameter, <code>detailY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>cone(20, 30, 5, 7)</code>, it sets the number of triangle subdivisions to\nuse along the y-axis connecting the base to the tip. All 3D shapes are made\nby connecting triangles to form their surfaces. By default, <code>detailY</code> is 1.</p>\n<p>The fifth parameter, <code>cap</code>, is also optional. If a <code>false</code> is passed, as\nin <code>cone(20, 30, 5, 7, false)</code> the cone’s base won’t be drawn. By default,\n<code>cap</code> is <code>true</code>.</p>\n<p>Note: <code>cone()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(10, 20, 2);\n\n // Limit its magnitude.\n v.limit(5);\n\n // Prints \"p5.Vector Object : [2.227..., 4.454..., 0.445...]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(10, 20, 2);\n\n // Create a copy an limit its magintude.\n let v1 = p5.Vector.limit(v0, 5);\n\n // Prints \"p5.Vector Object : [2.227..., 4.454..., 0.445...]\" to the console.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.\");\n}\nfunction draw() {\n background(240);\n\n // Vector to the center.\n let v0 = createVector(50, 50);\n\n // Vector from the center to the mouse.\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n // Circle's radius.\n let r = 25;\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v1.limit(r), 'blue');\n\n // Draw the circle.\n noFill();\n circle(50, 50, r * 2);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n cone();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius and height to 30.\n cone(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n cone(30, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 5.\n cone(30, 50, 5);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white pyramid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 5.\n cone(30, 50, 5);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 2.\n cone(30, 50, 24, 2);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background. Its base is missing.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 1.\n // Don't draw its base.\n cone(30, 50, 24, 1, false);\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 1835,
"params": [
{
- "name": "max",
- "description": "<p>maximum magnitude for the vector.</p>\n",
+ "name": "radius",
+ "description": "radius of the cone's base. Defaults to 50.",
+ "optional": 1,
"type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 3738,
- "params": [
- {
- "name": "v",
- "description": "<p>the vector to limit</p>\n",
- "type": "p5.Vector"
},
{
- "name": "max",
- "description": "",
+ "name": "height",
+ "description": "height of the cone. Defaults to the value of <code>radius</code>.",
+ "optional": 1,
"type": "Number"
},
{
- "name": "target",
- "description": "<p>the vector to receive the result (Optional)</p>\n",
- "type": "p5.Vector",
- "optional": true
+ "name": "detailX",
+ "description": "number of edges used to draw the base. Defaults to 24.",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "detailY",
+ "description": "number of triangle subdivisions along the y-axis. Defaults to 1.",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "cap",
+ "description": "whether to draw the cone's base. Defaults to <code>true</code>.",
+ "optional": 1,
+ "type": "Boolean"
}
- ],
- "static": 1,
- "return": {
- "description": "v with a magnitude limited to max",
- "type": "p5.Vector"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 1933,
- "description": "<p>Sets a vector's magnitude to a given value.</p>\n<p>The static version of <code>setMag()</code>, as in <code>p5.Vector.setMag(v, 10)</code>, returns\na new <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginal.</p>\n",
+ "name": "ellipsoid",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/3d_primitives.js",
+ "line": 1456,
"itemtype": "method",
- "name": "setMag",
"chainable": 1,
+ "description": "<p>Draws an ellipsoid.</p>\n<p>An ellipsoid is a 3D shape with triangular faces that connect to form a\nround surface. Ellipsoids with few faces look like crystals. Ellipsoids\nwith many faces have smooth surfaces and look like eggs. <code>ellipsoid()</code>\ndefines a shape by its radii. This is different from\n<a href=\"#/p5/ellipse\">ellipse()</a> which uses diameters\n(width and height).</p>\n<p>The first parameter, <code>radiusX</code>, is optional. If a <code>Number</code> is passed, as in\n<code>ellipsoid(20)</code>, it sets the radius of the ellipsoid along the x-axis. By\ndefault, <code>radiusX</code> is 50.</p>\n<p>The second parameter, <code>radiusY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>ellipsoid(20, 30)</code>, it sets the ellipsoid’s radius along the y-axis.\nBy default, <code>radiusY</code> is set to the ellipsoid’s <code>radiusX</code>.</p>\n<p>The third parameter, <code>radiusZ</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>ellipsoid(20, 30, 40)</code>, it sets the ellipsoid’s radius along the\nz-axis. By default, <code>radiusZ</code> is set to the ellipsoid’s <code>radiusY</code>.</p>\n<p>The fourth parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>ellipsoid(20, 30, 40, 5)</code>, it sets the number of triangle\nsubdivisions to use along the x-axis. All 3D shapes are made by connecting\ntriangles to form their surfaces. By default, <code>detailX</code> is 24.</p>\n<p>The fifth parameter, <code>detailY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>ellipsoid(20, 30, 40, 5, 7)</code>, it sets the number of triangle\nsubdivisions to use along the y-axis. All 3D shapes are made by connecting\ntriangles to form their surfaces. By default, <code>detailY</code> is 16.</p>\n<p>Note: <code>ellipsoid()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 0);\n\n // Prints \"5\" to the console.\n print(v.mag());\n\n // Set its magnitude to 10.\n v.setMag(10);\n\n // Prints \"p5.Vector Object : [6, 8, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 4, 0);\n\n // Create a copy with a magnitude of 10.\n let v1 = p5.Vector.setMag(v0, 10);\n\n // Prints \"5\" to the console.\n print(v0.mag());\n\n // Prints \"p5.Vector Object : [6, 8, 0]\" to the console.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(240);\n\n let origin = createVector(0, 0);\n let v = createVector(50, 50);\n\n // Draw the red arrow.\n drawArrow(origin, v, 'red');\n\n // Set v's magnitude to 30.\n v.setMag(30);\n\n // Draw the blue arrow.\n drawArrow(origin, v, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n ellipsoid(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n ellipsoid(30, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n // Set its radiusZ to 50.\n ellipsoid(30, 40, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n // Set its radiusZ to 50.\n // Set its detailX to 4.\n ellipsoid(30, 40, 50, 4);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n // Set its radiusZ to 50.\n // Set its detailX to 4.\n // Set its detailY to 3.\n ellipsoid(30, 40, 50, 4, 3);\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 1933,
"params": [
{
- "name": "len",
- "description": "<p>new length for this vector.</p>\n",
+ "name": "radiusX",
+ "description": "radius of the ellipsoid along the x-axis. Defaults to 50.",
+ "optional": 1,
"type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 3766,
- "params": [
+ },
{
- "name": "v",
- "description": "<p>the vector to set the magnitude of</p>\n",
- "type": "p5.Vector"
+ "name": "radiusY",
+ "description": "radius of the ellipsoid along the y-axis. Defaults to <code>radiusX</code>.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "len",
- "description": "",
+ "name": "radiusZ",
+ "description": "radius of the ellipsoid along the z-axis. Defaults to <code>radiusY</code>.",
+ "optional": 1,
"type": "Number"
},
{
- "name": "target",
- "description": "<p>the vector to receive the result (Optional)</p>\n",
- "type": "p5.Vector",
- "optional": true
+ "name": "detailX",
+ "description": "number of triangle subdivisions along the x-axis. Defaults to 24.",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "detailY",
+ "description": "number of triangle subdivisions along the y-axis. Defaults to 16.",
+ "optional": 1,
+ "type": "Integer"
}
- ],
- "static": 1,
- "return": {
- "description": "v with a magnitude set to len",
- "type": "p5.Vector"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 2026,
- "description": "<p>Calculates the angle a 2D vector makes with the positive x-axis.</p>\n<p>By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.</p>\n<p>If the vector was created with\n<a href=\"#/p5/createVector\">createVector()</a>, <code>heading()</code> returns angles\nin the units of the current <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>The static version of <code>heading()</code>, as in <code>p5.Vector.heading(v)</code>, works the\nsame way.</p>\n",
+ "name": "torus",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/3d_primitives.js",
+ "line": 1621,
"itemtype": "method",
- "name": "heading",
- "return": {
- "description": "angle of rotation.",
- "type": "Number"
- },
+ "chainable": 1,
+ "description": "<p>Draws a torus.</p>\n<p>A torus is a 3D shape with triangular faces that connect to form a ring.\nToruses with few faces look flattened. Toruses with many faces have smooth\nsurfaces.</p>\n<p>The first parameter, <code>radius</code>, is optional. If a <code>Number</code> is passed, as in\n<code>torus(30)</code>, it sets the radius of the ring. By default, <code>radius</code> is 50.</p>\n<p>The second parameter, <code>tubeRadius</code>, is also optional. If a <code>Number</code> is\npassed, as in <code>torus(30, 15)</code>, it sets the radius of the tube. By default,\n<code>tubeRadius</code> is 10.</p>\n<p>The third parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>torus(30, 15, 5)</code>, it sets the number of edges used to draw the hole\nof the torus. Using more edges makes the hole look more like a circle. By\ndefault, <code>detailX</code> is 24.</p>\n<p>The fourth parameter, <code>detailY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>torus(30, 15, 5, 7)</code>, it sets the number of triangle subdivisions to\nuse while filling in the torus’ height. By default, <code>detailY</code> is 16.</p>\n<p>Note: <code>torus()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div class = \"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1);\n\n // Prints \"0.785...\" to the console.\n print(v.heading());\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Prints \"45\" to the console.\n print(v.heading());\n}\n</code>\n</div>\n\n<div class = \"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1);\n\n // Prints \"0.785...\" to the console.\n print(p5.Vector.heading(v));\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Prints \"45\" to the console.\n print(p5.Vector.heading(v));\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n let v = createVector(50, 50);\n\n // Draw the black arrow.\n drawArrow(origin, v, 'black');\n\n // Use radians.\n angleMode(RADIANS);\n\n // Display the heading in radians.\n let h = round(v.heading(), 2);\n text(`Radians: ${h}`, 20, 70);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Display the heading in degrees.\n h = v.heading();\n text(`Degrees: ${h}`, 20, 85);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n torus();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30.\n torus(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30 and tubeRadius to 15.\n torus(30, 15);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30 and tubeRadius to 15.\n // Set its detailX to 5.\n torus(30, 15, 5);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30 and tubeRadius to 15.\n // Set its detailX to 5.\n // Set its detailY to 3.\n torus(30, 15, 5, 3);\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 2026,
- "params": [],
- "return": {
- "description": "angle of rotation.",
- "type": "Number"
- }
- },
- {
- "line": 3796,
"params": [
{
- "name": "v",
- "description": "<p>the vector to find the angle of</p>\n",
- "type": "p5.Vector"
+ "name": "radius",
+ "description": "radius of the torus. Defaults to 50.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "tubeRadius",
+ "description": "radius of the tube. Defaults to 10.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "detailX",
+ "description": "number of edges that form the hole. Defaults to 24.",
+ "optional": 1,
+ "type": "Integer"
+ },
+ {
+ "name": "detailY",
+ "description": "number of triangle subdivisions along the y-axis. Defaults to 16.",
+ "optional": 1,
+ "type": "Integer"
}
- ],
- "static": 1,
- "return": {
- "description": "the angle of rotation",
- "type": "Number"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 2134,
- "description": "<p>Rotates a 2D vector to a specific angle without changing its magnitude.</p>\n<p>By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.</p>\n<p>If the vector was created with\n<a href=\"#/p5/createVector\">createVector()</a>, <code>setHeading()</code> uses\nthe units of the current <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
+ "name": "curveDetail",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/3d_primitives.js",
+ "line": 2727,
"itemtype": "method",
- "name": "setHeading",
- "params": [
- {
- "name": "angle",
- "description": "<p>angle of rotation.</p>\n",
- "type": "Number"
- }
- ],
"chainable": 1,
+ "description": "<p>Sets the number of segments used to draw spline curves in WebGL mode.</p>\n<p>In WebGL mode, smooth shapes are drawn using many flat segments. Adding\nmore flat segments makes shapes appear smoother.</p>\n<p>The parameter, <code>detail</code>, is the density of segments to use while drawing a\nspline curve.</p>\n<p>Note: <code>curveDetail()</code> has no effect in 2D mode.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(v.heading());\n\n // Point to the left.\n v.setHeading(PI);\n\n // Prints \"3.141...\" to the console.\n print(v.heading());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(v.heading());\n\n // Point to the left.\n v.setHeading(180);\n\n // Prints \"180\" to the console.\n print(v.heading());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extend from the center of a gray square. The red arrow points to the right and the blue arrow points down.');\n}\n\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Point down.\n v1.setHeading(HALF_PI);\n\n // Draw the blue arrow.\n drawArrow(v0, v1, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Set the curveDetail() to 0.5\n curveDetail(0.5);\n\n // Do not show all the vertices\n splineProperty('ends', EXCLUDE)\n\n // Draw a black spline curve.\n noFill();\n strokeWeight(1);\n stroke(0);\n spline(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0);\n\n // Draw red spline curves from the anchor points to the control points.\n spline(255, 0, 0);\n spline(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0);\n spline(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0);\n\n // Draw the anchor points in black.\n strokeWeight(5);\n stroke(0);\n point(23, -26);\n point(23, 11);\n\n // Draw the control points in red.\n stroke(255, 0, 0);\n point(-45, -24);\n point(-35, 15);\n\n describe(\n 'A gray square with a jagged curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'\n );\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "resolution",
+ "description": "number of segments to use. Default is 1/4",
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 2238,
- "description": "<p>Rotates a 2D vector by an angle without changing its magnitude.</p>\n<p>By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.</p>\n<p>If the vector was created with\n<a href=\"#/p5/createVector\">createVector()</a>, <code>rotate()</code> uses\nthe units of the current <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>The static version of <code>rotate()</code>, as in <code>p5.Vector.rotate(v, PI)</code>,\nreturns a new <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change\nthe original.</p>\n",
+ "name": "orbitControl",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/interaction.js",
+ "line": 165,
"itemtype": "method",
- "name": "rotate",
"chainable": 1,
+ "description": "<p>Allows the user to orbit around a 3D sketch using a mouse, trackpad, or\ntouchscreen.</p>\n<p>3D sketches are viewed through an imaginary camera. Calling\n<code>orbitControl()</code> within the <a href=\"#/p5/draw\">draw()</a> function allows\nthe user to change the camera’s position:</p>\n<pre><code class=\"language-js\">function draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rest of sketch.\n}</code></pre><p>Left-clicking and dragging or swipe motion will rotate the camera position\nabout the center of the sketch. Right-clicking and dragging or multi-swipe\nwill pan the camera position without rotation. Using the mouse wheel\n(scrolling) or pinch in/out will move the camera further or closer from the\ncenter of the sketch.</p>\n<p>The first three parameters, <code>sensitivityX</code>, <code>sensitivityY</code>, and\n<code>sensitivityZ</code>, are optional. They’re numbers that set the sketch’s\nsensitivity to movement along each axis. For example, calling\n<code>orbitControl(1, 2, -1)</code> keeps movement along the x-axis at its default\nvalue, makes the sketch twice as sensitive to movement along the y-axis,\nand reverses motion along the z-axis. By default, all sensitivity values\nare 1.</p>\n<p>The fourth parameter, <code>options</code>, is also optional. It’s an object that\nchanges the behavior of orbiting. For example, calling\n<code>orbitControl(1, 1, 1, options)</code> keeps the default sensitivity values while\nchanging the behaviors set with <code>options</code>. The object can have the\nfollowing properties:</p>\n<pre><code class=\"language-js\">let options = {\n // Setting this to false makes mobile interactions smoother by\n // preventing accidental interactions with the page while orbiting.\n // By default, it's true.\n disableTouchActions: true,\n\n // Setting this to true makes the camera always rotate in the\n // direction the mouse/touch is moving.\n // By default, it's false.\n freeRotation: false\n};\n\norbitControl(1, 1, 1, options);</code></pre>",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n\n // Rotate a quarter turn.\n v.rotate(HALF_PI);\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v = createVector(1, 0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n\n // Rotate a quarter turn.\n v.rotate(90);\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(1, 0);\n\n // Create a rotated copy.\n let v1 = p5.Vector.rotate(v0, HALF_PI);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v0.toString());\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v0 = createVector(1, 0);\n\n // Create a rotated copy.\n let v1 = p5.Vector.rotate(v0, 90);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v0.toString());\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nlet v0;\nlet v1;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n v0 = createVector(50, 50);\n v1 = createVector(30, 0);\n\n describe('A black arrow extends from the center of a gray square. The arrow rotates clockwise.');\n}\n\nfunction draw() {\n background(240);\n\n // Rotate v1.\n v1.rotate(0.01);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n // Make the interactions 3X sensitive.\n orbitControl(3, 3, 3);\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Create an options object.\n let options = {\n disableTouchActions: false,\n freeRotation: true\n };\n\n // Enable orbiting with the mouse.\n // Prevent accidental touch actions on touchscreen devices\n // and enable free rotation.\n orbitControl(1, 1, 1, options);\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 2238,
"params": [
{
- "name": "angle",
- "description": "<p>angle of rotation.</p>\n",
+ "name": "sensitivityX",
+ "description": "sensitivity to movement along the x-axis. Defaults to 1.",
+ "optional": 1,
"type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 3491,
- "params": [
+ },
{
- "name": "v",
- "description": "",
- "type": "p5.Vector"
+ "name": "sensitivityY",
+ "description": "sensitivity to movement along the y-axis. Defaults to 1.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "angle",
- "description": "",
+ "name": "sensitivityZ",
+ "description": "sensitivity to movement along the z-axis. Defaults to 1.",
+ "optional": 1,
"type": "Number"
},
{
- "name": "target",
- "description": "<p>The vector to receive the result</p>\n",
- "type": "p5.Vector",
- "optional": true
+ "name": "options",
+ "description": "object with two optional properties, <code>disableTouchActions</code>\nand <code>freeRotation</code>. Both are <code>Boolean</code>s. <code>disableTouchActions</code>\ndefaults to <code>true</code> and <code>freeRotation</code> defaults to <code>false</code>.",
+ "optional": 1,
+ "type": "Object"
}
- ],
- "static": 1,
- "return": {
- "description": "The resulting new <a href=\"#/p5.Vector\">p5.Vector</a>",
- "type": "p5.Vector"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Interaction"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 2384,
- "description": "<p>Calculates the angle between two vectors.</p>\n<p>The angles returned are signed, which means that\n<code>v1.angleBetween(v2) === -v2.angleBetween(v1)</code>.</p>\n<p>If the vector was created with\n<a href=\"#/p5/createVector\">createVector()</a>, <code>angleBetween()</code> returns\nangles in the units of the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
+ "name": "debugMode",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/interaction.js",
+ "line": 689,
"itemtype": "method",
- "name": "angleBetween",
- "return": {
- "description": "angle between the vectors.",
- "type": "Number"
- },
+ "description": "<p>Adds a grid and an axes icon to clarify orientation in 3D sketches.</p>\n<p><code>debugMode()</code> adds a grid that shows where the “ground” is in a sketch. By\ndefault, the grid will run through the origin <code>(0, 0, 0)</code> of the sketch\nalong the XZ plane. <code>debugMode()</code> also adds an axes icon that points along\nthe positive x-, y-, and z-axes. Calling <code>debugMode()</code> displays the grid\nand axes icon with their default size and position.</p>\n<p>There are four ways to call <code>debugMode()</code> with optional parameters to\ncustomize the debugging environment.</p>\n<p>The first way to call <code>debugMode()</code> has one parameter, <code>mode</code>. If the\nsystem constant <code>GRID</code> is passed, as in <code>debugMode(GRID)</code>, then the grid\nwill be displayed and the axes icon will be hidden. If the constant <code>AXES</code>\nis passed, as in <code>debugMode(AXES)</code>, then the axes icon will be displayed\nand the grid will be hidden.</p>\n<p>The second way to call <code>debugMode()</code> has six parameters. The first\nparameter, <code>mode</code>, selects either <code>GRID</code> or <code>AXES</code> to be displayed. The\nnext five parameters, <code>gridSize</code>, <code>gridDivisions</code>, <code>xOff</code>, <code>yOff</code>, and\n<code>zOff</code> are optional. They’re numbers that set the appearance of the grid\n(<code>gridSize</code> and <code>gridDivisions</code>) and the placement of the axes icon\n(<code>xOff</code>, <code>yOff</code>, and <code>zOff</code>). For example, calling\n<code>debugMode(20, 5, 10, 10, 10)</code> sets the <code>gridSize</code> to 20 pixels, the number\nof <code>gridDivisions</code> to 5, and offsets the axes icon by 10 pixels along the\nx-, y-, and z-axes.</p>\n<p>The third way to call <code>debugMode()</code> has five parameters. The first\nparameter, <code>mode</code>, selects either <code>GRID</code> or <code>AXES</code> to be displayed. The\nnext four parameters, <code>axesSize</code>, <code>xOff</code>, <code>yOff</code>, and <code>zOff</code> are optional.\nThey’re numbers that set the appearance of the size of the axes icon\n(<code>axesSize</code>) and its placement (<code>xOff</code>, <code>yOff</code>, and <code>zOff</code>).</p>\n<p>The fourth way to call <code>debugMode()</code> has nine optional parameters. The\nfirst five parameters, <code>gridSize</code>, <code>gridDivisions</code>, <code>gridXOff</code>, <code>gridYOff</code>,\nand <code>gridZOff</code> are numbers that set the appearance of the grid. For\nexample, calling <code>debugMode(100, 5, 0, 0, 0)</code> sets the <code>gridSize</code> to 100,\nthe number of <code>gridDivisions</code> to 5, and sets all the offsets to 0 so that\nthe grid is centered at the origin. The next four parameters, <code>axesSize</code>,\n<code>xOff</code>, <code>yOff</code>, and <code>zOff</code> are numbers that set the appearance of the size\nof the axes icon (<code>axesSize</code>) and its placement (<code>axesXOff</code>, <code>axesYOff</code>,\nand <code>axesZOff</code>). For example, calling\n<code>debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10)</code> sets the <code>gridSize</code> to 100,\nthe number of <code>gridDivisions</code> to 5, and sets all the offsets to 0 so that\nthe grid is centered at the origin. It then sets the <code>axesSize</code> to 50 and\noffsets the icon 10 pixels along each axis.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(v0.angleBetween(v1));\n\n // Prints \"-1.570...\" to the console.\n print(v1.angleBetween(v0));\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(v0.angleBetween(v1));\n\n // Prints \"-90\" to the console.\n print(v1.angleBetween(v0));\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(p5.Vector.angleBetween(v0, v1));\n\n // Prints \"-1.570...\" to the console.\n print(p5.Vector.angleBetween(v1, v0));\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(p5.Vector.angleBetween(v0, v1));\n\n // Prints \"-90\" to the console.\n print(p5.Vector.angleBetween(v1, v0));\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n let v2 = createVector(0, 30);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Use radians.\n angleMode(RADIANS);\n\n // Display the angle in radians.\n let angle = round(v1.angleBetween(v2), 2);\n text(`Radians: ${angle}`, 20, 20);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Display the angle in degrees.\n angle = round(v1.angleBetween(v2), 2);\n text(`Degrees: ${angle}`, 20, 35);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n debugMode();\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Only display the axes icon.\n debugMode(AXES);\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Only display the grid and customize it:\n // - size: 50\n // - divisions: 10\n // - offsets: 0, 20, 0\n debugMode(GRID, 50, 10, 0, 20, 0);\n\n describe('A multicolor box on a gray background. A grid is displayed below the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Display the grid and axes icon and customize them:\n // Grid\n // ----\n // - size: 50\n // - divisions: 10\n // - offsets: 0, 20, 0\n // Axes\n // ----\n // - size: 50\n // - offsets: 0, 0, 0\n debugMode(50, 10, 0, 20, 0, 50, 0, 0, 0);\n\n describe('A multicolor box on a gray background. A grid is displayed below the box. An axes icon is displayed at the center of the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 2384,
+ "params": []
+ },
+ {
"params": [
{
- "name": "value",
- "description": "<p>x, y, and z components of a <a href=\"#/p5.Vector\">p5.Vector</a>.</p>\n",
- "type": "p5.Vector"
+ "name": "mode",
+ "description": "either GRID or AXES",
+ "type": "GRID|AXES"
}
- ],
- "return": {
- "description": "angle between the vectors.",
- "type": "Number"
- }
+ ]
},
{
- "line": 3811,
"params": [
{
- "name": "v1",
- "description": "<p>the first vector.</p>\n",
- "type": "p5.Vector"
+ "name": "mode",
+ "type": "GRID|AXES"
},
{
- "name": "v2",
- "description": "<p>the second vector.</p>\n",
- "type": "p5.Vector"
+ "name": "gridSize",
+ "description": "side length of the grid.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "gridDivisions",
+ "description": "number of divisions in the grid.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "xOff",
+ "description": "offset from origin along the x-axis.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "yOff",
+ "description": "offset from origin along the y-axis.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "zOff",
+ "description": "offset from origin along the z-axis.",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "static": 1,
- "return": {
- "description": "angle between the two vectors.",
- "type": "Number"
- }
- }
- ]
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 2538,
- "description": "<p>Calculates new <code>x</code>, <code>y</code>, and <code>z</code> components that are proportionally the\nsame distance between two vectors.</p>\n<p>The <code>amt</code> parameter is the amount to interpolate between the old vector and\nthe new vector. 0.0 keeps all components equal to the old vector's, 0.5 is\nhalfway between, and 1.0 sets all components equal to the new vector's.</p>\n<p>The static version of <code>lerp()</code>, as in <code>p5.Vector.lerp(v0, v1, 0.5)</code>,\nreturns a new <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change\nthe original.</p>\n",
- "itemtype": "method",
- "name": "lerp",
- "chainable": 1,
- "example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(1, 1, 1);\n let v1 = createVector(3, 3, 3);\n\n // Interpolate.\n v0.lerp(v1, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v0.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1, 1);\n\n // Interpolate.\n v.lerp(3, 3, 3, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 1, 1);\n let v1 = createVector(3, 3, 3);\n\n // Interpolate.\n let v2 = p5.Vector.lerp(v0, v1, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v2.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n let v2 = createVector(0, 30);\n\n // Interpolate.\n let v3 = p5.Vector.lerp(v1, v2, 0.5);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Draw the purple arrow.\n drawArrow(v0, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
- ],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
- "overloads": [
+ ]
+ },
{
- "line": 2538,
"params": [
{
- "name": "x",
- "description": "<p>x component.</p>\n",
+ "name": "mode",
+ "type": "GRID|AXES"
+ },
+ {
+ "name": "axesSize",
+ "description": "length of axes icon markers.",
+ "optional": 1,
"type": "Number"
},
{
- "name": "y",
- "description": "<p>y component.</p>\n",
+ "name": "xOff",
+ "optional": 1,
"type": "Number"
},
{
- "name": "z",
- "description": "<p>z component.</p>\n",
+ "name": "yOff",
+ "optional": 1,
"type": "Number"
},
{
- "name": "amt",
- "description": "<p>amount of interpolation between 0.0 (old vector)\n and 1.0 (new vector). 0.5 is halfway between.</p>\n",
+ "name": "zOff",
+ "optional": 1,
"type": "Number"
}
- ],
- "chainable": 1
+ ]
},
{
- "line": 2651,
"params": [
{
- "name": "v",
- "description": "<p><a href=\"#/p5.Vector\">p5.Vector</a> to lerp toward.</p>\n",
- "type": "p5.Vector"
+ "name": "gridSize",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "amt",
- "description": "",
+ "name": "gridDivisions",
+ "optional": 1,
"type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 3620,
- "params": [
+ },
{
- "name": "v1",
- "description": "",
- "type": "p5.Vector"
+ "name": "gridXOff",
+ "description": "grid offset from the origin along the x-axis.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "v2",
- "description": "",
- "type": "p5.Vector"
+ "name": "gridYOff",
+ "description": "grid offset from the origin along the y-axis.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "amt",
- "description": "",
+ "name": "gridZOff",
+ "description": "grid offset from the origin along the z-axis.",
+ "optional": 1,
"type": "Number"
},
{
- "name": "target",
- "description": "<p>The vector to receive the result</p>\n",
- "type": "p5.Vector",
- "optional": true
+ "name": "axesSize",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "axesXOff",
+ "description": "axes icon offset from the origin along the x-axis.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "axesYOff",
+ "description": "axes icon offset from the origin along the y-axis.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "axesZOff",
+ "description": "axes icon offset from the origin along the z-axis.",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "static": 1,
- "return": {
- "description": "The lerped value",
- "type": "p5.Vector"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Interaction"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 2667,
- "description": "<p>Calculates a new heading and magnitude that are between two vectors.</p>\n<p>The <code>amt</code> parameter is the amount to interpolate between the old vector and\nthe new vector. 0.0 keeps the heading and magnitude equal to the old\nvector's, 0.5 sets them halfway between, and 1.0 sets the heading and\nmagnitude equal to the new vector's.</p>\n<p><code>slerp()</code> differs from <a href=\"#/p5.Vector/lerp\">lerp()</a> because\nit interpolates magnitude. Calling <code>v0.slerp(v1, 0.5)</code> sets <code>v0</code>'s\nmagnitude to a value halfway between its original magnitude and <code>v1</code>'s.\nCalling <code>v0.lerp(v1, 0.5)</code> makes no such guarantee.</p>\n<p>The static version of <code>slerp()</code>, as in <code>p5.Vector.slerp(v0, v1, 0.5)</code>,\nreturns a new <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change\nthe original.</p>\n",
+ "name": "noDebugMode",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/interaction.js",
+ "line": 761,
"itemtype": "method",
- "name": "slerp",
- "return": {
- "description": "",
- "type": "p5.Vector"
- },
+ "description": "Turns off <a href=\"#/p5/debugMode\">debugMode()</a> in a 3D sketch.",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 0);\n\n // Prints \"3\" to the console.\n print(v0.mag());\n\n // Prints \"0\" to the console.\n print(v0.heading());\n\n // Create a p5.Vector object.\n let v1 = createVector(0, 1);\n\n // Prints \"1\" to the console.\n print(v1.mag());\n\n // Prints \"1.570...\" to the console.\n print(v1.heading());\n\n // Interpolate halfway between v0 and v1.\n v0.slerp(v1, 0.5);\n\n // Prints \"2\" to the console.\n print(v0.mag());\n\n // Prints \"0.785...\" to the console.\n print(v0.heading());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 0);\n\n // Prints \"3\" to the console.\n print(v0.mag());\n\n // Prints \"0\" to the console.\n print(v0.heading());\n\n // Create a p5.Vector object.\n let v1 = createVector(0, 1);\n\n // Prints \"1\" to the console.\n print(v1.mag());\n\n // Prints \"1.570...\" to the console.\n print(v1.heading());\n\n // Create a p5.Vector that's halfway between v0 and v1.\n let v3 = p5.Vector.slerp(v0, v1, 0.5);\n\n // Prints \"2\" to the console.\n print(v3.mag());\n\n // Prints \"0.785...\" to the console.\n print(v3.heading());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(20, 0);\n let v2 = createVector(-40, 0);\n\n // Create a p5.Vector that's halfway between v1 and v2.\n let v3 = p5.Vector.slerp(v1, v2, 0.5);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Draw the purple arrow.\n drawArrow(v0, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n debugMode();\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box. They disappear when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box. box(20, 40);\n}\n\n// Disable debug mode when the user double-clicks.\nfunction doubleClicked() {\n noDebugMode();\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 2667,
- "params": [
- {
- "name": "v",
- "description": "<p><a href=\"#/p5.Vector\">p5.Vector</a> to slerp toward.</p>\n",
- "type": "p5.Vector"
- },
- {
- "name": "amt",
- "description": "<p>amount of interpolation between 0.0 (old vector)\n and 1.0 (new vector). 0.5 is halfway between.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "",
- "type": "p5.Vector"
- }
- },
+ "params": []
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Interaction"
+ },
+ {
+ "name": "ambientLight",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/light.js",
+ "line": 192,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Creates a light that shines from all directions.</p>\n<p>Ambient light does not come from one direction. Instead, 3D shapes are\nlit evenly from all sides. Ambient lights are almost always used in\ncombination with other types of lights.</p>\n<p>There are three ways to call <code>ambientLight()</code> with optional parameters to\nset the light’s color.</p>\n<p>The first way to call <code>ambientLight()</code> has two parameters, <code>gray</code> and\n<code>alpha</code>. <code>alpha</code> is optional. Grayscale and alpha values between 0 and 255\ncan be passed to set the ambient light’s color, as in <code>ambientLight(50)</code> or\n<code>ambientLight(50, 30)</code>.</p>\n<p>The second way to call <code>ambientLight()</code> has one parameter, color. A\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color values, or a\nCSS color string, as in <code>ambientLight('magenta')</code>, can be passed to set the\nambient light’s color.</p>\n<p>The third way to call <code>ambientLight()</code> has four parameters, <code>v1</code>, <code>v2</code>,\n<code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA, HSBA, or HSLA values can be\npassed to set the ambient light’s colors, as in <code>ambientLight(255, 0, 0)</code>\nor <code>ambientLight(255, 0, 0, 30)</code>. Color values will be interpreted using\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to turn on the light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn against a gray background. The sphere appears to change color when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Use a grayscale value of 80.\n ambientLight(80);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the ambient light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use a p5.Color object.\n let c = color('orchid');\n ambientLight(c);\n\n // Draw the sphere.\n sphere();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use a CSS color string.\n ambientLight('#DA70D6');\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use RGB values\n ambientLight(218, 112, 214);\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 3652,
"params": [
{
"name": "v1",
- "description": "<p>old vector.</p>\n",
- "type": "p5.Vector"
+ "description": "red or hue value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
},
{
"name": "v2",
- "description": "<p>new vector.</p>\n",
- "type": "p5.Vector"
+ "description": "green or saturation value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
},
{
- "name": "amt",
- "description": "",
+ "name": "v3",
+ "description": "blue, brightness, or lightness value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
"type": "Number"
},
{
- "name": "target",
- "description": "<p>vector to receive the result.</p>\n",
- "type": "p5.Vector",
- "optional": true
+ "name": "alpha",
+ "description": "alpha (transparency) value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "static": 1,
- "return": {
- "description": "slerped vector between v1 and v2",
- "type": "p5.Vector"
- }
- }
- ]
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 2869,
- "description": "<p>Reflects a vector about a line in 2D or a plane in 3D.</p>\n<p>The orientation of the line or plane is described by a normal vector that\npoints away from the shape.</p>\n<p>The static version of <code>reflect()</code>, as in <code>p5.Vector.reflect(v, n)</code>,\nreturns a new <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change\nthe original.</p>\n",
- "itemtype": "method",
- "name": "reflect",
- "chainable": 1,
- "example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a normal vector.\n let n = createVector(0, 1);\n // Create a vector to reflect.\n let v = createVector(4, 6);\n\n // Reflect v about n.\n v.reflect(n);\n\n // Prints \"p5.Vector Object : [4, -6, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a normal vector.\n let n = createVector(0, 1);\n\n // Create a vector to reflect.\n let v0 = createVector(4, 6);\n\n // Create a reflected vector.\n let v1 = p5.Vector.reflect(v0, n);\n\n // Prints \"p5.Vector Object : [4, -6, 0]\" to the console.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\nfunction draw() {\n background(200);\n\n // Draw a vertical line.\n line(50, 0, 50, 100);\n\n // Create a normal vector.\n let n = createVector(1, 0);\n\n // Center.\n let v0 = createVector(50, 50);\n\n // Create a vector to reflect.\n let v1 = createVector(30, 40);\n\n // Create a reflected vector.\n let v2 = p5.Vector.reflect(v1, n);\n\n // Scale the normal vector for drawing.\n n.setMag(30);\n\n // Draw the black arrow.\n drawArrow(v0, n, 'black');\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
- ],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
- "overloads": [
+ ]
+ },
{
- "line": 2869,
"params": [
{
- "name": "surfaceNormal",
- "description": "<p><a href=\"#/p5.Vector\">p5.Vector</a>\n to reflect about.</p>\n",
- "type": "p5.Vector"
+ "name": "gray",
+ "description": "grayscale value between 0 and 255.",
+ "type": "Number"
+ },
+ {
+ "name": "alpha",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "chainable": 1
+ ]
},
{
- "line": 3826,
"params": [
{
- "name": "incidentVector",
- "description": "<p>vector to be reflected.</p>\n",
- "type": "p5.Vector"
- },
- {
- "name": "surfaceNormal",
- "description": "",
- "type": "p5.Vector"
- },
- {
- "name": "target",
- "description": "<p>vector to receive the result.</p>\n",
- "type": "p5.Vector",
- "optional": true
+ "name": "value",
+ "description": "color as a CSS string.",
+ "type": "String"
}
- ],
- "static": 1,
- "return": {
- "description": "the reflected vector",
- "type": "p5.Vector"
- }
- }
- ]
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 2979,
- "description": "<p>Returns the vector's components as an array of numbers.</p>\n",
- "itemtype": "method",
- "name": "array",
- "return": {
- "description": "array with the vector's components.",
- "type": "Number[]"
- },
- "example": [
- "\n<div class = \"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(20, 30);\n\n // Prints \"[20, 30, 0]\" to the console.\n print(v.array());\n}\n</code>\n</div>"
- ],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
- "overloads": [
+ ]
+ },
{
- "line": 2979,
- "params": [],
- "return": {
- "description": "array with the vector's components.",
- "type": "Number[]"
- }
+ "params": [
+ {
+ "name": "values",
+ "description": "color as an array of RGBA, HSBA, or HSLA\nvalues.",
+ "type": "Number[]"
+ }
+ ]
},
{
- "line": 3856,
"params": [
{
- "name": "v",
- "description": "<p>the vector to convert to an array</p>\n",
- "type": "p5.Vector"
+ "name": "color",
+ "description": "color as a <a href=\"#/p5.Color\">p5.Color</a> object.",
+ "type": "p5.Color"
}
- ],
- "static": 1,
- "return": {
- "description": "an Array with the 3 values",
- "type": "Number[]"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Lights"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 3001,
- "description": "<p>Checks whether all the vector's components are equal to another vector's.</p>\n<p><code>equals()</code> returns <code>true</code> if the vector's components are all the same as another\nvector's and <code>false</code> if not.</p>\n<p>The version of <code>equals()</code> with one parameter interprets it as another\n<a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n<p>The version of <code>equals()</code> with multiple parameters interprets them as the\ncomponents of another vector. Any missing parameters are assigned the value\n0.</p>\n<p>The static version of <code>equals()</code>, as in <code>p5.Vector.equals(v0, v1)</code>,\ninterprets both parameters as <a href=\"#/p5.Vector\">p5.Vector</a> objects.</p>\n",
+ "name": "specularColor",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/light.js",
+ "line": 443,
"itemtype": "method",
- "name": "equals",
- "return": {
- "description": "whether the vectors are equal.",
- "type": "Boolean"
- },
+ "chainable": 1,
+ "description": "<p>Sets the specular color for lights.</p>\n<p><code>specularColor()</code> affects lights that bounce off a surface in a preferred\ndirection. These lights include\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>, and\n<a href=\"#/p5/spotLight\">spotLight()</a>. The function helps to create\nhighlights on <a href=\"#/p5.Geometry\">p5.Geometry</a> objects that are\nstyled with <a href=\"#/p5/specularMaterial\">specularMaterial()</a>. If a\ngeometry does not use\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>, then\n<code>specularColor()</code> will have no effect.</p>\n<p>Note: <code>specularColor()</code> doesn’t affect lights that bounce in all\ndirections, including <a href=\"#/p5/ambientLight\">ambientLight()</a> and\n<a href=\"#/p5/imageLight\">imageLight()</a>.</p>\n<p>There are three ways to call <code>specularColor()</code> with optional parameters to\nset the specular highlight color.</p>\n<p>The first way to call <code>specularColor()</code> has two optional parameters, <code>gray</code>\nand <code>alpha</code>. Grayscale and alpha values between 0 and 255, as in\n<code>specularColor(50)</code> or <code>specularColor(50, 80)</code>, can be passed to set the\nspecular highlight color.</p>\n<p>The second way to call <code>specularColor()</code> has one optional parameter,\n<code>color</code>. A <a href=\"#/p5.Color\">p5.Color</a> object, an array of color\nvalues, or a CSS color string can be passed to set the specular highlight\ncolor.</p>\n<p>The third way to call <code>specularColor()</code> has four optional parameters, <code>v1</code>,\n<code>v2</code>, <code>v3</code>, and <code>alpha</code>. RGBA, HSBA, or HSLA values, as in\n<code>specularColor(255, 0, 0, 80)</code>, can be passed to set the specular highlight\ncolor. Color values will be interpreted using the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(10, 20, 30);\n let v1 = createVector(10, 20, 30);\n let v2 = createVector(0, 0, 0);\n\n // Prints \"true\" to the console.\n print(v0.equals(v1));\n\n // Prints \"false\" to the console.\n print(v0.equals(v2));\n}\n</code>\n</div>\n\n<div class = \"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(5, 10, 20);\n let v1 = createVector(5, 10, 20);\n let v2 = createVector(13, 10, 19);\n\n // Prints \"true\" to the console.\n print(v0.equals(v1.x, v1.y, v1.z));\n\n // Prints \"false\" to the console.\n print(v0.equals(v2.x, v2.y, v2.z));\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(10, 20, 30);\n let v1 = createVector(10, 20, 30);\n let v2 = createVector(0, 0, 0);\n\n // Prints \"true\" to the console.\n print(p5.Vector.equals(v0, v1));\n\n // Prints \"false\" to the console.\n print(p5.Vector.equals(v0, v2));\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // No specular color.\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to add a point light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the sphere.\n noStroke();\n specularColor(100);\n specularMaterial(255, 255, 255);\n\n // Control the light.\n if (isLit === true) {\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the point light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use a p5.Color object.\n let c = color('dodgerblue');\n specularColor(c);\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use a CSS color string.\n specularColor('#1E90FF');\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use RGB values.\n specularColor(30, 144, 255);\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector",
"overloads": [
{
- "line": 3001,
"params": [
{
- "name": "x",
- "description": "<p>x component of the vector.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "v1",
+ "description": "red or hue value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
},
{
- "name": "y",
- "description": "<p>y component of the vector.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "v2",
+ "description": "green or saturation value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
},
{
- "name": "z",
- "description": "<p>z component of the vector.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "v3",
+ "description": "blue, brightness, or lightness value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
}
- ],
- "return": {
- "description": "whether the vectors are equal.",
- "type": "Boolean"
- }
+ ]
},
{
- "line": 3074,
"params": [
{
- "name": "value",
- "description": "<p>vector to compare.</p>\n",
- "type": "p5.Vector|Array"
+ "name": "gray",
+ "description": "grayscale value between 0 and 255.",
+ "type": "Number"
}
- ],
- "return": {
- "description": "",
- "type": "Boolean"
- }
+ ]
},
{
- "line": 3869,
"params": [
{
- "name": "v1",
- "description": "<p>the first vector to compare</p>\n",
- "type": "p5.Vector|Array"
- },
+ "name": "value",
+ "description": "color as a CSS string.",
+ "type": "String"
+ }
+ ]
+ },
+ {
+ "params": [
{
- "name": "v2",
- "description": "<p>the second vector to compare</p>\n",
- "type": "p5.Vector|Array"
+ "name": "values",
+ "description": "color as an array of RGBA, HSBA, or HSLA\nvalues.",
+ "type": "Number[]"
}
- ],
- "static": 1,
- "return": {
- "description": "",
- "type": "Boolean"
- }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "color",
+ "description": "color as a <a href=\"#/p5.Color\">p5.Color</a> object.",
+ "type": "p5.Color"
+ }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Lights"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 3099,
- "description": "<p>Creates a new 2D vector from an angle.</p>\n",
+ "name": "directionalLight",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/light.js",
+ "line": 631,
"itemtype": "method",
- "name": "fromAngle",
- "static": 1,
- "params": [
+ "chainable": 1,
+ "description": "<p>Creates a light that shines in one direction.</p>\n<p>Directional lights don’t shine from a specific point. They’re like a sun\nthat shines from somewhere offscreen. The light’s direction is set using\nthree <code>(x, y, z)</code> values between -1 and 1. For example, setting a light’s\ndirection as <code>(1, 0, 0)</code> will light <a href=\"#/p5.Geometry\">p5.Geometry</a>\nobjects from the left since the light faces directly to the right. A\nmaximum of 5 directional lights can be active at once.</p>\n<p>There are four ways to call <code>directionalLight()</code> with parameters to set the\nlight’s color and direction.</p>\n<p>The first way to call <code>directionalLight()</code> has six parameters. The first\nthree parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the light’s color using the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>. The last three\nparameters, <code>x</code>, <code>y</code>, and <code>z</code>, set the light’s direction. For example,\n<code>directionalLight(255, 0, 0, 1, 0, 0)</code> creates a red <code>(255, 0, 0)</code> light\nthat shines to the right <code>(1, 0, 0)</code>.</p>\n<p>The second way to call <code>directionalLight()</code> has four parameters. The first\nthree parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the light’s color using the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>. The last parameter,\n<code>direction</code> sets the light’s direction using a\n<a href=\"#/p5.Geometry\">p5.Geometry</a> object. For example,\n<code>directionalLight(255, 0, 0, lightDir)</code> creates a red <code>(255, 0, 0)</code> light\nthat shines in the direction the <code>lightDir</code> vector points.</p>\n<p>The third way to call <code>directionalLight()</code> has four parameters. The first\nparameter, <code>color</code>, sets the light’s color using a\n<a href=\"#/p5.Color\">p5.Color</a> object or an array of color values. The\nlast three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set the light’s direction. For\nexample, <code>directionalLight(myColor, 1, 0, 0)</code> creates a light that shines\nto the right <code>(1, 0, 0)</code> with the color value of <code>myColor</code>.</p>\n<p>The fourth way to call <code>directionalLight()</code> has two parameters. The first\nparameter, <code>color</code>, sets the light’s color using a\n<a href=\"#/p5.Color\">p5.Color</a> object or an array of color values. The\nsecond parameter, <code>direction</code>, sets the light’s direction using a\n<a href=\"#/p5.Color\">p5.Color</a> object. For example,\n<code>directionalLight(myColor, lightDir)</code> creates a light that shines in the\ndirection the <code>lightDir</code> vector points with the color value of <code>myColor</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the directional light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Add a red directional light from above.\n // Use RGB values and XYZ directions.\n directionalLight(255, 0, 0, 0, 1, 0);\n }\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red directional light from above.\n // Use a p5.Color object and XYZ directions.\n let c = color(255, 0, 0);\n directionalLight(c, 0, 1, 0);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red directional light from above.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightDir = createVector(0, 1, 0);\n directionalLight(c, lightDir);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "angle",
- "description": "<p>desired angle, in radians. Unaffected by <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "v1",
+ "description": "red or hue value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "description": "green or saturation value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "description": "blue, brightness, or lightness value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "x",
+ "description": "x-component of the light's direction between -1 and 1.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-component of the light's direction between -1 and 1.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z-component of the light's direction between -1 and 1.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "length",
- "description": "<p>length of the new vector (defaults to 1).</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "v1",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "type": "Number"
+ },
+ {
+ "name": "direction",
+ "description": "direction of the light as a\n<a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "color",
+ "description": "color as a <a href=\"#/p5.Color\">p5.Color</a> object,\nan array of color values, or as a CSS string.",
+ "type": "p5.Color|Number[]|String"
+ },
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "color",
+ "type": "p5.Color|Number[]|String"
+ },
+ {
+ "name": "direction",
+ "type": "p5.Vector"
+ }
+ ]
}
],
- "return": {
- "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
- "type": "p5.Vector"
- },
- "example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngle(0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngle(0, 30);\n\n // Prints \"p5.Vector Object : [30, 0, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black arrow extends from the center of a gray square. It points to the right.');\n}\nfunction draw() {\n background(200);\n\n // Create a p5.Vector to the center.\n let v0 = createVector(50, 50);\n\n // Create a p5.Vector with an angle 0 and magnitude 30.\n let v1 = p5.Vector.fromAngle(0, 30);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
- ],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Lights"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 3174,
- "description": "<p>Creates a new 3D vector from a pair of ISO spherical angles.</p>\n",
+ "name": "pointLight",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/light.js",
+ "line": 874,
"itemtype": "method",
- "name": "fromAngles",
- "static": 1,
- "params": [
+ "chainable": 1,
+ "description": "<p>Creates a light that shines from a point in all directions.</p>\n<p>Point lights are like light bulbs that shine in all directions. They can be\nplaced at different positions to achieve different lighting effects. A\nmaximum of 5 point lights can be active at once.</p>\n<p>There are four ways to call <code>pointLight()</code> with parameters to set the\nlight’s color and position.</p>\n<p>The first way to call <code>pointLight()</code> has six parameters. The first three\nparameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the light’s color using the current\n<a href=\"#/p5/colorMode\">colorMode()</a>. The last three parameters, <code>x</code>,\n<code>y</code>, and <code>z</code>, set the light’s position. For example,\n<code>pointLight(255, 0, 0, 50, 0, 0)</code> creates a red <code>(255, 0, 0)</code> light that\nshines from the coordinates <code>(50, 0, 0)</code>.</p>\n<p>The second way to call <code>pointLight()</code> has four parameters. The first three\nparameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the light’s color using the current\n<a href=\"#/p5/colorMode\">colorMode()</a>. The last parameter, position sets\nthe light’s position using a <a href=\"#/p5.Vector\">p5.Vector</a> object.\nFor example, <code>pointLight(255, 0, 0, lightPos)</code> creates a red <code>(255, 0, 0)</code>\nlight that shines from the position set by the <code>lightPos</code> vector.</p>\n<p>The third way to call <code>pointLight()</code> has four parameters. The first\nparameter, <code>color</code>, sets the light’s color using a\n<a href=\"#/p5.Color\">p5.Color</a> object or an array of color values. The\nlast three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set the light’s position. For\nexample, <code>directionalLight(myColor, 50, 0, 0)</code> creates a light that shines\nfrom the coordinates <code>(50, 0, 0)</code> with the color value of <code>myColor</code>.</p>\n<p>The fourth way to call <code>pointLight()</code> has two parameters. The first\nparameter, <code>color</code>, sets the light’s color using a\n<a href=\"#/p5.Color\">p5.Color</a> object or an array of color values. The\nsecond parameter, <code>position</code>, sets the light’s position using a\n<a href=\"#/p5.Vector\">p5.Vector</a> object. For example,\n<code>directionalLight(myColor, lightPos)</code> creates a light that shines from the\nposition set by the <code>lightPos</code> vector with the color value of <code>myColor</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the point light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Add a red point light from above.\n // Use RGB values and XYZ coordinates.\n pointLight(255, 0, 0, 0, -150, 0);\n }\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the point light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light from above.\n // Use a p5.Color object and XYZ directions.\n let c = color(255, 0, 0);\n pointLight(c, 0, -150, 0);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light from above.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightPos = createVector(0, -150, 0);\n pointLight(c, lightPos);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Four spheres arranged in a square and drawn on a gray background. The spheres appear bright red toward the center of the square. The color gets darker toward the corners of the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light that points to the center of the scene.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightPos = createVector(0, 0, 65);\n pointLight(c, lightPos);\n\n // Style the spheres.\n noStroke();\n\n // Draw a sphere up and to the left.\n push();\n translate(-25, -25, 25);\n sphere(10);\n pop();\n\n // Draw a box up and to the right.\n push();\n translate(25, -25, 25);\n sphere(10);\n pop();\n\n // Draw a sphere down and to the left.\n push();\n translate(-25, 25, 25);\n sphere(10);\n pop();\n\n // Draw a box down and to the right.\n push();\n translate(25, 25, 25);\n sphere(10);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "theta",
- "description": "<p>polar angle in radians (zero is up).</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "v1",
+ "description": "red or hue value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "description": "green or saturation value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "description": "blue, brightness, or lightness value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "x",
+ "description": "x-coordinate of the light.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the light.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z-coordinate of the light.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "phi",
- "description": "<p>azimuthal angle in radians\n (zero is out of the screen).</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "v1",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "type": "Number"
+ },
+ {
+ "name": "position",
+ "description": "position of the light as a\n<a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ }
+ ]
},
{
- "name": "length",
- "description": "<p>length of the new vector (defaults to 1).</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "color",
+ "description": "color as a <a href=\"#/p5.Color\">p5.Color</a> object,\nan array of color values, or a CSS string.",
+ "type": "p5.Color|Number[]|String"
+ },
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "color",
+ "type": "p5.Color|Number[]|String"
+ },
+ {
+ "name": "position",
+ "type": "p5.Vector"
+ }
+ ]
}
],
- "return": {
- "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
- "type": "p5.Vector"
- },
- "example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngles(0, 0);\n\n // Prints \"p5.Vector Object : [0, -1, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A light shines on a pink sphere as it orbits.');\n}\n\nfunction draw() {\n background(0);\n\n // Calculate the ISO angles.\n let theta = frameCount * 0.05;\n let phi = 0;\n\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngles(theta, phi, 100);\n\n // Create a point light using the p5.Vector.\n let c = color('deeppink');\n pointLight(c, v);\n\n // Style the sphere.\n fill(255);\n noStroke();\n\n // Draw the sphere.\n sphere(35);\n}\n</code>\n</div>"
- ],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Lights"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 3243,
- "description": "<p>Creates a new 2D unit vector with a random heading.</p>\n",
+ "name": "imageLight",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/light.js",
+ "line": 940,
"itemtype": "method",
- "name": "random2D",
- "static": 1,
- "return": {
- "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
- "type": "p5.Vector"
- },
+ "description": "<p>Creates an ambient light from an image.</p>\n<p><code>imageLight()</code> simulates a light shining from all directions. The effect is\nlike placing the sketch at the center of a giant sphere that uses the image\nas its texture. The image's diffuse light will be affected by\n<a href=\"#/p5/fill\">fill()</a> and the specular reflections will be\naffected by <a href=\"#/p5/specularMaterial\">specularMaterial()</a> and\n<a href=\"#/p5/shininess\">shininess()</a>.</p>\n<p>The parameter, <code>img</code>, is the <a href=\"#/p5.Image\">p5.Image</a> object to\nuse as the light source.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.random2D();\n\n // Prints \"p5.Vector Object : [x, y, 0]\" to the console\n // where x and y are small random numbers.\n print(v.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(1);\n\n describe('A black arrow in extends from the center of a gray square. It changes direction once per second.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a p5.Vector to the center.\n let v0 = createVector(50, 50);\n\n // Create a random p5.Vector.\n let v1 = p5.Vector.random2D();\n\n // Scale v1 for drawing.\n v1.mult(30);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ "<div class=\"notest\">\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\nasync function setup() {\n // Load an image and create a p5.Image object.\n img = await loadImage('assets/outdoor_spheremap.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');\n}\n\nfunction draw() {\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the image as a panorama (360˚ background).\n panorama(img);\n\n // Add a soft ambient light.\n ambientLight(50);\n\n // Add light from the image.\n imageLight(img);\n\n // Style the sphere.\n specularMaterial(20);\n shininess(100);\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "img",
+ "description": "image to use as the light source.",
+ "type": "p5.image"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Lights"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 3311,
- "description": "<p>Creates a new 3D unit vector with a random heading.</p>\n",
+ "name": "panorama",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/light.js",
+ "line": 994,
"itemtype": "method",
- "name": "random3D",
- "static": 1,
- "return": {
- "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
- "type": "p5.Vector"
- },
+ "description": "<p>Creates an immersive 3D background.</p>\n<p><code>panorama()</code> transforms images containing 360˚ content, such as maps or\nHDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the\nspace requires changing the camera's perspective with functions such as\n<a href=\"#/p5/orbitControl\">orbitControl()</a> or\n<a href=\"#/p5/camera\">camera()</a>.</p>\n",
"example": [
- "\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.random3D();\n\n // Prints \"p5.Vector Object : [x, y, z]\" to the console\n // where x, y, and z are small random numbers.\n print(v.toString());\n}\n</code>\n</div>"
+ "<div class=\"notest\">\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\nasync function setup() {\n // Load an image and create a p5.Image object.\n img = await loadImage('assets/outdoor_spheremap.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');\n}\n\nfunction draw() {\n // Add the panorama.\n panorama(img);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Use the image as a light source.\n imageLight(img);\n\n // Style the sphere.\n noStroke();\n specularMaterial(50);\n shininess(200);\n metalness(100);\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>"
],
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3431,
- "description": "<p>Multiplies a vector by a scalar and returns a new vector.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3487,
- "description": "<p>Rotates the vector (only 2D vectors) by the given angle; magnitude remains the same. Returns a new vector.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3516,
- "description": "<p>Divides a vector by a scalar and returns a new vector.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3573,
- "description": "<p>Calculates the dot product of two vectors.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3587,
- "description": "<p>Calculates the cross product of two vectors.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3601,
- "description": "<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3616,
- "description": "<p>Linear interpolate a vector to another vector and return the result as a\nnew vector.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3646,
- "description": "<p>Performs spherical linear interpolation with the other vector\nand returns the resulting vector.\nThis works in both 3D and 2D. As for 2D, the result of slerping\nbetween 2D vectors is always a 2D vector.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3678,
- "description": "<p>Calculates the magnitude (length) of the vector and returns the result as\na float (this is simply the equation <code>sqrt(x*x + y*y + z*z)</code>.)</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3692,
- "description": "<p>Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation <em>(x*x + y*y + z*z)</em>.)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3708,
- "description": "<p>Normalize the vector to length 1 (make it a unit vector).</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3734,
- "description": "<p>Limit the magnitude of the vector to the value used for the <b>max</b>\nparameter.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3762,
- "description": "<p>Set the magnitude of the vector to the value used for the <b>len</b>\nparameter.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3790,
- "description": "<p>Calculate the angle of rotation for this vector (only 2D vectors).\np5.Vectors created using <a href=\"#/p5/createVector\">createVector()</a>\nwill take the current <a href=\"#/p5/angleMode\">angleMode</a> into\nconsideration, and give the angle in radians or degrees accordingly.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3806,
- "description": "<p>Calculates and returns the angle between two vectors. This function will take\nthe <a href=\"#/p5/angleMode\">angleMode</a> on v1 into consideration, and\ngive the angle in radians or degrees accordingly.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3822,
- "description": "<p>Reflect a vector about a normal to a line in 2D, or about a normal to a\nplane in 3D.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3850,
- "description": "<p>Return a representation of this vector as a float array. This is only\nfor temporary use. If used in any other fashion, the contents should be\ncopied by using the <b>p5.Vector.<a href=\"#/p5.Vector/copy\">copy()</a></b>\nmethod to copy into your own vector.</p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/p5.Vector.js",
- "line": 3866,
- "description": "<p>Equality check against a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n",
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "img",
+ "description": "360˚ image to use as the background.",
+ "type": "p5.Image"
+ }
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Lights"
},
{
- "file": "src/math/p5.Vector.js",
- "line": 3892,
- "description": "<p>Replaces the components of a <a href=\"#/p5.Vector\">p5.Vector</a> that are very close to zero with zero.</p>\n<p>In computers, handling numbers with decimals can give slightly imprecise answers due to the way those numbers are represented.\nThis can make it hard to check if a number is zero, as it may be close but not exactly zero.\nThis method rounds very close numbers to zero to make those checks easier</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON\">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON</a></p>\n",
+ "name": "lights",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/light.js",
+ "line": 1073,
"itemtype": "method",
- "name": "clampToZero",
- "return": {
- "description": "with components very close to zero replaced with zero.",
- "type": "p5.Vector"
- },
"chainable": 1,
- "class": "p5.Vector",
- "module": "Math",
- "submodule": "Vector"
- },
- {
- "file": "src/math/random.js",
- "line": 37,
- "description": "<p>Sets the seed value for the <a href=\"#/p5/random\">random()</a> and\n<a href=\"#/p5/randomGaussian\">randomGaussian()</a> functions.</p>\n<p>By default, <a href=\"#/p5/random\">random()</a> and\n<a href=\"#/p5/randomGaussian\">randomGaussian()</a> produce different\nresults each time a sketch is run. Calling <code>randomSeed()</code> with a constant\nargument, such as <code>randomSeed(99)</code>, makes these functions produce the same\nresults each time a sketch is run.</p>\n",
- "itemtype": "method",
- "name": "randomSeed",
- "params": [
+ "description": "<p>Places an ambient and directional light in the scene.\nThe lights are set to ambientLight(128, 128, 128) and\ndirectionalLight(128, 128, 128, 0, 0, -1).</p>\n<p>Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the lights.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box drawn against a gray background. The quality of the light changes when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the lights.\n if (isLit === true) {\n lights();\n }\n\n // Draw the box.\n box();\n}\n\n// Turn on the lights when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box drawn against a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n ambientLight(128, 128, 128);\n directionalLight(128, 128, 128, 0, 0, -1);\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "seed",
- "description": "<p>seed value.</p>\n",
- "type": "Number"
+ "params": []
}
],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the white circle.\n circle(x, y, 10);\n\n // Set a random seed for consistency.\n randomSeed(99);\n\n // Get random coordinates.\n x = random(0, 100);\n y = random(0, 100);\n\n // Draw the black circle.\n fill(0);\n circle(x, y, 10);\n\n describe('A white circle appears at a random position. A black circle appears at (27.4, 25.8).');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Random"
+ "static": false,
+ "module": "3D",
+ "submodule": "Lights"
},
{
- "file": "src/math/random.js",
- "line": 86,
- "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(['🦁', '🐯', '🐻'])</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",
+ "name": "lightFalloff",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/light.js",
+ "line": 1145,
"itemtype": "method",
- "name": "random",
- "return": {
- "description": "random number.",
- "type": "Number"
- },
+ "chainable": 1,
+ "description": "<p>Sets the falloff rate for <a href=\"#/p5/pointLight\">pointLight()</a>\nand <a href=\"#/p5/spotLight\">spotLight()</a>.</p>\n<p>A light’s falloff describes the intensity of its beam at a distance. For\nexample, a lantern has a slow falloff, a flashlight has a medium falloff,\nand a laser pointer has a sharp falloff.</p>\n<p><code>lightFalloff()</code> has three parameters, <code>constant</code>, <code>linear</code>, and\n<code>quadratic</code>. They’re numbers used to calculate falloff at a distance, <code>d</code>,\nas follows:</p>\n<p><code>falloff = 1 / (constant + d * linear + (d * d) * quadratic)</code></p>\n<p>Note: <code>constant</code>, <code>linear</code>, and <code>quadratic</code> should always be set to values\ngreater than 0.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw a point.\n strokeWeight(5);\n point(x, y);\n\n describe('A black dot appears in a random position on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(100);\n let y = random(100);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n\n describe('A black dot appears in a random position on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of emoji strings.\n let animals = ['🦁', '🐯', '🐻'];\n\n // Choose a random element from the array.\n let choice = random(animals);\n\n // Style the text.\n textAlign(CENTER);\n textSize(20);\n\n // Display the emoji.\n text(choice, 50, 50);\n\n describe('An animal face is displayed at random. Either a lion, tiger, or bear.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A black dot moves around randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(100);\n let y = random(100);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A black dot moves around randomly in the middle of a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Get random coordinates between 45 and 55.\n let x = random(45, 55);\n let y = random(45, 55);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A black dot moves around randomly leaving a trail.');\n}\n\nfunction draw() {\n // Update x and y randomly.\n x += random(-1, 1);\n y += random(-1, 1);\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to change the falloff rate.\n\nlet useFalloff = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn against a gray background. The intensity of the light changes when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Set the light falloff.\n if (useFalloff === true) {\n lightFalloff(2, 0, 0);\n }\n\n // Add a white point light from the front.\n pointLight(255, 255, 255, 0, 0, 100);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Change the falloff value when the user double-clicks.\nfunction doubleClicked() {\n useFalloff = true;\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Math",
- "submodule": "Random",
"overloads": [
{
- "line": 86,
"params": [
{
- "name": "min",
- "description": "<p>lower bound (inclusive).</p>\n",
- "type": "Number",
- "optional": true
+ "name": "constant",
+ "description": "constant value for calculating falloff.",
+ "type": "Number"
},
{
- "name": "max",
- "description": "<p>upper bound (exclusive).</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "return": {
- "description": "random number.",
- "type": "Number"
- }
- },
- {
- "line": 259,
- "params": [
+ "name": "linear",
+ "description": "linear value for calculating falloff.",
+ "type": "Number"
+ },
{
- "name": "choices",
- "description": "<p>array to choose from.</p>\n",
- "type": "Array"
+ "name": "quadratic",
+ "description": "quadratic value for calculating falloff.",
+ "type": "Number"
}
- ],
- "return": {
- "description": "random element from the array.",
- "type": "*"
- }
- }
- ]
- },
- {
- "file": "src/math/random.js",
- "line": 292,
- "description": "<p>Returns a random number fitting a Gaussian, or normal, distribution.</p>\n<p>Normal distributions look like bell curves when plotted. Values from a\nnormal distribution cluster around a central value called the mean. The\ncluster's standard deviation describes its spread.</p>\n<p>By default, <code>randomGaussian()</code> produces different results each time a\nsketch runs. The <a href=\"#/p5/randomSeed\">randomSeed()</a> function can be\nused to generate the same sequence of numbers each time a sketch runs.</p>\n<p>There's no minimum or maximum value that <code>randomGaussian()</code> might return.\nValues far from the mean are very unlikely and values near the mean are\nvery likely.</p>\n<p>The version of <code>randomGaussian()</code> with no parameters returns values with a\nmean of 0 and standard deviation of 1.</p>\n<p>The version of <code>randomGaussian()</code> with one parameter interprets the\nargument passed as the mean. The standard deviation is 1.</p>\n<p>The version of <code>randomGaussian()</code> with two parameters interprets the first\nargument passed as the mean and the second as the standard deviation.</p>\n",
- "itemtype": "method",
- "name": "randomGaussian",
- "params": [
- {
- "name": "mean",
- "description": "<p>mean.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "sd",
- "description": "<p>standard deviation.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "return": {
- "description": "random number.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n 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.');\n}\n\nfunction draw() {\n // Style the circles.\n noStroke();\n fill(0, 10);\n\n // Uniform distribution between 0 and 100.\n let x = random(100);\n let y = 25;\n circle(x, y, 5);\n\n // Gaussian distribution with a mean of 50 and sd of 1.\n x = randomGaussian(50);\n y = 50;\n circle(x, y, 5);\n\n // Gaussian distribution with a mean of 50 and sd of 10.\n x = randomGaussian(50, 10);\n y = 75;\n circle(x, y, 5);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Math",
- "submodule": "Random"
- },
- {
- "file": "src/math/trigonometry.js",
- "line": 18,
- "description": "<p>Calculates the arc cosine of a number.</p>\n<p><code>acos()</code> is the inverse of <a href=\"#/p5/cos\">cos()</a>. It expects\narguments in the range -1 to 1. By default, <code>acos()</code> returns values in the\nrange 0 to π (about 3.14). If the\n<a href=\"#/p5/angleMode\">angleMode()</a> is <code>DEGREES</code>, then values are\nreturned in the range 0 to 180.</p>\n",
- "itemtype": "method",
- "name": "acos",
- "params": [
- {
- "name": "value",
- "description": "<p>value whose arc cosine is to be returned.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "arc cosine of the given value.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate cos() and acos() values.\n let a = PI;\n let c = cos(a);\n let ac = acos(c);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(c, 3)}`, 35, 50);\n text(`${round(ac, 3)}`, 35, 75);\n\n describe('The numbers 3.142, -1, and 3.142 written on separate rows.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate cos() and acos() values.\n let a = PI + QUARTER_PI;\n let c = cos(a);\n let ac = acos(c);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(c, 3)}`, 35, 50);\n text(`${round(ac, 3)}`, 35, 75);\n\n describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Math",
- "submodule": "Trigonometry"
- },
- {
- "file": "src/math/trigonometry.js",
- "line": 80,
- "description": "<p>Calculates the arc sine of a number.</p>\n<p><code>asin()</code> is the inverse of <a href=\"#/p5/sin\">sin()</a>. It expects input\nvalues in the range of -1 to 1. By default, <code>asin()</code> returns values in the\nrange -π ÷ 2 (about -1.57) to π ÷ 2 (about 1.57). If\nthe <a href=\"#/p5/angleMode\">angleMode()</a> is <code>DEGREES</code> then values are\nreturned in the range -90 to 90.</p>\n",
- "itemtype": "method",
- "name": "asin",
- "params": [
- {
- "name": "value",
- "description": "<p>value whose arc sine is to be returned.</p>\n",
- "type": "Number"
+ ]
}
],
- "return": {
- "description": "arc sine of the given value.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate sin() and asin() values.\n let a = PI / 3;\n let s = sin(a);\n let as = asin(s);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(s, 3)}`, 35, 50);\n text(`${round(as, 3)}`, 35, 75);\n\n describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate sin() and asin() values.\n let a = PI + PI / 3;\n let s = sin(a);\n let as = asin(s);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(s, 3)}`, 35, 50);\n text(`${round(as, 3)}`, 35, 75);\n\n describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Math",
- "submodule": "Trigonometry"
+ "static": false,
+ "module": "3D",
+ "submodule": "Lights"
},
{
- "file": "src/math/trigonometry.js",
- "line": 142,
- "description": "<p>Calculates the arc tangent of a number.</p>\n<p><code>atan()</code> is the inverse of <a href=\"#/p5/tan\">tan()</a>. It expects input\nvalues in the range of -Infinity to Infinity. By default, <code>atan()</code> returns\nvalues in the range -π ÷ 2 (about -1.57) to π ÷ 2\n(about 1.57). If the <a href=\"#/p5/angleMode\">angleMode()</a> is <code>DEGREES</code>\nthen values are returned in the range -90 to 90.</p>\n",
+ "name": "spotLight",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/light.js",
+ "line": 1364,
"itemtype": "method",
- "name": "atan",
- "params": [
- {
- "name": "value",
- "description": "<p>value whose arc tangent is to be returned.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "arc tangent of the given value.",
- "type": "Number"
- },
+ "chainable": 1,
+ "description": "<p>Creates a light that shines from a point in one direction.</p>\n<p>Spot lights are like flashlights that shine in one direction creating a\ncone of light. The shape of the cone can be controlled using the angle and\nconcentration parameters. A maximum of 5 spot lights can be active at once.</p>\n<p>There are eight ways to call <code>spotLight()</code> with parameters to set the\nlight’s color, position, direction. For example,\n<code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0)</code> creates a red <code>(255, 0, 0)</code> light\nat the origin <code>(0, 0, 0)</code> that points to the right <code>(1, 0, 0)</code>.</p>\n<p>The <code>angle</code> parameter is optional. It sets the radius of the light cone.\nFor example, <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16)</code> creates a\nred <code>(255, 0, 0)</code> light at the origin <code>(0, 0, 0)</code> that points to the right\n<code>(1, 0, 0)</code> with an angle of <code>PI / 16</code> radians. By default, <code>angle</code> is\n<code>PI / 3</code> radians.</p>\n<p>The <code>concentration</code> parameter is also optional. It focuses the light\ntowards the center of the light cone. For example,\n<code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50)</code> creates a red\n<code>(255, 0, 0)</code> light at the origin <code>(0, 0, 0)</code> that points to the right\n<code>(1, 0, 0)</code> with an angle of <code>PI / 16</code> radians at concentration of 50. By\ndefault, <code>concentration</code> is 100.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate tan() and atan() values.\n let a = PI / 3;\n let t = tan(a);\n let at = atan(t);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(t, 3)}`, 35, 50);\n text(`${round(at, 3)}`, 35, 75);\n\n describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate tan() and atan() values.\n let a = PI + PI / 3;\n let t = tan(a);\n let at = atan(t);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(t, 3)}`, 35, 50);\n text(`${round(at, 3)}`, 35, 75);\n\n describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to adjust the spotlight.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Control the spotlight.\n if (isLit === true) {\n // Add a red spot light that shines into the screen.\n // Set its angle to PI / 32 radians.\n spotLight(255, 0, 0, 0, 0, 100, 0, 0, -1, PI / 32);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the spotlight when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to adjust the spotlight.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Control the spotlight.\n if (isLit === true) {\n // Add a red spot light that shines into the screen.\n // Set its angle to PI / 3 radians (default).\n // Set its concentration to 1000.\n let c = color(255, 0, 0);\n let position = createVector(0, 0, 100);\n let direction = createVector(0, 0, -1);\n spotLight(c, position, direction, PI / 3, 1000);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the spotlight when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Math",
- "submodule": "Trigonometry"
- },
- {
- "file": "src/math/trigonometry.js",
- "line": 204,
- "description": "<p>Calculates the angle formed by a point, the origin, and the positive\nx-axis.</p>\n<p><code>atan2()</code> is most often used for orienting geometry to the mouse's\nposition, as in <code>atan2(mouseY, mouseX)</code>. The first parameter is the point's\ny-coordinate and the second parameter is its x-coordinate.</p>\n<p>By default, <code>atan2()</code> returns values in the range\n-π (about -3.14) to π (3.14). If the\n<a href=\"#/p5/angleMode\">angleMode()</a> is <code>DEGREES</code>, then values are\nreturned in the range -180 to 180.</p>\n",
- "itemtype": "method",
- "name": "atan2",
- "params": [
- {
- "name": "y",
- "description": "<p>y-coordinate of the point.</p>\n",
- "type": "Number"
- },
+ "overloads": [
{
- "name": "x",
- "description": "<p>x-coordinate of the point.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "arc tangent of the given point.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle at the top-left of the canvas rotates with mouse movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the angle between the mouse\n // and the origin.\n let a = atan2(mouseY, mouseX);\n\n // Rotate.\n rotate(a);\n\n // Draw the shape.\n rect(0, 0, 60, 10);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle at the center of the canvas rotates with mouse movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Get the mouse's coordinates relative to the origin.\n let x = mouseX - 50;\n let y = mouseY - 50;\n\n // Calculate the angle between the mouse and the origin.\n let a = atan2(y, x);\n\n // Rotate.\n rotate(a);\n\n // Draw the shape.\n rect(-30, -5, 60, 10);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Math",
- "submodule": "Trigonometry"
- },
- {
- "file": "src/math/trigonometry.js",
- "line": 281,
- "description": "<p>Calculates the cosine of an angle.</p>\n<p><code>cos()</code> is useful for many geometric tasks in creative coding. The values\nreturned oscillate between -1 and 1 as the input angle increases. <code>cos()</code>\ncalculates the cosine of an angle, using radians by default, or according to\nif <a href=\"#/p5/angleMode\">angleMode()</a> setting (RADIANS or DEGREES).</p>\n",
- "itemtype": "method",
- "name": "cos",
- "params": [
- {
- "name": "angle",
- "description": "<p>the angle, in radians by default, or according to\nif <a href=\"/reference/p5/angleMode/\">angleMode()</a> setting (RADIANS or DEGREES).</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "cosine of the angle.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.05) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form a wave pattern.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 30 * cos(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form an infinity symbol.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.1) + 50;\n let y = 10 * sin(frameCount * 0.2) + 50;\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Math",
- "submodule": "Trigonometry"
- },
- {
- "file": "src/math/trigonometry.js",
- "line": 363,
- "description": "<p>Calculates the sine of an angle.</p>\n<p><code>sin()</code> is useful for many geometric tasks in creative coding. The values\nreturned oscillate between -1 and 1 as the input angle increases. <code>sin()</code>\ncalculates the sine of an angle, using radians by default, or according to\nif <a href=\"#/p5/angleMode\">angleMode()</a> setting (RADIANS or DEGREES).</p>\n",
- "itemtype": "method",
- "name": "sin",
- "params": [
- {
- "name": "angle",
- "description": "<p>the angle, in radians by default, or according to\nif <a href=\"/reference/p5/angleMode/\">angleMode()</a> setting (RADIANS or DEGREES).</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "sine of the angle.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates up and down.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 50;\n let y = 30 * sin(frameCount * 0.05) + 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form a wave pattern.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 30 * sin(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form an infinity symbol.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.1) + 50;\n let y = 10 * sin(frameCount * 0.2) + 50;\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Math",
- "submodule": "Trigonometry"
- },
- {
- "file": "src/math/trigonometry.js",
- "line": 445,
- "description": "<p>Calculates the tangent of an angle.</p>\n<p><code>tan()</code> is useful for many geometric tasks in creative coding. The values\nreturned range from -Infinity to Infinity and repeat periodically as the\ninput angle increases. <code>tan()</code> calculates the tan of an angle, using radians\nby default, or according to\nif <a href=\"#/p5/angleMode\">angleMode()</a> setting (RADIANS or DEGREES).</p>\n",
- "itemtype": "method",
- "name": "tan",
- "params": [
- {
- "name": "angle",
- "description": "<p>the angle, in radians by default, or according to\nif <a href=\"/reference/p5/angleMode/\">angleMode()</a> setting (RADIANS or DEGREES).</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "tangent of the angle.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n 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.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 5 * tan(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Math",
- "submodule": "Trigonometry"
- },
- {
- "file": "src/math/trigonometry.js",
- "line": 485,
- "description": "<p>Converts an angle measured in radians to its value in degrees.</p>\n<p>Degrees and radians are both units for measuring angles. There are 360˚ in\none full rotation. A full rotation is 2 × π (about 6.28) radians.</p>\n<p>The same angle can be expressed in with either unit. For example, 90° is a\nquarter of a full rotation. The same angle is 2 × π ÷ 4\n(about 1.57) radians.</p>\n",
- "itemtype": "method",
- "name": "degrees",
- "params": [
- {
- "name": "radians",
- "description": "<p>radians value to convert to degrees.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "converted angle.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the angle conversion.\n let rad = QUARTER_PI;\n let deg = degrees(rad);\n\n // Display the conversion.\n text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);\n\n describe('The text \"0.79 rad = 45˚\".');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Math",
- "submodule": "Trigonometry"
- },
- {
- "file": "src/math/trigonometry.js",
- "line": 521,
- "description": "<p>Converts an angle measured in degrees to its value in radians.</p>\n<p>Degrees and radians are both units for measuring angles. There are 360˚ in\none full rotation. A full rotation is 2 × π (about 6.28) radians.</p>\n<p>The same angle can be expressed in with either unit. For example, 90° is a\nquarter of a full rotation. The same angle is 2 × π ÷ 4\n(about 1.57) radians.</p>\n",
- "itemtype": "method",
- "name": "radians",
- "params": [
- {
- "name": "degrees",
- "description": "<p>degree value to convert to radians.</p>\n",
- "type": "Number"
- }
- ],
- "return": {
- "description": "converted angle.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Caclulate the angle conversion.\n let deg = 45;\n let rad = radians(deg);\n\n // Display the angle conversion.\n text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);\n\n describe('The text \"45˚ = 0.785 rad\".');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Math",
- "submodule": "Trigonometry"
- },
- {
- "file": "src/math/trigonometry.js",
- "line": 557,
- "description": "<p>Changes the unit system used to measure angles.</p>\n<p>Degrees and radians are both units for measuring angles. There are 360˚ in\none full rotation. A full rotation is 2 × π (about 6.28) radians.</p>\n<p>Functions such as <a href=\"#/p5/rotate\">rotate()</a> and\n<a href=\"#/p5/sin\">sin()</a> expect angles measured radians by default.\nCalling <code>angleMode(DEGREES)</code> switches to degrees. Calling\n<code>angleMode(RADIANS)</code> switches back to radians.</p>\n<p>Calling <code>angleMode()</code> with no arguments returns current angle mode, which\nis either <code>RADIANS</code> or <code>DEGREES</code>.</p>\n",
- "itemtype": "method",
- "name": "angleMode",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Rotate 1/8 turn.\n rotate(QUARTER_PI);\n\n // Draw a line.\n line(0, 0, 80, 0);\n\n describe('A diagonal line radiating from the top-left corner of a square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Rotate 1/8 turn.\n rotate(45);\n\n // Draw a line.\n line(0, 0, 80, 0);\n\n describe('A diagonal line radiating from the top-left corner of a square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Calculate the angle to rotate.\n let angle = TWO_PI / 7;\n\n // Move the origin to the center.\n translate(50, 50);\n\n // Style the flower.\n noStroke();\n fill(255, 50);\n\n // Draw the flower.\n for (let i = 0; i < 7; i += 1) {\n ellipse(0, 0, 80, 20);\n rotate(angle);\n }\n\n describe('A translucent white flower on a dark background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Calculate the angle to rotate.\n let angle = 360 / 7;\n\n // Move the origin to the center.\n translate(50, 50);\n\n // Style the flower.\n noStroke();\n fill(255, 50);\n\n // Draw the flower.\n for (let i = 0; i < 7; i += 1) {\n ellipse(0, 0, 80, 20);\n rotate(angle);\n }\n\n describe('A translucent white flower on a dark background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.05) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 2.86) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the upper line.\n rotate(PI / 6);\n line(0, 0, 80, 0);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw the lower line.\n rotate(30);\n line(0, 0, 80, 0);\n\n 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.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Math",
- "submodule": "Trigonometry",
- "overloads": [
- {
- "line": 557,
"params": [
{
- "name": "mode",
- "description": "<p>either RADIANS or DEGREES.</p>\n",
- "type": "Constant"
+ "name": "v1",
+ "description": "red or hue value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "description": "green or saturation value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "description": "blue, brightness, or lightness value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "x",
+ "description": "x-coordinate of the light.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the light.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z-coordinate of the light.",
+ "type": "Number"
+ },
+ {
+ "name": "rx",
+ "description": "x-component of light direction between -1 and 1.",
+ "type": "Number"
+ },
+ {
+ "name": "ry",
+ "description": "y-component of light direction between -1 and 1.",
+ "type": "Number"
+ },
+ {
+ "name": "rz",
+ "description": "z-component of light direction between -1 and 1.",
+ "type": "Number"
+ },
+ {
+ "name": "angle",
+ "description": "angle of the light cone. Defaults to <code>PI / 3</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "concentration",
+ "description": "concentration of the light. Defaults to 100.",
+ "optional": 1,
+ "type": "Number"
}
]
},
{
- "line": 743,
- "params": [],
- "return": {
- "description": "mode either RADIANS or DEGREES",
- "type": "Constant"
- }
- }
- ]
- },
- {
- "file": "src/typography/attributes.js",
- "line": 11,
- "description": "<p>Sets the way text is aligned when <a href=\"#/p5/text\">text()</a> is called.</p>\n<p>By default, calling <code>text('hi', 10, 20)</code> places the bottom-left corner of\nthe text's bounding box at (10, 20).</p>\n<p>The first parameter, <code>horizAlign</code>, changes the way\n<a href=\"#/p5/text\">text()</a> interprets x-coordinates. By default, the\nx-coordinate sets the left edge of the bounding box. <code>textAlign()</code> accepts\nthe following values for <code>horizAlign</code>: <code>LEFT</code>, <code>CENTER</code>, or <code>RIGHT</code>.</p>\n<p>The second parameter, <code>vertAlign</code>, is optional. It changes the way\n<a href=\"#/p5/text\">text()</a> interprets y-coordinates. By default, the\ny-coordinate sets the bottom edge of the bounding box. <code>textAlign()</code>\naccepts the following values for <code>vertAlign</code>: <code>TOP</code>, <code>BOTTOM</code>, <code>CENTER</code>,\nor <code>BASELINE</code>.</p>\n",
- "itemtype": "method",
- "name": "textAlign",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a vertical line.\n strokeWeight(0.5);\n line(50, 0, 50, 100);\n\n // Top line.\n textSize(16);\n textAlign(RIGHT);\n text('ABCD', 50, 30);\n\n // Middle line.\n textAlign(CENTER);\n text('EFGH', 50, 50);\n\n // Bottom line.\n textAlign(LEFT);\n text('IJKL', 50, 70);\n\n describe('The letters ABCD displayed at top-left, EFGH at center, and IJKL at bottom-right. A vertical line divides the canvas in half.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n strokeWeight(0.5);\n\n // First line.\n line(0, 12, width, 12);\n textAlign(CENTER, TOP);\n text('TOP', 50, 12);\n\n // Second line.\n line(0, 37, width, 37);\n textAlign(CENTER, CENTER);\n text('CENTER', 50, 37);\n\n // Third line.\n line(0, 62, width, 62);\n textAlign(CENTER, BASELINE);\n text('BASELINE', 50, 62);\n\n // Fourth line.\n line(0, 97, width, 97);\n textAlign(CENTER, BOTTOM);\n text('BOTTOM', 50, 97);\n\n describe('The words \"TOP\", \"CENTER\", \"BASELINE\", and \"BOTTOM\" each drawn relative to a horizontal line. Their positions demonstrate different vertical alignments.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Typography",
- "submodule": "Attributes",
- "overloads": [
- {
- "line": 11,
"params": [
{
- "name": "horizAlign",
- "description": "<p>horizontal alignment, either LEFT,\n CENTER, or RIGHT.</p>\n",
- "type": "Constant"
+ "name": "color",
+ "description": "color as a <a href=\"#/p5.Color\">p5.Color</a> object,\nan array of color values, or a CSS string.",
+ "type": "p5.Color|Number[]|String"
},
{
- "name": "vertAlign",
- "description": "<p>vertical alignment, either TOP,\n BOTTOM, CENTER, or BASELINE.</p>\n",
- "type": "Constant",
- "optional": true
+ "name": "position",
+ "description": "position of the light as a <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "direction",
+ "description": "direction of light as a <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "angle",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "concentration",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "chainable": 1
+ ]
},
{
- "line": 98,
- "params": [],
- "return": {
- "description": "",
- "type": "Object"
- }
- }
- ]
- },
- {
- "file": "src/typography/attributes.js",
- "line": 107,
- "description": "<p>Sets the spacing between lines of text when\n<a href=\"#/p5/text\">text()</a> is called.</p>\n<p>Note: Spacing is measured in pixels.</p>\n<p>Calling <code>textLeading()</code> without an argument returns the current spacing.</p>\n",
- "itemtype": "method",
- "name": "textLeading",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // \"\\n\" starts a new line of text.\n let lines = 'one\\ntwo';\n\n // Left.\n text(lines, 10, 25);\n\n // Right.\n textLeading(30);\n text(lines, 70, 25);\n\n 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.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Typography",
- "submodule": "Attributes",
- "overloads": [
- {
- "line": 107,
"params": [
{
- "name": "leading",
- "description": "<p>spacing between lines of text in units of pixels.</p>\n",
+ "name": "v1",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "type": "Number"
+ },
+ {
+ "name": "position",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "direction",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "angle",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "concentration",
+ "optional": 1,
"type": "Number"
}
- ],
- "chainable": 1
+ ]
},
{
- "line": 142,
- "params": [],
- "return": {
- "description": "",
- "type": "Number"
- }
- }
- ]
- },
- {
- "file": "src/typography/attributes.js",
- "line": 151,
- "description": "<p>Sets the font size when\n<a href=\"#/p5/text\">text()</a> is called.</p>\n<p>Note: Font size is measured in pixels.</p>\n<p>Calling <code>textSize()</code> without an argument returns the current size.</p>\n",
- "itemtype": "method",
- "name": "textSize",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top.\n textSize(12);\n text('Font Size 12', 10, 30);\n\n // Middle.\n textSize(14);\n text('Font Size 14', 10, 60);\n\n // Bottom.\n textSize(16);\n text('Font Size 16', 10, 90);\n\n describe('The text \"Font Size 12\" drawn small, \"Font Size 14\" drawn medium, and \"Font Size 16\" drawn large.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Typography",
- "submodule": "Attributes",
- "overloads": [
- {
- "line": 151,
"params": [
{
- "name": "size",
- "description": "<p>size of the letters in units of pixels.</p>\n",
+ "name": "color",
+ "type": "p5.Color|Number[]|String"
+ },
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "type": "Number"
+ },
+ {
+ "name": "direction",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "angle",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "concentration",
+ "optional": 1,
"type": "Number"
}
- ],
- "chainable": 1
+ ]
},
{
- "line": 188,
- "params": [],
- "return": {
- "description": "",
- "type": "Number"
- }
- }
- ]
- },
- {
- "file": "src/typography/attributes.js",
- "line": 197,
- "description": "<p>Sets the style for system fonts when\n<a href=\"#/p5/text\">text()</a> is called.</p>\n<p>The parameter, <code>style</code>, can be either <code>NORMAL</code>, <code>ITALIC</code>, <code>BOLD</code>, or\n<code>BOLDITALIC</code>.</p>\n<p><code>textStyle()</code> may be overridden by CSS styling. This function doesn't\naffect fonts loaded with <a href=\"#/p5/loadFont\">loadFont()</a>.</p>\n",
- "itemtype": "method",
- "name": "textStyle",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(12);\n textAlign(CENTER);\n\n // First row.\n textStyle(NORMAL);\n text('Normal', 50, 15);\n\n // Second row.\n textStyle(ITALIC);\n text('Italic', 50, 40);\n\n // Third row.\n textStyle(BOLD);\n text('Bold', 50, 65);\n\n // Fourth row.\n textStyle(BOLDITALIC);\n text('Bold Italic', 50, 90);\n\n describe('The words \"Normal\" displayed normally, \"Italic\" in italic, \"Bold\" in bold, and \"Bold Italic\" in bold italics.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Typography",
- "submodule": "Attributes",
- "overloads": [
+ "params": [
+ {
+ "name": "color",
+ "type": "p5.Color|Number[]|String"
+ },
+ {
+ "name": "position",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "rx",
+ "type": "Number"
+ },
+ {
+ "name": "ry",
+ "type": "Number"
+ },
+ {
+ "name": "rz",
+ "type": "Number"
+ },
+ {
+ "name": "angle",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "concentration",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
{
- "line": 197,
"params": [
{
- "name": "style",
- "description": "<p>styling for text, either NORMAL,\n ITALIC, BOLD or BOLDITALIC.</p>\n",
- "type": "Constant"
+ "name": "v1",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "type": "Number"
+ },
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "type": "Number"
+ },
+ {
+ "name": "direction",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "angle",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "concentration",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "chainable": 1
+ ]
},
{
- "line": 244,
- "params": [],
- "return": {
- "description": "",
- "type": "String"
- }
- }
- ]
- },
- {
- "file": "src/typography/attributes.js",
- "line": 253,
- "description": "<p>Calculates the maximum width of a string of text drawn when\n<a href=\"#/p5/text\">text()</a> is called.</p>\n",
- "itemtype": "method",
- "name": "textWidth",
- "params": [
+ "params": [
+ {
+ "name": "v1",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "type": "Number"
+ },
+ {
+ "name": "position",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "rx",
+ "type": "Number"
+ },
+ {
+ "name": "ry",
+ "type": "Number"
+ },
+ {
+ "name": "rz",
+ "type": "Number"
+ },
+ {
+ "name": "angle",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "concentration",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
{
- "name": "str",
- "description": "<p>string of text to measure.</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "color",
+ "type": "p5.Color|Number[]|String"
+ },
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "type": "Number"
+ },
+ {
+ "name": "rx",
+ "type": "Number"
+ },
+ {
+ "name": "ry",
+ "type": "Number"
+ },
+ {
+ "name": "rz",
+ "type": "Number"
+ },
+ {
+ "name": "angle",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "concentration",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "width measured in units of pixels.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(28);\n strokeWeight(0.5);\n\n // Calculate the text width.\n let s = 'yoyo';\n let w = textWidth(s);\n\n // Display the text.\n text(s, 22, 55);\n\n // Underline the text.\n line(22, 55, 22 + w, 55);\n\n describe('The word \"yoyo\" underlined.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(28);\n strokeWeight(0.5);\n\n // Calculate the text width.\n // \"\\n\" starts a new line.\n let s = 'yo\\nyo';\n let w = textWidth(s);\n\n // Display the text.\n text(s, 22, 55);\n\n // Underline the text.\n line(22, 55, 22 + w, 55);\n\n describe('The word \"yo\" written twice, one copy beneath the other. The words are divided by a horizontal line.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Typography",
- "submodule": "Attributes"
+ "static": false,
+ "module": "3D",
+ "submodule": "Lights"
},
{
- "file": "src/typography/attributes.js",
- "line": 337,
- "description": "<p>Calculates the ascent of the current font at its current size.</p>\n<p>The ascent represents the distance, in pixels, of the tallest character\nabove the baseline.</p>\n",
+ "name": "noLights",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/light.js",
+ "line": 1443,
"itemtype": "method",
- "name": "textAscent",
- "return": {
- "description": "ascent measured in units of pixels.",
- "type": "Number"
- },
+ "chainable": 1,
+ "description": "<p>Removes all lights from the sketch.</p>\n<p>Calling <code>noLights()</code> removes any lights created with\n<a href=\"#/p5/lights\">lights()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>, or\n<a href=\"#/p5/spotLight\">spotLight()</a>. These functions may be called\nafter <code>noLights()</code> to create a new lighting scheme.</p>\n",
"example": [
- "\n<div>\n<code>\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textFont(font);\n\n // Different for each font.\n let fontScale = 0.8;\n\n let baseY = 75;\n strokeWeight(0.5);\n\n // Draw small text.\n textSize(24);\n text('dp', 0, baseY);\n\n // Draw baseline and ascent.\n let a = textAscent() * fontScale;\n line(0, baseY, 23, baseY);\n line(23, baseY - a, 23, baseY);\n\n // Draw large text.\n textSize(48);\n text('dp', 45, baseY);\n\n // Draw baseline and ascent.\n a = textAscent() * fontScale;\n line(45, baseY, 91, baseY);\n line(91, baseY - a, 91, baseY);\n\n 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\".');\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two spheres drawn against a gray background. The top sphere is white and the bottom sphere is red.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the top sphere.\n push();\n translate(0, -25, 0);\n sphere(20);\n pop();\n\n // Turn off the lights.\n noLights();\n\n // Add a red directional light that points into the screen.\n directionalLight(255, 0, 0, 0, 0, -1);\n\n // Draw the bottom sphere.\n push();\n translate(0, 25, 0);\n sphere(20);\n pop();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Typography",
- "submodule": "Attributes"
- },
- {
- "file": "src/typography/attributes.js",
- "line": 396,
- "description": "<p>Calculates the descent of the current font at its current size.</p>\n<p>The descent represents the distance, in pixels, of the character with the\nlongest descender below the baseline.</p>\n",
- "itemtype": "method",
- "name": "textDescent",
- "return": {
- "description": "descent measured in units of pixels.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the font.\n textFont(font);\n\n // Different for each font.\n let fontScale = 0.9;\n\n let baseY = 75;\n strokeWeight(0.5);\n\n // Draw small text.\n textSize(24);\n text('dp', 0, baseY);\n\n // Draw baseline and descent.\n let d = textDescent() * fontScale;\n line(0, baseY, 23, baseY);\n line(23, baseY, 23, baseY + d);\n\n // Draw large text.\n textSize(48);\n text('dp', 45, baseY);\n\n // Draw baseline and descent.\n d = textDescent() * fontScale;\n line(45, baseY, 91, baseY);\n line(91, baseY, 91, baseY + d);\n\n 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\".');\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": []
+ }
],
"class": "p5",
- "module": "Typography",
- "submodule": "Attributes"
- },
- {
- "file": "src/typography/attributes.js",
- "line": 455,
- "description": "<p>Helper function to measure ascent and descent.</p>\n",
- "class": "p5",
- "module": "Typography",
- "submodule": "Attributes"
+ "static": false,
+ "module": "3D",
+ "submodule": "Lights"
},
{
- "file": "src/typography/attributes.js",
- "line": 462,
- "description": "<p>Sets the style for wrapping text when\n<a href=\"#/p5/text\">text()</a> is called.</p>\n<p>The parameter, <code>style</code>, can be one of the following values:</p>\n<p><code>WORD</code> starts new lines of text at spaces. If a string of text doesn't\nhave spaces, it may overflow the text box and the canvas. This is the\ndefault style.</p>\n<p><code>CHAR</code> starts new lines as needed to stay within the text box.</p>\n<p><code>textWrap()</code> only works when the maximum width is set for a text box. For\nexample, calling <code>text('Have a wonderful day', 0, 10, 100)</code> sets the\nmaximum width to 100 pixels.</p>\n<p>Calling <code>textWrap()</code> without an argument returns the current style.</p>\n",
+ "name": "loadModel",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/loading.js",
+ "line": 341,
"itemtype": "method",
- "name": "textWrap",
- "params": [
- {
- "name": "style",
- "description": "<p>text wrapping style, either WORD or CHAR.</p>\n",
- "type": "Constant"
- }
- ],
- "return": {
- "description": "style",
- "type": "String"
- },
+ "description": "<p>Loads a 3D model to create a\n<a href=\"#/p5.Geometry\">p5.Geometry</a> object.</p>\n<p><code>loadModel()</code> can load 3D models from OBJ and STL files. Once the model is\nloaded, it can be displayed with the\n<a href=\"#/p5/model\">model()</a> function, as in <code>model(shape)</code>.</p>\n<p>There are three ways to call <code>loadModel()</code> with optional parameters to help\nprocess the model.</p>\n<p>The first parameter, <code>path</code>, is a <code>String</code> with the path to the file. Paths\nto local files should be relative, as in <code>loadModel('assets/model.obj')</code>.\nURLs such as <code>'https://example.com/model.obj'</code> may be blocked due to browser\nsecurity. The <code>path</code> parameter can also be defined as a <code>Request</code>\nobject for more advanced usage.\nNote: When loading a <code>.obj</code> file that references materials stored in\n<code>.mtl</code> files, p5.js will attempt to load and apply those materials.\nTo ensure that the <code>.obj</code> file reads the <code>.mtl</code> file correctly include the\n<code>.mtl</code> file alongside it.</p>\n<p>The first way to call <code>loadModel()</code> has three optional parameters after the\nfile path. The first optional parameter, <code>successCallback</code>, is a function\nto call once the model loads. For example,\n<code>loadModel('assets/model.obj', handleModel)</code> will call the <code>handleModel()</code>\nfunction once the model loads. The second optional parameter,\n<code>failureCallback</code>, is a function to call if the model fails to load. For\nexample, <code>loadModel('assets/model.obj', handleModel, handleFailure)</code> will\ncall the <code>handleFailure()</code> function if an error occurs while loading. The\nthird optional parameter, <code>fileType</code>, is the model’s file extension as a\nstring. For example,\n<code>loadModel('assets/model', handleModel, handleFailure, '.obj')</code> will try to\nload the file model as a <code>.obj</code> file.</p>\n<p>The second way to call <code>loadModel()</code> has four optional parameters after the\nfile path. The first optional parameter is a <code>Boolean</code> value. If <code>true</code> is\npassed, as in <code>loadModel('assets/model.obj', true)</code>, then the model will be\nresized to ensure it fits the canvas. The next three parameters are\n<code>successCallback</code>, <code>failureCallback</code>, and <code>fileType</code> as described above.</p>\n<p>The third way to call <code>loadModel()</code> has one optional parameter after the\nfile path. The optional parameter, <code>options</code>, is an <code>Object</code> with options,\nas in <code>loadModel('assets/model.obj', options)</code>. The <code>options</code> object can\nhave the following properties:</p>\n<pre><code class=\"language-js\">let options = {\n // Enables standardized size scaling during loading if set to true.\n normalize: true,\n\n // Function to call once the model loads.\n successCallback: handleModel,\n\n // Function to call if an error occurs while loading.\n failureCallback: handleError,\n\n // Model's file extension.\n fileType: '.stl',\n\n // Flips the U texture coordinates of the model.\n flipU: false,\n\n // Flips the V texture coordinates of the model.\n flipV: false\n};\n\n// Pass the options object to loadModel().\nloadModel('assets/model.obj', options);</code></pre><p>This function returns a <code>Promise</code> and should be used in an <code>async</code> setup with\n<code>await</code>. See the examples for the usage syntax.</p>\n<p>Note: There’s no support for colored STL files. STL files with color will\nbe rendered without color.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(20);\n textWrap(WORD);\n\n // Display the text.\n text('Have a wonderful day', 0, 10, 100);\n\n describe('The text \"Have a wonderful day\" written across three lines.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(20);\n textWrap(CHAR);\n\n // Display the text.\n text('Have a wonderful day', 0, 10, 100);\n\n describe('The text \"Have a wonderful day\" written across two lines.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textSize(20);\n textWrap(CHAR);\n\n // Display the text.\n text('祝你有美好的一天', 0, 10, 100);\n\n describe('The text \"祝你有美好的一天\" written across two lines.');\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nasync function setup() {\n shape = await loadModel('assets/teapot.obj');\n\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\n// Normalize the geometry's size to fit the canvas.\nasync function setup() {\n shape = await loadModel('assets/teapot.obj', true);\n\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nasync function setup() {\n await loadModel('assets/teapot.obj', true, handleModel);\n\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and log the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nasync function setup() {\n await loadModel('assets/teapot.obj', true, handleModel, handleError);\n\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and print the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n// Print an error message if the file doesn't load.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nasync function setup() {\n await loadModel('assets/teapot.obj', '.obj', true, handleModel, handleError);\n\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and print the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n// Print an error message if the file doesn't load.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\nlet options = {\n fileType: '.obj',\n normalize: true,\n successCallback: handleModel,\n failureCallback: handleError\n};\n\n// Load the file and create a p5.Geometry object.\nasync function setup() {\n await loadModel('assets/teapot.obj', options);\n\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and print the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n// Print an error message if the file doesn't load.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Typography",
- "submodule": "Attributes"
- },
- {
- "file": "src/typography/loading_displaying.js",
- "line": 16,
- "description": "<p>Loads a font and creates a <a href=\"#/p5.Font\">p5.Font</a> object.\n<code>loadFont()</code> can load fonts in either .otf or .ttf format. Loaded fonts can\nbe used to style text on the canvas and in HTML elements.</p>\n<p>The first parameter, <code>path</code>, is the path to a font file.\nPaths to local files should be relative. For example,\n<code>'assets/inconsolata.otf'</code>. The Inconsolata font used in the following\nexamples can be downloaded for free\n<a href=\"https://www.fontsquirrel.com/fonts/inconsolata\" target=\"_blank\">here</a>.\nPaths to remote files should be URLs. For example,\n<code>'https://example.com/inconsolata.otf'</code>. URLs may be blocked due to browser\nsecurity.</p>\n<p>The second parameter, <code>successCallback</code>, is optional. If a function is\npassed, it will be called once the font has loaded. The callback function\nmay use the new <a href=\"#/p5.Font\">p5.Font</a> object if needed.</p>\n<p>The third parameter, <code>failureCallback</code>, is also optional. If a function is\npassed, it will be called if the font fails to load. The callback function\nmay use the error\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Event\" target=\"_blank\">Event</a>\nobject if needed.</p>\n<p>Fonts can take time to load. Calling <code>loadFont()</code> in\n<a href=\"#/p5/preload\">preload()</a> ensures fonts load before they're\nused in <a href=\"#/p5/setup\">setup()</a> or\n<a href=\"#/p5/draw\">draw()</a>.</p>\n",
- "itemtype": "method",
- "name": "loadFont",
- "params": [
- {
- "name": "path",
- "description": "<p>path of the font to be loaded.</p>\n",
- "type": "String"
- },
- {
- "name": "successCallback",
- "description": "<p>function called with the\n <a href=\"#/p5.Font\">p5.Font</a> object after it\n loads.</p>\n",
- "type": "Function",
- "optional": true
- },
- {
- "name": "failureCallback",
- "description": "<p>function called with the error\n <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Event\" target=\"_blank\">Event</a>\n object if the font fails to load.</p>\n",
- "type": "Function",
- "optional": true
- }
- ],
- "return": {
- "description": "<a href=\"#/p5.Font\">p5.Font</a> object.",
- "type": "p5.Font"
- },
- "example": [
- "\n\n<div>\n<code>\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n fill('deeppink');\n textFont(font);\n textSize(36);\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n loadFont('assets/inconsolata.otf', font => {\n fill('deeppink');\n textFont(font);\n textSize(36);\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n });\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n loadFont('assets/inconsolata.otf', success, failure);\n}\n\nfunction success(font) {\n fill('deeppink');\n textFont(font);\n textSize(36);\n text('p5*js', 10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n}\n\nfunction failure(event) {\n console.error('Oops!', event);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction preload() {\n loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n let p = createP('p5*js');\n p.style('color', 'deeppink');\n p.style('font-family', 'Inconsolata');\n p.style('font-size', '36px');\n p.position(10, 50);\n\n describe('The text \"p5*js\" written in pink on a white background.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Typography",
- "submodule": "Loading & Displaying"
- },
- {
- "file": "src/typography/loading_displaying.js",
- "line": 182,
- "description": "<p>Draws text to the canvas.</p>\n<p>The first parameter, <code>str</code>, is the text to be drawn. The second and third\nparameters, <code>x</code> and <code>y</code>, set the coordinates of the text's bottom-left\ncorner. See <a href=\"#/p5/textAlign\">textAlign()</a> for other ways to\nalign text.</p>\n<p>The fourth and fifth parameters, <code>maxWidth</code> and <code>maxHeight</code>, are optional.\nThey set the dimensions of the invisible rectangle containing the text. By\ndefault, they set its maximum width and height. See\n<a href=\"#/p5/rectMode\">rectMode()</a> for other ways to define the\nrectangular text box. Text will wrap to fit within the text box. Text\noutside of the box won't be drawn.</p>\n<p>Text can be styled a few ways. Call the <a href=\"#/p5/fill\">fill()</a>\nfunction to set the text's fill color. Call\n<a href=\"#/p5/stroke\">stroke()</a> and\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a> to set the text's outline.\nCall <a href=\"#/p5/textSize\">textSize()</a> and\n<a href=\"#/p5/textFont\">textFont()</a> to set the text's size and font,\nrespectively.</p>\n<p>Note: <code>WEBGL</code> mode only supports fonts loaded with\n<a href=\"#/p5/loadFont\">loadFont()</a>. Calling\n<a href=\"#/p5/stroke\">stroke()</a> has no effect in <code>WEBGL</code> mode.</p>\n",
- "itemtype": "method",
- "name": "text",
- "params": [
- {
- "name": "str",
- "description": "<p>text to be displayed.</p>\n",
- "type": "String|Object|Array|Number|Boolean"
- },
- {
- "name": "x",
- "description": "<p>x-coordinate of the text box.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the text box.</p>\n",
- "type": "Number"
- },
- {
- "name": "maxWidth",
- "description": "<p>maximum width of the text box. See\n <a href=\"#/p5/rectMode\">rectMode()</a> for\n other options.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "maxHeight",
- "description": "<p>maximum height of the text box. See\n <a href=\"#/p5/rectMode\">rectMode()</a> for\n other options.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1,
- "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('🌈', 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>"
- ],
- "class": "p5",
- "module": "Typography",
- "submodule": "Loading & Displaying"
- },
- {
- "file": "src/typography/loading_displaying.js",
- "line": 335,
- "description": "<p>Sets the font used by the <a href=\"#/p5/text\">text()</a> function.</p>\n<p>The first parameter, <code>font</code>, sets the font. <code>textFont()</code> recognizes either\na <a href=\"#/p5.Font\">p5.Font</a> object or a string with the name of a\nsystem font. For example, <code>'Courier New'</code>.</p>\n<p>The second parameter, <code>size</code>, is optional. It sets the font size in pixels.\nThis has the same effect as calling <a href=\"#/p5/textSize\">textSize()</a>.</p>\n<p>Note: <code>WEBGL</code> mode only supports fonts loaded with\n<a href=\"#/p5/loadFont\">loadFont()</a>.</p>\n",
- "itemtype": "method",
- "name": "textFont",
- "return": {
- "description": "current font or p5 Object.",
- "type": "Object"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n background(200);\n textFont('Courier New');\n textSize(24);\n text('hi', 35, 55);\n\n describe('The text \"hi\" written in a black, monospace font on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background('black');\n fill('palegreen');\n textFont('Courier New', 10);\n text('You turn to the left and see a door. Do you enter?', 5, 5, 90, 90);\n text('>', 5, 70);\n\n describe('A text prompt from a game is written in a green, monospace font on a black background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background(200);\n textFont('Verdana');\n let currentFont = textFont();\n text(currentFont, 25, 50);\n\n describe('The text \"Verdana\" written in a black, sans-serif font on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet fontRegular;\nlet fontItalic;\nlet fontBold;\n\nfunction preload() {\n fontRegular = loadFont('assets/Regular.otf');\n fontItalic = loadFont('assets/Italic.ttf');\n fontBold = loadFont('assets/Bold.ttf');\n}\n\nfunction setup() {\n background(200);\n textFont(fontRegular);\n text('I am Normal', 10, 30);\n textFont(fontItalic);\n text('I am Italic', 10, 50);\n textFont(fontBold);\n text('I am Bold', 10, 70);\n\n 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.');\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Typography",
- "submodule": "Loading & Displaying",
"overloads": [
{
- "line": 335,
- "params": [],
+ "params": [
+ {
+ "name": "path",
+ "description": "path of the model to be loaded.",
+ "type": "String|Request"
+ },
+ {
+ "name": "fileType",
+ "description": "model’s file extension. Either <code>'.obj'</code> or <code>'.stl'</code>.",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "normalize",
+ "description": "if <code>true</code>, scale the model to fit the canvas.",
+ "type": "Boolean"
+ },
+ {
+ "name": "successCallback",
+ "description": "function to call once the model is loaded. Will be passed\nthe <a href=\"#/p5.Geometry\">p5.Geometry</a> object.",
+ "optional": 1,
+ "type": "function(p5.Geometry)"
+ },
+ {
+ "name": "failureCallback",
+ "description": "function to call if the model fails to load. Will be passed an <code>Error</code> event object.",
+ "optional": 1,
+ "type": "function(Event)"
+ }
+ ],
"return": {
- "description": "current font or p5 Object.",
- "type": "Object"
+ "description": "the <a href=\"#/p5.Geometry\">p5.Geometry</a> object",
+ "type": "Promise<p5.Geometry>"
}
},
{
- "line": 418,
"params": [
{
- "name": "font",
- "description": "<p>font as a <a href=\"#/p5.Font\">p5.Font</a> object or a string.</p>\n",
- "type": "Object|String"
+ "name": "path",
+ "type": "String|Request"
},
{
- "name": "size",
- "description": "<p>font size in pixels.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "fileType",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "successCallback",
+ "optional": 1,
+ "type": "function(p5.Geometry)"
+ },
+ {
+ "name": "failureCallback",
+ "optional": 1,
+ "type": "function(Event)"
}
],
- "chainable": 1
- }
- ]
- },
- {
- "file": "src/typography/p5.Font.js",
- "line": 51,
- "description": "<p>The font's underlying\n<a href=\"https://opentype.js.org/\" target=\"_blank\">opentype.js</a>\nfont object.</p>\n",
- "itemtype": "property",
- "name": "font",
- "class": "p5.Font",
- "module": "Typography",
- "submodule": "Loading & Displaying"
- },
- {
- "file": "src/typography/p5.Font.js",
- "line": 62,
- "description": "<p>Returns the bounding box for a string of text written using the font.</p>\n<p>The bounding box is the smallest rectangle that can contain a string of\ntext. <code>font.textBounds()</code> returns an object with the bounding box's\nlocation and size. For example, calling <code>font.textBounds('p5*js', 5, 20)</code>\nreturns an object in the format\n<code>{ x: 5.7, y: 12.1 , w: 9.9, h: 28.6 }</code>. The <code>x</code> and <code>y</code> properties are\nalways the coordinates of the bounding box's top-left corner.</p>\n<p>The first parameter, <code>str</code>, is a string of text. The second and third\nparameters, <code>x</code> and <code>y</code>, are the text's position. By default, they set the\ncoordinates of the bounding box's bottom-left corner. See\n<a href=\"#/p5/textAlign\">textAlign()</a> for more ways to align text.</p>\n<p>The fourth parameter, <code>fontSize</code>, is optional. It sets the font size used to\ndetermine the bounding box. By default, <code>font.textBounds()</code> will use the\ncurrent <a href=\"#/p5/textSize\">textSize()</a>.</p>\n",
- "itemtype": "method",
- "name": "textBounds",
- "params": [
- {
- "name": "str",
- "description": "<p>string of text.</p>\n",
- "type": "String"
- },
- {
- "name": "x",
- "description": "<p>x-coordinate of the text.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the text.</p>\n",
- "type": "Number"
+ "return": {
+ "description": "new <a href=\"#/p5.Geometry\">p5.Geometry</a> object.",
+ "type": "Promise<p5.Geometry>"
+ }
},
{
- "name": "fontSize",
- "description": "<p>font size. Defaults to the current\n <a href=\"#/p5/textSize\">textSize()</a>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "path",
+ "type": "String|Request"
+ },
+ {
+ "name": "options",
+ "description": "loading options.",
+ "optional": 1,
+ "type": "Object"
+ },
+ {
+ "name": "options.fileType",
+ "description": "",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "options.successCallback",
+ "description": "",
+ "optional": 1,
+ "type": "function(p5.Geometry)"
+ },
+ {
+ "name": "options.failureCallback",
+ "description": "",
+ "optional": 1,
+ "type": "function(Event)"
+ },
+ {
+ "name": "options.normalize",
+ "description": "",
+ "optional": 1,
+ "type": "Boolean"
+ },
+ {
+ "name": "options.flipU",
+ "description": "",
+ "optional": 1,
+ "type": "Boolean"
+ },
+ {
+ "name": "options.flipV",
+ "description": "",
+ "optional": 1,
+ "type": "Boolean"
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Geometry\">p5.Geometry</a> object.",
+ "type": "Promise<p5.Geometry>"
+ }
}
],
"return": {
- "description": "object describing the bounding box with\n properties x, y, w, and h.",
- "type": "Object"
+ "description": "the <a href=\"#/p5.Geometry\">p5.Geometry</a> object",
+ "type": "Promise<p5.Geometry>"
},
- "example": [
- "\n<div>\n<code>\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the bounding box.\n let bbox = font.textBounds('p5*js', 35, 53);\n rect(bbox.x, bbox.y, bbox.w, bbox.h);\n\n // Style the text.\n textFont(font);\n\n // Display the text.\n text('p5*js', 35, 53);\n\n describe('The text \"p5*js\" written in black inside a white rectangle.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textFont(font);\n textSize(15);\n textAlign(CENTER, CENTER);\n\n // Display the bounding box.\n let bbox = font.textBounds('p5*js', 50, 50);\n rect(bbox.x, bbox.y, bbox.w, bbox.h);\n\n // Display the text.\n text('p5*js', 50, 50);\n\n describe('The text \"p5*js\" written in black inside a white rectangle.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the bounding box.\n let bbox = font.textBounds('p5*js', 31, 53, 15);\n rect(bbox.x, bbox.y, bbox.w, bbox.h);\n\n // Style the text.\n textFont(font);\n textSize(15);\n\n // Display the text.\n text('p5*js', 31, 53);\n\n describe('The text \"p5*js\" written in black inside a white rectangle.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Font",
- "module": "Typography",
- "submodule": "Loading & Displaying"
+ "class": "p5",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Models"
},
{
- "file": "src/typography/p5.Font.js",
- "line": 279,
- "description": "<p>Returns an array of points outlining a string of text written using the\nfont.</p>\n<p>Each point object in the array has three properties that describe the\npoint's location and orientation, called its path angle. For example,\n<code>{ x: 10, y: 20, alpha: 450 }</code>.</p>\n<p>The first parameter, <code>str</code>, is a string of text. The second and third\nparameters, <code>x</code> and <code>y</code>, are the text's position. By default, they set the\ncoordinates of the bounding box's bottom-left corner. See\n<a href=\"#/p5/textAlign\">textAlign()</a> for more ways to align text.</p>\n<p>The fourth parameter, <code>fontSize</code>, is optional. It sets the text's font\nsize. By default, <code>font.textToPoints()</code> will use the current\n<a href=\"#/p5/textSize\">textSize()</a>.</p>\n<p>The fifth parameter, <code>options</code>, is also optional. <code>font.textToPoints()</code>\nexpects an object with the following properties:</p>\n<p><code>sampleFactor</code> is the ratio of the text's path length to the number of\nsamples. It defaults to 0.1. Higher values produce more points along the\npath and are more precise.</p>\n<p><code>simplifyThreshold</code> removes collinear points if it's set to a number other\nthan 0. The value represents the threshold angle to use when determining\nwhether two edges are collinear.</p>\n",
+ "name": "model",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/loading.js",
+ "line": 1099,
"itemtype": "method",
- "name": "textToPoints",
- "params": [
- {
- "name": "str",
- "description": "<p>string of text.</p>\n",
- "type": "String"
- },
- {
- "name": "x",
- "description": "<p>x-coordinate of the text.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the text.</p>\n",
- "type": "Number"
- },
- {
- "name": "fontSize",
- "description": "<p>font size. Defaults to the current\n <a href=\"#/p5/textSize\">textSize()</a>.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "options",
- "description": "<p>object with sampleFactor and simplifyThreshold\n properties.</p>\n",
- "type": "Object",
- "optional": true
- }
- ],
- "return": {
- "description": "array of point objects, each with x, y, and alpha (path angle) properties.",
- "type": "Array"
- },
+ "description": "<p>Draws a <a href=\"#/p5.Geometry\">p5.Geometry</a> object to the canvas.</p>\n<p>The parameter, <code>model</code>, is the\n<a href=\"#/p5.Geometry\">p5.Geometry</a> object to draw.\n<a href=\"#/p5.Geometry\">p5.Geometry</a> objects can be built with\n<a href=\"#/p5/buildGeometry\">buildGeometry()</a>, or\n<a href=\"#/p5/beginGeometry\">beginGeometry()</a> and\n<a href=\"#/p5/endGeometry\">endGeometry()</a>. They can also be loaded from\na file with <a href=\"#/p5/loadGeometry\">loadGeometry()</a>.</p>\n<p>Note: <code>model()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div>\n<code>\nlet font;\n\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the point array.\n let points = font.textToPoints('p5*js', 6, 60, 35, { sampleFactor: 0.5 });\n\n // Draw a dot at each point.\n for (let p of points) {\n point(p.x, p.y);\n }\n\n describe('A set of black dots outlining the text \"p5*js\" on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createShape);\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\n// Create p5.Geometry object from a single cone.\nfunction createShape() {\n cone();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createArrow);\n\n describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the p5.Geometry object again.\n model(shape);\n}\n\nfunction createArrow() {\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nasync function setup() {\n shape = await loadModel('assets/octahedron.obj');\n\n createCanvas(100, 100, WEBGL);\n\n describe('A white octahedron drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n</code>\n</div>"
],
- "class": "p5.Font",
- "module": "Typography",
- "submodule": "Loading & Displaying"
- },
- {
- "file": "src/utilities/array_functions.js",
- "line": 10,
- "description": "<p>Adds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().</p>\n",
- "itemtype": "method",
- "name": "append",
- "deprecated": true,
- "deprecationMessage": "Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\">array.push(value)</a> instead.",
- "params": [
- {
- "name": "array",
- "description": "<p>Array to append</p>\n",
- "type": "Array"
- },
+ "overloads": [
{
- "name": "value",
- "description": "<p>to be added to the Array</p>\n",
- "type": "Any"
+ "params": [
+ {
+ "name": "model",
+ "description": "3D shape to be drawn.",
+ "type": "p5.Geometry"
+ }
+ ]
}
],
- "return": {
- "description": "the array that was appended to",
- "type": "Array"
- },
- "example": [
- "\n<div class='norender'><code>\nfunction setup() {\n let myArray = ['Mango', 'Apple', 'Papaya'];\n print(myArray); // ['Mango', 'Apple', 'Papaya']\n\n append(myArray, 'Peach');\n print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']\n}\n</code></div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "Array Functions"
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Models"
},
{
- "file": "src/utilities/array_functions.js",
- "line": 35,
- "description": "<p>Copies an array (or part of an array) to another array. The src array is\ncopied to the dst array, beginning at the position specified by\nsrcPosition and into the position specified by dstPosition. The number of\nelements to copy is determined by length. Note that copying values\noverwrites existing values in the destination array. To append values\ninstead of overwriting them, use <a href=\"#/p5/concat\">concat()</a>.</p>\n<p>The simplified version with only two arguments, arrayCopy(src, dst),\ncopies an entire array to another of the same size. It is equivalent to\narrayCopy(src, 0, dst, 0, src.length).</p>\n<p>Using this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.</p>\n",
+ "name": "createModel",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/loading.js",
+ "line": 1195,
"itemtype": "method",
- "name": "arrayCopy",
- "deprecated": true,
- "deprecationMessage": "Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin\">arr1.copyWithin(arr2)</a> instead.",
+ "description": "<p>Load a 3d model from an OBJ or STL string.</p>\n<p>OBJ and STL files lack a built-in sense of scale, causing models exported from different programs to vary in size.\nIf your model doesn't display correctly, consider using <code>loadModel()</code> with <code>normalize</code> set to <code>true</code> to standardize its size.\nFurther adjustments can be made using the <code>scale()</code> function.</p>\n<p>Also, the support for colored STL files is not present. STL files with color will be\nrendered without color properties.</p>\n<ul><li>Options can include:</li></ul><ul><li><code>modelString</code>: Specifies the plain text string of either an stl or obj file to be loaded.</li><li><code>fileType</code>: Defines the file extension of the model.</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>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>",
"example": [
- "\n<div class='norender'><code>\nlet src = ['A', 'B', 'C'];\nlet dst = [1, 2, 3];\nlet srcPosition = 1;\nlet dstPosition = 0;\nlet length = 2;\n\nprint(src); // ['A', 'B', 'C']\nprint(dst); // [ 1 , 2 , 3 ]\n\narrayCopy(src, srcPosition, dst, dstPosition, length);\nprint(dst); // ['B', 'C', 3]\n</code></div>"
+ "<div>\n<code>\nconst octahedron_model = `\nv 0.000000E+00 0.000000E+00 40.0000\nv 22.5000 22.5000 0.000000E+00\nv 22.5000 -22.5000 0.000000E+00\nv -22.5000 -22.5000 0.000000E+00\nv -22.5000 22.5000 0.000000E+00\nv 0.000000E+00 0.000000E+00 -40.0000\nf 1 2 3\nf 1 3 4\nf 1 4 5\nf 1 5 2\nf 6 5 4\nf 6 4 3\nf 6 3 2\nf 6 2 5\n`;\n//draw a spinning octahedron\nlet octahedron;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n octahedron = createModel(octahedron_model, '.obj');\n describe('Vertically rotating 3D octahedron.');\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n model(octahedron);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "Array Functions",
"overloads": [
{
- "line": 35,
"params": [
{
- "name": "src",
- "description": "<p>the source Array</p>\n",
- "type": "Array"
+ "name": "modelString",
+ "description": "String of the object to be loaded",
+ "type": "String"
},
{
- "name": "srcPosition",
- "description": "<p>starting position in the source Array</p>\n",
- "type": "Integer"
+ "name": "fileType",
+ "description": "The file extension of the model\n(<code>.stl</code>, <code>.obj</code>).",
+ "optional": 1,
+ "type": "String"
},
{
- "name": "dst",
- "description": "<p>the destination Array</p>\n",
- "type": "Array"
+ "name": "normalize",
+ "description": "If true, scale the model to a\nstandardized size when loading",
+ "type": "Boolean"
},
{
- "name": "dstPosition",
- "description": "<p>starting position in the destination Array</p>\n",
- "type": "Integer"
+ "name": "successCallback",
+ "description": "Function to be called\nonce the model is loaded. Will be passed\nthe 3D model object.",
+ "optional": 1,
+ "type": "function(p5.Geometry)"
},
{
- "name": "length",
- "description": "<p>number of Array elements to be copied</p>\n",
- "type": "Integer"
+ "name": "failureCallback",
+ "description": "called with event error if\nthe model fails to load.",
+ "optional": 1,
+ "type": "function(Event)"
}
- ]
+ ],
+ "return": {
+ "description": "the <a href=\"#/p5.Geometry\">p5.Geometry</a> object",
+ "type": "p5.Geometry"
+ }
},
{
- "line": 73,
"params": [
{
- "name": "src",
- "description": "",
- "type": "Array"
+ "name": "modelString",
+ "type": "String"
},
{
- "name": "dst",
- "description": "",
- "type": "Array"
+ "name": "fileType",
+ "optional": 1,
+ "type": "String"
},
{
- "name": "length",
- "description": "",
- "type": "Integer",
- "optional": true
+ "name": "successCallback",
+ "optional": 1,
+ "type": "function(p5.Geometry)"
+ },
+ {
+ "name": "failureCallback",
+ "optional": 1,
+ "type": "function(Event)"
}
- ]
- }
- ]
- },
- {
- "file": "src/utilities/array_functions.js",
- "line": 112,
- "description": "<p>Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.</p>\n",
- "itemtype": "method",
- "name": "concat",
- "deprecated": true,
- "deprecationMessage": "Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat\">arr1.concat(arr2)</a> instead.",
- "params": [
- {
- "name": "a",
- "description": "<p>first Array to concatenate</p>\n",
- "type": "Array"
+ ],
+ "return": {
+ "description": "the <a href=\"#/p5.Geometry\">p5.Geometry</a> object",
+ "type": "p5.Geometry"
+ }
},
{
- "name": "b",
- "description": "<p>second Array to concatenate</p>\n",
- "type": "Array"
+ "params": [
+ {
+ "name": "modelString",
+ "type": "String"
+ },
+ {
+ "name": "fileType",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "options",
+ "optional": 1,
+ "type": "Object"
+ },
+ {
+ "name": "options.successCallback",
+ "description": "",
+ "optional": 1,
+ "type": "function(p5.Geometry)"
+ },
+ {
+ "name": "options.failureCallback",
+ "description": "",
+ "optional": 1,
+ "type": "function(Event)"
+ },
+ {
+ "name": "options.normalize",
+ "description": "",
+ "optional": 1,
+ "type": "boolean"
+ },
+ {
+ "name": "options.flipU",
+ "description": "",
+ "optional": 1,
+ "type": "boolean"
+ },
+ {
+ "name": "options.flipV",
+ "description": "",
+ "optional": 1,
+ "type": "boolean"
+ }
+ ],
+ "return": {
+ "description": "the <a href=\"#/p5.Geometry\">p5.Geometry</a> object",
+ "type": "p5.Geometry"
+ }
}
],
"return": {
- "description": "concatenated array",
- "type": "Array"
+ "description": "the <a href=\"#/p5.Geometry\">p5.Geometry</a> object",
+ "type": "p5.Geometry"
},
- "example": [
- "\n<div class = 'norender'><code>\nfunction setup() {\n let arr1 = ['A', 'B', 'C'];\n let arr2 = [1, 2, 3];\n\n print(arr1); // ['A','B','C']\n print(arr2); // [1,2,3]\n\n let arr3 = concat(arr1, arr2);\n\n print(arr1); // ['A','B','C']\n print(arr2); // [1, 2, 3]\n print(arr3); // ['A','B','C', 1, 2, 3]\n}\n</code></div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "Array Functions"
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Models"
},
{
- "file": "src/utilities/array_functions.js",
- "line": 141,
- "description": "<p>Reverses the order of an array, maps to Array.reverse()</p>\n",
+ "name": "loadShader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 122,
"itemtype": "method",
- "name": "reverse",
- "deprecated": true,
- "deprecationMessage": "Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse\">array.reverse()</a> instead.",
- "params": [
+ "description": "<p>Loads vertex and fragment shaders to create a\n<a href=\"#/p5.Shader\">p5.Shader</a> object.</p>\n<p>Shaders are programs that run on the graphics processing unit (GPU). They\ncan process many pixels at the same time, making them fast for many\ngraphics tasks. They’re written in a language called\n<a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\" target=\"_blank\">GLSL</a>\nand run along with the rest of the code in a sketch.</p>\n<p>Once the <a href=\"#/p5.Shader\">p5.Shader</a> object is created, it can be\nused with the <a href=\"#/p5/shader\">shader()</a> function, as in\n<code>shader(myShader)</code>. A shader program consists of two files, a vertex shader\nand a fragment shader. The vertex shader affects where 3D geometry is drawn\non the screen and the fragment shader affects color.</p>\n<p><code>loadShader()</code> loads the vertex and fragment shaders from their <code>.vert</code> and\n<code>.frag</code> files. For example, calling\n<code>loadShader('assets/shader.vert', 'assets/shader.frag')</code> loads both\nrequired shaders and returns a <a href=\"#/p5.Shader\">p5.Shader</a> object.</p>\n<p>The third parameter, <code>successCallback</code>, is optional. If a function is\npassed, it will be called once the shader has loaded. The callback function\ncan use the new <a href=\"#/p5.Shader\">p5.Shader</a> object as its\nparameter. The return value of the <code>successCallback()</code> function will be used\nas the final return value of <code>loadShader()</code>.</p>\n<p>The fourth parameter, <code>failureCallback</code>, is also optional. If a function is\npassed, it will be called if the shader fails to load. The callback\nfunction can use the event error as its parameter. The return value of the <code>\nfailureCallback()</code> function will be used as the final return value of <code>loadShader()</code>.</p>\n<p>This function returns a <code>Promise</code> and should be used in an <code>async</code> setup with\n<code>await</code>. See the examples for the usage syntax.</p>\n<p>Note: Shaders can only be used in WebGL mode.</p>\n",
+ "example": [
+ "<div modernizr='webgl'>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nasync function setup() {\n mandelbrot = await loadShader('assets/shader.vert', 'assets/shader.frag');\n\n createCanvas(100, 100, WEBGL);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n // Set the shader uniform r to the value 1.5.\n mandelbrot.setUniform('r', 1.5);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n\n describe('A black fractal image on a magenta background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nasync function setup() {\n mandelbrot = await loadShader('assets/shader.vert', 'assets/shader.frag');\n\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "list",
- "description": "<p>Array to reverse</p>\n",
- "type": "Array"
+ "params": [
+ {
+ "name": "vertFilename",
+ "description": "path of the vertex shader to be loaded.",
+ "type": "String|Request"
+ },
+ {
+ "name": "fragFilename",
+ "description": "path of the fragment shader to be loaded.",
+ "type": "String|Request"
+ },
+ {
+ "name": "successCallback",
+ "description": "function to call once the shader is loaded. Can be passed the\n<a href=\"#/p5.Shader\">p5.Shader</a> object.",
+ "optional": 1,
+ "type": "Function"
+ },
+ {
+ "name": "failureCallback",
+ "description": "function to call if the shader fails to load. Can be passed an\n<code>Error</code> event object.",
+ "optional": 1,
+ "type": "Function"
+ }
+ ],
+ "return": {
+ "description": "new shader created from the vertex and fragment shader files.",
+ "type": "Promise<p5.Shader>"
+ }
}
],
"return": {
- "description": "the reversed list",
- "type": "Array"
+ "description": "new shader created from the vertex and fragment shader files.",
+ "type": "Promise<p5.Shader>"
},
- "example": [
- "\n<div class='norender'><code>\nfunction setup() {\n let myArray = ['A', 'B', 'C'];\n print(myArray); // ['A','B','C']\n\n reverse(myArray);\n print(myArray); // ['C','B','A']\n}\n</code></div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "Array Functions"
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/array_functions.js",
- "line": 161,
- "description": "<p>Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().</p>\n",
+ "name": "createShader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 512,
"itemtype": "method",
- "name": "shorten",
- "deprecated": true,
- "deprecationMessage": "Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\">array.pop()</a> instead.",
- "params": [
+ "description": "<p>Creates a new <a href=\"#/p5.Shader\">p5.Shader</a> object.</p>\n<p>Shaders are programs that run on the graphics processing unit (GPU). They\ncan process many pixels at the same time, making them fast for many\ngraphics tasks. They’re written in a language called\n<a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\" target=\"_blank\">GLSL</a>\nand run along with the rest of the code in a sketch.</p>\n<p>Once the <a href=\"#/p5.Shader\">p5.Shader</a> object is created, it can be\nused with the <a href=\"#/p5/shader\">shader()</a> function, as in\n<code>shader(myShader)</code>. A shader program consists of two parts, a vertex shader\nand a fragment shader. The vertex shader affects where 3D geometry is drawn\non the screen and the fragment shader affects color.</p>\n<p>The first parameter, <code>vertSrc</code>, sets the vertex shader. It’s a string that\ncontains the vertex shader program written in GLSL.</p>\n<p>The second parameter, <code>fragSrc</code>, sets the fragment shader. It’s a string\nthat contains the fragment shader program written in GLSL.</p>\n<p>A shader can optionally describe hooks, which are functions in GLSL that\nusers may choose to provide to customize the behavior of the shader using the\n<a href=\"#/p5.Shader/modify\"><code>modify()</code></a> method of <code>p5.Shader</code>. These are added by\ndescribing the hooks in a third parameter, <code>options</code>, and referencing the hooks in\nyour <code>vertSrc</code> or <code>fragSrc</code>. Hooks for the vertex or fragment shader are described under\nthe <code>vertex</code> and <code>fragment</code> keys of <code>options</code>. Each one is an object. where each key is\nthe type and name of a hook function, and each value is a string with the\nparameter list and default implementation of the hook. For example, to let users\noptionally run code at the start of the vertex shader, the options object could\ninclude:</p>\n<pre><code class=\"language-js\">{\n vertex: {\n 'void beforeVertex': '() {}'\n }\n}</code></pre><p>Then, in your vertex shader source, you can run a hook by calling a function\nwith the same name prefixed by <code>HOOK_</code>. If you want to check if the default\nhook has been replaced, maybe to avoid extra overhead, you can check if the\nsame name prefixed by <code>AUGMENTED_HOOK_</code> has been defined:</p>\n<pre><code class=\"language-glsl\">void main() {\n // In most cases, just calling the hook is fine:\n HOOK_beforeVertex();\n\n // Alternatively, for more efficiency:\n #ifdef AUGMENTED_HOOK_beforeVertex\n HOOK_beforeVertex();\n #endif\n\n // Add the rest of your shader code here!\n}</code></pre><p>Note: Only filter shaders can be used in 2D mode. All shaders can be used\nin WebGL mode.</p>\n",
+ "example": [
+ "<div modernizr='webgl'>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let shaderProgram = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(shaderProgram);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let mandelbrot = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n // Set the shader uniform r to 0.005.\n // r is the size of the image in Mandelbrot-space.\n mandelbrot.setUniform('r', 0.005);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A black fractal image on a magenta background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nlet mandelbrot;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n mandelbrot = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates\n // between 0 and 0.005.\n // r is the size of the image in Mandelbrot-space.\n let radius = 0.005 * (sin(frameCount * 0.01) + 1);\n mandelbrot.setUniform('r', radius);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n</code>\n</div>\n\n<div>\n<code>\n// A shader with hooks.\nlet myShader;\n\n// A shader with modified hooks.\nlet modifiedShader;\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\n\nvoid main() {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a fragment shader that uses a hook.\nlet fragSrc = `\nprecision highp float;\nvoid main() {\n // Let users override the color\n gl_FragColor = HOOK_getColor(vec4(1., 0., 0., 1.));\n}\n`;\n\nfunction setup() {\n createCanvas(50, 50, WEBGL);\n\n // Create a shader with hooks\n myShader = createShader(vertSrc, fragSrc, {\n fragment: {\n 'vec4 getColor': '(vec4 color) { return color; }'\n }\n });\n\n // Make a version of the shader with a hook overridden\n modifiedShader = myShader.modify({\n 'vec4 getColor': `(vec4 color) {\n return vec4(0., 0., 1., 1.);\n }`\n });\n}\n\nfunction draw() {\n noStroke();\n\n push();\n shader(myShader);\n translate(-width/3, 0);\n sphere(10);\n pop();\n\n push();\n shader(modifiedShader);\n translate(width/3, 0);\n sphere(10);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "list",
- "description": "<p>Array to shorten</p>\n",
- "type": "Array"
+ "params": [
+ {
+ "name": "vertSrc",
+ "description": "source code for the vertex shader.",
+ "type": "String"
+ },
+ {
+ "name": "fragSrc",
+ "description": "source code for the fragment shader.",
+ "type": "String"
+ },
+ {
+ "name": "options",
+ "description": "<p>An optional object describing how this shader can\nbe augmented with hooks. It can include:</p>\n<ul><li><code>vertex</code>: An object describing the available vertex shader hooks.</li><li><code>fragment</code>: An object describing the available frament shader hooks.</li></ul>",
+ "optional": 1,
+ "type": "Object"
+ }
+ ],
+ "return": {
+ "description": "new shader object created from the\nvertex and fragment shaders.",
+ "type": "p5.Shader"
+ }
}
],
"return": {
- "description": "shortened Array",
- "type": "Array"
+ "description": "new shader object created from the\nvertex and fragment shaders.",
+ "type": "p5.Shader"
},
- "example": [
- "\n<div class = 'norender'><code>\nfunction setup() {\n let myArray = ['A', 'B', 'C'];\n print(myArray); // ['A', 'B', 'C']\n let newArray = shorten(myArray);\n print(myArray); // ['A','B','C']\n print(newArray); // ['A','B']\n}\n</code></div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "Array Functions"
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/array_functions.js",
- "line": 185,
- "description": "<p>Shuffles the elements of an array.</p>\n<p>The first parameter, <code>array</code>, is the array to be shuffled. For example,\ncalling <code>shuffle(myArray)</code> will shuffle the elements of <code>myArray</code>. By\ndefault, the original array won’t be modified. Instead, a copy will be\ncreated, shuffled, and returned.</p>\n<p>The second parameter, <code>modify</code>, is optional. If <code>true</code> is passed, as in\n<code>shuffle(myArray, true)</code>, then the array will be shuffled in place without\nmaking a copy.</p>\n",
+ "name": "loadFilterShader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 553,
"itemtype": "method",
- "name": "shuffle",
- "params": [
- {
- "name": "array",
- "description": "<p>array to shuffle.</p>\n",
- "type": "Array"
- },
+ "description": "Creates and loads a filter shader from an external file.",
+ "example": [
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nasync function setup() {\n myShader = await loadFilterShader('assets/basic.frag');\n createCanvas(100, 100, WEBGL);\n noStroke();\n}\n\nfunction draw() {\n // shader() sets the active shader with our shader\n shader(myShader);\n\n // rect gives us some geometry on the screen\n rect(-50, -50, width, height);\n}\n</code>\n</div>"
+ ],
+ "alt": "A rectangle with a shader applied to it.",
+ "overloads": [
{
- "name": "bool",
- "description": "<p>if <code>true</code>, shuffle the original array in place. Defaults to <code>false</code>.</p>\n",
- "type": "Boolean",
- "optional": true
+ "params": [
+ {
+ "name": "fragFilename",
+ "description": "path to the fragment shader file",
+ "type": "String"
+ },
+ {
+ "name": "successCallback",
+ "description": "callback to be called once the shader is\nloaded. Will be passed the\n<a href=\"#/p5.Shader\">p5.Shader</a> object.",
+ "optional": 1,
+ "type": "Function"
+ },
+ {
+ "name": "failureCallback",
+ "description": "callback to be called if there is an error\nloading the shader. Will be passed the\nerror event.",
+ "optional": 1,
+ "type": "Function"
+ }
+ ],
+ "return": {
+ "description": "a promise that resolves with a shader object",
+ "type": "Promise<p5.Shader>"
+ }
}
],
"return": {
- "description": "shuffled array.",
- "type": "Array"
+ "description": "a promise that resolves with a shader object",
+ "type": "Promise<p5.Shader>"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of colors.\n let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];\n\n // Create a shuffled copy of the array.\n let shuffledColors = shuffle(colors);\n\n // Draw a row of circles using the original array.\n for (let i = 0; i < colors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = (i + 1) * 12.5;\n\n // Style the circle.\n let c = colors[i];\n fill(c);\n\n // Draw the circle.\n circle(x, 33, 10);\n }\n\n // Draw a row of circles using the original array.\n for (let i = 0; i < shuffledColors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = (i + 1) * 12.5;\n\n // Style the circle.\n let c = shuffledColors[i];\n fill(c);\n\n // Draw the circle.\n circle(x, 67, 10);\n }\n\n describe(\n 'Two rows of circles on a gray background. The top row follows the color sequence ROYGBIV. The bottom row has all the same colors but they are shuffled.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of colors.\n let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];\n\n // Shuffle the array.\n shuffle(colors, true);\n\n // Draw a row of circles using the original array.\n for (let i = 0; i < colors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = (i + 1) * 12.5;\n\n // Style the circle.\n let c = colors[i];\n fill(c);\n\n // Draw the circle.\n circle(x, 50, 10);\n }\n\n describe(\n 'A row of colorful circles on a gray background. Their sequence changes each time the sketch runs.'\n );\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "Array Functions"
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/array_functions.js",
- "line": 300,
- "description": "<p>Sorts an array of numbers from smallest to largest, or puts an array of\nwords in alphabetical order. The original array is not modified; a\nre-ordered array is returned. The count parameter states the number of\nelements to sort. For example, if there are 12 elements in an array and\ncount is set to 5, only the first 5 elements in the array will be sorted.</p>\n",
+ "name": "createFilterShader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 666,
"itemtype": "method",
- "name": "sort",
- "deprecated": true,
- "deprecationMessage": "Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\">array.sort()</a> instead.",
- "params": [
- {
- "name": "list",
- "description": "<p>Array to sort</p>\n",
- "type": "Array"
- },
+ "description": "<p>Creates a <a href=\"#/p5.Shader\">p5.Shader</a> object to be used with the\n<a href=\"#/p5/filter\">filter()</a> function.</p>\n<p><code>createFilterShader()</code> works like\n<a href=\"#/p5/createShader\">createShader()</a> but has a default vertex\nshader included. <code>createFilterShader()</code> is intended to be used along with\n<a href=\"#/p5/filter\">filter()</a> for filtering the contents of a canvas.\nA filter shader will be applied to the whole canvas instead of just\n<a href=\"#/p5.Geometry\">p5.Geometry</a> objects.</p>\n<p>The parameter, <code>fragSrc</code>, sets the fragment shader. It’s a string that\ncontains the fragment shader program written in\n<a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\" target=\"_blank\">GLSL</a>.</p>\n<p>The <a href=\"#/p5.Shader\">p5.Shader</a> object that's created has some\nuniforms that can be set:</p>\n<ul><li><code>sampler2D tex0</code>, which contains the canvas contents as a texture.</li><li><code>vec2 canvasSize</code>, which is the 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. This is calculated as <code>1.0 / (width * density)</code> for the pixel width and <code>1.0 / (height * density)</code> for the pixel height.</li></ul><p>The <a href=\"#/p5.Shader\">p5.Shader</a> that's created also provides\n<code>varying vec2 vTexCoord</code>, a coordinate with values between 0 and 1.\n<code>vTexCoord</code> describes where on the canvas the pixel will be drawn.</p>\n<p>For more info about filters and shaders, see Adam Ferriss' <a href=\"https://github.com/aferriss/p5jsShaderExamples\">repo of shader examples</a>\nor the <a href=\"https://p5js.org/learn/getting-started-in-webgl-shaders.html\">Introduction to Shaders</a> tutorial.</p>\n",
+ "example": [
+ "<div modernizr='webgl'>\n<code>\nfunction setup() {\n let fragSrc = `precision highp float;\n void main() {\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n }`;\n\n createCanvas(100, 100, WEBGL);\n let s = createFilterShader(fragSrc);\n filter(s);\n describe('a yellow canvas');\n}\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet img, s;\nasync function setup() {\n img = await loadImage('assets/bricks.jpg');\n let fragSrc = `precision highp float;\n\n // x,y coordinates, given from the vertex shader\n varying vec2 vTexCoord;\n\n // the canvas contents, given from filter()\n uniform sampler2D tex0;\n // other useful information from the canvas\n uniform vec2 texelSize;\n uniform vec2 canvasSize;\n // a custom variable from this sketch\n uniform float darkness;\n\n void main() {\n // get the color at current pixel\n vec4 color = texture2D(tex0, vTexCoord);\n // set the output color\n color.b = 1.0;\n color *= darkness;\n gl_FragColor = vec4(color.rgb, 1.0);\n }`;\n\n createCanvas(100, 100, WEBGL);\n s = createFilterShader(fragSrc);\n}\n\nfunction draw() {\n image(img, -50, -50);\n s.setUniform('darkness', 0.5);\n filter(s);\n describe('a image of bricks tinted dark blue');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "count",
- "description": "<p>number of elements to sort, starting from 0</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "fragSrc",
+ "description": "source code for the fragment shader.",
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "new shader object created from the fragment shader.",
+ "type": "p5.Shader"
+ }
}
],
"return": {
- "description": "the sorted list",
- "type": "Array"
+ "description": "new shader object created from the fragment shader.",
+ "type": "p5.Shader"
},
- "example": [
- "\n<div class = 'norender'><code>\nfunction setup() {\n let words = ['banana', 'apple', 'pear', 'lime'];\n print(words); // ['banana', 'apple', 'pear', 'lime']\n let count = 4; // length of array\n\n words = sort(words, count);\n print(words); // ['apple', 'banana', 'lime', 'pear']\n}\n</code></div>\n<div class = 'norender'><code>\nfunction setup() {\n let numbers = [2, 6, 1, 5, 14, 9, 8, 12];\n print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]\n let count = 5; // Less than the length of the array\n\n numbers = sort(numbers, count);\n print(numbers); // [1,2,5,6,14,9,8,12]\n}\n</code></div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "Array Functions"
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/array_functions.js",
- "line": 346,
- "description": "<p>Inserts a value or an array of values into an existing array. The first\nparameter specifies the initial array to be modified, and the second\nparameter defines the data to be inserted. The third parameter is an index\nvalue which specifies the array position from which to insert data.\n(Remember that array index numbering starts at zero, so the first position\nis 0, the second position is 1, and so on.)</p>\n",
+ "name": "shader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 900,
"itemtype": "method",
- "name": "splice",
- "deprecated": true,
- "deprecationMessage": "Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\">array.splice()</a> instead.",
- "params": [
- {
- "name": "list",
- "description": "<p>Array to splice into</p>\n",
- "type": "Array"
- },
- {
- "name": "value",
- "description": "<p>value to be spliced in</p>\n",
- "type": "Any"
- },
+ "chainable": 1,
+ "description": "<p>Sets the <a href=\"#/p5.Shader\">p5.Shader</a> object to apply while drawing.</p>\n<p>Shaders are programs that run on the graphics processing unit (GPU). They\ncan process many pixels or vertices at the same time, making them fast for\nmany graphics tasks. They’re written in a language called\n<a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\" target=\"_blank\">GLSL</a>\nand run along with the rest of the code in a sketch.\n<a href=\"#/p5.Shader\">p5.Shader</a> objects can be created using the\n<a href=\"#/p5/createShader\">createShader()</a> and\n<a href=\"#/p5/loadShader\">loadShader()</a> functions.</p>\n<p>The parameter, <code>s</code>, is the <a href=\"#/p5.Shader\">p5.Shader</a> object to\napply. For example, calling <code>shader(myShader)</code> applies <code>myShader</code> to\nprocess each pixel on the canvas. This only changes the fill (the inner part of shapes),\nbut does not affect the outlines (strokes) or any images drawn using the <code>image()</code> function.\nThe source code from a <a href=\"#/p5.Shader\">p5.Shader</a> object's\nfragment and vertex shaders will be compiled the first time it's passed to\n<code>shader()</code>. See\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/compileShader\" target=\"_blank\">MDN</a>\nfor more information about compiling shaders.</p>\n<p>Calling <a href=\"#/p5/resetShader\">resetShader()</a> restores a sketch’s\ndefault shaders.</p>\n<p>Note: Shaders can only be used in WebGL mode.</p>\n<div>\n<p><p>If you want to apply shaders to strokes or images, use the following methods:</p>\n<ul><li><a href=\"#/p5/strokeShader\">strokeShader()</a> : Applies a shader to the stroke (outline) of shapes, allowing independent control over the stroke rendering using shaders.</li><li><a href=\"#/p5/imageShader\">imageShader()</a> : Applies a shader to images or textures, controlling how the shader modifies their appearance during rendering.</li></ul></p>\n</div>",
+ "example": [
+ "<div modernizr='webgl'>\n<code>\nlet fillShader;\n\nlet vertSrc = `\nprecision highp float;\nattribute vec3 aPosition;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nvarying vec3 vPosition;\n\nvoid main() {\n vPosition = aPosition;\n gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);\n}\n`;\n\nlet fragSrc = `\nprecision highp float;\nuniform vec3 uLightDir;\nvarying vec3 vPosition;\n\nvoid main() {\n vec3 lightDir = normalize(uLightDir);\n float brightness = dot(lightDir, normalize(vPosition));\n brightness = clamp(brightness, 0.4, 1.0);\n vec3 color = vec3(0.3, 0.5, 1.0);\n color = color * brightness * 3.0;\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n fillShader = createShader(vertSrc, fragSrc);\n noStroke();\n describe('A rotating torus with simulated directional lighting.');\n}\n\nfunction draw() {\n background(20, 20, 40);\n let lightDir = [0.5, 0.5, -1.0];\n fillShader.setUniform('uLightDir', lightDir);\n shader(fillShader);\n rotateY(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n //lights();\n torus(25, 10, 30, 30);\n}\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet fillShader;\n\nlet vertSrc = `\nprecision highp float;\nattribute vec3 aPosition;\nuniform mat4 uProjectionMatrix;\nuniform mat4 uModelViewMatrix;\nvarying vec3 vPosition;\nvoid main() {\n vPosition = aPosition;\n gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);\n}\n`;\n\nlet fragSrc = `\nprecision highp float;\nuniform vec3 uLightPos;\nuniform vec3 uFillColor;\nvarying vec3 vPosition;\nvoid main() {\n float brightness = dot(normalize(uLightPos), normalize(vPosition));\n brightness = clamp(brightness, 0.0, 1.0);\n vec3 color = uFillColor * brightness;\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n fillShader = createShader(vertSrc, fragSrc);\n shader(fillShader);\n noStroke();\n describe('A square affected by both fill color and lighting, with lights controlled by mouse.');\n}\n\nfunction draw() {\n let lightPos = [(mouseX - width / 2) / width,\n (mouseY - height / 2) / height, 1.0];\n fillShader.setUniform('uLightPos', lightPos);\n let fillColor = [map(mouseX, 0, width, 0, 1),\n map(mouseY, 0, height, 0, 1), 0.5];\n fillShader.setUniform('uFillColor', fillColor);\n plane(100, 100);\n}\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n\n myShader = baseMaterialShader().modify({\n declarations: 'uniform float time;',\n 'vec4 getFinalColor': `(vec4 color) {\n float r = 0.2 + 0.5 * abs(sin(time + 0.0));\n float g = 0.2 + 0.5 * abs(sin(time + 1.0));\n float b = 0.2 + 0.5 * abs(sin(time + 2.0));\n color.rgb = vec3(r, g, b);\n return color;\n }`\n });\n\n noStroke();\n describe('A 3D cube with dynamically changing colors on a beige background.');\n}\n\nfunction draw() {\n background(245, 245, 220);\n shader(myShader);\n myShader.setUniform('time', millis() / 1000.0);\n\n box(50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "position",
- "description": "<p>in the array from which to insert data</p>\n",
- "type": "Integer"
+ "params": [
+ {
+ "name": "s",
+ "description": "<a href=\"#/p5.Shader\">p5.Shader</a> object\nto apply.",
+ "type": "p5.Shader"
+ }
+ ]
}
],
- "return": {
- "description": "the list",
- "type": "Array"
- },
- "example": [
- "\n<div class = 'norender'><code>\nfunction setup() {\n let myArray = [0, 1, 2, 3, 4];\n let insArray = ['A', 'B', 'C'];\n print(myArray); // [0, 1, 2, 3, 4]\n print(insArray); // ['A','B','C']\n\n splice(myArray, insArray, 3);\n print(myArray); // [0,1,2,'A','B','C',3,4]\n}\n</code></div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "Array Functions"
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/array_functions.js",
- "line": 381,
- "description": "<p>Extracts an array of elements from an existing array. The list parameter\ndefines the array from which the elements will be copied, and the start\nand count parameters specify which elements to extract. If no count is\ngiven, elements will be extracted from the start to the end of the array.\nWhen specifying the start, remember that the first array element is 0.\nThis function does not change the source array.</p>\n",
+ "name": "strokeShader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 1073,
"itemtype": "method",
- "name": "subset",
- "deprecated": true,
- "deprecationMessage": "Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\">array.slice()</a> instead.",
- "params": [
- {
- "name": "list",
- "description": "<p>Array to extract from</p>\n",
- "type": "Array"
- },
- {
- "name": "start",
- "description": "<p>position to begin</p>\n",
- "type": "Integer"
- },
+ "chainable": 1,
+ "description": "<p>Sets the <a href=\"#/p5.Shader\">p5.Shader</a> object to apply for strokes.</p>\n<p>This method applies the given shader to strokes, allowing customization of\nhow lines and outlines are drawn in 3D space. The shader will be used for\nstrokes until <a href=\"#/p5/resetShader\">resetShader()</a> is called or another\nstrokeShader is applied.</p>\n<p>The shader will be used for:</p>\n<ul><li>Strokes only, regardless of whether the uniform <code>uStrokeWeight</code> is present.</li></ul><p>To further customize its behavior, refer to the various hooks provided by\nthe <a href=\"#/p5/baseStrokeShader\">baseStrokeShader()</a> method, which allow\ncontrol over stroke weight, vertex positions, colors, and more.</p>\n",
+ "example": [
+ "<div modernizr='webgl'>\n<code>\nlet animatedStrokeShader;\n\nlet vertSrc = `\nprecision mediump int;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform float uStrokeWeight;\n\nuniform bool uUseLineColor;\nuniform vec4 uMaterialColor;\n\nuniform vec4 uViewport;\nuniform int uPerspective;\nuniform int uStrokeJoin;\n\nattribute vec4 aPosition;\nattribute vec3 aTangentIn;\nattribute vec3 aTangentOut;\nattribute float aSide;\nattribute vec4 aVertexColor;\n\nvoid main() {\n vec4 posp = uModelViewMatrix * aPosition;\n vec4 posqIn = uModelViewMatrix * (aPosition + vec4(aTangentIn, 0));\n vec4 posqOut = uModelViewMatrix * (aPosition + vec4(aTangentOut, 0));\n\n float facingCamera = pow(\n abs(normalize(posqIn-posp).z),\n 0.25\n );\n\n float scale = mix(1., 0.995, facingCamera);\n\n posp.xyz = posp.xyz * scale;\n posqIn.xyz = posqIn.xyz * scale;\n posqOut.xyz = posqOut.xyz * scale;\n\n vec4 p = uProjectionMatrix * posp;\n vec4 qIn = uProjectionMatrix * posqIn;\n vec4 qOut = uProjectionMatrix * posqOut;\n\n vec2 tangentIn = normalize((qIn.xy*p.w - p.xy*qIn.w) * uViewport.zw);\n vec2 tangentOut = normalize((qOut.xy*p.w - p.xy*qOut.w) * uViewport.zw);\n\n vec2 curPerspScale;\n if(uPerspective == 1) {\n curPerspScale = (uProjectionMatrix * vec4(1, sign(uProjectionMatrix[1][1]), 0, 0)).xy;\n } else {\n curPerspScale = p.w / (0.5 * uViewport.zw);\n }\n\n vec2 offset;\n vec2 tangent = aTangentIn == vec3(0.) ? tangentOut : tangentIn;\n vec2 normal = vec2(-tangent.y, tangent.x);\n float normalOffset = sign(aSide);\n float tangentOffset = abs(aSide) - 1.;\n offset = (normal * normalOffset + tangent * tangentOffset) *\n uStrokeWeight * 0.5;\n\n gl_Position.xy = p.xy + offset.xy * curPerspScale;\n gl_Position.zw = p.zw;\n}\n`;\n\nlet fragSrc = `\nprecision mediump float;\nuniform float uTime;\n\nvoid main() {\n float wave = sin(gl_FragCoord.x * 0.1 + uTime) * 0.5 + 0.5;\n gl_FragColor = vec4(wave, 0.5, 1.0, 1.0); // Animated color based on time\n}\n`;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n animatedStrokeShader = createShader(vertSrc, fragSrc);\n strokeShader(animatedStrokeShader);\n strokeWeight(4);\n\n describe('A hollow cube rotating continuously with its stroke colors changing dynamically over time against a static gray background.');\n}\n\nfunction draw() {\n animatedStrokeShader.setUniform('uTime', millis() / 1000.0);\n background(250);\n rotateY(frameCount * 0.02);\n noFill();\n orbitControl();\n box(50);\n}\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseStrokeShader().modify({\n 'float random': `(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1471);\n p3 += dot(p3, p3.yzx + 32.33);\n return fract((p3.x + p3.y) * p3.z);\n }`,\n 'Inputs getPixelInputs': `(Inputs inputs) {\n // Modify alpha with dithering effect\n float a = inputs.color.a;\n inputs.color.a = 1.0;\n inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0;\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n strokeShader(myShader);\n strokeWeight(12);\n beginShape();\n for (let i = 0; i <= 50; i++) {\n stroke(\n map(i, 0, 50, 150, 255),\n 100 + 155 * sin(i / 5),\n 255 * map(i, 0, 50, 1, 0)\n );\n vertex(\n map(i, 0, 50, 1, -1) * width / 3,\n 50 * cos(i / 10 + frameCount / 80)\n );\n }\n endShape();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "count",
- "description": "<p>number of values to extract</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "s",
+ "description": "<a href=\"#/p5.Shader\">p5.Shader</a> object\nto apply for strokes.",
+ "type": "p5.Shader"
+ }
+ ]
}
],
- "return": {
- "description": "Array of extracted elements",
- "type": "Array"
- },
- "example": [
- "\n<div class = 'norender'><code>\nfunction setup() {\n let myArray = [1, 2, 3, 4, 5];\n print(myArray); // [1, 2, 3, 4, 5]\n\n let sub1 = subset(myArray, 0, 3);\n let sub2 = subset(myArray, 2, 2);\n print(sub1); // [1,2,3]\n print(sub2); // [3,4]\n}\n</code></div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "Array Functions"
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/conversion.js",
- "line": 10,
- "description": "<p>Converts a <code>String</code> to a floating point (decimal) <code>Number</code>.</p>\n<p><code>float()</code> converts strings that resemble numbers, such as <code>'12.34'</code>, into\nnumbers.</p>\n<p>The parameter, <code>str</code>, is the string value to convert. For example, calling\n<code>float('12.34')</code> returns the number <code>12.34</code>. If an array of strings is\npassed, as in <code>float(['12.34', '56.78'])</code>, then an array of numbers will be\nreturned.</p>\n<p>Note: If a string can't be converted to a number, as in <code>float('giraffe')</code>,\nthen the value <code>NaN</code> (not a number) will be returned.</p>\n",
+ "name": "imageShader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 1226,
"itemtype": "method",
- "name": "float",
- "return": {
- "description": "converted number.",
- "type": "Number"
- },
+ "chainable": 1,
+ "description": "<p>Sets the <a href=\"#/p5.Shader\">p5.Shader</a> object to apply for images.</p>\n<p>This method allows the user to apply a custom shader to images, enabling\nadvanced visual effects such as pixel manipulation, color adjustments,\nor dynamic behavior. The shader will be applied to the image drawn using\nthe <a href=\"#/p5/image\">image()</a> function.</p>\n<p>The shader will be used exclusively for:</p>\n<ul><li><code>image()</code> calls, applying only when drawing 2D images.</li><li>This shader will NOT apply to images used in <a href=\"#/p5/texture\">texture()</a> or other 3D contexts.\nAny attempts to use the imageShader in these cases will be ignored.</li></ul>",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = '12.3';\n\n // Convert the string to a number.\n let converted = float(original);\n\n // Double the converted value.\n let twice = converted * 2;\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(12);\n\n // Display the original and converted values.\n text(`${original} × 2 = ${twice}`, 50, 50);\n\n describe('The text \"12.3 × 2 = 24.6\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of strings.\n let original = ['60', '30', '15'];\n\n // Convert the strings to numbers.\n let diameters = float(original);\n\n for (let d of diameters) {\n // Draw a circle.\n circle(50, 50, d);\n }\n\n describe('Three white, concentric circles on a gray background.');\n}\n</code>\n</div>"
+ "<div modernizr='webgl'>\n<code>\nlet img;\nlet imgShader;\n\nasync function setup() {\n img = await loadImage('assets/outdoor_image.jpg');\n\n createCanvas(200, 200, WEBGL);\n noStroke();\n\n imgShader = createShader(`\n precision mediump float;\n attribute vec3 aPosition;\n attribute vec2 aTexCoord;\n varying vec2 vTexCoord;\n uniform mat4 uModelViewMatrix;\n uniform mat4 uProjectionMatrix;\n\n void main() {\n vTexCoord = aTexCoord;\n gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);\n }\n `, `\n precision mediump float;\n varying vec2 vTexCoord;\n uniform sampler2D uTexture;\n uniform vec2 uMousePos;\n\n void main() {\n vec4 texColor = texture2D(uTexture, vTexCoord);\n // Adjust the color based on mouse position\n float r = uMousePos.x * texColor.r;\n float g = uMousePos.y * texColor.g;\n gl_FragColor = vec4(r, g, texColor.b, texColor.a);\n }\n `);\n\n describe(\n 'An image on a gray background where the colors change based on the mouse position.'\n );\n}\n\nfunction draw() {\n background(220);\n\n imageShader(imgShader);\n\n // Map the mouse position to a range between 0 and 1\n let mousePosX = map(mouseX, 0, width, 0, 1);\n let mousePosY = map(mouseY, 0, height, 0, 1);\n\n // Pass the mouse position to the shader as a uniform\n imgShader.setUniform('uMousePos', [mousePosX, mousePosY]);\n\n // Bind the image texture to the shader\n imgShader.setUniform('uTexture', img);\n\n image(img, -width / 2, -height / 2, width, height);\n}\n\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet img;\nlet imgShader;\n\nasync function setup() {\n img = await loadImage('assets/outdoor_image.jpg');\n\n createCanvas(200, 200, WEBGL);\n noStroke();\n\n imgShader = createShader(`\n precision mediump float;\n attribute vec3 aPosition;\n attribute vec2 aTexCoord;\n varying vec2 vTexCoord;\n uniform mat4 uModelViewMatrix;\n uniform mat4 uProjectionMatrix;\n\n void main() {\n vTexCoord = aTexCoord;\n gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);\n }\n `, `\n precision mediump float;\n varying vec2 vTexCoord;\n uniform sampler2D uTexture;\n uniform vec2 uMousePos;\n\n void main() {\n // Distance from the current pixel to the mouse\n float distFromMouse = distance(vTexCoord, uMousePos);\n\n // Adjust pixelation based on distance (closer = more detail, farther = blockier)\n float pixelSize = mix(0.002, 0.05, distFromMouse);\n vec2 pixelatedCoord = vec2(floor(vTexCoord.x / pixelSize) * pixelSize,\n floor(vTexCoord.y / pixelSize) * pixelSize);\n\n vec4 texColor = texture2D(uTexture, pixelatedCoord);\n gl_FragColor = texColor;\n }\n `);\n\n describe('A static image with a grid-like, pixelated effect created by the shader. Each cell in the grid alternates visibility, producing a dithered visual effect.');\n}\n\nfunction draw() {\n background(220);\n imageShader(imgShader);\n\n let mousePosX = map(mouseX, 0, width, 0, 1);\n let mousePosY = map(mouseY, 0, height, 0, 1);\n\n imgShader.setUniform('uMousePos', [mousePosX, mousePosY]);\n imgShader.setUniform('uTexture', img);\n image(img, -width / 2, -height / 2, width, height);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "Conversion",
"overloads": [
{
- "line": 10,
"params": [
{
- "name": "str",
- "description": "<p>string to convert.</p>\n",
- "type": "String"
+ "name": "s",
+ "description": "<a href=\"#/p5.Shader\">p5.Shader</a> object\nto apply for images.",
+ "type": "p5.Shader"
}
- ],
- "return": {
- "description": "converted number.",
- "type": "Number"
- }
- },
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
+ },
+ {
+ "name": "baseMaterialShader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 1506,
+ "itemtype": "method",
+ "description": "<p>Get the default shader used with lights, materials,\nand textures.</p>\n<p>You can call <a href=\"#/p5.Shader/modify\"><code>baseMaterialShader().modify()</code></a>\nand change any of the following hooks:</p>\n<table>\n<tr><th>Hook</th><th>Description</th></tr>\n<tr><td><p><code>void beforeVertex</code></p>\n</td><td><p>Called at the start of the vertex shader.</p>\n</td></tr>\n<tr><td><p><code>Vertex getObjectInputs</code></p>\n</td><td><p>Update the vertex data of the model being drawn before any positioning has been applied. It takes in a <code>Vertex</code> struct, which includes:</p>\n<ul><li><code>vec3 position</code>, the position of the vertex</li><li><code>vec3 normal</code>, the direction facing out of the surface</li><li><code>vec2 texCoord</code>, the texture coordinates associeted with the vertex</li><li><code>vec4 color</code>, the per-vertex color\nThe struct can be modified and returned.</li></ul></td></tr>\n<tr><td><p><code>Vertex getWorldInputs</code></p>\n</td><td><p>Update the vertex data of the model being drawn after transformations such as <code>translate()</code> and <code>scale()</code> have been applied, but before the camera has been applied. It takes in a <code>Vertex</code> struct like, in the <code>getObjectInputs</code> hook above, that can be modified and returned.</p>\n</td></tr>\n<tr><td><p><code>Vertex getCameraInputs</code></p>\n</td><td><p>Update the vertex data of the model being drawn as they appear relative to the camera. It takes in a <code>Vertex</code> struct like, in the <code>getObjectInputs</code> hook above, that can be modified and returned.</p>\n</td></tr>\n<tr><td><p><code>void afterVertex</code></p>\n</td><td><p>Called at the end of the vertex shader.</p>\n</td></tr>\n<tr><td><p><code>void beforeFragment</code></p>\n</td><td><p>Called at the start of the fragment shader.</p>\n</td></tr>\n<tr><td><p><code>Inputs getPixelInputs</code></p>\n</td><td><p>Update the per-pixel inputs of the material. It takes in an <code>Inputs</code> struct, which includes:</p>\n<ul><li><code>vec3 normal</code>, the direction pointing out of the surface</li><li><code>vec2 texCoord</code>, a vector where <code>x</code> and <code>y</code> are between 0 and 1 describing the spot on a texture the pixel is mapped to, as a fraction of the texture size</li><li><code>vec3 ambientLight</code>, the ambient light color on the vertex</li><li><code>vec4 color</code>, the base material color of the pixel</li><li><code>vec3 ambientMaterial</code>, the color of the pixel when affected by ambient light</li><li><code>vec3 specularMaterial</code>, the color of the pixel when reflecting specular highlights</li><li><code>vec3 emissiveMaterial</code>, the light color emitted by the pixel</li><li><code>float shininess</code>, a number representing how sharp specular reflections should be, from 1 to infinity</li><li><code>float metalness</code>, a number representing how mirrorlike the material should be, between 0 and 1\nThe struct can be modified and returned.</li></ul></td></tr>\n<tr><td><p><code>vec4 combineColors</code></p>\n</td><td><p>Take in a <code>ColorComponents</code> struct containing all the different components of light, and combining them into\na single final color. The struct contains:</p>\n<ul><li><code>vec3 baseColor</code>, the base color of the pixel</li><li><code>float opacity</code>, the opacity between 0 and 1 that it should be drawn at</li><li><code>vec3 ambientColor</code>, the color of the pixel when affected by ambient light</li><li><code>vec3 specularColor</code>, the color of the pixel when affected by specular reflections</li><li><code>vec3 diffuse</code>, the amount of diffused light hitting the pixel</li><li><code>vec3 ambient</code>, the amount of ambient light hitting the pixel</li><li><code>vec3 specular</code>, the amount of specular reflection hitting the pixel</li><li><code>vec3 emissive</code>, the amount of light emitted by the pixel</li></ul></td></tr>\n<tr><td><p><code>vec4 getFinalColor</code></p>\n</td><td><p>Update the final color after mixing. It takes in a <code>vec4 color</code> and must return a modified version.</p>\n</td></tr>\n<tr><td><p><code>void afterFragment</code></p>\n</td><td><p>Called at the end of the fragment shader.</p>\n</td></tr>\n</table><p>Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>\n<p>Call <code>baseMaterialShader().inspectHooks()</code> to see all the possible hooks and\ntheir default implementations.</p>\n",
+ "example": [
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify(() => {\n let time = uniformFloat(() => millis());\n getWorldInputs((inputs) => {\n inputs.position.y +=\n 20 * sin(time * 0.001 + inputs.position.x * 0.05);\n return inputs;\n });\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n lights();\n noStroke();\n fill('red');\n sphere(50);\n}\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n declarations: 'vec3 myNormal;',\n 'Inputs getPixelInputs': `(Inputs inputs) {\n myNormal = inputs.normal;\n return inputs;\n }`,\n 'vec4 getFinalColor': `(vec4 color) {\n return mix(\n vec4(1.0, 1.0, 1.0, 1.0),\n color,\n abs(dot(myNormal, vec3(0.0, 0.0, 1.0)))\n );\n }`\n });\n}\n\nfunction draw() {\n background(255);\n rotateY(millis() * 0.001);\n shader(myShader);\n lights();\n noStroke();\n fill('red');\n torus(30);\n}\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\nlet environment;\n\nasync function setup() {\n environment = await loadImage('assets/outdoor_spheremap.jpg');\n\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify(() => {\n getPixelInputs((inputs) => {\n let factor = sin(\n TWO_PI * (inputs.texCoord.x + inputs.texCoord.y)\n );\n inputs.shininess = mix(1, 100, factor);\n inputs.metalness = factor;\n return inputs;\n })\n });\n}\n\nfunction draw() {\n panorama(environment);\n ambientLight(100);\n imageLight(environment);\n rotateY(millis() * 0.001);\n shader(myShader);\n noStroke();\n fill(255);\n specularMaterial(150);\n sphere(50);\n}\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify(() => {\n getPixelInputs((inputs) => {\n inputs.normal.x += 0.2 * sin(\n sin(TWO_PI * dot(inputs.texCoord.yx, vec2(10, 25)))\n );\n inputs.normal.y += 0.2 * sin(\n sin(TWO_PI * dot(inputs.texCoord, vec2(10, 25)))\n );\n inputs.normal = normalize(inputs.normal);\n return inputs;\n });\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n ambientLight(150);\n pointLight(\n 255, 255, 255,\n 100*cos(frameCount*0.04), -50, 100*sin(frameCount*0.04)\n );\n noStroke();\n fill('red');\n shininess(200);\n specularMaterial(255);\n sphere(50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 80,
- "params": [
- {
- "name": "ns",
- "description": "<p>array of strings to convert.</p>\n",
- "type": "String[]"
- }
- ],
+ "params": [],
"return": {
- "description": "converted numbers.",
- "type": "Number[]"
+ "description": "The material shader",
+ "type": "p5.Shader"
}
}
- ]
+ ],
+ "return": {
+ "description": "The material shader",
+ "type": "p5.Shader"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/conversion.js",
- "line": 92,
- "description": "<p>Converts a <code>Boolean</code>, <code>String</code>, or decimal <code>Number</code> to an integer.</p>\n<p><code>int()</code> converts values to integers. Integers are positive or negative\nnumbers without decimals. If the original value has decimals, as in -34.56,\nthey're removed to produce an integer such as -34.</p>\n<p>The parameter, <code>n</code>, is the value to convert. If <code>n</code> is a Boolean, as in\n<code>int(false)</code> or <code>int(true)</code>, then the number 0 (<code>false</code>) or 1 (<code>true</code>) will\nbe returned. If <code>n</code> is a string or number, as in <code>int('45')</code> or\n<code>int(67.89)</code>, then an integer will be returned. If an array is passed, as\nin <code>int([12.34, 56.78])</code>, then an array of integers will be returned.</p>\n<p>Note: If a value can't be converted to a number, as in <code>int('giraffe')</code>,\nthen the value <code>NaN</code> (not a number) will be returned.</p>\n",
+ "name": "baseFilterShader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 1577,
"itemtype": "method",
- "name": "int",
+ "description": "<p>Get the base shader for filters.</p>\n<p>You can then call <a href=\"#/p5.Shader/modify\"><code>baseFilterShader().modify()</code></a>\nand change the following hook:</p>\n<table>\n<tr><th>Hook</th><th>Description</th></tr>\n<tr><td><p><code>vec4 getColor</code></p>\n</td><td><p>Output the final color for the current pixel. It takes in two parameters:\n<code>FilterInputs inputs</code>, and <code>in sampler2D canvasContent</code>, and must return a color\nas a <code>vec4</code>.</p>\n<p><code>FilterInputs inputs</code> is a scruct with the following properties:</p>\n<ul><li><code>vec2 texCoord</code>, the position on the canvas, with coordinates between 0 and 1. Calling\n<code>getTexture(canvasContent, texCoord)</code> returns the original color of the current pixel.</li><li><code>vec2 canvasSize</code>, the width and height of the sketch.</li><li><code>vec2 texelSize</code>, the size of one real pixel relative to the size of the whole canvas.\nThis is equivalent to <code>1 / (canvasSize * pixelDensity)</code>.</li></ul><p><code>in sampler2D canvasContent</code> is a texture with the contents of the sketch, pre-filter. Call\n<code>getTexture(canvasContent, someCoordinate)</code> to retrieve the color of the sketch at that coordinate,\nwith coordinate values between 0 and 1.</p>\n</td></tr>\n</table><p>Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1, write your hooks in GLSL ES 100 instead.</p>\n",
+ "example": [
+ "<div modernizr='webgl'>\n<code>\nlet img;\nlet myShader;\n\nasync function setup() {\n img = await loadImage('assets/bricks.jpg');\n createCanvas(100, 100, WEBGL);\n myShader = baseFilterShader().modify(() => {\n let time = uniformFloat(() => millis());\n getColor((inputs, canvasContent) => {\n inputs.texCoord.y +=\n 0.02 * sin(time * 0.001 + inputs.texCoord.x * 5);\n return texture(canvasContent, inputs.texCoord);\n });\n });\n}\n\nfunction draw() {\n image(img, -50, -50);\n filter(myShader);\n describe('an image of bricks, distorting over time');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "The filter shader",
+ "type": "p5.Shader"
+ }
+ }
+ ],
"return": {
- "description": "converted number.",
- "type": "Number"
+ "description": "The filter shader",
+ "type": "p5.Shader"
},
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
+ },
+ {
+ "name": "baseNormalShader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 1743,
+ "itemtype": "method",
+ "description": "<p>Get the shader used by <a href=\"#/p5/normalMaterial\"><code>normalMaterial()</code></a>.</p>\n<p>You can call <a href=\"#/p5.Shader/modify\"><code>baseNormalShader().modify()</code></a>\nand change any of the following hooks:</p>\n<table>\n<tr><th>Hook</th><th>Description</th></tr>\n<tr><td><p><code>void beforeVertex</code></p>\n</td><td><p>Called at the start of the vertex shader.</p>\n</td></tr>\n<tr><td><p><code>Vertex getObjectInputs</code></p>\n</td><td><p>Update the vertex data of the model being drawn before any positioning has been applied. It takes in a <code>Vertex</code> struct, which includes:</p>\n<ul><li><code>vec3 position</code>, the position of the vertex</li><li><code>vec3 normal</code>, the direction facing out of the surface</li><li><code>vec2 texCoord</code>, the texture coordinates associeted with the vertex</li><li><code>vec4 color</code>, the per-vertex color\nThe struct can be modified and returned.</li></ul></td></tr>\n<tr><td><p><code>Vertex getWorldInputs</code></p>\n</td><td><p>Update the vertex data of the model being drawn after transformations such as <code>translate()</code> and <code>scale()</code> have been applied, but before the camera has been applied. It takes in a <code>Vertex</code> struct like, in the <code>getObjectInputs</code> hook above, that can be modified and returned.</p>\n</td></tr>\n<tr><td><p><code>Vertex getCameraInputs</code></p>\n</td><td><p>Update the vertex data of the model being drawn as they appear relative to the camera. It takes in a <code>Vertex</code> struct like, in the <code>getObjectInputs</code> hook above, that can be modified and returned.</p>\n</td></tr>\n<tr><td><p><code>void afterVertex</code></p>\n</td><td><p>Called at the end of the vertex shader.</p>\n</td></tr>\n<tr><td><p><code>void beforeFragment</code></p>\n</td><td><p>Called at the start of the fragment shader.</p>\n</td></tr>\n<tr><td><p><code>vec4 getFinalColor</code></p>\n</td><td><p>Update the final color after mixing. It takes in a <code>vec4 color</code> and must return a modified version.</p>\n</td></tr>\n<tr><td><p><code>void afterFragment</code></p>\n</td><td><p>Called at the end of the fragment shader.</p>\n</td></tr>\n</table><p>Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>\n<p>Call <code>baseNormalShader().inspectHooks()</code> to see all the possible hooks and\ntheir default implementations.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a Boolean variable.\n let original = false;\n\n // Convert the Boolean to an integer.\n let converted = int(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"false : 0\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = '12.34';\n\n // Convert the string to an integer.\n let converted = int(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Display the original and converted values.\n text(`${original} ≈ ${converted}`, 50, 50);\n\n describe('The text \"12.34 ≈ 12\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a decimal number variable.\n let original = 12.34;\n\n // Convert the decimal number to an integer.\n let converted = int(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Display the original and converted values.\n text(`${original} ≈ ${converted}`, 50, 50);\n\n describe('The text \"12.34 ≈ 12\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of strings.\n let original = ['60', '30', '15'];\n\n // Convert the strings to integers.\n let diameters = int(original);\n\n for (let d of diameters) {\n // Draw a circle.\n circle(50, 50, d);\n }\n\n describe('Three white, concentric circles on a gray background.');\n}\n</code>\n</div>"
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseNormalShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n 'Vertex getWorldInputs': `(Vertex inputs) {\n inputs.position.y +=\n 20. * sin(time * 0.001 + inputs.position.x * 0.05);\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n noStroke();\n sphere(50);\n}\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseNormalShader().modify({\n 'Vertex getCameraInputs': `(Vertex inputs) {\n inputs.normal = abs(inputs.normal);\n return inputs;\n }`,\n 'vec4 getFinalColor': `(vec4 color) {\n // Map the r, g, and b values of the old normal to new colors\n // instead of just red, green, and blue:\n vec3 newColor =\n color.r * vec3(89.0, 240.0, 232.0) / 255.0 +\n color.g * vec3(240.0, 237.0, 89.0) / 255.0 +\n color.b * vec3(205.0, 55.0, 222.0) / 255.0;\n newColor = newColor / (color.r + color.g + color.b);\n return vec4(newColor, 1.0) * color.a;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n noStroke();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.015);\n box(100);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "Conversion",
"overloads": [
{
- "line": 92,
- "params": [
- {
- "name": "n",
- "description": "<p>value to convert.</p>\n",
- "type": "String|Boolean|Number"
- }
- ],
+ "params": [],
"return": {
- "description": "converted number.",
- "type": "Number"
+ "description": "The <code>normalMaterial</code> shader",
+ "type": "p5.Shader"
}
- },
+ }
+ ],
+ "return": {
+ "description": "The <code>normalMaterial</code> shader",
+ "type": "p5.Shader"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
+ },
+ {
+ "name": "baseColorShader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 1874,
+ "itemtype": "method",
+ "description": "<p>Get the shader used when no lights or materials are applied.</p>\n<p>You can call <a href=\"#/p5.Shader/modify\"><code>baseColorShader().modify()</code></a>\nand change any of the following hooks:</p>\n<table>\n<tr><th>Hook</th><th>Description</th></tr>\n<tr><td><p><code>void beforeVertex</code></p>\n</td><td><p>Called at the start of the vertex shader.</p>\n</td></tr>\n<tr><td><p><code>Vertex getObjectInputs</code></p>\n</td><td><p>Update the vertex data of the model being drawn before any positioning has been applied. It takes in a <code>Vertex</code> struct, which includes:</p>\n<ul><li><code>vec3 position</code>, the position of the vertex</li><li><code>vec3 normal</code>, the direction facing out of the surface</li><li><code>vec2 texCoord</code>, the texture coordinates associeted with the vertex</li><li><code>vec4 color</code>, the per-vertex color\nThe struct can be modified and returned.</li></ul></td></tr>\n<tr><td><p><code>Vertex getWorldInputs</code></p>\n</td><td><p>Update the vertex data of the model being drawn after transformations such as <code>translate()</code> and <code>scale()</code> have been applied, but before the camera has been applied. It takes in a <code>Vertex</code> struct like, in the <code>getObjectInputs</code> hook above, that can be modified and returned.</p>\n</td></tr>\n<tr><td><p><code>Vertex getCameraInputs</code></p>\n</td><td><p>Update the vertex data of the model being drawn as they appear relative to the camera. It takes in a <code>Vertex</code> struct like, in the <code>getObjectInputs</code> hook above, that can be modified and returned.</p>\n</td></tr>\n<tr><td><p><code>void afterVertex</code></p>\n</td><td><p>Called at the end of the vertex shader.</p>\n</td></tr>\n<tr><td><p><code>void beforeFragment</code></p>\n</td><td><p>Called at the start of the fragment shader.</p>\n</td></tr>\n<tr><td><p><code>vec4 getFinalColor</code></p>\n</td><td><p>Update the final color after mixing. It takes in a <code>vec4 color</code> and must return a modified version.</p>\n</td></tr>\n<tr><td><p><code>void afterFragment</code></p>\n</td><td><p>Called at the end of the fragment shader.</p>\n</td></tr>\n</table><p>Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>\n<p>Call <code>baseColorShader().inspectHooks()</code> to see all the possible hooks and\ntheir default implementations.</p>\n",
+ "example": [
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseColorShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n 'Vertex getWorldInputs': `(Vertex inputs) {\n inputs.position.y +=\n 20. * sin(time * 0.001 + inputs.position.x * 0.05);\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n noStroke();\n fill('red');\n circle(0, 0, 50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 211,
- "params": [
- {
- "name": "ns",
- "description": "<p>values to convert.</p>\n",
- "type": "Array"
- }
- ],
+ "params": [],
"return": {
- "description": "converted numbers.",
- "type": "Number[]"
+ "description": "The color shader",
+ "type": "p5.Shader"
}
}
- ]
+ ],
+ "return": {
+ "description": "The color shader",
+ "type": "p5.Shader"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/conversion.js",
- "line": 232,
- "description": "<p>Converts a <code>Boolean</code> or <code>Number</code> to <code>String</code>.</p>\n<p><code>str()</code> converts values to strings. See the\n<a href=\"#/p5/String\">String</a> reference page for guidance on using\ntemplate literals instead.</p>\n<p>The parameter, <code>n</code>, is the value to convert. If <code>n</code> is a Boolean, as in\n<code>str(false)</code> or <code>str(true)</code>, then the value will be returned as a string,\nas in <code>'false'</code> or <code>'true'</code>. If <code>n</code> is a number, as in <code>str(123)</code>, then its\nvalue will be returned as a string, as in <code>'123'</code>. If an array is passed,\nas in <code>str([12.34, 56.78])</code>, then an array of strings will be returned.</p>\n",
+ "name": "baseStrokeShader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 2122,
"itemtype": "method",
- "name": "str",
- "params": [
+ "description": "<p>Get the shader used when drawing the strokes of shapes.</p>\n<p>You can call <a href=\"#/p5.Shader/modify\"><code>baseStrokeShader().modify()</code></a>\nand change any of the following hooks:</p>\n<table>\n<tr><th>Hook</th><th>Description</th></tr>\n<tr><td><p><code>void beforeVertex</code></p>\n</td><td><p>Called at the start of the vertex shader.</p>\n</td></tr>\n<tr><td><p><code>StrokeVertex getObjectInputs</code></p>\n</td><td><p>Update the vertex data of the stroke being drawn before any positioning has been applied. It takes in a <code>StrokeVertex</code> struct, which includes:</p>\n<ul><li><code>vec3 position</code>, the position of the vertex</li><li><code>vec3 tangentIn</code>, the tangent coming in to the vertex</li><li><code>vec3 tangentOut</code>, the tangent coming out of the vertex. In straight segments, this will be the same as <code>tangentIn</code>. In joins, it will be different. In caps, one of the tangents will be 0.</li><li><code>vec4 color</code>, the per-vertex color</li><li><code>float weight</code>, the stroke weight\nThe struct can be modified and returned.</li></ul></td></tr>\n<tr><td><p><code>StrokeVertex getWorldInputs</code></p>\n</td><td><p>Update the vertex data of the model being drawn after transformations such as <code>translate()</code> and <code>scale()</code> have been applied, but before the camera has been applied. It takes in a <code>StrokeVertex</code> struct like, in the <code>getObjectInputs</code> hook above, that can be modified and returned.</p>\n</td></tr>\n<tr><td><p><code>StrokeVertex getCameraInputs</code></p>\n</td><td><p>Update the vertex data of the model being drawn as they appear relative to the camera. It takes in a <code>StrokeVertex</code> struct like, in the <code>getObjectInputs</code> hook above, that can be modified and returned.</p>\n</td></tr>\n<tr><td><p><code>void afterVertex</code></p>\n</td><td><p>Called at the end of the vertex shader.</p>\n</td></tr>\n<tr><td><p><code>void beforeFragment</code></p>\n</td><td><p>Called at the start of the fragment shader.</p>\n</td></tr>\n<tr><td><p><code>Inputs getPixelInputs</code></p>\n</td><td><p>Update the inputs to the shader. It takes in a struct <code>Inputs inputs</code>, which includes:</p>\n<ul><li><code>vec4 color</code>, the color of the stroke</li><li><code>vec2 tangent</code>, the direction of the stroke in screen space</li><li><code>vec2 center</code>, the coordinate of the center of the stroke in screen space p5.js pixels</li><li><code>vec2 position</code>, the coordinate of the current pixel in screen space p5.js pixels</li><li><code>float strokeWeight</code>, the thickness of the stroke in p5.js pixels</li></ul></td></tr>\n<tr><td><p><code>bool shouldDiscard</code></p>\n</td><td><p>Caps and joins are made by discarded pixels in the fragment shader to carve away unwanted areas. Use this to change this logic. It takes in a <code>bool willDiscard</code> and must return a modified version.</p>\n</td></tr>\n<tr><td><p><code>vec4 getFinalColor</code></p>\n</td><td><p>Update the final color after mixing. It takes in a <code>vec4 color</code> and must return a modified version.</p>\n</td></tr>\n<tr><td><p><code>void afterFragment</code></p>\n</td><td><p>Called at the end of the fragment shader.</p>\n</td></tr>\n</table><p>Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>\n<p>Call <code>baseStrokeShader().inspectHooks()</code> to see all the possible hooks and\ntheir default implementations.</p>\n",
+ "example": [
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseStrokeShader().modify({\n 'Inputs getPixelInputs': `(Inputs inputs) {\n float opacity = 1.0 - smoothstep(\n 0.0,\n 15.0,\n length(inputs.position - inputs.center)\n );\n inputs.color *= opacity;\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n strokeShader(myShader);\n strokeWeight(30);\n line(\n -width/3,\n sin(millis()*0.001) * height/4,\n width/3,\n sin(millis()*0.001 + 1) * height/4\n );\n}\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseStrokeShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n 'StrokeVertex getWorldInputs': `(StrokeVertex inputs) {\n // Add a somewhat random offset to the weight\n // that varies based on position and time\n float scale = 0.8 + 0.2*sin(10.0 * sin(\n floor(time/250.) +\n inputs.position.x*0.01 +\n inputs.position.y*0.01\n ));\n inputs.weight *= scale;\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n strokeShader(myShader);\n myShader.setUniform('time', millis());\n strokeWeight(10);\n beginShape();\n for (let i = 0; i <= 50; i++) {\n let r = map(i, 0, 50, 0, width/3);\n let x = r*cos(i*0.2);\n let y = r*sin(i*0.2);\n vertex(x, y);\n }\n endShape();\n}\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseStrokeShader().modify({\n 'float random': `(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1031);\n p3 += dot(p3, p3.yzx + 33.33);\n return fract((p3.x + p3.y) * p3.z);\n }`,\n 'Inputs getPixelInputs': `(Inputs inputs) {\n // Replace alpha in the color with dithering by\n // randomly setting pixel colors to 0 based on opacity\n float a = inputs.color.a;\n inputs.color.a = 1.0;\n inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0;\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n strokeShader(myShader);\n strokeWeight(10);\n beginShape();\n for (let i = 0; i <= 50; i++) {\n stroke(\n 0,\n 255\n * map(i, 0, 20, 0, 1, true)\n * map(i, 30, 50, 1, 0, true)\n );\n vertex(\n map(i, 0, 50, -1, 1) * width/3,\n 50 * sin(i/10 + frameCount/100)\n );\n }\n endShape();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "n",
- "description": "<p>value to convert.</p>\n",
- "type": "String|Boolean|Number"
+ "params": [],
+ "return": {
+ "description": "The stroke shader",
+ "type": "p5.Shader"
+ }
}
],
"return": {
- "description": "converted string.",
- "type": "String"
+ "description": "The stroke shader",
+ "type": "p5.Shader"
},
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
+ },
+ {
+ "name": "resetShader",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 2211,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Restores the default shaders.</p>\n<p><code>resetShader()</code> deactivates any shaders previously applied by\n<a href=\"#/p5/shader\">shader()</a>, <a href=\"#/p5/strokeShader\">strokeShader()</a>,\nor <a href=\"#/p5/imageShader\">imageShader()</a>.</p>\n<p>Note: Shaders can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a Boolean variable.\n let original = false;\n\n // Convert the Boolean to a string.\n let converted = str(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"false : false\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 123;\n\n // Convert the number to a string.\n let converted = str(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} = ${converted}`, 50, 50);\n\n describe('The text \"123 = 123\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let original = [12, 34, 56];\n\n // Convert the numbers to strings.\n let strings = str(original);\n\n // Create an empty string variable.\n let final = '';\n\n // Concatenate all the strings.\n for (let s of strings) {\n final += s;\n }\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the concatenated string.\n text(final, 50, 50);\n\n describe('The text \"123456\" written in black on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nuniform mat4 uProjectionMatrix;\nuniform mat4 uModelViewMatrix;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 position = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * position;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n describe(\n 'Two rotating cubes on a gray background. The left one has a blue-purple gradient on each face. The right one is red.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a box using the p5.Shader.\n // shader() sets the active shader to myShader.\n shader(myShader);\n push();\n translate(-25, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(width / 4);\n pop();\n\n // Draw a box using the default fill shader.\n // resetShader() restores the default fill shader.\n resetShader();\n fill(255, 0, 0);\n push();\n translate(25, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(width / 4);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": []
+ }
],
"class": "p5",
- "module": "Data",
- "submodule": "Conversion"
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/conversion.js",
- "line": 341,
- "description": "<p>Converts a <code>String</code> or <code>Number</code> to a <code>Boolean</code>.</p>\n<p><code>boolean()</code> converts values to <code>true</code> or <code>false</code>.</p>\n<p>The parameter, <code>n</code>, is the value to convert. If <code>n</code> is a string, then\n<code>boolean('true')</code> will return <code>true</code> and every other string value will\nreturn <code>false</code>. If <code>n</code> is a number, then <code>boolean(0)</code> will return <code>false</code>\nand every other numeric value will return <code>true</code>. If an array is passed, as\n<code>in boolean([0, 1, 'true', 'blue'])</code>, then an array of Boolean values will\nbe returned.</p>\n",
+ "name": "texture",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 2382,
"itemtype": "method",
- "name": "boolean",
- "return": {
- "description": "converted Boolean value.",
- "type": "Boolean"
- },
+ "chainable": 1,
+ "description": "<p>Sets the texture that will be used on shapes.</p>\n<p>A texture is like a skin that wraps around a shape. <code>texture()</code> works with\nbuilt-in shapes, such as <a href=\"#/p5/square\">square()</a> and\n<a href=\"#/p5/sphere\">sphere()</a>, and custom shapes created with\nfunctions such as <a href=\"#/p5/buildGeometry\">buildGeometry()</a>. To\ntexture a geometry created with <a href=\"#/p5/beginShape\">beginShape()</a>,\nuv coordinates must be passed to each\n<a href=\"#/p5/vertex\">vertex()</a> call.</p>\n<p>The parameter, <code>tex</code>, is the texture to apply. <code>texture()</code> can use a range\nof sources including images, videos, and offscreen renderers such as\n<a href=\"#/p5.Graphics\">p5.Graphics</a> and\n<a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> objects.</p>\n<p>To texture a geometry created with <a href=\"#/p5/beginShape\">beginShape()</a>,\nyou will need to specify uv coordinates in <a href=\"#/p5/vertex\">vertex()</a>.</p>\n<p>Note: <code>texture()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 0;\n\n // Convert the number to a Boolean value.\n let converted = boolean(original);\n\n // Style the circle based on the converted value.\n if (converted === true) {\n fill('blue');\n } else {\n fill('red');\n }\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe('A red circle on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = 'true';\n\n // Convert the string to a Boolean value.\n let converted = boolean(original);\n\n // Style the circle based on the converted value.\n if (converted === true) {\n fill('blue');\n } else {\n fill('red');\n }\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe('A blue circle on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of values.\n let original = [0, 'hi', 123, 'true'];\n\n // Convert the array to a Boolean values.\n let converted = boolean(original);\n\n // Iterate over the array of converted Boolean values.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Style the circle based on the converted value.\n if (converted[i] === true) {\n fill('blue');\n } else {\n fill('red');\n }\n\n // Calculate the x-coordinate.\n let x = (i + 1) * 20;\n\n // Draw the circle.\n circle(x, 50, 15);\n }\n\n describe(\n 'A row of circles on a gray background. The two circles on the left are red and the two on the right are blue.'\n );\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load an image and create a p5.Image object.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe('A spinning cube with an image of a ceiling on each face.');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the x-, y-, and z-axes.\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the box.\n box(50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Graphics object.\n pg = createGraphics(100, 100);\n\n // Draw a circle to the p5.Graphics object.\n pg.background(200);\n pg.circle(50, 50, 30);\n\n describe('A spinning cube with circle at the center of each face.');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the x-, y-, and z-axes.\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Apply the p5.Graphics object as a texture.\n texture(pg);\n\n // Draw the box.\n box(50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet vid;\n\nfunction setup() {\n // Load a video and create a p5.MediaElement object.\n vid = createVideo('assets/fingers.mov');\n\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw the rectangle.\n rect(-40, -40, 80, 80);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet vid;\n\nfunction setup() {\n // Load a video and create a p5.MediaElement object.\n vid = createVideo('assets/fingers.mov');\n\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw a custom shape using uv coordinates.\n beginShape();\n vertex(-40, -40, 0, 0);\n vertex(40, -40, 1, 0);\n vertex(40, 40, 1, 1);\n vertex(-40, 40, 0, 1);\n endShape();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "Conversion",
"overloads": [
{
- "line": 341,
"params": [
{
- "name": "n",
- "description": "<p>value to convert.</p>\n",
- "type": "String|Boolean|Number"
+ "name": "tex",
+ "description": "media to use as the texture.",
+ "type": "p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"
}
- ],
- "return": {
- "description": "converted Boolean value.",
- "type": "Boolean"
- }
- },
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
+ },
+ {
+ "name": "textureMode",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 2561,
+ "itemtype": "method",
+ "description": "<p>Changes the coordinate system used for textures when they’re applied to\ncustom shapes.</p>\n<p>In order for <a href=\"#/p5/texture\">texture()</a> to work, a shape needs a\nway to map the points on its surface to the pixels in an image. Built-in\nshapes such as <a href=\"#/p5/rect\">rect()</a> and\n<a href=\"#/p5/box\">box()</a> already have these texture mappings based on\ntheir vertices. Custom shapes created with\n<a href=\"#/p5/vertex\">vertex()</a> require texture mappings to be passed as\nuv coordinates.</p>\n<p>Each call to <a href=\"#/p5/vertex\">vertex()</a> must include 5 arguments,\nas in <code>vertex(x, y, z, u, v)</code>, to map the vertex at coordinates <code>(x, y, z)</code>\nto the pixel at coordinates <code>(u, v)</code> within an image. For example, the\ncorners of a rectangular image are mapped to the corners of a rectangle by default:</p>\n<code>\n// Apply the image as a texture.\ntexture(img);<p>// Draw the rectangle.\nrect(0, 0, 30, 50);\n</code></p>\n<p>If the image in the code snippet above has dimensions of 300 x 500 pixels,\nthe same result could be achieved as follows:</p>\n<code>\n// Apply the image as a texture.\ntexture(img);<p>// Draw the rectangle.\nbeginShape();</p>\n<p>// Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);</p>\n<p>// Top-right.\n// u: 300, v: 0\nvertex(30, 0, 0, 300, 0);</p>\n<p>// Bottom-right.\n// u: 300, v: 500\nvertex(30, 50, 0, 300, 500);</p>\n<p>// Bottom-left.\n// u: 0, v: 500\nvertex(0, 50, 0, 0, 500);</p>\n<p>endShape();\n</code></p>\n<p><code>textureMode()</code> changes the coordinate system for uv coordinates.</p>\n<p>The parameter, <code>mode</code>, accepts two possible constants. If <code>NORMAL</code> is\npassed, as in <code>textureMode(NORMAL)</code>, then the texture’s uv coordinates can\nbe provided in the range 0 to 1 instead of the image’s dimensions. This can\nbe helpful for using the same code for multiple images of different sizes.\nFor example, the code snippet above could be rewritten as follows:</p>\n<code>\n// Set the texture mode to use normalized coordinates.\ntextureMode(NORMAL);<p>// Apply the image as a texture.\ntexture(img);</p>\n<p>// Draw the rectangle.\nbeginShape();</p>\n<p>// Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);</p>\n<p>// Top-right.\n// u: 1, v: 0\nvertex(30, 0, 0, 1, 0);</p>\n<p>// Bottom-right.\n// u: 1, v: 1\nvertex(30, 50, 0, 1, 1);</p>\n<p>// Bottom-left.\n// u: 0, v: 1\nvertex(0, 50, 0, 0, 1);</p>\n<p>endShape();\n</code></p>\n<p>By default, <code>mode</code> is <code>IMAGE</code>, which scales uv coordinates to the\ndimensions of the image. Calling <code>textureMode(IMAGE)</code> applies the default.</p>\n<p>Note: <code>textureMode()</code> can only be used in WebGL mode.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load an image and create a p5.Image object.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe('An image of a ceiling against a black background.');\n}\n\nfunction draw() {\n background(0);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the custom shape.\n // Use the image's width and height as uv coordinates.\n beginShape();\n vertex(-30, -30, 0, 0);\n vertex(30, -30, img.width, 0);\n vertex(30, 30, img.width, img.height);\n vertex(-30, 30, 0, img.height);\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load an image and create a p5.Image object.\n img = await loadImage('assets/laDefense.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe('An image of a ceiling against a black background.');\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the custom shape.\n // Use normalized uv coordinates.\n beginShape();\n vertex(-30, -30, 0, 0);\n vertex(30, -30, 1, 0);\n vertex(30, 30, 1, 1);\n vertex(-30, 30, 0, 1);\n endShape();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 451,
"params": [
{
- "name": "ns",
- "description": "<p>values to convert.</p>\n",
- "type": "Array"
+ "name": "mode",
+ "description": "either IMAGE or NORMAL.",
+ "type": "IMAGE|NORMAL"
}
- ],
- "return": {
- "description": "converted Boolean values.",
- "type": "Boolean[]"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/conversion.js",
- "line": 468,
- "description": "<p>Converts a <code>Boolean</code>, <code>String</code>, or <code>Number</code> to its byte value.</p>\n<p><code>byte()</code> converts a value to an integer (whole number) between -128 and\n127. Values greater than 127 wrap around while negative values are\nunchanged. For example, 128 becomes -128 and -129 remains the same.</p>\n<p>The parameter, <code>n</code>, is the value to convert. If <code>n</code> is a Boolean, as in\n<code>byte(false)</code> or <code>byte(true)</code>, the number 0 (<code>false</code>) or 1 (<code>true</code>) will be\nreturned. If <code>n</code> is a string or number, as in <code>byte('256')</code> or <code>byte(256)</code>,\nthen the byte value will be returned. Decimal values are ignored. If an\narray is passed, as in <code>byte([true, 123, '456'])</code>, then an array of byte\nvalues will be returned.</p>\n<p>Note: If a value can't be converted to a number, as in <code>byte('giraffe')</code>,\nthen the value <code>NaN</code> (not a number) will be returned.</p>\n",
+ "name": "textureWrap",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 2837,
"itemtype": "method",
- "name": "byte",
- "return": {
- "description": "converted byte value.",
- "type": "Number"
- },
+ "description": "<p>Changes the way textures behave when a shape’s uv coordinates go beyond the\ntexture.</p>\n<p>In order for <a href=\"#/p5/texture\">texture()</a> to work, a shape needs a\nway to map the points on its surface to the pixels in an image. Built-in\nshapes such as <a href=\"#/p5/rect\">rect()</a> and\n<a href=\"#/p5/box\">box()</a> already have these texture mappings based on\ntheir vertices. Custom shapes created with\n<a href=\"#/p5/vertex\">vertex()</a> require texture mappings to be passed as\nuv coordinates.</p>\n<p>Each call to <a href=\"#/p5/vertex\">vertex()</a> must include 5 arguments,\nas in <code>vertex(x, y, z, u, v)</code>, to map the vertex at coordinates <code>(x, y, z)</code>\nto the pixel at coordinates <code>(u, v)</code> within an image. For example, the\ncorners of a rectangular image are mapped to the corners of a rectangle by default:</p>\n<pre><code class=\"language-js\">// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nrect(0, 0, 30, 50);</code></pre><p>If the image in the code snippet above has dimensions of 300 x 500 pixels,\nthe same result could be achieved as follows:</p>\n<pre><code class=\"language-js\">// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nbeginShape();\n\n// Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);\n\n// Top-right.\n// u: 300, v: 0\nvertex(30, 0, 0, 300, 0);\n\n// Bottom-right.\n// u: 300, v: 500\nvertex(30, 50, 0, 300, 500);\n\n// Bottom-left.\n// u: 0, v: 500\nvertex(0, 50, 0, 0, 500);\n\nendShape();</code></pre><p><code>textureWrap()</code> controls how textures behave when their uv's go beyond the\ntexture. Doing so can produce interesting visual effects such as tiling.\nFor example, the custom shape above could have u-coordinates are greater\nthan the image’s width:</p>\n<pre><code class=\"language-js\">// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nbeginShape();\nvertex(0, 0, 0, 0, 0);\n\n// Top-right.\n// u: 600\nvertex(30, 0, 0, 600, 0);\n\n// Bottom-right.\n// u: 600\nvertex(30, 50, 0, 600, 500);\n\nvertex(0, 50, 0, 0, 500);\nendShape();</code></pre><p>The u-coordinates of 600 are greater than the texture image’s width of 300.\nThis creates interesting possibilities.</p>\n<p>The first parameter, <code>wrapX</code>, accepts three possible constants. If <code>CLAMP</code>\nis passed, as in <code>textureWrap(CLAMP)</code>, the pixels at the edge of the\ntexture will extend to the shape’s edges. If <code>REPEAT</code> is passed, as in\n<code>textureWrap(REPEAT)</code>, the texture will tile repeatedly until reaching the\nshape’s edges. If <code>MIRROR</code> is passed, as in <code>textureWrap(MIRROR)</code>, the\ntexture will tile repeatedly until reaching the shape’s edges, flipping\nits orientation between tiles. By default, textures <code>CLAMP</code>.</p>\n<p>The second parameter, <code>wrapY</code>, is optional. It accepts the same three\nconstants, <code>CLAMP</code>, <code>REPEAT</code>, and <code>MIRROR</code>. If one of these constants is\npassed, as in <code>textureWRAP(MIRROR, REPEAT)</code>, then the texture will <code>MIRROR</code>\nhorizontally and <code>REPEAT</code> vertically. By default, <code>wrapY</code> will be set to\nthe same value as <code>wrapX</code>.</p>\n<p>Note: <code>textureWrap()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a Boolean variable.\n let original = true;\n\n // Convert the Boolean to its byte value.\n let converted = byte(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"true : 1\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = '256';\n\n // Convert the string to its byte value.\n let converted = byte(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"256 : 0\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 256;\n\n // Convert the number to its byte value.\n let converted = byte(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"256 : 0\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of values.\n let original = [false, '64', 383];\n\n // Convert the array elements to their byte values.\n let converted = byte(original);\n\n // Iterate over the converted array elements.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Style the circle.\n fill(converted[i]);\n\n // Calculate the x-coordinate.\n let x = (i + 1) * 25;\n\n // Draw the circle.\n circle(x, 50, 20);\n }\n\n describe(\n 'Three gray circles on a gray background. The circles get lighter from left to right.'\n );\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n img = await loadImage('assets/rockies128.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'An image of a landscape occupies the top-left corner of a square. Its edge colors smear to cover the other thre quarters of the square.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n // Note: CLAMP is the default mode.\n textureWrap(CLAMP);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n img = await loadImage('assets/rockies128.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe('Four identical images of a landscape arranged in a grid.');\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(REPEAT);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n img = await loadImage('assets/rockies128.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Four identical images of a landscape arranged in a grid. The images are reflected horizontally and vertically, creating a kaleidoscope effect.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(MIRROR);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n img = await loadImage('assets/rockies128.jpg');\n\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Four identical images of a landscape arranged in a grid. The top row and bottom row are reflections of each other.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(REPEAT, MIRROR);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "Conversion",
"overloads": [
{
- "line": 468,
"params": [
{
- "name": "n",
- "description": "<p>value to convert.</p>\n",
- "type": "String|Boolean|Number"
- }
- ],
- "return": {
- "description": "converted byte value.",
- "type": "Number"
- }
- },
- {
- "line": 598,
- "params": [
+ "name": "wrapX",
+ "description": "either CLAMP, REPEAT, or MIRROR",
+ "type": "CLAMP|REPEAT|MIRROR"
+ },
{
- "name": "ns",
- "description": "<p>values to convert.</p>\n",
- "type": "Array"
+ "name": "wrapY",
+ "description": "either CLAMP, REPEAT, or MIRROR",
+ "optional": 1,
+ "type": "CLAMP|REPEAT|MIRROR"
}
- ],
- "return": {
- "description": "converted byte values.",
- "type": "Number[]"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/conversion.js",
- "line": 612,
- "description": "<p>Converts a <code>Number</code> or <code>String</code> to a single-character <code>String</code>.</p>\n<p><code>char()</code> converts numbers to their single-character string representations.</p>\n<p>The parameter, <code>n</code>, is the value to convert. If a number is passed, as in\n<code>char(65)</code>, the corresponding single-character string is returned. If a\nstring is passed, as in <code>char('65')</code>, the string is converted to an integer\n(whole number) and the corresponding single-character string is returned.\nIf an array is passed, as in <code>char([65, 66, 67])</code>, an array of\nsingle-character strings is returned.</p>\n<p>See <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode\" target=\"_blank\">MDN</a>\nfor more information about conversions.</p>\n",
+ "name": "normalMaterial",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 2884,
"itemtype": "method",
- "name": "char",
- "return": {
- "description": "converted single-character string.",
- "type": "String"
- },
+ "chainable": 1,
+ "description": "<p>Sets the current material as a normal material.</p>\n<p>A normal material sets surfaces facing the x-axis to red, those facing the\ny-axis to green, and those facing the z-axis to blue. Normal material isn't\naffected by light. It’s often used as a placeholder material when debugging.</p>\n<p>Note: <code>normalMaterial()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 65;\n\n // Convert the number to a char.\n let converted = char(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"65 : A\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = '65';\n\n // Convert the string to a char.\n let converted = char(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"65 : A\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let original = ['65', 66, '67'];\n\n // Convert the string to a char.\n let converted = char(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Iterate over elements of the converted array.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the original and converted values.\n text(`${original[i]} : ${converted[i]}`, 50, y);\n }\n\n describe(\n 'The text \"65 : A\", \"66 : B\", and \"67 : C\" written on three separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor torus drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the torus.\n normalMaterial();\n\n // Draw the torus.\n torus(30);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": []
+ }
],
"class": "p5",
- "module": "Data",
- "submodule": "Conversion",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
+ },
+ {
+ "name": "ambientMaterial",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 3111,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Sets the ambient color of shapes’ surface material.</p>\n<p>The <code>ambientMaterial()</code> color sets the components of the\n<a href=\"#/p5/ambientLight\">ambientLight()</a> color that shapes will\nreflect. For example, calling <code>ambientMaterial(255, 255, 0)</code> would cause a\nshape to reflect red and green light, but not blue light.</p>\n<p><code>ambientMaterial()</code> can be called three ways with different parameters to\nset the material’s color.</p>\n<p>The first way to call <code>ambientMaterial()</code> has one parameter, <code>gray</code>.\nGrayscale values between 0 and 255, as in <code>ambientMaterial(50)</code>, can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.</p>\n<p>The second way to call <code>ambientMaterial()</code> has one parameter, <code>color</code>. A\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color values, or a\nCSS color string, as in <code>ambientMaterial('magenta')</code>, can be passed to set\nthe material’s color.</p>\n<p>The third way to call <code>ambientMaterial()</code> has three parameters, <code>v1</code>, <code>v2</code>,\nand <code>v3</code>. RGB, HSB, or HSL values, as in <code>ambientMaterial(255, 0, 0)</code>, can\nbe passed to set the material’s colors. Color values will be interpreted\nusing the current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n<p>Note: <code>ambientMaterial()</code> can only be used in WebGL mode.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A magenta cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A purple cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a dark gray ambient material.\n ambientMaterial(150);\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using RGB values.\n ambientMaterial(255, 255, 0);\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using a p5.Color object.\n let c = color(255, 255, 0);\n ambientMaterial(c);\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using a color string.\n ambientMaterial('yellow');\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A yellow cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white ambient light.\n ambientLight(255, 255, 255);\n\n // Add a yellow ambient material using a color string.\n ambientMaterial('yellow');\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
+ ],
"overloads": [
{
- "line": 612,
"params": [
{
- "name": "n",
- "description": "<p>value to convert.</p>\n",
- "type": "String|Number"
+ "name": "v1",
+ "description": "red or hue value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "description": "green or saturation value in the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "description": "blue, brightness, or lightness value in the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
}
- ],
- "return": {
- "description": "converted single-character string.",
- "type": "String"
- }
+ ]
},
{
- "line": 716,
"params": [
{
- "name": "ns",
- "description": "<p>values to convert.</p>\n",
- "type": "Array"
- }
- ],
- "return": {
- "description": "converted single-character strings.",
- "type": "String[]"
- }
- }
- ]
- },
- {
- "file": "src/utilities/conversion.js",
- "line": 731,
- "description": "<p>Converts a single-character <code>String</code> to a <code>Number</code>.</p>\n<p><code>unchar()</code> converts single-character strings to their corresponding\ninteger (whole number).</p>\n<p>The parameter, <code>n</code>, is the character to convert. For example,\n<code>unchar('A')</code>, returns the number 65. If an array is passed, as in\n<code>unchar(['A', 'B', 'C'])</code>, an array of integers is returned.</p>\n",
- "itemtype": "method",
- "name": "unchar",
- "return": {
- "description": "converted number.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = 'A';\n\n // Convert the string to a number.\n let converted = unchar(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"A : 65\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of characters.\n let original = ['A', 'B', 'C'];\n\n // Convert the string to a number.\n let converted = unchar(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Iterate over elements of the converted array.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the original and converted values.\n text(`${original[i]} : ${converted[i]}`, 50, y);\n }\n\n describe(\n 'The text \"A : 65\", \"B : 66\", and \"C :67\" written on three separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Data",
- "submodule": "Conversion",
- "overloads": [
- {
- "line": 731,
- "params": [
- {
- "name": "n",
- "description": "<p>value to convert.</p>\n",
- "type": "String"
+ "name": "gray",
+ "description": "grayscale value between 0 (black) and 255 (white).",
+ "type": "Number"
}
- ],
- "return": {
- "description": "converted number.",
- "type": "Number"
- }
+ ]
},
{
- "line": 805,
"params": [
{
- "name": "ns",
- "description": "<p>values to convert.</p>\n",
- "type": "String[]"
+ "name": "color",
+ "description": "color as a <a href=\"#/p5.Color\">p5.Color</a> object,\nan array of color values, or a CSS string.",
+ "type": "p5.Color|Number[]|String"
}
- ],
- "return": {
- "description": "converted numbers.",
- "type": "Number[]"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/conversion.js",
- "line": 818,
- "description": "<p>Converts a <code>Number</code> to a <code>String</code> with its hexadecimal value.</p>\n<p><code>hex()</code> converts a number to a string with its hexadecimal number value.\nHexadecimal (hex) numbers are base-16, which means there are 16 unique\ndigits. Hex extends the numbers 0–9 with the letters A–F. For example, the\nnumber <code>11</code> (eleven) in base-10 is written as the letter <code>B</code> in hex.</p>\n<p>The first parameter, <code>n</code>, is the number to convert. For example, <code>hex(20)</code>,\nreturns the string <code>'00000014'</code>. If an array is passed, as in\n<code>hex([1, 10, 100])</code>, an array of hexadecimal strings is returned.</p>\n<p>The second parameter, <code>digits</code>, is optional. If a number is passed, as in\n<code>hex(20, 2)</code>, it sets the number of hexadecimal digits to display. For\nexample, calling <code>hex(20, 2)</code> returns the string <code>'14'</code>.</p>\n",
+ "name": "emissiveMaterial",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 3209,
"itemtype": "method",
- "name": "hex",
- "return": {
- "description": "converted hexadecimal value.",
- "type": "String"
- },
+ "chainable": 1,
+ "description": "<p>Sets the emissive color of shapes’ surface material.</p>\n<p>The <code>emissiveMaterial()</code> color sets a color shapes display at full\nstrength, regardless of lighting. This can give the appearance that a shape\nis glowing. However, emissive materials don’t actually emit light that\ncan affect surrounding objects.</p>\n<p><code>emissiveMaterial()</code> can be called three ways with different parameters to\nset the material’s color.</p>\n<p>The first way to call <code>emissiveMaterial()</code> has one parameter, <code>gray</code>.\nGrayscale values between 0 and 255, as in <code>emissiveMaterial(50)</code>, can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.</p>\n<p>The second way to call <code>emissiveMaterial()</code> has one parameter, <code>color</code>. A\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color values, or a\nCSS color string, as in <code>emissiveMaterial('magenta')</code>, can be passed to set\nthe material’s color.</p>\n<p>The third way to call <code>emissiveMaterial()</code> has four parameters, <code>v1</code>, <code>v2</code>,\n<code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA, HSBA, or HSLA values can be\npassed to set the material’s colors, as in <code>emissiveMaterial(255, 0, 0)</code> or\n<code>emissiveMaterial(255, 0, 0, 30)</code>. Color values will be interpreted using\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n<p>Note: <code>emissiveMaterial()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 20;\n\n // Convert the number to a hex string.\n let converted = hex(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Display the original and converted values.\n text(`${original} = ${converted}`, 50, 50);\n\n describe('The text \"20 = 00000014\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 20;\n\n // Convert the number to a hex string.\n // Only display two hex digits.\n let converted = hex(original, 2);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} = ${converted}`, 50, 50);\n\n describe('The text \"20 = 14\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let original = [1, 10, 100];\n\n // Convert the numbers to hex strings.\n // Only use two hex digits.\n let converted = hex(original, 2);\n\n // Style the text.\n textAlign(RIGHT, CENTER);\n textSize(16);\n\n // Iterate over the converted values.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the original and converted values.\n text(`${ original[i]} = ${converted[i]}`, 75, y);\n }\n\n describe(\n 'The text \"1 = 01\", \"10 = 0A\", and \"100 = 64\" written on three separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white ambient light.\n ambientLight(255, 255, 255);\n\n // Add a red emissive material using RGB values.\n emissiveMaterial(255, 0, 0);\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "Conversion",
"overloads": [
{
- "line": 818,
"params": [
{
- "name": "n",
- "description": "<p>value to convert.</p>\n",
+ "name": "v1",
+ "description": "red or hue value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
"type": "Number"
},
{
- "name": "digits",
- "description": "<p>number of digits to include.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "v2",
+ "description": "green or saturation value in the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "description": "blue, brightness, or lightness value in the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "alpha",
+ "description": "alpha value in the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "return": {
- "description": "converted hexadecimal value.",
- "type": "String"
- }
+ ]
},
{
- "line": 926,
"params": [
{
- "name": "ns",
- "description": "<p>values to convert.</p>\n",
- "type": "Number[]"
- },
+ "name": "gray",
+ "description": "grayscale value between 0 (black) and 255 (white).",
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
{
- "name": "digits",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "color",
+ "description": "color as a <a href=\"#/p5.Color\">p5.Color</a> object,\nan array of color values, or a CSS string.",
+ "type": "p5.Color|Number[]|String"
}
- ],
- "return": {
- "description": "converted hexadecimal values.",
- "type": "String[]"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/conversion.js",
- "line": 956,
- "description": "<p>Converts a <code>String</code> with a hexadecimal value to a <code>Number</code>.</p>\n<p><code>unhex()</code> converts a string with its hexadecimal number value to a number.\nHexadecimal (hex) numbers are base-16, which means there are 16 unique\ndigits. Hex extends the numbers 0–9 with the letters A–F. For example, the\nnumber <code>11</code> (eleven) in base-10 is written as the letter <code>B</code> in hex.</p>\n<p>The first parameter, <code>n</code>, is the hex string to convert. For example,\n<code>unhex('FF')</code>, returns the number 255. If an array is passed, as in\n<code>unhex(['00', '80', 'FF'])</code>, an array of numbers is returned.</p>\n",
+ "name": "specularMaterial",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 3464,
"itemtype": "method",
- "name": "unhex",
- "return": {
- "description": "converted number.",
- "type": "Number"
- },
+ "chainable": 1,
+ "description": "<p>Sets the specular color of shapes’ surface material.</p>\n<p>The <code>specularMaterial()</code> color sets the components of light color that\nglossy coats on shapes will reflect. For example, calling\n<code>specularMaterial(255, 255, 0)</code> would cause a shape to reflect red and\ngreen light, but not blue light.</p>\n<p>Unlike <a href=\"#/p5/ambientMaterial\">ambientMaterial()</a>,\n<code>specularMaterial()</code> will reflect the full color of light sources including\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>,\nand <a href=\"#/p5/spotLight\">spotLight()</a>. This is what gives it shapes\ntheir \"shiny\" appearance. The material’s shininess can be controlled by the\n<a href=\"#/p5/shininess\">shininess()</a> function.</p>\n<p><code>specularMaterial()</code> can be called three ways with different parameters to\nset the material’s color.</p>\n<p>The first way to call <code>specularMaterial()</code> has one parameter, <code>gray</code>.\nGrayscale values between 0 and 255, as in <code>specularMaterial(50)</code>, can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.</p>\n<p>The second way to call <code>specularMaterial()</code> has one parameter, <code>color</code>. A\n<a href=\"#/p5.Color\">p5.Color> object, an array of color values, or a CSS\ncolor string, as in <code>specularMaterial('magenta')</code>, can be passed to set the\nmaterial’s color.</p>\n<p>The third way to call <code>specularMaterial()</code> has four parameters, <code>v1</code>, <code>v2</code>,\n<code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA, HSBA, or HSLA values can be\npassed to set the material’s colors, as in <code>specularMaterial(255, 0, 0)</code> or\n<code>specularMaterial(255, 0, 0, 30)</code>. Color values will be interpreted using\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a a hex string variable\n let original = 'FF';\n\n // Convert the hex string to a number.\n let converted = unhex(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} = ${converted}`, 50, 50);\n\n describe('The text \"FF = 255\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let original = ['00', '80', 'FF'];\n\n // Convert the numbers to hex strings.\n // Only use two hex digits.\n let converted = unhex(original, 2);\n\n // Style the text.\n textAlign(RIGHT, CENTER);\n textSize(16);\n\n // Iterate over the converted values.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the original and converted values.\n text(`${ original[i]} = ${converted[i]}`, 80, y);\n }\n\n describe(\n 'The text \"00 = 0\", \"80 = 128\", and \"FF = 255\" written on three separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red torus drawn on a gray background. It becomes glossy when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial(255);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial(0, 255, 0);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n // Create a p5.Color object.\n let c = color('green');\n specularMaterial(c);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial('#00FF00');\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "Conversion",
"overloads": [
{
- "line": 956,
"params": [
{
- "name": "n",
- "description": "<p>value to convert.</p>\n",
- "type": "String"
+ "name": "gray",
+ "description": "grayscale value between 0 (black) and 255 (white).",
+ "type": "Number"
+ },
+ {
+ "name": "alpha",
+ "description": "alpha value in the current current\n<a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "return": {
- "description": "converted number.",
- "type": "Number"
- }
+ ]
},
{
- "line": 1033,
"params": [
{
- "name": "ns",
- "description": "<p>values to convert.</p>\n",
- "type": "String[]"
+ "name": "v1",
+ "description": "red or hue value in\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "v2",
+ "description": "green or saturation value\nin the current <a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "v3",
+ "description": "blue, brightness, or lightness value\nin the current <a href=\"#/p5/colorMode\">colorMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "alpha",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "return": {
- "description": "converted numbers.",
- "type": "Number[]"
- }
- }
- ]
- },
- {
- "file": "src/utilities/string_functions.js",
- "line": 15,
- "description": "<p>Combines an array of strings into one string.</p>\n<p>The first parameter, <code>list</code>, is the array of strings to join.</p>\n<p>The second parameter, <code>separator</code>, is the character(s) that should be used\nto separate the combined strings. For example, calling\n<code>join(myWords, ' : ')</code> would return a string of words each separated by a\ncolon and spaces.</p>\n",
- "itemtype": "method",
- "name": "join",
- "params": [
- {
- "name": "list",
- "description": "<p>array of strings to combine.</p>\n",
- "type": "Array"
+ ]
},
{
- "name": "separator",
- "description": "<p>character(s) to place between strings when they're combined.</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "color",
+ "description": "color as a <a href=\"#/p5.Color\">p5.Color</a> object,\nan array of color values, or a CSS string.",
+ "type": "p5.Color|Number[]|String"
+ }
+ ]
}
],
- "return": {
- "description": "combined string.",
- "type": "String"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of strings.\n let myWords = ['one', 'two', 'three'];\n\n // Create a combined string\n let combined = join(myWords, ' : ');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Display the combined string.\n text(combined, 50, 50);\n\n describe('The text \"one : two : three\" written in black on a gray canvas.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "String Functions"
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/string_functions.js",
- "line": 60,
- "description": "<p>Applies a regular expression to a string and returns an array with the\nfirst match.</p>\n<p><code>match()</code> uses regular expressions (regex) to match patterns in text. For\nexample, the regex <code>abc</code> can be used to search a string for the exact\nsequence of characters <code>abc</code>. See\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#tools\" target=\"_blank\">MDN</a>.\nfor more information about regexes.</p>\n<p>The first parameter, <code>str</code>, is the string to search.</p>\n<p>The second parameter, <code>regex</code>, is a string with the regular expression to\napply. For example, calling <code>match('Hello, p5*js!', '[a-z][0-9]')</code> would\nreturn the array <code>['p5']</code>.</p>\n<p>Note: If no matches are found, <code>null</code> is returned.</p>\n",
+ "name": "shininess",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 3537,
"itemtype": "method",
- "name": "match",
- "params": [
- {
- "name": "str",
- "description": "<p>string to search.</p>\n",
- "type": "String"
- },
+ "chainable": 1,
+ "description": "<p>Sets the amount of gloss (\"shininess\") of a\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>.</p>\n<p>Shiny materials focus reflected light more than dull materials.\n<code>shininess()</code> affects the way materials reflect light sources including\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>,\nand <a href=\"#/p5/spotLight\">spotLight()</a>.</p>\n<p>The parameter, <code>shine</code>, is a number that sets the amount of shininess.\n<code>shine</code> must be greater than 1, which is its default value.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two red spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is shinier than the left sphere.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on a red ambient light.\n ambientLight(255, 0, 0);\n\n // Get the mouse's coordinates.\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Turn on a white point light that follows the mouse.\n pointLight(255, 255, 255, mx, my, 50);\n\n // Style the sphere.\n noStroke();\n\n // Add a specular material with a grayscale value.\n specularMaterial(255);\n\n // Draw the left sphere with low shininess.\n translate(-25, 0, 0);\n shininess(10);\n sphere(20);\n\n // Draw the right sphere with high shininess.\n translate(50, 0, 0);\n shininess(100);\n sphere(20);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "regexp",
- "description": "<p>regular expression to match.</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "shine",
+ "description": "amount of shine.",
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "match if found.",
- "type": "String[]"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'Hello, p5*js!';\n\n // Match the characters that are lowercase\n // letters followed by digits.\n let matches = match(string, '[a-z][0-9]');\n\n // Print the matches array to the console:\n // ['p5']\n print(matches);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the matches.\n text(matches, 50, 50);\n\n describe('The text \"p5\" written in black on a gray canvas.');\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "String Functions"
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/string_functions.js",
- "line": 119,
- "description": "<p>Applies a regular expression to a string and returns an array of matches.</p>\n<p><code>match()</code> uses regular expressions (regex) to match patterns in text. For\nexample, the regex <code>abc</code> can be used to search a string for the exact\nsequence of characters <code>abc</code>. See\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#tools\" target=\"_blank\">MDN</a>.\nfor more information about regexes. <code>matchAll()</code> is different from\n<a href=\"#/p5/match\">match()</a> because it returns every match, not just\nthe first.</p>\n<p>The first parameter, <code>str</code>, is the string to search.</p>\n<p>The second parameter, <code>regex</code>, is a string with the regular expression to\napply. For example, calling\n<code>matchAll('p5*js is easier than abc123', '[a-z][0-9]')</code> would return the\n2D array <code>[['p5'], ['c1']]</code>.</p>\n<p>Note: If no matches are found, an empty array <code>[]</code> is returned.</p>\n",
+ "name": "metalness",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/material.js",
+ "line": 3653,
"itemtype": "method",
- "name": "matchAll",
- "params": [
- {
- "name": "str",
- "description": "<p>string to search.</p>\n",
- "type": "String"
- },
+ "description": "<p>Sets the amount of \"metalness\" of a\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>.</p>\n<p><code>metalness()</code> can make materials appear more metallic. It affects the way\nmaterials reflect light sources including\naffects the way materials reflect light sources including\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>,\n<a href=\"#/p5/spotLight\">spotLight()</a>, and\n<a href=\"#/p5/imageLight\">imageLight()</a>.</p>\n<p>The parameter, <code>metallic</code>, is a number that sets the amount of metalness.\n<code>metallic</code> must be greater than 1, which is its default value. Higher\nvalues, such as <code>metalness(100)</code>, make specular materials appear more\nmetallic.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two blue spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is more metallic than the left sphere.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on an ambient light.\n ambientLight(200);\n\n // Get the mouse's coordinates.\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Turn on a white point light that follows the mouse.\n pointLight(255, 255, 255, mx, my, 50);\n\n // Style the spheres.\n noStroke();\n fill(30, 30, 255);\n specularMaterial(255);\n shininess(20);\n\n // Draw the left sphere with low metalness.\n translate(-25, 0, 0);\n metalness(1);\n sphere(20);\n\n // Draw the right sphere with high metalness.\n translate(50, 0, 0);\n metalness(50);\n sphere(20);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\nasync function setup() {\n img = await loadImage('assets/outdoor_spheremap.jpg');\n\n createCanvas(100 ,100 ,WEBGL);\n\n describe(\n 'Two spheres floating above a landscape. The surface of the spheres reflect the landscape. The right sphere is more reflective than the left sphere.'\n );\n}\n\nfunction draw() {\n // Add the panorama.\n panorama(img);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Use the image as a light source.\n imageLight(img);\n\n // Style the spheres.\n noStroke();\n specularMaterial(50);\n shininess(200);\n\n // Draw the left sphere with low metalness.\n translate(-25, 0, 0);\n metalness(1);\n sphere(20);\n\n // Draw the right sphere with high metalness.\n translate(50, 0, 0);\n metalness(50);\n sphere(20);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "regexp",
- "description": "<p>regular expression to match.</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "metallic",
+ "description": "amount of metalness.",
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "matches found.",
- "type": "String[]"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'p5*js is easier than abc123';\n\n // Match the character sequences that are\n // lowercase letters followed by digits.\n let matches = matchAll(string, '[a-z][0-9]');\n\n // Print the matches array to the console:\n // [['p5'], ['c1']]\n print(matches);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Iterate over the matches array.\n for (let i = 0; i < matches.length; i += 1) {\n\n // Calculate the y-coordainate.\n let y = (i + 1) * 33;\n\n // Display the match.\n text(matches[i], 50, y);\n }\n\n describe(\n 'The text \"p5\" and \"c1\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "String Functions"
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "file": "src/utilities/string_functions.js",
- "line": 199,
- "description": "<p>Converts a <code>Number</code> into a <code>String</code> with a given number of digits.</p>\n<p><code>nf()</code> converts numbers such as <code>123.45</code> into strings formatted with a set\nnumber of digits, as in <code>'123.4500'</code>.</p>\n<p>The first parameter, <code>num</code>, is the number to convert to a string. For\nexample, calling <code>nf(123.45)</code> returns the string <code>'123.45'</code>. If an array of\nnumbers is passed, as in <code>nf([123.45, 67.89])</code>, an array of formatted\nstrings will be returned.</p>\n<p>The second parameter, <code>left</code>, is optional. If a number is passed, as in\n<code>nf(123.45, 4)</code>, it sets the minimum number of digits to include to the\nleft of the decimal place. If <code>left</code> is larger than the number of digits in\n<code>num</code>, then unused digits will be set to 0. For example, calling\n<code>nf(123.45, 4)</code> returns the string <code>'0123.45'</code>.</p>\n<p>The third parameter, <code>right</code>, is also optional. If a number is passed, as\nin <code>nf(123.45, 4, 1)</code>, it sets the minimum number of digits to include to\nthe right of the decimal place. If <code>right</code> is smaller than the number of\ndecimal places in <code>num</code>, then <code>num</code> will be rounded to the given number of\ndecimal places. For example, calling <code>nf(123.45, 4, 1)</code> returns the string\n<code>'0123.5'</code>. If right is larger than the number of decimal places in <code>num</code>,\nthen unused decimal places will be set to 0. For example, calling\n<code>nf(123.45, 4, 3)</code> returns the string <code>'0123.450'</code>.</p>\n<p>When the number is negative, for example, calling <code>nf(-123.45, 5, 2)</code>\nreturns the string <code>'-00123.45'</code>.</p>\n",
+ "name": "camera",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 3208,
"itemtype": "method",
- "name": "nf",
- "return": {
- "description": "formatted string.",
- "type": "String"
- },
+ "chainable": 1,
+ "description": "<p>Sets the position and orientation of the current camera in a 3D sketch.</p>\n<p><code>camera()</code> allows objects to be viewed from different angles. It has nine\nparameters that are all optional.</p>\n<p>The first three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are the coordinates of the\ncamera’s position. For example, calling <code>camera(0, 0, 0)</code> places the camera\nat the origin <code>(0, 0, 0)</code>. By default, the camera is placed at\n<code>(0, 0, 800)</code>.</p>\n<p>The next three parameters, <code>centerX</code>, <code>centerY</code>, and <code>centerZ</code> are the\ncoordinates of the point where the camera faces. For example, calling\n<code>camera(0, 0, 0, 10, 20, 30)</code> places the camera at the origin <code>(0, 0, 0)</code>\nand points it at <code>(10, 20, 30)</code>. By default, the camera points at the\norigin <code>(0, 0, 0)</code>.</p>\n<p>The last three parameters, <code>upX</code>, <code>upY</code>, and <code>upZ</code> are the components of\nthe \"up\" vector. The \"up\" vector orients the camera’s y-axis. For example,\ncalling <code>camera(0, 0, 0, 10, 20, 30, 0, -1, 0)</code> places the camera at the\norigin <code>(0, 0, 0)</code>, points it at <code>(10, 20, 30)</code>, and sets the \"up\" vector\nto <code>(0, -1, 0)</code> which is like holding it upside-down. By default, the \"up\"\nvector is <code>(0, 1, 0)</code>.</p>\n<p>Note: <code>camera()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(16);\n\n // Create a number variable.\n let number = 123.45;\n\n // Display the number as a string.\n let formatted = nf(number);\n text(formatted, 20, 20);\n\n let negative = nf(-number, 4, 2);\n text(negative, 20, 40);\n\n // Display the number with four digits\n // to the left of the decimal.\n let left = nf(number, 4);\n text(left, 20, 60);\n\n // Display the number with four digits\n // to the left of the decimal and one\n // to the right.\n let right = nf(number, 4, 1);\n text(right, 20, 80);\n\n describe(\n 'The numbers \"123.45\", \"-0123.45\", \"0123.45\", and \"0123.5\" written on four separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Move the camera to the top-right.\n camera(200, -400, 800);\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube apperas to sway left and right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the camera's x-coordinate.\n let x = 400 * cos(frameCount * 0.01);\n\n // Orbit the camera around the box.\n camera(x, -400, 800);\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Adjust the range sliders to change the camera's position.\n\nlet xSlider;\nlet ySlider;\nlet zSlider;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create slider objects to set the camera's coordinates.\n xSlider = createSlider(-400, 400, 400);\n xSlider.position(0, 100);\n xSlider.size(100);\n ySlider = createSlider(-400, 400, -200);\n ySlider.position(0, 120);\n ySlider.size(100);\n zSlider = createSlider(0, 1600, 800);\n zSlider.position(0, 140);\n zSlider.size(100);\n\n describe(\n 'A white cube drawn against a gray background. Three range sliders appear beneath the image. The camera position changes when the user moves the sliders.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Get the camera's coordinates from the sliders.\n let x = xSlider.value();\n let y = ySlider.value();\n let z = zSlider.value();\n\n // Move the camera.\n camera(x, y, z);\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "String Functions",
"overloads": [
{
- "line": 199,
"params": [
{
- "name": "num",
- "description": "<p>number to format.</p>\n",
- "type": "Number|String"
+ "name": "x",
+ "description": "x-coordinate of the camera. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "left",
- "description": "<p>number of digits to include to the left of\n the decimal point.</p>\n",
- "type": "Integer|String",
- "optional": true
+ "name": "y",
+ "description": "y-coordinate of the camera. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "right",
- "description": "<p>number of digits to include to the right\n of the decimal point.</p>\n",
- "type": "Integer|String",
- "optional": true
- }
- ],
- "return": {
- "description": "formatted string.",
- "type": "String"
- }
- },
- {
- "line": 276,
- "params": [
- {
- "name": "nums",
- "description": "<p>numbers to format.</p>\n",
- "type": "Number[]"
+ "name": "z",
+ "description": "z-coordinate of the camera. Defaults to 800.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "left",
- "description": "",
- "type": "Integer|String",
- "optional": true
+ "name": "centerX",
+ "description": "x-coordinate of the point the camera faces. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "right",
- "description": "",
- "type": "Integer|String",
- "optional": true
+ "name": "centerY",
+ "description": "y-coordinate of the point the camera faces. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "centerZ",
+ "description": "z-coordinate of the point the camera faces. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "upX",
+ "description": "x-component of the camera’s \"up\" vector. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "upY",
+ "description": "y-component of the camera’s \"up\" vector. Defaults to 1.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "upZ",
+ "description": "z-component of the camera’s \"up\" vector. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "return": {
- "description": "formatted strings.",
- "type": "String[]"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "file": "src/utilities/string_functions.js",
- "line": 322,
- "description": "<p>Converts a <code>Number</code> into a <code>String</code> with commas to mark units of 1,000.</p>\n<p><code>nfc()</code> converts numbers such as 12345 into strings formatted with commas\nto mark the thousands place, as in <code>'12,345'</code>.</p>\n<p>The first parameter, <code>num</code>, is the number to convert to a string. For\nexample, calling <code>nfc(12345)</code> returns the string <code>'12,345'</code>.</p>\n<p>The second parameter, <code>right</code>, is optional. If a number is passed, as in\n<code>nfc(12345, 1)</code>, it sets the minimum number of digits to include to the\nright of the decimal place. If <code>right</code> is smaller than the number of\ndecimal places in <code>num</code>, then <code>num</code> will be rounded to the given number of\ndecimal places. For example, calling <code>nfc(12345.67, 1)</code> returns the string\n<code>'12,345.7'</code>. If <code>right</code> is larger than the number of decimal places in\n<code>num</code>, then unused decimal places will be set to 0. For example, calling\n<code>nfc(12345.67, 3)</code> returns the string <code>'12,345.670'</code>.</p>\n",
+ "name": "perspective",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 3339,
"itemtype": "method",
- "name": "nfc",
- "return": {
- "description": "formatted string.",
- "type": "String"
- },
+ "chainable": 1,
+ "description": "<p>Sets a perspective projection for the current camera in a 3D sketch.</p>\n<p>In a perspective projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes. It’s applied by default in\nWebGL mode.</p>\n<p><code>perspective()</code> changes the camera’s perspective by changing its viewing\nfrustum. The frustum is the volume of space that’s visible to the camera.\nIts shape is a pyramid with its top cut off. The camera is placed where\nthe top of the pyramid should be and views everything between the frustum’s\ntop (near) plane and its bottom (far) plane.</p>\n<p>The first parameter, <code>fovy</code>, is the camera’s vertical field of view. It’s\nan angle that describes how tall or narrow a view the camera has. For\nexample, calling <code>perspective(0.5)</code> sets the camera’s vertical field of\nview to 0.5 radians. By default, <code>fovy</code> is calculated based on the sketch’s\nheight and the camera’s default z-coordinate, which is 800. The formula for\nthe default <code>fovy</code> is <code>2 * atan(height / 2 / 800)</code>.</p>\n<p>The second parameter, <code>aspect</code>, is the camera’s aspect ratio. It’s a number\nthat describes the ratio of the top plane’s width to its height. For\nexample, calling <code>perspective(0.5, 1.5)</code> sets the camera’s field of view to\n0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner\non a square canvas. By default, aspect is set to <code>width / height</code>.</p>\n<p>The third parameter, <code>near</code>, is the distance from the camera to the near\nplane. For example, calling <code>perspective(0.5, 1.5, 100)</code> sets the camera’s\nfield of view to 0.5 radians, its aspect ratio to 1.5, and places the near\nplane 100 pixels from the camera. Any shapes drawn less than 100 pixels\nfrom the camera won’t be visible. By default, near is set to <code>0.1 * 800</code>,\nwhich is 1/10th the default distance between the camera and the origin.</p>\n<p>The fourth parameter, <code>far</code>, is the distance from the camera to the far\nplane. For example, calling <code>perspective(0.5, 1.5, 100, 10000)</code> sets the\ncamera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the\nnear plane 100 pixels from the camera, and places the far plane 10,000\npixels from the camera. Any shapes drawn more than 10,000 pixels from the\ncamera won’t be visible. By default, far is set to <code>10 * 800</code>, which is 10\ntimes the default distance between the camera and the origin.</p>\n<p>Note: <code>perspective()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(16);\n\n // Create a number variable.\n let number = 12345;\n\n // Display the number as a string.\n let commas = nfc(number);\n text(commas, 15, 33);\n\n // Display the number with four digits\n // to the left of the decimal.\n let decimals = nfc(number, 2);\n text(decimals, 15, 67);\n\n describe(\n 'The numbers \"12,345\" and \"12,345.00\" written on separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [12345, 6789];\n\n // Convert the numbers to formatted strings.\n let formatted = nfc(numbers);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < formatted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 33;\n\n // Display the original and formatted numbers.\n text(`${numbers[i]} : ${formatted[i]}`, 50, y);\n }\n\n describe(\n 'The text \"12345 : 12,345\" and \"6789 : 6,789\" written on two separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Double-click to squeeze the box.\n\nlet isSqueezed = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white rectangular prism on a gray background. The box appears to become thinner when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Place the camera at the top-right.\n camera(400, -400, 800);\n\n if (isSqueezed === true) {\n // Set fovy to 0.2.\n // Set aspect to 1.5.\n perspective(0.2, 1.5);\n }\n\n // Draw the box.\n box();\n}\n\n// Change the camera's perspective when the user double-clicks.\nfunction doubleClicked() {\n isSqueezed = true;\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white rectangular prism on a gray background. The prism moves away from the camera until it disappears.');\n}\n\nfunction draw() {\n background(200);\n\n // Place the camera at the top-right.\n camera(400, -400, 800);\n\n // Set fovy to 0.2.\n // Set aspect to 1.5.\n // Set near to 600.\n // Set far to 1200.\n perspective(0.2, 1.5, 600, 1200);\n\n // Move the origin away from the camera.\n let x = -frameCount;\n let y = frameCount;\n let z = -2 * frameCount;\n translate(x, y, z);\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "String Functions",
"overloads": [
{
- "line": 322,
"params": [
{
- "name": "num",
- "description": "<p>number to format.</p>\n",
- "type": "Number|String"
+ "name": "fovy",
+ "description": "camera frustum vertical field of view. Defaults to\n<code>2 * atan(height / 2 / 800)</code>.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "right",
- "description": "<p>number of digits to include to the right\n of the decimal point.</p>\n",
- "type": "Integer|String",
- "optional": true
+ "name": "aspect",
+ "description": "camera frustum aspect ratio. Defaults to\n<code>width / height</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "near",
+ "description": "distance from the camera to the near clipping plane.\nDefaults to <code>0.1 * 800</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "far",
+ "description": "distance from the camera to the far clipping plane.\nDefaults to <code>10 * 800</code>.",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "return": {
- "description": "formatted string.",
- "type": "String"
- }
- },
+ ]
+ }
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
+ },
+ {
+ "name": "linePerspective",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 3463,
+ "itemtype": "method",
+ "description": "<p>Enables or disables perspective for lines in 3D sketches.</p>\n<p>In WebGL mode, lines can be drawn with a thinner stroke when they’re\nfurther from the camera. Doing so gives them a more realistic appearance.</p>\n<p>By default, lines are drawn differently based on the type of perspective\nbeing used:</p>\n<ul><li><code>perspective()</code> and <code>frustum()</code> simulate a realistic perspective. In\nthese modes, stroke weight is affected by the line’s distance from the\ncamera. Doing so results in a more natural appearance. <code>perspective()</code> is\nthe default mode for 3D sketches.</li><li><code>ortho()</code> doesn’t simulate a realistic perspective. In this mode, stroke\nweights are consistent regardless of the line’s distance from the camera.\nDoing so results in a more predictable and consistent appearance.</li></ul><p><code>linePerspective()</code> can override the default line drawing mode.</p>\n<p>The parameter, <code>enable</code>, is optional. It’s a <code>Boolean</code> value that sets the\nway lines are drawn. If <code>true</code> is passed, as in <code>linePerspective(true)</code>,\nthen lines will appear thinner when they are further from the camera. If\n<code>false</code> is passed, as in <code>linePerspective(false)</code>, then lines will have\nconsistent stroke weights regardless of their distance from the camera. By\ndefault, <code>linePerspective()</code> is enabled.</p>\n<p>Calling <code>linePerspective()</code> without passing an argument returns <code>true</code> if\nit's enabled and <code>false</code> if not.</p>\n<p>Note: <code>linePerspective()</code> can only be used in WebGL mode.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click the canvas to toggle the line perspective.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A white cube with black edges on a gray background. Its edges toggle between thick and thin when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the line perspective when the user double-clicks.\nfunction doubleClicked() {\n let isEnabled = linePerspective();\n linePerspective(!isEnabled);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click the canvas to toggle the line perspective.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A row of cubes with black edges on a gray background. Their edges toggle between thick and thin when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Use an orthographic projection.\n ortho();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the line perspective when the user double-clicks.\nfunction doubleClicked() {\n let isEnabled = linePerspective();\n linePerspective(!isEnabled);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 411,
"params": [
{
- "name": "nums",
- "description": "<p>numbers to format.</p>\n",
- "type": "Number[]"
- },
- {
- "name": "right",
- "description": "",
- "type": "Integer|String",
- "optional": true
+ "name": "enable",
+ "description": "whether to enable line perspective.",
+ "type": "Boolean"
}
- ],
+ ]
+ },
+ {
+ "params": [],
"return": {
- "description": "formatted strings.",
- "type": "String[]"
+ "description": "whether line perspective is enabled.",
+ "type": "boolean"
}
}
- ]
+ ],
+ "return": {
+ "description": "whether line perspective is enabled.",
+ "type": "boolean"
+ },
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "file": "src/utilities/string_functions.js",
- "line": 447,
- "description": "<p>Converts a <code>Number</code> into a <code>String</code> with a plus or minus sign.</p>\n<p><code>nfp()</code> converts numbers such as 123 into strings formatted with a <code>+</code> or\n<code>-</code> symbol to mark whether they're positive or negative, as in <code>'+123'</code>.</p>\n<p>The first parameter, <code>num</code>, is the number to convert to a string. For\nexample, calling <code>nfp(123.45)</code> returns the string <code>'+123.45'</code>. If an array\nof numbers is passed, as in <code>nfp([123.45, -6.78])</code>, an array of formatted\nstrings will be returned.</p>\n<p>The second parameter, <code>left</code>, is optional. If a number is passed, as in\n<code>nfp(123.45, 4)</code>, it sets the minimum number of digits to include to the\nleft of the decimal place. If <code>left</code> is larger than the number of digits in\n<code>num</code>, then unused digits will be set to 0. For example, calling\n<code>nfp(123.45, 4)</code> returns the string <code>'+0123.45'</code>.</p>\n<p>The third parameter, <code>right</code>, is also optional. If a number is passed, as\nin <code>nfp(123.45, 4, 1)</code>, it sets the minimum number of digits to include to\nthe right of the decimal place. If <code>right</code> is smaller than the number of\ndecimal places in <code>num</code>, then <code>num</code> will be rounded to the given number of\ndecimal places. For example, calling <code>nfp(123.45, 4, 1)</code> returns the\nstring <code>'+0123.5'</code>. If <code>right</code> is larger than the number of decimal places\nin <code>num</code>, then unused decimal places will be set to 0. For example,\ncalling <code>nfp(123.45, 4, 3)</code> returns the string <code>'+0123.450'</code>.</p>\n",
+ "name": "ortho",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 3575,
"itemtype": "method",
- "name": "nfp",
- "return": {
- "description": "formatted string.",
- "type": "String"
- },
+ "chainable": 1,
+ "description": "<p>Sets an orthographic projection for the current camera in a 3D sketch.</p>\n<p>In an orthographic projection, shapes with the same size always appear the\nsame size, regardless of whether they are near or far from the camera.</p>\n<p><code>ortho()</code> changes the camera’s perspective by changing its viewing frustum\nfrom a truncated pyramid to a rectangular prism. The camera is placed in\nfront of the frustum and views everything between the frustum’s near plane\nand its far plane. <code>ortho()</code> has six optional parameters to define the\nfrustum.</p>\n<p>The first four parameters, <code>left</code>, <code>right</code>, <code>bottom</code>, and <code>top</code>, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\n<code>ortho(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels wide and\n400 pixels tall. By default, these coordinates are set based on the\nsketch’s width and height, as in\n<code>ortho(-width / 2, width / 2, -height / 2, height / 2)</code>.</p>\n<p>The last two parameters, <code>near</code> and <code>far</code>, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\n<code>ortho(-100, 100, 200, 200, 50, 1000)</code> creates a frustum that’s 200 pixels\nwide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000\npixels from the camera. By default, <code>near</code> and <code>far</code> are set to 0 and\n<code>max(width, height) + 800</code>, respectively.</p>\n<p>Note: <code>ortho()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create number variables.\n let positive = 123;\n let negative = -123;\n\n // Convert the positive number to a formatted string.\n let p = nfp(positive);\n\n // Convert the negative number to a formatted string\n // with four digits to the left of the decimal\n // and two digits to the right of the decimal.\n let n = nfp(negative, 4, 2);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Display the original and formatted numbers.\n text(`${positive} : ${p}`, 50, 33);\n text(`${negative} : ${n}`, 50, 67);\n\n describe(\n 'The text \"123 : +123\" and \"-123 : -123.00\" written on separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create number variables.\n let numbers = [123, -4.56];\n\n // Convert the numbers to formatted strings\n // with four digits to the left of the decimal\n // and one digit to the right of the decimal.\n let formatted = nfp(numbers, 4, 1);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < formatted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 33;\n\n // Display the original and formatted numbers.\n text(`${numbers[i]} : ${formatted[i]}`, 50, y);\n }\n\n describe(\n 'The text \"123 : +0123.0\" and \"-4.56 : 00-4.6\" written on separate lines. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A row of tiny, white cubes on a gray background. All the cubes appear the same size.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply an orthographic projection.\n ortho();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply an orthographic projection.\n // Center the frustum.\n // Set its width and height to 20.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n ortho(-10, 10, -10, 10, 300, 350);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "String Functions",
"overloads": [
{
- "line": 447,
"params": [
{
- "name": "num",
- "description": "<p>number to format.</p>\n",
+ "name": "left",
+ "description": "x-coordinate of the frustum’s left plane. Defaults to <code>-width / 2</code>.",
+ "optional": 1,
"type": "Number"
},
{
- "name": "left",
- "description": "<p>number of digits to include to the left of the\n decimal point.</p>\n",
- "type": "Integer",
- "optional": true
+ "name": "right",
+ "description": "x-coordinate of the frustum’s right plane. Defaults to <code>width / 2</code>.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "right",
- "description": "<p>number of digits to include to the right of the\n decimal point.</p>\n",
- "type": "Integer",
- "optional": true
- }
- ],
- "return": {
- "description": "formatted string.",
- "type": "String"
- }
- },
- {
- "line": 552,
- "params": [
+ "name": "bottom",
+ "description": "y-coordinate of the frustum’s bottom plane. Defaults to <code>height / 2</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
{
- "name": "nums",
- "description": "<p>numbers to format.</p>\n",
- "type": "Number[]"
+ "name": "top",
+ "description": "y-coordinate of the frustum’s top plane. Defaults to <code>-height / 2</code>.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "left",
- "description": "",
- "type": "Integer",
- "optional": true
+ "name": "near",
+ "description": "z-coordinate of the frustum’s near plane. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "right",
- "description": "",
- "type": "Integer",
- "optional": true
+ "name": "far",
+ "description": "z-coordinate of the frustum’s far plane. Defaults to <code>max(width, height) + 800</code>.",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "return": {
- "description": "formatted strings.",
- "type": "String[]"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "file": "src/utilities/string_functions.js",
- "line": 573,
- "description": "<p>Converts a positive <code>Number</code> into a <code>String</code> with an extra space in front.</p>\n<p><code>nfs()</code> converts positive numbers such as 123.45 into strings formatted\nwith an extra space in front, as in ' 123.45'. Doing so can be helpful for\naligning positive and negative numbers.</p>\n<p>The first parameter, <code>num</code>, is the number to convert to a string. For\nexample, calling <code>nfs(123.45)</code> returns the string <code>' 123.45'</code>.</p>\n<p>The second parameter, <code>left</code>, is optional. If a number is passed, as in\n<code>nfs(123.45, 4)</code>, it sets the minimum number of digits to include to the\nleft of the decimal place. If <code>left</code> is larger than the number of digits in\n<code>num</code>, then unused digits will be set to 0. For example, calling\n<code>nfs(123.45, 4)</code> returns the string <code>' 0123.45'</code>.</p>\n<p>The third parameter, <code>right</code>, is also optional. If a number is passed, as\nin <code>nfs(123.45, 4, 1)</code>, it sets the minimum number of digits to include to\nthe right of the decimal place. If <code>right</code> is smaller than the number of\ndecimal places in <code>num</code>, then <code>num</code> will be rounded to the given number of\ndecimal places. For example, calling <code>nfs(123.45, 4, 1)</code> returns the\nstring <code>' 0123.5'</code>. If <code>right</code> is larger than the number of decimal places\nin <code>num</code>, then unused decimal places will be set to 0. For example,\ncalling <code>nfs(123.45, 4, 3)</code> returns the string <code>' 0123.450'</code>.</p>\n",
+ "name": "frustum",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 3687,
"itemtype": "method",
- "name": "nfs",
- "return": {
- "description": "formatted string.",
- "type": "String"
- },
+ "chainable": 1,
+ "description": "<p>Sets the frustum of the current camera in a 3D sketch.</p>\n<p>In a frustum projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes.</p>\n<p><code>frustum()</code> changes the default camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.</p>\n<p>The first four parameters, <code>left</code>, <code>right</code>, <code>bottom</code>, and <code>top</code>, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\n<code>frustum(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels wide\nand 400 pixels tall. By default, these coordinates are set based on the\nsketch’s width and height, as in\n<code>ortho(-width / 20, width / 20, height / 20, -height / 20)</code>.</p>\n<p>The last two parameters, <code>near</code> and <code>far</code>, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\n<code>ortho(-100, 100, 200, -200, 50, 1000)</code> creates a frustum that’s 200 pixels\nwide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000\npixels from the camera. By default, near is set to <code>0.1 * 800</code>, which is\n1/10th the default distance between the camera and the origin. <code>far</code> is set\nto <code>10 * 800</code>, which is 10 times the default distance between the camera\nand the origin.</p>\n<p>Note: <code>frustum()</code> can only be used in WebGL mode.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create number variables.\n let positive = 123;\n let negative = -123;\n\n // Convert the positive number to a formatted string.\n let formatted = nfs(positive);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Display the negative number and the formatted positive number.\n text(negative, 50, 33);\n text(formatted, 50, 67);\n\n describe(\n 'The numbers -123 and 123 written on separate lines. The numbers align vertically. The text is in black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let number = 123.45;\n\n // Convert the positive number to a formatted string.\n // Use four digits to the left of the decimal and\n // one digit to the right.\n let formatted = nfs(number, 4, 1);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Display a negative version of the number and\n // the formatted positive version.\n text('-0123.5', 50, 33);\n text(formatted, 50, 67);\n\n describe(\n 'The numbers \"-0123.5\" and \"0123.5\" written on separate lines. The numbers align vertically. The text is in black on a gray background.'\n );\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A row of white cubes on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply the default frustum projection.\n frustum();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust the frustum.\n // Center it.\n // Set its width and height to 20 pixels.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n frustum(-10, 10, -10, 10, 300, 350);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "String Functions",
"overloads": [
{
- "line": 573,
"params": [
{
- "name": "num",
- "description": "<p>number to format.</p>\n",
+ "name": "left",
+ "description": "x-coordinate of the frustum’s left plane. Defaults to <code>-width / 20</code>.",
+ "optional": 1,
"type": "Number"
},
{
- "name": "left",
- "description": "<p>number of digits to include to the left of the\n decimal point.</p>\n",
- "type": "Integer",
- "optional": true
+ "name": "right",
+ "description": "x-coordinate of the frustum’s right plane. Defaults to <code>width / 20</code>.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "right",
- "description": "<p>number of digits to include to the right of the\n decimal point.</p>\n",
- "type": "Integer",
- "optional": true
- }
- ],
- "return": {
- "description": "formatted string.",
- "type": "String"
- }
- },
- {
- "line": 669,
- "params": [
+ "name": "bottom",
+ "description": "y-coordinate of the frustum’s bottom plane. Defaults to <code>height / 20</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
{
- "name": "nums",
- "description": "<p>numbers to format.</p>\n",
- "type": "Array"
+ "name": "top",
+ "description": "y-coordinate of the frustum’s top plane. Defaults to <code>-height / 20</code>.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "left",
- "description": "",
- "type": "Integer",
- "optional": true
+ "name": "near",
+ "description": "z-coordinate of the frustum’s near plane. Defaults to <code>0.1 * 800</code>.",
+ "optional": 1,
+ "type": "Number"
},
{
- "name": "right",
- "description": "",
- "type": "Integer",
- "optional": true
+ "name": "far",
+ "description": "z-coordinate of the frustum’s far plane. Defaults to <code>10 * 800</code>.",
+ "optional": 1,
+ "type": "Number"
}
- ],
- "return": {
- "description": "formatted strings.",
- "type": "String[]"
- }
+ ]
}
- ]
+ ],
+ "class": "p5",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "file": "src/utilities/string_functions.js",
- "line": 690,
- "description": "<p>Splits a <code>String</code> into pieces and returns an array containing the pieces.</p>\n<p>The first parameter, <code>value</code>, is the string to split.</p>\n<p>The second parameter, <code>delim</code>, is the character(s) that should be used to\nsplit the string. For example, calling\n<code>split('rock...paper...scissors', '...')</code> would return the array\n<code>['rock', 'paper', 'scissors']</code> because there are three periods <code>...</code>\nbetween each word.</p>\n",
+ "name": "createCamera",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 3765,
"itemtype": "method",
- "name": "split",
- "params": [
- {
- "name": "value",
- "description": "<p>the String to be split</p>\n",
- "type": "String"
- },
+ "description": "<p>Creates a new <a href=\"#/p5.Camera\">p5.Camera</a> object and sets it\nas the current (active) camera.</p>\n<p>The new camera is initialized with a default position <code>(0, 0, 800)</code> and a\ndefault perspective projection. Its properties can be controlled with\n<a href=\"#/p5.Camera\">p5.Camera</a> methods such as\n<code>myCamera.lookAt(0, 0, 0)</code>.</p>\n<p>Note: Every 3D sketch starts with a default camera initialized.\nThis camera can be controlled with the functions\n<a href=\"#/p5/camera\">camera()</a>,\n<a href=\"#/p5/perspective\">perspective()</a>,\n<a href=\"#/p5/ortho\">ortho()</a>, and\n<a href=\"#/p5/frustum\">frustum()</a> if it's the only camera in the scene.</p>\n<p>Note: <code>createCamera()</code> can only be used in WebGL mode.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n setCamera(cam2);\n usingCam1 = false;\n } else {\n setCamera(cam1);\n usingCam1 = true;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "delim",
- "description": "<p>the String used to separate the data</p>\n",
- "type": "String"
+ "params": [],
+ "return": {
+ "description": "the new camera.",
+ "type": "p5.Camera"
+ }
}
],
"return": {
- "description": "Array of Strings",
- "type": "String[]"
+ "description": "the new camera.",
+ "type": "p5.Camera"
},
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'rock...paper...scissors';\n\n // Split the string at each ...\n let words = split(string, '...');\n\n // Print the array to the console:\n // [\"rock\", \"paper\", \"scissors\"]\n print(words);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Iterate over the words array.\n for (let i = 0; i < words.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the word.\n text(words[i], 50, y);\n }\n\n describe(\n 'The words \"rock\", \"paper\", and \"scissors\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "String Functions"
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "file": "src/utilities/string_functions.js",
- "line": 751,
- "description": "<p>Splits a <code>String</code> into pieces and returns an array containing the pieces.</p>\n<p><code>splitTokens()</code> is an enhanced version of\n<a href=\"#/p5/split\">split()</a>. It can split a string when any characters\nfrom a list are detected.</p>\n<p>The first parameter, <code>value</code>, is the string to split.</p>\n<p>The second parameter, <code>delim</code>, is optional. It sets the character(s) that\nshould be used to split the string. <code>delim</code> can be a single string, as in\n<code>splitTokens('rock...paper...scissors...shoot', '...')</code>, or an array of\nstrings, as in\n<code>splitTokens('rock;paper,scissors...shoot, [';', ',', '...'])</code>. By default,\nif no <code>delim</code> characters are specified, then any whitespace character is\nused to split. Whitespace characters include tab (<code>\\t</code>), line feed (<code>\\n</code>),\ncarriage return (<code>\\r</code>), form feed (<code>\\f</code>), and space.</p>\n",
+ "name": "setCamera",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 3832,
"itemtype": "method",
- "name": "splitTokens",
- "params": [
- {
- "name": "value",
- "description": "<p>string to split.</p>\n",
- "type": "String"
- },
+ "description": "<p>Sets the current (active) camera of a 3D sketch.</p>\n<p><code>setCamera()</code> allows for switching between multiple cameras created with\n<a href=\"#/p5/createCamera\">createCamera()</a>.</p>\n<p>Note: <code>setCamera()</code> can only be used in WebGL mode.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n setCamera(cam2);\n usingCam1 = false;\n } else {\n setCamera(cam1);\n usingCam1 = true;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "delim",
- "description": "<p>character(s) to use for splitting the string.</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "cam",
+ "description": "camera that should be made active.",
+ "type": "p5.Camera"
+ }
+ ]
}
],
- "return": {
- "description": "separated strings.",
- "type": "String[]"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'rock paper scissors shoot';\n\n // Split the string at each space.\n let words = splitTokens(string);\n\n // Print the array to the console.\n print(words);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Iterate over the words array.\n for (let i = 0; i < words.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Display the word.\n text(words[i], 50, y);\n }\n\n describe(\n 'The words \"rock\", \"paper\", \"scissors\", and \"shoot\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'rock...paper...scissors...shoot';\n\n // Split the string at each ...\n let words = splitTokens(string, '...');\n\n // Print the array to the console.\n print(words);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Iterate over the words array.\n for (let i = 0; i < words.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Display the word.\n text(words[i], 50, y);\n }\n\n describe(\n 'The words \"rock\", \"paper\", \"scissors\", and \"shoot\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'rock;paper,scissors...shoot';\n\n // Split the string at each semicolon, comma, or ...\n let words = splitTokens(string, [';', ',', '...']);\n\n // Print the array to the console.\n print(words);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Iterate over the words array.\n for (let i = 0; i < words.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Display the word.\n text(words[i], 50, y);\n }\n\n describe(\n 'The words \"rock\", \"paper\", \"scissors\", and \"shoot\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Data",
- "submodule": "String Functions"
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "file": "src/utilities/string_functions.js",
- "line": 916,
- "description": "<p>Removes whitespace from the start and end of a <code>String</code> without changing the middle.</p>\n<p><code>trim()</code> trims\n<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/whitespace\" target=\"_blank\">whitespace characters</a>\nsuch as spaces, carriage returns, tabs, Unicode \"nbsp\" character.</p>\n<p>The parameter, <code>str</code>, is the string to trim. If a single string is passed,\nas in <code>trim(' pad ')</code>, a single string is returned. If an array of\nstrings is passed, as in <code>trim([' pad ', '\\n space \\n'])</code>, an array of\nstrings is returned.</p>\n",
+ "name": "saveObj",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 369,
"itemtype": "method",
- "name": "trim",
- "return": {
- "description": "trimmed string.",
- "type": "String"
- },
+ "description": "<p>The <code>saveObj()</code> function exports <code>p5.Geometry</code> objects as\n3D models in the Wavefront .obj file format.\nThis way, you can use the 3D shapes you create in p5.js in other software\nfor rendering, animation, 3D printing, or more.</p>\n<p>The exported .obj file will include the faces and vertices of the <code>p5.Geometry</code>,\nas well as its texture coordinates and normals, if it has them.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = ' p5*js ';\n\n // Trim the whitespace.\n let trimmed = trim(string);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the text.\n text(`Hello, ${trimmed}!`, 50, 50);\n\n describe('The text \"Hello, p5*js!\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of strings.\n let strings = [' wide ', '\\n open ', '\\n spaces '];\n\n // Trim the whitespace.\n let trimmed = trim(strings);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(10);\n\n // Display the text.\n text(`${trimmed[0]} ${trimmed[1]} ${trimmed[2]}`, 50, 50);\n\n describe('The text \"wide open spaces\" written in black on a gray background.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet myModel;\nlet saveBtn;\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myModel = buildGeometry(function()) {\n for (let i = 0; i < 5; i++) {\n push();\n translate(\n random(-75, 75),\n random(-75, 75),\n random(-75, 75)\n );\n sphere(random(5, 50));\n pop();\n }\n });\n\n saveBtn = createButton('Save .obj');\n saveBtn.mousePressed(() => myModel.saveObj());\n\n describe('A few spheres rotating in space');\n}\n\nfunction draw() {\n background(0);\n noStroke();\n lights();\n rotateX(millis() * 0.001);\n rotateY(millis() * 0.002);\n model(myModel);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Data",
- "submodule": "String Functions",
"overloads": [
{
- "line": 916,
"params": [
{
- "name": "str",
- "description": "<p>string to trim.</p>\n",
+ "name": "fileName",
+ "description": "The name of the file to save the model as.\nIf not specified, the default file name will be 'model.obj'.",
+ "optional": 1,
"type": "String"
}
- ],
- "return": {
- "description": "trimmed string.",
- "type": "String"
- }
- },
- {
- "line": 984,
- "params": [
- {
- "name": "strs",
- "description": "<p>strings to trim.</p>\n",
- "type": "String[]"
- }
- ],
- "return": {
- "description": "trimmed strings.",
- "type": "String[]"
- }
+ ]
}
- ]
- },
- {
- "file": "src/utilities/time_date.js",
- "line": 10,
- "description": "<p>Returns the current day as a number from 1–31.</p>\n",
- "itemtype": "method",
- "name": "day",
- "return": {
- "description": "current day between 1 and 31.",
- "type": "Integer"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current day.\n let d = day();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the day.\n text(`Current day: ${d}`, 20, 50, 60);\n\n describe(`The text 'Current day: ${d}' written in black on a gray background.`);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "IO",
- "submodule": "Time & Date"
- },
- {
- "file": "src/utilities/time_date.js",
- "line": 44,
- "description": "<p>Returns the current hour as a number from 0–23.</p>\n",
- "itemtype": "method",
- "name": "hour",
- "return": {
- "description": "current hour between 0 and 23.",
- "type": "Integer"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current hour.\n let h = hour();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the hour.\n text(`Current hour: ${h}`, 20, 50, 60);\n\n describe(`The text 'Current hour: ${h}' written in black on a gray background.`);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "IO",
- "submodule": "Time & Date"
- },
- {
- "file": "src/utilities/time_date.js",
- "line": 78,
- "description": "<p>Returns the current minute as a number from 0–59.</p>\n",
- "itemtype": "method",
- "name": "minute",
- "return": {
- "description": "current minute between 0 and 59.",
- "type": "Integer"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current minute.\n let m = minute();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the minute.\n text(`Current minute: ${m}`, 10, 50, 80);\n\n describe(`The text 'Current minute: ${m}' written in black on a gray background.`);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "IO",
- "submodule": "Time & Date"
- },
- {
- "file": "src/utilities/time_date.js",
- "line": 112,
- "description": "<p>Returns the number of milliseconds since a sketch started running.</p>\n<p><code>millis()</code> keeps track of how long a sketch has been running in\nmilliseconds (thousandths of a second). This information is often\nhelpful for timing events and animations.</p>\n<p>If a sketch has a\n<a href=\"#/p5/setup\">setup()</a> function, then <code>millis()</code> begins tracking\ntime before the code in <a href=\"#/p5/setup\">setup()</a> runs. If a\nsketch includes a <a href=\"#/p5/preload\">preload()</a> function, then\n<code>millis()</code> begins tracking time as soon as the code in\n<a href=\"#/p5/preload\">preload()</a> starts running.</p>\n",
- "itemtype": "method",
- "name": "millis",
- "return": {
- "description": "number of milliseconds since starting the sketch.",
- "type": "Number"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the number of milliseconds the sketch has run.\n let ms = millis();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(10);\n textFont('Courier New');\n\n // Display how long it took setup() to be called.\n text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);\n\n describe(\n `The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The text \"Running time: S sec\" written in black on a gray background. The number S increases as the sketch runs.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the number of seconds the sketch has run.\n let s = millis() / 1000;\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(10);\n textFont('Courier New');\n\n // Display how long the sketch has run.\n text(`Running time: ${nf(s, 1, 1)} sec`, 5, 50, 90);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle oscillates left and right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the number of seconds the sketch has run.\n let s = millis() / 1000;\n\n // Calculate an x-coordinate.\n let x = 30 * sin(s) + 50;\n\n // Draw the circle.\n circle(x, 50, 30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Load the GeoJSON.\nfunction preload() {\n loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the number of milliseconds the sketch has run.\n let ms = millis();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(11);\n\n // Display how long it took to load the data.\n text(`It took ${round(ms, 2)} ms to load the data`, 5, 50, 100);\n\n describe(\n `The text \"It took ${round(ms, 2)} ms to load the data\" written in black on a gray background.`\n );\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "IO",
- "submodule": "Time & Date"
- },
- {
- "file": "src/utilities/time_date.js",
- "line": 242,
- "description": "<p>Returns the current month as a number from 1–12.</p>\n",
- "itemtype": "method",
- "name": "month",
- "return": {
- "description": "current month between 1 and 12.",
- "type": "Integer"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current month.\n let m = month();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the month.\n text(`Current month: ${m}`, 10, 50, 80);\n\n describe(`The text 'Current month: ${m}' written in black on a gray background.`);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "IO",
- "submodule": "Time & Date"
- },
- {
- "file": "src/utilities/time_date.js",
- "line": 277,
- "description": "<p>Returns the current second as a number from 0–59.</p>\n",
- "itemtype": "method",
- "name": "second",
- "return": {
- "description": "current second between 0 and 59.",
- "type": "Integer"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current second.\n let s = second();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the second.\n text(`Current second: ${s}`, 10, 50, 80);\n\n describe(`The text 'Current second: ${s}' written in black on a gray background.`);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "IO",
- "submodule": "Time & Date"
- },
- {
- "file": "src/utilities/time_date.js",
- "line": 311,
- "description": "<p>Returns the current year as a number such as 1999.</p>\n",
- "itemtype": "method",
- "name": "year",
- "return": {
- "description": "current year.",
- "type": "Integer"
- },
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current year.\n let y = year();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the year.\n text(`Current year: ${y}`, 10, 50, 80);\n\n describe(`The text 'Current year: ${y}' written in black on a gray background.`);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "IO",
- "submodule": "Time & Date"
- },
- {
- "file": "src/webgl/3d_primitives.js",
- "line": 13,
- "description": "<p>Begins adding shapes to a new\n<a href=\"#/p5.Geometry\">p5.Geometry</a> object.</p>\n<p>The <code>beginGeometry()</code> and <a href=\"#/p5/endGeometry\">endGeometry()</a>\nfunctions help with creating complex 3D shapes from simpler ones such as\n<a href=\"#/p5/sphere\">sphere()</a>. <code>beginGeometry()</code> begins adding shapes\nto a custom <a href=\"#/p5.Geometry\">p5.Geometry</a> object and\n<a href=\"#/p5/endGeometry\">endGeometry()</a> stops adding them.</p>\n<p><code>beginGeometry()</code> and <a href=\"#/p5/endGeometry\">endGeometry()</a> can help\nto make sketches more performant. For example, if a complex 3D shape\ndoesn’t change while a sketch runs, then it can be created with\n<code>beginGeometry()</code> and <a href=\"#/p5/endGeometry\">endGeometry()</a>.\nCreating a <a href=\"#/p5.Geometry\">p5.Geometry</a> object once and then\ndrawing it will run faster than repeatedly drawing the individual pieces.</p>\n<p>See <a href=\"#/p5/buildGeometry\">buildGeometry()</a> for another way to\nbuild 3D shapes.</p>\n<p>Note: <code>beginGeometry()</code> can only be used in WebGL mode.</p>\n",
- "itemtype": "method",
- "name": "beginGeometry",
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add a cone.\n cone();\n\n // Stop building the p5.Geometry object.\n shape = endGeometry();\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n createArrow();\n\n describe('A white arrow drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\nfunction createArrow() {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add shapes.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n\n // Stop building the p5.Geometry object.\n shape = endGeometry();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet blueArrow;\nlet redArrow;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the arrows.\n redArrow = createArrow('red');\n blueArrow = createArrow('blue');\n\n describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the red arrow.\n model(redArrow);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the blue arrow.\n model(blueArrow);\n}\n\nfunction createArrow(fillColor) {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n fill(fillColor);\n\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n\n // Stop building the p5.Geometry object.\n let shape = endGeometry();\n\n return shape;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = createParticles();\n}\n\nfunction createParticles() {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add shapes.\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n\n // Stop building the p5.Geometry object.\n let shape = endGeometry();\n\n return shape;\n}\n</code>\n</div>"
],
"class": "p5",
+ "static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
- "file": "src/webgl/3d_primitives.js",
- "line": 266,
- "description": "<p>Stops adding shapes to a new\n<a href=\"#/p5.Geometry\">p5.Geometry</a> object and returns the object.</p>\n<p>The <code>beginGeometry()</code> and <a href=\"#/p5/endGeometry\">endGeometry()</a>\nfunctions help with creating complex 3D shapes from simpler ones such as\n<a href=\"#/p5/sphere\">sphere()</a>. <code>beginGeometry()</code> begins adding shapes\nto a custom <a href=\"#/p5.Geometry\">p5.Geometry</a> object and\n<a href=\"#/p5/endGeometry\">endGeometry()</a> stops adding them.</p>\n<p><code>beginGeometry()</code> and <a href=\"#/p5/endGeometry\">endGeometry()</a> can help\nto make sketches more performant. For example, if a complex 3D shape\ndoesn’t change while a sketch runs, then it can be created with\n<code>beginGeometry()</code> and <a href=\"#/p5/endGeometry\">endGeometry()</a>.\nCreating a <a href=\"#/p5.Geometry\">p5.Geometry</a> object once and then\ndrawing it will run faster than repeatedly drawing the individual pieces.</p>\n<p>See <a href=\"#/p5/buildGeometry\">buildGeometry()</a> for another way to\nbuild 3D shapes.</p>\n<p>Note: <code>endGeometry()</code> can only be used in WebGL mode.</p>\n",
+ "name": "saveStl",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 480,
"itemtype": "method",
- "name": "endGeometry",
- "return": {
- "description": "new 3D shape.",
- "type": "p5.Geometry"
- },
+ "description": "<p>The <code>saveStl()</code> function exports <code>p5.Geometry</code> objects as\n3D models in the STL stereolithography file format.\nThis way, you can use the 3D shapes you create in p5.js in other software\nfor rendering, animation, 3D printing, or more.</p>\n<p>The exported .stl file will include the faces, vertices, and normals of the <code>p5.Geometry</code>.</p>\n<p>By default, this method saves a text-based .stl file. Alternatively, you can save a more compact\nbut less human-readable binary .stl file by passing <code>{ binary: true }</code> as a second parameter.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add a cone.\n cone();\n\n // Stop building the p5.Geometry object.\n shape = endGeometry();\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n createArrow();\n\n describe('A white arrow drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\nfunction createArrow() {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add shapes.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n\n // Stop building the p5.Geometry object.\n shape = endGeometry();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet blueArrow;\nlet redArrow;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the arrows.\n redArrow = createArrow('red');\n blueArrow = createArrow('blue');\n\n describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the red arrow.\n model(redArrow);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the blue arrow.\n model(blueArrow);\n}\n\nfunction createArrow(fillColor) {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n fill(fillColor);\n\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n\n // Stop building the p5.Geometry object.\n let shape = endGeometry();\n\n return shape;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = createParticles();\n}\n\nfunction createParticles() {\n // Start building the p5.Geometry object.\n beginGeometry();\n\n // Add shapes.\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n\n // Stop building the p5.Geometry object.\n let shape = endGeometry();\n\n return shape;\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet myModel;\nlet saveBtn1;\nlet saveBtn2;\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myModel = buildGeometry(function() {\n for (let i = 0; i < 5; i++) {\n push();\n translate(\n random(-75, 75),\n random(-75, 75),\n random(-75, 75)\n );\n sphere(random(5, 50));\n pop();\n }\n });\n\n saveBtn1 = createButton('Save .stl');\n saveBtn1.mousePressed(function() {\n myModel.saveStl();\n });\n saveBtn2 = createButton('Save binary .stl');\n saveBtn2.mousePressed(function() {\n myModel.saveStl('model.stl', { binary: true });\n });\n\n describe('A few spheres rotating in space');\n}\n\nfunction draw() {\n background(0);\n noStroke();\n lights();\n rotateX(millis() * 0.001);\n rotateY(millis() * 0.002);\n model(myModel);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/3d_primitives.js",
- "line": 520,
- "description": "<p>Creates a custom <a href=\"#/p5.Geometry\">p5.Geometry</a> object from\nsimpler 3D shapes.</p>\n<p><code>buildGeometry()</code> helps with creating complex 3D shapes from simpler ones\nsuch as <a href=\"#/p5/sphere\">sphere()</a>. It can help to make sketches\nmore performant. For example, if a complex 3D shape doesn’t change while a\nsketch runs, then it can be created with <code>buildGeometry()</code>. Creating a\n<a href=\"#/p5.Geometry\">p5.Geometry</a> object once and then drawing it\nwill run faster than repeatedly drawing the individual pieces.</p>\n<p>The parameter, <code>callback</code>, is a function with the drawing instructions for\nthe new <a href=\"#/p5.Geometry\">p5.Geometry</a> object. It will be called\nonce to create the new 3D shape.</p>\n<p>See <a href=\"#/p5/beginGeometry\">beginGeometry()</a> and\n<a href=\"#/p5/endGeometry\">endGeometry()</a> for another way to build 3D\nshapes.</p>\n<p>Note: <code>buildGeometry()</code> can only be used in WebGL mode.</p>\n",
- "itemtype": "method",
- "name": "buildGeometry",
- "params": [
+ "overloads": [
{
- "name": "callback",
- "description": "<p>function that draws the shape.</p>\n",
- "type": "Function"
+ "params": [
+ {
+ "name": "fileName",
+ "description": "The name of the file to save the model as.\nIf not specified, the default file name will be 'model.stl'.",
+ "optional": 1,
+ "type": "String"
+ },
+ {
+ "name": "options",
+ "description": "Optional settings. Options can include a boolean <code>binary</code> property, which\ncontrols whether or not a binary .stl file is saved. It defaults to false.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ]
}
],
- "return": {
- "description": "new 3D shape.",
- "type": "p5.Geometry"
- },
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createShape);\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\n// Create p5.Geometry object from a single cone.\nfunction createShape() {\n cone();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the arrow.\n shape = buildGeometry(createArrow);\n\n describe('A white arrow drawn on a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrow.\n noStroke();\n\n // Draw the arrow.\n model(shape);\n}\n\nfunction createArrow() {\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createArrow);\n\n describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the p5.Geometry object again.\n model(shape);\n}\n\nfunction createArrow() {\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n\n describe('A set of white spheres on a gray background. The spheres are positioned randomly. Their positions reset when the user presses the Reset button.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = buildGeometry(createParticles);\n}\n\nfunction createParticles() {\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n}\n</code>\n</div>"
- ],
"class": "p5",
+ "static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
- "file": "src/webgl/3d_primitives.js",
- "line": 748,
- "description": "<p>Clears a <a href=\"#/p5.Geometry\">p5.Geometry</a> object from the graphics\nprocessing unit (GPU) memory.</p>\n<p><a href=\"#/p5.Geometry\">p5.Geometry</a> objects can contain lots of data\nabout their vertices, surface normals, colors, and so on. Complex 3D shapes\ncan use lots of memory which is a limited resource in many GPUs. Calling\n<code>freeGeometry()</code> can improve performance by freeing a\n<a href=\"#/p5.Geometry\">p5.Geometry</a> object’s resources from GPU memory.\n<code>freeGeometry()</code> works with <a href=\"#/p5.Geometry\">p5.Geometry</a> objects\ncreated with <a href=\"#/p5/beginGeometry\">beginGeometry()</a> and\n<a href=\"#/p5/endGeometry\">endGeometry()</a>,\n<a href=\"#/p5/buildGeometry\">buildGeometry()</a>, and\n<a href=\"#/p5/loadModel\">loadModel()</a>.</p>\n<p>The parameter, <code>geometry</code>, is the <a href=\"#/p5.Geometry\">p5.Geometry</a>\nobject to be freed.</p>\n<p>Note: A <a href=\"#/p5.Geometry\">p5.Geometry</a> object can still be drawn\nafter its resources are cleared from GPU memory. It may take longer to draw\nthe first time it’s redrawn.</p>\n<p>Note: <code>freeGeometry()</code> can only be used in WebGL mode.</p>\n",
+ "name": "flipV",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 715,
"itemtype": "method",
- "name": "freeGeometry",
- "params": [
+ "description": "<p>Flips the geometry’s texture v-coordinates.</p>\n<p>In order for <a href=\"#/p5/texture\">texture()</a> to work, the geometry\nneeds a way to map the points on its surface to the pixels in a rectangular\nimage that's used as a texture. The geometry's vertex at coordinates\n<code>(x, y, z)</code> maps to the texture image's pixel at coordinates <code>(u, v)</code>.</p>\n<p>The <a href=\"#/p5.Geometry/uvs\">myGeometry.uvs</a> array stores the\n<code>(u, v)</code> coordinates for each vertex in the order it was added to the\ngeometry. Calling <code>myGeometry.flipV()</code> flips a geometry's v-coordinates\nso that the texture appears mirrored vertically.</p>\n<p>For example, a plane's four vertices are added clockwise starting from the\ntop-left corner. Here's how calling <code>myGeometry.flipV()</code> would change a\nplane's texture coordinates:</p>\n<pre><code class=\"language-js\">// Print the original texture coordinates.\n// Output: [0, 0, 1, 0, 0, 1, 1, 1]\nconsole.log(myGeometry.uvs);\n\n// Flip the v-coordinates.\nmyGeometry.flipV();\n\n// Print the flipped texture coordinates.\n// Output: [0, 1, 1, 1, 0, 0, 1, 0]\nconsole.log(myGeometry.uvs);\n\n// Notice the swaps:\n// Left vertices: [0, 0] <--> [1, 0]\n// Right vertices: [1, 0] <--> [1, 1]</code></pre>",
+ "example": [
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n img = await loadImage('assets/laDefense.jpg');\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create p5.Geometry objects.\n let geom1 = buildGeometry(createShape);\n let geom2 = buildGeometry(createShape);\n\n // Flip geom2's V texture coordinates.\n geom2.flipV();\n\n // Left (original).\n push();\n translate(-25, 0, 0);\n texture(img);\n noStroke();\n model(geom1);\n pop();\n\n // Right (flipped).\n push();\n translate(25, 0, 0);\n texture(img);\n noStroke();\n model(geom2);\n pop();\n\n describe(\n 'Two photos of a ceiling on a gray background. The photos are mirror images of each other.'\n );\n}\n\nfunction createShape() {\n plane(40);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "geometry",
- "description": "<p>3D shape whose resources should be freed.</p>\n",
- "type": "p5.Geometry"
+ "params": []
}
],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Geometry object.\n beginGeometry();\n cone();\n let shape = endGeometry();\n\n // Draw the shape.\n model(shape);\n\n // Free the shape's resources.\n freeGeometry(shape);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet button;\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a button to reset the particle system.\n button = createButton('Reset');\n\n // Call resetModel() when the user presses the button.\n button.mousePressed(resetModel);\n\n // Add the original set of particles.\n resetModel();\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n\n // Draw the particles.\n model(particles);\n}\n\nfunction resetModel() {\n // If the p5.Geometry object has already been created,\n // free those resources.\n if (particles) {\n freeGeometry(particles);\n }\n\n // Create a new p5.Geometry object with random spheres.\n particles = buildGeometry(createParticles);\n}\n\nfunction createParticles() {\n for (let i = 0; i < 60; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 20);\n let y = randomGaussian(0, 20);\n let z = randomGaussian(0, 20);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(5);\n pop();\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
+ "class": "p5.Geometry",
+ "static": false,
"module": "Shape",
"submodule": "3D Primitives"
},
{
- "file": "src/webgl/3d_primitives.js",
- "line": 866,
- "description": "<p>Draws a plane.</p>\n<p>A plane is a four-sided, flat shape with every angle measuring 90˚. It’s\nsimilar to a rectangle and offers advanced drawing features in WebGL mode.</p>\n<p>The first parameter, <code>width</code>, is optional. If a <code>Number</code> is passed, as in\n<code>plane(20)</code>, it sets the plane’s width and height. By default, <code>width</code> is\n50.</p>\n<p>The second parameter, <code>height</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>plane(20, 30)</code>, it sets the plane’s height. By default, <code>height</code> is\nset to the plane’s <code>width</code>.</p>\n<p>The third parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>plane(20, 30, 5)</code> it sets the number of triangle subdivisions to use\nalong the x-axis. All 3D shapes are made by connecting triangles to form\ntheir surfaces. By default, <code>detailX</code> is 1.</p>\n<p>The fourth parameter, <code>detailY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>plane(20, 30, 5, 7)</code> it sets the number of triangle subdivisions to\nuse along the y-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, <code>detailY</code> is 1.</p>\n<p>Note: <code>plane()</code> can only be used in WebGL mode.</p>\n",
+ "name": "setAttributes",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.RendererGL.js",
+ "line": 2700,
"itemtype": "method",
- "name": "plane",
- "params": [
- {
- "name": "width",
- "description": "<p>width of the plane.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "height",
- "description": "<p>height of the plane.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Set attributes for the WebGL Drawing context.\nThis is a way of adjusting how the WebGL\nrenderer works to fine-tune the display and performance.</p>\n<p>Note that this will reinitialize the drawing context\nif called after the WebGL canvas is made.</p>\n<p>If an object is passed as the parameter, all attributes\nnot declared in the object will be set to defaults.</p>\n<p>The available attributes are:\n<br>\nalpha - indicates if the canvas contains an alpha buffer\ndefault is true</p>\n<p>depth - indicates whether the drawing buffer has a depth buffer\nof at least 16 bits - default is true</p>\n<p>stencil - indicates whether the drawing buffer has a stencil buffer\nof at least 8 bits</p>\n<p>antialias - indicates whether or not to perform anti-aliasing\ndefault is false (true in Safari)</p>\n<p>premultipliedAlpha - indicates that the page compositor will assume\nthe drawing buffer contains colors with pre-multiplied alpha\ndefault is true</p>\n<p>preserveDrawingBuffer - if true the buffers will not be cleared and\nand will preserve their values until cleared or overwritten by author\n(note that p5 clears automatically on draw loop)\ndefault is true</p>\n<p>perPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader otherwise per-vertex lighting is used.\ndefault is true.</p>\n<p>version - either 1 or 2, to specify which WebGL version to ask for. By\ndefault, WebGL 2 will be requested. If WebGL2 is not available, it will\nfall back to WebGL 1. You can check what version is used with by looking at\nthe global <code>webglVersion</code> property.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(255);\n push();\n rotateZ(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n rotateY(frameCount * 0.02);\n fill(0, 0, 0);\n box(50);\n pop();\n}\n</code>\n</div>\n<br>\nNow with the antialias attribute set to true.\n<br>\n<div>\n<code>\nfunction setup() {\n setAttributes('antialias', true);\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(255);\n push();\n rotateZ(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n rotateY(frameCount * 0.02);\n fill(0, 0, 0);\n box(50);\n pop();\n}\n</code>\n</div>\n\n<div>\n<code>\n// press the mouse button to disable perPixelLighting\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n fill(255);\n}\n\nlet lights = [\n { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },\n { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },\n { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },\n { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },\n { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },\n { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }\n];\n\nfunction draw() {\n let t = millis() / 1000 + 1000;\n background(0);\n directionalLight(color('#222'), 1, 1, 1);\n\n for (let i = 0; i < lights.length; i++) {\n let light = lights[i];\n pointLight(\n color(light.c),\n p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)\n );\n }\n\n specularMaterial(255);\n sphere(width * 0.1);\n\n rotateX(t * 0.77);\n rotateY(t * 0.83);\n rotateZ(t * 0.91);\n torus(width * 0.3, width * 0.07, 24, 10);\n}\n\nfunction mousePressed() {\n setAttributes('perPixelLighting', false);\n noStroke();\n fill(255);\n}\nfunction mouseReleased() {\n setAttributes('perPixelLighting', true);\n noStroke();\n fill(255);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "detailX",
- "description": "<p>number of triangle subdivisions along the x-axis.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "key",
+ "description": "Name of attribute",
+ "type": "String"
+ },
+ {
+ "name": "value",
+ "description": "New value of named attribute",
+ "type": "Boolean"
+ }
+ ]
},
{
- "name": "detailY",
- "description": "<p>number of triangle subdivisions along the y-axis.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "obj",
+ "description": "object with key-value pairs",
+ "type": "Object"
+ }
+ ]
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white plane on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the plane.\n plane();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white plane on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the plane.\n // Set its width and height to 30.\n plane(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white plane on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the plane.\n // Set its width to 30 and height to 50.\n plane(30, 50);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Shape",
- "submodule": "3D Primitives"
+ "static": false,
+ "module": "Rendering",
+ "submodule": "Rendering"
},
{
- "file": "src/webgl/3d_primitives.js",
- "line": 1009,
- "description": "<p>Draws a box (rectangular prism).</p>\n<p>A box is a 3D shape with six faces. Each face makes a 90˚ with four\nneighboring faces.</p>\n<p>The first parameter, <code>width</code>, is optional. If a <code>Number</code> is passed, as in\n<code>box(20)</code>, it sets the box’s width and height. By default, <code>width</code> is 50.</p>\n<p>The second parameter, <code>height</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>box(20, 30)</code>, it sets the box’s height. By default, <code>height</code> is set\nto the box’s <code>width</code>.</p>\n<p>The third parameter, <code>depth</code>, is also optional. If a <code>Number</code> is passed, as\nin <code>box(20, 30, 40)</code>, it sets the box’s depth. By default, <code>depth</code> is set\nto the box’s <code>height</code>.</p>\n<p>The fourth parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>box(20, 30, 40, 5)</code>, it sets the number of triangle subdivisions to\nuse along the x-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, <code>detailX</code> is 1.</p>\n<p>The fifth parameter, <code>detailY</code>, is also optional. If a number is passed, as\nin <code>box(20, 30, 40, 5, 7)</code>, it sets the number of triangle subdivisions to\nuse along the y-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, <code>detailY</code> is 1.</p>\n<p>Note: <code>box()</code> can only be used in WebGL mode.</p>\n",
+ "name": "toString",
+ "file": "src/scripts/parsers/in/p5.js/src/color/p5.Color.js",
+ "line": 281,
"itemtype": "method",
- "name": "box",
- "params": [
- {
- "name": "width",
- "description": "<p>width of the box.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Returns the color formatted as a <code>String</code>.</p>\n<p>Calling <code>myColor.toString()</code> can be useful for debugging, as in\n<code>print(myColor.toString())</code>. It's also helpful for using p5.js with other\nlibraries.</p>\n<p>The parameter, <code>format</code>, is optional. If a format string is passed, as in\n<code>myColor.toString('#rrggbb')</code>, it will determine how the color string is\nformatted. By default, color strings are formatted as <code>'rgba(r, g, b, a)'</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let myColor = color('darkorchid');\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the text.\n text(myColor.toString('#rrggbb'), 50, 50);\n\n describe('The text \"#9932cc\" written in purple on a gray background.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let myColor = color('darkorchid');\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the text.\n text(myColor.toString('#rrggbb'), 50, 50);\n\n describe('The text \"#9932cc\" written in purple on a gray background.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let myColor = color('darkorchid');\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the text.\n text(myColor.toString('#rrggbb'), 50, 50);\n\n describe('The text \"#9932cc\" written in purple on a gray background.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let myColor = color('darkorchid');\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the text.\n text(myColor.toString('#rrggbb'), 50, 50);\n\n describe('The text \"#9932cc\" written in purple on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "height",
- "description": "<p>height of the box.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "format",
+ "description": "how the color string will be formatted.\nLeaving this empty formats the string as rgba(r, g, b, a).\n'#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.\n'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.\n'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.\n'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "the formatted string.",
+ "type": "String"
+ }
},
{
- "name": "depth",
- "description": "<p>depth of the box.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "format",
+ "description": "how the color string will be formatted.\nLeaving this empty formats the string as rgba(r, g, b, a).\n'#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.\n'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.\n'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.\n'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "the formatted string.",
+ "type": "String"
+ }
},
{
- "name": "detailX",
- "description": "<p>number of triangle subdivisions along the x-axis.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "format",
+ "description": "how the color string will be formatted.\nLeaving this empty formats the string as rgba(r, g, b, a).\n'#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.\n'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.\n'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.\n'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "the formatted string.",
+ "type": "String"
+ }
},
{
- "name": "detailY",
- "description": "<p>number of triangle subdivisions along the y-axis.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "format",
+ "description": "how the color string will be formatted.\nLeaving this empty formats the string as rgba(r, g, b, a).\n'#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.\n'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.\n'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.\n'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "the formatted string.",
+ "type": "String"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n // Set its width and height to 30.\n box(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n // Set its width to 30 and height to 50.\n box(30, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the box.\n // Set its width to 30, height to 50, and depth to 10.\n box(30, 50, 10);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Primitives"
+ "return": {
+ "description": "the formatted string.",
+ "type": "String"
+ },
+ "class": "p5.Color",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/webgl/3d_primitives.js",
- "line": 1227,
- "description": "<p>Draws a sphere.</p>\n<p>A sphere is a 3D shape with triangular faces that connect to form a round\nsurface. Spheres with few faces look like crystals. Spheres with many faces\nhave smooth surfaces and look like balls.</p>\n<p>The first parameter, <code>radius</code>, is optional. If a <code>Number</code> is passed, as in\n<code>sphere(20)</code>, it sets the radius of the sphere. By default, <code>radius</code> is 50.</p>\n<p>The second parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>sphere(20, 5)</code>, it sets the number of triangle subdivisions to use\nalong the x-axis. All 3D shapes are made by connecting triangles to form\ntheir surfaces. By default, <code>detailX</code> is 24.</p>\n<p>The third parameter, <code>detailY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>sphere(20, 5, 2)</code>, it sets the number of triangle subdivisions to\nuse along the y-axis. All 3D shapes are made by connecting triangles to\nform their surfaces. By default, <code>detailY</code> is 16.</p>\n<p>Note: <code>sphere()</code> can only be used in WebGL mode.</p>\n",
+ "name": "setRed",
+ "file": "src/scripts/parsers/in/p5.js/src/color/p5.Color.js",
+ "line": 330,
"itemtype": "method",
- "name": "sphere",
- "params": [
+ "description": "<p>Sets the red component of a color.</p>\n<p>The range depends on the <a href=\"#/p5/colorMode\">colorMode()</a>. In the\ndefault RGB mode it's between 0 and 255.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the red value.\n c.setRed(64);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is teal.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the red value.\n c.setRed(64);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is teal.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the red value.\n c.setRed(64);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is teal.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the red value.\n c.setRed(64);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is teal.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "radius",
- "description": "<p>radius of the sphere. Defaults to 50.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "red",
+ "description": "the new red value.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "detailX",
- "description": "<p>number of triangle subdivisions along the x-axis. Defaults to 24.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "red",
+ "description": "the new red value.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "detailY",
- "description": "<p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "red",
+ "description": "the new red value.",
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "red",
+ "description": "the new red value.",
+ "type": "Number"
+ }
+ ]
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n sphere();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n // Set its radius to 30.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n // Set its radius to 30.\n // Set its detailX to 6.\n sphere(30, 6);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the sphere.\n // Set its radius to 30.\n // Set its detailX to 24.\n // Set its detailY to 4.\n sphere(30, 24, 4);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Primitives"
+ "class": "p5.Color",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/webgl/3d_primitives.js",
- "line": 1477,
- "description": "<p>Draws a cylinder.</p>\n<p>A cylinder is a 3D shape with triangular faces that connect a flat bottom\nto a flat top. Cylinders with few faces look like boxes. Cylinders with\nmany faces have smooth surfaces.</p>\n<p>The first parameter, <code>radius</code>, is optional. If a <code>Number</code> is passed, as in\n<code>cylinder(20)</code>, it sets the radius of the cylinder’s base. By default,\n<code>radius</code> is 50.</p>\n<p>The second parameter, <code>height</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>cylinder(20, 30)</code>, it sets the cylinder’s height. By default,\n<code>height</code> is set to the cylinder’s <code>radius</code>.</p>\n<p>The third parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>cylinder(20, 30, 5)</code>, it sets the number of edges used to form the\ncylinder's top and bottom. Using more edges makes the top and bottom look\nmore like circles. By default, <code>detailX</code> is 24.</p>\n<p>The fourth parameter, <code>detailY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>cylinder(20, 30, 5, 2)</code>, it sets the number of triangle subdivisions\nto use along the y-axis, between cylinder's the top and bottom. All 3D\nshapes are made by connecting triangles to form their surfaces. By default,\n<code>detailY</code> is 1.</p>\n<p>The fifth parameter, <code>bottomCap</code>, is also optional. If a <code>false</code> is passed,\nas in <code>cylinder(20, 30, 5, 2, false)</code> the cylinder’s bottom won’t be drawn.\nBy default, <code>bottomCap</code> is <code>true</code>.</p>\n<p>The sixth parameter, <code>topCap</code>, is also optional. If a <code>false</code> is passed, as\nin <code>cylinder(20, 30, 5, 2, false, false)</code> the cylinder’s top won’t be\ndrawn. By default, <code>topCap</code> is <code>true</code>.</p>\n<p>Note: <code>cylinder()</code> can only be used in WebGL mode.</p>\n",
+ "name": "setGreen",
+ "file": "src/scripts/parsers/in/p5.js/src/color/p5.Color.js",
+ "line": 385,
"itemtype": "method",
- "name": "cylinder",
- "params": [
- {
- "name": "radius",
- "description": "<p>radius of the cylinder. Defaults to 50.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "height",
- "description": "<p>height of the cylinder. Defaults to the value of <code>radius</code>.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Sets the green component of a color.</p>\n<p>The range depends on the <a href=\"#/p5/colorMode\">colorMode()</a>. In the\ndefault RGB mode it's between 0 and 255.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the green value.\n c.setGreen(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is yellow.');\n}\n</code>\n</div>\n*",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the green value.\n c.setGreen(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is yellow.');\n}\n</code>\n</div>\n*",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the green value.\n c.setGreen(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is yellow.');\n}\n</code>\n</div>\n*",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the green value.\n c.setGreen(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is yellow.');\n}\n</code>\n</div>\n*"
+ ],
+ "overloads": [
{
- "name": "detailX",
- "description": "<p>number of edges along the top and bottom. Defaults to 24.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "green",
+ "description": "the new green value.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "detailY",
- "description": "<p>number of triangle subdivisions along the y-axis. Defaults to 1.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "green",
+ "description": "the new green value.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "bottomCap",
- "description": "<p>whether to draw the cylinder's bottom. Defaults to <code>true</code>.</p>\n",
- "type": "Boolean",
- "optional": true
+ "params": [
+ {
+ "name": "green",
+ "description": "the new green value.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "topCap",
- "description": "<p>whether to draw the cylinder's top. Defaults to <code>true</code>.</p>\n",
- "type": "Boolean",
- "optional": true
+ "params": [
+ {
+ "name": "green",
+ "description": "the new green value.",
+ "type": "Number"
+ }
+ ]
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n cylinder();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius and height to 30.\n cylinder(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n cylinder(30, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 5.\n cylinder(30, 50, 5);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 2.\n cylinder(30, 50, 24, 2);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background. Its top is missing.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 1.\n // Don't draw its bottom.\n cylinder(30, 50, 24, 1, false);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cylinder on a gray background. Its top and bottom are missing.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cylinder.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 1.\n // Don't draw its bottom or top.\n cylinder(30, 50, 24, 1, false, false);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Primitives"
+ "class": "p5.Color",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/webgl/3d_primitives.js",
- "line": 1730,
- "description": "<p>Draws a cone.</p>\n<p>A cone is a 3D shape with triangular faces that connect a flat bottom to a\nsingle point. Cones with few faces look like pyramids. Cones with many\nfaces have smooth surfaces.</p>\n<p>The first parameter, <code>radius</code>, is optional. If a <code>Number</code> is passed, as in\n<code>cone(20)</code>, it sets the radius of the cone’s base. By default, <code>radius</code> is\n50.</p>\n<p>The second parameter, <code>height</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>cone(20, 30)</code>, it sets the cone’s height. By default, <code>height</code> is\nset to the cone’s <code>radius</code>.</p>\n<p>The third parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>cone(20, 30, 5)</code>, it sets the number of edges used to form the\ncone's base. Using more edges makes the base look more like a circle. By\ndefault, <code>detailX</code> is 24.</p>\n<p>The fourth parameter, <code>detailY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>cone(20, 30, 5, 7)</code>, it sets the number of triangle subdivisions to\nuse along the y-axis connecting the base to the tip. All 3D shapes are made\nby connecting triangles to form their surfaces. By default, <code>detailY</code> is 1.</p>\n<p>The fifth parameter, <code>cap</code>, is also optional. If a <code>false</code> is passed, as\nin <code>cone(20, 30, 5, 7, false)</code> the cone’s base won’t be drawn. By default,\n<code>cap</code> is <code>true</code>.</p>\n<p>Note: <code>cone()</code> can only be used in WebGL mode.</p>\n",
+ "name": "setBlue",
+ "file": "src/scripts/parsers/in/p5.js/src/color/p5.Color.js",
+ "line": 440,
"itemtype": "method",
- "name": "cone",
- "params": [
- {
- "name": "radius",
- "description": "<p>radius of the cone's base. Defaults to 50.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Sets the blue component of a color.</p>\n<p>The range depends on the <a href=\"#/p5/colorMode\">colorMode()</a>. In the\ndefault RGB mode it's between 0 and 255.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the blue value.\n c.setBlue(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is pale fuchsia.');\n}\n</code>\n</div>\n*",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the blue value.\n c.setBlue(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is pale fuchsia.');\n}\n</code>\n</div>\n*",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the blue value.\n c.setBlue(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is pale fuchsia.');\n}\n</code>\n</div>\n*",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the blue value.\n c.setBlue(255);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is pale fuchsia.');\n}\n</code>\n</div>\n*"
+ ],
+ "overloads": [
{
- "name": "height",
- "description": "<p>height of the cone. Defaults to the value of <code>radius</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "blue",
+ "description": "the new blue value.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "detailX",
- "description": "<p>number of edges used to draw the base. Defaults to 24.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "blue",
+ "description": "the new blue value.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "detailY",
- "description": "<p>number of triangle subdivisions along the y-axis. Defaults to 1.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "blue",
+ "description": "the new blue value.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "cap",
- "description": "<p>whether to draw the cone's base. Defaults to <code>true</code>.</p>\n",
- "type": "Boolean",
- "optional": true
+ "params": [
+ {
+ "name": "blue",
+ "description": "the new blue value.",
+ "type": "Number"
+ }
+ ]
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n cone();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius and height to 30.\n cone(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n cone(30, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 5.\n cone(30, 50, 5);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white pyramid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 5.\n cone(30, 50, 5);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 2.\n cone(30, 50, 24, 2);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cone on a gray background. Its base is missing.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the cone.\n // Set its radius to 30 and height to 50.\n // Set its detailX to 24 and detailY to 1.\n // Don't draw its base.\n cone(30, 50, 24, 1, false);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Primitives"
+ "class": "p5.Color",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/webgl/3d_primitives.js",
- "line": 1965,
- "description": "<p>Draws an ellipsoid.</p>\n<p>An ellipsoid is a 3D shape with triangular faces that connect to form a\nround surface. Ellipsoids with few faces look like crystals. Ellipsoids\nwith many faces have smooth surfaces and look like eggs. <code>ellipsoid()</code>\ndefines a shape by its radii. This is different from\n<a href=\"#/p5/ellipse\">ellipse()</a> which uses diameters\n(width and height).</p>\n<p>The first parameter, <code>radiusX</code>, is optional. If a <code>Number</code> is passed, as in\n<code>ellipsoid(20)</code>, it sets the radius of the ellipsoid along the x-axis. By\ndefault, <code>radiusX</code> is 50.</p>\n<p>The second parameter, <code>radiusY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>ellipsoid(20, 30)</code>, it sets the ellipsoid’s radius along the y-axis.\nBy default, <code>radiusY</code> is set to the ellipsoid’s <code>radiusX</code>.</p>\n<p>The third parameter, <code>radiusZ</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>ellipsoid(20, 30, 40)</code>, it sets the ellipsoid’s radius along the\nz-axis. By default, <code>radiusZ</code> is set to the ellipsoid’s <code>radiusY</code>.</p>\n<p>The fourth parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>ellipsoid(20, 30, 40, 5)</code>, it sets the number of triangle\nsubdivisions to use along the x-axis. All 3D shapes are made by connecting\ntriangles to form their surfaces. By default, <code>detailX</code> is 24.</p>\n<p>The fifth parameter, <code>detailY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>ellipsoid(20, 30, 40, 5, 7)</code>, it sets the number of triangle\nsubdivisions to use along the y-axis. All 3D shapes are made by connecting\ntriangles to form their surfaces. By default, <code>detailY</code> is 16.</p>\n<p>Note: <code>ellipsoid()</code> can only be used in WebGL mode.</p>\n",
+ "name": "setAlpha",
+ "file": "src/scripts/parsers/in/p5.js/src/color/p5.Color.js",
+ "line": 496,
"itemtype": "method",
- "name": "ellipsoid",
- "params": [
- {
- "name": "radiusX",
- "description": "<p>radius of the ellipsoid along the x-axis. Defaults to 50.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Sets the alpha (transparency) value of a color.</p>\n<p>The range depends on the\n<a href=\"#/p5/colorMode\">colorMode()</a>. In the default RGB mode it's\nbetween 0 and 255.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the alpha value.\n c.setAlpha(128);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');\n}\n</code>\n</div>\n*",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the alpha value.\n c.setAlpha(128);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');\n}\n</code>\n</div>\n*",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the alpha value.\n c.setAlpha(128);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');\n}\n</code>\n</div>\n*",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color(255, 128, 128);\n\n // Draw the left rectangle.\n noStroke();\n fill(c);\n rect(15, 20, 35, 60);\n\n // Change the alpha value.\n c.setAlpha(128);\n\n // Draw the right rectangle.\n fill(c);\n rect(50, 20, 35, 60);\n\n describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');\n}\n</code>\n</div>\n*"
+ ],
+ "overloads": [
{
- "name": "radiusY",
- "description": "<p>radius of the ellipsoid along the y-axis. Defaults to <code>radiusX</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "alpha",
+ "description": "the new alpha value.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "radiusZ",
- "description": "<p>radius of the ellipsoid along the z-axis. Defaults to <code>radiusY</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "alpha",
+ "description": "the new alpha value.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "detailX",
- "description": "<p>number of triangle subdivisions along the x-axis. Defaults to 24.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "alpha",
+ "description": "the new alpha value.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "detailY",
- "description": "<p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": [
+ {
+ "name": "alpha",
+ "description": "the new alpha value.",
+ "type": "Number"
+ }
+ ]
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n ellipsoid(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n ellipsoid(30, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n // Set its radiusZ to 50.\n ellipsoid(30, 40, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n // Set its radiusZ to 50.\n // Set its detailX to 4.\n ellipsoid(30, 40, 50, 4);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white ellipsoid on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the ellipsoid.\n // Set its radiusX to 30.\n // Set its radiusY to 40.\n // Set its radiusZ to 50.\n // Set its detailX to 4.\n // Set its detailY to 3.\n ellipsoid(30, 40, 50, 4, 3);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Primitives"
+ "class": "p5.Color",
+ "static": false,
+ "module": "Color",
+ "submodule": "Creating & Reading"
},
{
- "file": "src/webgl/3d_primitives.js",
- "line": 2183,
- "description": "<p>Draws a torus.</p>\n<p>A torus is a 3D shape with triangular faces that connect to form a ring.\nToruses with few faces look flattened. Toruses with many faces have smooth\nsurfaces.</p>\n<p>The first parameter, <code>radius</code>, is optional. If a <code>Number</code> is passed, as in\n<code>torus(30)</code>, it sets the radius of the ring. By default, <code>radius</code> is 50.</p>\n<p>The second parameter, <code>tubeRadius</code>, is also optional. If a <code>Number</code> is\npassed, as in <code>torus(30, 15)</code>, it sets the radius of the tube. By default,\n<code>tubeRadius</code> is 10.</p>\n<p>The third parameter, <code>detailX</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>torus(30, 15, 5)</code>, it sets the number of edges used to draw the hole\nof the torus. Using more edges makes the hole look more like a circle. By\ndefault, <code>detailX</code> is 24.</p>\n<p>The fourth parameter, <code>detailY</code>, is also optional. If a <code>Number</code> is passed,\nas in <code>torus(30, 15, 5, 7)</code>, it sets the number of triangle subdivisions to\nuse while filling in the torus’ height. By default, <code>detailY</code> is 16.</p>\n<p>Note: <code>torus()</code> can only be used in WebGL mode.</p>\n",
+ "name": "remove",
+ "file": "src/scripts/parsers/in/p5.js/src/core/main.js",
+ "line": 368,
"itemtype": "method",
- "name": "torus",
- "params": [
+ "description": "<p>Removes the sketch from the web page.</p>\n<p>Calling <code>remove()</code> stops the draw loop and removes any HTML elements\ncreated by the sketch, including the canvas. A new sketch can be\ncreated by using the <a href=\"#/p5/p5\">p5()</a> constructor, as in\n<code>new p5()</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to remove the canvas.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n\n// Remove the sketch when the user double-clicks.\nfunction doubleClicked() {\n remove();\n}\n</code>\n</div>",
+ "<div>\n<code>\n// Double-click to remove the canvas.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n\n// Remove the sketch when the user double-clicks.\nfunction doubleClicked() {\n remove();\n}\n</code>\n</div>",
+ "<div>\n<code>\n// Double-click to remove the canvas.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n\n// Remove the sketch when the user double-clicks.\nfunction doubleClicked() {\n remove();\n}\n</code>\n</div>",
+ "<div>\n<code>\n// Double-click to remove the canvas.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n\n// Remove the sketch when the user double-clicks.\nfunction doubleClicked() {\n remove();\n}\n</code>\n</div>",
+ "<div>\n<code>\n// Double-click to remove the canvas.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n\n// Remove the sketch when the user double-clicks.\nfunction doubleClicked() {\n remove();\n}\n</code>\n</div>",
+ "<div>\n<code>\n// Double-click to remove the canvas.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n\n// Remove the sketch when the user double-clicks.\nfunction doubleClicked() {\n remove();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "radius",
- "description": "<p>radius of the torus. Defaults to 50.</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
},
{
- "name": "tubeRadius",
- "description": "<p>radius of the tube. Defaults to 10.</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
},
{
- "name": "detailX",
- "description": "<p>number of edges that form the hole. Defaults to 24.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": []
},
{
- "name": "detailY",
- "description": "<p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>\n",
- "type": "Integer",
- "optional": true
+ "params": []
+ },
+ {
+ "params": []
+ },
+ {
+ "params": []
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n torus();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30.\n torus(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30 and tubeRadius to 15.\n torus(30, 15);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30 and tubeRadius to 15.\n // Set its detailX to 5.\n torus(30, 15, 5);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white torus on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the torus.\n // Set its radius to 30 and tubeRadius to 15.\n // Set its detailX to 5.\n // Set its detailY to 3.\n torus(30, 15, 5, 3);\n}\n</code>\n</div>"
- ],
"class": "p5",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/GeometryBuilder.js",
- "line": 80,
- "description": "<p>Adds geometry from the renderer's immediate mode into the builder's\ncombined geometry.</p>\n",
- "class": "p5",
- "module": "Shape"
- },
- {
- "file": "src/webgl/GeometryBuilder.js",
- "line": 114,
- "description": "<p>Adds geometry from the renderer's retained mode into the builder's\ncombined geometry.</p>\n",
- "class": "p5",
- "module": "Shape"
+ "static": false,
+ "module": "Structure",
+ "submodule": "Structure"
},
{
- "file": "src/webgl/GeometryBuilder.js",
- "line": 122,
- "description": "<p>Cleans up the state of the renderer and returns the combined geometry that\nwas built.</p>\n",
- "return": {
- "description": "p5.Geometry The flattened, combined geometry"
- },
- "class": "p5",
- "module": "Shape"
- },
- {
- "file": "src/webgl/GeometryBuilder.js",
- "line": 133,
- "description": "<p>Keeps track of how many custom geometry objects have been made so that each\ncan be assigned a unique ID.</p>\n",
- "class": "p5",
- "module": "Shape"
- },
- {
- "file": "src/webgl/interaction.js",
- "line": 11,
- "description": "<p>Allows the user to orbit around a 3D sketch using a mouse, trackpad, or\ntouchscreen.</p>\n<p>3D sketches are viewed through an imaginary camera. Calling\n<code>orbitControl()</code> within the <a href=\"#/p5/draw\">draw()</a> function allows\nthe user to change the camera’s position:</p>\n<pre><code class=\"language-js\">function draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rest of sketch.\n}\n</code></pre>\n<p>Left-clicking and dragging or swipe motion will rotate the camera position\nabout the center of the sketch. Right-clicking and dragging or multi-swipe\nwill pan the camera position without rotation. Using the mouse wheel\n(scrolling) or pinch in/out will move the camera further or closer from the\ncenter of the sketch.</p>\n<p>The first three parameters, <code>sensitivityX</code>, <code>sensitivityY</code>, and\n<code>sensitivityZ</code>, are optional. They’re numbers that set the sketch’s\nsensitivity to movement along each axis. For example, calling\n<code>orbitControl(1, 2, -1)</code> keeps movement along the x-axis at its default\nvalue, makes the sketch twice as sensitive to movement along the y-axis,\nand reverses motion along the z-axis. By default, all sensitivity values\nare 1.</p>\n<p>The fourth parameter, <code>options</code>, is also optional. It’s an object that\nchanges the behavior of orbiting. For example, calling\n<code>orbitControl(1, 1, 1, options)</code> keeps the default sensitivity values while\nchanging the behaviors set with <code>options</code>. The object can have the\nfollowing properties:</p>\n<pre><code class=\"language-js\">let options = {\n // Setting this to false makes mobile interactions smoother by\n // preventing accidental interactions with the page while orbiting.\n // By default, it's true.\n disableTouchActions: true,\n\n // Setting this to true makes the camera always rotate in the\n // direction the mouse/touch is moving.\n // By default, it's false.\n freeRotation: false\n};\n\norbitControl(1, 1, 1, options);\n</code></pre>\n",
+ "name": "createVideo",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 1458,
"itemtype": "method",
- "name": "orbitControl",
- "params": [
- {
- "name": "sensitivityX",
- "description": "<p>sensitivity to movement along the x-axis. Defaults to 1.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "sensitivityY",
- "description": "<p>sensitivity to movement along the y-axis. Defaults to 1.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "sensitivityZ",
- "description": "<p>sensitivity to movement along the z-axis. Defaults to 1.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Creates a <code><video></code> element for simple audio/video playback.</p>\n<p><code>createVideo()</code> returns a new\n<a href=\"#/p5.MediaElement\">p5.MediaElement</a> object. Videos are shown by\ndefault. They can be hidden by calling <code>video.hide()</code> and drawn to the\ncanvas using <a href=\"#/p5/image\">image()</a>.</p>\n<p>The first parameter, <code>src</code>, is the path the video. If a single string is\npassed, as in <code>'assets/topsecret.mp4'</code>, a single video is loaded. An array\nof strings can be used to load the same video in different formats. For\nexample, <code>['assets/topsecret.mp4', 'assets/topsecret.ogv', 'assets/topsecret.webm']</code>.\nThis is useful for ensuring that the video can play across different browsers with\ndifferent capabilities. See\n<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>MDN</a>\nfor more information about supported formats.</p>\n<p>The second parameter, <code>callback</code>, is optional. It's a function to call once\nthe video is ready to play.</p>\n",
+ "example": [
+ "<div class='notest'>\n<code>\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Note: this may not work in some browsers.\n let video = createVideo('assets/small.mp4');\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Provide an array options for different file formats.\n let video = createVideo(\n ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm']\n );\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nlet video;\n\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Provide an array options for different file formats.\n // Call mute() once the video loads.\n video = createVideo(\n ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],\n muteVideo\n );\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n\n// Mute the video once it loads.\nfunction muteVideo() {\n video.volume(0);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "options",
- "description": "<p>object with two optional properties, <code>disableTouchActions</code>\n and <code>freeRotation</code>. Both are <code>Boolean</code>s. <code>disableTouchActions</code>\n defaults to <code>true</code> and <code>freeRotation</code> defaults to <code>false</code>.</p>\n",
- "type": "Object",
- "optional": true
+ "params": [
+ {
+ "name": "src",
+ "description": "path to a video file, or an array of paths for\nsupporting different browsers.",
+ "type": "String|String[]"
+ },
+ {
+ "name": "callback",
+ "description": "function to call once the video is ready to play.",
+ "optional": 1,
+ "type": "Function"
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.MediaElement\">p5.MediaElement</a> object.",
+ "type": "p5.MediaElement"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n // Make the interactions 3X sensitive.\n orbitControl(3, 3, 3);\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Create an options object.\n let options = {\n disableTouchActions: false,\n freeRotation: true\n };\n\n // Enable orbiting with the mouse.\n // Prevent accidental touch actions on touchscreen devices\n // and enable free rotation.\n orbitControl(1, 1, 1, options);\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n</code>\n</div>"
- ],
+ "return": {
+ "description": "new <a href=\"#/p5.MediaElement\">p5.MediaElement</a> object.",
+ "type": "p5.MediaElement"
+ },
"class": "p5",
- "module": "3D",
- "submodule": "Interaction"
+ "static": 1,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/interaction.js",
- "line": 471,
- "description": "<p>Adds a grid and an axes icon to clarify orientation in 3D sketches.</p>\n<p><code>debugMode()</code> adds a grid that shows where the “ground” is in a sketch. By\ndefault, the grid will run through the origin <code>(0, 0, 0)</code> of the sketch\nalong the XZ plane. <code>debugMode()</code> also adds an axes icon that points along\nthe positive x-, y-, and z-axes. Calling <code>debugMode()</code> displays the grid\nand axes icon with their default size and position.</p>\n<p>There are four ways to call <code>debugMode()</code> with optional parameters to\ncustomize the debugging environment.</p>\n<p>The first way to call <code>debugMode()</code> has one parameter, <code>mode</code>. If the\nsystem constant <code>GRID</code> is passed, as in <code>debugMode(GRID)</code>, then the grid\nwill be displayed and the axes icon will be hidden. If the constant <code>AXES</code>\nis passed, as in <code>debugMode(AXES)</code>, then the axes icon will be displayed\nand the grid will be hidden.</p>\n<p>The second way to call <code>debugMode()</code> has six parameters. The first\nparameter, <code>mode</code>, selects either <code>GRID</code> or <code>AXES</code> to be displayed. The\nnext five parameters, <code>gridSize</code>, <code>gridDivisions</code>, <code>xOff</code>, <code>yOff</code>, and\n<code>zOff</code> are optional. They’re numbers that set the appearance of the grid\n(<code>gridSize</code> and <code>gridDivisions</code>) and the placement of the axes icon\n(<code>xOff</code>, <code>yOff</code>, and <code>zOff</code>). For example, calling\n<code>debugMode(20, 5, 10, 10, 10)</code> sets the <code>gridSize</code> to 20 pixels, the number\nof <code>gridDivisions</code> to 5, and offsets the axes icon by 10 pixels along the\nx-, y-, and z-axes.</p>\n<p>The third way to call <code>debugMode()</code> has five parameters. The first\nparameter, <code>mode</code>, selects either <code>GRID</code> or <code>AXES</code> to be displayed. The\nnext four parameters, <code>axesSize</code>, <code>xOff</code>, <code>yOff</code>, and <code>zOff</code> are optional.\nThey’re numbers that set the appearance of the size of the axes icon\n(<code>axesSize</code>) and its placement (<code>xOff</code>, <code>yOff</code>, and <code>zOff</code>).</p>\n<p>The fourth way to call <code>debugMode()</code> has nine optional parameters. The\nfirst five parameters, <code>gridSize</code>, <code>gridDivisions</code>, <code>gridXOff</code>, <code>gridYOff</code>,\nand <code>gridZOff</code> are numbers that set the appearance of the grid. For\nexample, calling <code>debugMode(100, 5, 0, 0, 0)</code> sets the <code>gridSize</code> to 100,\nthe number of <code>gridDivisions</code> to 5, and sets all the offsets to 0 so that\nthe grid is centered at the origin. The next four parameters, <code>axesSize</code>,\n<code>xOff</code>, <code>yOff</code>, and <code>zOff</code> are numbers that set the appearance of the size\nof the axes icon (<code>axesSize</code>) and its placement (<code>axesXOff</code>, <code>axesYOff</code>,\nand <code>axesZOff</code>). For example, calling\n<code>debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10)</code> sets the <code>gridSize</code> to 100,\nthe number of <code>gridDivisions</code> to 5, and sets all the offsets to 0 so that\nthe grid is centered at the origin. It then sets the <code>axesSize</code> to 50 and\noffsets the icon 10 pixels along each axis.</p>\n",
+ "name": "createAudio",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 1505,
"itemtype": "method",
- "name": "debugMode",
+ "description": "AUDIO STUFF *",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n debugMode();\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Only display the axes icon.\n debugMode(AXES);\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Only display the grid and customize it:\n // - size: 50\n // - divisions: 10\n // - offsets: 0, 20, 0\n debugMode(GRID, 50, 10, 0, 20, 0);\n\n describe('A multicolor box on a gray background. A grid is displayed below the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Display the grid and axes icon and customize them:\n // Grid\n // ----\n // - size: 50\n // - divisions: 10\n // - offsets: 0, 20, 0\n // Axes\n // ----\n // - size: 50\n // - offsets: 0, 0, 0\n debugMode(50, 10, 0, 20, 0, 50, 0, 0, 0);\n\n describe('A multicolor box on a gray background. A grid is displayed below the box. An axes icon is displayed at the center of the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n</code>\n</div>"
+ "<div class='notest'>\n<code>\nfunction setup() {\n noCanvas();\n\n // Load the audio.\n let beat = createAudio('assets/beat.mp3');\n\n // Show the default audio controls.\n beat.showControls();\n\n describe('An audio beat plays when the user double-clicks the square.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Interaction",
"overloads": [
{
- "line": 471,
"params": []
},
{
- "line": 650,
- "params": [
- {
- "name": "mode",
- "description": "<p>either GRID or AXES</p>\n",
- "type": "Constant"
- }
- ]
- },
- {
- "line": 655,
- "params": [
- {
- "name": "mode",
- "description": "",
- "type": "Constant"
- },
- {
- "name": "gridSize",
- "description": "<p>side length of the grid.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "gridDivisions",
- "description": "<p>number of divisions in the grid.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "xOff",
- "description": "<p>offset from origin along the x-axis.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "yOff",
- "description": "<p>offset from origin along the y-axis.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "zOff",
- "description": "<p>offset from origin along the z-axis.</p>\n",
- "type": "Number",
- "optional": true
- }
- ]
- },
- {
- "line": 665,
"params": [
{
- "name": "mode",
- "description": "",
- "type": "Constant"
- },
- {
- "name": "axesSize",
- "description": "<p>length of axes icon markers.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "xOff",
- "description": "",
- "type": "Number",
- "optional": true
- },
- {
- "name": "yOff",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "src",
+ "description": "path to an audio file, or an array of paths\nfor supporting different browsers.",
+ "optional": 1,
+ "type": "String|String[]"
},
{
- "name": "zOff",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "callback",
+ "description": "function to call once the audio is ready to play.",
+ "optional": 1,
+ "type": "Function"
}
- ]
- },
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.MediaElement\">p5.MediaElement</a> object.",
+ "type": "p5.MediaElement"
+ }
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.MediaElement\">p5.MediaElement</a> object.",
+ "type": "p5.MediaElement"
+ },
+ "class": "p5",
+ "static": 1,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "createCapture",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 1665,
+ "itemtype": "method",
+ "description": "<p>Creates a <code><video></code> element that \"captures\" the audio/video stream from\nthe webcam and microphone.</p>\n<p><code>createCapture()</code> returns a new\n<a href=\"#/p5.MediaElement\">p5.MediaElement</a> object. Videos are shown by\ndefault. They can be hidden by calling <code>capture.hide()</code> and drawn to the\ncanvas using <a href=\"#/p5/image\">image()</a>.</p>\n<p>The first parameter, <code>type</code>, is optional. It sets the type of capture to\nuse. By default, <code>createCapture()</code> captures both audio and video. If <code>VIDEO</code>\nis passed, as in <code>createCapture(VIDEO)</code>, only video will be captured.\nIf <code>AUDIO</code> is passed, as in <code>createCapture(AUDIO)</code>, only audio will be\ncaptured. A constraints object can also be passed to customize the stream.\nSee the <a href=\"http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints\" target=\"_blank\">\nW3C documentation</a> for possible properties. Different browsers support different\nproperties.</p>\n<p>The 'flipped' property is an optional property which can be set to <code>{flipped:true}</code>\nto mirror the video output.If it is true then it means that video will be mirrored\nor flipped and if nothing is mentioned then by default it will be <code>false</code>.</p>\n<p>The second parameter,<code>callback</code>, is optional. It's a function to call once\nthe capture is ready for use. The callback function should have one\nparameter, <code>stream</code>, that's a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaStream\" target=\"_blank\">MediaStream</a> object.</p>\n<p>Note: <code>createCapture()</code> only works when running a sketch locally or using HTTPS. Learn more\n<a href=\"http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https\" target=\"_blank\">here</a>\nand <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia\" target=\"_blank\">here</a>.</p>\n",
+ "example": [
+ "<div class='notest'>\n<code>\nfunction setup() {\n noCanvas();\n\n // Create the video capture.\n createCapture(VIDEO);\n\n describe('A video stream from the webcam.');\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the video capture and hide the element.\n capture = createCapture(VIDEO);\n capture.hide();\n\n describe('A video stream from the webcam with inverted colors.');\n}\n\nfunction draw() {\n // Draw the video capture within the canvas.\n image(capture, 0, 0, width, width * capture.height / capture.width);\n\n // Invert the colors in the stream.\n filter(INVERT);\n}\n</code>\n</div>\n<div class='notest'>\n<code>\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the video capture with mirrored output.\n capture = createCapture(VIDEO,{ flipped:true });\n capture.size(100,100);\n\n describe('A video stream from the webcam with flipped or mirrored output.');\n}\n\n</code>\n</div>\n\n<div class='notest norender'>\n<code>\nfunction setup() {\n createCanvas(480, 120);\n\n // Create a constraints object.\n let constraints = {\n video: {\n mandatory: {\n minWidth: 1280,\n minHeight: 720\n },\n optional: [{ maxFrameRate: 10 }]\n },\n audio: false\n };\n\n // Create the video capture.\n createCapture(constraints);\n\n describe('A video stream from the webcam.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 674,
"params": [
{
- "name": "gridSize",
- "description": "",
- "type": "Number",
- "optional": true
- },
- {
- "name": "gridDivisions",
- "description": "",
- "type": "Number",
- "optional": true
- },
- {
- "name": "gridXOff",
- "description": "<p>grid offset from the origin along the x-axis.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "gridYOff",
- "description": "<p>grid offset from the origin along the y-axis.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "gridZOff",
- "description": "<p>grid offset from the origin along the z-axis.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "axesSize",
- "description": "",
- "type": "Number",
- "optional": true
- },
- {
- "name": "axesXOff",
- "description": "<p>axes icon offset from the origin along the x-axis.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "type",
+ "description": "type of capture, either AUDIO or VIDEO,\nor a constraints object. Both video and audio\naudio streams are captured by default.",
+ "optional": 1,
+ "type": "AUDIO|VIDEO|Object"
},
{
- "name": "axesYOff",
- "description": "<p>axes icon offset from the origin along the y-axis.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "flipped",
+ "description": "flip the capturing video and mirror the output with <code>{flipped:true}</code>. By\ndefault it is false.",
+ "optional": 1,
+ "type": "Object"
},
{
- "name": "axesZOff",
- "description": "<p>axes icon offset from the origin along the z-axis.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "callback",
+ "description": "function to call once the stream\nhas loaded.",
+ "optional": 1,
+ "type": "Function"
}
- ]
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.MediaElement\">p5.MediaElement</a> object.",
+ "type": "p5.MediaElement"
+ }
}
- ]
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.MediaElement\">p5.MediaElement</a> object.",
+ "type": "p5.MediaElement"
+ },
+ "class": "p5",
+ "static": 1,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/interaction.js",
- "line": 725,
- "description": "<p>Turns off <a href=\"#/p5/debugMode\">debugMode()</a> in a 3D sketch.</p>\n",
+ "name": "reset",
+ "file": "src/scripts/parsers/in/p5.js/src/core/p5.Graphics.js",
+ "line": 241,
"itemtype": "method",
- "name": "noDebugMode",
+ "description": "<p>Resets the graphics buffer's transformations and lighting.</p>\n<p>By default, the main canvas resets certain transformation and lighting\nvalues each time <a href=\"#/p5/draw\">draw()</a> executes. <code>p5.Graphics</code>\nobjects must reset these values manually by calling <code>myGraphics.reset()</code>.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n debugMode();\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box. They disappear when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box. box(20, 40);\n}\n\n// Disable debug mode when the user double-clicks.\nfunction doubleClicked() {\n noDebugMode();\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(60, 60);\n\n describe('A white circle moves downward slowly within a dark square. The circle resets at the top of the dark square when the user presses the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the p5.Graphics object's coordinate system.\n // The translation accumulates; the white circle moves.\n pg.translate(0, 0.1);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(30, 0, 10);\n\n // Display the p5.Graphics object.\n image(pg, 20, 20);\n\n // Translate the main canvas' coordinate system.\n // The translation doesn't accumulate; the dark\n // square is always in the same place.\n translate(0, 0.1);\n\n // Reset the p5.Graphics object when the\n // user presses the mouse.\n if (mouseIsPressed === true) {\n pg.reset();\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(60, 60);\n\n describe('A white circle at the center of a dark gray square. The image is drawn on a light gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the p5.Graphics object's coordinate system.\n pg.translate(30, 30);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(0, 0, 10);\n\n // Display the p5.Graphics object.\n image(pg, 20, 20);\n\n // Reset the p5.Graphics object automatically.\n pg.reset();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n describe(\"A sphere lit from above with a red light. The sphere's surface becomes glossy while the user clicks and holds the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Add a red point light from the top-right.\n pg.pointLight(255, 0, 0, 50, -100, 50);\n\n // Style the sphere.\n // It should appear glossy when the\n // lighting values are reset.\n pg.noStroke();\n pg.specularMaterial(255);\n pg.shininess(100);\n\n // Draw the sphere.\n pg.sphere(30);\n\n // Display the p5.Graphics object.\n image(pg, -50, -50);\n\n // Reset the p5.Graphics object when\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n pg.reset();\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n describe('A sphere with a glossy surface is lit from the top-right by a red light.');\n}\n\nfunction draw() {\n background(200);\n\n // Add a red point light from the top-right.\n pg.pointLight(255, 0, 0, 50, -100, 50);\n\n // Style the sphere.\n pg.noStroke();\n pg.specularMaterial(255);\n pg.shininess(100);\n\n // Draw the sphere.\n pg.sphere(30);\n\n // Display the p5.Graphics object.\n image(pg, 0, 0);\n\n // Reset the p5.Graphics object automatically.\n pg.reset();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Interaction"
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.Graphics",
+ "static": false,
+ "module": "Rendering",
+ "submodule": "Rendering"
},
{
- "file": "src/webgl/light.js",
- "line": 10,
- "description": "<p>Creates a light that shines from all directions.</p>\n<p>Ambient light does not come from one direction. Instead, 3D shapes are\nlit evenly from all sides. Ambient lights are almost always used in\ncombination with other types of lights.</p>\n<p>There are three ways to call <code>ambientLight()</code> with optional parameters to\nset the light’s color.</p>\n<p>The first way to call <code>ambientLight()</code> has two parameters, <code>gray</code> and\n<code>alpha</code>. <code>alpha</code> is optional. Grayscale and alpha values between 0 and 255\ncan be passed to set the ambient light’s color, as in <code>ambientLight(50)</code> or\n<code>ambientLight(50, 30)</code>.</p>\n<p>The second way to call <code>ambientLight()</code> has one parameter, color. A\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color values, or a\nCSS color string, as in <code>ambientLight('magenta')</code>, can be passed to set the\nambient light’s color.</p>\n<p>The third way to call <code>ambientLight()</code> has four parameters, <code>v1</code>, <code>v2</code>,\n<code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA, HSBA, or HSLA values can be\npassed to set the ambient light’s colors, as in <code>ambientLight(255, 0, 0)</code>\nor <code>ambientLight(255, 0, 0, 30)</code>. Color values will be interpreted using\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
+ "name": "remove",
+ "file": "src/scripts/parsers/in/p5.js/src/core/p5.Graphics.js",
+ "line": 308,
"itemtype": "method",
- "name": "ambientLight",
- "chainable": 1,
+ "description": "<p>Removes the graphics buffer from the web page.</p>\n<p>Calling <code>myGraphics.remove()</code> removes the graphics buffer's\n<code><canvas></code> element from the web page. The graphics buffer also uses\na bit of memory on the CPU that can be freed like so:</p>\n<pre><code class=\"language-js\">// Remove the graphics buffer from the web page.\nmyGraphics.remove();\n\n// Delete the graphics buffer from CPU memory.\nmyGraphics = undefined;</code></pre><p>Note: All variables that reference the graphics buffer must be assigned\nthe value <code>undefined</code> to delete the graphics buffer from CPU memory. If any\nvariable still refers to the graphics buffer, then it won't be garbage\ncollected.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to turn on the light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn against a gray background. The sphere appears to change color when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Use a grayscale value of 80.\n ambientLight(80);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the ambient light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use a p5.Color object.\n let c = color('orchid');\n ambientLight(c);\n\n // Draw the sphere.\n sphere();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use a CSS color string.\n ambientLight('#DA70D6');\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use RGB values\n ambientLight(218, 112, 214);\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Double-click to remove the p5.Graphics object.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(60, 60);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(30, 30, 20);\n\n describe('A white circle at the center of a dark gray square disappears when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the p5.Graphics object if\n // it's available.\n if (pg) {\n image(pg, 20, 20);\n }\n}\n\n// Remove the p5.Graphics object when the\n// the user double-clicks.\nfunction doubleClicked() {\n // Remove the p5.Graphics object from the web page.\n pg.remove();\n pg = undefined;\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Lights",
"overloads": [
{
- "line": 10,
- "params": [
- {
- "name": "v1",
- "description": "<p>red or hue value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "<p>green or saturation value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "<p>blue, brightness, or lightness value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "alpha",
- "description": "<p>alpha (transparency) value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 164,
- "params": [
- {
- "name": "gray",
- "description": "<p>grayscale value between 0 and 255.</p>\n",
- "type": "Number"
- },
- {
- "name": "alpha",
- "description": "",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 171,
- "params": [
- {
- "name": "value",
- "description": "<p>color as a CSS string.</p>\n",
- "type": "String"
- }
- ],
- "chainable": 1
- },
- {
- "line": 177,
- "params": [
- {
- "name": "values",
- "description": "<p>color as an array of RGBA, HSBA, or HSLA\n values.</p>\n",
- "type": "Number[]"
- }
- ],
- "chainable": 1
- },
- {
- "line": 184,
- "params": [
- {
- "name": "color",
- "description": "<p>color as a <a href=\"#/p5.Color\">p5.Color</a> object.</p>\n",
- "type": "p5.Color"
- }
- ],
- "chainable": 1
+ "params": []
}
- ]
+ ],
+ "class": "p5.Graphics",
+ "static": false,
+ "module": "Rendering",
+ "submodule": "Rendering"
},
{
- "file": "src/webgl/light.js",
- "line": 205,
- "description": "<p>Sets the specular color for lights.</p>\n<p><code>specularColor()</code> affects lights that bounce off a surface in a preferred\ndirection. These lights include\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>, and\n<a href=\"#/p5/spotLight\">spotLight()</a>. The function helps to create\nhighlights on <a href=\"#/p5.Geometry\">p5.Geometry</a> objects that are\nstyled with <a href=\"#/p5/specularMaterial\">specularMaterial()</a>. If a\ngeometry does not use\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>, then\n<code>specularColor()</code> will have no effect.</p>\n<p>Note: <code>specularColor()</code> doesn’t affect lights that bounce in all\ndirections, including <a href=\"#/p5/ambientLight\">ambientLight()</a> and\n<a href=\"#/p5/imageLight\">imageLight()</a>.</p>\n<p>There are three ways to call <code>specularColor()</code> with optional parameters to\nset the specular highlight color.</p>\n<p>The first way to call <code>specularColor()</code> has two optional parameters, <code>gray</code>\nand <code>alpha</code>. Grayscale and alpha values between 0 and 255, as in\n<code>specularColor(50)</code> or <code>specularColor(50, 80)</code>, can be passed to set the\nspecular highlight color.</p>\n<p>The second way to call <code>specularColor()</code> has one optional parameter,\n<code>color</code>. A <a href=\"#/p5.Color\">p5.Color</a> object, an array of color\nvalues, or a CSS color string can be passed to set the specular highlight\ncolor.</p>\n<p>The third way to call <code>specularColor()</code> has four optional parameters, <code>v1</code>,\n<code>v2</code>, <code>v3</code>, and <code>alpha</code>. RGBA, HSBA, or HSLA values, as in\n<code>specularColor(255, 0, 0, 80)</code>, can be passed to set the specular highlight\ncolor. Color values will be interpreted using the current\n<a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
+ "name": "createFramebuffer",
+ "file": "src/scripts/parsers/in/p5.js/src/core/p5.Graphics.js",
+ "line": 555,
"itemtype": "method",
- "name": "specularColor",
- "chainable": 1,
+ "description": "<p>Creates a new <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object with\nthe same WebGL context as the graphics buffer.</p>\n<p><a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> objects are separate drawing\nsurfaces that can be used as textures in WebGL mode. They're similar to\n<a href=\"#/p5.Graphics\">p5.Graphics</a> objects and generally run much\nfaster when used as textures. Creating a\n<a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object in the same context\nas the graphics buffer makes this speedup possible.</p>\n<p>The parameter, <code>options</code>, is optional. An object can be passed to configure\nthe <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. The available\nproperties are:</p>\n<ul><li><code>format</code>: data format of the texture, either <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or <code>HALF_FLOAT</code>. Default is <code>UNSIGNED_BYTE</code>.</li><li><code>channels</code>: whether to store <code>RGB</code> or <code>RGBA</code> color channels. Default is to match the graphics buffer which is <code>RGBA</code>.</li><li><code>depth</code>: whether to include a depth buffer. Default is <code>true</code>.</li><li><code>depthFormat</code>: data format of depth information, either <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is <code>FLOAT</code>.</li><li><code>stencil</code>: whether to include a stencil buffer for masking. <code>depth</code> must be <code>true</code> for this feature to work. Defaults to the value of <code>depth</code> which is <code>true</code>.</li><li><code>antialias</code>: whether to perform anti-aliasing. If set to <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will be used by default. The number of samples can also be set, as in <code>{ antialias: 4 }</code>. Default is to match <a href=\"#/p5/setAttributes\">setAttributes()</a> which is <code>false</code> (<code>true</code> in Safari).</li><li><code>width</code>: width of the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Default is to always match the graphics buffer width.</li><li><code>height</code>: height of the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Default is to always match the graphics buffer height.</li><li><code>density</code>: pixel density of the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Default is to always match the graphics buffer pixel density.</li><li><code>textureFiltering</code>: how to read values from the <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> object. Either <code>LINEAR</code> (nearby pixels will be interpolated) or <code>NEAREST</code> (no interpolation). Generally, use <code>LINEAR</code> when using the texture as an image and <code>NEAREST</code> if reading the texture as data. Default is <code>LINEAR</code>.</li></ul><p>If the <code>width</code>, <code>height</code>, or <code>density</code> attributes are set, they won't\nautomatically match the graphics buffer and must be changed manually.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // No specular color.\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to add a point light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the sphere.\n noStroke();\n specularColor(100);\n specularMaterial(255, 255, 255);\n\n // Control the light.\n if (isLit === true) {\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the point light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use a p5.Color object.\n let c = color('dodgerblue');\n specularColor(c);\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use a CSS color string.\n specularColor('#1E90FF');\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use RGB values.\n specularColor(30, 144, 255);\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Click and hold a mouse button to change shapes.\n\nlet pg;\nlet torusLayer;\nlet boxLayer;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n // Create the p5.Framebuffer objects.\n torusLayer = pg.createFramebuffer();\n boxLayer = pg.createFramebuffer();\n\n describe('A grid of white toruses rotating against a dark gray background. The shapes become boxes while the user holds a mouse button.');\n}\n\nfunction draw() {\n // Update and draw the layers offscreen.\n drawTorus();\n drawBox();\n\n // Choose the layer to display.\n let layer;\n if (mouseIsPressed === true) {\n layer = boxLayer;\n } else {\n layer = torusLayer;\n }\n\n // Draw to the p5.Graphics object.\n pg.background(50);\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the layer to the p5.Graphics object\n pg.image(layer, x, y, 25, 25);\n }\n }\n\n // Display the p5.Graphics object.\n image(pg, 0, 0);\n}\n\n// Update and draw the torus layer offscreen.\nfunction drawTorus() {\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the torus.\n pg.noStroke();\n\n // Draw the torus.\n pg.torus(20);\n\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.end();\n}\n\n// Update and draw the box layer offscreen.\nfunction drawBox() {\n // Start drawing to the box p5.Framebuffer.\n boxLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the box.\n pg.noStroke();\n\n // Draw the box.\n pg.box(30);\n\n // Start drawing to the box p5.Framebuffer.\n boxLayer.end();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and hold a mouse button to change shapes.\n\nlet pg;\nlet torusLayer;\nlet boxLayer;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an options object.\n let options = { width: 25, height: 25 };\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n // Create the p5.Framebuffer objects.\n // Use options for configuration.\n torusLayer = pg.createFramebuffer(options);\n boxLayer = pg.createFramebuffer(options);\n\n describe('A grid of white toruses rotating against a dark gray background. The shapes become boxes while the user holds a mouse button.');\n}\n\nfunction draw() {\n // Update and draw the layers offscreen.\n drawTorus();\n drawBox();\n\n // Choose the layer to display.\n let layer;\n if (mouseIsPressed === true) {\n layer = boxLayer;\n } else {\n layer = torusLayer;\n }\n\n // Draw to the p5.Graphics object.\n pg.background(50);\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the layer to the p5.Graphics object\n pg.image(layer, x, y);\n }\n }\n\n // Display the p5.Graphics object.\n image(pg, 0, 0);\n}\n\n// Update and draw the torus layer offscreen.\nfunction drawTorus() {\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the torus.\n pg.noStroke();\n\n // Draw the torus.\n pg.torus(5, 2.5);\n\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.end();\n}\n\n// Update and draw the box layer offscreen.\nfunction drawBox() {\n // Start drawing to the box p5.Framebuffer.\n boxLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the box.\n pg.noStroke();\n\n // Draw the box.\n pg.box(7.5);\n\n // Start drawing to the box p5.Framebuffer.\n boxLayer.end();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Lights",
"overloads": [
{
- "line": 205,
"params": [
{
- "name": "v1",
- "description": "<p>red or hue value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "<p>green or saturation value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "<p>blue, brightness, or lightness value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
+ "name": "options",
+ "description": "configuration options.",
+ "optional": 1,
+ "type": "Object"
}
],
- "chainable": 1
- },
+ "return": {
+ "description": "new framebuffer.",
+ "type": "p5.Framebuffer"
+ }
+ }
+ ],
+ "return": {
+ "description": "new framebuffer.",
+ "type": "p5.Framebuffer"
+ },
+ "class": "p5.Graphics",
+ "static": false,
+ "module": "Rendering",
+ "submodule": "Rendering"
+ },
+ {
+ "name": "remove",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 51,
+ "itemtype": "method",
+ "description": "Removes the element, stops all audio/video streams, and removes all\ncallback functions.",
+ "example": [
+ "<div>\n<code>\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element.\n p = createP('p5*js');\n p.position(10, 10);\n\n describe('The text \"p5*js\" written at the center of a gray square. ');\n}\n\n// Remove the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.remove();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 423,
- "params": [
- {
- "name": "gray",
- "description": "<p>grayscale value between 0 and 255.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- },
+ "params": []
+ }
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "parent",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 204,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Attaches the element to a parent element.</p>\n<p>For example, a <code><div></div></code> element may be used as a box to\nhold two pieces of text, a header and a paragraph. The\n<code><div></div></code> is the parent element of both the header and\nparagraph.</p>\n<p>The parameter <code>parent</code> can have one of three types. <code>parent</code> can be a\nstring with the parent element's ID, as in\n<code>myElement.parent('container')</code>. It can also be another\n<a href=\"#/p5.Element\">p5.Element</a> object, as in\n<code>myElement.parent(myDiv)</code>. Finally, <code>parent</code> can be an <code>HTMLElement</code>\nobject, as in <code>myElement.parent(anotherElement)</code>.</p>\n<p>Calling <code>myElement.parent()</code> without an argument returns the element's\nparent.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n background(200);\n\n // Create a div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color to white\n div.style('background-color', 'white');\n\n // Align any text to the center.\n div.style('text-align', 'center');\n\n // Set its ID to \"container\".\n div.id('container');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent\n // using its ID \"container\".\n p.parent('container');\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Create rectangular div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color and align\n // any text to the center.\n div.style('background-color', 'white');\n div.style('text-align', 'center');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent.\n p.parent(div);\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n background(200);\n\n // Create rectangular div element.\n let div = createDiv();\n\n // Place the div in the top-left corner.\n div.position(10, 20);\n\n // Set its width and height.\n div.size(80, 60);\n\n // Set its background color and align\n // any text to the center.\n div.style('background-color', 'white');\n div.style('text-align', 'center');\n\n // Create a paragraph element.\n let p = createP('p5*js');\n\n // Make the div its parent\n // using the underlying\n // HTMLElement.\n p.parent(div.elt);\n\n describe('The text \"p5*js\" written in black at the center of a white rectangle. The rectangle is inside a gray square.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 429,
"params": [
{
- "name": "value",
- "description": "<p>color as a CSS string.</p>\n",
- "type": "String"
+ "name": "parent",
+ "description": "ID, <a href=\"#/p5.Element\">p5.Element</a>,\nor HTMLElement of desired parent element.",
+ "type": "String|p5.Element|Object"
}
- ],
- "chainable": 1
+ ]
},
{
- "line": 435,
- "params": [
- {
- "name": "values",
- "description": "<p>color as an array of RGBA, HSBA, or HSLA\n values.</p>\n",
- "type": "Number[]"
- }
- ],
- "chainable": 1
+ "params": [],
+ "return": {
+ "description": "",
+ "type": "p5.Element"
+ }
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "p5.Element"
+ },
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "child",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 305,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Attaches the element as a child of another element.</p>\n<p><code>myElement.child()</code> accepts either a string ID, DOM node, or\n<a href=\"#/p5.Element\">p5.Element</a>. For example,\n<code>myElement.child(otherElement)</code>. If no argument is provided, an array of\nchildren DOM nodes is returned.</p>\n",
+ "example": [
+ "<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n let div1 = createDiv('Child');\n\n // Make div1 the child of div0\n // using the p5.Element.\n div0.child(div1);\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n let div1 = createDiv('Child');\n\n // Give div1 an ID.\n div1.id('apples');\n\n // Make div1 the child of div0\n // using its ID.\n div0.child('apples');\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\n// This example assumes there is a div already on the page\n// with id \"myChildDiv\".\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div elements.\n let div0 = createDiv('Parent');\n\n // Select the child element by its ID.\n let elt = document.getElementById('myChildDiv');\n\n // Make div1 the child of div0\n // using its HTMLElement object.\n div0.child(elt);\n\n describe('A gray square with the words \"Parent\" and \"Child\" written beneath it.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "an array of child nodes.",
+ "type": "Node[]"
+ }
},
{
- "line": 442,
"params": [
{
- "name": "color",
- "description": "<p>color as a <a href=\"#/p5.Color\">p5.Color</a> object.</p>\n",
- "type": "p5.Color"
+ "name": "child",
+ "description": "the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\nto add to the current element",
+ "optional": 1,
+ "type": "String|p5.Element"
}
- ],
- "chainable": 1
+ ]
}
- ]
+ ],
+ "return": {
+ "description": "an array of child nodes.",
+ "type": "Node[]"
+ },
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/light.js",
- "line": 461,
- "description": "<p>Creates a light that shines in one direction.</p>\n<p>Directional lights don’t shine from a specific point. They’re like a sun\nthat shines from somewhere offscreen. The light’s direction is set using\nthree <code>(x, y, z)</code> values between -1 and 1. For example, setting a light’s\ndirection as <code>(1, 0, 0)</code> will light <a href=\"#/p5.Geometry\">p5.Geometry</a>\nobjects from the left since the light faces directly to the right. A\nmaximum of 5 directional lights can be active at once.</p>\n<p>There are four ways to call <code>directionalLight()</code> with parameters to set the\nlight’s color and direction.</p>\n<p>The first way to call <code>directionalLight()</code> has six parameters. The first\nthree parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the light’s color using the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>. The last three\nparameters, <code>x</code>, <code>y</code>, and <code>z</code>, set the light’s direction. For example,\n<code>directionalLight(255, 0, 0, 1, 0, 0)</code> creates a red <code>(255, 0, 0)</code> light\nthat shines to the right <code>(1, 0, 0)</code>.</p>\n<p>The second way to call <code>directionalLight()</code> has four parameters. The first\nthree parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the light’s color using the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>. The last parameter,\n<code>direction</code> sets the light’s direction using a\n<a href=\"#/p5.Geometry\">p5.Geometry</a> object. For example,\n<code>directionalLight(255, 0, 0, lightDir)</code> creates a red <code>(255, 0, 0)</code> light\nthat shines in the direction the <code>lightDir</code> vector points.</p>\n<p>The third way to call <code>directionalLight()</code> has four parameters. The first\nparameter, <code>color</code>, sets the light’s color using a\n<a href=\"#/p5.Color\">p5.Color</a> object or an array of color values. The\nlast three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set the light’s direction. For\nexample, <code>directionalLight(myColor, 1, 0, 0)</code> creates a light that shines\nto the right <code>(1, 0, 0)</code> with the color value of <code>myColor</code>.</p>\n<p>The fourth way to call <code>directionalLight()</code> has two parameters. The first\nparameter, <code>color</code>, sets the light’s color using a\n<a href=\"#/p5.Color\">p5.Color</a> object or an array of color values. The\nsecond parameter, <code>direction</code>, sets the light’s direction using a\n<a href=\"#/p5.Color\">p5.Color</a> object. For example,\n<code>directionalLight(myColor, lightDir)</code> creates a light that shines in the\ndirection the <code>lightDir</code> vector points with the color value of <code>myColor</code>.</p>\n",
+ "name": "html",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 397,
"itemtype": "method",
- "name": "directionalLight",
"chainable": 1,
+ "description": "<p>Sets the inner HTML of the element, replacing any existing HTML.</p>\n<p>The second parameter, <code>append</code>, is optional. If <code>true</code> is passed, as in\n<code>myElement.html('hi', true)</code>, the HTML is appended instead of replacing\nexisting HTML.</p>\n<p>If no arguments are passed, as in <code>myElement.html()</code>, the element's inner\nHTML is returned.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the directional light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Add a red directional light from above.\n // Use RGB values and XYZ directions.\n directionalLight(255, 0, 0, 0, 1, 0);\n }\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red directional light from above.\n // Use a p5.Color object and XYZ directions.\n let c = color(255, 0, 0);\n directionalLight(c, 0, 1, 0);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red directional light from above.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightDir = createVector(0, 1, 0);\n directionalLight(c, lightDir);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>"
+ "<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the div element and set its size.\n let div = createDiv('');\n div.size(100, 100);\n\n // Set the inner HTML to \"hi\".\n div.html('hi');\n\n describe('A gray square with the word \"hi\" written beneath it.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element and set its size.\n let div = createDiv('Hello ');\n div.size(100, 100);\n\n // Append \"World\" to the div's HTML.\n div.html('World', true);\n\n describe('A gray square with the text \"Hello World\" written beneath it.');\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element.\n let div = createDiv('Hello');\n\n // Prints \"Hello\" to the console.\n print(div.html());\n\n describe('A gray square with the word \"Hello!\" written beneath it.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Lights",
"overloads": [
{
- "line": 461,
- "params": [
- {
- "name": "v1",
- "description": "<p>red or hue value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "<p>green or saturation value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "<p>blue, brightness, or lightness value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "x",
- "description": "<p>x-component of the light's direction between -1 and 1.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-component of the light's direction between -1 and 1.</p>\n",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "<p>z-component of the light's direction between -1 and 1.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
+ "params": [],
+ "return": {
+ "description": "the inner HTML of the element",
+ "type": "String"
+ }
},
{
- "line": 614,
"params": [
{
- "name": "v1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "",
- "type": "Number"
+ "name": "html",
+ "description": "the HTML to be placed inside the element",
+ "optional": 1,
+ "type": "String"
},
{
- "name": "direction",
- "description": "<p>direction of the light as a\n <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n",
- "type": "p5.Vector"
+ "name": "append",
+ "description": "whether to append HTML to existing",
+ "optional": 1,
+ "type": "Boolean"
}
- ],
- "chainable": 1
- },
+ ]
+ }
+ ],
+ "return": {
+ "description": "the inner HTML of the element",
+ "type": "String"
+ },
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "id",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 443,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Sets the element's ID using a given string.</p>\n<p>Calling <code>myElement.id()</code> without an argument returns its ID as a string.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Set the canvas' ID\n // to \"mycanvas\".\n cnv.id('mycanvas');\n\n // Get the canvas' ID.\n let id = cnv.id();\n text(id, 24, 54);\n\n describe('The text \"mycanvas\" written in black on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 624,
"params": [
{
- "name": "color",
- "description": "<p>color as a <a href=\"#/p5.Color\">p5.Color</a> object,\n an array of color values, or as a CSS string.</p>\n",
- "type": "p5.Color|Number[]|String"
- },
- {
- "name": "x",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "",
- "type": "Number"
+ "name": "id",
+ "description": "ID of the element.",
+ "type": "String"
}
- ],
- "chainable": 1
+ ]
},
{
- "line": 634,
- "params": [
- {
- "name": "color",
- "description": "",
- "type": "p5.Color|Number[]|String"
- },
- {
- "name": "direction",
- "description": "",
- "type": "p5.Vector"
- }
- ],
- "chainable": 1
+ "params": [],
+ "return": {
+ "description": "ID of the element.",
+ "type": "String"
+ }
}
- ]
+ ],
+ "return": {
+ "description": "ID of the element.",
+ "type": "String"
+ },
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/light.js",
- "line": 683,
- "description": "<p>Creates a light that shines from a point in all directions.</p>\n<p>Point lights are like light bulbs that shine in all directions. They can be\nplaced at different positions to achieve different lighting effects. A\nmaximum of 5 point lights can be active at once.</p>\n<p>There are four ways to call <code>pointLight()</code> with parameters to set the\nlight’s color and position.</p>\n<p>The first way to call <code>pointLight()</code> has six parameters. The first three\nparameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the light’s color using the current\n<a href=\"#/p5/colorMode\">colorMode()</a>. The last three parameters, <code>x</code>,\n<code>y</code>, and <code>z</code>, set the light’s position. For example,\n<code>pointLight(255, 0, 0, 50, 0, 0)</code> creates a red <code>(255, 0, 0)</code> light that\nshines from the coordinates <code>(50, 0, 0)</code>.</p>\n<p>The second way to call <code>pointLight()</code> has four parameters. The first three\nparameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the light’s color using the current\n<a href=\"#/p5/colorMode\">colorMode()</a>. The last parameter, position sets\nthe light’s position using a <a href=\"#/p5.Vector\">p5.Vector</a> object.\nFor example, <code>pointLight(255, 0, 0, lightPos)</code> creates a red <code>(255, 0, 0)</code>\nlight that shines from the position set by the <code>lightPos</code> vector.</p>\n<p>The third way to call <code>pointLight()</code> has four parameters. The first\nparameter, <code>color</code>, sets the light’s color using a\n<a href=\"#/p5.Color\">p5.Color</a> object or an array of color values. The\nlast three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set the light’s position. For\nexample, <code>directionalLight(myColor, 50, 0, 0)</code> creates a light that shines\nfrom the coordinates <code>(50, 0, 0)</code> with the color value of <code>myColor</code>.</p>\n<p>The fourth way to call <code>pointLight()</code> has two parameters. The first\nparameter, <code>color</code>, sets the light’s color using a\n<a href=\"#/p5.Color\">p5.Color</a> object or an array of color values. The\nsecond parameter, <code>position</code>, sets the light’s position using a\n<a href=\"#/p5.Vector\">p5.Vector</a> object. For example,\n<code>directionalLight(myColor, lightPos)</code> creates a light that shines from the\nposition set by the <code>lightPos</code> vector with the color value of <code>myColor</code>.</p>\n",
+ "name": "class",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 492,
"itemtype": "method",
- "name": "pointLight",
"chainable": 1,
+ "description": "<p>Adds a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class\" target=\"_blank\">class attribute</a>\nto the element using a given string.</p>\n<p>Calling <code>myElement.class()</code> without an argument returns a string with its current classes.</p>\n",
"example": [
- "\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the point light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Add a red point light from above.\n // Use RGB values and XYZ coordinates.\n pointLight(255, 0, 0, 0, -150, 0);\n }\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the point light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light from above.\n // Use a p5.Color object and XYZ directions.\n let c = color(255, 0, 0);\n pointLight(c, 0, -150, 0);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light from above.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightPos = createVector(0, -150, 0);\n pointLight(c, lightPos);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Four spheres arranged in a square and drawn on a gray background. The spheres appear bright red toward the center of the square. The color gets darker toward the corners of the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light that points to the center of the scene.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightPos = createVector(0, 0, 65);\n pointLight(c, lightPos);\n\n // Style the spheres.\n noStroke();\n\n // Draw a sphere up and to the left.\n push();\n translate(-25, -25, 25);\n sphere(10);\n pop();\n\n // Draw a box up and to the right.\n push();\n translate(25, -25, 25);\n sphere(10);\n pop();\n\n // Draw a sphere down and to the left.\n push();\n translate(-25, 25, 25);\n sphere(10);\n pop();\n\n // Draw a box down and to the right.\n push();\n translate(25, 25, 25);\n sphere(10);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Add the class \"small\" to the\n // canvas element.\n cnv.class('small');\n\n // Get the canvas element's class\n // and display it.\n let c = cnv.class();\n text(c, 35, 54);\n\n describe('The word \"small\" written in black on a gray canvas.');\n\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Lights",
"overloads": [
{
- "line": 683,
"params": [
{
- "name": "v1",
- "description": "<p>red or hue value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "<p>green or saturation value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "<p>blue, brightness, or lightness value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "x",
- "description": "<p>x-coordinate of the light.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the light.</p>\n",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "<p>z-coordinate of the light.</p>\n",
- "type": "Number"
+ "name": "class",
+ "description": "class to add.",
+ "type": "String"
}
- ],
- "chainable": 1
+ ]
},
{
- "line": 890,
+ "params": [],
+ "return": {
+ "description": "element's classes, if any.",
+ "type": "String"
+ }
+ }
+ ],
+ "return": {
+ "description": "element's classes, if any.",
+ "type": "String"
+ },
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "addClass",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 528,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "Adds a class to the element.",
+ "example": [
+ "<div class='norender'>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n let div = createDiv('div');\n\n // Add a class to the div.\n div.addClass('myClass');\n\n describe('A gray square.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
"params": [
{
- "name": "v1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "position",
- "description": "<p>position of the light as a\n <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n",
- "type": "p5.Vector"
+ "name": "class",
+ "description": "name of class to add.",
+ "type": "String"
}
- ],
- "chainable": 1
- },
+ ]
+ }
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "removeClass",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 575,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "Removes a class from the element.",
+ "example": [
+ "<div class='norender'>\n<code>\n// In this example, a class is set when the div is created\n// and removed when mouse is pressed. This could link up\n// with a CSS style rule to toggle style properties.\n\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add a class to the div.\n div.addClass('myClass');\n\n describe('A gray square.');\n}\n\n// Remove 'myClass' from the div when the user presses the mouse.\nfunction mousePressed() {\n div.removeClass('myClass');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 900,
"params": [
{
- "name": "color",
- "description": "<p>color as a <a href=\"#/p5.Color\">p5.Color</a> object,\n an array of color values, or a CSS string.</p>\n",
- "type": "p5.Color|Number[]|String"
- },
- {
- "name": "x",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "",
- "type": "Number"
+ "name": "class",
+ "description": "name of class to remove.",
+ "type": "String"
}
- ],
- "chainable": 1
- },
+ ]
+ }
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "hasClass",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 617,
+ "itemtype": "method",
+ "description": "Checks if a class is already applied to element.",
+ "example": [
+ "<div class='norender'>\n<code>\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add the class 'show' to the div.\n div.addClass('show');\n\n describe('A gray square.');\n}\n\n// Toggle the class 'show' when the mouse is pressed.\nfunction mousePressed() {\n if (div.hasClass('show')) {\n div.addClass('show');\n } else {\n div.removeClass('show');\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 910,
"params": [
{
- "name": "color",
- "description": "",
- "type": "p5.Color|Number[]|String"
- },
- {
- "name": "position",
- "description": "",
- "type": "p5.Vector"
+ "name": "c",
+ "description": "{String} name of class to check."
}
],
- "chainable": 1
+ "return": {
+ "description": "a boolean value if element has specified class.",
+ "type": "boolean"
+ }
}
- ]
+ ],
+ "return": {
+ "description": "a boolean value if element has specified class.",
+ "type": "boolean"
+ },
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/light.js",
- "line": 956,
- "description": "<p>Creates an ambient light from an image.</p>\n<p><code>imageLight()</code> simulates a light shining from all directions. The effect is\nlike placing the sketch at the center of a giant sphere that uses the image\nas its texture. The image's diffuse light will be affected by\n<a href=\"#/p5/fill\">fill()</a> and the specular reflections will be\naffected by <a href=\"#/p5/specularMaterial\">specularMaterial()</a> and\n<a href=\"#/p5/shininess\">shininess()</a>.</p>\n<p>The parameter, <code>img</code>, is the <a href=\"#/p5.Image\">p5.Image</a> object to\nuse as the light source.</p>\n",
+ "name": "toggleClass",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 653,
"itemtype": "method",
- "name": "imageLight",
- "params": [
+ "chainable": 1,
+ "description": "Toggles whether a class is applied to the element.",
+ "example": [
+ "<div class='norender'>\n<code>\nlet div;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element.\n div = createDiv('div');\n\n // Add the 'show' class to the div.\n div.addClass('show');\n\n describe('A gray square.');\n}\n\n// Toggle the 'show' class when the mouse is pressed.\nfunction mousePressed() {\n div.toggleClass('show');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "img",
- "description": "<p>image to use as the light source.</p>\n",
- "type": "p5.image"
+ "params": [
+ {
+ "name": "c",
+ "description": "{String} class name to toggle."
+ }
+ ]
}
],
- "example": [
- "\n<div class=\"notest\">\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');\n}\n\nfunction draw() {\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the image as a panorama (360˚ background).\n panorama(img);\n\n // Add a soft ambient light.\n ambientLight(50);\n\n // Add light from the image.\n imageLight(img);\n\n // Style the sphere.\n specularMaterial(20);\n shininess(100);\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Lights"
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/light.js",
- "line": 1021,
- "description": "<p>Creates an immersive 3D background.</p>\n<p><code>panorama()</code> transforms images containing 360˚ content, such as maps or\nHDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the\nspace requires changing the camera's perspective with functions such as\n<a href=\"#/p5/orbitControl\">orbitControl()</a> or\n<a href=\"#/p5/camera\">camera()</a>.</p>\n",
+ "name": "center",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 698,
"itemtype": "method",
- "name": "panorama",
- "params": [
+ "chainable": 1,
+ "description": "<p>Centers the element either vertically, horizontally, or both.</p>\n<p><code>center()</code> will center the element relative to its parent or according to\nthe page's body if the element has no parent.</p>\n<p>If no argument is passed, as in <code>myElement.center()</code> the element is aligned\nboth vertically and horizontally.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create the div element and style it.\n let div = createDiv('');\n div.size(10, 10);\n div.style('background-color', 'orange');\n\n // Center the div relative to the page's body.\n div.center();\n\n describe('A gray square and an orange rectangle. The rectangle is at the center of the page.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "img",
- "description": "<p>360˚ image to use as the background.</p>\n",
- "type": "p5.Image"
+ "params": [
+ {
+ "name": "align",
+ "description": "passing 'vertical', 'horizontal' aligns element accordingly",
+ "optional": 1,
+ "type": "String"
+ }
+ ]
}
],
- "example": [
- "\n<div class=\"notest\">\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(100 ,100 ,WEBGL);\n\n describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');\n}\n\nfunction draw() {\n // Add the panorama.\n panorama(img);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Use the image as a light source.\n imageLight(img);\n\n // Style the sphere.\n noStroke();\n specularMaterial(50);\n shininess(200);\n metalness(100);\n\n // Draw the sphere.\n sphere(30);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Lights"
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/light.js",
- "line": 1077,
- "description": "<p>Places an ambient and directional light in the scene.\nThe lights are set to ambientLight(128, 128, 128) and\ndirectionalLight(128, 128, 128, 0, 0, -1).</p>\n<p>Note: lights need to be called (whether directly or indirectly)\nwithin draw() to remain persistent in a looping program.\nPlacing them in setup() will cause them to only have an effect\nthe first time through the loop.</p>\n",
+ "name": "position",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 786,
"itemtype": "method",
- "name": "lights",
"chainable": 1,
+ "description": "<p>Sets the element's position.</p>\n<p>The first two parameters, <code>x</code> and <code>y</code>, set the element's position relative\nto the top-left corner of the web page.</p>\n<p>The third parameter, <code>positionType</code>, is optional. It sets the element's\n<a target=\"_blank\"\nhref=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\">positioning scheme</a>.\n<code>positionType</code> is a string that can be either <code>'static'</code>, <code>'fixed'</code>,\n<code>'relative'</code>, <code>'sticky'</code>, <code>'initial'</code>, or <code>'inherit'</code>.</p>\n<p>If no arguments passed, as in <code>myElement.position()</code>, the method returns\nthe element's position in an object, as in <code>{ x: 0, y: 0 }</code>.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the lights.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box drawn against a gray background. The quality of the light changes when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the lights.\n if (isLit === true) {\n lights();\n }\n\n // Draw the box.\n box();\n}\n\n// Turn on the lights when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box drawn against a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n ambientLight(128, 128, 128);\n directionalLight(128, 128, 128, 0, 0, -1);\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
+ "<div>\n<code class='norender'>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Positions the canvas 50px to the right and 100px\n // below the top-left corner of the window.\n cnv.position(50, 100);\n\n describe('A gray square that is 50 pixels to the right and 100 pixels down from the top-left corner of the web page.');\n}\n</code>\n</div>\n\n<div>\n<code class='norender'>\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Positions the canvas at the top-left corner\n // of the window with a 'fixed' position type.\n cnv.position(0, 0, 'fixed');\n\n describe('A gray square in the top-left corner of the web page.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Lights"
- },
- {
- "file": "src/webgl/light.js",
- "line": 1161,
- "description": "<p>Sets the falloff rate for <a href=\"#/p5/pointLight\">pointLight()</a>\nand <a href=\"#/p5/spotLight\">spotLight()</a>.</p>\n<p>A light’s falloff describes the intensity of its beam at a distance. For\nexample, a lantern has a slow falloff, a flashlight has a medium falloff,\nand a laser pointer has a sharp falloff.</p>\n<p><code>lightFalloff()</code> has three parameters, <code>constant</code>, <code>linear</code>, and\n<code>quadratic</code>. They’re numbers used to calculate falloff at a distance, <code>d</code>,\nas follows:</p>\n<p><code>falloff = 1 / (constant + d * linear + (d * d) * quadratic)</code></p>\n<p>Note: <code>constant</code>, <code>linear</code>, and <code>quadratic</code> should always be set to values\ngreater than 0.</p>\n",
- "itemtype": "method",
- "name": "lightFalloff",
- "params": [
+ "overloads": [
{
- "name": "constant",
- "description": "<p>constant value for calculating falloff.</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "object of form <code>{ x: 0, y: 0 }</code> containing the element's position.",
+ "type": "Object"
+ }
},
{
- "name": "linear",
- "description": "<p>linear value for calculating falloff.</p>\n",
- "type": "Number"
- },
+ "params": [
+ {
+ "name": "x",
+ "description": "x-position relative to top-left of window (optional)",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-position relative to top-left of window (optional)",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "positionType",
+ "description": "it can be static, fixed, relative, sticky, initial or inherit (optional)",
+ "optional": 1,
+ "type": "String"
+ }
+ ]
+ }
+ ],
+ "return": {
+ "description": "object of form <code>{ x: 0, y: 0 }</code> containing the element's position.",
+ "type": "Object"
+ },
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "show",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 840,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "Shows the current element.",
+ "example": [
+ "<div>\n<code>\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and hide it.\n p = createP('p5*js');\n p.position(10, 10);\n p.hide();\n\n describe('A gray square. The text \"p5*js\" appears when the user double-clicks the square.');\n}\n\n// Show the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.show();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "quadratic",
- "description": "<p>quadratic value for calculating falloff.</p>\n",
- "type": "Number"
+ "params": []
}
],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "hide",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 872,
+ "itemtype": "method",
"chainable": 1,
+ "description": "Hides the current element.",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to change the falloff rate.\n\nlet useFalloff = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn against a gray background. The intensity of the light changes when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Set the light falloff.\n if (useFalloff === true) {\n lightFalloff(2, 0, 0);\n }\n\n // Add a white point light from the front.\n pointLight(255, 255, 255, 0, 0, 100);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Change the falloff value when the user double-clicks.\nfunction doubleClicked() {\n useFalloff = true;\n}\n</code>\n</div>"
+ "let p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element.\n p = createP('p5*js');\n p.position(10, 10);\n\n describe('The text \"p5*js\" at the center of a gray square. The text disappears when the user double-clicks the square.');\n}\n\n// Hide the paragraph when the user double-clicks.\nfunction doubleClicked() {\n p.hide();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Lights"
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/light.js",
- "line": 1272,
- "description": "<p>Creates a light that shines from a point in one direction.</p>\n<p>Spot lights are like flashlights that shine in one direction creating a\ncone of light. The shape of the cone can be controlled using the angle and\nconcentration parameters. A maximum of 5 spot lights can be active at once.</p>\n<p>There are eight ways to call <code>spotLight()</code> with parameters to set the\nlight’s color, position, direction. For example,\n<code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0)</code> creates a red <code>(255, 0, 0)</code> light\nat the origin <code>(0, 0, 0)</code> that points to the right <code>(1, 0, 0)</code>.</p>\n<p>The <code>angle</code> parameter is optional. It sets the radius of the light cone.\nFor example, <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16)</code> creates a\nred <code>(255, 0, 0)</code> light at the origin <code>(0, 0, 0)</code> that points to the right\n<code>(1, 0, 0)</code> with an angle of <code>PI / 16</code> radians. By default, <code>angle</code> is\n<code>PI / 3</code> radians.</p>\n<p>The <code>concentration</code> parameter is also optional. It focuses the light\ntowards the center of the light cone. For example,\n<code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50)</code> creates a red\n<code>(255, 0, 0)</code> light at the origin <code>(0, 0, 0)</code> that points to the right\n<code>(1, 0, 0)</code> with an angle of <code>PI / 16</code> radians at concentration of 50. By\ndefault, <code>concentration</code> is 100.</p>\n",
+ "name": "size",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 995,
"itemtype": "method",
- "name": "spotLight",
"chainable": 1,
+ "description": "<p>Sets the element's width and height.</p>\n<p>Calling <code>myElement.size()</code> without an argument returns the element's size\nas an object with the properties <code>width</code> and <code>height</code>. For example,\n<code>{ width: 20, height: 10 }</code>.</p>\n<p>The first parameter, <code>width</code>, is optional. It's a number used to set the\nelement's width. Calling <code>myElement.size(10)</code></p>\n<p>The second parameter, 'height<code>, is also optional. It's a\nnumber used to set the element's height. For example, calling\n</code>myElement.size(20, 10)` sets the element's width to 20 pixels and height\nto 10 pixels.</p>\n<p>The constant <code>AUTO</code> can be used to adjust one dimension at a time while\nmaintaining the aspect ratio, which is <code>width / height</code>. For example,\nconsider an element that's 200 pixels wide and 100 pixels tall. Calling\n<code>myElement.size(20, AUTO)</code> sets the width to 20 pixels and height to 10\npixels.</p>\n<p>Note: In the case of elements that need to load data, such as images, wait\nto call <code>myElement.size()</code> until after the data loads.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to adjust the spotlight.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Control the spotlight.\n if (isLit === true) {\n // Add a red spot light that shines into the screen.\n // Set its angle to PI / 32 radians.\n spotLight(255, 0, 0, 0, 0, 100, 0, 0, -1, PI / 32);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the spotlight when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to adjust the spotlight.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Control the spotlight.\n if (isLit === true) {\n // Add a red spot light that shines into the screen.\n // Set its angle to PI / 3 radians (default).\n // Set its concentration to 1000.\n let c = color(255, 0, 0);\n let position = createVector(0, 0, 100);\n let direction = createVector(0, 0, -1);\n spotLight(c, position, direction, PI / 3, 1000);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the spotlight when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a pink div element and place it at the top-left corner.\n let div = createDiv();\n div.position(10, 10);\n div.style('background-color', 'deeppink');\n\n // Set the div's width to 80 pixels and height to 20 pixels.\n div.size(80, 20);\n\n describe('A gray square with a pink rectangle near its top.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a pink div element and place it at the top-left corner.\n let div = createDiv();\n div.position(10, 10);\n div.style('background-color', 'deeppink');\n\n // Set the div's width to 80 pixels and height to 40 pixels.\n div.size(80, 40);\n\n // Get the div's size as an object.\n let s = div.size();\n\n // Display the div's dimensions.\n div.html(`${s.width} x ${s.height}`);\n\n describe('A gray square with a pink rectangle near its top. The text \"80 x 40\" is written within the rectangle.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img1;\nlet img2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Load an image of an astronaut on the moon\n // and place it at the top-left of the canvas.\n img1 = createImg(\n 'assets/moonwalk.jpg',\n 'An astronaut walking on the moon',\n ''\n );\n img1.position(0, 0);\n\n // Load an image of an astronaut on the moon\n // and place it at the top-left of the canvas.\n // Resize the image once it's loaded.\n img2 = createImg(\n 'assets/moonwalk.jpg',\n 'An astronaut walking on the moon',\n '',\n resizeImage\n );\n img2.position(0, 0);\n\n describe('A gray square two copies of a space image at the top-left. The copy in front is smaller.');\n}\n\n// Resize img2 and keep its aspect ratio.\nfunction resizeImage() {\n img2.size(50, AUTO);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Lights",
"overloads": [
{
- "line": 1272,
+ "params": [],
+ "return": {
+ "description": "width and height of the element in an object.",
+ "type": "Object"
+ }
+ },
+ {
"params": [
{
- "name": "v1",
- "description": "<p>red or hue value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "<p>green or saturation value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
+ "name": "w",
+ "description": "width of the element, either AUTO, or a number.",
+ "optional": 1,
+ "type": "Number|AUTO"
},
{
- "name": "v3",
- "description": "<p>blue, brightness, or lightness value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "x",
- "description": "<p>x-coordinate of the light.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the light.</p>\n",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "<p>z-coordinate of the light.</p>\n",
- "type": "Number"
- },
- {
- "name": "rx",
- "description": "<p>x-component of light direction between -1 and 1.</p>\n",
- "type": "Number"
- },
- {
- "name": "ry",
- "description": "<p>y-component of light direction between -1 and 1.</p>\n",
- "type": "Number"
- },
- {
- "name": "rz",
- "description": "<p>z-component of light direction between -1 and 1.</p>\n",
- "type": "Number"
- },
- {
- "name": "angle",
- "description": "<p>angle of the light cone. Defaults to <code>PI / 3</code>.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "concentration",
- "description": "<p>concentration of the light. Defaults to 100.</p>\n",
- "type": "Number",
- "optional": true
+ "name": "h",
+ "description": "height of the element, either AUTO, or a number.",
+ "optional": 1,
+ "type": "Number|AUTO"
}
- ],
- "chainable": 1
- },
+ ]
+ }
+ ],
+ "return": {
+ "description": "width and height of the element in an object.",
+ "type": "Object"
+ },
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "style",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1149,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Applies a style to the element by adding a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax\" target=\"_blank\">CSS declaration</a>.</p>\n<p>The first parameter, <code>property</code>, is a string. If the name of a style\nproperty is passed, as in <code>myElement.style('color')</code>, the method returns\nthe current value as a string or <code>null</code> if it hasn't been set. If a\n<code>property:style</code> string is passed, as in\n<code>myElement.style('color:deeppink')</code>, the method sets the style <code>property</code>\nto <code>value</code>.</p>\n<p>The second parameter, <code>value</code>, is optional. It sets the property's value.\n<code>value</code> can be a string, as in\n<code>myElement.style('color', 'deeppink')</code>, or a\n<a href=\"#/p5.Color\">p5.Color</a> object, as in\n<code>myElement.style('color', myColor)</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its font color to \"deeppink\".\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color', 'deeppink');\n\n describe('The text p5*js written in pink on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object.\n let c = color('deeppink');\n\n // Create a paragraph element and set its font color using a p5.Color object.\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color', c);\n\n describe('The text p5*js written in pink on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its font color to \"deeppink\"\n // using property:value syntax.\n let p = createP('p5*js');\n p.position(25, 20);\n p.style('color:deeppink');\n\n describe('The text p5*js written in pink on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an empty paragraph element and set its font color to \"deeppink\".\n let p = createP();\n p.position(5, 5);\n p.style('color', 'deeppink');\n\n // Get the element's color as an RGB color string.\n let c = p.style('color');\n\n // Set the element's inner HTML using the RGB color string.\n p.html(c);\n\n describe('The text \"rgb(255, 20, 147)\" written in pink on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 1399,
"params": [
{
- "name": "color",
- "description": "<p>color as a <a href=\"#/p5.Color\">p5.Color</a> object,\n an array of color values, or a CSS string.</p>\n",
- "type": "p5.Color|Number[]|String"
- },
- {
- "name": "position",
- "description": "<p>position of the light as a <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n",
- "type": "p5.Vector"
- },
- {
- "name": "direction",
- "description": "<p>direction of light as a <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n",
- "type": "p5.Vector"
- },
- {
- "name": "angle",
- "description": "",
- "type": "Number",
- "optional": true
- },
- {
- "name": "concentration",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "property",
+ "description": "style property to set.",
+ "type": "String"
}
- ]
+ ],
+ "return": {
+ "description": "value of the property.",
+ "type": "String"
+ }
},
{
- "line": 1408,
"params": [
{
- "name": "v1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "position",
- "description": "",
- "type": "p5.Vector"
- },
- {
- "name": "direction",
- "description": "",
- "type": "p5.Vector"
- },
- {
- "name": "angle",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "property",
+ "type": "String"
},
{
- "name": "concentration",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "value",
+ "description": "value to assign to the property.",
+ "type": "String|p5.Color"
}
- ]
+ ],
+ "return": {
+ "description": "value of the property.",
+ "type": "String"
+ }
+ }
+ ],
+ "return": {
+ "description": "value of the property.",
+ "type": "String"
+ },
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "attribute",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1305,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Adds an\n<a href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#attributes\" target=\"_blank\">attribute</a>\nto the element.</p>\n<p>This method is useful for advanced tasks. Most commonly-used attributes,\nsuch as <code>id</code>, can be set with their dedicated methods. For example,\n<code>nextButton.id('next')</code> sets an element's <code>id</code> attribute. Calling\n<code>nextButton.attribute('id', 'next')</code> has the same effect.</p>\n<p>The first parameter, <code>attr</code>, is the attribute's name as a string. Calling\n<code>myElement.attribute('align')</code> returns the attribute's current value as a\nstring or <code>null</code> if it hasn't been set.</p>\n<p>The second parameter, <code>value</code>, is optional. It's a string used to set the\nattribute's value. For example, calling\n<code>myElement.attribute('align', 'center')</code> sets the element's horizontal\nalignment to <code>center</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a container div element and place it at the top-left corner.\n let container = createDiv();\n container.position(0, 0);\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"left\".\n let p1 = createP('hi');\n p1.parent(container);\n p1.attribute('align', 'left');\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"center\".\n let p2 = createP('hi');\n p2.parent(container);\n p2.attribute('align', 'center');\n\n // Create a paragraph element and place it within the container.\n // Set its horizontal alignment to \"right\".\n let p3 = createP('hi');\n p3.parent(container);\n p3.attribute('align', 'right');\n\n describe('A gray square with the text \"hi\" written on three separate lines, each placed further to the right.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "value of the attribute.",
+ "type": "String"
+ }
},
{
- "line": 1418,
"params": [
{
- "name": "color",
- "description": "",
- "type": "p5.Color|Number[]|String"
- },
- {
- "name": "x",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "",
- "type": "Number"
- },
- {
- "name": "direction",
- "description": "",
- "type": "p5.Vector"
- },
- {
- "name": "angle",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "attr",
+ "description": "attribute to set.",
+ "type": "String"
},
{
- "name": "concentration",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "value",
+ "description": "value to assign to the attribute.",
+ "type": "String"
}
]
- },
+ }
+ ],
+ "return": {
+ "description": "value of the attribute.",
+ "type": "String"
+ },
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "removeAttribute",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1364,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Removes an attribute from the element.</p>\n<p>The parameter <code>attr</code> is the attribute's name as a string. For example,\ncalling <code>myElement.removeAttribute('align')</code> removes its <code>align</code>\nattribute if it's been set.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet p;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and place it in the center of the canvas.\n // Set its \"align\" attribute to \"center\".\n p = createP('hi');\n p.position(0, 20);\n p.attribute('align', 'center');\n\n describe('The text \"hi\" written in black at the center of a gray square. The text moves to the left edge when double-clicked.');\n}\n\n// Remove the 'align' attribute when the user double-clicks the paragraph.\nfunction doubleClicked() {\n p.removeAttribute('align');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 1428,
"params": [
{
- "name": "color",
- "description": "",
- "type": "p5.Color|Number[]|String"
- },
- {
- "name": "position",
- "description": "",
- "type": "p5.Vector"
- },
- {
- "name": "rx",
- "description": "",
- "type": "Number"
- },
- {
- "name": "ry",
- "description": "",
- "type": "Number"
- },
- {
- "name": "rz",
- "description": "",
- "type": "Number"
- },
- {
- "name": "angle",
- "description": "",
- "type": "Number",
- "optional": true
- },
- {
- "name": "concentration",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "attr",
+ "description": "attribute to remove.",
+ "type": "String"
}
]
+ }
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "value",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1448,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Returns or sets the element's value.</p>\n<p>Calling <code>myElement.value()</code> returns the element's current value.</p>\n<p>The parameter, <code>value</code>, is an optional number or string. If provided,\nas in <code>myElement.value(123)</code>, it's used to set the element's value.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a text input and place it beneath the canvas.\n // Set its default value to \"hello\".\n input = createInput('hello');\n input.position(0, 100);\n\n describe('The text from an input box is displayed on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input's value to display a message.\n let msg = input.value();\n text(msg, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a text input and place it beneath the canvas.\n // Set its default value to \"hello\".\n input = createInput('hello');\n input.position(0, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input's value to display a message.\n let msg = input.value();\n text(msg, 0, 55);\n}\n\n// Reset the input's value.\nfunction doubleClicked() {\n input.value('hello');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "value of the element.",
+ "type": "String|Number"
+ }
},
{
- "line": 1438,
"params": [
{
- "name": "v1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "x",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "",
- "type": "Number"
- },
- {
- "name": "direction",
- "description": "",
- "type": "p5.Vector"
- },
- {
- "name": "angle",
- "description": "",
- "type": "Number",
- "optional": true
- },
- {
- "name": "concentration",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "value",
+ "type": "String|Number"
}
]
- },
+ }
+ ],
+ "return": {
+ "description": "value of the element.",
+ "type": "String|Number"
+ },
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "mousePressed",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1498,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Calls a function when the mouse is pressed over the element.</p>\n<p>Calling <code>myElement.mousePressed(false)</code> disables the function.</p>\n<p>Note: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the canvas\n // is pressed.\n cnv.mousePressed(randomColor);\n\n describe('A gray square changes color when the mouse is pressed.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 1450,
"params": [
{
- "name": "v1",
- "description": "",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "",
- "type": "Number"
- },
- {
- "name": "position",
- "description": "",
- "type": "p5.Vector"
- },
- {
- "name": "rx",
- "description": "",
- "type": "Number"
- },
- {
- "name": "ry",
- "description": "",
- "type": "Number"
- },
- {
- "name": "rz",
- "description": "",
- "type": "Number"
- },
- {
- "name": "angle",
- "description": "",
- "type": "Number",
- "optional": true
- },
- {
- "name": "concentration",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "fxn",
+ "description": "function to call when the mouse is\npressed over the element.\n<code>false</code> disables the function.",
+ "type": "Function|Boolean"
}
]
- },
+ }
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "doubleClicked",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1551,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Calls a function when the mouse is pressed twice over the element.</p>\n<p>Calling <code>myElement.doubleClicked(false)</code> disables the function.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // canvas is double-clicked.\n cnv.doubleClicked(randomColor);\n\n describe('A gray square changes color when the user double-clicks the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 1462,
"params": [
{
- "name": "color",
- "description": "",
- "type": "p5.Color|Number[]|String"
- },
- {
- "name": "x",
- "description": "",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "",
- "type": "Number"
- },
- {
- "name": "z",
- "description": "",
- "type": "Number"
- },
- {
- "name": "rx",
- "description": "",
- "type": "Number"
- },
- {
- "name": "ry",
- "description": "",
- "type": "Number"
- },
- {
- "name": "rz",
- "description": "",
- "type": "Number"
- },
- {
- "name": "angle",
- "description": "",
- "type": "Number",
- "optional": true
- },
- {
- "name": "concentration",
- "description": "",
- "type": "Number",
- "optional": true
+ "name": "fxn",
+ "description": "function to call when the mouse is\ndouble clicked over the element.\n<code>false</code> disables the function.",
+ "type": "Function|Boolean"
}
]
}
- ]
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/light.js",
- "line": 1687,
- "description": "<p>Removes all lights from the sketch.</p>\n<p>Calling <code>noLights()</code> removes any lights created with\n<a href=\"#/p5/lights\">lights()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>, or\n<a href=\"#/p5/spotLight\">spotLight()</a>. These functions may be called\nafter <code>noLights()</code> to create a new lighting scheme.</p>\n",
+ "name": "mouseWheel",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1636,
"itemtype": "method",
- "name": "noLights",
"chainable": 1,
+ "description": "<p>Calls a function when the mouse wheel scrolls over the element.</p>\n<p>The callback function, <code>fxn</code>, is passed an <code>event</code> object. <code>event</code> has\ntwo numeric properties, <code>deltaY</code> and <code>deltaX</code>. <code>event.deltaY</code> is\nnegative if the mouse wheel rotates away from the user. It's positive if\nthe mouse wheel rotates toward the user. <code>event.deltaX</code> is positive if\nthe mouse wheel moves to the right. It's negative if the mouse wheel moves\nto the left.</p>\n<p>Calling <code>myElement.mouseWheel(false)</code> disables the function.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two spheres drawn against a gray background. The top sphere is white and the bottom sphere is red.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the top sphere.\n push();\n translate(0, -25, 0);\n sphere(20);\n pop();\n\n // Turn off the lights.\n noLights();\n\n // Add a red directional light that points into the screen.\n directionalLight(255, 0, 0, 0, 0, -1);\n\n // Draw the bottom sphere.\n push();\n translate(0, 25, 0);\n sphere(20);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse wheel moves.\n cnv.mouseWheel(randomColor);\n\n describe('A gray square changes color when the user scrolls the mouse wheel over the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call changeBackground() when the\n // mouse wheel moves.\n cnv.mouseWheel(changeBackground);\n\n describe('A gray square. When the mouse wheel scrolls over the square, it changes color and displays shapes.');\n}\n\nfunction changeBackground(event) {\n // Change the background color\n // based on deltaY.\n if (event.deltaY > 0) {\n background('deeppink');\n } else if (event.deltaY < 0) {\n background('cornflowerblue');\n } else {\n background(200);\n }\n\n // Draw a shape based on deltaX.\n if (event.deltaX > 0) {\n circle(50, 50, 20);\n } else if (event.deltaX < 0) {\n square(40, 40, 20);\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Lights"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "fxn",
+ "description": "function to call when the mouse wheel is\nscrolled over the element.\n<code>false</code> disables the function.",
+ "type": "Function|Boolean"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/loading.js",
- "line": 13,
- "description": "<p>Loads a 3D model to create a\n<a href=\"#/p5.Geometry\">p5.Geometry</a> object.</p>\n<p><code>loadModel()</code> can load 3D models from OBJ and STL files. Once the model is\nloaded, it can be displayed with the\n<a href=\"#/p5/model\">model()</a> function, as in <code>model(shape)</code>.</p>\n<p>There are three ways to call <code>loadModel()</code> with optional parameters to help\nprocess the model.</p>\n<p>The first parameter, <code>path</code>, is always a <code>String</code> with the path to the\nfile. Paths to local files should be relative, as in\n<code>loadModel('assets/model.obj')</code>. URLs such as\n<code>'https://example.com/model.obj'</code> may be blocked due to browser security.</p>\n<p>Note: When loading a <code>.obj</code> file that references materials stored in\n<code>.mtl</code> files, p5.js will attempt to load and apply those materials.\nTo ensure that the <code>.obj</code> file reads the <code>.mtl</code> file correctly include the\n<code>.mtl</code> file alongside it.</p>\n<p>The first way to call <code>loadModel()</code> has three optional parameters after the\nfile path. The first optional parameter, <code>successCallback</code>, is a function\nto call once the model loads. For example,\n<code>loadModel('assets/model.obj', handleModel)</code> will call the <code>handleModel()</code>\nfunction once the model loads. The second optional parameter,\n<code>failureCallback</code>, is a function to call if the model fails to load. For\nexample, <code>loadModel('assets/model.obj', handleModel, handleFailure)</code> will\ncall the <code>handleFailure()</code> function if an error occurs while loading. The\nthird optional parameter, <code>fileType</code>, is the model’s file extension as a\nstring. For example,\n<code>loadModel('assets/model', handleModel, handleFailure, '.obj')</code> will try to\nload the file model as a <code>.obj</code> file.</p>\n<p>The second way to call <code>loadModel()</code> has four optional parameters after the\nfile path. The first optional parameter is a <code>Boolean</code> value. If <code>true</code> is\npassed, as in <code>loadModel('assets/model.obj', true)</code>, then the model will be\nresized to ensure it fits the canvas. The next three parameters are\n<code>successCallback</code>, <code>failureCallback</code>, and <code>fileType</code> as described above.</p>\n<p>The third way to call <code>loadModel()</code> has one optional parameter after the\nfile path. The optional parameter, <code>options</code>, is an <code>Object</code> with options,\nas in <code>loadModel('assets/model.obj', options)</code>. The <code>options</code> object can\nhave the following properties:</p>\n<pre><code class=\"language-js\">let options = {\n // Enables standardized size scaling during loading if set to true.\n normalize: true,\n\n // Function to call once the model loads.\n successCallback: handleModel,\n\n // Function to call if an error occurs while loading.\n failureCallback: handleError,\n\n // Model's file extension.\n fileType: '.stl',\n\n // Flips the U texture coordinates of the model.\n flipU: false,\n\n // Flips the V texture coordinates of the model.\n flipV: false\n};\n\n// Pass the options object to loadModel().\nloadModel('assets/model.obj', options);\n</code></pre>\n<p>Models can take time to load. Calling <code>loadModel()</code> in\n<a href=\"#/p5/preload\">preload()</a> ensures models load before they're\nused in <a href=\"#/p5/setup\">setup()</a> or <a href=\"#/p5/draw\">draw()</a>.</p>\n<p>Note: There’s no support for colored STL files. STL files with color will\nbe rendered without color.</p>\n",
+ "name": "mouseReleased",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1680,
"itemtype": "method",
- "name": "loadModel",
- "return": {
- "description": "the <a href=\"#/p5.Geometry\">p5.Geometry</a> object",
- "type": "p5.Geometry"
- },
+ "chainable": 1,
+ "description": "<p>Calls a function when the mouse is released over the element.</p>\n<p>Calling <code>myElement.mouseReleased(false)</code> disables the function.</p>\n<p>Note: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n shape = loadModel('assets/teapot.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\n// Normalize the geometry's size to fit the canvas.\nfunction preload() {\n shape = loadModel('assets/teapot.obj', true);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n loadModel('assets/teapot.obj', true, handleModel);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and log the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n loadModel('assets/wrong.obj', true, handleModel, handleError);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and print the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n// Print an error message if the file doesn't load.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n loadModel('assets/teapot.obj', true, handleModel, handleError, '.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and print the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n// Print an error message if the file doesn't load.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\nlet options = {\n normalize: true,\n successCallback: handleModel,\n failureCallback: handleError,\n fileType: '.obj'\n};\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n loadModel('assets/teapot.obj', options);\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white teapot drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n\n// Set the shape variable and print the geometry's\n// ID to the console.\nfunction handleModel(data) {\n shape = data;\n console.log(shape.gid);\n}\n\n// Print an error message if the file doesn't load.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when a\n // mouse press ends.\n cnv.mouseReleased(randomColor);\n\n describe('A gray square changes color when the user releases a mouse press.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Models",
"overloads": [
{
- "line": 13,
"params": [
{
- "name": "path",
- "description": "<p>path of the model to be loaded.</p>\n",
- "type": "String"
- },
- {
- "name": "normalize",
- "description": "<p>if <code>true</code>, scale the model to fit the canvas.</p>\n",
- "type": "Boolean"
- },
- {
- "name": "successCallback",
- "description": "<p>function to call once the model is loaded. Will be passed\n the <a href=\"#/p5.Geometry\">p5.Geometry</a> object.</p>\n",
- "type": "function(p5.Geometry)",
- "optional": true
- },
- {
- "name": "failureCallback",
- "description": "<p>function to call if the model fails to load. Will be passed an <code>Error</code> event object.</p>\n",
- "type": "Function(Event)",
- "optional": true
- },
- {
- "name": "fileType",
- "description": "<p>model’s file extension. Either <code>'.obj'</code> or <code>'.stl'</code>.</p>\n",
- "type": "String",
- "optional": true
+ "name": "fxn",
+ "description": "function to call when the mouse is\npressed over the element.\n<code>false</code> disables the function.",
+ "type": "Function|Boolean"
}
- ],
- "return": {
- "description": "the <a href=\"#/p5.Geometry\">p5.Geometry</a> object",
- "type": "p5.Geometry"
- }
- },
+ ]
+ }
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "mouseClicked",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1724,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Calls a function when the mouse is pressed and released over the element.</p>\n<p>Calling <code>myElement.mouseReleased(false)</code> disables the function.</p>\n<p>Note: Some mobile browsers may also trigger this event when the element\nreceives a quick tap.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when a\n // mouse press ends.\n cnv.mouseClicked(randomColor);\n\n describe('A gray square changes color when the user releases a mouse press.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 324,
"params": [
{
- "name": "path",
- "description": "",
- "type": "String"
- },
- {
- "name": "successCallback",
- "description": "",
- "type": "function(p5.Geometry)",
- "optional": true
- },
- {
- "name": "failureCallback",
- "description": "",
- "type": "Function(Event)",
- "optional": true
- },
- {
- "name": "fileType",
- "description": "",
- "type": "String",
- "optional": true
+ "name": "fxn",
+ "description": "function to call when the mouse is\npressed and released over the element.\n<code>false</code> disables the function.",
+ "type": "Function|Boolean"
}
- ],
- "return": {
- "description": "new <a href=\"#/p5.Geometry\">p5.Geometry</a> object.",
- "type": "p5.Geometry"
- }
- },
+ ]
+ }
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "mouseMoved",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1765,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Calls a function when the mouse moves over the element.</p>\n<p>Calling <code>myElement.mouseMoved(false)</code> disables the function.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves.\n cnv.mouseMoved(randomColor);\n\n describe('A gray square changes color when the mouse moves over the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 332,
"params": [
{
- "name": "path",
- "description": "",
- "type": "String"
- },
- {
- "name": "options",
- "description": "<p>loading options.</p>\n",
- "type": "Object",
- "optional": true,
- "props": [
- {
- "name": "successCallback",
- "description": "",
- "type": "function(p5.Geometry)",
- "optional": true
- },
- {
- "name": "failureCallback",
- "description": "",
- "type": "Function(Event)",
- "optional": true
- },
- {
- "name": "fileType",
- "description": "",
- "type": "String",
- "optional": true
- },
- {
- "name": "normalize",
- "description": "",
- "type": "Boolean",
- "optional": true
- },
- {
- "name": "flipU",
- "description": "",
- "type": "Boolean",
- "optional": true
- },
- {
- "name": "flipV",
- "description": "",
- "type": "Boolean",
- "optional": true
- }
- ]
+ "name": "fxn",
+ "description": "function to call when the mouse\nmoves over the element.\n<code>false</code> disables the function.",
+ "type": "Function|Boolean"
}
- ],
- "return": {
- "description": "new <a href=\"#/p5.Geometry\">p5.Geometry</a> object.",
- "type": "p5.Geometry"
- }
+ ]
}
- ]
- },
- {
- "file": "src/webgl/loading.js",
- "line": 551,
- "description": "<p>Parse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:</p>\n<p>v -0.5 -0.5 0.5\nv -0.5 -0.5 -0.5\nv -0.5 0.5 -0.5\nv -0.5 0.5 0.5</p>\n<p>f 4 3 2 1</p>\n",
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Models"
- },
- {
- "file": "src/webgl/loading.js",
- "line": 695,
- "description": "<p>STL files can be of two types, ASCII and Binary,</p>\n<p>We need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.</p>\n",
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Models"
- },
- {
- "file": "src/webgl/loading.js",
- "line": 722,
- "description": "<p>This function checks if the file is in ASCII format or in Binary format</p>\n<p>It is done by searching keyword <code>solid</code> at the start of the file.</p>\n<p>An ASCII STL data must begin with <code>solid</code> as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the <code>d</code> are known to be\nplentiful. So, check the first 5 bytes for <code>solid</code>.</p>\n<p>Several encodings, such as UTF-8, precede the text with up to 5 bytes:\n<a href=\"https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\">https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding</a>\nSearch for <code>solid</code> to start anywhere after those prefixes.</p>\n",
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Models"
- },
- {
- "file": "src/webgl/loading.js",
- "line": 749,
- "description": "<p>This function matches the <code>query</code> at the provided <code>offset</code></p>\n",
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Models"
- },
- {
- "file": "src/webgl/loading.js",
- "line": 761,
- "description": "<p>This function parses the Binary STL files.\n<a href=\"https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL\">https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL</a></p>\n<p>Currently there is no support for the colors provided in STL files.</p>\n",
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Models"
- },
- {
- "file": "src/webgl/loading.js",
- "line": 849,
- "description": "<p>ASCII STL file starts with <code>solid 'nameOfFile'</code>\nThen contain the normal of the face, starting with <code>facet normal</code>\nNext contain a keyword indicating the start of face vertex, <code>outer loop</code>\nNext comes the three vertex, starting with <code>vertex x y z</code>\nVertices ends with <code>endloop</code>\nFace ends with <code>endfacet</code>\nNext face starts with <code>facet normal</code>\nThe end of the file is indicated by <code>endsolid</code></p>\n",
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Models"
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/loading.js",
- "line": 993,
- "description": "<p>Draws a <a href=\"#/p5.Geometry\">p5.Geometry</a> object to the canvas.</p>\n<p>The parameter, <code>model</code>, is the\n<a href=\"#/p5.Geometry\">p5.Geometry</a> object to draw.\n<a href=\"#/p5.Geometry\">p5.Geometry</a> objects can be built with\n<a href=\"#/p5/buildGeometry\">buildGeometry()</a>, or\n<a href=\"#/p5/beginGeometry\">beginGeometry()</a> and\n<a href=\"#/p5/endGeometry\">endGeometry()</a>. They can also be loaded from\na file with <a href=\"#/p5/loadGeometry\">loadGeometry()</a>.</p>\n<p>Note: <code>model()</code> can only be used in WebGL mode.</p>\n",
+ "name": "mouseOver",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1806,
"itemtype": "method",
- "name": "model",
- "params": [
+ "chainable": 1,
+ "description": "<p>Calls a function when the mouse moves onto the element.</p>\n<p>Calling <code>myElement.mouseOver(false)</code> disables the function.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves onto the canvas.\n cnv.mouseOver(randomColor);\n\n describe('A gray square changes color when the mouse moves onto the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "model",
- "description": "<p>3D shape to be drawn.</p>\n",
- "type": "p5.Geometry"
+ "params": [
+ {
+ "name": "fxn",
+ "description": "function to call when the mouse\nmoves onto the element.\n<code>false</code> disables the function.",
+ "type": "Function|Boolean"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createShape);\n\n describe('A white cone drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the p5.Geometry object.\n model(shape);\n}\n\n// Create p5.Geometry object from a single cone.\nfunction createShape() {\n cone();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Geometry object.\n shape = buildGeometry(createArrow);\n\n describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the arrows.\n noStroke();\n\n // Draw the p5.Geometry object.\n model(shape);\n\n // Translate and rotate the coordinate system.\n translate(30, 0, 0);\n rotateZ(frameCount * 0.01);\n\n // Draw the p5.Geometry object again.\n model(shape);\n}\n\nfunction createArrow() {\n // Add shapes to the p5.Geometry object.\n push();\n rotateX(PI);\n cone(10);\n translate(0, -10, 0);\n cylinder(3, 20);\n pop();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet shape;\n\n// Load the file and create a p5.Geometry object.\nfunction preload() {\n shape = loadModel('assets/octahedron.obj');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white octahedron drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the shape.\n model(shape);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Models"
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/loading.js",
- "line": 1134,
- "description": "<p>Load a 3d model from an OBJ or STL string.</p>\n<p>OBJ and STL files lack a built-in sense of scale, causing models exported from different programs to vary in size.\nIf your model doesn't display correctly, consider using <code>loadModel()</code> with <code>normalize</code> set to <code>true</code> to standardize its size.\nFurther adjustments can be made using the <code>scale()</code> function.</p>\n<p>Also, the support for colored STL files is not present. STL files with color will be\nrendered without color properties.</p>\n<ul>\n<li>Options can include:</li>\n</ul>\n<ul>\n<li><code>modelString</code>: Specifies the plain text string of either an stl or obj file to be loaded.</li>\n<li><code>fileType</code>: Defines the file extension of the model.</li>\n<li><code>normalize</code>: Enables standardized size scaling during loading if set to true.</li>\n<li><code>successCallback</code>: Callback for post-loading actions with the 3D model object.</li>\n<li><code>failureCallback</code>: Handles errors if model loading fails, receiving an event error.</li>\n<li><code>flipU</code>: Flips the U texture coordinates of the model.</li>\n<li><code>flipV</code>: Flips the V texture coordinates of the model.</li>\n</ul>\n",
+ "name": "mouseOut",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1847,
"itemtype": "method",
- "name": "createModel",
- "return": {
- "description": "the <a href=\"#/p5.Geometry\">p5.Geometry</a> object",
- "type": "p5.Geometry"
- },
+ "chainable": 1,
+ "description": "<p>Calls a function when the mouse moves off the element.</p>\n<p>Calling <code>myElement.mouseOut(false)</code> disables the function.</p>\n",
"example": [
- "\n<div>\n<code>\nconst octahedron_model = `\nv 0.000000E+00 0.000000E+00 40.0000\nv 22.5000 22.5000 0.000000E+00\nv 22.5000 -22.5000 0.000000E+00\nv -22.5000 -22.5000 0.000000E+00\nv -22.5000 22.5000 0.000000E+00\nv 0.000000E+00 0.000000E+00 -40.0000\nf 1 2 3\nf 1 3 4\nf 1 4 5\nf 1 5 2\nf 6 5 4\nf 6 4 3\nf 6 3 2\nf 6 2 5\n`;\n//draw a spinning octahedron\nlet octahedron;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n octahedron = createModel(octahedron_model, '.obj');\n describe('Vertically rotating 3D octahedron.');\n}\n\nfunction draw() {\n background(200);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n model(octahedron);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call randomColor() when the\n // mouse moves off the canvas.\n cnv.mouseOut(randomColor);\n\n describe('A gray square changes color when the mouse moves off the canvas.');\n}\n\n// Paint the background either\n// red, yellow, blue, or green.\nfunction randomColor() {\n let c = random(['red', 'yellow', 'blue', 'green']);\n background(c);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "Shape",
- "submodule": "3D Models",
"overloads": [
{
- "line": 1134,
"params": [
{
- "name": "modelString",
- "description": "<p>String of the object to be loaded</p>\n",
- "type": "String"
- },
- {
- "name": "fileType",
- "description": "<p>The file extension of the model\n (<code>.stl</code>, <code>.obj</code>).</p>\n",
- "type": "String",
- "optional": true
- },
- {
- "name": "normalize",
- "description": "<p>If true, scale the model to a\n standardized size when loading</p>\n",
- "type": "Boolean"
- },
- {
- "name": "successCallback",
- "description": "<p>Function to be called\n once the model is loaded. Will be passed\n the 3D model object.</p>\n",
- "type": "function(p5.Geometry)",
- "optional": true
- },
- {
- "name": "failureCallback",
- "description": "<p>called with event error if\n the model fails to load.</p>\n",
- "type": "Function(Event)",
- "optional": true
+ "name": "fxn",
+ "description": "function to call when the mouse\nmoves off the element.\n<code>false</code> disables the function.",
+ "type": "Function|Boolean"
}
- ],
- "return": {
- "description": "the <a href=\"#/p5.Geometry\">p5.Geometry</a> object",
- "type": "p5.Geometry"
- }
- },
+ ]
+ }
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "dragOver",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1888,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Calls a function when a file is dragged over the element.</p>\n<p>Calling <code>myElement.dragOver(false)</code> disables the function.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Drag a file over the canvas to test.\n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call helloFile() when a\n // file is dragged over\n // the canvas.\n cnv.dragOver(helloFile);\n\n describe('A gray square. The text \"hello, file\" appears when a file is dragged over the square.');\n}\n\nfunction helloFile() {\n text('hello, file', 50, 50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 1204,
"params": [
{
- "name": "modelString",
- "description": "",
- "type": "String"
- },
- {
- "name": "fileType",
- "description": "",
- "type": "String",
- "optional": true
- },
- {
- "name": "successCallback",
- "description": "",
- "type": "function(p5.Geometry)",
- "optional": true
- },
- {
- "name": "failureCallback",
- "description": "",
- "type": "Function(Event)",
- "optional": true
+ "name": "fxn",
+ "description": "function to call when the file is\ndragged over the element.\n<code>false</code> disables the function.",
+ "type": "Function|Boolean"
}
- ],
- "return": {
- "description": "the <a href=\"#/p5.Geometry\">p5.Geometry</a> object",
- "type": "p5.Geometry"
- }
- },
+ ]
+ }
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "dragLeave",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 1929,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Calls a function when a file is dragged off the element.</p>\n<p>Calling <code>myElement.dragLeave(false)</code> disables the function.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Drag a file over, then off\n// the canvas to test.\n\nfunction setup() {\n // Create a canvas element and\n // assign it to cnv.\n let cnv = createCanvas(100, 100);\n\n background(200);\n\n // Call byeFile() when a\n // file is dragged over,\n // then off the canvas.\n cnv.dragLeave(byeFile);\n\n describe('A gray square. The text \"bye, file\" appears when a file is dragged over, then off the square.');\n}\n\nfunction byeFile() {\n text('bye, file', 50, 50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "line": 1212,
"params": [
{
- "name": "modelString",
- "description": "",
- "type": "String"
- },
- {
- "name": "fileType",
- "description": "",
- "type": "String",
- "optional": true
- },
- {
- "name": "options",
- "description": "",
- "type": "Object",
- "optional": true,
- "props": [
- {
- "name": "successCallback",
- "description": "",
- "type": "function(p5.Geometry)",
- "optional": true
- },
- {
- "name": "failureCallback",
- "description": "",
- "type": "Function(Event)",
- "optional": true
- },
- {
- "name": "normalize",
- "description": "",
- "type": "Boolean",
- "optional": true
- },
- {
- "name": "flipU",
- "description": "",
- "type": "Boolean",
- "optional": true
- },
- {
- "name": "flipV",
- "description": "",
- "type": "Boolean",
- "optional": true
- }
- ]
+ "name": "fxn",
+ "description": "function to call when the file is\ndragged off the element.\n<code>false</code> disables the function.",
+ "type": "Function|Boolean"
}
- ],
- "return": {
- "description": "the <a href=\"#/p5.Geometry\">p5.Geometry</a> object",
- "type": "p5.Geometry"
- }
+ ]
}
- ]
+ ],
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 12,
- "description": "<p>Loads vertex and fragment shaders to create a\n<a href=\"#/p5.Shader\">p5.Shader</a> object.</p>\n<p>Shaders are programs that run on the graphics processing unit (GPU). They\ncan process many pixels at the same time, making them fast for many\ngraphics tasks. They’re written in a language called\n<a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\" target=\"_blank\">GLSL</a>\nand run along with the rest of the code in a sketch.</p>\n<p>Once the <a href=\"#/p5.Shader\">p5.Shader</a> object is created, it can be\nused with the <a href=\"#/p5/shader\">shader()</a> function, as in\n<code>shader(myShader)</code>. A shader program consists of two files, a vertex shader\nand a fragment shader. The vertex shader affects where 3D geometry is drawn\non the screen and the fragment shader affects color.</p>\n<p><code>loadShader()</code> loads the vertex and fragment shaders from their <code>.vert</code> and\n<code>.frag</code> files. For example, calling\n<code>loadShader('assets/shader.vert', 'assets/shader.frag')</code> loads both\nrequired shaders and returns a <a href=\"#/p5.Shader\">p5.Shader</a> object.</p>\n<p>The third parameter, <code>successCallback</code>, is optional. If a function is\npassed, it will be called once the shader has loaded. The callback function\ncan use the new <a href=\"#/p5.Shader\">p5.Shader</a> object as its\nparameter.</p>\n<p>The fourth parameter, <code>failureCallback</code>, is also optional. If a function is\npassed, it will be called if the shader fails to load. The callback\nfunction can use the event error as its parameter.</p>\n<p>Shaders can take time to load. Calling <code>loadShader()</code> in\n<a href=\"#/p5/preload\">preload()</a> ensures shaders load before they're\nused in <a href=\"#/p5/setup\">setup()</a> or <a href=\"#/p5/draw\">draw()</a>.</p>\n<p>Note: Shaders can only be used in WebGL mode.</p>\n",
+ "name": "changed",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 2003,
"itemtype": "method",
- "name": "loadShader",
- "params": [
- {
- "name": "vertFilename",
- "description": "<p>path of the vertex shader to be loaded.</p>\n",
- "type": "String"
- },
- {
- "name": "fragFilename",
- "description": "<p>path of the fragment shader to be loaded.</p>\n",
- "type": "String"
- },
- {
- "name": "successCallback",
- "description": "<p>function to call once the shader is loaded. Can be passed the\n <a href=\"#/p5.Shader\">p5.Shader</a> object.</p>\n",
- "type": "Function",
- "optional": true
- },
+ "chainable": 1,
+ "description": "<p>Calls a function when the element changes.</p>\n<p>Calling <code>myElement.changed(false)</code> disables the function.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet dropdown;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a dropdown menu and add a few color options.\n dropdown = createSelect();\n dropdown.position(0, 0);\n dropdown.option('red');\n dropdown.option('green');\n dropdown.option('blue');\n\n // Call paintBackground() when the color option changes.\n dropdown.changed(paintBackground);\n\n describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');\n}\n\n// Paint the background with the selected color.\nfunction paintBackground() {\n let c = dropdown.value();\n background(c);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a checkbox and place it beneath the canvas.\n checkbox = createCheckbox(' circle');\n checkbox.position(0, 100);\n\n // Call repaint() when the checkbox changes.\n checkbox.changed(repaint);\n\n describe('A gray square with a checkbox underneath it that says \"circle\". A white circle appears when the box is checked and disappears otherwise.');\n}\n\n// Paint the background gray and determine whether to draw a circle.\nfunction repaint() {\n background(200);\n if (checkbox.checked() === true) {\n circle(50, 50, 30);\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "failureCallback",
- "description": "<p>function to call if the shader fails to load. Can be passed an\n <code>Error</code> event object.</p>\n",
- "type": "Function",
- "optional": true
+ "params": [
+ {
+ "name": "fxn",
+ "description": "function to call when the element changes.\n<code>false</code> disables the function.",
+ "type": "Function|Boolean"
+ }
+ ]
}
],
- "return": {
- "description": "new shader created from the vertex and fragment shader files.",
- "type": "p5.Shader"
- },
- "example": [
- "\n<div modernizr='webgl'>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n // Set the shader uniform r to the value 1.5.\n mandelbrot.setUniform('r', 1.5);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n\n describe('A black fractal image on a magenta background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 173,
- "description": "<p>Creates a new <a href=\"#/p5.Shader\">p5.Shader</a> object.</p>\n<p>Shaders are programs that run on the graphics processing unit (GPU). They\ncan process many pixels at the same time, making them fast for many\ngraphics tasks. They’re written in a language called\n<a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\" target=\"_blank\">GLSL</a>\nand run along with the rest of the code in a sketch.</p>\n<p>Once the <a href=\"#/p5.Shader\">p5.Shader</a> object is created, it can be\nused with the <a href=\"#/p5/shader\">shader()</a> function, as in\n<code>shader(myShader)</code>. A shader program consists of two parts, a vertex shader\nand a fragment shader. The vertex shader affects where 3D geometry is drawn\non the screen and the fragment shader affects color.</p>\n<p>The first parameter, <code>vertSrc</code>, sets the vertex shader. It’s a string that\ncontains the vertex shader program written in GLSL.</p>\n<p>The second parameter, <code>fragSrc</code>, sets the fragment shader. It’s a string\nthat contains the fragment shader program written in GLSL.</p>\n<p>A shader can optionally describe <em>hooks,</em> which are functions in GLSL that\nusers may choose to provide to customize the behavior of the shader using the\n<a href=\"#/p5.Shader/modify\"><code>modify()</code></a> method of <code>p5.Shader</code>. These are added by\ndescribing the hooks in a third parameter, <code>options</code>, and referencing the hooks in\nyour <code>vertSrc</code> or <code>fragSrc</code>. Hooks for the vertex or fragment shader are described under\nthe <code>vertex</code> and <code>fragment</code> keys of <code>options</code>. Each one is an object. where each key is\nthe type and name of a hook function, and each value is a string with the\nparameter list and default implementation of the hook. For example, to let users\noptionally run code at the start of the vertex shader, the options object could\ninclude:</p>\n<pre><code class=\"language-js\">{\n vertex: {\n 'void beforeVertex': '() {}'\n }\n}\n</code></pre>\n<p>Then, in your vertex shader source, you can run a hook by calling a function\nwith the same name prefixed by <code>HOOK_</code>. If you want to check if the default\nhook has been replaced, maybe to avoid extra overhead, you can check if the\nsame name prefixed by <code>AUGMENTED_HOOK_</code> has been defined:</p>\n<pre><code class=\"language-glsl\">void main() {\n // In most cases, just calling the hook is fine:\n HOOK_beforeVertex();\n\n // Alternatively, for more efficiency:\n #ifdef AUGMENTED_HOOK_beforeVertex\n HOOK_beforeVertex();\n #endif\n\n // Add the rest of your shader code here!\n}\n</code></pre>\n<p>Note: Only filter shaders can be used in 2D mode. All shaders can be used\nin WebGL mode.</p>\n",
+ "name": "input",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 2075,
"itemtype": "method",
- "name": "createShader",
- "params": [
- {
- "name": "vertSrc",
- "description": "<p>source code for the vertex shader.</p>\n",
- "type": "String"
- },
- {
- "name": "fragSrc",
- "description": "<p>source code for the fragment shader.</p>\n",
- "type": "String"
- },
+ "chainable": 1,
+ "description": "<p>Calls a function when the element receives input.</p>\n<p><code>myElement.input()</code> is often used to with text inputs and sliders. Calling\n<code>myElement.input(false)</code> disables the function.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a slider and place it beneath the canvas.\n slider = createSlider(0, 255, 200);\n slider.position(0, 100);\n\n // Call repaint() when the slider changes.\n slider.input(repaint);\n\n describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');\n}\n\n// Paint the background using slider's value.\nfunction repaint() {\n let g = slider.value();\n background(g);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an input and place it beneath the canvas.\n input = createInput('');\n input.position(0, 100);\n\n // Call repaint() when input is detected.\n input.input(repaint);\n\n describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');\n}\n\n// Paint the background gray and display the input's value.\nfunction repaint() {\n background(200);\n let msg = input.value();\n text(msg, 5, 50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "options",
- "description": "<p>An optional object describing how this shader can\nbe augmented with hooks. It can include:</p>\n<ul>\n<li><code>vertex</code>: An object describing the available vertex shader hooks.</li>\n<li><code>fragment</code>: An object describing the available frament shader hooks.</li>\n</ul>\n",
- "type": "Object",
- "optional": true
+ "params": [
+ {
+ "name": "fxn",
+ "description": "function to call when input is detected within\nthe element.\n<code>false</code> disables the function.",
+ "type": "Function|Boolean"
+ }
+ ]
}
],
- "return": {
- "description": "new shader object created from the\nvertex and fragment shaders.",
- "type": "p5.Shader"
- },
- "example": [
- "\n<div modernizr='webgl'>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let shaderProgram = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(shaderProgram);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let mandelbrot = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n // Set the shader uniform r to 0.005.\n // r is the size of the image in Mandelbrot-space.\n mandelbrot.setUniform('r', 0.005);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A black fractal image on a magenta background.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nlet mandelbrot;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n mandelbrot = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates\n // between 0 and 0.005.\n // r is the size of the image in Mandelbrot-space.\n let radius = 0.005 * (sin(frameCount * 0.01) + 1);\n mandelbrot.setUniform('r', radius);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n</code>\n</div>\n\n<div>\n<code>\n// A shader with hooks.\nlet myShader;\n\n// A shader with modified hooks.\nlet modifiedShader;\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\n\nvoid main() {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a fragment shader that uses a hook.\nlet fragSrc = `\nprecision highp float;\nvoid main() {\n // Let users override the color\n gl_FragColor = HOOK_getColor(vec4(1., 0., 0., 1.));\n}\n`;\n\nfunction setup() {\n createCanvas(50, 50, WEBGL);\n\n // Create a shader with hooks\n myShader = createShader(vertSrc, fragSrc, {\n fragment: {\n 'vec4 getColor': '(vec4 color) { return color; }'\n }\n });\n\n // Make a version of the shader with a hook overridden\n modifiedShader = myShader.modify({\n 'vec4 getColor': `(vec4 color) {\n return vec4(0., 0., 1., 1.);\n }`\n });\n}\n\nfunction draw() {\n noStroke();\n\n push();\n shader(myShader);\n translate(-width/3, 0);\n sphere(10);\n pop();\n\n push();\n shader(modifiedShader);\n translate(width/3, 0);\n sphere(10);\n pop();\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 540,
- "description": "<p>Creates a <a href=\"#/p5.Shader\">p5.Shader</a> object to be used with the\n<a href=\"#/p5/filter\">filter()</a> function.</p>\n<p><code>createFilterShader()</code> works like\n<a href=\"#/p5/createShader\">createShader()</a> but has a default vertex\nshader included. <code>createFilterShader()</code> is intended to be used along with\n<a href=\"#/p5/filter\">filter()</a> for filtering the contents of a canvas.\nA filter shader will be applied to the whole canvas instead of just\n<a href=\"#/p5.Geometry\">p5.Geometry</a> objects.</p>\n<p>The parameter, <code>fragSrc</code>, sets the fragment shader. It’s a string that\ncontains the fragment shader program written in\n<a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\" target=\"_blank\">GLSL</a>.</p>\n<p>The <a href=\"#/p5.Shader\">p5.Shader</a> object that's created has some\nuniforms that can be set:</p>\n<ul>\n<li><code>sampler2D tex0</code>, which contains the canvas contents as a texture.</li>\n<li><code>vec2 canvasSize</code>, which is the width and height of the canvas, not including pixel density.</li>\n<li><code>vec2 texelSize</code>, which is the size of a physical pixel including pixel density. This is calculated as <code>1.0 / (width * density)</code> for the pixel width and <code>1.0 / (height * density)</code> for the pixel height.</li>\n</ul>\n<p>The <a href=\"#/p5.Shader\">p5.Shader</a> that's created also provides\n<code>varying vec2 vTexCoord</code>, a coordinate with values between 0 and 1.\n<code>vTexCoord</code> describes where on the canvas the pixel will be drawn.</p>\n<p>For more info about filters and shaders, see Adam Ferriss' <a href=\"https://github.com/aferriss/p5jsShaderExamples\">repo of shader examples</a>\nor the <a href=\"https://p5js.org/tutorials/intro-to-shaders/\">Introduction to Shaders</a> tutorial.</p>\n",
+ "name": "drop",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 2189,
"itemtype": "method",
- "name": "createFilterShader",
- "params": [
- {
- "name": "fragSrc",
- "description": "<p>source code for the fragment shader.</p>\n",
- "type": "String"
- }
- ],
- "return": {
- "description": "new shader object created from the fragment shader.",
- "type": "p5.Shader"
- },
+ "chainable": 1,
+ "description": "<p>Calls a function when the user drops a file on the element.</p>\n<p>The first parameter, <code>callback</code>, is a function to call once the file loads.\nThe callback function should have one parameter, <code>file</code>, that's a\n<a href=\"#/p5.File\">p5.File</a> object. If the user drops multiple files on\nthe element, <code>callback</code>, is called once for each file.</p>\n<p>The second parameter, <code>fxn</code>, is a function to call when the browser detects\none or more dropped files. The callback function should have one\nparameter, <code>event</code>, that's a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/DragEvent\">DragEvent</a>.</p>\n",
"example": [
- "\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n let fragSrc = `precision highp float;\n void main() {\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n }`;\n\n createCanvas(100, 100, WEBGL);\n let s = createFilterShader(fragSrc);\n filter(s);\n describe('a yellow canvas');\n}\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet img, s;\nfunction preload() {\n img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n let fragSrc = `precision highp float;\n\n // x,y coordinates, given from the vertex shader\n varying vec2 vTexCoord;\n\n // the canvas contents, given from filter()\n uniform sampler2D tex0;\n // other useful information from the canvas\n uniform vec2 texelSize;\n uniform vec2 canvasSize;\n // a custom variable from this sketch\n uniform float darkness;\n\n void main() {\n // get the color at current pixel\n vec4 color = texture2D(tex0, vTexCoord);\n // set the output color\n color.b = 1.0;\n color *= darkness;\n gl_FragColor = vec4(color.rgb, 1.0);\n }`;\n\n createCanvas(100, 100, WEBGL);\n s = createFilterShader(fragSrc);\n}\nfunction draw() {\n image(img, -50, -50);\n s.setUniform('darkness', 0.5);\n filter(s);\n describe('a image of bricks tinted dark blue');\n}\n</code>\n</div>"
+ "<div>\n<code>\n// Drop an image on the canvas to view\n// this example.\nlet img;\n\nfunction setup() {\n let c = createCanvas(100, 100);\n\n background(200);\n\n // Call handleFile() when a file that's dropped on the canvas has loaded.\n c.drop(handleFile);\n\n describe('A gray square. When the user drops an image on the square, it is displayed.');\n}\n\n// Remove the existing image and display the new one.\nfunction handleFile(file) {\n // Remove the current image, if any.\n if (img) {\n img.remove();\n }\n\n // Create an <img> element with the\n // dropped file.\n img = createImg(file.data, '');\n img.hide();\n\n // Draw the image.\n image(img, 0, 0, width, height);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Drop an image on the canvas to view\n// this example.\nlet img;\nlet msg;\n\nfunction setup() {\n let c = createCanvas(100, 100);\n\n background(200);\n\n // Call functions when the user drops a file on the canvas\n // and when the file loads.\n c.drop(handleFile, handleDrop);\n\n 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.');\n}\n\n// Display the image when it loads.\nfunction handleFile(file) {\n // Remove the current image, if any.\n if (img) {\n img.remove();\n }\n\n // Create an img element with the dropped file.\n img = createImg(file.data, '');\n img.hide();\n\n // Draw the image.\n image(img, 0, 0, width, height);\n}\n\n// Display the file's name when it loads.\nfunction handleDrop(event) {\n // Remove current paragraph, if any.\n if (msg) {\n msg.remove();\n }\n\n // Use event to get the drop target's id.\n let id = event.target.id;\n\n // Write the canvas' id beneath it.\n msg = createP(id);\n msg.position(0, 100);\n\n // Set the font color randomly for each drop.\n let c = random(['red', 'green', 'blue']);\n msg.style('color', c);\n msg.style('font-size', '12px');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
- },
- {
- "file": "src/webgl/material.js",
- "line": 682,
- "description": "<p>Sets the <a href=\"#/p5.Shader\">p5.Shader</a> object to apply while drawing.</p>\n<p>Shaders are programs that run on the graphics processing unit (GPU). They\ncan process many pixels or vertices at the same time, making them fast for\nmany graphics tasks. They’re written in a language called\n<a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\" target=\"_blank\">GLSL</a>\nand run along with the rest of the code in a sketch.\n<a href=\"#/p5.Shader\">p5.Shader</a> objects can be created using the\n<a href=\"#/p5/createShader\">createShader()</a> and\n<a href=\"#/p5/loadShader\">loadShader()</a> functions.</p>\n<p>The parameter, <code>s</code>, is the <a href=\"#/p5.Shader\">p5.Shader</a> object to\napply. For example, calling <code>shader(myShader)</code> applies <code>myShader</code> to\nprocess each pixel on the canvas. The shader will be used for:</p>\n<ul>\n<li>Fills when a texture is enabled if it includes a uniform <code>sampler2D</code>.</li>\n<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>\n<li>Fills whenever there are no lights or textures.</li>\n<li>Strokes if it includes the uniform <code>uStrokeWeight</code>.</li>\n</ul>\n<p>The source code from a <a href=\"#/p5.Shader\">p5.Shader</a> object's\nfragment and vertex shaders will be compiled the first time it's passed to\n<code>shader()</code>. See\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/compileShader\" target=\"_blank\">MDN</a>\nfor more information about compiling shaders.</p>\n<p>Calling <a href=\"#/p5/resetShader\">resetShader()</a> restores a sketch’s\ndefault shaders.</p>\n<p>Note: Shaders can only be used in WebGL mode.</p>\n",
- "itemtype": "method",
- "name": "shader",
- "chainable": 1,
- "params": [
+ "overloads": [
{
- "name": "s",
- "description": "<p><a href=\"#/p5.Shader\">p5.Shader</a> object\n to apply.</p>\n",
- "type": "p5.Shader"
+ "params": [
+ {
+ "name": "callback",
+ "description": "called when a file loads. Called once for each file dropped.",
+ "type": "Function"
+ },
+ {
+ "name": "fxn",
+ "description": "called once when any files are dropped.",
+ "optional": 1,
+ "type": "Function"
+ }
+ ]
}
],
- "example": [
- "\n<div modernizr='webgl'>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let shaderProgram = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(shaderProgram);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('assets/shader.vert', 'assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet redGreen;\nlet orangeBlue;\nlet showRedGreen = false;\n\n// Load the shader and create two separate p5.Shader objects.\nfunction preload() {\n redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Initialize the redGreen shader.\n shader(redGreen);\n\n // Set the redGreen shader's center and background color.\n redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);\n redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);\n\n // Initialize the orangeBlue shader.\n shader(orangeBlue);\n\n // Set the orangeBlue shader's center and background color.\n orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);\n orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);\n\n describe(\n 'The scene toggles between two circular gradients when the user double-clicks. An orange and blue gradient vertically, and red and green gradient moves horizontally.'\n );\n}\n\nfunction draw() {\n // Update the offset values for each shader.\n // Move orangeBlue vertically.\n // Move redGreen horizontally.\n orangeBlue.setUniform('offset', [0, sin(frameCount * 0.01) + 1]);\n redGreen.setUniform('offset', [sin(frameCount * 0.01), 1]);\n\n if (showRedGreen === true) {\n shader(redGreen);\n } else {\n shader(orangeBlue);\n }\n\n // Style the drawing surface.\n noStroke();\n\n // Add a quad as a drawing surface.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n// Toggle between shaders when the user double-clicks.\nfunction doubleClicked() {\n showRedGreen = !showRedGreen;\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 886,
- "description": "<p>Get the default shader used with lights, materials,\nand textures.</p>\n<p>You can call <a href=\"#/p5.Shader/modify\"><code>baseMaterialShader().modify()</code></a>\nand change any of the following hooks:</p>\n<table>\n<tr><th>Hook</th><th>Description</th></tr>\n<tr><td>\n\n<p><code>void beforeVertex</code></p>\n</td><td>\n\n<p>Called at the start of the vertex shader.</p>\n</td></tr>\n<tr><td>\n\n<p><code>vec3 getLocalPosition</code></p>\n</td><td>\n\n<p>Update the position of vertices before transforms are applied. It takes in <code>vec3 position</code> and must return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>vec3 getWorldPosition</code></p>\n</td><td>\n\n<p>Update the position of vertices after transforms are applied. It takes in <code>vec3 position</code> and pust return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>vec3 getLocalNormal</code></p>\n</td><td>\n\n<p>Update the normal before transforms are applied. It takes in <code>vec3 normal</code> and must return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>vec3 getWorldNormal</code></p>\n</td><td>\n\n<p>Update the normal after transforms are applied. It takes in <code>vec3 normal</code> and must return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>vec2 getUV</code></p>\n</td><td>\n\n<p>Update the texture coordinates. It takes in <code>vec2 uv</code> and must return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>vec4 getVertexColor</code></p>\n</td><td>\n\n<p>Update the color of each vertex. It takes in a <code>vec4 color</code> and must return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>void afterVertex</code></p>\n</td><td>\n\n<p>Called at the end of the vertex shader.</p>\n</td></tr>\n<tr><td>\n\n<p><code>void beforeFragment</code></p>\n</td><td>\n\n<p>Called at the start of the fragment shader.</p>\n</td></tr>\n<tr><td>\n\n<p><code>Inputs getPixelInputs</code></p>\n</td><td>\n\n<p>Update the per-pixel inputs of the material. It takes in an <code>Inputs</code> struct, which includes:</p>\n<ul>\n<li><code>vec3 normal</code>, the direction pointing out of the surface</li>\n<li><code>vec2 texCoord</code>, a vector where <code>x</code> and <code>y</code> are between 0 and 1 describing the spot on a texture the pixel is mapped to, as a fraction of the texture size</li>\n<li><code>vec3 ambientLight</code>, the ambient light color on the vertex</li>\n<li><code>vec4 color</code>, the base material color of the pixel</li>\n<li><code>vec3 ambientMaterial</code>, the color of the pixel when affected by ambient light</li>\n<li><code>vec3 specularMaterial</code>, the color of the pixel when reflecting specular highlights</li>\n<li><code>vec3 emissiveMaterial</code>, the light color emitted by the pixel</li>\n<li><code>float shininess</code>, a number representing how sharp specular reflections should be, from 1 to infinity</li>\n<li><code>float metalness</code>, a number representing how mirrorlike the material should be, between 0 and 1\nThe struct can be modified and returned.</td></tr>\n<tr><td></li>\n</ul>\n<p><code>vec4 combineColors</code></p>\n</td><td>\n\n<p>Take in a <code>ColorComponents</code> struct containing all the different components of light, and combining them into\na single final color. The struct contains:</p>\n<ul>\n<li><code>vec3 baseColor</code>, the base color of the pixel</li>\n<li><code>float opacity</code>, the opacity between 0 and 1 that it should be drawn at</li>\n<li><code>vec3 ambientColor</code>, the color of the pixel when affected by ambient light</li>\n<li><code>vec3 specularColor</code>, the color of the pixel when affected by specular reflections</li>\n<li><code>vec3 diffuse</code>, the amount of diffused light hitting the pixel</li>\n<li><code>vec3 ambient</code>, the amount of ambient light hitting the pixel</li>\n<li><code>vec3 specular</code>, the amount of specular reflection hitting the pixel</li>\n<li><code>vec3 emissive</code>, the amount of light emitted by the pixel</li>\n</ul>\n</td></tr>\n<tr><td>\n\n<p><code>vec4 getFinalColor</code></p>\n</td><td>\n\n<p>Update the final color after mixing. It takes in a <code>vec4 color</code> and must return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>void afterFragment</code></p>\n</td><td>\n\n<p>Called at the end of the fragment shader.</p>\n</td></tr>\n</table>\n\n<p>Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>\n<p>Call <code>baseMaterialShader().inspectHooks()</code> to see all the possible hooks and\ntheir default implementations.</p>\n",
+ "name": "draggable",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.Element.js",
+ "line": 2301,
"itemtype": "method",
- "name": "baseMaterialShader",
- "beta": 1,
- "return": {
- "description": "The material shader",
- "type": "p5.Shader"
- },
+ "chainable": 1,
+ "description": "<p>Makes the element draggable.</p>\n<p>The parameter, <code>elmnt</code>, is optional. If another\n<a href=\"#/p5.Element\">p5.Element</a> object is passed, as in\n<code>myElement.draggable(otherElement)</code>, the other element will become draggable.</p>\n",
"example": [
- "\n<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20.0 * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n lights();\n noStroke();\n fill('red');\n sphere(50);\n}\n</code>\n</div>",
- "\n<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n declarations: 'vec3 myNormal;',\n 'Inputs getPixelInputs': `(Inputs inputs) {\n myNormal = inputs.normal;\n return inputs;\n }`,\n 'vec4 getFinalColor': `(vec4 color) {\n return mix(\n vec4(1.0, 1.0, 1.0, 1.0),\n color,\n abs(dot(myNormal, vec3(0.0, 0.0, 1.0)))\n );\n }`\n });\n}\n\nfunction draw() {\n background(255);\n rotateY(millis() * 0.001);\n shader(myShader);\n lights();\n noStroke();\n fill('red');\n torus(30);\n}\n</code>\n</div>",
- "\n<div modernizr='webgl'>\n<code>\nlet myShader;\nlet environment;\n\nfunction preload() {\n environment = loadImage('assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n 'Inputs getPixelInputs': `(Inputs inputs) {\n float factor =\n sin(\n inputs.texCoord.x * ${TWO_PI} +\n inputs.texCoord.y * ${TWO_PI}\n ) * 0.4 + 0.5;\n inputs.shininess = mix(1., 100., factor);\n inputs.metalness = factor;\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n panorama(environment);\n ambientLight(100);\n imageLight(environment);\n rotateY(millis() * 0.001);\n shader(myShader);\n noStroke();\n fill(255);\n specularMaterial(150);\n sphere(50);\n}\n</code>\n</div>",
- "\n<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n 'Inputs getPixelInputs': `(Inputs inputs) {\n vec3 newNormal = inputs.normal;\n // Simple bump mapping: adjust the normal based on position\n newNormal.x += 0.2 * sin(\n sin(\n inputs.texCoord.y * ${TWO_PI} * 10.0 +\n inputs.texCoord.x * ${TWO_PI} * 25.0\n )\n );\n newNormal.y += 0.2 * sin(\n sin(\n inputs.texCoord.x * ${TWO_PI} * 10.0 +\n inputs.texCoord.y * ${TWO_PI} * 25.0\n )\n );\n inputs.normal = normalize(newNormal);\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n ambientLight(150);\n pointLight(\n 255, 255, 255,\n 100*cos(frameCount*0.04), -50, 100*sin(frameCount*0.04)\n );\n noStroke();\n fill('red');\n shininess(200);\n specularMaterial(255);\n sphere(50);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet stickyNote;\nlet textInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element and style it.\n stickyNote = createDiv('Note');\n stickyNote.position(5, 5);\n stickyNote.size(80, 20);\n stickyNote.style('font-size', '16px');\n stickyNote.style('font-family', 'Comic Sans MS');\n stickyNote.style('background', 'orchid');\n stickyNote.style('padding', '5px');\n\n // Make the note draggable.\n stickyNote.draggable();\n\n // Create a panel div and style it.\n let panel = createDiv('');\n panel.position(5, 40);\n panel.size(80, 50);\n panel.style('background', 'orchid');\n panel.style('font-size', '16px');\n panel.style('padding', '5px');\n panel.style('text-align', 'center');\n\n // Make the panel draggable.\n panel.draggable();\n\n // Create a text input and style it.\n textInput = createInput('Note');\n textInput.size(70);\n\n // Add the input to the panel.\n textInput.parent(panel);\n\n // Call handleInput() when text is input.\n textInput.input(handleInput);\n\n describe(\n 'A gray square with two purple rectangles that move when dragged. The top rectangle displays the text that is typed into the bottom rectangle.'\n );\n}\n\n// Update stickyNote's HTML when text is input.\nfunction handleInput() {\n stickyNote.html(textInput.value());\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
- },
- {
- "file": "src/webgl/material.js",
- "line": 1197,
- "description": "<p>Get the shader used by <a href=\"#/p5/normalMaterial\"><code>normalMaterial()</code></a>.</p>\n<p>You can call <a href=\"#/p5.Shader/modify\"><code>baseNormalShader().modify()</code></a>\nand change any of the following hooks:</p>\n<table>\n<thead>\n<tr>\n<th>Hook</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>void beforeVertex</code></td>\n<td>Called at the start of the vertex shader.</td>\n</tr>\n<tr>\n<td><code>vec3 getLocalPosition</code></td>\n<td>Update the position of vertices before transforms are applied. It takes in <code>vec3 position</code> and must return a modified version.</td>\n</tr>\n<tr>\n<td><code>vec3 getWorldPosition</code></td>\n<td>Update the position of vertices after transforms are applied. It takes in <code>vec3 position</code> and pust return a modified version.</td>\n</tr>\n<tr>\n<td><code>vec3 getLocalNormal</code></td>\n<td>Update the normal before transforms are applied. It takes in <code>vec3 normal</code> and must return a modified version.</td>\n</tr>\n<tr>\n<td><code>vec3 getWorldNormal</code></td>\n<td>Update the normal after transforms are applied. It takes in <code>vec3 normal</code> and must return a modified version.</td>\n</tr>\n<tr>\n<td><code>vec2 getUV</code></td>\n<td>Update the texture coordinates. It takes in <code>vec2 uv</code> and must return a modified version.</td>\n</tr>\n<tr>\n<td><code>vec4 getVertexColor</code></td>\n<td>Update the color of each vertex. It takes in a <code>vec4 color</code> and must return a modified version.</td>\n</tr>\n<tr>\n<td><code>void afterVertex</code></td>\n<td>Called at the end of the vertex shader.</td>\n</tr>\n<tr>\n<td><code>void beforeFragment</code></td>\n<td>Called at the start of the fragment shader.</td>\n</tr>\n<tr>\n<td><code>vec4 getFinalColor</code></td>\n<td>Update the final color after mixing. It takes in a <code>vec4 color</code> and must return a modified version.</td>\n</tr>\n<tr>\n<td><code>void afterFragment</code></td>\n<td>Called at the end of the fragment shader.</td>\n</tr>\n</tbody></table>\n<p>Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>\n<p>Call <code>baseNormalShader().inspectHooks()</code> to see all the possible hooks and\ntheir default implementations.</p>\n",
- "itemtype": "method",
- "name": "baseNormalShader",
- "beta": 1,
- "return": {
- "description": "The `normalMaterial` shader",
- "type": "p5.Shader"
- },
- "example": [
- "\n<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseNormalShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n noStroke();\n sphere(50);\n}\n</code>\n</div>",
- "\n<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseNormalShader().modify({\n 'vec3 getWorldNormal': '(vec3 normal) { return abs(normal); }',\n 'vec4 getFinalColor': `(vec4 color) {\n // Map the r, g, and b values of the old normal to new colors\n // instead of just red, green, and blue:\n vec3 newColor =\n color.r * vec3(89.0, 240.0, 232.0) / 255.0 +\n color.g * vec3(240.0, 237.0, 89.0) / 255.0 +\n color.b * vec3(205.0, 55.0, 222.0) / 255.0;\n newColor = newColor / (color.r + color.g + color.b);\n return vec4(newColor, 1.0) * color.a;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n noStroke();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.015);\n box(100);\n}\n</code>\n</div>"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "elmnt",
+ "description": "another <a href=\"#/p5.Element\">p5.Element</a>.",
+ "optional": 1,
+ "type": "p5.Element"
+ }
+ ]
+ }
],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
+ "class": "p5.Element",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 1292,
- "description": "<p>Get the shader used when no lights or materials are applied.</p>\n<p>You can call <a href=\"#/p5.Shader/modify\"><code>baseColorShader().modify()</code></a>\nand change any of the following hooks:</p>\n<table>\n<thead>\n<tr>\n<th>Hook</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>void beforeVertex</code></td>\n<td>Called at the start of the vertex shader.</td>\n</tr>\n<tr>\n<td><code>vec3 getLocalPosition</code></td>\n<td>Update the position of vertices before transforms are applied. It takes in <code>vec3 position</code> and must return a modified version.</td>\n</tr>\n<tr>\n<td><code>vec3 getWorldPosition</code></td>\n<td>Update the position of vertices after transforms are applied. It takes in <code>vec3 position</code> and pust return a modified version.</td>\n</tr>\n<tr>\n<td><code>vec3 getLocalNormal</code></td>\n<td>Update the normal before transforms are applied. It takes in <code>vec3 normal</code> and must return a modified version.</td>\n</tr>\n<tr>\n<td><code>vec3 getWorldNormal</code></td>\n<td>Update the normal after transforms are applied. It takes in <code>vec3 normal</code> and must return a modified version.</td>\n</tr>\n<tr>\n<td><code>vec2 getUV</code></td>\n<td>Update the texture coordinates. It takes in <code>vec2 uv</code> and must return a modified version.</td>\n</tr>\n<tr>\n<td><code>vec4 getVertexColor</code></td>\n<td>Update the color of each vertex. It takes in a <code>vec4 color</code> and must return a modified version.</td>\n</tr>\n<tr>\n<td><code>void afterVertex</code></td>\n<td>Called at the end of the vertex shader.</td>\n</tr>\n<tr>\n<td><code>void beforeFragment</code></td>\n<td>Called at the start of the fragment shader.</td>\n</tr>\n<tr>\n<td><code>vec4 getFinalColor</code></td>\n<td>Update the final color after mixing. It takes in a <code>vec4 color</code> and must return a modified version.</td>\n</tr>\n<tr>\n<td><code>void afterFragment</code></td>\n<td>Called at the end of the fragment shader.</td>\n</tr>\n</tbody></table>\n<p>Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>\n<p>Call <code>baseColorShader().inspectHooks()</code> to see all the possible hooks and\ntheir default implementations.</p>\n",
+ "name": "play",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 93,
"itemtype": "method",
- "name": "baseColorShader",
- "beta": 1,
- "return": {
- "description": "The color shader",
- "type": "p5.Shader"
- },
+ "chainable": 1,
+ "description": "Plays audio or video from a media element.",
"example": [
- "\n<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseColorShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n noStroke();\n fill('red');\n circle(0, 0, 50);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet beat;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display a message.\n text('Click to play', 50, 50);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. A beat plays when the user clicks the square.');\n}\n\n// Play the beat when the user presses the mouse.\nfunction mousePressed() {\n beat.play();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 1355,
- "description": "<p>Get the shader used when drawing the strokes of shapes.</p>\n<p>You can call <a href=\"#/p5.Shader/modify\"><code>baseStrokeShader().modify()</code></a>\nand change any of the following hooks:</p>\n<table>\n<tr><th>Hook</th><th>Description</th></tr>\n<tr><td>\n\n<p><code>void beforeVertex</code></p>\n</td><td>\n\n<p>Called at the start of the vertex shader.</p>\n</td></tr>\n<tr><td>\n\n<p><code>vec3 getLocalPosition</code></p>\n</td><td>\n\n<p>Update the position of vertices before transforms are applied. It takes in <code>vec3 position</code> and must return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>vec3 getWorldPosition</code></p>\n</td><td>\n\n<p>Update the position of vertices after transforms are applied. It takes in <code>vec3 position</code> and pust return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>float getStrokeWeight</code></p>\n</td><td>\n\n<p>Update the stroke weight. It takes in <code>float weight</code> and pust return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>vec2 getLineCenter</code></p>\n</td><td>\n\n<p>Update the center of the line. It takes in <code>vec2 center</code> and must return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>vec2 getLinePosition</code></p>\n</td><td>\n\n<p>Update the position of each vertex on the edge of the line. It takes in <code>vec2 position</code> and must return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>vec4 getVertexColor</code></p>\n</td><td>\n\n<p>Update the color of each vertex. It takes in a <code>vec4 color</code> and must return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>void afterVertex</code></p>\n</td><td>\n\n<p>Called at the end of the vertex shader.</p>\n</td></tr>\n<tr><td>\n\n<p><code>void beforeFragment</code></p>\n</td><td>\n\n<p>Called at the start of the fragment shader.</p>\n</td></tr>\n<tr><td>\n\n<p><code>Inputs getPixelInputs</code></p>\n</td><td>\n\n<p>Update the inputs to the shader. It takes in a struct <code>Inputs inputs</code>, which includes:</p>\n<ul>\n<li><code>vec4 color</code>, the color of the stroke</li>\n<li><code>vec2 tangent</code>, the direction of the stroke in screen space</li>\n<li><code>vec2 center</code>, the coordinate of the center of the stroke in screen space p5.js pixels</li>\n<li><code>vec2 position</code>, the coordinate of the current pixel in screen space p5.js pixels</li>\n<li><code>float strokeWeight</code>, the thickness of the stroke in p5.js pixels</li>\n</ul>\n</td></tr>\n<tr><td>\n\n<p><code>bool shouldDiscard</code></p>\n</td><td>\n\n<p>Caps and joins are made by discarded pixels in the fragment shader to carve away unwanted areas. Use this to change this logic. It takes in a <code>bool willDiscard</code> and must return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>vec4 getFinalColor</code></p>\n</td><td>\n\n<p>Update the final color after mixing. It takes in a <code>vec4 color</code> and must return a modified version.</p>\n</td></tr>\n<tr><td>\n\n<p><code>void afterFragment</code></p>\n</td><td>\n\n<p>Called at the end of the fragment shader.</p>\n</td></tr>\n</table>\n\n<p>Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>\n<p>Call <code>baseStrokeShader().inspectHooks()</code> to see all the possible hooks and\ntheir default implementations.</p>\n",
+ "name": "stop",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 175,
"itemtype": "method",
- "name": "baseStrokeShader",
- "beta": 1,
- "return": {
- "description": "The stroke shader",
- "type": "p5.Shader"
- },
+ "chainable": 1,
+ "description": "<p>Stops a media element and sets its current time to 0.</p>\n<p>Calling <code>media.play()</code> will restart playing audio/video from the beginning.</p>\n",
"example": [
- "\n<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseStrokeShader().modify({\n 'Inputs getPixelInputs': `(Inputs inputs) {\n float opacity = 1.0 - smoothstep(\n 0.0,\n 15.0,\n length(inputs.position - inputs.center)\n );\n inputs.color *= opacity;\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n strokeWeight(30);\n line(\n -width/3,\n sin(millis()*0.001) * height/4,\n width/3,\n sin(millis()*0.001 + 1) * height/4\n );\n}\n</code>\n</div>",
- "\n<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseStrokeShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n declarations: 'vec3 myPosition;',\n 'vec3 getWorldPosition': `(vec3 pos) {\n myPosition = pos;\n return pos;\n }`,\n 'float getStrokeWeight': `(float w) {\n // Add a somewhat random offset to the weight\n // that varies based on position and time\n float scale = 0.8 + 0.2*sin(10.0 * sin(\n floor(time/250.) +\n myPosition.x*0.01 +\n myPosition.y*0.01\n ));\n return w * scale;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n myShader.setUniform('time', millis());\n strokeWeight(10);\n beginShape();\n for (let i = 0; i <= 50; i++) {\n let r = map(i, 0, 50, 0, width/3);\n let x = r*cos(i*0.2);\n let y = r*sin(i*0.2);\n vertex(x, y);\n }\n endShape();\n}\n</code>\n</div>",
- "\n<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseStrokeShader().modify({\n 'float random': `(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1031);\n p3 += dot(p3, p3.yzx + 33.33);\n return fract((p3.x + p3.y) * p3.z);\n }`,\n 'Inputs getPixelInputs': `(Inputs inputs) {\n // Replace alpha in the color with dithering by\n // randomly setting pixel colors to 0 based on opacity\n float a = inputs.color.a;\n inputs.color.a = 1.0;\n inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0;\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n strokeWeight(10);\n beginShape();\n for (let i = 0; i <= 50; i++) {\n stroke(\n 0,\n 255\n * map(i, 0, 20, 0, 1, true)\n * map(i, 30, 50, 1, 0, true)\n );\n vertex(\n map(i, 0, 50, -1, 1) * width/3,\n 50 * sin(i/10 + frameCount/100)\n );\n }\n endShape();\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet beat;\nlet isStopped = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to start\" written in black on a gray background. The beat starts or stops when the user presses the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isStopped === true) {\n text('Click to start', 50, 50);\n } else {\n text('Click to stop', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isStopped === true) {\n // If the beat is stopped, play it.\n beat.play();\n isStopped = false;\n } else {\n // If the beat is playing, stop it.\n beat.stop();\n isStopped = true;\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 1628,
- "description": "<p>Restores the default shaders.</p>\n<p><code>resetShader()</code> deactivates any shaders previously applied by\n<a href=\"#/p5/shader\">shader()</a>.</p>\n<p>Note: Shaders can only be used in WebGL mode.</p>\n",
+ "name": "pause",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 235,
"itemtype": "method",
- "name": "resetShader",
"chainable": 1,
+ "description": "<p>Pauses a media element.</p>\n<p>Calling <code>media.play()</code> will resume playing audio/video from the moment it paused.</p>\n",
"example": [
- "\n<div>\n<code>\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nuniform mat4 uProjectionMatrix;\nuniform mat4 uModelViewMatrix;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 position = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * position;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n describe(\n 'Two rotating cubes on a gray background. The left one has a blue-purple gradient on each face. The right one is red.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a box using the p5.Shader.\n // shader() sets the active shader to myShader.\n shader(myShader);\n push();\n translate(-25, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(width / 4);\n pop();\n\n // Draw a box using the default fill shader.\n // resetShader() restores the default fill shader.\n resetShader();\n fill(255, 0, 0);\n push();\n translate(25, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(width / 4);\n pop();\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet beat;\nlet isPaused = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n describe('The text \"Click to play\" written in black on a gray background. The beat plays or pauses when the user clicks the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isPaused === true) {\n text('Click to play', 50, 50);\n } else {\n text('Click to pause', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isPaused === true) {\n // If the beat is paused,\n // play it.\n beat.play();\n isPaused = false;\n } else {\n // If the beat is playing,\n // pause it.\n beat.pause();\n isPaused = true;\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
- },
- {
- "file": "src/webgl/material.js",
- "line": 1716,
- "description": "<p>Sets the texture that will be used on shapes.</p>\n<p>A texture is like a skin that wraps around a shape. <code>texture()</code> works with\nbuilt-in shapes, such as <a href=\"#/p5/square\">square()</a> and\n<a href=\"#/p5/sphere\">sphere()</a>, and custom shapes created with\nfunctions such as <a href=\"#/p5/buildGeometry\">buildGeometry()</a>. To\ntexture a geometry created with <a href=\"#/p5/beginShape\">beginShape()</a>,\nuv coordinates must be passed to each\n<a href=\"#/p5/vertex\">vertex()</a> call.</p>\n<p>The parameter, <code>tex</code>, is the texture to apply. <code>texture()</code> can use a range\nof sources including images, videos, and offscreen renderers such as\n<a href=\"#/p5.Graphics\">p5.Graphics</a> and\n<a href=\"#/p5.Framebuffer\">p5.Framebuffer</a> objects.</p>\n<p>To texture a geometry created with <a href=\"#/p5/beginShape\">beginShape()</a>,\nyou will need to specify uv coordinates in <a href=\"#/p5/vertex\">vertex()</a>.</p>\n<p>Note: <code>texture()</code> can only be used in WebGL mode.</p>\n",
- "itemtype": "method",
- "name": "texture",
- "params": [
+ "overloads": [
{
- "name": "tex",
- "description": "<p>media to use as the texture.</p>\n",
- "type": "p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"
+ "params": []
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A spinning cube with an image of a ceiling on each face.');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the x-, y-, and z-axes.\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the box.\n box(50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Graphics object.\n pg = createGraphics(100, 100);\n\n // Draw a circle to the p5.Graphics object.\n pg.background(200);\n pg.circle(50, 50, 30);\n\n describe('A spinning cube with circle at the center of each face.');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the x-, y-, and z-axes.\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Apply the p5.Graphics object as a texture.\n texture(pg);\n\n // Draw the box.\n box(50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet vid;\n\n// Load a video and create a p5.MediaElement object.\nfunction preload() {\n vid = createVideo('assets/fingers.mov');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw the rectangle.\n rect(-40, -40, 80, 80);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet vid;\n\n// Load a video and create a p5.MediaElement object.\nfunction preload() {\n vid = createVideo('assets/fingers.mov');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw a custom shape using uv coordinates.\n beginShape();\n vertex(-40, -40, 0, 0);\n vertex(40, -40, 1, 0);\n vertex(40, 40, 1, 1);\n vertex(-40, 40, 0, 1);\n endShape();\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 1903,
- "description": "<p>Changes the coordinate system used for textures when they’re applied to\ncustom shapes.</p>\n<p>In order for <a href=\"#/p5/texture\">texture()</a> to work, a shape needs a\nway to map the points on its surface to the pixels in an image. Built-in\nshapes such as <a href=\"#/p5/rect\">rect()</a> and\n<a href=\"#/p5/box\">box()</a> already have these texture mappings based on\ntheir vertices. Custom shapes created with\n<a href=\"#/p5/vertex\">vertex()</a> require texture mappings to be passed as\nuv coordinates.</p>\n<p>Each call to <a href=\"#/p5/vertex\">vertex()</a> must include 5 arguments,\nas in <code>vertex(x, y, z, u, v)</code>, to map the vertex at coordinates <code>(x, y, z)</code>\nto the pixel at coordinates <code>(u, v)</code> within an image. For example, the\ncorners of a rectangular image are mapped to the corners of a rectangle by default:</p>\n<code>\n// Apply the image as a texture.\ntexture(img);\n\n<p>// Draw the rectangle.\nrect(0, 0, 30, 50);\n</code></p>\n<p>If the image in the code snippet above has dimensions of 300 x 500 pixels,\nthe same result could be achieved as follows:</p>\n<code>\n// Apply the image as a texture.\ntexture(img);\n\n<p>// Draw the rectangle.\nbeginShape();</p>\n<p>// Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);</p>\n<p>// Top-right.\n// u: 300, v: 0\nvertex(30, 0, 0, 300, 0);</p>\n<p>// Bottom-right.\n// u: 300, v: 500\nvertex(30, 50, 0, 300, 500);</p>\n<p>// Bottom-left.\n// u: 0, v: 500\nvertex(0, 50, 0, 0, 500);</p>\n<p>endShape();\n</code></p>\n<p><code>textureMode()</code> changes the coordinate system for uv coordinates.</p>\n<p>The parameter, <code>mode</code>, accepts two possible constants. If <code>NORMAL</code> is\npassed, as in <code>textureMode(NORMAL)</code>, then the texture’s uv coordinates can\nbe provided in the range 0 to 1 instead of the image’s dimensions. This can\nbe helpful for using the same code for multiple images of different sizes.\nFor example, the code snippet above could be rewritten as follows:</p>\n<code>\n// Set the texture mode to use normalized coordinates.\ntextureMode(NORMAL);\n\n<p>// Apply the image as a texture.\ntexture(img);</p>\n<p>// Draw the rectangle.\nbeginShape();</p>\n<p>// Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);</p>\n<p>// Top-right.\n// u: 1, v: 0\nvertex(30, 0, 0, 1, 0);</p>\n<p>// Bottom-right.\n// u: 1, v: 1\nvertex(30, 50, 0, 1, 1);</p>\n<p>// Bottom-left.\n// u: 0, v: 1\nvertex(0, 50, 0, 0, 1);</p>\n<p>endShape();\n</code></p>\n<p>By default, <code>mode</code> is <code>IMAGE</code>, which scales uv coordinates to the\ndimensions of the image. Calling <code>textureMode(IMAGE)</code> applies the default.</p>\n<p>Note: <code>textureMode()</code> can only be used in WebGL mode.</p>\n",
+ "name": "loop",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 292,
"itemtype": "method",
- "name": "textureMode",
- "params": [
+ "chainable": 1,
+ "description": "Plays the audio/video repeatedly in a loop.",
+ "example": [
+ "<div>\n<code>\nlet beat;\nlet isLooping = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isLooping === true) {\n text('Click to stop', 50, 50);\n } else {\n text('Click to loop', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isLooping === true) {\n // If the beat is looping, stop it.\n beat.stop();\n isLooping = false;\n } else {\n // If the beat is stopped, loop it.\n beat.loop();\n isLooping = true;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "mode",
- "description": "<p>either IMAGE or NORMAL.</p>\n",
- "type": "Constant"
+ "params": []
}
],
- "example": [
- "\n<div>\n<code>\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('An image of a ceiling against a black background.');\n}\n\nfunction draw() {\n background(0);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the custom shape.\n // Use the image's width and height as uv coordinates.\n beginShape();\n vertex(-30, -30, 0, 0);\n vertex(30, -30, img.width, 0);\n vertex(30, 30, img.width, img.height);\n vertex(-30, 30, 0, img.height);\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('An image of a ceiling against a black background.');\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the custom shape.\n // Use normalized uv coordinates.\n beginShape();\n vertex(-30, -30, 0, 0);\n vertex(30, -30, 1, 0);\n vertex(30, 30, 1, 1);\n vertex(-30, 30, 0, 1);\n endShape();\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 2082,
- "description": "<p>Changes the way textures behave when a shape’s uv coordinates go beyond the\ntexture.</p>\n<p>In order for <a href=\"#/p5/texture\">texture()</a> to work, a shape needs a\nway to map the points on its surface to the pixels in an image. Built-in\nshapes such as <a href=\"#/p5/rect\">rect()</a> and\n<a href=\"#/p5/box\">box()</a> already have these texture mappings based on\ntheir vertices. Custom shapes created with\n<a href=\"#/p5/vertex\">vertex()</a> require texture mappings to be passed as\nuv coordinates.</p>\n<p>Each call to <a href=\"#/p5/vertex\">vertex()</a> must include 5 arguments,\nas in <code>vertex(x, y, z, u, v)</code>, to map the vertex at coordinates <code>(x, y, z)</code>\nto the pixel at coordinates <code>(u, v)</code> within an image. For example, the\ncorners of a rectangular image are mapped to the corners of a rectangle by default:</p>\n<pre><code class=\"language-js\">// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nrect(0, 0, 30, 50);\n</code></pre>\n<p>If the image in the code snippet above has dimensions of 300 x 500 pixels,\nthe same result could be achieved as follows:</p>\n<pre><code class=\"language-js\">// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nbeginShape();\n\n// Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);\n\n// Top-right.\n// u: 300, v: 0\nvertex(30, 0, 0, 300, 0);\n\n// Bottom-right.\n// u: 300, v: 500\nvertex(30, 50, 0, 300, 500);\n\n// Bottom-left.\n// u: 0, v: 500\nvertex(0, 50, 0, 0, 500);\n\nendShape();\n</code></pre>\n<p><code>textureWrap()</code> controls how textures behave when their uv's go beyond the\ntexture. Doing so can produce interesting visual effects such as tiling.\nFor example, the custom shape above could have u-coordinates are greater\nthan the image’s width:</p>\n<pre><code class=\"language-js\">// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nbeginShape();\nvertex(0, 0, 0, 0, 0);\n\n// Top-right.\n// u: 600\nvertex(30, 0, 0, 600, 0);\n\n// Bottom-right.\n// u: 600\nvertex(30, 50, 0, 600, 500);\n\nvertex(0, 50, 0, 0, 500);\nendShape();\n</code></pre>\n<p>The u-coordinates of 600 are greater than the texture image’s width of 300.\nThis creates interesting possibilities.</p>\n<p>The first parameter, <code>wrapX</code>, accepts three possible constants. If <code>CLAMP</code>\nis passed, as in <code>textureWrap(CLAMP)</code>, the pixels at the edge of the\ntexture will extend to the shape’s edges. If <code>REPEAT</code> is passed, as in\n<code>textureWrap(REPEAT)</code>, the texture will tile repeatedly until reaching the\nshape’s edges. If <code>MIRROR</code> is passed, as in <code>textureWrap(MIRROR)</code>, the\ntexture will tile repeatedly until reaching the shape’s edges, flipping\nits orientation between tiles. By default, textures <code>CLAMP</code>.</p>\n<p>The second parameter, <code>wrapY</code>, is optional. It accepts the same three\nconstants, <code>CLAMP</code>, <code>REPEAT</code>, and <code>MIRROR</code>. If one of these constants is\npassed, as in <code>textureWRAP(MIRROR, REPEAT)</code>, then the texture will <code>MIRROR</code>\nhorizontally and <code>REPEAT</code> vertically. By default, <code>wrapY</code> will be set to\nthe same value as <code>wrapX</code>.</p>\n<p>Note: <code>textureWrap()</code> can only be used in WebGL mode.</p>\n",
+ "name": "noLoop",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 351,
"itemtype": "method",
- "name": "textureWrap",
- "params": [
- {
- "name": "wrapX",
- "description": "<p>either CLAMP, REPEAT, or MIRROR</p>\n",
- "type": "Constant"
- },
+ "chainable": 1,
+ "description": "<p>Stops the audio/video from playing in a loop.</p>\n<p>The media will stop when it finishes playing.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet beat;\nlet isPlaying = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different instructions based on playback.\n if (isPlaying === true) {\n text('Click to stop', 50, 50);\n } else {\n text('Click to play', 50, 50);\n }\n}\n\n// Adjust playback when the user presses the mouse.\nfunction mousePressed() {\n if (isPlaying === true) {\n // If the beat is playing, stop it.\n beat.stop();\n isPlaying = false;\n } else {\n // If the beat is stopped, play it.\n beat.play();\n isPlaying = true;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "wrapY",
- "description": "<p>either CLAMP, REPEAT, or MIRROR</p>\n",
- "type": "Constant",
- "optional": true
+ "params": []
}
],
- "example": [
- "\n<div>\n<code>\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'An image of a landscape occupies the top-left corner of a square. Its edge colors smear to cover the other thre quarters of the square.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n // Note: CLAMP is the default mode.\n textureWrap(CLAMP);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Four identical images of a landscape arranged in a grid.');\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(REPEAT);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Four identical images of a landscape arranged in a grid. The images are reflected horizontally and vertically, creating a kaleidoscope effect.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(MIRROR);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nfunction preload() {\n img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Four identical images of a landscape arranged in a grid. The top row and bottom row are reflections of each other.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(REPEAT, MIRROR);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 2365,
- "description": "<p>Sets the current material as a normal material.</p>\n<p>A normal material sets surfaces facing the x-axis to red, those facing the\ny-axis to green, and those facing the z-axis to blue. Normal material isn't\naffected by light. It’s often used as a placeholder material when debugging.</p>\n<p>Note: <code>normalMaterial()</code> can only be used in WebGL mode.</p>\n",
+ "name": "autoplay",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 436,
"itemtype": "method",
- "name": "normalMaterial",
"chainable": 1,
+ "description": "<p>Sets the audio/video to play once it's loaded.</p>\n<p>The parameter, <code>shouldAutoplay</code>, is optional. Calling\n<code>media.autoplay()</code> without an argument causes the media to play\nautomatically. If <code>true</code> is passed, as in <code>media.autoplay(true)</code>, the\nmedia will automatically play. If <code>false</code> is passed, as in\n<code>media.autoPlay(false)</code>, it won't play automatically.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor torus drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the torus.\n normalMaterial();\n\n // Draw the torus.\n torus(30);\n}\n</code>\n</div>"
+ "<div class='notest'>\n<code>\nlet video;\n\nfunction setup() {\n noCanvas();\n\n // Call handleVideo() once the video loads.\n video = createVideo('assets/fingers.mov', handleVideo);\n\n describe('A video of fingers walking on a treadmill.');\n}\n\n// Set the video's size and play it.\nfunction handleVideo() {\n video.size(100, 100);\n video.autoplay();\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nfunction setup() {\n noCanvas();\n\n // Load a video, but don't play it automatically.\n let video = createVideo('assets/fingers.mov', handleVideo);\n\n // Play the video when the user clicks on it.\n video.mousePressed(handlePress);\n\n describe('An image of fingers on a treadmill. They start walking when the user double-clicks on them.');\n}\n</code>\n</div>\n\n// Set the video's size and playback mode.\nfunction handleVideo() {\n video.size(100, 100);\n video.autoplay(false);\n}\n\n// Play the video.\nfunction handleClick() {\n video.play();\n}"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "shouldAutoplay",
+ "description": "whether the element should autoplay.",
+ "optional": 1,
+ "type": "Boolean"
+ }
+ ]
+ }
+ ],
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 2416,
- "description": "<p>Sets the ambient color of shapes’ surface material.</p>\n<p>The <code>ambientMaterial()</code> color sets the components of the\n<a href=\"#/p5/ambientLight\">ambientLight()</a> color that shapes will\nreflect. For example, calling <code>ambientMaterial(255, 255, 0)</code> would cause a\nshape to reflect red and green light, but not blue light.</p>\n<p><code>ambientMaterial()</code> can be called three ways with different parameters to\nset the material’s color.</p>\n<p>The first way to call <code>ambientMaterial()</code> has one parameter, <code>gray</code>.\nGrayscale values between 0 and 255, as in <code>ambientMaterial(50)</code>, can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.</p>\n<p>The second way to call <code>ambientMaterial()</code> has one parameter, <code>color</code>. A\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color values, or a\nCSS color string, as in <code>ambientMaterial('magenta')</code>, can be passed to set\nthe material’s color.</p>\n<p>The third way to call <code>ambientMaterial()</code> has three parameters, <code>v1</code>, <code>v2</code>,\nand <code>v3</code>. RGB, HSB, or HSL values, as in <code>ambientMaterial(255, 0, 0)</code>, can\nbe passed to set the material’s colors. Color values will be interpreted\nusing the current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n<p>Note: <code>ambientMaterial()</code> can only be used in WebGL mode.</p>\n",
+ "name": "volume",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 517,
"itemtype": "method",
- "name": "ambientMaterial",
"chainable": 1,
+ "description": "<p>Sets the audio/video volume.</p>\n<p>Calling <code>media.volume()</code> without an argument returns the current volume\nas a number in the range 0 (off) to 1 (maximum).</p>\n<p>The parameter, <code>val</code>, is optional. It's a number that sets the volume\nfrom 0 (off) to 1 (maximum). For example, calling <code>media.volume(0.5)</code>\nsets the volume to half of its maximum.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A magenta cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A purple cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a dark gray ambient material.\n ambientMaterial(150);\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using RGB values.\n ambientMaterial(255, 255, 0);\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using a p5.Color object.\n let c = color(255, 255, 0);\n ambientMaterial(c);\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using a color string.\n ambientMaterial('yellow');\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A yellow cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white ambient light.\n ambientLight(255, 255, 255);\n\n // Add a yellow ambient material using a color string.\n ambientMaterial('yellow');\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Produce a number between 0 and 1.\n let n = 0.5 * sin(frameCount * 0.01) + 0.5;\n\n // Use n to set the volume.\n dragon.volume(n);\n\n // Get the current volume and display it.\n let v = dragon.volume();\n\n // Round v to 1 decimal place for display.\n v = round(v, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the volume.\n text(`Volume: ${v}`, 50, 50);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Material",
"overloads": [
{
- "line": 2416,
- "params": [
- {
- "name": "v1",
- "description": "<p>red or hue value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "<p>green or saturation value in the\n current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "<p>blue, brightness, or lightness value in the\n current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
+ "params": [],
+ "return": {
+ "description": "current volume.",
+ "type": "Number"
+ }
},
{
- "line": 2621,
"params": [
{
- "name": "gray",
- "description": "<p>grayscale value between 0 (black) and 255 (white).</p>\n",
+ "name": "val",
+ "description": "volume between 0.0 and 1.0.",
"type": "Number"
}
- ],
- "chainable": 1
- },
- {
- "line": 2627,
- "params": [
- {
- "name": "color",
- "description": "<p>color as a <a href=\"#/p5.Color\">p5.Color</a> object,\n an array of color values, or a CSS string.</p>\n",
- "type": "p5.Color|Number[]|String"
- }
- ],
- "chainable": 1
+ ]
}
- ]
+ ],
+ "return": {
+ "description": "current volume.",
+ "type": "Number"
+ },
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 2647,
- "description": "<p>Sets the emissive color of shapes’ surface material.</p>\n<p>The <code>emissiveMaterial()</code> color sets a color shapes display at full\nstrength, regardless of lighting. This can give the appearance that a shape\nis glowing. However, emissive materials don’t actually emit light that\ncan affect surrounding objects.</p>\n<p><code>emissiveMaterial()</code> can be called three ways with different parameters to\nset the material’s color.</p>\n<p>The first way to call <code>emissiveMaterial()</code> has one parameter, <code>gray</code>.\nGrayscale values between 0 and 255, as in <code>emissiveMaterial(50)</code>, can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.</p>\n<p>The second way to call <code>emissiveMaterial()</code> has one parameter, <code>color</code>. A\n<a href=\"#/p5.Color\">p5.Color</a> object, an array of color values, or a\nCSS color string, as in <code>emissiveMaterial('magenta')</code>, can be passed to set\nthe material’s color.</p>\n<p>The third way to call <code>emissiveMaterial()</code> has four parameters, <code>v1</code>, <code>v2</code>,\n<code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA, HSBA, or HSLA values can be\npassed to set the material’s colors, as in <code>emissiveMaterial(255, 0, 0)</code> or\n<code>emissiveMaterial(255, 0, 0, 30)</code>. Color values will be interpreted using\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n<p>Note: <code>emissiveMaterial()</code> can only be used in WebGL mode.</p>\n",
+ "name": "speed",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 585,
"itemtype": "method",
- "name": "emissiveMaterial",
"chainable": 1,
+ "description": "<p>Sets the audio/video playback speed.</p>\n<p>The parameter, <code>val</code>, is optional. It's a number that sets the playback\nspeed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2\nplays it at double speed, and so on. -1 plays the media at normal speed\nin reverse.</p>\n<p>Calling <code>media.speed()</code> returns the current speed as a number.</p>\n<p>Note: Not all browsers support backward playback. Even if they do,\nplayback might not be smooth.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white ambient light.\n ambientLight(255, 255, 255);\n\n // Add a red emissive material using RGB values.\n emissiveMaterial(255, 0, 0);\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Produce a number between 0 and 2.\n let n = sin(frameCount * 0.01) + 1;\n\n // Use n to set the playback speed.\n dragon.speed(n);\n\n // Get the current speed and display it.\n let s = dragon.speed();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the speed.\n text(`Speed: ${s}`, 50, 50);\n}\n</code>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Material",
"overloads": [
{
- "line": 2647,
+ "params": [],
+ "return": {
+ "description": "current playback speed.",
+ "type": "Number"
+ }
+ },
+ {
"params": [
{
- "name": "v1",
- "description": "<p>red or hue value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "<p>green or saturation value in the\n current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "<p>blue, brightness, or lightness value in the\n current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
+ "name": "speed",
+ "description": "speed multiplier for playback.",
"type": "Number"
- },
- {
- "name": "alpha",
- "description": "<p>alpha value in the current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 2717,
- "params": [
- {
- "name": "gray",
- "description": "<p>grayscale value between 0 (black) and 255 (white).</p>\n",
- "type": "Number"
- }
- ],
- "chainable": 1
- },
- {
- "line": 2723,
- "params": [
- {
- "name": "color",
- "description": "<p>color as a <a href=\"#/p5.Color\">p5.Color</a> object,\n an array of color values, or a CSS string.</p>\n",
- "type": "p5.Color|Number[]|String"
}
- ],
- "chainable": 1
+ ]
}
- ]
+ ],
+ "return": {
+ "description": "current playback speed.",
+ "type": "Number"
+ },
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 2743,
- "description": "<p>Sets the specular color of shapes’ surface material.</p>\n<p>The <code>specularMaterial()</code> color sets the components of light color that\nglossy coats on shapes will reflect. For example, calling\n<code>specularMaterial(255, 255, 0)</code> would cause a shape to reflect red and\ngreen light, but not blue light.</p>\n<p>Unlike <a href=\"#/p5/ambientMaterial\">ambientMaterial()</a>,\n<code>specularMaterial()</code> will reflect the full color of light sources including\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>,\nand <a href=\"#/p5/spotLight\">spotLight()</a>. This is what gives it shapes\ntheir \"shiny\" appearance. The material’s shininess can be controlled by the\n<a href=\"#/p5/shininess\">shininess()</a> function.</p>\n<p><code>specularMaterial()</code> can be called three ways with different parameters to\nset the material’s color.</p>\n<p>The first way to call <code>specularMaterial()</code> has one parameter, <code>gray</code>.\nGrayscale values between 0 and 255, as in <code>specularMaterial(50)</code>, can be\npassed to set the material’s color. Higher grayscale values make shapes\nappear brighter.</p>\n<p>The second way to call <code>specularMaterial()</code> has one parameter, <code>color</code>. A\n<a href=\"#/p5.Color\">p5.Color> object, an array of color values, or a CSS\ncolor string, as in <code>specularMaterial('magenta')</code>, can be passed to set the\nmaterial’s color.</p>\n<p>The third way to call <code>specularMaterial()</code> has four parameters, <code>v1</code>, <code>v2</code>,\n<code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA, HSBA, or HSLA values can be\npassed to set the material’s colors, as in <code>specularMaterial(255, 0, 0)</code> or\n<code>specularMaterial(255, 0, 0, 30)</code>. Color values will be interpreted using\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
+ "name": "time",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 688,
"itemtype": "method",
- "name": "specularMaterial",
"chainable": 1,
+ "description": "<p>Sets the media element's playback time.</p>\n<p>The parameter, <code>time</code>, is optional. It's a number that specifies the\ntime, in seconds, to jump to when playback begins.</p>\n<p>Calling <code>media.time()</code> without an argument returns the number of seconds\nthe audio/video has played.</p>\n<p>Note: Time resets to 0 when looping media restarts.</p>\n",
"example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red torus drawn on a gray background. It becomes glossy when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial(255);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial(0, 255, 0);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n // Create a p5.Color object.\n let c = color('green');\n specularMaterial(c);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial('#00FF00');\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"S seconds\" on a gray square with media controls beneath it. The number \"S\" increases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the current playback time.\n let s = dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the playback time.\n text(`${s} seconds`, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n // Jump to 2 seconds to start.\n dragon.time(2);\n\n describe('The text \"S seconds\" on a gray square with media controls beneath it. The number \"S\" increases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the current playback time.\n let s = dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the playback time.\n text(`${s} seconds`, 50, 50);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Material",
"overloads": [
{
- "line": 2743,
- "params": [
- {
- "name": "gray",
- "description": "<p>grayscale value between 0 (black) and 255 (white).</p>\n",
- "type": "Number"
- },
- {
- "name": "alpha",
- "description": "<p>alpha value in the current current\n <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
+ "params": [],
+ "return": {
+ "description": "current time (in seconds).",
+ "type": "Number"
+ }
},
{
- "line": 2966,
"params": [
{
- "name": "v1",
- "description": "<p>red or hue value in\n the current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v2",
- "description": "<p>green or saturation value\n in the current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
- "type": "Number"
- },
- {
- "name": "v3",
- "description": "<p>blue, brightness, or lightness value\n in the current <a href=\"#/p5/colorMode\">colorMode()</a>.</p>\n",
+ "name": "time",
+ "description": "time to jump to (in seconds).",
"type": "Number"
- },
- {
- "name": "alpha",
- "description": "",
- "type": "Number",
- "optional": true
- }
- ],
- "chainable": 1
- },
- {
- "line": 2978,
- "params": [
- {
- "name": "color",
- "description": "<p>color as a <a href=\"#/p5.Color\">p5.Color</a> object,\n an array of color values, or a CSS string.</p>\n",
- "type": "p5.Color|Number[]|String"
}
- ],
- "chainable": 1
+ ]
}
- ]
+ ],
+ "return": {
+ "description": "current time (in seconds).",
+ "type": "Number"
+ },
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 2998,
- "description": "<p>Sets the amount of gloss (\"shininess\") of a\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>.</p>\n<p>Shiny materials focus reflected light more than dull materials.\n<code>shininess()</code> affects the way materials reflect light sources including\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>,\nand <a href=\"#/p5/spotLight\">spotLight()</a>.</p>\n<p>The parameter, <code>shine</code>, is a number that sets the amount of shininess.\n<code>shine</code> must be greater than 1, which is its default value.</p>\n",
+ "name": "duration",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 740,
"itemtype": "method",
- "name": "shininess",
- "params": [
+ "description": "Returns the audio/video's duration in seconds.",
+ "example": [
+ "<div>\n<code>\nlet dragon;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('The text \"S seconds left\" on a gray square with media controls beneath it. The number \"S\" decreases as the song plays.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the time remaining.\n let s = dragon.duration() - dragon.time();\n\n // Round s to 1 decimal place for display.\n s = round(s, 1);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the time remaining.\n text(`${s} seconds left`, 50, 50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "shine",
- "description": "<p>amount of shine.</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "duration (in seconds).",
+ "type": "Number"
+ }
}
],
+ "return": {
+ "description": "duration (in seconds).",
+ "type": "Number"
+ },
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "onended",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 913,
+ "itemtype": "method",
"chainable": 1,
+ "description": "<p>Calls a function when the audio/video reaches the end of its playback.</p>\n<p>The element is passed as an argument to the callback function.</p>\n<p>Note: The function won't be called if the media is looping.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two red spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is shinier than the left sphere.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on a red ambient light.\n ambientLight(255, 0, 0);\n\n // Get the mouse's coordinates.\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Turn on a white point light that follows the mouse.\n pointLight(255, 255, 255, mx, my, 50);\n\n // Style the sphere.\n noStroke();\n\n // Add a specular material with a grayscale value.\n specularMaterial(255);\n\n // Draw the left sphere with low shininess.\n translate(-25, 0, 0);\n shininess(10);\n sphere(20);\n\n // Draw the right sphere with high shininess.\n translate(50, 0, 0);\n shininess(100);\n sphere(20);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet beat;\nlet isPlaying = false;\nlet isDone = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n beat = createAudio('assets/beat.mp3');\n\n // Call handleEnd() when the beat finishes.\n beat.onended(handleEnd);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display different messages based on playback.\n if (isDone === true) {\n text('Done!', 50, 50);\n } else if (isPlaying === false) {\n text('Click to play', 50, 50);\n } else {\n text('Playing...', 50, 50);\n }\n}\n\n// Play the beat when the user presses the mouse.\nfunction mousePressed() {\n if (isPlaying === false) {\n isPlaying = true;\n beat.play();\n }\n}\n\n// Set isDone when playback ends.\nfunction handleEnd() {\n isDone = false;\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "callback",
+ "description": "function to call when playback ends.\nThe <code>p5.MediaElement</code> is passed as\nthe argument.",
+ "type": "Function"
+ }
+ ]
+ }
+ ],
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/material.js",
- "line": 3069,
- "description": "<p>Sets the amount of \"metalness\" of a\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>.</p>\n<p><code>metalness()</code> can make materials appear more metallic. It affects the way\nmaterials reflect light sources including\naffects the way materials reflect light sources including\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>,\n<a href=\"#/p5/spotLight\">spotLight()</a>, and\n<a href=\"#/p5/imageLight\">imageLight()</a>.</p>\n<p>The parameter, <code>metallic</code>, is a number that sets the amount of metalness.\n<code>metallic</code> must be greater than 1, which is its default value. Higher\nvalues, such as <code>metalness(100)</code>, make specular materials appear more\nmetallic.</p>\n",
+ "name": "connect",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 935,
"itemtype": "method",
- "name": "metalness",
- "params": [
+ "description": "<p>Sends the element's audio to an output.</p>\n<p>The parameter, <code>audioNode</code>, can be an <code>AudioNode</code> or an object from the\n<code>p5.sound</code> library.</p>\n<p>If no element is provided, as in <code>myElement.connect()</code>, the element\nconnects to the main output. All connections are removed by the\n<code>.disconnect()</code> method.</p>\n<p>Note: This method is meant to be used with the p5.sound.js addon library.</p>\n",
+ "example": [],
+ "overloads": [
{
- "name": "metallic",
- "description": "<p>amount of metalness.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "audioNode",
+ "description": "AudioNode from the Web Audio API,\nor an object from the p5.sound library",
+ "type": "AudioNode|Object"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two blue spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is more metallic than the left sphere.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on an ambient light.\n ambientLight(200);\n\n // Get the mouse's coordinates.\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Turn on a white point light that follows the mouse.\n pointLight(255, 255, 255, mx, my, 50);\n\n // Style the spheres.\n noStroke();\n fill(30, 30, 255);\n specularMaterial(255);\n shininess(20);\n\n // Draw the left sphere with low metalness.\n translate(-25, 0, 0);\n metalness(1);\n sphere(20);\n\n // Draw the right sphere with high metalness.\n translate(50, 0, 0);\n metalness(50);\n sphere(20);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\nfunction preload() {\n img = loadImage('assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(100 ,100 ,WEBGL);\n\n describe(\n 'Two spheres floating above a landscape. The surface of the spheres reflect the landscape. The right sphere is more reflective than the left sphere.'\n );\n}\n\nfunction draw() {\n // Add the panorama.\n panorama(img);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Use the image as a light source.\n imageLight(img);\n\n // Style the spheres.\n noStroke();\n specularMaterial(50);\n shininess(200);\n\n // Draw the left sphere with low metalness.\n translate(-25, 0, 0);\n metalness(1);\n sphere(20);\n\n // Draw the right sphere with high metalness.\n translate(50, 0, 0);\n metalness(50);\n sphere(20);\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Material"
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/p5.Camera.js",
- "line": 13,
- "description": "<p>Sets the position and orientation of the current camera in a 3D sketch.</p>\n<p><code>camera()</code> allows objects to be viewed from different angles. It has nine\nparameters that are all optional.</p>\n<p>The first three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are the coordinates of the\ncamera’s position. For example, calling <code>camera(0, 0, 0)</code> places the camera\nat the origin <code>(0, 0, 0)</code>. By default, the camera is placed at\n<code>(0, 0, 800)</code>.</p>\n<p>The next three parameters, <code>centerX</code>, <code>centerY</code>, and <code>centerZ</code> are the\ncoordinates of the point where the camera faces. For example, calling\n<code>camera(0, 0, 0, 10, 20, 30)</code> places the camera at the origin <code>(0, 0, 0)</code>\nand points it at <code>(10, 20, 30)</code>. By default, the camera points at the\norigin <code>(0, 0, 0)</code>.</p>\n<p>The last three parameters, <code>upX</code>, <code>upY</code>, and <code>upZ</code> are the components of\nthe \"up\" vector. The \"up\" vector orients the camera’s y-axis. For example,\ncalling <code>camera(0, 0, 0, 10, 20, 30, 0, -1, 0)</code> places the camera at the\norigin <code>(0, 0, 0)</code>, points it at <code>(10, 20, 30)</code>, and sets the \"up\" vector\nto <code>(0, -1, 0)</code> which is like holding it upside-down. By default, the \"up\"\nvector is <code>(0, 1, 0)</code>.</p>\n<p>Note: <code>camera()</code> can only be used in WebGL mode.</p>\n",
+ "name": "disconnect",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 979,
"itemtype": "method",
- "name": "camera",
- "is_constructor": 1,
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate of the camera. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "y",
- "description": "<p>y-coordinate of the camera. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "z",
- "description": "<p>z-coordinate of the camera. Defaults to 800.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "centerX",
- "description": "<p>x-coordinate of the point the camera faces. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "centerY",
- "description": "<p>y-coordinate of the point the camera faces. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "centerZ",
- "description": "<p>z-coordinate of the point the camera faces. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "upX",
- "description": "<p>x-component of the camera’s \"up\" vector. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "upY",
- "description": "<p>y-component of the camera’s \"up\" vector. Defaults to 1.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Disconnect all Web Audio routing, including to the main output.</p>\n<p>This is useful if you want to re-route the output through audio effects,\nfor example.</p>\n",
+ "example": [],
+ "overloads": [
{
- "name": "upZ",
- "description": "<p>z-component of the camera’s \"up\" vector. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Move the camera to the top-right.\n camera(200, -400, 800);\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube apperas to sway left and right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the camera's x-coordinate.\n let x = 400 * cos(frameCount * 0.01);\n\n // Orbit the camera around the box.\n camera(x, -400, 800);\n\n // Draw the box.\n box();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Adjust the range sliders to change the camera's position.\n\nlet xSlider;\nlet ySlider;\nlet zSlider;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create slider objects to set the camera's coordinates.\n xSlider = createSlider(-400, 400, 400);\n xSlider.position(0, 100);\n xSlider.size(100);\n ySlider = createSlider(-400, 400, -200);\n ySlider.position(0, 120);\n ySlider.size(100);\n zSlider = createSlider(0, 1600, 800);\n zSlider.position(0, 140);\n zSlider.size(100);\n\n describe(\n 'A white cube drawn against a gray background. Three range sliders appear beneath the image. The camera position changes when the user moves the sliders.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Get the camera's coordinates from the sliders.\n let x = xSlider.value();\n let y = ySlider.value();\n let z = zSlider.value();\n\n // Move the camera.\n camera(x, y, z);\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Camera"
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/p5.Camera.js",
- "line": 148,
- "description": "<p>Sets a perspective projection for the current camera in a 3D sketch.</p>\n<p>In a perspective projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes. It’s applied by default in\nWebGL mode.</p>\n<p><code>perspective()</code> changes the camera’s perspective by changing its viewing\nfrustum. The frustum is the volume of space that’s visible to the camera.\nIts shape is a pyramid with its top cut off. The camera is placed where\nthe top of the pyramid should be and views everything between the frustum’s\ntop (near) plane and its bottom (far) plane.</p>\n<p>The first parameter, <code>fovy</code>, is the camera’s vertical field of view. It’s\nan angle that describes how tall or narrow a view the camera has. For\nexample, calling <code>perspective(0.5)</code> sets the camera’s vertical field of\nview to 0.5 radians. By default, <code>fovy</code> is calculated based on the sketch’s\nheight and the camera’s default z-coordinate, which is 800. The formula for\nthe default <code>fovy</code> is <code>2 * atan(height / 2 / 800)</code>.</p>\n<p>The second parameter, <code>aspect</code>, is the camera’s aspect ratio. It’s a number\nthat describes the ratio of the top plane’s width to its height. For\nexample, calling <code>perspective(0.5, 1.5)</code> sets the camera’s field of view to\n0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner\non a square canvas. By default, aspect is set to <code>width / height</code>.</p>\n<p>The third parameter, <code>near</code>, is the distance from the camera to the near\nplane. For example, calling <code>perspective(0.5, 1.5, 100)</code> sets the camera’s\nfield of view to 0.5 radians, its aspect ratio to 1.5, and places the near\nplane 100 pixels from the camera. Any shapes drawn less than 100 pixels\nfrom the camera won’t be visible. By default, near is set to <code>0.1 * 800</code>,\nwhich is 1/10th the default distance between the camera and the origin.</p>\n<p>The fourth parameter, <code>far</code>, is the distance from the camera to the far\nplane. For example, calling <code>perspective(0.5, 1.5, 100, 10000)</code> sets the\ncamera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the\nnear plane 100 pixels from the camera, and places the far plane 10,000\npixels from the camera. Any shapes drawn more than 10,000 pixels from the\ncamera won’t be visible. By default, far is set to <code>10 * 800</code>, which is 10\ntimes the default distance between the camera and the origin.</p>\n<p>Note: <code>perspective()</code> can only be used in WebGL mode.</p>\n",
+ "name": "showControls",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 1022,
"itemtype": "method",
- "name": "perspective",
- "params": [
- {
- "name": "fovy",
- "description": "<p>camera frustum vertical field of view. Defaults to\n <code>2 * atan(height / 2 / 800)</code>.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "aspect",
- "description": "<p>camera frustum aspect ratio. Defaults to\n <code>width / height</code>.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "near",
- "description": "<p>distance from the camera to the near clipping plane.\n Defaults to <code>0.1 * 800</code>.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Show the default\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement\" target=\"_blank\">HTMLMediaElement</a>\ncontrols.</p>\n<p>Note: The controls vary between web browsers.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background('cornflowerblue');\n\n // Style the text.\n textAlign(CENTER);\n textSize(50);\n\n // Display a dragon.\n text('🐉', 50, 50);\n\n // Create a p5.MediaElement using createAudio().\n let dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n describe('A dragon emoji, 🐉, 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>"
+ ],
+ "overloads": [
{
- "name": "far",
- "description": "<p>distance from the camera to the far clipping plane.\n Defaults to <code>10 * 800</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
}
],
- "chainable": 1,
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "hideControls",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 1078,
+ "itemtype": "method",
+ "description": "Hide the default\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement\" target=\"_blank\">HTMLMediaElement</a>\ncontrols.",
"example": [
- "\n<div>\n<code>\n// Double-click to squeeze the box.\n\nlet isSqueezed = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white rectangular prism on a gray background. The box appears to become thinner when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Place the camera at the top-right.\n camera(400, -400, 800);\n\n if (isSqueezed === true) {\n // Set fovy to 0.2.\n // Set aspect to 1.5.\n perspective(0.2, 1.5);\n }\n\n // Draw the box.\n box();\n}\n\n// Change the camera's perspective when the user double-clicks.\nfunction doubleClicked() {\n isSqueezed = true;\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white rectangular prism on a gray background. The prism moves away from the camera until it disappears.');\n}\n\nfunction draw() {\n background(200);\n\n // Place the camera at the top-right.\n camera(400, -400, 800);\n\n // Set fovy to 0.2.\n // Set aspect to 1.5.\n // Set near to 600.\n // Set far to 1200.\n perspective(0.2, 1.5, 600, 1200);\n\n // Move the origin away from the camera.\n let x = -frameCount;\n let y = frameCount;\n let z = -2 * frameCount;\n translate(x, y, z);\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet dragon;\nlet isHidden = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n dragon = createAudio('assets/lucky_dragons.mp3');\n\n // Show the default media controls.\n dragon.showControls();\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n\n // Display a different message when controls are hidden or shown.\n if (isHidden === true) {\n text('Double-click to show controls', 10, 20, 80, 80);\n } else {\n text('Double-click to hide controls', 10, 20, 80, 80);\n }\n}\n\n// Show/hide controls based on a double-click.\nfunction doubleClicked() {\n if (isHidden === true) {\n dragon.showControls();\n isHidden = false;\n } else {\n dragon.hideControls();\n isHidden = true;\n }\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Camera"
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/p5.Camera.js",
- "line": 280,
- "description": "<p>Enables or disables perspective for lines in 3D sketches.</p>\n<p>In WebGL mode, lines can be drawn with a thinner stroke when they’re\nfurther from the camera. Doing so gives them a more realistic appearance.</p>\n<p>By default, lines are drawn differently based on the type of perspective\nbeing used:</p>\n<ul>\n<li><code>perspective()</code> and <code>frustum()</code> simulate a realistic perspective. In\nthese modes, stroke weight is affected by the line’s distance from the\ncamera. Doing so results in a more natural appearance. <code>perspective()</code> is\nthe default mode for 3D sketches.</li>\n<li><code>ortho()</code> doesn’t simulate a realistic perspective. In this mode, stroke\nweights are consistent regardless of the line’s distance from the camera.\nDoing so results in a more predictable and consistent appearance.</li>\n</ul>\n<p><code>linePerspective()</code> can override the default line drawing mode.</p>\n<p>The parameter, <code>enable</code>, is optional. It’s a <code>Boolean</code> value that sets the\nway lines are drawn. If <code>true</code> is passed, as in <code>linePerspective(true)</code>,\nthen lines will appear thinner when they are further from the camera. If\n<code>false</code> is passed, as in <code>linePerspective(false)</code>, then lines will have\nconsistent stroke weights regardless of their distance from the camera. By\ndefault, <code>linePerspective()</code> is enabled.</p>\n<p>Calling <code>linePerspective()</code> without passing an argument returns <code>true</code> if\nit's enabled and <code>false</code> if not.</p>\n<p>Note: <code>linePerspective()</code> can only be used in WebGL mode.</p>\n",
+ "name": "addCue",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 1133,
"itemtype": "method",
- "name": "linePerspective",
+ "description": "<p>Schedules a function to call when the audio/video reaches a specific time\nduring its playback.</p>\n<p>The first parameter, <code>time</code>, is the time, in seconds, when the function\nshould run. This value is passed to <code>callback</code> as its first argument.</p>\n<p>The second parameter, <code>callback</code>, is the function to call at the specified\ncue time.</p>\n<p>The third parameter, <code>value</code>, is optional and can be any type of value.\n<code>value</code> is passed to <code>callback</code>.</p>\n<p>Calling <code>media.addCue()</code> returns an ID as a string. This is useful for\nremoving the cue later.</p>\n",
"example": [
- "\n<div>\n<code>\n// Double-click the canvas to toggle the line perspective.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A white cube with black edges on a gray background. Its edges toggle between thick and thin when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the line perspective when the user double-clicks.\nfunction doubleClicked() {\n let isEnabled = linePerspective();\n linePerspective(!isEnabled);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click the canvas to toggle the line perspective.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A row of cubes with black edges on a gray background. Their edges toggle between thick and thin when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Use an orthographic projection.\n ortho();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the line perspective when the user double-clicks.\nfunction doubleClicked() {\n let isEnabled = linePerspective();\n linePerspective(!isEnabled);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n beat.addCue(6, changeBackground, 'lavender');\n\n describe('A red square with a beat playing in the background. Its color changes every 2 seconds while the audio plays.');\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Camera",
"overloads": [
{
- "line": 280,
"params": [
{
- "name": "enable",
- "description": "<p>whether to enable line perspective.</p>\n",
- "type": "Boolean"
- }
- ]
- },
- {
- "line": 392,
- "params": [],
- "return": {
- "description": "whether line perspective is enabled.",
- "type": "Boolean"
+ "name": "time",
+ "description": "cue time to run the callback function.",
+ "type": "Number"
+ },
+ {
+ "name": "callback",
+ "description": "function to call at the cue time.",
+ "type": "Function"
+ },
+ {
+ "name": "value",
+ "description": "object to pass as the argument to\n<code>callback</code>.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ],
+ "return": {
+ "description": "id ID of this cue,\nuseful for <code>media.removeCue(id)</code>.",
+ "type": "Number"
}
}
- ]
+ ],
+ "return": {
+ "description": "id ID of this cue,\nuseful for <code>media.removeCue(id)</code>.",
+ "type": "Number"
+ },
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
},
{
- "file": "src/webgl/p5.Camera.js",
- "line": 412,
- "description": "<p>Sets an orthographic projection for the current camera in a 3D sketch.</p>\n<p>In an orthographic projection, shapes with the same size always appear the\nsame size, regardless of whether they are near or far from the camera.</p>\n<p><code>ortho()</code> changes the camera’s perspective by changing its viewing frustum\nfrom a truncated pyramid to a rectangular prism. The camera is placed in\nfront of the frustum and views everything between the frustum’s near plane\nand its far plane. <code>ortho()</code> has six optional parameters to define the\nfrustum.</p>\n<p>The first four parameters, <code>left</code>, <code>right</code>, <code>bottom</code>, and <code>top</code>, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\n<code>ortho(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels wide and\n400 pixels tall. By default, these coordinates are set based on the\nsketch’s width and height, as in\n<code>ortho(-width / 2, width / 2, -height / 2, height / 2)</code>.</p>\n<p>The last two parameters, <code>near</code> and <code>far</code>, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\n<code>ortho(-100, 100, 200, 200, 50, 1000)</code> creates a frustum that’s 200 pixels\nwide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000\npixels from the camera. By default, <code>near</code> and <code>far</code> are set to 0 and\n<code>max(width, height) + 800</code>, respectively.</p>\n<p>Note: <code>ortho()</code> can only be used in WebGL mode.</p>\n",
+ "name": "removeCue",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 1203,
"itemtype": "method",
- "name": "ortho",
- "params": [
+ "description": "Removes a callback based on its ID.",
+ "example": [
+ "<div>\n<code>\nlet lavenderID;\nlet isRemoved = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n\n // Record the ID of the \"lavender\" callback.\n lavenderID = beat.addCue(6, changeBackground, 'lavender');\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Display different instructions based on the available callbacks.\n if (isRemoved === false) {\n text('Double-click to remove lavender.', 10, 10, 80, 80);\n } else {\n text('No more lavender.', 10, 10, 80, 80);\n }\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n\n// Remove the lavender color-change cue when the user double-clicks.\nfunction doubleClicked() {\n if (isRemoved === false) {\n beat.removeCue(lavenderID);\n isRemoved = true;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "left",
- "description": "<p>x-coordinate of the frustum’s left plane. Defaults to <code>-width / 2</code>.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "params": [
+ {
+ "name": "id",
+ "description": "ID of the cue, created by <code>media.addCue()</code>.",
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "clearCues",
+ "file": "src/scripts/parsers/in/p5.js/src/dom/p5.MediaElement.js",
+ "line": 1271,
+ "itemtype": "method",
+ "description": "Removes all functions scheduled with <code>media.addCue()</code>.",
+ "example": [
+ "<div>\n<code>\nlet isChanging = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.MediaElement using createAudio().\n let beat = createAudio('assets/beat.mp3');\n\n // Play the beat in a loop.\n beat.loop();\n\n // Schedule a few events.\n beat.addCue(0, changeBackground, 'red');\n beat.addCue(2, changeBackground, 'deeppink');\n beat.addCue(4, changeBackground, 'orchid');\n beat.addCue(6, changeBackground, 'lavender');\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Display different instructions based on the available callbacks.\n if (isChanging === true) {\n text('Double-click to stop changing.', 10, 10, 80, 80);\n } else {\n text('No more changes.', 10, 10, 80, 80);\n }\n}\n\n// Change the background color.\nfunction changeBackground(c) {\n background(c);\n}\n\n// Remove cued functions and stop changing colors when the user\n// double-clicks.\nfunction doubleClicked() {\n if (isChanging === true) {\n beat.clearCues();\n isChanging = false;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "right",
- "description": "<p>x-coordinate of the frustum’s right plane. Defaults to <code>width / 2</code>.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "params": []
+ }
+ ],
+ "class": "p5.MediaElement",
+ "static": false,
+ "module": "DOM",
+ "submodule": "DOM"
+ },
+ {
+ "name": "pixelDensity",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 47,
+ "itemtype": "method",
+ "description": "<p>Gets or sets the pixel density for high pixel density displays.</p>\n<p>By default, the density will be set to 1.</p>\n<p>Call this method with no arguments to get the default density, or pass\nin a number to set the density. If a non-positive number is provided,\nit defaults to 1.</p>\n",
+ "example": [],
+ "overloads": [
{
- "name": "bottom",
- "description": "<p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height / 2</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "density",
+ "description": "A scaling factor for the number of pixels per\nside",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "The current density if called without arguments, or the instance for chaining if setting density.",
+ "type": "Number"
+ }
},
{
- "name": "top",
- "description": "<p>y-coordinate of the frustum’s top plane. Defaults to <code>-height / 2</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "density",
+ "description": "A scaling factor for the number of pixels per\nside",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "The current density if called without arguments, or the instance for chaining if setting density.",
+ "type": "Number"
+ }
},
{
- "name": "near",
- "description": "<p>z-coordinate of the frustum’s near plane. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "density",
+ "description": "A scaling factor for the number of pixels per\nside",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "The current density if called without arguments, or the instance for chaining if setting density.",
+ "type": "Number"
+ }
},
{
- "name": "far",
- "description": "<p>z-coordinate of the frustum’s far plane. Defaults to <code>max(width, height) + 800</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "density",
+ "description": "A scaling factor for the number of pixels per\nside",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "The current density if called without arguments, or the instance for chaining if setting density.",
+ "type": "Number"
+ }
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A row of tiny, white cubes on a gray background. All the cubes appear the same size.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply an orthographic projection.\n ortho();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply an orthographic projection.\n // Center the frustum.\n // Set its width and height to 20.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n ortho(-10, 10, -10, 10, 300, 350);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Camera"
+ "return": {
+ "description": "The current density if called without arguments, or the instance for chaining if setting density.",
+ "type": "Number"
+ },
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/webgl/p5.Camera.js",
- "line": 522,
- "description": "<p>Sets the frustum of the current camera in a 3D sketch.</p>\n<p>In a frustum projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes.</p>\n<p><code>frustum()</code> changes the default camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.</p>\n<p>The first four parameters, <code>left</code>, <code>right</code>, <code>bottom</code>, and <code>top</code>, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\n<code>frustum(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels wide\nand 400 pixels tall. By default, these coordinates are set based on the\nsketch’s width and height, as in\n<code>ortho(-width / 20, width / 20, height / 20, -height / 20)</code>.</p>\n<p>The last two parameters, <code>near</code> and <code>far</code>, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\n<code>ortho(-100, 100, 200, -200, 50, 1000)</code> creates a frustum that’s 200 pixels\nwide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000\npixels from the camera. By default, near is set to <code>0.1 * 800</code>, which is\n1/10th the default distance between the camera and the origin. <code>far</code> is set\nto <code>10 * 800</code>, which is 10 times the default distance between the camera\nand the origin.</p>\n<p>Note: <code>frustum()</code> can only be used in WebGL mode.</p>\n",
+ "name": "loadPixels",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 181,
"itemtype": "method",
- "name": "frustum",
- "params": [
+ "description": "<p>Loads the current value of each pixel in the image into the <code>img.pixels</code>\narray.</p>\n<p><code>img.loadPixels()</code> must be called before reading or modifying pixel\nvalues.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "left",
- "description": "<p>x-coordinate of the frustum’s left plane. Defaults to <code>-width / 20</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
},
{
- "name": "right",
- "description": "<p>x-coordinate of the frustum’s right plane. Defaults to <code>width / 20</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
},
{
- "name": "bottom",
- "description": "<p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height / 20</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
},
{
- "name": "top",
- "description": "<p>y-coordinate of the frustum’s top plane. Defaults to <code>-height / 20</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
+ }
+ ],
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
+ },
+ {
+ "name": "updatePixels",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 287,
+ "itemtype": "method",
+ "description": "<p>Updates the canvas with the RGBA values in the\n<a href=\"#/p5.Image/pixels\">img.pixels</a> array.</p>\n<p><code>img.updatePixels()</code> only needs to be called after changing values in\nthe <a href=\"#/p5.Image/pixels\">img.pixels</a> array. Such changes can be\nmade directly after calling\n<a href=\"#/p5.Image/loadPixels\">img.loadPixels()</a> or by calling\n<a href=\"#/p5.Image/set\">img.set()</a>.</p>\n<p>The optional parameters <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code> define a\nsubsection of the image to update. Doing so can improve performance in\nsome cases.</p>\n<p>If the image was loaded from a GIF, then calling <code>img.updatePixels()</code>\nwill update the pixels in current frame.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n img.set(x, y, 0);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Load the image's pixels.\n img.loadPixels();\n\n // Set the pixels to black.\n for (let i = 0; i < img.pixels.length; i += 4) {\n // Red.\n img.pixels[i] = 0;\n // Green.\n img.pixels[i + 1] = 0;\n // Blue.\n img.pixels[i + 2] = 0;\n // Alpha.\n img.pixels[i + 3] = 255;\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A black square drawn in the middle of a gray square.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the upper-left corner\nof the subsection to update.",
+ "type": "Integer"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the upper-left corner\nof the subsection to update.",
+ "type": "Integer"
+ },
+ {
+ "name": "w",
+ "description": "width of the subsection to update.",
+ "type": "Integer"
+ },
+ {
+ "name": "h",
+ "description": "height of the subsection to update.",
+ "type": "Integer"
+ }
+ ]
},
{
- "name": "near",
- "description": "<p>z-coordinate of the frustum’s near plane. Defaults to <code>0.1 * 800</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the upper-left corner\nof the subsection to update.",
+ "type": "Integer"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the upper-left corner\nof the subsection to update.",
+ "type": "Integer"
+ },
+ {
+ "name": "w",
+ "description": "width of the subsection to update.",
+ "type": "Integer"
+ },
+ {
+ "name": "h",
+ "description": "height of the subsection to update.",
+ "type": "Integer"
+ }
+ ]
},
{
- "name": "far",
- "description": "<p>z-coordinate of the frustum’s far plane. Defaults to <code>10 * 800</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the upper-left corner\nof the subsection to update.",
+ "type": "Integer"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the upper-left corner\nof the subsection to update.",
+ "type": "Integer"
+ },
+ {
+ "name": "w",
+ "description": "width of the subsection to update.",
+ "type": "Integer"
+ },
+ {
+ "name": "h",
+ "description": "height of the subsection to update.",
+ "type": "Integer"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the upper-left corner\nof the subsection to update.",
+ "type": "Integer"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the upper-left corner\nof the subsection to update.",
+ "type": "Integer"
+ },
+ {
+ "name": "w",
+ "description": "width of the subsection to update.",
+ "type": "Integer"
+ },
+ {
+ "name": "h",
+ "description": "height of the subsection to update.",
+ "type": "Integer"
+ }
+ ]
}
],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A row of white cubes on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply the default frustum projection.\n frustum();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust the frustum.\n // Center it.\n // Set its width and height to 20 pixels.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n frustum(-10, 10, -10, 10, 300, 350);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Camera"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/webgl/p5.Camera.js",
- "line": 638,
- "description": "<p>Creates a new <a href=\"#/p5.Camera\">p5.Camera</a> object and sets it\nas the current (active) camera.</p>\n<p>The new camera is initialized with a default position <code>(0, 0, 800)</code> and a\ndefault perspective projection. Its properties can be controlled with\n<a href=\"#/p5.Camera\">p5.Camera</a> methods such as\n<code>myCamera.lookAt(0, 0, 0)</code>.</p>\n<p>Note: Every 3D sketch starts with a default camera initialized.\nThis camera can be controlled with the functions\n<a href=\"#/p5/camera\">camera()</a>,\n<a href=\"#/p5/perspective\">perspective()</a>,\n<a href=\"#/p5/ortho\">ortho()</a>, and\n<a href=\"#/p5/frustum\">frustum()</a> if it's the only camera in the scene.</p>\n<p>Note: <code>createCamera()</code> can only be used in WebGL mode.</p>\n",
+ "name": "get",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 432,
"itemtype": "method",
- "name": "createCamera",
- "return": {
- "description": "the new camera.",
- "type": "p5.Camera"
- },
+ "description": "<p>Gets a pixel or a region of pixels from the image.</p>\n<p><code>img.get()</code> is easy to use but it's not as fast as\n<a href=\"#/p5.Image/pixels\">img.pixels</a>. Use\n<a href=\"#/p5.Image/pixels\">img.pixels</a> to read many pixel values.</p>\n<p>The version of <code>img.get()</code> with no parameters returns the entire image.</p>\n<p>The version of <code>img.get()</code> with two parameters, as in <code>img.get(10, 20)</code>,\ninterprets them as coordinates. It returns an array with the\n<code>[R, G, B, A]</code> values of the pixel at the given point.</p>\n<p>The version of <code>img.get()</code> with four parameters, as in\n<code>img,get(10, 20, 50, 90)</code>, interprets them as\ncoordinates and dimensions. The first two parameters are the coordinates\nof the upper-left corner of the subsection. The last two parameters are\nthe width and height of the subsection. It returns a subsection of the\ncanvas in a new <a href=\"#/p5.Image\">p5.Image</a> object.</p>\n<p>Use <code>img.get()</code> instead of <a href=\"#/p5/get\">get()</a> to work directly\nwith images.</p>\n",
"example": [
- "\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n setCamera(cam2);\n usingCam1 = false;\n } else {\n setCamera(cam1);\n usingCam1 = true;\n }\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy the image.\n let img2 = get();\n\n // Display the copied image on the right.\n image(img2, 50, 0);\n\n describe('Two identical mountain landscapes shown side-by-side.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get a pixel's color.\n let c = img.get(50, 90);\n\n // Style the square using the pixel's color.\n fill(c);\n noStroke();\n\n // Draw the square.\n square(25, 25, 50);\n\n describe('A mountain landscape with an olive green square in its center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy half of the image.\n let img2 = img.get(0, 0, img.width / 2, img.height / 2);\n\n // Display half of the image.\n image(img2, 50, 50);\n\n describe('A mountain landscape drawn on top of another mountain landscape.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy the image.\n let img2 = get();\n\n // Display the copied image on the right.\n image(img2, 50, 0);\n\n describe('Two identical mountain landscapes shown side-by-side.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get a pixel's color.\n let c = img.get(50, 90);\n\n // Style the square using the pixel's color.\n fill(c);\n noStroke();\n\n // Draw the square.\n square(25, 25, 50);\n\n describe('A mountain landscape with an olive green square in its center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy half of the image.\n let img2 = img.get(0, 0, img.width / 2, img.height / 2);\n\n // Display half of the image.\n image(img2, 50, 50);\n\n describe('A mountain landscape drawn on top of another mountain landscape.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy the image.\n let img2 = get();\n\n // Display the copied image on the right.\n image(img2, 50, 0);\n\n describe('Two identical mountain landscapes shown side-by-side.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get a pixel's color.\n let c = img.get(50, 90);\n\n // Style the square using the pixel's color.\n fill(c);\n noStroke();\n\n // Draw the square.\n square(25, 25, 50);\n\n describe('A mountain landscape with an olive green square in its center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy half of the image.\n let img2 = img.get(0, 0, img.width / 2, img.height / 2);\n\n // Display half of the image.\n image(img2, 50, 50);\n\n describe('A mountain landscape drawn on top of another mountain landscape.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy the image.\n let img2 = get();\n\n // Display the copied image on the right.\n image(img2, 50, 0);\n\n describe('Two identical mountain landscapes shown side-by-side.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Get a pixel's color.\n let c = img.get(50, 90);\n\n // Style the square using the pixel's color.\n fill(c);\n noStroke();\n\n // Draw the square.\n square(25, 25, 50);\n\n describe('A mountain landscape with an olive green square in its center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Copy half of the image.\n let img2 = img.get(0, 0, img.width / 2, img.height / 2);\n\n // Display half of the image.\n image(img2, 50, 50);\n\n describe('A mountain landscape drawn on top of another mountain landscape.');\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 851,
- "description": "<p>The camera’s x-coordinate.</p>\n<p>By default, the camera’s x-coordinate is set to 0 in \"world\" space.</p>\n",
- "itemtype": "property",
- "name": "eyeX",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The text \"eyeX: 0\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of eyeX, rounded to the nearest integer.\n text(`eyeX: ${round(cam.eyeX)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to move left and right as the camera moves. The text \"eyeX: X\" is written in black beneath the cube. X oscillates between -25 and 25.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new x-coordinate.\n let x = 25 * sin(frameCount * 0.01);\n\n // Set the camera's position.\n cam.setPosition(x, -400, 800);\n\n // Display the value of eyeX, rounded to the nearest integer.\n text(`eyeX: ${round(cam.eyeX)}`, 0, 55);\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 963,
- "description": "<p>The camera’s y-coordinate.</p>\n<p>By default, the camera’s y-coordinate is set to 0 in \"world\" space.</p>\n",
- "itemtype": "property",
- "name": "eyeY",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The text \"eyeY: -400\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of eyeY, rounded to the nearest integer.\n text(`eyeX: ${round(cam.eyeY)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to move up and down as the camera moves. The text \"eyeY: Y\" is written in black beneath the cube. Y oscillates between -374 and -425.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new y-coordinate.\n let y = 25 * sin(frameCount * 0.01) - 400;\n\n // Set the camera's position.\n cam.setPosition(0, y, 800);\n\n // Display the value of eyeY, rounded to the nearest integer.\n text(`eyeY: ${round(cam.eyeY)}`, 0, 55);\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 1075,
- "description": "<p>The camera’s z-coordinate.</p>\n<p>By default, the camera’s z-coordinate is set to 800 in \"world\" space.</p>\n",
- "itemtype": "property",
- "name": "eyeZ",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The text \"eyeZ: 800\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of eyeZ, rounded to the nearest integer.\n text(`eyeZ: ${round(cam.eyeZ)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to move forward and back as the camera moves. The text \"eyeZ: Z\" is written in black beneath the cube. Z oscillates between 700 and 900.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new z-coordinate.\n let z = 100 * sin(frameCount * 0.01) + 800;\n\n // Set the camera's position.\n cam.setPosition(0, -400, z);\n\n // Display the value of eyeZ, rounded to the nearest integer.\n text(`eyeZ: ${round(cam.eyeZ)}`, 0, 55);\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 1187,
- "description": "<p>The x-coordinate of the place where the camera looks.</p>\n<p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in \"world\" space, so\n<code>myCamera.centerX</code> is 0.</p>\n",
- "itemtype": "property",
- "name": "centerX",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The text \"centerX: 10\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of centerX, rounded to the nearest integer.\n text(`centerX: ${round(cam.centerX)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(100, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The cube appears to move left and right as the camera shifts its focus. The text \"centerX: X\" is written in black beneath the cube. X oscillates between -15 and 35.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new x-coordinate.\n let x = 25 * sin(frameCount * 0.01) + 10;\n\n // Point the camera.\n cam.lookAt(x, 20, -30);\n\n // Display the value of centerX, rounded to the nearest integer.\n text(`centerX: ${round(cam.centerX)}`, 0, 55);\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 1300,
- "description": "<p>The y-coordinate of the place where the camera looks.</p>\n<p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in \"world\" space, so\n<code>myCamera.centerY</code> is 0.</p>\n",
- "itemtype": "property",
- "name": "centerY",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The text \"centerY: 20\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of centerY, rounded to the nearest integer.\n text(`centerY: ${round(cam.centerY)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(100, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The cube appears to move up and down as the camera shifts its focus. The text \"centerY: Y\" is written in black beneath the cube. Y oscillates between -5 and 45.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new y-coordinate.\n let y = 25 * sin(frameCount * 0.01) + 20;\n\n // Point the camera.\n cam.lookAt(10, y, -30);\n\n // Display the value of centerY, rounded to the nearest integer.\n text(`centerY: ${round(cam.centerY)}`, 0, 55);\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 1413,
- "description": "<p>The y-coordinate of the place where the camera looks.</p>\n<p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in \"world\" space, so\n<code>myCamera.centerZ</code> is 0.</p>\n",
- "itemtype": "property",
- "name": "centerZ",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The text \"centerZ: -30\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of centerZ, rounded to the nearest integer.\n text(`centerZ: ${round(cam.centerZ)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(100, -400, 800);\n\n // Point the camera at (10, 20, -30).\n cam.lookAt(10, 20, -30);\n\n describe(\n 'A white cube on a gray background. The cube appears to move forward and back as the camera shifts its focus. The text \"centerZ: Z\" is written in black beneath the cube. Z oscillates between -55 and -25.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the new z-coordinate.\n let z = 25 * sin(frameCount * 0.01) - 30;\n\n // Point the camera.\n cam.lookAt(10, 20, z);\n\n // Display the value of centerZ, rounded to the nearest integer.\n text(`centerZ: ${round(cam.centerZ)}`, 0, 55);\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 1526,
- "description": "<p>The x-component of the camera's \"up\" vector.</p>\n<p>The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is\n<code>(0, 1, 0)</code>, so its x-component is 0 in \"local\" space.</p>\n",
- "itemtype": "property",
- "name": "upX",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The text \"upX: 0\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of upX, rounded to the nearest tenth.\n text(`upX: ${round(cam.upX, 1)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to rock back and forth. The text \"upX: X\" is written in black beneath it. X oscillates between -1 and 1.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the x-component.\n let x = sin(frameCount * 0.01);\n\n // Update the camera's \"up\" vector.\n cam.camera(100, -400, 800, 0, 0, 0, x, 1, 0);\n\n // Display the value of upX, rounded to the nearest tenth.\n text(`upX: ${round(cam.upX, 1)}`, 0, 55);\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 1637,
- "description": "<p>The y-component of the camera's \"up\" vector.</p>\n<p>The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is\n<code>(0, 1, 0)</code>, so its y-component is 1 in \"local\" space.</p>\n",
- "itemtype": "property",
- "name": "upY",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The text \"upY: 1\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of upY, rounded to the nearest tenth.\n text(`upY: ${round(cam.upY, 1)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The cube flips upside-down periodically. The text \"upY: Y\" is written in black beneath it. Y oscillates between -1 and 1.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the y-component.\n let y = sin(frameCount * 0.01);\n\n // Update the camera's \"up\" vector.\n cam.camera(100, -400, 800, 0, 0, 0, 0, y, 0);\n\n // Display the value of upY, rounded to the nearest tenth.\n text(`upY: ${round(cam.upY, 1)}`, 0, 55);\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 1748,
- "description": "<p>The z-component of the camera's \"up\" vector.</p>\n<p>The camera's \"up\" vector orients its y-axis. By default, the \"up\" vector is\n<code>(0, 1, 0)</code>, so its z-component is 0 in \"local\" space.</p>\n",
- "itemtype": "property",
- "name": "upZ",
- "type": "Number",
- "readonly": "",
- "example": [
- "\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The text \"upZ: 0\" is written in black beneath it.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Display the value of upZ, rounded to the nearest tenth.\n text(`upZ: ${round(cam.upZ, 1)}`, 0, 55);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet cam;\nlet font;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n font = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-right: (100, -400, 800)\n // Point it at the origin: (0, 0, 0)\n // Set its \"up\" vector: (0, 1, 0).\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, 0);\n\n describe(\n 'A white cube on a gray background. The cube appears to rock back and forth. The text \"upZ: Z\" is written in black beneath it. Z oscillates between -1 and 1.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the box.\n fill(255);\n\n // Draw the box.\n box();\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n textFont(font);\n fill(0);\n\n // Calculate the z-component.\n let z = sin(frameCount * 0.01);\n\n // Update the camera's \"up\" vector.\n cam.camera(100, -400, 800, 0, 0, 0, 0, 1, z);\n\n // Display the value of upZ, rounded to the nearest tenth.\n text(`upZ: ${round(cam.upZ, 1)}`, 0, 55);\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 1863,
- "description": "<p>Sets a perspective projection for the camera.</p>\n<p>In a perspective projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes. It’s applied by default in new\n<code>p5.Camera</code> objects.</p>\n<p><code>myCamera.perspective()</code> changes the camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.</p>\n<p>The first parameter, <code>fovy</code>, is the camera’s vertical field of view. It’s\nan angle that describes how tall or narrow a view the camera has. For\nexample, calling <code>myCamera.perspective(0.5)</code> sets the camera’s vertical\nfield of view to 0.5 radians. By default, <code>fovy</code> is calculated based on the\nsketch’s height and the camera’s default z-coordinate, which is 800. The\nformula for the default <code>fovy</code> is <code>2 * atan(height / 2 / 800)</code>.</p>\n<p>The second parameter, <code>aspect</code>, is the camera’s aspect ratio. It’s a number\nthat describes the ratio of the top plane’s width to its height. For\nexample, calling <code>myCamera.perspective(0.5, 1.5)</code> sets the camera’s field\nof view to 0.5 radians and aspect ratio to 1.5, which would make shapes\nappear thinner on a square canvas. By default, <code>aspect</code> is set to\n<code>width / height</code>.</p>\n<p>The third parameter, <code>near</code>, is the distance from the camera to the near\nplane. For example, calling <code>myCamera.perspective(0.5, 1.5, 100)</code> sets the\ncamera’s field of view to 0.5 radians, its aspect ratio to 1.5, and places\nthe near plane 100 pixels from the camera. Any shapes drawn less than 100\npixels from the camera won’t be visible. By default, <code>near</code> is set to\n<code>0.1 * 800</code>, which is 1/10th the default distance between the camera and\nthe origin.</p>\n<p>The fourth parameter, <code>far</code>, is the distance from the camera to the far\nplane. For example, calling <code>myCamera.perspective(0.5, 1.5, 100, 10000)</code>\nsets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5,\nplaces the near plane 100 pixels from the camera, and places the far plane\n10,000 pixels from the camera. Any shapes drawn more than 10,000 pixels\nfrom the camera won’t be visible. By default, <code>far</code> is set to <code>10 * 800</code>,\nwhich is 10 times the default distance between the camera and the origin.</p>\n",
- "itemtype": "method",
- "name": "perspective",
- "params": [
+ "overloads": [
{
- "name": "fovy",
- "description": "<p>camera frustum vertical field of view. Defaults to\n <code>2 * atan(height / 2 / 800)</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "w",
+ "description": "width of the subsection to be returned.",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "description": "height of the subsection to be returned.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "p5.Image"
+ }
},
{
- "name": "aspect",
- "description": "<p>camera frustum aspect ratio. Defaults to\n <code>width / height</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [],
+ "return": {
+ "description": "whole <a href=\"#/p5.Image\">p5.Image</a>",
+ "type": "p5.Image"
+ }
},
{
- "name": "near",
- "description": "<p>distance from the camera to the near clipping plane.\n Defaults to <code>0.1 * 800</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "color of the pixel at (x, y) in array format <code>[R, G, B, A]</code>.",
+ "type": "Number[]"
+ }
},
{
- "name": "far",
- "description": "<p>distance from the camera to the far clipping plane.\n Defaults to <code>10 * 800</code>.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right.\n cam2.camera(400, -400, 800);\n\n // Set its fovy to 0.2.\n // Set its aspect to 1.5.\n // Set its near to 600.\n // Set its far to 1200.\n cam2.perspective(0.2, 1.5, 600, 1200);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between a frontal view and a skewed aerial view when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right.\n cam2.camera(400, -400, 800);\n\n // Set its fovy to 0.2.\n // Set its aspect to 1.5.\n // Set its near to 600.\n // Set its far to 1200.\n cam2.perspective(0.2, 1.5, 600, 1200);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube moves left and right on a gray background. The camera toggles between a frontal and a skewed aerial view when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin left and right.\n let x = 100 * sin(frameCount * 0.01);\n translate(x, 0, 0);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 2086,
- "description": "<p>Sets an orthographic projection for the camera.</p>\n<p>In an orthographic projection, shapes with the same size always appear the\nsame size, regardless of whether they are near or far from the camera.</p>\n<p><code>myCamera.ortho()</code> changes the camera’s perspective by changing its viewing\nfrustum from a truncated pyramid to a rectangular prism. The frustum is the\nvolume of space that’s visible to the camera. The camera is placed in front\nof the frustum and views everything within the frustum. <code>myCamera.ortho()</code>\nhas six optional parameters to define the viewing frustum.</p>\n<p>The first four parameters, <code>left</code>, <code>right</code>, <code>bottom</code>, and <code>top</code>, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\n<code>myCamera.ortho(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels\nwide and 400 pixels tall. By default, these dimensions are set based on\nthe sketch’s width and height, as in\n<code>myCamera.ortho(-width / 2, width / 2, -height / 2, height / 2)</code>.</p>\n<p>The last two parameters, <code>near</code> and <code>far</code>, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\n<code>myCamera.ortho(-100, 100, 200, -200, 50, 1000)</code> creates a frustum that’s\n200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and\nends 1,000 pixels from the camera. By default, <code>near</code> and <code>far</code> are set to\n0 and <code>max(width, height) + 800</code>, respectively.</p>\n",
- "itemtype": "method",
- "name": "ortho",
- "params": [
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "w",
+ "description": "width of the subsection to be returned.",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "description": "height of the subsection to be returned.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "p5.Image"
+ }
+ },
{
- "name": "left",
- "description": "<p>x-coordinate of the frustum’s left plane. Defaults to <code>-width / 2</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [],
+ "return": {
+ "description": "whole <a href=\"#/p5.Image\">p5.Image</a>",
+ "type": "p5.Image"
+ }
},
{
- "name": "right",
- "description": "<p>x-coordinate of the frustum’s right plane. Defaults to <code>width / 2</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "color of the pixel at (x, y) in array format <code>[R, G, B, A]</code>.",
+ "type": "Number[]"
+ }
},
{
- "name": "bottom",
- "description": "<p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height / 2</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "w",
+ "description": "width of the subsection to be returned.",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "description": "height of the subsection to be returned.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "p5.Image"
+ }
},
{
- "name": "top",
- "description": "<p>y-coordinate of the frustum’s top plane. Defaults to <code>-height / 2</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [],
+ "return": {
+ "description": "whole <a href=\"#/p5.Image\">p5.Image</a>",
+ "type": "p5.Image"
+ }
},
{
- "name": "near",
- "description": "<p>z-coordinate of the frustum’s near plane. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "color of the pixel at (x, y) in array format <code>[R, G, B, A]</code>.",
+ "type": "Number[]"
+ }
},
{
- "name": "far",
- "description": "<p>z-coordinate of the frustum’s far plane. Defaults to <code>max(width, height) + 800</code>.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Apply an orthographic projection.\n cam2.ortho();\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A row of white cubes against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Apply an orthographic projection.\n cam2.ortho();\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A row of white cubes slither like a snake against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n push();\n // Calculate the box's coordinates.\n let x = 10 * sin(frameCount * 0.02 + i * 0.6);\n let z = -40 * i;\n // Translate the origin.\n translate(x, 0, z);\n // Draw the box.\n box(10);\n pop();\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 2274,
- "description": "<p>Sets the camera's frustum.</p>\n<p>In a frustum projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes.</p>\n<p><code>myCamera.frustum()</code> changes the camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.</p>\n<p>The first four parameters, <code>left</code>, <code>right</code>, <code>bottom</code>, and <code>top</code>, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\n<code>myCamera.frustum(-100, 100, 200, -200)</code> creates a frustum that’s 200\npixels wide and 400 pixels tall. By default, these coordinates are set\nbased on the sketch’s width and height, as in\n<code>myCamera.frustum(-width / 20, width / 20, height / 20, -height / 20)</code>.</p>\n<p>The last two parameters, <code>near</code> and <code>far</code>, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\n<code>myCamera.frustum(-100, 100, 200, -200, 50, 1000)</code> creates a frustum that’s\n200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and ends\n1,000 pixels from the camera. By default, near is set to <code>0.1 * 800</code>, which\nis 1/10th the default distance between the camera and the origin. <code>far</code> is\nset to <code>10 * 800</code>, which is 10 times the default distance between the\ncamera and the origin.</p>\n",
- "itemtype": "method",
- "name": "frustum",
- "params": [
- {
- "name": "left",
- "description": "<p>x-coordinate of the frustum’s left plane. Defaults to <code>-width / 20</code>.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "right",
- "description": "<p>x-coordinate of the frustum’s right plane. Defaults to <code>width / 20</code>.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "bottom",
- "description": "<p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height / 20</code>.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "top",
- "description": "<p>y-coordinate of the frustum’s top plane. Defaults to <code>-height / 20</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "w",
+ "description": "width of the subsection to be returned.",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "description": "height of the subsection to be returned.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "p5.Image"
+ }
},
{
- "name": "near",
- "description": "<p>z-coordinate of the frustum’s near plane. Defaults to <code>0.1 * 800</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [],
+ "return": {
+ "description": "whole <a href=\"#/p5.Image\">p5.Image</a>",
+ "type": "p5.Image"
+ }
},
{
- "name": "far",
- "description": "<p>z-coordinate of the frustum’s far plane. Defaults to <code>10 * 800</code>.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "color of the pixel at (x, y) in array format <code>[R, G, B, A]</code>.",
+ "type": "Number[]"
+ }
}
],
- "example": [
- "\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Adjust the frustum.\n // Center it.\n // Set its width and height to 20 pixels.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n cam2.frustum(-10, 10, -10, 10, 300, 350);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera zooms in on one cube when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
+ "return": {
+ "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "p5.Image"
+ },
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/webgl/p5.Camera.js",
- "line": 2472,
- "description": "<p>Rotates the camera in a clockwise/counter-clockwise direction.</p>\n<p>Rolling rotates the camera without changing its orientation. The rotation\nhappens in the camera’s \"local\" space.</p>\n<p>The parameter, <code>angle</code>, is the angle the camera should rotate. Passing a\npositive angle, as in <code>myCamera.roll(0.001)</code>, rotates the camera in counter-clockwise direction.\nPassing a negative angle, as in <code>myCamera.roll(-0.001)</code>, rotates the\ncamera in clockwise direction.</p>\n<p>Note: Angles are interpreted based on the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
+ "name": "set",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 613,
"itemtype": "method",
- "name": "roll",
- "params": [
- {
- "name": "angle",
- "description": "<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.</p>\n",
- "type": "Number"
- }
- ],
+ "description": "<p>Sets the color of one or more pixels within an image.</p>\n<p><code>img.set()</code> is easy to use but it's not as fast as\n<a href=\"#/p5.Image/pixels\">img.pixels</a>. Use\n<a href=\"#/p5.Image/pixels\">img.pixels</a> to set many pixel values.</p>\n<p><code>img.set()</code> interprets the first two parameters as x- and y-coordinates. It\ninterprets the last parameter as a grayscale value, a <code>[R, G, B, A]</code> pixel\narray, a <a href=\"#/p5.Color\">p5.Color</a> object, or another\n<a href=\"#/p5.Image\">p5.Image</a> object.</p>\n<p><a href=\"#/p5.Image/updatePixels\">img.updatePixels()</a> must be called\nafter using <code>img.set()</code> for changes to appear.</p>\n",
"example": [
- "\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n normalMaterial();\n // Create a p5.Camera object.\n cam = createCamera();\n}\n\nfunction draw() {\n background(200);\n\n // Roll camera according to angle 'delta'\n cam.roll(delta);\n\n translate(0, 0, 0);\n box(20);\n translate(0, 25, 0);\n box(20);\n translate(0, 26, 0);\n box(20);\n translate(0, 27, 0);\n box(20);\n translate(0, 28, 0);\n box(20);\n translate(0,29, 0);\n box(20);\n translate(0, 30, 0);\n box(20);\n}\n</code>\n</div>"
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Set four pixels to black.\n img.set(30, 20, 0);\n img.set(85, 20, 0);\n img.set(85, 75, 0);\n img.set(30, 75, 0);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Create a p5.Color object.\n let black = color(0);\n\n // Set four pixels to black.\n img.set(30, 20, black);\n img.set(85, 20, black);\n img.set(85, 75, black);\n img.set(30, 75, black);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Draw a color gradient.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n let c = map(x, 0, img.width, 0, 255);\n img.set(x, y, c);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A square with a horiztonal color gradient from black to white drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Create a p5.Image object.\n let img2 = createImage(100, 100);\n\n // Set the blank image's pixels using the landscape.\n img2.set(0, 0, img);\n\n // Display the second image.\n image(img2, 0, 0);\n\n describe('An image of a mountain landscape.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Set four pixels to black.\n img.set(30, 20, 0);\n img.set(85, 20, 0);\n img.set(85, 75, 0);\n img.set(30, 75, 0);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Create a p5.Color object.\n let black = color(0);\n\n // Set four pixels to black.\n img.set(30, 20, black);\n img.set(85, 20, black);\n img.set(85, 75, black);\n img.set(30, 75, black);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Draw a color gradient.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n let c = map(x, 0, img.width, 0, 255);\n img.set(x, y, c);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A square with a horiztonal color gradient from black to white drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Create a p5.Image object.\n let img2 = createImage(100, 100);\n\n // Set the blank image's pixels using the landscape.\n img2.set(0, 0, img);\n\n // Display the second image.\n image(img2, 0, 0);\n\n describe('An image of a mountain landscape.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Set four pixels to black.\n img.set(30, 20, 0);\n img.set(85, 20, 0);\n img.set(85, 75, 0);\n img.set(30, 75, 0);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Create a p5.Color object.\n let black = color(0);\n\n // Set four pixels to black.\n img.set(30, 20, black);\n img.set(85, 20, black);\n img.set(85, 75, black);\n img.set(30, 75, black);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Draw a color gradient.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n let c = map(x, 0, img.width, 0, 255);\n img.set(x, y, c);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A square with a horiztonal color gradient from black to white drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Create a p5.Image object.\n let img2 = createImage(100, 100);\n\n // Set the blank image's pixels using the landscape.\n img2.set(0, 0, img);\n\n // Display the second image.\n image(img2, 0, 0);\n\n describe('An image of a mountain landscape.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Set four pixels to black.\n img.set(30, 20, 0);\n img.set(85, 20, 0);\n img.set(85, 75, 0);\n img.set(30, 75, 0);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(100, 100);\n\n // Create a p5.Color object.\n let black = color(0);\n\n // Set four pixels to black.\n img.set(30, 20, black);\n img.set(85, 20, black);\n img.set(85, 75, black);\n img.set(30, 75, black);\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Four black dots arranged in a square drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Image object.\n let img = createImage(66, 66);\n\n // Draw a color gradient.\n for (let x = 0; x < img.width; x += 1) {\n for (let y = 0; y < img.height; y += 1) {\n let c = map(x, 0, img.width, 0, 255);\n img.set(x, y, c);\n }\n }\n\n // Update the image.\n img.updatePixels();\n\n // Display the image.\n image(img, 17, 17);\n\n describe('A square with a horiztonal color gradient from black to white drawn on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Create a p5.Image object.\n let img2 = createImage(100, 100);\n\n // Set the blank image's pixels using the landscape.\n img2.set(0, 0, img);\n\n // Display the second image.\n image(img2, 0, 0);\n\n describe('An image of a mountain landscape.');\n}\n</code>\n</div>"
],
- "alt": "camera view rotates in counter clockwise direction with vertically stacked boxes in front of it.",
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 2550,
- "description": "<p>Rotates the camera left and right.</p>\n<p>Panning rotates the camera without changing its position. The rotation\nhappens in the camera’s \"local\" space.</p>\n<p>The parameter, <code>angle</code>, is the angle the camera should rotate. Passing a\npositive angle, as in <code>myCamera.pan(0.001)</code>, rotates the camera to the\nright. Passing a negative angle, as in <code>myCamera.pan(-0.001)</code>, rotates the\ncamera to the left.</p>\n<p>Note: Angles are interpreted based on the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
- "itemtype": "method",
- "name": "pan",
- "params": [
+ "overloads": [
{
- "name": "angle",
- "description": "<p>amount to rotate in the current\n <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "a",
+ "description": "grayscale value | pixel array |\n<a href=\"#/p5.Color\">p5.Color</a> object |\n<a href=\"#/p5.Image\">p5.Image</a> to copy.",
+ "type": "Number|Number[]|Object"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "a",
+ "description": "grayscale value | pixel array |\n<a href=\"#/p5.Color\">p5.Color</a> object |\n<a href=\"#/p5.Image\">p5.Image</a> to copy.",
+ "type": "Number|Number[]|Object"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "a",
+ "description": "grayscale value | pixel array |\n<a href=\"#/p5.Color\">p5.Color</a> object |\n<a href=\"#/p5.Image\">p5.Image</a> to copy.",
+ "type": "Number|Number[]|Object"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the pixel.",
+ "type": "Number"
+ },
+ {
+ "name": "a",
+ "description": "grayscale value | pixel array |\n<a href=\"#/p5.Color\">p5.Color</a> object |\n<a href=\"#/p5.Image\">p5.Image</a> to copy.",
+ "type": "Number|Number[]|Object"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Pan with the camera.\n cam.pan(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/webgl/p5.Camera.js",
- "line": 2613,
- "description": "<p>Rotates the camera up and down.</p>\n<p>Tilting rotates the camera without changing its position. The rotation\nhappens in the camera’s \"local\" space.</p>\n<p>The parameter, <code>angle</code>, is the angle the camera should rotate. Passing a\npositive angle, as in <code>myCamera.tilt(0.001)</code>, rotates the camera down.\nPassing a negative angle, as in <code>myCamera.tilt(-0.001)</code>, rotates the camera\nup.</p>\n<p>Note: Angles are interpreted based on the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
+ "name": "resize",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 771,
"itemtype": "method",
- "name": "tilt",
- "params": [
- {
- "name": "angle",
- "description": "<p>amount to rotate in the current\n <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
- "type": "Number"
- }
- ],
+ "description": "<p>Resizes the image to a given width and height.</p>\n<p>The image's original aspect ratio can be kept by passing 0 for either\n<code>width</code> or <code>height</code>. For example, calling <code>img.resize(50, 0)</code> on an image\nthat was 500 × 300 pixels will resize it to 50 × 30 pixels.</p>\n",
"example": [
- "\n<div>\n<code>\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera tilts up and down.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Pan with the camera.\n cam.tilt(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image.\n img.resize(50, 100);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(0, 30);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(60, 0);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image.\n img.resize(50, 100);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(0, 30);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(60, 0);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image.\n img.resize(50, 100);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(0, 30);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(60, 0);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image.\n img.resize(50, 100);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(0, 30);\n\n // Display the resized image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n // Resize the image, keeping the aspect ratio.\n img.resize(60, 0);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');\n}\n</code>\n</div>"
],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 2676,
- "description": "<p>Points the camera at a location.</p>\n<p><code>myCamera.lookAt()</code> changes the camera’s orientation without changing its\nposition.</p>\n<p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are the coordinates in \"world\" space\nwhere the camera should point. For example, calling\n<code>myCamera.lookAt(10, 20, 30)</code> points the camera at the coordinates\n<code>(10, 20, 30)</code>.</p>\n",
- "itemtype": "method",
- "name": "lookAt",
- "params": [
+ "overloads": [
{
- "name": "x",
- "description": "<p>x-coordinate of the position where the camera should look in \"world\" space.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "width",
+ "description": "resized image width.",
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "resized image height.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "y",
- "description": "<p>y-coordinate of the position where the camera should look in \"world\" space.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "width",
+ "description": "resized image width.",
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "resized image height.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "z",
- "description": "<p>z-coordinate of the position where the camera should look in \"world\" space.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "width",
+ "description": "resized image width.",
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "resized image height.",
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "width",
+ "description": "resized image width.",
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "resized image height.",
+ "type": "Number"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\n// Double-click to look at a different cube.\n\nlet cam;\nlet isLookingLeft = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(-30, 0, 0);\n\n describe(\n 'A red cube and a blue cube on a gray background. The camera switches focus between the cubes when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box on the left.\n push();\n // Translate the origin to the left.\n translate(-30, 0, 0);\n // Style the box.\n fill(255, 0, 0);\n // Draw the box.\n box(20);\n pop();\n\n // Draw the box on the right.\n push();\n // Translate the origin to the right.\n translate(30, 0, 0);\n // Style the box.\n fill(0, 0, 255);\n // Draw the box.\n box(20);\n pop();\n}\n\n// Change the camera's focus when the user double-clicks.\nfunction doubleClicked() {\n if (isLookingLeft === true) {\n cam.lookAt(30, 0, 0);\n isLookingLeft = false;\n } else {\n cam.lookAt(-30, 0, 0);\n isLookingLeft = true;\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/webgl/p5.Camera.js",
- "line": 2773,
- "description": "<p>Sets the position and orientation of the camera.</p>\n<p><code>myCamera.camera()</code> allows objects to be viewed from different angles. It\nhas nine parameters that are all optional.</p>\n<p>The first three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are the coordinates of the\ncamera’s position in \"world\" space. For example, calling\n<code>myCamera.camera(0, 0, 0)</code> places the camera at the origin <code>(0, 0, 0)</code>. By\ndefault, the camera is placed at <code>(0, 0, 800)</code>.</p>\n<p>The next three parameters, <code>centerX</code>, <code>centerY</code>, and <code>centerZ</code> are the\ncoordinates of the point where the camera faces in \"world\" space. For\nexample, calling <code>myCamera.camera(0, 0, 0, 10, 20, 30)</code> places the camera\nat the origin <code>(0, 0, 0)</code> and points it at <code>(10, 20, 30)</code>. By default, the\ncamera points at the origin <code>(0, 0, 0)</code>.</p>\n<p>The last three parameters, <code>upX</code>, <code>upY</code>, and <code>upZ</code> are the components of\nthe \"up\" vector in \"local\" space. The \"up\" vector orients the camera’s\ny-axis. For example, calling\n<code>myCamera.camera(0, 0, 0, 10, 20, 30, 0, -1, 0)</code> places the camera at the\norigin <code>(0, 0, 0)</code>, points it at <code>(10, 20, 30)</code>, and sets the \"up\" vector\nto <code>(0, -1, 0)</code> which is like holding it upside-down. By default, the \"up\"\nvector is <code>(0, 1, 0)</code>.</p>\n",
+ "name": "copy",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 942,
"itemtype": "method",
- "name": "camera",
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate of the camera. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Copies pixels from a source image to this image.</p>\n<p>The first parameter, <code>srcImage</code>, is an optional\n<a href=\"#/p5.Image\">p5.Image</a> object to copy. If a source image isn't\npassed, then <code>img.copy()</code> can copy a region of this image to another\nregion.</p>\n<p>The next four parameters, <code>sx</code>, <code>sy</code>, <code>sw</code>, and <code>sh</code> determine the region\nto copy from the source image. <code>(sx, sy)</code> is the top-left corner of the\nregion. <code>sw</code> and <code>sh</code> are the region's width and height.</p>\n<p>The next four parameters, <code>dx</code>, <code>dy</code>, <code>dw</code>, and <code>dh</code> determine the region\nof this image to copy into. <code>(dx, dy)</code> is the top-left corner of the\nregion. <code>dw</code> and <code>dh</code> are the region's width and height.</p>\n<p>Calling <code>img.copy()</code> will scale pixels from the source region if it isn't\nthe same size as the destination region.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Copy one region of the image to another.\n img.copy(7, 22, 10, 10, 35, 25, 50, 50);\n\n // Display the image.\n image(img, 0, 0);\n\n // Outline the copied region.\n stroke(255);\n noFill();\n square(7, 22, 10);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks.jpg');\n createCanvas(100, 100);\n\n // Calculate the center of the bricks image.\n let x = bricks.width / 2;\n let y = bricks.height / 2;\n\n // Copy the bricks to the mountains image.\n mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Copy one region of the image to another.\n img.copy(7, 22, 10, 10, 35, 25, 50, 50);\n\n // Display the image.\n image(img, 0, 0);\n\n // Outline the copied region.\n stroke(255);\n noFill();\n square(7, 22, 10);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks.jpg');\n createCanvas(100, 100);\n\n // Calculate the center of the bricks image.\n let x = bricks.width / 2;\n let y = bricks.height / 2;\n\n // Copy the bricks to the mountains image.\n mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Copy one region of the image to another.\n img.copy(7, 22, 10, 10, 35, 25, 50, 50);\n\n // Display the image.\n image(img, 0, 0);\n\n // Outline the copied region.\n stroke(255);\n noFill();\n square(7, 22, 10);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks.jpg');\n createCanvas(100, 100);\n\n // Calculate the center of the bricks image.\n let x = bricks.width / 2;\n let y = bricks.height / 2;\n\n // Copy the bricks to the mountains image.\n mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Copy one region of the image to another.\n img.copy(7, 22, 10, 10, 35, 25, 50, 50);\n\n // Display the image.\n image(img, 0, 0);\n\n // Outline the copied region.\n stroke(255);\n noFill();\n square(7, 22, 10);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks.jpg');\n createCanvas(100, 100);\n\n // Calculate the center of the bricks image.\n let x = bricks.width / 2;\n let y = bricks.height / 2;\n\n // Copy the bricks to the mountains image.\n mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "y",
- "description": "<p>y-coordinate of the camera. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "z",
- "description": "<p>z-coordinate of the camera. Defaults to 800.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "centerX",
- "description": "<p>x-coordinate of the point the camera faces. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "centerY",
- "description": "<p>y-coordinate of the point the camera faces. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "srcImage",
+ "description": "source image.",
+ "type": "p5.Image|p5.Element"
+ },
+ {
+ "name": "sx",
+ "description": "x-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "description": "y-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "description": "source image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "description": "source image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "description": "x-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "description": "y-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "description": "destination image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "description": "destination image height.",
+ "type": "Integer"
+ }
+ ]
},
{
- "name": "centerZ",
- "description": "<p>z-coordinate of the point the camera faces. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "sx",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "type": "Integer"
+ }
+ ]
},
{
- "name": "upX",
- "description": "<p>x-component of the camera’s \"up\" vector. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "srcImage",
+ "description": "source image.",
+ "type": "p5.Image|p5.Element"
+ },
+ {
+ "name": "sx",
+ "description": "x-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "description": "y-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "description": "source image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "description": "source image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "description": "x-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "description": "y-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "description": "destination image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "description": "destination image height.",
+ "type": "Integer"
+ }
+ ]
},
{
- "name": "upY",
- "description": "<p>x-component of the camera’s \"up\" vector. Defaults to 1.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "sx",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "type": "Integer"
+ }
+ ]
},
{
- "name": "upZ",
- "description": "<p>z-component of the camera’s \"up\" vector. Defaults to 0.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right: (1200, -600, 100)\n // Point it at the row of boxes: (-10, -10, 400)\n // Set its \"up\" vector to the default: (0, 1, 0)\n cam2.camera(1200, -600, 100, -10, -10, 400, 0, 1, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a frontal and an aerial view when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the right: (1200, 0, 100)\n // Point it at the row of boxes: (-10, -10, 400)\n // Set its \"up\" vector to the default: (0, 1, 0)\n cam2.camera(1200, 0, 100, -10, -10, 400, 0, 1, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a static frontal view and an orbiting view when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's position.\n let x = 1200 * cos(frameCount * 0.01);\n let y = -600 * sin(frameCount * 0.01);\n cam2.camera(x, y, 100, -10, -10, 400, 0, 1, 0);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 3001,
- "description": "<p>Moves the camera along its \"local\" axes without changing its orientation.</p>\n<p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are the distances the camera should\nmove. For example, calling <code>myCamera.move(10, 20, 30)</code> moves the camera 10\npixels to the right, 20 pixels down, and 30 pixels backward in its \"local\"\nspace.</p>\n",
- "itemtype": "method",
- "name": "move",
- "params": [
- {
- "name": "x",
- "description": "<p>distance to move along the camera’s \"local\" x-axis.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "srcImage",
+ "description": "source image.",
+ "type": "p5.Image|p5.Element"
+ },
+ {
+ "name": "sx",
+ "description": "x-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "description": "y-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "description": "source image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "description": "source image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "description": "x-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "description": "y-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "description": "destination image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "description": "destination image height.",
+ "type": "Integer"
+ }
+ ]
},
{
- "name": "y",
- "description": "<p>distance to move along the camera’s \"local\" y-axis.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "sx",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "type": "Integer"
+ }
+ ]
},
{
- "name": "z",
- "description": "<p>distance to move along the camera’s \"local\" z-axis.</p>\n",
- "type": "Number"
- }
- ],
- "example": [
- "\n<div>\n<code>\n// Click the canvas to begin detecting key presses.\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube drawn against a gray background. The cube appears to move when the user presses certain keys.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Move the camera along its \"local\" axes\n // when the user presses certain keys.\n if (keyIsPressed === true) {\n\n // Move horizontally.\n if (keyCode === LEFT_ARROW) {\n cam.move(-1, 0, 0);\n }\n if (keyCode === RIGHT_ARROW) {\n cam.move(1, 0, 0);\n }\n\n // Move vertically.\n if (keyCode === UP_ARROW) {\n cam.move(0, -1, 0);\n }\n if (keyCode === DOWN_ARROW) {\n cam.move(0, 1, 0);\n }\n\n // Move in/out of the screen.\n if (key === 'i') {\n cam.move(0, 0, -1);\n }\n if (key === 'o') {\n cam.move(0, 0, 1);\n }\n }\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 3098,
- "description": "<p>Sets the camera’s position in \"world\" space without changing its\norientation.</p>\n<p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are the coordinates where the camera\nshould be placed. For example, calling <code>myCamera.setPosition(10, 20, 30)</code>\nplaces the camera at coordinates <code>(10, 20, 30)</code> in \"world\" space.</p>\n",
- "itemtype": "method",
- "name": "setPosition",
- "params": [
- {
- "name": "x",
- "description": "<p>x-coordinate in \"world\" space.</p>\n",
- "type": "Number"
- },
- {
- "name": "y",
- "description": "<p>y-coordinate in \"world\" space.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "srcImage",
+ "description": "source image.",
+ "type": "p5.Image|p5.Element"
+ },
+ {
+ "name": "sx",
+ "description": "x-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "description": "y-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "description": "source image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "description": "source image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "description": "x-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "description": "y-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "description": "destination image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "description": "destination image height.",
+ "type": "Integer"
+ }
+ ]
},
{
- "name": "z",
- "description": "<p>z-coordinate in \"world\" space.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "sx",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "type": "Integer"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it closer to the origin.\n cam2.setPosition(0, 0, 600);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles the amount of zoom when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it closer to the origin.\n cam2.setPosition(0, 0, 600);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a static view and a view that zooms in and out when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's z-coordinate.\n let z = 100 * sin(frameCount * 0.01) + 700;\n cam2.setPosition(0, 0, z);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/webgl/p5.Camera.js",
- "line": 3252,
- "description": "<p>Sets the camera’s position, orientation, and projection by copying another\ncamera.</p>\n<p>The parameter, <code>cam</code>, is the <code>p5.Camera</code> object to copy. For example, calling\n<code>cam2.set(cam1)</code> will set <code>cam2</code> using <code>cam1</code>’s configuration.</p>\n",
+ "name": "mask",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 1060,
"itemtype": "method",
- "name": "set",
- "params": [
- {
- "name": "cam",
- "description": "<p>camera to copy.</p>\n",
- "type": "p5.Camera"
- }
- ],
+ "description": "<p>Masks part of the image with another.</p>\n<p><code>img.mask()</code> uses another <a href=\"#/p5.Image\">p5.Image</a> object's\nalpha channel as the alpha channel for this image. Masks are cumulative\nand can't be removed once applied. If the mask has a different\npixel density from this image, the mask will be scaled.</p>\n",
"example": [
- "\n<div>\n<code>\n// Double-click to \"reset\" the camera zoom.\n\nlet cam1;\nlet cam2;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n cam1 = createCamera();\n\n // Place the camera at the top-right.\n cam1.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam1.lookAt(0, 0, 0);\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Copy cam1's configuration.\n cam2.set(cam1);\n\n describe(\n 'A white cube drawn against a gray background. The camera slowly moves forward. The camera resets when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's position.\n cam2.move(0, 0, -1);\n\n // Draw the box.\n box();\n}\n\n// \"Reset\" the camera when the user double-clicks.\nfunction doubleClicked() {\n cam2.set(cam1);\n}"
+ "<div>\n<code>\nlet photo;\nlet maskImage;\n\nasync function setup() {\n // Load the images.\n photo = await loadImage('assets/rockies.jpg');\n maskImage = await loadImage('assets/mask2.png');\n createCanvas(100, 100);\n\n // Apply the mask.\n photo.mask(maskImage);\n\n // Display the image.\n image(photo, 0, 0);\n\n describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet photo;\nlet maskImage;\n\nasync function setup() {\n // Load the images.\n photo = await loadImage('assets/rockies.jpg');\n maskImage = await loadImage('assets/mask2.png');\n createCanvas(100, 100);\n\n // Apply the mask.\n photo.mask(maskImage);\n\n // Display the image.\n image(photo, 0, 0);\n\n describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet photo;\nlet maskImage;\n\nasync function setup() {\n // Load the images.\n photo = await loadImage('assets/rockies.jpg');\n maskImage = await loadImage('assets/mask2.png');\n createCanvas(100, 100);\n\n // Apply the mask.\n photo.mask(maskImage);\n\n // Display the image.\n image(photo, 0, 0);\n\n describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet photo;\nlet maskImage;\n\nasync function setup() {\n // Load the images.\n photo = await loadImage('assets/rockies.jpg');\n maskImage = await loadImage('assets/mask2.png');\n createCanvas(100, 100);\n\n // Apply the mask.\n photo.mask(maskImage);\n\n // Display the image.\n image(photo, 0, 0);\n\n describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');\n}\n</code>\n</div>"
],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Camera.js",
- "line": 3329,
- "description": "<p>Sets the camera’s position and orientation to values that are in-between\nthose of two other cameras.</p>\n<p><code>myCamera.slerp()</code> uses spherical linear interpolation to calculate a\nposition and orientation that’s in-between two other cameras. Doing so is\nhelpful for transitioning smoothly between two perspectives.</p>\n<p>The first two parameters, <code>cam0</code> and <code>cam1</code>, are the <code>p5.Camera</code> objects\nthat should be used to set the current camera.</p>\n<p>The third parameter, <code>amt</code>, is the amount to interpolate between <code>cam0</code> and\n<code>cam1</code>. 0.0 keeps the camera’s position and orientation equal to <code>cam0</code>’s,\n0.5 sets them halfway between <code>cam0</code>’s and <code>cam1</code>’s , and 1.0 sets the\nposition and orientation equal to <code>cam1</code>’s.</p>\n<p>For example, calling <code>myCamera.slerp(cam0, cam1, 0.1)</code> sets cam’s position\nand orientation very close to <code>cam0</code>’s. Calling\n<code>myCamera.slerp(cam0, cam1, 0.9)</code> sets cam’s position and orientation very\nclose to <code>cam1</code>’s.</p>\n<p>Note: All of the cameras must use the same projection.</p>\n",
- "itemtype": "method",
- "name": "slerp",
- "params": [
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "srcImage",
+ "description": "source image.",
+ "type": "p5.Image"
+ }
+ ]
+ },
{
- "name": "cam0",
- "description": "<p>first camera.</p>\n",
- "type": "p5.Camera"
+ "params": [
+ {
+ "name": "srcImage",
+ "description": "source image.",
+ "type": "p5.Image"
+ }
+ ]
},
{
- "name": "cam1",
- "description": "<p>second camera.</p>\n",
- "type": "p5.Camera"
+ "params": [
+ {
+ "name": "srcImage",
+ "description": "source image.",
+ "type": "p5.Image"
+ }
+ ]
},
{
- "name": "amt",
- "description": "<p>amount of interpolation between 0.0 (<code>cam0</code>) and 1.0 (<code>cam1</code>).</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "srcImage",
+ "description": "source image.",
+ "type": "p5.Image"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\nlet cam;\nlet cam0;\nlet cam1;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the main camera.\n // Keep its default settings.\n cam = createCamera();\n\n // Create the first camera.\n // Keep its default settings.\n cam0 = createCamera();\n\n // Create the second camera.\n cam1 = createCamera();\n\n // Place it at the top-right.\n cam1.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam1.lookAt(0, 0, 0);\n\n // Set the current camera to cam.\n setCamera(cam);\n\n describe('A white cube drawn against a gray background. The camera slowly oscillates between a frontal view and an aerial view.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the amount to interpolate between cam0 and cam1.\n let amt = 0.5 * sin(frameCount * 0.01) + 0.5;\n\n // Update the main camera's position and orientation.\n cam.slerp(cam0, cam1, amt);\n\n box();\n}\n</code>\n</div>"
- ],
- "class": "p5.Camera",
- "module": "3D",
- "submodule": "Camera"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/webgl/p5.Camera.js",
- "line": 3897,
- "description": "<p>Sets the current (active) camera of a 3D sketch.</p>\n<p><code>setCamera()</code> allows for switching between multiple cameras created with\n<a href=\"#/p5/createCamera\">createCamera()</a>.</p>\n<p>Note: <code>setCamera()</code> can only be used in WebGL mode.</p>\n",
+ "name": "filter",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 1321,
"itemtype": "method",
- "name": "setCamera",
- "params": [
- {
- "name": "cam",
- "description": "<p>camera that should be made active.</p>\n",
- "type": "p5.Camera"
- }
- ],
- "example": [
- "\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n setCamera(cam2);\n usingCam1 = false;\n } else {\n setCamera(cam1);\n usingCam1 = true;\n }\n}\n</code>\n</div>"
- ],
- "class": "p5",
- "module": "3D",
- "submodule": "Camera"
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 111,
- "description": "<p>An array containing the color of each pixel in the framebuffer.</p>\n<p><a href=\"#/p5.Framebuffer/loadPixels\">myBuffer.loadPixels()</a> must be\ncalled before accessing the <code>myBuffer.pixels</code> array.\n<a href=\"#/p5.Framebuffer/updatePixels\">myBuffer.updatePixels()</a>\nmust be called after any changes are made.</p>\n<p>Note: Updating pixels via this property is slower than drawing to the\nframebuffer directly. Consider using a\n<a href=\"#/p5.Shader\">p5.Shader</a> object instead of looping over\n<code>myBuffer.pixels</code>.</p>\n",
- "itemtype": "property",
- "name": "pixels",
- "type": "Number[]",
+ "description": "<p>Applies an image filter to the image.</p>\n<p>The preset options are:</p>\n<p><code>INVERT</code>\nInverts the colors in the image. No parameter is used.</p>\n<p><code>GRAY</code>\nConverts the image to grayscale. No parameter is used.</p>\n<p><code>THRESHOLD</code>\nConverts the image to black and white. Pixels with a grayscale value\nabove a given threshold are converted to white. The rest are converted to\nblack. The threshold must be between 0.0 (black) and 1.0 (white). If no\nvalue is specified, 0.5 is used.</p>\n<p><code>OPAQUE</code>\nSets the alpha channel to be entirely opaque. No parameter is used.</p>\n<p><code>POSTERIZE</code>\nLimits the number of colors in the image. Each color channel is limited to\nthe number of colors specified. Values between 2 and 255 are valid, but\nresults are most noticeable with lower values. The default value is 4.</p>\n<p><code>BLUR</code>\nBlurs the image. The level of blurring is specified by a blur radius. Larger\nvalues increase the blur. The default value is 4. A gaussian blur is used\nin <code>P2D</code> mode. A box blur is used in <code>WEBGL</code> mode.</p>\n<p><code>ERODE</code>\nReduces the light areas. No parameter is used.</p>\n<p><code>DILATE</code>\nIncreases the light areas. No parameter is used.</p>\n",
"example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Load the pixels array.\n myBuffer.loadPixels();\n\n // Get the number of pixels in the\n // top half of the framebuffer.\n let numPixels = myBuffer.pixels.length / 2;\n\n // Set the framebuffer's top half to pink.\n for (let i = 0; i < numPixels; i += 4) {\n myBuffer.pixels[i] = 255;\n myBuffer.pixels[i + 1] = 102;\n myBuffer.pixels[i + 2] = 204;\n myBuffer.pixels[i + 3] = 255;\n }\n\n // Update the pixels array.\n myBuffer.updatePixels();\n\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, -50, -50);\n\n describe('A pink rectangle above a gray rectangle.');\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the INVERT filter.\n img.filter(INVERT);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blue brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the GRAY filter.\n img.filter(GRAY);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in grayscale.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the THRESHOLD filter.\n img.filter(THRESHOLD);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in black and white.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the OPAQUE filter.\n img.filter(OPAQUE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the POSTERIZE filter.\n img.filter(POSTERIZE, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a red brick wall drawn with a limited color palette.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the BLUR filter.\n img.filter(BLUR, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blurry image of a red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the DILATE filter.\n img.filter(DILATE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with bright lines between each brick.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the ERODE filter.\n img.filter(ERODE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with faint lines between each brick.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the INVERT filter.\n img.filter(INVERT);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blue brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the GRAY filter.\n img.filter(GRAY);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in grayscale.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the THRESHOLD filter.\n img.filter(THRESHOLD);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in black and white.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the OPAQUE filter.\n img.filter(OPAQUE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the POSTERIZE filter.\n img.filter(POSTERIZE, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a red brick wall drawn with a limited color palette.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the BLUR filter.\n img.filter(BLUR, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blurry image of a red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the DILATE filter.\n img.filter(DILATE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with bright lines between each brick.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the ERODE filter.\n img.filter(ERODE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with faint lines between each brick.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the INVERT filter.\n img.filter(INVERT);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blue brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the GRAY filter.\n img.filter(GRAY);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in grayscale.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the THRESHOLD filter.\n img.filter(THRESHOLD);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in black and white.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the OPAQUE filter.\n img.filter(OPAQUE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the POSTERIZE filter.\n img.filter(POSTERIZE, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a red brick wall drawn with a limited color palette.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the BLUR filter.\n img.filter(BLUR, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blurry image of a red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the DILATE filter.\n img.filter(DILATE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with bright lines between each brick.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the ERODE filter.\n img.filter(ERODE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with faint lines between each brick.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the INVERT filter.\n img.filter(INVERT);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blue brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the GRAY filter.\n img.filter(GRAY);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in grayscale.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the THRESHOLD filter.\n img.filter(THRESHOLD);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A brick wall drawn in black and white.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the OPAQUE filter.\n img.filter(OPAQUE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the POSTERIZE filter.\n img.filter(POSTERIZE, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a red brick wall drawn with a limited color palette.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the BLUR filter.\n img.filter(BLUR, 3);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A blurry image of a red brick wall.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the DILATE filter.\n img.filter(DILATE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with bright lines between each brick.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/bricks.jpg');\n\n createCanvas(100, 100);\n\n // Apply the ERODE filter.\n img.filter(ERODE);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('A red brick wall with faint lines between each brick.');\n}\n</code>\n</div>"
],
- "class": "p5.Framebuffer",
- "module": "Rendering"
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 238,
- "description": "<p>Resizes the framebuffer to a given width and height.</p>\n<p>The parameters, <code>width</code> and <code>height</code>, set the dimensions of the\nframebuffer. For example, calling <code>myBuffer.resize(300, 500)</code> resizes\nthe framebuffer to 300×500 pixels, then sets <code>myBuffer.width</code> to 300\nand <code>myBuffer.height</code> 500.</p>\n",
- "itemtype": "method",
- "name": "resize",
- "params": [
+ "overloads": [
{
- "name": "width",
- "description": "<p>width of the framebuffer.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "filterType",
+ "description": "either THRESHOLD, GRAY, OPAQUE, INVERT,\nPOSTERIZE, ERODE, DILATE or BLUR.",
+ "type": "THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|ERODE|DILATE|BLUR"
+ },
+ {
+ "name": "filterParam",
+ "description": "parameter unique to each filter.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
},
{
- "name": "height",
- "description": "<p>height of the framebuffer.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "filterType",
+ "description": "either THRESHOLD, GRAY, OPAQUE, INVERT,\nPOSTERIZE, ERODE, DILATE or BLUR.",
+ "type": "THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|ERODE|DILATE|BLUR"
+ },
+ {
+ "name": "filterParam",
+ "description": "parameter unique to each filter.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "filterType",
+ "description": "either THRESHOLD, GRAY, OPAQUE, INVERT,\nPOSTERIZE, ERODE, DILATE or BLUR.",
+ "type": "THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|ERODE|DILATE|BLUR"
+ },
+ {
+ "name": "filterParam",
+ "description": "parameter unique to each filter.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "filterType",
+ "description": "either THRESHOLD, GRAY, OPAQUE, INVERT,\nPOSTERIZE, ERODE, DILATE or BLUR.",
+ "type": "THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|ERODE|DILATE|BLUR"
+ },
+ {
+ "name": "filterParam",
+ "description": "parameter unique to each filter.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
}
],
- "example": [
- "\n<div>\n<code>\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('A multicolor sphere on a white surface. The image grows larger or smaller when the user moves the mouse, revealing a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(255);\n normalMaterial();\n sphere(20);\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -50, -50);\n}\n\n// Resize the p5.Framebuffer object when the\n// user moves the mouse.\nfunction mouseMoved() {\n myBuffer.resize(mouseX, mouseY);\n}\n</code>\n</div>"
- ],
- "class": "p5.Framebuffer",
- "module": "Rendering"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 297,
- "description": "<p>Sets the framebuffer's pixel density or returns its current density.</p>\n<p>Computer displays are grids of little lights called pixels. A display's\npixel density describes how many pixels it packs into an area. Displays\nwith smaller pixels have a higher pixel density and create sharper\nimages.</p>\n<p>The parameter, <code>density</code>, is optional. If a number is passed, as in\n<code>myBuffer.pixelDensity(1)</code>, it sets the framebuffer's pixel density. By\ndefault, the framebuffer's pixel density will match that of the canvas\nwhere it was created. All canvases default to match the display's pixel\ndensity.</p>\n<p>Calling <code>myBuffer.pixelDensity()</code> without an argument returns its current\npixel density.</p>\n",
+ "name": "blend",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 1455,
"itemtype": "method",
- "name": "pixelDensity",
- "params": [
- {
- "name": "density",
- "description": "<p>pixel density to set.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "return": {
- "description": "current pixel density.",
- "type": "Number"
- },
+ "description": "<p>Copies a region of pixels from another image into this one.</p>\n<p>The first parameter, <code>srcImage</code>, is the\n<a href=\"#/p5.Image\">p5.Image</a> object to blend.</p>\n<p>The next four parameters, <code>sx</code>, <code>sy</code>, <code>sw</code>, and <code>sh</code> determine the region\nto blend from the source image. <code>(sx, sy)</code> is the top-left corner of the\nregion. <code>sw</code> and <code>sh</code> are the regions width and height.</p>\n<p>The next four parameters, <code>dx</code>, <code>dy</code>, <code>dw</code>, and <code>dh</code> determine the region\nof the canvas to blend into. <code>(dx, dy)</code> is the top-left corner of the\nregion. <code>dw</code> and <code>dh</code> are the regions width and height.</p>\n<p>The tenth parameter, <code>blendMode</code>, sets the effect used to blend the images'\ncolors. The options are <code>BLEND</code>, <code>DARKEST</code>, <code>LIGHTEST</code>, <code>DIFFERENCE</code>,\n<code>MULTIPLY</code>, <code>EXCLUSION</code>, <code>SCREEN</code>, <code>REPLACE</code>, <code>OVERLAY</code>, <code>HARD_LIGHT</code>,\n<code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>, <code>ADD</code>, or <code>NORMAL</code>.</p>\n",
"example": [
- "\n<div>\n<code>\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe(\"A white circle on a gray canvas. The circle's edge become fuzzy while the user presses and holds the mouse.\");\n}\n\nfunction draw() {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(200);\n circle(0, 0, 40);\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -50, -50);\n}\n\n// Decrease the pixel density when the user\n// presses the mouse.\nfunction mousePressed() {\n myBuffer.pixelDensity(1);\n}\n\n// Increase the pixel density when the user\n// releases the mouse.\nfunction mouseReleased() {\n myBuffer.pixelDensity(2);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myBuffer;\nlet myFont;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n myFont = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n // Get the p5.Framebuffer object's pixel density.\n let d = myBuffer.pixelDensity();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont(myFont);\n textSize(16);\n fill(0);\n\n // Display the pixel density.\n text(`Density: ${d}`, 0, 0);\n\n describe(`The text \"Density: ${d}\" written in black on a gray background.`);\n}\n</code>\n</div>"
+ "<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks_third.jpg');\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks_third.jpg');\n\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks_third.jpg');\n\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n 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.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks_third.jpg');\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks_third.jpg');\n\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks_third.jpg');\n\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n 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.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks_third.jpg');\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks_third.jpg');\n\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks_third.jpg');\n\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n 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.');\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks_third.jpg');\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks_third.jpg');\n\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet mountains;\nlet bricks;\n\nasync function setup() {\n // Load the images.\n mountains = await loadImage('assets/rockies.jpg');\n bricks = await loadImage('assets/bricks_third.jpg');\n\n createCanvas(100, 100);\n\n // Blend the bricks image into the mountains.\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n\n // Display the mountains image.\n image(mountains, 0, 0);\n\n // Display the bricks image.\n image(bricks, 0, 0);\n\n 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.');\n}\n</code>\n</div>"
],
- "class": "p5.Framebuffer",
- "module": "Rendering"
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 402,
- "description": "<p>Toggles the framebuffer's autosizing mode or returns the current mode.</p>\n<p>By default, the framebuffer automatically resizes to match the canvas\nthat created it. Calling <code>myBuffer.autoSized(false)</code> disables this\nbehavior and calling <code>myBuffer.autoSized(true)</code> re-enables it.</p>\n<p>Calling <code>myBuffer.autoSized()</code> without an argument returns <code>true</code> if\nthe framebuffer automatically resizes and <code>false</code> if not.</p>\n",
- "itemtype": "method",
- "name": "autoSized",
- "params": [
- {
- "name": "autoSized",
- "description": "<p>whether to automatically resize the framebuffer to match the canvas.</p>\n",
- "type": "Boolean",
- "optional": true
- }
- ],
- "return": {
- "description": "current autosize setting.",
- "type": "Boolean"
- },
- "example": [
- "\n<div>\n<code>\n// Double-click to toggle the autosizing mode.\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('A multicolor sphere on a gray background. The image resizes when the user moves the mouse.');\n}\n\nfunction draw() {\n background(50);\n\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(200);\n normalMaterial();\n sphere(width / 4);\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -width / 2, -height / 2);\n}\n\n// Resize the canvas when the user moves the mouse.\nfunction mouseMoved() {\n let w = constrain(mouseX, 0, 100);\n let h = constrain(mouseY, 0, 100);\n resizeCanvas(w, h);\n}\n\n// Toggle autoSizing when the user double-clicks.\n// Note: opened an issue to fix(?) this.\nfunction doubleClicked() {\n let isAuto = myBuffer.autoSized();\n myBuffer.autoSized(!isAuto);\n}\n</code>\n</div>"
- ],
- "class": "p5.Framebuffer",
- "module": "Rendering"
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 892,
- "description": "<p>Creates a new\n<a href=\"#/p5.Camera\">p5.Camera</a> object to use with the framebuffer.</p>\n<p>The new camera is initialized with a default position <code>(0, 0, 800)</code> and a\ndefault perspective projection. Its properties can be controlled with\n<a href=\"#/p5.Camera\">p5.Camera</a> methods such as <code>myCamera.lookAt(0, 0, 0)</code>.</p>\n<p>Framebuffer cameras should be created between calls to\n<a href=\"#/p5.Framebuffer/begin\">myBuffer.begin()</a> and\n<a href=\"#/p5.Framebuffer/end\">myBuffer.end()</a> like so:</p>\n<pre><code class=\"language-js\">let myCamera;\n\nmyBuffer.begin();\n\n// Create the camera for the framebuffer.\nmyCamera = myBuffer.createCamera();\n\nmyBuffer.end();\n</code></pre>\n<p>Calling <a href=\"#/p5/setCamera\">setCamera()</a> updates the\nframebuffer's projection using the camera.\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a> must also be called for the\nview to change properly:</p>\n<pre><code class=\"language-js\">myBuffer.begin();\n\n// Set the camera for the framebuffer.\nsetCamera(myCamera);\n\n// Reset all transformations.\nresetMatrix();\n\n// Draw stuff...\n\nmyBuffer.end();\n</code></pre>\n",
- "itemtype": "method",
- "name": "createCamera",
- "return": {
- "description": "new camera.",
- "type": "p5.Camera"
- },
- "example": [
- "\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet myBuffer;\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n // Create the cameras between begin() and end().\n myBuffer.begin();\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = myBuffer.createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = myBuffer.createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n myBuffer.end();\n\n describe(\n 'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(200);\n\n // Set the camera.\n if (usingCam1 === true) {\n setCamera(cam1);\n } else {\n setCamera(cam2);\n }\n\n // Reset all transformations.\n resetMatrix();\n\n // Draw the box.\n box();\n\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -50, -50);\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n usingCam1 = false;\n } else {\n usingCam1 = true;\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Framebuffer",
- "module": "Rendering"
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 1031,
- "description": "<p>Deletes the framebuffer from GPU memory.</p>\n<p>Calling <code>myBuffer.remove()</code> frees the GPU memory used by the framebuffer.\nThe framebuffer also uses a bit of memory on the CPU which can be freed\nlike so:</p>\n<pre><code class=\"language-js\">// Delete the framebuffer from GPU memory.\nmyBuffer.remove();\n\n// Delete the framebuffer from CPU memory.\nmyBuffer = undefined;\n</code></pre>\n<p>Note: All variables that reference the framebuffer must be assigned\nthe value <code>undefined</code> to delete the framebuffer from CPU memory. If any\nvariable still refers to the framebuffer, then it won't be garbage\ncollected.</p>\n",
- "itemtype": "method",
- "name": "remove",
- "example": [
- "\n<div>\n<code>\n// Double-click to remove the p5.Framebuffer object.\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create an options object.\n let options = { width: 60, height: 60 };\n\n // Create a p5.Framebuffer object and\n // configure it using options.\n myBuffer = createFramebuffer(options);\n\n describe('A white circle at the center of a dark gray square disappears when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the p5.Framebuffer object if\n // it's available.\n if (myBuffer) {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(100);\n circle(0, 0, 20);\n myBuffer.end();\n\n image(myBuffer, -30, -30);\n }\n}\n\n// Remove the p5.Framebuffer object when the\n// the user double-clicks.\nfunction doubleClicked() {\n // Delete the framebuffer from GPU memory.\n myBuffer.remove();\n\n // Delete the framebuffer from CPU memory.\n myBuffer = undefined;\n}\n</code>\n</div>"
- ],
- "class": "p5.Framebuffer",
- "module": "Rendering"
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 1118,
- "description": "<p>Begins drawing shapes to the framebuffer.</p>\n<p><code>myBuffer.begin()</code> and <a href=\"#/p5.Framebuffer/end\">myBuffer.end()</a>\nallow shapes to be drawn to the framebuffer. <code>myBuffer.begin()</code> begins\ndrawing to the framebuffer and\n<a href=\"#/p5.Framebuffer/end\">myBuffer.end()</a> stops drawing to the\nframebuffer. Changes won't be visible until the framebuffer is displayed\nas an image or texture.</p>\n",
- "itemtype": "method",
- "name": "begin",
- "example": [
- "\n<div>\n<code>\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n background(50);\n rotateY(frameCount * 0.01);\n normalMaterial();\n torus(30);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Display the p5.Framebuffer object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(myBuffer, -50, -50);\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Framebuffer",
- "module": "Rendering"
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 1254,
- "description": "<p>Stops drawing shapes to the framebuffer.</p>\n<p><a href=\"#/p5.Framebuffer/begin\">myBuffer.begin()</a> and <code>myBuffer.end()</code>\nallow shapes to be drawn to the framebuffer.\n<a href=\"#/p5.Framebuffer/begin\">myBuffer.begin()</a> begins drawing to\nthe framebuffer and <code>myBuffer.end()</code> stops drawing to the framebuffer.\nChanges won't be visible until the framebuffer is displayed as an image\nor texture.</p>\n",
- "itemtype": "method",
- "name": "end",
- "example": [
- "\n<div>\n<code>\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n background(50);\n rotateY(frameCount * 0.01);\n normalMaterial();\n torus(30);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Display the p5.Framebuffer object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(myBuffer, -50, -50);\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Framebuffer",
- "module": "Rendering"
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 1323,
- "description": "<p>Draws to the framebuffer by calling a function that contains drawing\ninstructions.</p>\n<p>The parameter, <code>callback</code>, is a function with the drawing instructions\nfor the framebuffer. For example, calling <code>myBuffer.draw(myFunction)</code>\nwill call a function named <code>myFunction()</code> to draw to the framebuffer.\nDoing so has the same effect as the following:</p>\n<pre><code class=\"language-js\">myBuffer.begin();\nmyFunction();\nmyBuffer.end();\n</code></pre>\n",
- "itemtype": "method",
- "name": "draw",
- "params": [
- {
- "name": "callback",
- "description": "<p>function that draws to the framebuffer.</p>\n",
- "type": "Function"
- }
- ],
- "example": [
- "\n<div>\n<code>\n// Click the canvas to display the framebuffer.\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw to the p5.Framebuffer object.\n myBuffer.draw(bagel);\n\n // Display the p5.Framebuffer object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(myBuffer, -50, -50);\n }\n}\n\n// Draw a rotating, multicolor torus.\nfunction bagel() {\n background(50);\n rotateY(frameCount * 0.01);\n normalMaterial();\n torus(30);\n}\n</code>\n</div>"
- ],
- "class": "p5.Framebuffer",
- "module": "Rendering"
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 1386,
- "description": "<p>Loads the current value of each pixel in the framebuffer into its\n<a href=\"#/p5.Framebuffer/pixels\">pixels</a> array.</p>\n<p><code>myBuffer.loadPixels()</code> must be called before reading from or writing to\n<a href=\"#/p5.Framebuffer/pixels\">myBuffer.pixels</a>.</p>\n",
- "itemtype": "method",
- "name": "loadPixels",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Load the pixels array.\n myBuffer.loadPixels();\n\n // Get the number of pixels in the\n // top half of the framebuffer.\n let numPixels = myBuffer.pixels.length / 2;\n\n // Set the framebuffer's top half to pink.\n for (let i = 0; i < numPixels; i += 4) {\n myBuffer.pixels[i] = 255;\n myBuffer.pixels[i + 1] = 102;\n myBuffer.pixels[i + 2] = 204;\n myBuffer.pixels[i + 3] = 255;\n }\n\n // Update the pixels array.\n myBuffer.updatePixels();\n\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, -50, -50);\n\n describe('A pink rectangle above a gray rectangle.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Framebuffer",
- "module": "Rendering"
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 1455,
- "description": "<p>Gets a pixel or a region of pixels from the framebuffer.</p>\n<p><code>myBuffer.get()</code> is easy to use but it's not as fast as\n<a href=\"#/p5.Framebuffer/pixels\">myBuffer.pixels</a>. Use\n<a href=\"#/p5.Framebuffer/pixels\">myBuffer.pixels</a> to read many pixel\nvalues.</p>\n<p>The version of <code>myBuffer.get()</code> with no parameters returns the entire\nframebuffer as a a <a href=\"#/p5.Image\">p5.Image</a> object.</p>\n<p>The version of <code>myBuffer.get()</code> with two parameters interprets them as\ncoordinates. It returns an array with the <code>[R, G, B, A]</code> values of the\npixel at the given point.</p>\n<p>The version of <code>myBuffer.get()</code> with four parameters interprets them as\ncoordinates and dimensions. It returns a subsection of the framebuffer as\na <a href=\"#/p5.Image\">p5.Image</a> object. The first two parameters are\nthe coordinates for the upper-left corner of the subsection. The last two\nparameters are the width and height of the subsection.</p>\n",
- "itemtype": "method",
- "name": "get",
- "return": {
- "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
- "type": "p5.Image"
- },
- "class": "p5.Framebuffer",
- "module": "Rendering",
"overloads": [
{
- "line": 1455,
"params": [
{
- "name": "x",
- "description": "<p>x-coordinate of the pixel. Defaults to 0.</p>\n",
- "type": "Number"
+ "name": "srcImage",
+ "description": "source image",
+ "type": "p5.Image"
},
{
- "name": "y",
- "description": "<p>y-coordinate of the pixel. Defaults to 0.</p>\n",
- "type": "Number"
+ "name": "sx",
+ "description": "x-coordinate of the source's upper-left corner.",
+ "type": "Integer"
},
{
- "name": "w",
- "description": "<p>width of the subsection to be returned.</p>\n",
- "type": "Number"
+ "name": "sy",
+ "description": "y-coordinate of the source's upper-left corner.",
+ "type": "Integer"
},
{
- "name": "h",
- "description": "<p>height of the subsection to be returned.</p>\n",
- "type": "Number"
+ "name": "sw",
+ "description": "source image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "description": "source image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "description": "x-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "description": "y-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "description": "destination image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "description": "destination image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "blendMode",
+ "description": "<p>the blend mode. either\nBLEND, DARKEST, LIGHTEST, DIFFERENCE,\nMULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\nSOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>\n<p>Available blend modes are: normal | multiply | screen | overlay |\ndarken | lighten | color-dodge | color-burn | hard-light |\nsoft-light | difference | exclusion | hue | saturation |\ncolor | luminosity</p>\n<p>http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</p>\n",
+ "type": "BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL"
}
- ],
- "return": {
- "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
- "type": "p5.Image"
- }
+ ]
},
{
- "line": 1483,
- "params": [],
- "return": {
- "description": "entire framebuffer as a <a href=\"#/p5.Image\">p5.Image</a> object.",
- "type": "p5.Image"
- }
+ "params": [
+ {
+ "name": "sx",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "type": "Integer"
+ },
+ {
+ "name": "blendMode",
+ "type": "BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL"
+ }
+ ]
},
{
- "line": 1487,
"params": [
{
- "name": "x",
- "description": "",
- "type": "Number"
+ "name": "srcImage",
+ "description": "source image",
+ "type": "p5.Image"
},
{
- "name": "y",
- "description": "",
- "type": "Number"
+ "name": "sx",
+ "description": "x-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "description": "y-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "description": "source image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "description": "source image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "description": "x-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "description": "y-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "description": "destination image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "description": "destination image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "blendMode",
+ "description": "<p>the blend mode. either\nBLEND, DARKEST, LIGHTEST, DIFFERENCE,\nMULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\nSOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>\n<p>Available blend modes are: normal | multiply | screen | overlay |\ndarken | lighten | color-dodge | color-burn | hard-light |\nsoft-light | difference | exclusion | hue | saturation |\ncolor | luminosity</p>\n<p>http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</p>\n",
+ "type": "BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL"
}
- ],
- "return": {
- "description": "color of the pixel at `(x, y)` as an array of color values `[R, G, B, A]`.",
- "type": "Number[]"
- }
- }
- ]
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 1581,
- "description": "<p>Updates the framebuffer with the RGBA values in the\n<a href=\"#/p5.Framebuffer/pixels\">pixels</a> array.</p>\n<p><code>myBuffer.updatePixels()</code> only needs to be called after changing values\nin the <a href=\"#/p5.Framebuffer/pixels\">myBuffer.pixels</a> array. Such\nchanges can be made directly after calling\n<a href=\"#/p5.Framebuffer/loadPixels\">myBuffer.loadPixels()</a>.</p>\n",
- "itemtype": "method",
- "name": "updatePixels",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Load the pixels array.\n myBuffer.loadPixels();\n\n // Get the number of pixels in the\n // top half of the framebuffer.\n let numPixels = myBuffer.pixels.length / 2;\n\n // Set the framebuffer's top half to pink.\n for (let i = 0; i < numPixels; i += 4) {\n myBuffer.pixels[i] = 255;\n myBuffer.pixels[i + 1] = 102;\n myBuffer.pixels[i + 2] = 204;\n myBuffer.pixels[i + 3] = 255;\n }\n\n // Update the pixels array.\n myBuffer.updatePixels();\n\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, -50, -50);\n\n describe('A pink rectangle above a gray rectangle.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Framebuffer",
- "module": "Rendering"
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 1701,
- "description": "<p>An object that stores the framebuffer's color data.</p>\n<p>Each framebuffer uses a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture\" target=\"_blank\">WebGLTexture</a>\nobject internally to store its color data. The <code>myBuffer.color</code> property\nmakes it possible to pass this data directly to other functions. For\nexample, calling <code>texture(myBuffer.color)</code> or\n<code>myShader.setUniform('colorTexture', myBuffer.color)</code> may be helpful for\nadvanced use cases.</p>\n<p>Note: By default, a framebuffer's y-coordinates are flipped compared to\nimages and videos. It's easy to flip a framebuffer's y-coordinates as\nneeded when applying it as a texture. For example, calling\n<code>plane(myBuffer.width, -myBuffer.height)</code> will flip the framebuffer.</p>\n",
- "itemtype": "property",
- "name": "color",
- "type": "p5.FramebufferTexture",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n triangle(-25, 25, 0, -25, 25, 25);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Use the p5.Framebuffer object's WebGLTexture.\n texture(myBuffer.color);\n\n // Style the plane.\n noStroke();\n\n // Draw the plane.\n plane(myBuffer.width, myBuffer.height);\n\n describe('A white triangle on a gray background.');\n}\n</code>\n</div>"
- ],
- "class": "p5.Framebuffer",
- "module": "Rendering"
- },
- {
- "file": "src/webgl/p5.Framebuffer.js",
- "line": 1754,
- "description": "<p>An object that stores the framebuffer's depth data.</p>\n<p>Each framebuffer uses a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture\" target=\"_blank\">WebGLTexture</a>\nobject internally to store its depth data. The <code>myBuffer.depth</code> property\nmakes it possible to pass this data directly to other functions. For\nexample, calling <code>texture(myBuffer.depth)</code> or\n<code>myShader.setUniform('depthTexture', myBuffer.depth)</code> may be helpful for\nadvanced use cases.</p>\n<p>Note: By default, a framebuffer's y-coordinates are flipped compared to\nimages and videos. It's easy to flip a framebuffer's y-coordinates as\nneeded when applying it as a texture. For example, calling\n<code>plane(myBuffer.width, -myBuffer.height)</code> will flip the framebuffer.</p>\n",
- "itemtype": "property",
- "name": "depth",
- "type": "p5.FramebufferTexture",
- "example": [
- "\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition;\n vTexCoord = aTexCoord;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nvarying vec2 vTexCoord;\nuniform sampler2D depth;\n\nvoid main() {\n // Get the pixel's depth value.\n float depthVal = texture2D(depth, vTexCoord).r;\n\n // Set the pixel's color based on its depth.\n gl_FragColor = mix(\n vec4(0., 0., 0., 1.),\n vec4(1., 0., 1., 1.),\n depthVal);\n}\n`;\n\nlet myBuffer;\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n // Compile and apply the shader.\n shader(myShader);\n\n describe('The shadow of a box rotates slowly against a magenta background.');\n}\n\nfunction draw() {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(255);\n rotateX(frameCount * 0.01);\n box(20, 20, 80);\n myBuffer.end();\n\n // Set the shader's depth uniform using\n // the framebuffer's depth texture.\n myShader.setUniform('depth', myBuffer.depth);\n\n // Style the plane.\n noStroke();\n\n // Draw the plane.\n plane(myBuffer.width, myBuffer.height);\n}\n</code>\n</div>"
- ],
- "class": "p5.Framebuffer",
- "module": "Rendering"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 252,
- "description": "<p>An array with the geometry's vertices.</p>\n<p>The geometry's vertices are stored as\n<a href=\"#/p5.Vector\">p5.Vector</a> objects in the <code>myGeometry.vertices</code>\narray. The geometry's first vertex is the\n<a href=\"#/p5.Vector\">p5.Vector</a> object at <code>myGeometry.vertices[0]</code>,\nits second vertex is <code>myGeometry.vertices[1]</code>, its third vertex is\n<code>myGeometry.vertices[2]</code>, and so on.</p>\n",
- "itemtype": "property",
- "name": "vertices",
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = new p5.Geometry();\n\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(40, 0, 0);\n\n // Add the vertices to the p5.Geometry object's vertices array.\n myGeometry.vertices.push(v0, v1, v2);\n\n describe('A white triangle drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n beginGeometry();\n torus(30, 15, 10, 8);\n myGeometry = endGeometry();\n\n describe('A white torus rotates slowly against a dark gray background. Red spheres mark its vertices.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateY(frameCount * 0.01);\n\n // Style the p5.Geometry object.\n fill(255);\n stroke(0);\n\n // Display the p5.Geometry object.\n model(myGeometry);\n\n // Style the vertices.\n fill(255, 0, 0);\n noStroke();\n\n // Iterate over the vertices array.\n for (let v of myGeometry.vertices) {\n // Draw a sphere to mark the vertex.\n push();\n translate(v);\n sphere(2.5);\n pop();\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 375,
- "description": "<p>An array with the vectors that are normal to the geometry's vertices.</p>\n<p>A face's orientation is defined by its <em>normal vector</em> which points out\nof the face and is normal (perpendicular) to the surface. Calling\n<code>myGeometry.computeNormals()</code> first calculates each face's normal\nvector. Then it calculates the normal vector for each vertex by\naveraging the normal vectors of the faces surrounding the vertex. The\nvertex normals are stored as <a href=\"#/p5.Vector\">p5.Vector</a>\nobjects in the <code>myGeometry.vertexNormals</code> array.</p>\n",
- "itemtype": "property",
- "name": "vertexNormals",
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n beginGeometry();\n torus(30, 15, 10, 8);\n myGeometry = endGeometry();\n\n // Compute the vertex normals.\n myGeometry.computeNormals();\n\n describe(\n 'A white torus rotates against a dark gray background. Red lines extend outward from its vertices.'\n );\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateY(frameCount * 0.01);\n\n // Style the p5.Geometry object.\n stroke(0);\n\n // Display the p5.Geometry object.\n model(myGeometry);\n\n // Style the normal vectors.\n stroke(255, 0, 0);\n\n // Iterate over the vertices and vertexNormals arrays.\n for (let i = 0; i < myGeometry.vertices.length; i += 1) {\n\n // Get the vertex p5.Vector object.\n let v = myGeometry.vertices[i];\n\n // Get the vertex normal p5.Vector object.\n let n = myGeometry.vertexNormals[i];\n\n // Calculate a point along the vertex normal.\n let p = p5.Vector.mult(n, 8);\n\n // Draw the vertex normal as a red line.\n push();\n translate(v);\n line(0, 0, 0, p.x, p.y, p.z);\n pop();\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = new p5.Geometry();\n\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(0, 40, 0);\n let v3 = createVector(40, 0, 0);\n\n // Add the vertices to the p5.Geometry object's vertices array.\n myGeometry.vertices.push(v0, v1, v2, v3);\n\n // Compute the faces array.\n myGeometry.computeFaces();\n\n // Compute the surface normals.\n myGeometry.computeNormals();\n\n describe('A red square drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a white point light.\n pointLight(255, 255, 255, 0, 0, 10);\n\n // Style the p5.Geometry object.\n noStroke();\n fill(255, 0, 0);\n\n // Display the p5.Geometry object.\n model(myGeometry);\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 505,
- "description": "<p>An array that lists which of the geometry's vertices form each of its\nfaces.</p>\n<p>All 3D shapes are made by connecting sets of points called <em>vertices</em>. A\ngeometry's surface is formed by connecting vertices to form triangles\nthat are stitched together. Each triangular patch on the geometry's\nsurface is called a <em>face</em>.</p>\n<p>The geometry's vertices are stored as\n<a href=\"#/p5.Vector\">p5.Vector</a> objects in the\n<a href=\"#/p5.Geometry/vertices\">myGeometry.vertices</a> array. The\ngeometry's first vertex is the <a href=\"#/p5.Vector\">p5.Vector</a>\nobject at <code>myGeometry.vertices[0]</code>, its second vertex is\n<code>myGeometry.vertices[1]</code>, its third vertex is <code>myGeometry.vertices[2]</code>,\nand so on.</p>\n<p>For example, a geometry made from a rectangle has two faces because a\nrectangle is made by joining two triangles. <code>myGeometry.faces</code> for a\nrectangle would be the two-dimensional array <code>[[0, 1, 2], [2, 1, 3]]</code>.\nThe first face, <code>myGeometry.faces[0]</code>, is the array <code>[0, 1, 2]</code> because\nit's formed by connecting <code>myGeometry.vertices[0]</code>,\n<code>myGeometry.vertices[1]</code>,and <code>myGeometry.vertices[2]</code>. The second face,\n<code>myGeometry.faces[1]</code>, is the array <code>[2, 1, 3]</code> because it's formed by\nconnecting <code>myGeometry.vertices[2]</code>, <code>myGeometry.vertices[1]</code>,and\n<code>myGeometry.vertices[3]</code>.</p>\n",
- "itemtype": "property",
- "name": "faces",
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n beginGeometry();\n sphere();\n myGeometry = endGeometry();\n\n describe(\"A sphere drawn on a gray background. The sphere's surface is a grayscale patchwork of triangles.\");\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the p5.Geometry object.\n noStroke();\n\n // Set a random seed.\n randomSeed(1234);\n\n // Iterate over the faces array.\n for (let face of myGeometry.faces) {\n\n // Style the face.\n let g = random(0, 255);\n fill(g);\n\n // Draw the face.\n beginShape();\n // Iterate over the vertices that form the face.\n for (let f of face) {\n // Get the vertex's p5.Vector object.\n let v = myGeometry.vertices[f];\n vertex(v.x, v.y, v.z);\n }\n endShape();\n\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 591,
- "description": "<p>An array that lists the texture coordinates for each of the geometry's\nvertices.</p>\n<p>In order for <a href=\"#/p5/texture\">texture()</a> to work, the geometry\nneeds a way to map the points on its surface to the pixels in a\nrectangular image that's used as a texture. The geometry's vertex at\ncoordinates <code>(x, y, z)</code> maps to the texture image's pixel at coordinates\n<code>(u, v)</code>.</p>\n<p>The <code>myGeometry.uvs</code> array stores the <code>(u, v)</code> coordinates for each\nvertex in the order it was added to the geometry. For example, the\nfirst vertex, <code>myGeometry.vertices[0]</code>, has its <code>(u, v)</code> coordinates\nstored at <code>myGeometry.uvs[0]</code> and <code>myGeometry.uvs[1]</code>.</p>\n",
- "itemtype": "property",
- "name": "uvs",
- "example": [
- "\n<div>\n<code>\nlet img;\n\n// Load the image and create a p5.Image object.\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create p5.Geometry objects.\n let geom1 = buildGeometry(createShape);\n let geom2 = buildGeometry(createShape);\n\n // Left (original).\n push();\n translate(-25, 0, 0);\n texture(img);\n noStroke();\n model(geom1);\n pop();\n\n // Set geom2's texture coordinates.\n geom2.uvs = [0.25, 0.25, 0.75, 0.25, 0.25, 0.75, 0.75, 0.75];\n\n // Right (zoomed in).\n push();\n translate(25, 0, 0);\n texture(img);\n noStroke();\n model(geom2);\n pop();\n\n describe(\n 'Two photos of a ceiling on a gray background. The photo on the right zooms in to the center of the photo.'\n );\n}\n\nfunction createShape() {\n plane(40);\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 682,
- "description": "<p>Calculates the position and size of the smallest box that contains the geometry.</p>\n<p>A bounding box is the smallest rectangular prism that contains the entire\ngeometry. It's defined by the box's minimum and maximum coordinates along\neach axis, as well as the size (length) and offset (center).</p>\n<p>Calling <code>myGeometry.calculateBoundingBox()</code> returns an object with four\nproperties that describe the bounding box:</p>\n<pre><code class=\"language-js\">// Get myGeometry's bounding box.\nlet bbox = myGeometry.calculateBoundingBox();\n\n// Print the bounding box to the console.\nconsole.log(bbox);\n\n// {\n// // The minimum coordinate along each axis.\n// min: { x: -1, y: -2, z: -3 },\n//\n// // The maximum coordinate along each axis.\n// max: { x: 1, y: 2, z: 3},\n//\n// // The size (length) along each axis.\n// size: { x: 2, y: 4, z: 6},\n//\n// // The offset (center) along each axis.\n// offset: { x: 0, y: 0, z: 0}\n// }\n</code></pre>\n",
- "itemtype": "method",
- "name": "calculateBoundingBox",
- "return": {
- "description": "bounding box of the geometry.",
- "type": "Object"
- },
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a new p5.Geometry object with random spheres.\n particles = buildGeometry(createParticles);\n\n describe('Ten white spheres placed randomly against a gray background. A box encloses the spheres.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n fill(255);\n\n // Draw the particles.\n model(particles);\n\n // Calculate the bounding box.\n let bbox = particles.calculateBoundingBox();\n\n // Translate to the bounding box's center.\n translate(bbox.offset.x, bbox.offset.y, bbox.offset.z);\n\n // Style the bounding box.\n stroke(255);\n noFill();\n\n // Draw the bounding box.\n box(bbox.size.x, bbox.size.y, bbox.size.z);\n}\n\nfunction createParticles() {\n for (let i = 0; i < 10; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 15);\n let y = randomGaussian(0, 15);\n let z = randomGaussian(0, 15);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(3);\n pop();\n }\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 863,
- "description": "<p>Removes the geometry’s internal colors.</p>\n<p><code>p5.Geometry</code> objects can be created with \"internal colors\" assigned to\nvertices or the entire shape. When a geometry has internal colors,\n<a href=\"#/p5/fill\">fill()</a> has no effect. Calling\n<code>myGeometry.clearColors()</code> allows the\n<a href=\"#/p5/fill\">fill()</a> function to apply color to the geometry.</p>\n",
- "itemtype": "method",
- "name": "clearColors",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Geometry object.\n // Set its internal color to red.\n beginGeometry();\n fill(255, 0, 0);\n plane(20);\n let myGeometry = endGeometry();\n\n // Style the shape.\n noStroke();\n\n // Draw the p5.Geometry object (center).\n model(myGeometry);\n\n // Translate the origin to the bottom-right.\n translate(25, 25, 0);\n\n // Try to fill the geometry with green.\n fill(0, 255, 0);\n\n // Draw the geometry again (bottom-right).\n model(myGeometry);\n\n // Clear the geometry's colors.\n myGeometry.clearColors();\n\n // Fill the geometry with blue.\n fill(0, 0, 255);\n\n // Translate the origin up.\n translate(0, -50, 0);\n\n // Draw the geometry again (top-right).\n model(myGeometry);\n\n describe(\n 'Three squares drawn against a gray background. Red squares are at the center and the bottom-right. A blue square is at the top-right.'\n );\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 928,
- "description": "<p>The <code>saveObj()</code> function exports <code>p5.Geometry</code> objects as\n3D models in the Wavefront .obj file format.\nThis way, you can use the 3D shapes you create in p5.js in other software\nfor rendering, animation, 3D printing, or more.</p>\n<p>The exported .obj file will include the faces and vertices of the <code>p5.Geometry</code>,\nas well as its texture coordinates and normals, if it has them.</p>\n",
- "itemtype": "method",
- "name": "saveObj",
- "params": [
- {
- "name": "fileName",
- "description": "<p>The name of the file to save the model as.\n If not specified, the default file name will be 'model.obj'.</p>\n",
- "type": "String",
- "optional": true,
- "optdefault": "'model.obj'"
- }
- ],
- "example": [
- "\n<div>\n<code>\nlet myModel;\nlet saveBtn;\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myModel = buildGeometry(() => {\n for (let i = 0; i < 5; i++) {\n push();\n translate(\n random(-75, 75),\n random(-75, 75),\n random(-75, 75)\n );\n sphere(random(5, 50));\n pop();\n }\n });\n\n saveBtn = createButton('Save .obj');\n saveBtn.mousePressed(() => myModel.saveObj());\n\n describe('A few spheres rotating in space');\n}\n\nfunction draw() {\n background(0);\n noStroke();\n lights();\n rotateX(millis() * 0.001);\n rotateY(millis() * 0.002);\n model(myModel);\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 1028,
- "description": "<p>The <code>saveStl()</code> function exports <code>p5.Geometry</code> objects as\n3D models in the STL stereolithography file format.\nThis way, you can use the 3D shapes you create in p5.js in other software\nfor rendering, animation, 3D printing, or more.</p>\n<p>The exported .stl file will include the faces, vertices, and normals of the <code>p5.Geometry</code>.</p>\n<p>By default, this method saves a text-based .stl file. Alternatively, you can save a more compact\nbut less human-readable binary .stl file by passing <code>{ binary: true }</code> as a second parameter.</p>\n",
- "itemtype": "method",
- "name": "saveStl",
- "params": [
- {
- "name": "fileName",
- "description": "<p>The name of the file to save the model as.\n If not specified, the default file name will be 'model.stl'.</p>\n",
- "type": "String",
- "optional": true,
- "optdefault": "'model.stl'"
- },
- {
- "name": "options",
- "description": "<p>Optional settings. Options can include a boolean <code>binary</code> property, which\ncontrols whether or not a binary .stl file is saved. It defaults to false.</p>\n",
- "type": "Object",
- "optional": true
- }
- ],
- "example": [
- "\n<div>\n<code>\nlet myModel;\nlet saveBtn1;\nlet saveBtn2;\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myModel = buildGeometry(() => {\n for (let i = 0; i < 5; i++) {\n push();\n translate(\n random(-75, 75),\n random(-75, 75),\n random(-75, 75)\n );\n sphere(random(5, 50));\n pop();\n }\n });\n\n saveBtn1 = createButton('Save .stl');\n saveBtn1.mousePressed(function() {\n myModel.saveStl();\n });\n saveBtn2 = createButton('Save binary .stl');\n saveBtn2.mousePressed(function() {\n myModel.saveStl('model.stl', { binary: true });\n });\n\n describe('A few spheres rotating in space');\n}\n\nfunction draw() {\n background(0);\n noStroke();\n lights();\n rotateX(millis() * 0.001);\n rotateY(millis() * 0.002);\n model(myModel);\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 1150,
- "description": "<p>Flips the geometry’s texture u-coordinates.</p>\n<p>In order for <a href=\"#/p5/texture\">texture()</a> to work, the geometry\nneeds a way to map the points on its surface to the pixels in a rectangular\nimage that's used as a texture. The geometry's vertex at coordinates\n<code>(x, y, z)</code> maps to the texture image's pixel at coordinates <code>(u, v)</code>.</p>\n<p>The <a href=\"#/p5.Geometry/uvs\">myGeometry.uvs</a> array stores the\n<code>(u, v)</code> coordinates for each vertex in the order it was added to the\ngeometry. Calling <code>myGeometry.flipU()</code> flips a geometry's u-coordinates\nso that the texture appears mirrored horizontally.</p>\n<p>For example, a plane's four vertices are added clockwise starting from the\ntop-left corner. Here's how calling <code>myGeometry.flipU()</code> would change a\nplane's texture coordinates:</p>\n<pre><code class=\"language-js\">// Print the original texture coordinates.\n// Output: [0, 0, 1, 0, 0, 1, 1, 1]\nconsole.log(myGeometry.uvs);\n\n// Flip the u-coordinates.\nmyGeometry.flipU();\n\n// Print the flipped texture coordinates.\n// Output: [1, 0, 0, 0, 1, 1, 0, 1]\nconsole.log(myGeometry.uvs);\n\n// Notice the swaps:\n// Top vertices: [0, 0, 1, 0] --> [1, 0, 0, 0]\n// Bottom vertices: [0, 1, 1, 1] --> [1, 1, 0, 1]\n</code></pre>\n",
- "itemtype": "method",
- "name": "flipU",
- "example": [
- "\n<div>\n<code>\nlet img;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create p5.Geometry objects.\n let geom1 = buildGeometry(createShape);\n let geom2 = buildGeometry(createShape);\n\n // Flip geom2's U texture coordinates.\n geom2.flipU();\n\n // Left (original).\n push();\n translate(-25, 0, 0);\n texture(img);\n noStroke();\n model(geom1);\n pop();\n\n // Right (flipped).\n push();\n translate(25, 0, 0);\n texture(img);\n noStroke();\n model(geom2);\n pop();\n\n describe(\n 'Two photos of a ceiling on a gray background. The photos are mirror images of each other.'\n );\n}\n\nfunction createShape() {\n plane(40);\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 1245,
- "description": "<p>Flips the geometry’s texture v-coordinates.</p>\n<p>In order for <a href=\"#/p5/texture\">texture()</a> to work, the geometry\nneeds a way to map the points on its surface to the pixels in a rectangular\nimage that's used as a texture. The geometry's vertex at coordinates\n<code>(x, y, z)</code> maps to the texture image's pixel at coordinates <code>(u, v)</code>.</p>\n<p>The <a href=\"#/p5.Geometry/uvs\">myGeometry.uvs</a> array stores the\n<code>(u, v)</code> coordinates for each vertex in the order it was added to the\ngeometry. Calling <code>myGeometry.flipV()</code> flips a geometry's v-coordinates\nso that the texture appears mirrored vertically.</p>\n<p>For example, a plane's four vertices are added clockwise starting from the\ntop-left corner. Here's how calling <code>myGeometry.flipV()</code> would change a\nplane's texture coordinates:</p>\n<pre><code class=\"language-js\">// Print the original texture coordinates.\n// Output: [0, 0, 1, 0, 0, 1, 1, 1]\nconsole.log(myGeometry.uvs);\n\n// Flip the v-coordinates.\nmyGeometry.flipV();\n\n// Print the flipped texture coordinates.\n// Output: [0, 1, 1, 1, 0, 0, 1, 0]\nconsole.log(myGeometry.uvs);\n\n// Notice the swaps:\n// Left vertices: [0, 0] <--> [1, 0]\n// Right vertices: [1, 0] <--> [1, 1]\n</code></pre>\n",
- "itemtype": "method",
- "name": "flipV",
- "example": [
- "\n<div>\n<code>\nlet img;\n\nfunction preload() {\n img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create p5.Geometry objects.\n let geom1 = buildGeometry(createShape);\n let geom2 = buildGeometry(createShape);\n\n // Flip geom2's V texture coordinates.\n geom2.flipV();\n\n // Left (original).\n push();\n translate(-25, 0, 0);\n texture(img);\n noStroke();\n model(geom1);\n pop();\n\n // Right (flipped).\n push();\n translate(25, 0, 0);\n texture(img);\n noStroke();\n model(geom2);\n pop();\n\n describe(\n 'Two photos of a ceiling on a gray background. The photos are mirror images of each other.'\n );\n}\n\nfunction createShape() {\n plane(40);\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 1340,
- "description": "<p>Computes the geometry's faces using its vertices.</p>\n<p>All 3D shapes are made by connecting sets of points called <em>vertices</em>. A\ngeometry's surface is formed by connecting vertices to form triangles that\nare stitched together. Each triangular patch on the geometry's surface is\ncalled a <em>face</em>. <code>myGeometry.computeFaces()</code> performs the math needed to\ndefine each face based on the distances between vertices.</p>\n<p>The geometry's vertices are stored as <a href=\"#/p5.Vector\">p5.Vector</a>\nobjects in the <a href=\"#/p5.Geometry/vertices\">myGeometry.vertices</a>\narray. The geometry's first vertex is the\n<a href=\"#/p5.Vector\">p5.Vector</a> object at <code>myGeometry.vertices[0]</code>,\nits second vertex is <code>myGeometry.vertices[1]</code>, its third vertex is\n<code>myGeometry.vertices[2]</code>, and so on.</p>\n<p>Calling <code>myGeometry.computeFaces()</code> fills the\n<a href=\"#/p5.Geometry/faces\">myGeometry.faces</a> array with three-element\narrays that list the vertices that form each face. For example, a geometry\nmade from a rectangle has two faces because a rectangle is made by joining\ntwo triangles. <a href=\"#/p5.Geometry/faces\">myGeometry.faces</a> for a\nrectangle would be the two-dimensional array\n<code>[[0, 1, 2], [2, 1, 3]]</code>. The first face, <code>myGeometry.faces[0]</code>, is the\narray <code>[0, 1, 2]</code> because it's formed by connecting\n<code>myGeometry.vertices[0]</code>, <code>myGeometry.vertices[1]</code>,and\n<code>myGeometry.vertices[2]</code>. The second face, <code>myGeometry.faces[1]</code>, is the\narray <code>[2, 1, 3]</code> because it's formed by connecting\n<code>myGeometry.vertices[2]</code>, <code>myGeometry.vertices[1]</code>, and\n<code>myGeometry.vertices[3]</code>.</p>\n<p>Note: <code>myGeometry.computeFaces()</code> only works when geometries have four or more vertices.</p>\n",
- "itemtype": "method",
- "name": "computeFaces",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = new p5.Geometry();\n\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(0, 40, 0);\n let v3 = createVector(40, 0, 0);\n\n // Add the vertices to myGeometry's vertices array.\n myGeometry.vertices.push(v0, v1, v2, v3);\n\n // Compute myGeometry's faces array.\n myGeometry.computeFaces();\n\n describe('A red square drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the shape.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object using a callback function.\n myGeometry = new p5.Geometry(1, 1, createShape);\n\n describe('A red square drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the shape.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(0, 40, 0);\n let v3 = createVector(40, 0, 0);\n\n // Add the vertices to the p5.Geometry object's vertices array.\n this.vertices.push(v0, v1, v2, v3);\n\n // Compute the faces array.\n this.computeFaces();\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 1508,
- "description": "<p>Calculates the normal vector for each vertex on the geometry.</p>\n<p>All 3D shapes are made by connecting sets of points called <em>vertices</em>. A\ngeometry's surface is formed by connecting vertices to create triangles\nthat are stitched together. Each triangular patch on the geometry's\nsurface is called a <em>face</em>. <code>myGeometry.computeNormals()</code> performs the\nmath needed to orient each face. Orientation is important for lighting\nand other effects.</p>\n<p>A face's orientation is defined by its <em>normal vector</em> which points out\nof the face and is normal (perpendicular) to the surface. Calling\n<code>myGeometry.computeNormals()</code> first calculates each face's normal vector.\nThen it calculates the normal vector for each vertex by averaging the\nnormal vectors of the faces surrounding the vertex. The vertex normals\nare stored as <a href=\"#/p5.Vector\">p5.Vector</a> objects in the\n<a href=\"#/p5.Geometry/vertexNormals\">myGeometry.vertexNormals</a> array.</p>\n<p>The first parameter, <code>shadingType</code>, is optional. Passing the constant\n<code>FLAT</code>, as in <code>myGeometry.computeNormals(FLAT)</code>, provides neighboring\nfaces with their own copies of the vertices they share. Surfaces appear\ntiled with flat shading. Passing the constant <code>SMOOTH</code>, as in\n<code>myGeometry.computeNormals(SMOOTH)</code>, makes neighboring faces reuse their\nshared vertices. Surfaces appear smoother with smooth shading. By\ndefault, <code>shadingType</code> is <code>FLAT</code>.</p>\n<p>The second parameter, <code>options</code>, is also optional. If an object with a\n<code>roundToPrecision</code> property is passed, as in\n<code>myGeometry.computeNormals(SMOOTH, { roundToPrecision: 5 })</code>, it sets the\nnumber of decimal places to use for calculations. By default,\n<code>roundToPrecision</code> uses 3 decimal places.</p>\n",
- "itemtype": "method",
- "name": "computeNormals",
- "params": [
- {
- "name": "shadingType",
- "description": "<p>shading type. either FLAT or SMOOTH. Defaults to <code>FLAT</code>.</p>\n",
- "type": "String",
- "optional": true
+ ]
},
{
- "name": "options",
- "description": "<p>shading options.</p>\n",
- "type": "Object",
- "optional": true
- }
- ],
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n beginGeometry();\n torus();\n myGeometry = endGeometry();\n\n // Compute the vertex normals.\n myGeometry.computeNormals();\n\n describe(\n \"A white torus drawn on a dark gray background. Red lines extend outward from the torus' vertices.\"\n );\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(1);\n\n // Style the helix.\n stroke(0);\n\n // Display the helix.\n model(myGeometry);\n\n // Style the normal vectors.\n stroke(255, 0, 0);\n\n // Iterate over the vertices and vertexNormals arrays.\n for (let i = 0; i < myGeometry.vertices.length; i += 1) {\n\n // Get the vertex p5.Vector object.\n let v = myGeometry.vertices[i];\n\n // Get the vertex normal p5.Vector object.\n let n = myGeometry.vertexNormals[i];\n\n // Calculate a point along the vertex normal.\n let p = p5.Vector.mult(n, 5);\n\n // Draw the vertex normal as a red line.\n push();\n translate(v);\n line(0, 0, 0, p.x, p.y, p.z);\n pop();\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object using a callback function.\n myGeometry = new p5.Geometry();\n\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(0, 40, 0);\n let v3 = createVector(40, 0, 0);\n\n // Add the vertices to the p5.Geometry object's vertices array.\n myGeometry.vertices.push(v0, v1, v2, v3);\n\n // Compute the faces array.\n myGeometry.computeFaces();\n\n // Compute the surface normals.\n myGeometry.computeNormals();\n\n describe('A red square drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a white point light.\n pointLight(255, 255, 255, 0, 0, 10);\n\n // Style the p5.Geometry object.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(createShape);\n\n // Compute normals using default (FLAT) shading.\n myGeometry.computeNormals(FLAT);\n\n describe('A white, helical structure drawn on a dark gray background. Its faces appear faceted.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(1);\n\n // Style the helix.\n noStroke();\n\n // Display the helix.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create a helical shape.\n beginShape();\n for (let i = 0; i < TWO_PI * 3; i += 0.5) {\n let x = 30 * cos(i);\n let y = 30 * sin(i);\n let z = map(i, 0, TWO_PI * 3, -40, 40);\n vertex(x, y, z);\n }\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(createShape);\n\n // Compute normals using smooth shading.\n myGeometry.computeNormals(SMOOTH);\n\n describe('A white, helical structure drawn on a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(1);\n\n // Style the helix.\n noStroke();\n\n // Display the helix.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create a helical shape.\n beginShape();\n for (let i = 0; i < TWO_PI * 3; i += 0.5) {\n let x = 30 * cos(i);\n let y = 30 * sin(i);\n let z = map(i, 0, TWO_PI * 3, -40, 40);\n vertex(x, y, z);\n }\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(createShape);\n\n // Create an options object.\n let options = { roundToPrecision: 5 };\n\n // Compute normals using smooth shading.\n myGeometry.computeNormals(SMOOTH, options);\n\n describe('A white, helical structure drawn on a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(1);\n\n // Style the helix.\n noStroke();\n\n // Display the helix.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create a helical shape.\n beginShape();\n for (let i = 0; i < TWO_PI * 3; i += 0.5) {\n let x = 30 * cos(i);\n let y = 30 * sin(i);\n let z = map(i, 0, TWO_PI * 3, -40, 40);\n vertex(x, y, z);\n }\n endShape();\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.Geometry.js",
- "line": 2228,
- "description": "<p>Transforms the geometry's vertices to fit snugly within a 100×100×100 box\ncentered at the origin.</p>\n<p>Calling <code>myGeometry.normalize()</code> translates the geometry's vertices so that\nthey're centered at the origin <code>(0, 0, 0)</code>. Then it scales the vertices so\nthat they fill a 100×100×100 box. As a result, small geometries will grow\nand large geometries will shrink.</p>\n<p>Note: <code>myGeometry.normalize()</code> only works when called in the\n<a href=\"#/p5/setup\">setup()</a> function.</p>\n",
- "itemtype": "method",
- "name": "normalize",
- "chainable": 1,
- "example": [
- "\n<div>\n<code>\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a very small torus.\n beginGeometry();\n torus(1, 0.25);\n myGeometry = endGeometry();\n\n // Normalize the torus so its vertices fill\n // the range [-100, 100].\n myGeometry.normalize();\n\n describe('A white torus rotates slowly against a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Turn on the lights.\n lights();\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Style the torus.\n noStroke();\n\n // Draw the torus.\n model(myGeometry);\n}\n</code>\n</div>"
- ],
- "class": "p5.Geometry",
- "module": "Shape",
- "submodule": "3D Primitives"
- },
- {
- "file": "src/webgl/p5.RendererGL.Immediate.js",
- "line": 1,
- "description": "<p>Welcome to RendererGL Immediate Mode.\nImmediate mode is used for drawing custom shapes\nfrom a set of vertices. Immediate Mode is activated\nwhen you call <a href=\"#/p5/beginShape\">beginShape()</a> & de-activated when you call <a href=\"#/p5/endShape\">endShape()</a>.\nImmediate mode is a style of programming borrowed\nfrom OpenGL's (now-deprecated) immediate mode.\nIt differs from p5.js' default, Retained Mode, which caches\ngeometries and buffers on the CPU to reduce the number of webgl\ndraw calls. Retained mode is more efficient & performative,\nhowever, Immediate Mode is useful for sketching quick\ngeometric ideas.</p>\n",
- "class": "p5",
- "module": "Math"
- },
- {
- "file": "src/webgl/p5.RendererGL.Immediate.js",
- "line": 191,
- "description": "<p>End shape drawing and render vertices to screen.</p>\n",
- "chainable": 1,
- "class": "p5",
- "module": "Math"
- },
- {
- "file": "src/webgl/p5.RendererGL.Retained.js",
- "line": 8,
- "params": [
- {
- "name": "geometry",
- "description": "<p>The model whose resources will be freed</p>\n",
- "type": "p5.Geometry"
- }
- ],
- "class": "p5",
- "module": "Math"
- },
- {
- "file": "src/webgl/p5.RendererGL.js",
- "line": 118,
- "description": "<p>Set attributes for the WebGL Drawing context.\nThis is a way of adjusting how the WebGL\nrenderer works to fine-tune the display and performance.</p>\n<p>Note that this will reinitialize the drawing context\nif called after the WebGL canvas is made.</p>\n<p>If an object is passed as the parameter, all attributes\nnot declared in the object will be set to defaults.</p>\n<p>The available attributes are:\n<br>\nalpha - indicates if the canvas contains an alpha buffer\ndefault is true</p>\n<p>depth - indicates whether the drawing buffer has a depth buffer\nof at least 16 bits - default is true</p>\n<p>stencil - indicates whether the drawing buffer has a stencil buffer\nof at least 8 bits</p>\n<p>antialias - indicates whether or not to perform anti-aliasing\ndefault is false (true in Safari)</p>\n<p>premultipliedAlpha - indicates that the page compositor will assume\nthe drawing buffer contains colors with pre-multiplied alpha\ndefault is true</p>\n<p>preserveDrawingBuffer - if true the buffers will not be cleared and\nand will preserve their values until cleared or overwritten by author\n(note that p5 clears automatically on draw loop)\ndefault is true</p>\n<p>perPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader otherwise per-vertex lighting is used.\ndefault is true.</p>\n<p>version - either 1 or 2, to specify which WebGL version to ask for. By\ndefault, WebGL 2 will be requested. If WebGL2 is not available, it will\nfall back to WebGL 1. You can check what version is used with by looking at\nthe global <code>webglVersion</code> property.</p>\n",
- "itemtype": "method",
- "name": "setAttributes",
- "example": [
- "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(255);\n push();\n rotateZ(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n rotateY(frameCount * 0.02);\n fill(0, 0, 0);\n box(50);\n pop();\n}\n</code>\n</div>\n<br>\nNow with the antialias attribute set to true.\n<br>\n<div>\n<code>\nfunction setup() {\n setAttributes('antialias', true);\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(255);\n push();\n rotateZ(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n rotateY(frameCount * 0.02);\n fill(0, 0, 0);\n box(50);\n pop();\n}\n</code>\n</div>\n\n<div>\n<code>\n// press the mouse button to disable perPixelLighting\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n fill(255);\n}\n\nlet lights = [\n { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },\n { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },\n { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },\n { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },\n { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },\n { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }\n];\n\nfunction draw() {\n let t = millis() / 1000 + 1000;\n background(0);\n directionalLight(color('#222'), 1, 1, 1);\n\n for (let i = 0; i < lights.length; i++) {\n let light = lights[i];\n pointLight(\n color(light.c),\n p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)\n );\n }\n\n specularMaterial(255);\n sphere(width * 0.1);\n\n rotateX(t * 0.77);\n rotateY(t * 0.83);\n rotateZ(t * 0.91);\n torus(width * 0.3, width * 0.07, 24, 10);\n}\n\nfunction mousePressed() {\n setAttributes('perPixelLighting', false);\n noStroke();\n fill(255);\n}\nfunction mouseReleased() {\n setAttributes('perPixelLighting', true);\n noStroke();\n fill(255);\n}\n</code>\n</div>"
- ],
- "alt": "a rotating cube with smoother edges",
- "class": "p5",
- "module": "Rendering",
- "submodule": "Rendering",
- "overloads": [
- {
- "line": 118,
"params": [
{
- "name": "key",
- "description": "<p>Name of attribute</p>\n",
- "type": "String"
+ "name": "sx",
+ "type": "Integer"
},
{
- "name": "value",
- "description": "<p>New value of named attribute</p>\n",
- "type": "Boolean"
+ "name": "sy",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "type": "Integer"
+ },
+ {
+ "name": "blendMode",
+ "type": "BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL"
}
]
},
{
- "line": 262,
"params": [
{
- "name": "obj",
- "description": "<p>object with key-value pairs</p>\n",
- "type": "Object"
+ "name": "srcImage",
+ "description": "source image",
+ "type": "p5.Image"
+ },
+ {
+ "name": "sx",
+ "description": "x-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "description": "y-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "description": "source image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "description": "source image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "description": "x-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "description": "y-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "description": "destination image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "description": "destination image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "blendMode",
+ "description": "<p>the blend mode. either\nBLEND, DARKEST, LIGHTEST, DIFFERENCE,\nMULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\nSOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>\n<p>Available blend modes are: normal | multiply | screen | overlay |\ndarken | lighten | color-dodge | color-burn | hard-light |\nsoft-light | difference | exclusion | hue | saturation |\ncolor | luminosity</p>\n<p>http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</p>\n",
+ "type": "BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL"
}
]
- }
- ]
- },
- {
- "file": "src/webgl/p5.Shader.js",
- "line": 233,
- "description": "<p>Shaders are written in <a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\">GLSL</a>, but\nthere are different versions of GLSL that it might be written in.</p>\n<p>Calling this method on a <code>p5.Shader</code> will return the GLSL version it uses, either <code>100 es</code> or <code>300 es</code>.\nWebGL 1 shaders will only use <code>100 es</code>, and WebGL 2 shaders may use either.</p>\n",
- "return": {
- "description": "The GLSL version used by the shader.",
- "type": "String"
- },
- "class": "p5.Shader",
- "module": "3D",
- "submodule": "Material"
- },
- {
- "file": "src/webgl/p5.Shader.js",
- "line": 259,
- "description": "<p>Logs the hooks available in this shader, and their current implementation.</p>\n<p>Each shader may let you override bits of its behavior. Each bit is called\na <em>hook.</em> A hook is either for the <em>vertex</em> shader, if it affects the\nposition of vertices, or in the <em>fragment</em> shader, if it affects the pixel\ncolor. This method logs those values to the console, letting you know what\nyou are able to use in a call to\n<a href=\"#/p5.Shader/modify\"><code>modify()</code></a>.</p>\n<p>For example, this shader will produce the following output:</p>\n<pre><code class=\"language-js\">myShader = baseMaterialShader().modify({\n declarations: 'uniform float time;',\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n});\nmyShader.inspectHooks();\n</code></pre>\n<pre><code>==== Vertex shader hooks: ====\nvoid beforeVertex() {}\nvec3 getLocalPosition(vec3 position) { return position; }\n[MODIFIED] vec3 getWorldPosition(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }\nvec3 getLocalNormal(vec3 normal) { return normal; }\nvec3 getWorldNormal(vec3 normal) { return normal; }\nvec2 getUV(vec2 uv) { return uv; }\nvec4 getVertexColor(vec4 color) { return color; }\nvoid afterVertex() {}\n\n==== Fragment shader hooks: ====\nvoid beforeFragment() {}\nInputs getPixelInputs(Inputs inputs) { return inputs; }\nvec4 combineColors(ColorComponents components) {\n vec4 color = vec4(0.);\n color.rgb += components.diffuse * components.baseColor;\n color.rgb += components.ambient * components.ambientColor;\n color.rgb += components.specular * components.specularColor;\n color.rgb += components.emissive;\n color.a = components.opacity;\n return color;\n }\nvec4 getFinalColor(vec4 color) { return color; }\nvoid afterFragment() {}\n</code></pre>\n",
- "itemtype": "method",
- "name": "inspectHooks",
- "beta": 1,
- "class": "p5.Shader",
- "module": "3D",
- "submodule": "Material"
- },
- {
- "file": "src/webgl/p5.Shader.js",
- "line": 340,
- "description": "<p>Returns a new shader, based on the original, but with custom snippets\nof shader code replacing default behaviour.</p>\n<p>Each shader may let you override bits of its behavior. Each bit is called\na <em>hook.</em> A hook is either for the <em>vertex</em> shader, if it affects the\nposition of vertices, or in the <em>fragment</em> shader, if it affects the pixel\ncolor. You can inspect the different hooks available by calling\n<a href=\"#/p5.Shader/inspectHooks\"><code>yourShader.inspectHooks()</code></a>. You can\nalso read the reference for the default material, normal material, color, line, and point shaders to\nsee what hooks they have available.</p>\n<p><code>modify()</code> takes one parameter, <code>hooks</code>, an object with the hooks you want\nto override. Each key of the <code>hooks</code> object is the name\nof a hook, and the value is a string with the GLSL code for your hook.</p>\n<p>If you supply functions that aren't existing hooks, they will get added at the start of\nthe shader as helper functions so that you can use them in your hooks.</p>\n<p>To add new <a href=\"#/p5.Shader/setUniform\">uniforms</a> to your shader, you can pass in a <code>uniforms</code> object containing\nthe type and name of the uniform as the key, and a default value or function returning\na default value as its value. These will be automatically set when the shader is set\nwith <code>shader(yourShader)</code>.</p>\n<p>You can also add a <code>declarations</code> key, where the value is a GLSL string declaring\ncustom uniform variables, globals, and functions shared\nbetween hooks. To add declarations just in a vertex or fragment shader, add\n<code>vertexDeclarations</code> and <code>fragmentDeclarations</code> keys.</p>\n",
- "itemtype": "method",
- "name": "modify",
- "beta": 1,
- "params": [
+ },
{
- "name": "hooks",
- "description": "<p>The hooks in the shader to replace.</p>\n",
- "type": "Object",
- "optional": true
+ "params": [
+ {
+ "name": "sx",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "type": "Integer"
+ },
+ {
+ "name": "blendMode",
+ "type": "BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "srcImage",
+ "description": "source image",
+ "type": "p5.Image"
+ },
+ {
+ "name": "sx",
+ "description": "x-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "description": "y-coordinate of the source's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "description": "source image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "description": "source image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "description": "x-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "description": "y-coordinate of the destination's upper-left corner.",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "description": "destination image width.",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "description": "destination image height.",
+ "type": "Integer"
+ },
+ {
+ "name": "blendMode",
+ "description": "<p>the blend mode. either\nBLEND, DARKEST, LIGHTEST, DIFFERENCE,\nMULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\nSOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>\n<p>Available blend modes are: normal | multiply | screen | overlay |\ndarken | lighten | color-dodge | color-burn | hard-light |\nsoft-light | difference | exclusion | hue | saturation |\ncolor | luminosity</p>\n<p>http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</p>\n",
+ "type": "BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "sx",
+ "type": "Integer"
+ },
+ {
+ "name": "sy",
+ "type": "Integer"
+ },
+ {
+ "name": "sw",
+ "type": "Integer"
+ },
+ {
+ "name": "sh",
+ "type": "Integer"
+ },
+ {
+ "name": "dx",
+ "type": "Integer"
+ },
+ {
+ "name": "dy",
+ "type": "Integer"
+ },
+ {
+ "name": "dw",
+ "type": "Integer"
+ },
+ {
+ "name": "dh",
+ "type": "Integer"
+ },
+ {
+ "name": "blendMode",
+ "type": "BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL"
+ }
+ ]
}
],
- "return": {
- "description": "",
- "type": "p5.Shader"
- },
- "example": [
- "\n<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n lights();\n noStroke();\n fill('red');\n sphere(50);\n}\n</code>\n</div>",
- "\n<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n // Manually specifying a uniform\n declarations: 'uniform float time;',\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n myShader.setUniform('time', millis());\n lights();\n noStroke();\n fill('red');\n sphere(50);\n}\n</code>\n</div>"
- ],
- "class": "p5.Shader",
- "module": "3D",
- "submodule": "Material"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/webgl/p5.Shader.js",
- "line": 574,
- "description": "<p>Copies the shader from one drawing context to another.</p>\n<p>Each <code>p5.Shader</code> object must be compiled by calling\n<a href=\"#/p5/shader\">shader()</a> before it can run. Compilation happens\nin a drawing context which is usually the main canvas or an instance of\n<a href=\"#/p5.Graphics\">p5.Graphics</a>. A shader can only be used in the\ncontext where it was compiled. The <code>copyToContext()</code> method compiles the\nshader again and copies it to another drawing context where it can be\nreused.</p>\n<p>The parameter, <code>context</code>, is the drawing context where the shader will be\nused. The shader can be copied to an instance of\n<a href=\"#/p5.Graphics\">p5.Graphics</a>, as in\n<code>myShader.copyToContext(pg)</code>. The shader can also be copied from a\n<a href=\"#/p5.Graphics\">p5.Graphics</a> object to the main canvas using\nthe <code>window</code> variable, as in <code>myShader.copyToContext(window)</code>.</p>\n<p>Note: A <a href=\"#/p5.Shader\">p5.Shader</a> object created with\n<a href=\"#/p5/createShader\">createShader()</a>,\n<a href=\"#/p5/createFilterShader\">createFilterShader()</a>, or\n<a href=\"#/p5/loadShader\">loadShader()</a>\ncan be used directly with a <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a>\nobject created with\n<a href=\"#/p5/createFramebuffer\">createFramebuffer()</a>. Both objects\nhave the same context as the main canvas.</p>\n",
+ "name": "save",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 1546,
"itemtype": "method",
- "name": "copyToContext",
- "params": [
+ "description": "<p>Saves the image to a file.</p>\n<p>By default, <code>img.save()</code> saves the image as a PNG image called\n<code>untitled.png</code>.</p>\n<p>The first parameter, <code>filename</code>, is optional. It's a string that sets the\nfile's name. If a file extension is included, as in\n<code>img.save('drawing.png')</code>, then the image will be saved using that\nformat.</p>\n<p>The second parameter, <code>extension</code>, is also optional. It sets the files format.\nEither <code>'png'</code> or <code>'jpg'</code> can be used. For example, <code>img.save('drawing', 'jpg')</code>\nsaves the canvas to a file called <code>drawing.jpg</code>.</p>\n<p>Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.</p>\n<p>The image will only be downloaded as an animated GIF if it was loaded\nfrom a GIF file. See <a href=\"#/p5/saveGif\">saveGif()</a> to create new\nGIFs.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a mountain landscape. The image is downloaded when the user presses the \"s\", \"j\", or \"p\" key.');\n}\n\n// Save the image with different options when the user presses a key.\nfunction keyPressed() {\n if (key === 's') {\n img.save();\n } else if (key === 'j') {\n img.save('rockies.jpg');\n } else if (key === 'p') {\n img.save('rockies', 'png');\n }\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a mountain landscape. The image is downloaded when the user presses the \"s\", \"j\", or \"p\" key.');\n}\n\n// Save the image with different options when the user presses a key.\nfunction keyPressed() {\n if (key === 's') {\n img.save();\n } else if (key === 'j') {\n img.save('rockies.jpg');\n } else if (key === 'p') {\n img.save('rockies', 'png');\n }\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a mountain landscape. The image is downloaded when the user presses the \"s\", \"j\", or \"p\" key.');\n}\n\n// Save the image with different options when the user presses a key.\nfunction keyPressed() {\n if (key === 's') {\n img.save();\n } else if (key === 'j') {\n img.save('rockies.jpg');\n } else if (key === 'p') {\n img.save('rockies', 'png');\n }\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n // Load the image.\n img = await loadImage('assets/rockies.jpg');\n\n createCanvas(100, 100);\n\n // Display the image.\n image(img, 0, 0);\n\n describe('An image of a mountain landscape. The image is downloaded when the user presses the \"s\", \"j\", or \"p\" key.');\n}\n\n// Save the image with different options when the user presses a key.\nfunction keyPressed() {\n if (key === 's') {\n img.save();\n } else if (key === 'j') {\n img.save('rockies.jpg');\n } else if (key === 'p') {\n img.save('rockies', 'png');\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "filename",
+ "description": "filename. Defaults to 'untitled'.",
+ "type": "String"
+ },
+ {
+ "name": "extension",
+ "description": "file extension, either 'png' or 'jpg'.\nDefaults to 'png'.",
+ "optional": 1,
+ "type": "String"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "filename",
+ "description": "filename. Defaults to 'untitled'.",
+ "type": "String"
+ },
+ {
+ "name": "extension",
+ "description": "file extension, either 'png' or 'jpg'.\nDefaults to 'png'.",
+ "optional": 1,
+ "type": "String"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "filename",
+ "description": "filename. Defaults to 'untitled'.",
+ "type": "String"
+ },
+ {
+ "name": "extension",
+ "description": "file extension, either 'png' or 'jpg'.\nDefaults to 'png'.",
+ "optional": 1,
+ "type": "String"
+ }
+ ]
+ },
{
- "name": "context",
- "description": "<p>WebGL context for the copied shader.</p>\n",
- "type": "p5|p5.Graphics"
+ "params": [
+ {
+ "name": "filename",
+ "description": "filename. Defaults to 'untitled'.",
+ "type": "String"
+ },
+ {
+ "name": "extension",
+ "description": "file extension, either 'png' or 'jpg'.\nDefaults to 'png'.",
+ "optional": 1,
+ "type": "String"
+ }
+ ]
}
],
- "return": {
- "description": "new shader compiled for the target context.",
- "type": "p5.Shader"
- },
- "example": [
- "\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\\\n}\n`;\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Shader object.\n let original = createShader(vertSrc, fragSrc);\n\n // Compile the p5.Shader object.\n shader(original);\n\n // Create a p5.Graphics object.\n pg = createGraphics(50, 50, WEBGL);\n\n // Copy the original shader to the p5.Graphics object.\n let copied = original.copyToContext(pg);\n\n // Apply the copied shader to the p5.Graphics object.\n pg.shader(copied);\n\n // Style the display surface.\n pg.noStroke();\n\n // Add a display surface for the shader.\n pg.plane(50, 50);\n\n describe('A square with purple-blue gradient on its surface drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the p5.Graphics object to the main canvas.\n image(pg, -25, -25);\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nlet copied;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Graphics object.\n let pg = createGraphics(25, 25, WEBGL);\n\n // Create a p5.Shader object.\n let original = pg.createShader(vertSrc, fragSrc);\n\n // Compile the p5.Shader object.\n pg.shader(original);\n\n // Copy the original shader to the main canvas.\n copied = original.copyToContext(window);\n\n // Apply the copied shader to the main canvas.\n shader(copied);\n\n describe('A rotating cube with a purple-blue gradient on its surface drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the x-, y-, and z-axes.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n\n // Draw the box.\n box(50);\n}\n</code>\n</div>"
- ],
- "class": "p5.Shader",
- "module": "3D",
- "submodule": "Material"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "src/webgl/p5.Shader.js",
- "line": 990,
- "description": "<p>Sets the shader’s uniform (global) variables.</p>\n<p>Shader programs run on the computer’s graphics processing unit (GPU).\nThey live in part of the computer’s memory that’s completely separate\nfrom the sketch that runs them. Uniforms are global variables within a\nshader program. They provide a way to pass values from a sketch running\non the CPU to a shader program running on the GPU.</p>\n<p>The first parameter, <code>uniformName</code>, is a string with the uniform’s name.\nFor the shader above, <code>uniformName</code> would be <code>'r'</code>.</p>\n<p>The second parameter, <code>data</code>, is the value that should be used to set the\nuniform. For example, calling <code>myShader.setUniform('r', 0.5)</code> would set\nthe <code>r</code> uniform in the shader above to <code>0.5</code>. data should match the\nuniform’s type. Numbers, strings, booleans, arrays, and many types of\nimages can all be passed to a shader with <code>setUniform()</code>.</p>\n",
+ "name": "reset",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 1615,
"itemtype": "method",
- "name": "setUniform",
- "chainable": 1,
- "params": [
+ "description": "Restarts an animated GIF at its first frame.",
+ "example": [
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-once.gif');\n\n createCanvas(100, 100);\n\n describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Reset the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.reset();\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-once.gif');\n\n createCanvas(100, 100);\n\n describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Reset the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.reset();\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-once.gif');\n\n createCanvas(100, 100);\n\n describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Reset the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.reset();\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-once.gif');\n\n createCanvas(100, 100);\n\n describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Reset the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.reset();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "uniformName",
- "description": "<p>name of the uniform. Must match the name\n used in the vertex and fragment shaders.</p>\n",
- "type": "String"
+ "params": []
+ },
+ {
+ "params": []
+ },
+ {
+ "params": []
},
{
- "name": "data",
- "description": "<p>value to assign to the uniform. Must match the uniform’s data type.</p>\n",
- "type": "Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture"
+ "params": []
}
],
- "example": [
- "\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nuniform float r;\n\nvoid main() {\n gl_FragColor = vec4(r, 1.0, 1.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(myShader);\n\n // Set the r uniform to 0.5.\n myShader.setUniform('r', 0.5);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface for the shader.\n plane(100, 100);\n\n describe('A cyan square.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nuniform float r;\n\nvoid main() {\n gl_FragColor = vec4(r, 1.0, 1.0, 1.0);\n}\n`;\n\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(myShader);\n\n describe('A square oscillates color between cyan and white.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the drawing surface.\n noStroke();\n\n // Update the r uniform.\n let nextR = 0.5 * (sin(frameCount * 0.01) + 1);\n myShader.setUniform('r', nextR);\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nlet mandelbrot;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n mandelbrot = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates\n // between 0 and 0.005.\n // r is the size of the image in Mandelbrot-space.\n let radius = 0.005 * (sin(frameCount * 0.01) + 1);\n mandelbrot.setUniform('r', radius);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n</code>\n</div>"
- ],
- "class": "p5.Shader",
- "module": "3D",
- "submodule": "Material"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 1,
- "class": "p5.sound",
- "module": "3D"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 52,
- "description": "<p>p5.sound \n<a href=\"https://p5js.org/reference/#/libraries/p5.sound\">https://p5js.org/reference/#/libraries/p5.sound</a></p>\n<p>From the Processing Foundation and contributors\n<a href=\"https://github.com/processing/p5.js-sound/graphs/contributors\">https://github.com/processing/p5.js-sound/graphs/contributors</a></p>\n<p>MIT License (MIT)\n<a href=\"https://github.com/processing/p5.js-sound/blob/master/LICENSE\">https://github.com/processing/p5.js-sound/blob/master/LICENSE</a></p>\n<p>Some of the many audio libraries & resources that inspire p5.sound:</p>\n<ul>\n<li>TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). <a href=\"https://github.com/TONEnoTONE/Tone.js\">https://github.com/TONEnoTONE/Tone.js</a></li>\n<li>buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). <a href=\"http://buzz.jaysalvat.com/\">http://buzz.jaysalvat.com/</a></li>\n<li>Boris Smus Web Audio API book, 2013. Licensed under the Apache License <a href=\"http://www.apache.org/licenses/LICENSE-2.0\">http://www.apache.org/licenses/LICENSE-2.0</a></li>\n<li>wavesurfer.js <a href=\"https://github.com/katspaugh/wavesurfer.js\">https://github.com/katspaugh/wavesurfer.js</a></li>\n<li>Web Audio Components by Jordan Santell <a href=\"https://github.com/web-audio-components\">https://github.com/web-audio-components</a></li>\n<li>Wilm Thoben's Sound library for Processing <a href=\"https://github.com/processing/processing/tree/master/java/libraries/sound\">https://github.com/processing/processing/tree/master/java/libraries/sound</a></li>\n</ul>\n<p> Web Audio API: <a href=\"http://w3.org/TR/webaudio/\">http://w3.org/TR/webaudio/</a></p>\n",
- "class": "p5.sound",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 159,
- "description": "<p>Returns the Audio Context for this sketch. Useful for users\nwho would like to dig deeper into the <a target='_blank' href=\n'http://webaudio.github.io/web-audio-api/'>Web Audio API\n</a>.</p>\n\n<p>Some browsers require users to startAudioContext\nwith a user gesture, such as touchStarted in the example below.</p>",
+ "name": "getCurrentFrame",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 1660,
"itemtype": "method",
- "name": "getAudioContext",
- "return": {
- "description": "AudioContext for this sketch",
- "type": "Object"
- },
+ "description": "Gets the index of the current frame in an animated GIF.",
"example": [
- "\n<div><code>\n function draw() {\n background(255);\n textAlign(CENTER);\n\n if (getAudioContext().state !== 'running') {\n text('click to start audio', width/2, height/2);\n } else {\n text('audio is enabled', width/2, height/2);\n }\n }\n\n function touchStarted() {\n if (getAudioContext().state !== 'running') {\n getAudioContext().resume();\n }\n var synth = new p5.MonoSynth();\n synth.play('A4', 0.5, 0, 0.2);\n }\n\n</div></code>"
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');\n}\n\nfunction draw() {\n // Get the index of the current GIF frame.\n let index = gif.getCurrentFrame();\n\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current frame.\n text(index, 10, 90);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');\n}\n\nfunction draw() {\n // Get the index of the current GIF frame.\n let index = gif.getCurrentFrame();\n\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current frame.\n text(index, 10, 90);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');\n}\n\nfunction draw() {\n // Get the index of the current GIF frame.\n let index = gif.getCurrentFrame();\n\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current frame.\n text(index, 10, 90);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');\n}\n\nfunction draw() {\n // Get the index of the current GIF frame.\n let index = gif.getCurrentFrame();\n\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current frame.\n text(index, 10, 90);\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 198,
- "description": "<p>It is not only a good practice to give users control over starting\naudio. This policy is enforced by many web browsers, including iOS and\n<a href=\"https://goo.gl/7K7WLu\" title=\"Google Chrome's autoplay\npolicy\">Google Chrome</a>, which create the Web Audio API's\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/AudioContext\"\ntitle=\"Audio Context @ MDN\">Audio Context</a>\nin a suspended state.</p>\n\n<p>In these browser-specific policies, sound will not play until a user\ninteraction event (i.e. <code>mousePressed()</code>) explicitly resumes\nthe AudioContext, or starts an audio node. This can be accomplished by\ncalling <code>start()</code> on a <code>p5.Oscillator</code>,\n<code> play()</code> on a <code>p5.SoundFile</code>, or simply\n<code>userStartAudio()</code>.</p>\n\n<p><code>userStartAudio()</code> starts the AudioContext on a user\ngesture. The default behavior will enable audio on any\nmouseUp or touchEnd event. It can also be placed in a specific\ninteraction function, such as <code>mousePressed()</code> as in the\nexample below. This method utilizes\n<a href=\"https://github.com/tambien/StartAudioContext\">StartAudioContext\n</a>, a library by Yotam Mann (MIT Licence, 2016).</p>",
- "params": [
+ "overloads": [
{
- "name": "elements",
- "description": "<p>This argument can be an Element,\n Selector String, NodeList, p5.Element,\n jQuery Element, or an Array of any of those.</p>\n",
- "type": "Element|Array",
- "optional": true
+ "params": [],
+ "return": {
+ "description": "index of the GIF's current frame.",
+ "type": "Number"
+ }
},
{
- "name": "callback",
- "description": "<p>Callback to invoke when the AudioContext\n has started</p>\n",
- "type": "Function",
- "optional": true
+ "params": [],
+ "return": {
+ "description": "index of the GIF's current frame.",
+ "type": "Number"
+ }
+ },
+ {
+ "params": [],
+ "return": {
+ "description": "index of the GIF's current frame.",
+ "type": "Number"
+ }
+ },
+ {
+ "params": [],
+ "return": {
+ "description": "index of the GIF's current frame.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "Returns a Promise that resolves when\n the AudioContext state is 'running'",
- "type": "Promise"
- },
- "itemtype": "method",
- "name": "userStartAudio",
- "example": [
- "\n<div><code>\nfunction setup() {\n // mimics the autoplay policy\n getAudioContext().suspend();\n\n let mySynth = new p5.MonoSynth();\n\n // This won't play until the context has resumed\n mySynth.play('A6');\n}\nfunction draw() {\n background(220);\n textAlign(CENTER, CENTER);\n text(getAudioContext().state, width/2, height/2);\n}\nfunction mousePressed() {\n userStartAudio();\n}\n</code></div>"
- ],
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 401,
- "description": "<p>This module has shims</p>\n",
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 536,
- "description": "<p>Determine which filetypes are supported (inspired by buzz.js)\nThe audio element (el) will only be used to test browser support for various audio formats</p>\n",
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 726,
- "description": "<p>Returns a number representing the output volume for sound\nin this sketch.</p>\n",
- "itemtype": "method",
- "name": "getOutputVolume",
- "return": {
- "description": "Output volume for sound in this sketch.\n Should be between 0.0 (silence) and 1.0.",
+ "description": "index of the GIF's current frame.",
"type": "Number"
},
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 738,
- "description": "<p>Scale the output of all sound in this sketch</p>\nScaled between 0.0 (silence) and 1.0 (full volume).\n1.0 is the maximum amplitude of a digital sound, so multiplying\nby greater than 1.0 may cause digital distortion. To\nfade, provide a <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.\n\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n<p><b>How This Works</b>: When you load the p5.sound module, it\ncreates a single instance of p5sound. All sound objects in this\nmodule output to p5sound before reaching your computer's output.\nSo if you change the amplitude of p5sound, it impacts all of the\nsound in this module.</p>\n\n<p>If no value is provided, returns a Web Audio API Gain Node</p>",
+ "name": "setFrame",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 1708,
"itemtype": "method",
- "name": "outputVolume",
- "params": [
+ "description": "Sets the current frame in an animated GIF.",
+ "example": [
+ "<div>\n<code>\nlet gif;\nlet frameSlider;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');\n\n createCanvas(100, 100);\n\n // Get the index of the last frame.\n let maxFrame = gif.numFrames() - 1;\n\n // Create a slider to control which frame is drawn.\n frameSlider = createSlider(0, maxFrame);\n frameSlider.position(10, 80);\n frameSlider.size(80);\n\n describe('A cartoon eye looks around when a slider is moved.');\n}\n\nfunction draw() {\n // Get the slider's value.\n let index = frameSlider.value();\n\n // Set the GIF's frame.\n gif.setFrame(index);\n\n // Display the image.\n image(gif, 0, 0);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\nlet frameSlider;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');\n\n createCanvas(100, 100);\n\n // Get the index of the last frame.\n let maxFrame = gif.numFrames() - 1;\n\n // Create a slider to control which frame is drawn.\n frameSlider = createSlider(0, maxFrame);\n frameSlider.position(10, 80);\n frameSlider.size(80);\n\n describe('A cartoon eye looks around when a slider is moved.');\n}\n\nfunction draw() {\n // Get the slider's value.\n let index = frameSlider.value();\n\n // Set the GIF's frame.\n gif.setFrame(index);\n\n // Display the image.\n image(gif, 0, 0);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\nlet frameSlider;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');\n\n createCanvas(100, 100);\n\n // Get the index of the last frame.\n let maxFrame = gif.numFrames() - 1;\n\n // Create a slider to control which frame is drawn.\n frameSlider = createSlider(0, maxFrame);\n frameSlider.position(10, 80);\n frameSlider.size(80);\n\n describe('A cartoon eye looks around when a slider is moved.');\n}\n\nfunction draw() {\n // Get the slider's value.\n let index = frameSlider.value();\n\n // Set the GIF's frame.\n gif.setFrame(index);\n\n // Display the image.\n image(gif, 0, 0);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\nlet frameSlider;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');\n\n createCanvas(100, 100);\n\n // Get the index of the last frame.\n let maxFrame = gif.numFrames() - 1;\n\n // Create a slider to control which frame is drawn.\n frameSlider = createSlider(0, maxFrame);\n frameSlider.position(10, 80);\n frameSlider.size(80);\n\n describe('A cartoon eye looks around when a slider is moved.');\n}\n\nfunction draw() {\n // Get the slider's value.\n let index = frameSlider.value();\n\n // Set the GIF's frame.\n gif.setFrame(index);\n\n // Display the image.\n image(gif, 0, 0);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "volume",
- "description": "<p>Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator</p>\n",
- "type": "Number|Object"
+ "params": [
+ {
+ "name": "index",
+ "description": "index of the frame to display.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "rampTime",
- "description": "<p>Fade for t seconds</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "index",
+ "description": "index of the frame to display.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "timeFromNow",
- "description": "<p>Schedule this event to happen at\n t seconds in the future</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 782,
- "description": "<p><code>p5.soundOut</code> is the p5.sound final output bus. It sends output to\nthe destination of this window's web audio context. It contains\nWeb Audio API nodes including a dyanmicsCompressor (<code>.limiter</code>),\nand Gain Nodes for <code>.input</code> and <code>.output</code>.</p>\n",
- "itemtype": "property",
- "name": "soundOut",
- "type": "Object",
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 807,
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 811,
- "description": "<p>Returns a number representing the sample rate, in samples per second,\nof all sound objects in this audio context. It is determined by the\nsampling rate of your operating system's sound card, and it is not\ncurrently possile to change.\nIt is often 44100, or twice the range of human hearing.</p>\n",
- "itemtype": "method",
- "name": "sampleRate",
- "return": {
- "description": "samplerate samples per second",
- "type": "Number"
- },
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 825,
- "description": "<p>Returns the closest MIDI note value for\na given frequency.</p>\n",
- "itemtype": "method",
- "name": "freqToMidi",
- "params": [
+ "params": [
+ {
+ "name": "index",
+ "description": "index of the frame to display.",
+ "type": "Number"
+ }
+ ]
+ },
{
- "name": "frequency",
- "description": "<p>A freqeuncy, for example, the \"A\"\n above Middle C is 440Hz</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "index",
+ "description": "index of the frame to display.",
+ "type": "Number"
+ }
+ ]
}
],
- "return": {
- "description": "MIDI note value",
- "type": "Number"
- },
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 841,
- "description": "<p>Returns the frequency value of a MIDI note value.\nGeneral MIDI treats notes as integers where middle C\nis 60, C# is 61, D is 62 etc. Useful for generating\nmusical frequencies with oscillators.</p>\n",
+ "name": "numFrames",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 1755,
"itemtype": "method",
- "name": "midiToFreq",
- "params": [
+ "description": "Returns the number of frames in an animated GIF.",
+ "example": [
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A cartoon eye looks around. The text \"n / 125\" is shown at the bottom of the canvas.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current state of playback.\n let total = gif.numFrames();\n let index = gif.getCurrentFrame();\n text(`${index} / ${total}`, 30, 90);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A cartoon eye looks around. The text \"n / 125\" is shown at the bottom of the canvas.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current state of playback.\n let total = gif.numFrames();\n let index = gif.getCurrentFrame();\n text(`${index} / ${total}`, 30, 90);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A cartoon eye looks around. The text \"n / 125\" is shown at the bottom of the canvas.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current state of playback.\n let total = gif.numFrames();\n let index = gif.getCurrentFrame();\n text(`${index} / ${total}`, 30, 90);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A cartoon eye looks around. The text \"n / 125\" is shown at the bottom of the canvas.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n\n // Display the current state of playback.\n let total = gif.numFrames();\n let index = gif.getCurrentFrame();\n text(`${index} / ${total}`, 30, 90);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "midiNote",
- "description": "<p>The number of a MIDI note</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "number of frames in the GIF.",
+ "type": "Number"
+ }
+ },
+ {
+ "params": [],
+ "return": {
+ "description": "number of frames in the GIF.",
+ "type": "Number"
+ }
+ },
+ {
+ "params": [],
+ "return": {
+ "description": "number of frames in the GIF.",
+ "type": "Number"
+ }
+ },
+ {
+ "params": [],
+ "return": {
+ "description": "number of frames in the GIF.",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "Frequency value of the given MIDI note",
+ "description": "number of frames in the GIF.",
"type": "Number"
},
- "example": [
- "\n<div><code>\nlet midiNotes = [60, 64, 67, 72];\nlet noteIndex = 0;\nlet midiVal, freq;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(startSound);\n osc = new p5.TriOsc();\n env = new p5.Envelope();\n}\n\nfunction draw() {\n background(220);\n text('tap to play', 10, 20);\n if (midiVal) {\n text('MIDI: ' + midiVal, 10, 40);\n text('Freq: ' + freq, 10, 60);\n }\n}\n\nfunction startSound() {\n // see also: userStartAudio();\n osc.start();\n\n midiVal = midiNotes[noteIndex % midiNotes.length];\n freq = midiToFreq(midiVal);\n osc.freq(freq);\n env.ramp(osc, 0, 1.0, 0);\n\n noteIndex++;\n}\n</code></div>"
- ],
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 925,
- "description": "<p>List the SoundFile formats that you will include. LoadSound\nwill search your directory for these extensions, and will pick\na format that is compatable with the client's web browser.\n<a href=\"http://media.io/\">Here</a> is a free online file\nconverter.</p>\n",
+ "name": "play",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 1796,
"itemtype": "method",
- "name": "soundFormats",
- "params": [
- {
- "name": "formats",
- "description": "<p>i.e. 'mp3', 'wav', 'ogg'</p>\n",
- "type": "String",
- "optional": true,
- "multiple": true
- }
- ],
+ "description": "Plays an animated GIF that was paused with\n<a href=\"#/p5.Image/pause\">img.pause()</a>.",
"example": [
- "\n<div><code>\nfunction preload() {\n // set the global sound formats\n soundFormats('mp3', 'ogg');\n\n // load either beatbox.mp3, or .ogg, depending on browser\n mySound = loadSound('assets/beatbox.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n text('sound loaded! tap to play', 10, 20, width - 20);\n cnv.mousePressed(function() {\n mySound.play();\n });\n }\n</code></div>"
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/nancy-liang-wind-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user releases the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/nancy-liang-wind-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user releases the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/nancy-liang-wind-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user releases the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/nancy-liang-wind-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user releases the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n</code>\n</div>"
],
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 1040,
- "description": "<p>Used by Osc and Envelope to chain signal math</p>\n",
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 1145,
- "description": "<p>Save a p5.SoundFile as a .wav file. The browser will prompt the user\nto download the file to their device.\nFor uploading audio to a server, use\n<a href=\"/docs/reference/#/p5.SoundFile/saveBlob\"><code>p5.SoundFile.saveBlob</code></a>.</p>\n",
- "itemtype": "method",
- "name": "saveSound",
- "params": [
+ "overloads": [
+ {
+ "params": []
+ },
{
- "name": "soundFile",
- "description": "<p>p5.SoundFile that you wish to save</p>\n",
- "type": "p5.SoundFile"
+ "params": []
},
{
- "name": "fileName",
- "description": "<p>name of the resulting .wav file.</p>\n",
- "type": "String"
+ "params": []
+ },
+ {
+ "params": []
}
],
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 1662,
- "description": "<p>Returns true if the sound file finished loading successfully.</p>\n",
- "itemtype": "method",
- "name": "isLoaded",
- "return": {
- "description": "",
- "type": "Boolean"
- },
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 1679,
- "description": "<p>Play the p5.SoundFile</p>\n",
+ "name": "pause",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 1841,
"itemtype": "method",
- "name": "play",
- "params": [
- {
- "name": "startTime",
- "description": "<p>(optional) schedule playback to start (in seconds from now).</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Pauses an animated GIF.</p>\n<p>The GIF can be resumed by calling\n<a href=\"#/p5.Image/play\">img.play()</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/nancy-liang-wind-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user presses the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/nancy-liang-wind-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user presses the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/nancy-liang-wind-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user presses the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/nancy-liang-wind-loop-forever.gif');\n\n createCanvas(100, 100);\n\n describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');\n}\n\nfunction draw() {\n background(255);\n\n // Display the image.\n image(gif, 0, 0);\n}\n\n// Pause the GIF when the user presses the mouse.\nfunction mousePressed() {\n gif.pause();\n}\n\n// Play the GIF when the user presses the mouse.\nfunction mouseReleased() {\n gif.play();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "rate",
- "description": "<p>(optional) playback rate</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
},
{
- "name": "amp",
- "description": "<p>(optional) amplitude (volume)\n of playback</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
},
{
- "name": "cueStart",
- "description": "<p>(optional) cue start time in seconds</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
},
{
- "name": "duration",
- "description": "<p>(optional) duration of playback in seconds</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
}
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 1787,
- "description": "<p>p5.SoundFile has two play modes: <code>restart</code> and\n<code>sustain</code>. Play Mode determines what happens to a\np5.SoundFile if it is triggered while in the middle of playback.\nIn sustain mode, playback will continue simultaneous to the\nnew playback. In restart mode, play() will stop playback\nand start over. With untilDone, a sound will play only if it's\nnot already playing. Sustain is the default mode.</p>\n",
+ "name": "delay",
+ "file": "src/scripts/parsers/in/p5.js/src/image/p5.Image.js",
+ "line": 1916,
"itemtype": "method",
- "name": "playMode",
- "params": [
- {
- "name": "str",
- "description": "<p>'restart' or 'sustain' or 'untilDone'</p>\n",
- "type": "String"
- }
- ],
+ "description": "<p>Changes the delay between frames in an animated GIF.</p>\n<p>The first parameter, <code>delay</code>, is the length of the delay in milliseconds.</p>\n<p>The second parameter, <code>index</code>, is optional. If provided, only the frame\nat <code>index</code> will have its delay modified. All other frames will keep\ntheir default delay.</p>\n",
"example": [
- "\n<div><code>\nlet mySound;\nfunction preload(){\n mySound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n noFill();\n rect(0, height/2, width - 1, height/2 - 1);\n rect(0, 0, width - 1, height/2);\n textAlign(CENTER, CENTER);\n fill(20);\n text('restart', width/2, 1 * height/4);\n text('sustain', width/2, 3 * height/4);\n}\nfunction canvasPressed() {\n if (mouseX < height/2) {\n mySound.playMode('restart');\n } else {\n mySound.playMode('sustain');\n }\n mySound.play();\n}\n\n </code></div>"
+ "<div>\n<code>\nlet gifFast;\nlet gifSlow;\n\nasync function setup() {\n // Load the images.\n gifFast = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n gifSlow = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Resize the images.\n gifFast.resize(50, 50);\n gifSlow.resize(50, 50);\n\n // Set the delay lengths.\n gifFast.delay(10);\n gifSlow.delay(100);\n\n describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');\n}\n\nfunction draw() {\n // Display the images.\n image(gifFast, 0, 0);\n image(gifSlow, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n\n createCanvas(100, 100);\n\n // Set the delay of frame 67.\n gif.delay(3000, 67);\n\n describe('An animated eye looking around. It pauses for three seconds while it looks down.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gifFast;\nlet gifSlow;\n\nasync function setup() {\n // Load the images.\n gifFast = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n gifSlow = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Resize the images.\n gifFast.resize(50, 50);\n gifSlow.resize(50, 50);\n\n // Set the delay lengths.\n gifFast.delay(10);\n gifSlow.delay(100);\n\n describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');\n}\n\nfunction draw() {\n // Display the images.\n image(gifFast, 0, 0);\n image(gifSlow, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n\n createCanvas(100, 100);\n\n // Set the delay of frame 67.\n gif.delay(3000, 67);\n\n describe('An animated eye looking around. It pauses for three seconds while it looks down.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gifFast;\nlet gifSlow;\n\nasync function setup() {\n // Load the images.\n gifFast = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n gifSlow = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Resize the images.\n gifFast.resize(50, 50);\n gifSlow.resize(50, 50);\n\n // Set the delay lengths.\n gifFast.delay(10);\n gifSlow.delay(100);\n\n describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');\n}\n\nfunction draw() {\n // Display the images.\n image(gifFast, 0, 0);\n image(gifSlow, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n\n createCanvas(100, 100);\n\n // Set the delay of frame 67.\n gif.delay(3000, 67);\n\n describe('An animated eye looking around. It pauses for three seconds while it looks down.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n}\n</code>\n</div>",
+ "<div>\n<code>\nlet gifFast;\nlet gifSlow;\n\nasync function setup() {\n // Load the images.\n gifFast = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n gifSlow = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Resize the images.\n gifFast.resize(50, 50);\n gifSlow.resize(50, 50);\n\n // Set the delay lengths.\n gifFast.delay(10);\n gifSlow.delay(100);\n\n describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');\n}\n\nfunction draw() {\n // Display the images.\n image(gifFast, 0, 0);\n image(gifSlow, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet gif;\n\nasync function setup() {\n // Load the image.\n gif = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n\n createCanvas(100, 100);\n\n // Set the delay of frame 67.\n gif.delay(3000, 67);\n\n describe('An animated eye looking around. It pauses for three seconds while it looks down.');\n}\n\nfunction draw() {\n // Display the image.\n image(gif, 0, 0);\n}\n</code>\n</div>"
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 1847,
- "description": "<p>Pauses a file that is currently playing. If the file is not\nplaying, then nothing will happen.</p>\n<p>After pausing, .play() will resume from the paused\nposition.\nIf p5.SoundFile had been set to loop before it was paused,\nit will continue to loop after it is unpaused with .play().</p>\n",
- "itemtype": "method",
- "name": "pause",
- "params": [
- {
- "name": "startTime",
- "description": "<p>(optional) schedule event to occur\n seconds from now</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet soundFile;\nfunction preload() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');\n}\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to play, release to pause', 10, 20, width - 20);\n}\nfunction canvasPressed() {\n soundFile.loop();\n background(0, 200, 50);\n}\nfunction mouseReleased() {\n soundFile.pause();\n background(220);\n}\n</code>\n</div>"
- ],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 1905,
- "description": "<p>Loop the p5.SoundFile. Accepts optional parameters to set the\nplayback rate, playback volume, loopStart, loopEnd.</p>\n",
- "itemtype": "method",
- "name": "loop",
- "params": [
- {
- "name": "startTime",
- "description": "<p>(optional) schedule event to occur\n seconds from now</p>\n",
- "type": "Number",
- "optional": true
- },
+ "overloads": [
{
- "name": "rate",
- "description": "<p>(optional) playback rate</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "d",
+ "description": "delay in milliseconds between switching frames.",
+ "type": "Number"
+ },
+ {
+ "name": "index",
+ "description": "index of the frame that will have its delay modified.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
},
{
- "name": "amp",
- "description": "<p>(optional) playback volume</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "d",
+ "description": "delay in milliseconds between switching frames.",
+ "type": "Number"
+ },
+ {
+ "name": "index",
+ "description": "index of the frame that will have its delay modified.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
},
{
- "name": "cueLoopStart",
- "description": "<p>(optional) startTime in seconds</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "d",
+ "description": "delay in milliseconds between switching frames.",
+ "type": "Number"
+ },
+ {
+ "name": "index",
+ "description": "index of the frame that will have its delay modified.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
},
{
- "name": "duration",
- "description": "<p>(optional) loop duration in seconds</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "d",
+ "description": "delay in milliseconds between switching frames.",
+ "type": "Number"
+ },
+ {
+ "name": "index",
+ "description": "index of the frame that will have its delay modified.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
}
],
- "example": [
- "\n <div><code>\n let soundFile;\n let loopStart = 0.5;\n let loopDuration = 0.2;\n function preload() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');\n }\n function setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to play, release to pause', 10, 20, width - 20);\n }\n function canvasPressed() {\n soundFile.loop();\n background(0, 200, 50);\n }\n function mouseReleased() {\n soundFile.pause();\n background(220);\n }\n </code>\n </div>"
- ],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Image",
+ "static": false,
+ "module": "Image",
+ "submodule": "Image"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 1950,
- "description": "<p>Set a p5.SoundFile's looping flag to true or false. If the sound\nis currently playing, this change will take effect when it\nreaches the end of the current playback.</p>\n",
+ "name": "addRow",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 85,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "setLoop",
- "params": [
+ "description": "<p>Use <a href=\"/reference/p5.Table/addRow/\">addRow()</a> to add a new row of data to a <a href=\"#/p5.Table\">p5.Table</a> object. By default,\nan empty row is created. Typically, you would store a reference to\nthe new row in a TableRow object (see newRow in the example above),\nand then set individual values using <a href=\"#/p5/set\">set()</a>.</p>\n<p>If a <a href=\"#/p5.TableRow\">p5.TableRow</a> object is included as a parameter, then that row is\nduplicated and added to the table.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nasync function setup() {\n // Create a 300x300 canvas\n createCanvas(300, 300);\n\n // Load the CSV file from the assets folder with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Add a new row for \"Wolf\"\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n // Set text properties\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display the table data on the canvas\n // Each cell is positioned based on its row and column\n for (let r = 0; r < table.getRowCount(); r++) {\n for (let c = 0; c < table.getColumnCount(); c++) {\n let x = c * 50 + 10; // Horizontal spacing for each column\n let y = r * 30 + 20; // Vertical spacing for each row\n text(table.getString(r, c), x * c, y);\n }\n }\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "Boolean",
- "description": "<p>set looping to true or false</p>\n",
- "type": "Boolean"
+ "params": [
+ {
+ "name": "row",
+ "description": "row to be added to the table",
+ "optional": 1,
+ "type": "p5.TableRow"
+ }
+ ],
+ "return": {
+ "description": "the row that was added",
+ "type": "p5.TableRow"
+ }
}
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 1976,
- "description": "<p>Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.</p>\n",
- "itemtype": "method",
- "name": "isLooping",
"return": {
- "description": "",
- "type": "Boolean"
+ "description": "the row that was added",
+ "type": "p5.TableRow"
},
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 1997,
- "description": "<p>Returns true if a p5.SoundFile is playing, false if not (i.e.\npaused or stopped).</p>\n",
+ "name": "removeRow",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 141,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "isPlaying",
- "return": {
- "description": "",
- "type": "Boolean"
- },
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "description": "Removes a row from the table object.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Remove the first row from the table\n table.removeRow(0);\n\n // Set text properties for drawing on the canvas\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n\n // Display the table values on the canvas:\n // Each row's cell values are joined into a single string and drawn on a new line.\n let y = 20; // Starting vertical position\n for (let r = 0; r < table.getRowCount(); r++) {\n let rowText = \"\";\n for (let c = 0; c < table.getColumnCount(); c++) {\n rowText += table.getString(r, c) + \" \";\n }\n text(rowText, 18, y * 3);\n y += 20;\n }\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "id",
+ "description": "ID number of the row to remove",
+ "type": "Integer"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2011,
- "description": "<p>Returns true if a p5.SoundFile is paused, false if not (i.e.\nplaying or stopped).</p>\n",
+ "name": "getRow",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 186,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "isPaused",
+ "description": "Returns a reference to the specified <a href=\"#/p5.TableRow\">p5.TableRow</a>. The reference\ncan then be used to get and set values of the selected row.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas\n createCanvas(200, 200);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Get the row at index 1 (second row)\n let row = table.getRow(1);\n\n // Set text properties for drawing on the canvas\n fill(0); // Set text color to black\n textSize(12); // Set the text size\n\n // Loop over each column in the row and display its value on the canvas\n for (let c = 0; c < table.getColumnCount(); c++) {\n text(row.getString(c), 10, 20 + c * 50 + 20);\n }\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "rowID",
+ "description": "ID number of the row to get",
+ "type": "Integer"
+ }
+ ],
+ "return": {
+ "description": "<a href=\"#/p5.TableRow\">p5.TableRow</a> object",
+ "type": "p5.TableRow"
+ }
+ }
+ ],
"return": {
- "description": "",
- "type": "Boolean"
+ "description": "<a href=\"#/p5.TableRow\">p5.TableRow</a> object",
+ "type": "p5.TableRow"
},
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2025,
- "description": "<p>Stop soundfile playback.</p>\n",
+ "name": "getRows",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 238,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "stop",
- "params": [
+ "description": "Gets all rows from the table. Returns an array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n let rows = table.getRows();\n\n // Warning: rows is an array of objects.\n // Set the 'name' of each row to 'Unicorn'\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n // Set text properties\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n\n // Display the modified table values on the canvas\n // We'll join each row's values with a space and display each row on a new line.\n let y = 20; // Starting y position\n for (let r = 0; r < table.getRowCount(); r++) {\n let rowText = \"\";\n for (let c = 0; c < table.getColumnCount(); c++) {\n rowText += table.getString(r, c) + \" \";\n }\n text(rowText, 10, y * 2);\n y += 20; // Move to next line\n }\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "startTime",
- "description": "<p>(optional) schedule event to occur\n in seconds from now</p>\n",
- "type": "Number",
- "optional": true
+ "params": [],
+ "return": {
+ "description": "Array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s",
+ "type": "p5.TableRow[]"
+ }
}
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "Array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s",
+ "type": "p5.TableRow[]"
+ },
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2087,
- "description": "<p>Set the stereo panning of a p5.sound object to\na floating point number between -1.0 (left) and 1.0 (right).\nDefault is 0.0 (center).</p>\n",
+ "name": "findRow",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 284,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "pan",
- "params": [
- {
- "name": "panValue",
- "description": "<p>Set the stereo panner</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "Finds the first row in the Table that contains the value\nprovided, and returns a reference to that row. Even if\nmultiple rows are possible matches, only the first matching\nrow is returned. The column to search may be specified by\neither its ID or title.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 100x100 canvas\n createCanvas(100, 100);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Find the row with the animal named \"Zebra\"\n let row = table.findRow('Zebra', 'name');\n\n // Get the species from the found row\n let species = row.getString('species');\n\n // Set text properties and display the species on the canvas\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n text(species, 10, 30);\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "timeFromNow",
- "description": "<p>schedule this event to happen\n seconds from now</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "value",
+ "description": "The value to match",
+ "type": "String"
+ },
+ {
+ "name": "column",
+ "description": "ID number or title of the\ncolumn to search",
+ "type": "Integer|String"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "p5.TableRow"
+ }
}
],
- "example": [
- "\n<div><code>\n let ballX = 0;\n let soundFile;\n\n function preload() {\n soundFormats('ogg', 'mp3');\n soundFile = loadSound('assets/beatbox.mp3');\n }\n\n function draw() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n ballX = constrain(mouseX, 0, width);\n ellipse(ballX, height/2, 20, 20);\n }\n\n function canvasPressed(){\n // map the ball's x location to a panning degree\n // between -1.0 (left) and 1.0 (right)\n let panning = map(ballX, 0., width,-1.0, 1.0);\n soundFile.pan(panning);\n soundFile.play();\n }\n </div></code>"
- ],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 2131,
- "description": "<p>Returns the current stereo pan position (-1.0 to 1.0)</p>\n",
- "itemtype": "method",
- "name": "getPan",
"return": {
- "description": "Returns the stereo pan setting of the Oscillator\n as a number between -1.0 (left) and 1.0 (right).\n 0.0 is center and default.",
- "type": "Number"
+ "description": "",
+ "type": "p5.TableRow"
},
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2146,
- "description": "<p>Set the playback rate of a sound file. Will change the speed and the pitch.\nValues less than zero will reverse the audio buffer.</p>\n",
+ "name": "findRows",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 351,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "rate",
- "params": [
- {
- "name": "playbackRate",
- "description": "<p>Set the playback rate. 1.0 is normal,\n .5 is half-speed, 2.0 is twice as fast.\n Values less than zero play backwards.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
+ "description": "Finds the rows in the Table that contain the value\nprovided, and returns references to those rows. Returns an\nArray, so for must be used to iterate through all the rows,\nas shown in the example above. The column to search may be\nspecified by either its ID or title.",
"example": [
- "\n<div><code>\nlet mySound;\n\nfunction preload() {\n mySound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n}\nfunction canvasPressed() {\n mySound.loop();\n}\nfunction mouseReleased() {\n mySound.pause();\n}\nfunction draw() {\n background(220);\n\n // Set the rate to a range between 0.1 and 4\n // Changing the rate also alters the pitch\n let playbackRate = map(mouseY, 0.1, height, 2, 0);\n playbackRate = constrain(playbackRate, 0.01, 4);\n mySound.rate(playbackRate);\n\n line(0, mouseY, width, mouseY);\n text('rate: ' + round(playbackRate * 100) + '%', 10, 20);\n}\n\n </code>\n </div>\n"
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas\n createCanvas(200, 200);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Add another goat entry\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Scape Goat');\n newRow.setString('name', 'Goat');\n\n // Find rows where the name is \"Goat\"\n let rows = table.findRows('Goat', 'name');\n\n // Set text properties\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n\n // Display the result on the canvas\n text(rows.length + ' Goats found', 10, 30);\n\n describe('no image displayed');\n}\n</code>\n</div>"
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 2239,
- "description": "<p>Multiply the output volume (amplitude) of a sound file\nbetween 0.0 (silence) and 1.0 (full volume).\n1.0 is the maximum amplitude of a digital sound, so multiplying\nby greater than 1.0 may cause digital distortion. To\nfade, provide a <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.</p>\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n",
- "itemtype": "method",
- "name": "setVolume",
- "params": [
- {
- "name": "volume",
- "description": "<p>Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator</p>\n",
- "type": "Number|Object"
- },
+ "overloads": [
{
- "name": "rampTime",
- "description": "<p>Fade for t seconds</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "timeFromNow",
- "description": "<p>Schedule this event to happen at\n t seconds in the future</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "value",
+ "description": "The value to match",
+ "type": "String"
+ },
+ {
+ "name": "column",
+ "description": "ID number or title of the\ncolumn to search",
+ "type": "Integer|String"
+ }
+ ],
+ "return": {
+ "description": "An Array of TableRow objects",
+ "type": "p5.TableRow[]"
+ }
}
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 2276,
- "description": "<p>Returns the duration of a sound file in seconds.</p>\n",
- "itemtype": "method",
- "name": "duration",
- "return": {
- "description": "The duration of the soundFile in seconds.",
- "type": "Number"
- },
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 2293,
- "description": "<p>Return the current position of the p5.SoundFile playhead, in seconds.\nTime is relative to the normal buffer direction, so if <code>reverseBuffer</code>\nhas been called, currentTime will count backwards.</p>\n",
- "itemtype": "method",
- "name": "currentTime",
"return": {
- "description": "currentTime of the soundFile in seconds.",
- "type": "Number"
+ "description": "An Array of TableRow objects",
+ "type": "p5.TableRow[]"
},
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2308,
- "description": "<p>Move the playhead of a soundfile that is currently playing to a\nnew position and a new duration, in seconds.\nIf none are given, will reset the file to play entire duration\nfrom start to finish. To set the position of a soundfile that is\nnot currently playing, use the <code>play</code> or <code>loop</code> methods.</p>\n",
+ "name": "matchRow",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 412,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "jump",
- "params": [
- {
- "name": "cueTime",
- "description": "<p>cueTime of the soundFile in seconds.</p>\n",
- "type": "Number"
- },
+ "description": "Finds the first row in the Table that matches the regular\nexpression provided, and returns a reference to that row.\nEven if multiple rows are possible matches, only the first\nmatching row is returned. The column to search may be\nspecified by either its ID or title.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas\n createCanvas(200, 200);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Search using the specified regex on column index 1 (species)\n let mammal = table.matchRow(new RegExp('ant'), 1);\n let species = mammal.getString(1); // \"Panthera pardus\"\n\n // Set text properties for drawing on the canvas\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n \n // Display the species on the canvas\n text(species, 10, 30);\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "duration",
- "description": "<p>duration in seconds.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "regexp",
+ "description": "The regular expression to match",
+ "type": "String|RegExp"
+ },
+ {
+ "name": "column",
+ "description": "The column ID (number) or\ntitle (string)",
+ "type": "String|Integer"
+ }
+ ],
+ "return": {
+ "description": "TableRow object",
+ "type": "p5.TableRow"
+ }
}
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 2340,
- "description": "<p>Return the number of channels in a sound file.\nFor example, Mono = 1, Stereo = 2.</p>\n",
- "itemtype": "method",
- "name": "channels",
- "return": {
- "description": "[channels]",
- "type": "Number"
- },
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 2354,
- "description": "<p>Return the sample rate of the sound file.</p>\n",
- "itemtype": "method",
- "name": "sampleRate",
- "return": {
- "description": "[sampleRate]",
- "type": "Number"
- },
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 2367,
- "description": "<p>Return the number of samples in a sound file.\nEqual to sampleRate * duration.</p>\n",
- "itemtype": "method",
- "name": "frames",
"return": {
- "description": "[sampleCount]",
- "type": "Number"
+ "description": "TableRow object",
+ "type": "p5.TableRow"
},
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2381,
- "description": "<p>Returns an array of amplitude peaks in a p5.SoundFile that can be\nused to draw a static waveform. Scans through the p5.SoundFile's\naudio buffer to find the greatest amplitudes. Accepts one\nparameter, 'length', which determines size of the array.\nLarger arrays result in more precise waveform visualizations.</p>\n<p>Inspired by Wavesurfer.js.</p>\n",
+ "name": "matchRows",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 490,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "getPeaks",
- "params": [
+ "description": "Finds the rows in the Table that match the regular expression provided,\nand returns references to those rows. Returns an array, so for must be\nused to iterate through all the rows, as shown in the example. The\ncolumn to search may be specified by either its ID or title.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nfunction setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Create a new p5.Table and add columns\n table = new p5.Table();\n table.addColumn('name');\n table.addColumn('type');\n\n // Add rows to the table\n let newRow = table.addRow();\n newRow.setString('name', 'Lion');\n newRow.setString('type', 'Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', 'Snake');\n newRow.setString('type', 'Reptile');\n\n newRow = table.addRow();\n newRow.setString('name', 'Mosquito');\n newRow.setString('type', 'Insect');\n\n newRow = table.addRow();\n newRow.setString('name', 'Lizard');\n newRow.setString('type', 'Reptile');\n\n // Search for rows where the \"type\" starts with \"R\"\n let rows = table.matchRows('R.*', 'type');\n\n // Set text properties for drawing on the canvas\n fill(0); // Text color: black\n textSize(12); // Text size\n\n // Display each matching row on the canvas\n let y = 20;\n for (let i = 0; i < rows.length; i++) {\n let output = rows[i].getString('name') + ': ' + rows[i].getString('type');\n text(output, 10, y);\n y += 20;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "length",
- "description": "<p>length is the size of the returned array.\n Larger length results in more precision.\n Defaults to 5*width of the browser window.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "regexp",
+ "description": "The regular expression to match",
+ "type": "String"
+ },
+ {
+ "name": "column",
+ "description": "The column ID (number) or\ntitle (string)",
+ "optional": 1,
+ "type": "String|Integer"
+ }
+ ],
+ "return": {
+ "description": "An Array of TableRow objects",
+ "type": "p5.TableRow[]"
+ }
}
],
"return": {
- "description": "Array of peaks.",
- "type": "Float32Array"
+ "description": "An Array of TableRow objects",
+ "type": "p5.TableRow[]"
},
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2443,
- "description": "<p>Reverses the p5.SoundFile's buffer source.\nPlayback must be handled separately (see example).</p>\n",
+ "name": "getColumn",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 542,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "reverseBuffer",
+ "description": "Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.",
"example": [
- "\n<div><code>\nlet drum;\nfunction preload() {\n drum = loadSound('assets/drum.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to play', 20, 20);\n}\n\nfunction canvasPressed() {\n drum.stop();\n drum.reverseBuffer();\n drum.play();\n}\n </code>\n </div>"
+ "<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n*\nasync function setup() {\n // The table is comma separated value \"csv\"\n // and has a header specifying the columns labels.\n table = await loadTable('assets/mammals.csv', 'csv', 'header');\n\n //getColumn returns an array that can be printed directly\n print(table.getColumn('species'));\n //outputs [\"Capra hircus\", \"Panthera pardus\", \"Equus zebra\"]\n describe('no image displayed');\n}\n</code>\n</div>"
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 2497,
- "description": "<p>Schedule an event to be called when the soundfile\nreaches the end of a buffer. If the soundfile is\nplaying through once, this will be called when it\nends. If it is looping, it will be called when\nstop is called.</p>\n",
- "itemtype": "method",
- "name": "onended",
- "params": [
+ "overloads": [
{
- "name": "callback",
- "description": "<p>function to call when the\n soundfile has ended.</p>\n",
- "type": "Function"
+ "params": [
+ {
+ "name": "column",
+ "description": "String or Number of the column to return",
+ "type": "String|Number"
+ }
+ ],
+ "return": {
+ "description": "Array of column values",
+ "type": "Array"
+ }
}
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "Array of column values",
+ "type": "Array"
+ },
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2565,
- "description": "<p>Connects the output of a p5sound object to input of another\np5.sound object. For example, you may connect a p5.SoundFile to an\nFFT or an Effect. If no parameter is given, it will connect to\nthe main output. Most p5sound objects connect to the master\noutput when they are created.</p>\n",
+ "name": "clearRows",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 598,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "connect",
- "params": [
+ "description": "Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.",
+ "example": [
+ "<div>\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas\n createCanvas(200, 200);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Clear all rows from the table\n table.clearRows();\n\n // Set text properties\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display the number of rows and columns on the canvas\n text(table.getRowCount() + ' total rows in table', 10, 30);\n text(table.getColumnCount() + ' total columns in table', 10, 60);\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "object",
- "description": "<p>Audio object that accepts an input</p>\n",
- "type": "Object",
- "optional": true
+ "params": []
}
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 2590,
- "description": "<p>Disconnects the output of this p5sound object.</p>\n",
- "itemtype": "method",
- "name": "disconnect",
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 2604,
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2612,
- "description": "<p>Reset the source for this SoundFile to a\nnew path (URL).</p>\n",
+ "name": "addColumn",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 644,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "setPath",
- "params": [
- {
- "name": "path",
- "description": "<p>path to audio file</p>\n",
- "type": "String"
- },
+ "description": "Use <a href=\"/reference/p5.Table/addColumn/\">addColumn()</a> to add a new column to a <a href=\"#/p5.Table\">Table</a> object.\nTypically, you will want to specify a title, so the column\nmay be easily referenced later by name. (If no title is\nspecified, the new column's title will be null.)",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n createCanvas(300, 300);\n table = await loadTable('/assets/mammals.csv', ',', 'header');\n\n table.addColumn('carnivore');\n table.set(0, 'carnivore', 'no');\n table.set(1, 'carnivore', 'yes');\n table.set(2, 'carnivore', 'no');\n\n fill(0); // Set text color to black\n textSize(11); // Adjust text size as needed\n\n for (let r = 0; r < table.getRowCount(); r++) {\n for (let c = 0; c < table.getColumnCount(); c++) {\n // Keep column spacing consistent (e.g. 80 pixels apart).\n let x = c * 80 + 10;\n let y = r * 30 + 20;\n // Use x directly, rather than multiplying by c again\n text(table.getString(r, c), x, y);\n }\n }\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "callback",
- "description": "<p>Callback</p>\n",
- "type": "Function"
+ "params": [
+ {
+ "name": "title",
+ "description": "title of the given column",
+ "optional": 1,
+ "type": "String"
+ }
+ ]
}
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2630,
- "description": "<p>Replace the current Audio Buffer with a new Buffer.</p>\n",
+ "name": "getColumnCount",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 679,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "setBuffer",
- "params": [
+ "description": "Returns the total number of columns in a Table.",
+ "example": [
+ "<div>\n<code>\n// given the cvs file \"blobs.csv\" in /assets directory\n// ID, Name, Flavor, Shape, Color\n// Blob1, Blobby, Sweet, Blob, Pink\n// Blob2, Saddy, Savory, Blob, Blue\n\nlet table;\n\nasync function setup() {\n table = await loadTable('assets/blobs.csv');\n\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n}\n\nfunction draw() {\n let numOfColumn = table.getColumnCount();\n text('There are ' + numOfColumn + ' columns in the table.', 100, 50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "buf",
- "description": "<p>Array of Float32 Array(s). 2 Float32 Arrays\n will create a stereo source. 1 will create\n a mono source.</p>\n",
- "type": "Array"
+ "params": [],
+ "return": {
+ "description": "Number of columns in this table",
+ "type": "Integer"
+ }
}
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "Number of columns in this table",
+ "type": "Integer"
+ },
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2719,
- "description": "<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n",
+ "name": "getRowCount",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 713,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "addCue",
- "params": [
- {
- "name": "time",
- "description": "<p>Time in seconds, relative to this media\n element's playback. For example, to trigger\n an event every time playback reaches two\n seconds, pass in the number 2. This will be\n passed as the first parameter to\n the callback function.</p>\n",
- "type": "Number"
- },
- {
- "name": "callback",
- "description": "<p>Name of a function that will be\n called at the given time. The callback will\n receive time and (optionally) param as its\n two parameters.</p>\n",
- "type": "Function"
- },
+ "description": "Returns the total number of rows in a Table.",
+ "example": [
+ "<div>\n<code>\n// given the cvs file \"blobs.csv\" in /assets directory\n//\n// ID, Name, Flavor, Shape, Color\n// Blob1, Blobby, Sweet, Blob, Pink\n// Blob2, Saddy, Savory, Blob, Blue\n\nlet table;\n\nasync function setup() {\n table = await loadTable('assets/blobs.csv');\n\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n}\n\nfunction draw() {\n text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "value",
- "description": "<p>An object to be passed as the\n second parameter to the\n callback function.</p>\n",
- "type": "Object",
- "optional": true
+ "params": [],
+ "return": {
+ "description": "Number of rows in this table",
+ "type": "Integer"
+ }
}
],
"return": {
- "description": "id ID of this cue,\n useful for removeCue(id)",
- "type": "Number"
+ "description": "Number of rows in this table",
+ "type": "Integer"
},
- "example": [
- "\n<div><code>\nlet mySound;\nfunction preload() {\n mySound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to play', 10, 20);\n\n // schedule calls to changeText\n mySound.addCue(0, changeText, \"hello\" );\n mySound.addCue(0.5, changeText, \"hello,\" );\n mySound.addCue(1, changeText, \"hello, p5!\");\n mySound.addCue(1.5, changeText, \"hello, p5!!\");\n mySound.addCue(2, changeText, \"hello, p5!!!!!\");\n}\n\nfunction changeText(val) {\n background(220);\n text(val, 10, 20);\n}\n\nfunction canvasPressed() {\n mySound.play();\n}\n</code></div>"
- ],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2790,
- "description": "<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n",
+ "name": "removeTokens",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 754,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "removeCue",
- "params": [
+ "description": "<p>Removes any of the specified characters (or \"tokens\").</p>\n<p>If no column is specified, then the values in all columns and\nrows are processed. A specific column may be referenced by\neither its ID or title.</p>\n",
+ "example": [
+ "<div class=\"norender\"><code>\nfunction setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' $Lion ,');\n newRow.setString('type', ',,,Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', '$Snake ');\n newRow.setString('type', ',,,Reptile');\n\n table.removeTokens(',$ ');\n print(table.getArray());\n}\n\n// prints:\n// 0 \"Lion\" \"Mamal\"\n// 1 \"Snake\" \"Reptile\"\n</code></div>"
+ ],
+ "overloads": [
{
- "name": "id",
- "description": "<p>ID of the cue, as returned by addCue</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "chars",
+ "description": "String listing characters to be removed",
+ "type": "String"
+ },
+ {
+ "name": "column",
+ "description": "Column ID (number)\nor name (string)",
+ "optional": 1,
+ "type": "String|Integer"
+ }
+ ]
}
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 2817,
- "description": "<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n",
- "itemtype": "method",
- "name": "clearCues",
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2850,
- "description": "<p>Save a p5.SoundFile as a .wav file. The browser will prompt the user\nto download the file to their device. To upload a file to a server, see\n<a href=\"/reference/#/p5.SoundFile/getBlob\">getBlob</a></p>\n",
+ "name": "trim",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 823,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "save",
- "params": [
+ "description": "Trims leading and trailing whitespace, such as spaces and tabs,\nfrom String table values. If no column is specified, then the\nvalues in all columns and rows are trimmed. A specific column\nmay be referenced by either its ID or title.",
+ "example": [
+ "<div class=\"norender\"><code>\nfunction setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' Lion ,');\n newRow.setString('type', ' Mammal ');\n\n newRow = table.addRow();\n newRow.setString('name', ' Snake ');\n newRow.setString('type', ' Reptile ');\n\n table.trim();\n print(table.getArray());\n}\n\n// prints:\n// 0 \"Lion\" \"Mamal\"\n// 1 \"Snake\" \"Reptile\"\n</code></div>"
+ ],
+ "overloads": [
{
- "name": "fileName",
- "description": "<p>name of the resulting .wav file.</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "column",
+ "description": "Column ID (number)\nor name (string)",
+ "optional": 1,
+ "type": "String|Integer"
+ }
+ ]
}
],
- "example": [
- "\n <div><code>\n let mySound;\n function preload() {\n mySound = loadSound('assets/doorbell.mp3');\n }\n function setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap to download', 10, 20);\n }\n\n function canvasPressed() {\n mySound.save('my cool filename');\n }\n</code></div>"
- ],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 2882,
- "description": "<p>This method is useful for sending a SoundFile to a server. It returns the\n.wav-encoded audio data as a \"<a target=\"_blank\" title=\"Blob reference at\nMDN\" href=\"https://developer.mozilla.org/en-US/docs/Web/API/Blob\">Blob</a>\".\nA Blob is a file-like data object that can be uploaded to a server\nwith an <a href=\"/reference/#/p5/httpDo\">http</a> request. We'll\nuse the <code>httpDo</code> options object to send a POST request with some\nspecific options: we encode the request as <code>multipart/form-data</code>,\nand attach the blob as one of the form values using <code>FormData</code>.</p>\n",
+ "name": "removeColumn",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 894,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "getBlob",
- "return": {
- "description": "A file-like data object",
- "type": "Blob"
- },
+ "description": "Use <a href=\"/reference/p5.Table/removeColumn/\">removeColumn()</a> to remove an existing column from a Table\nobject. The column to be removed may be identified by either\nits title (a String) or its index value (an int).\nremoveColumn(0) would remove the first column, removeColumn(1)\nwould remove the second column, and so on.",
"example": [
- "\n <div><code>\n function preload() {\n mySound = loadSound('assets/doorbell.mp3');\n }\n\n function setup() {\n noCanvas();\n let soundBlob = mySound.getBlob();\n\n // Now we can send the blob to a server...\n let serverUrl = 'https://jsonplaceholder.typicode.com/posts';\n let httpRequestOptions = {\n method: 'POST',\n body: new FormData().append('soundBlob', soundBlob),\n headers: new Headers({\n 'Content-Type': 'multipart/form-data'\n })\n };\n httpDo(serverUrl, httpRequestOptions);\n\n // We can also create an `ObjectURL` pointing to the Blob\n let blobUrl = URL.createObjectURL(soundBlob);\n\n // The `<Audio>` Element accepts Object URL's\n createAudio(blobUrl).showControls();\n\n createDiv();\n\n // The ObjectURL exists as long as this tab is open\n let input = createInput(blobUrl);\n input.attribute('readonly', true);\n input.mouseClicked(function() { input.elt.select() });\n }\n\n</code></div>"
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 100x100 canvas\n createCanvas(100, 100);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Remove the \"id\" column\n table.removeColumn('id');\n\n // Get the remaining column count\n let colCount = table.getColumnCount();\n\n // Set text properties\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display the column count on the canvas\n text(colCount, 40, 50);\n\n describe('no image displayed');\n}\n</code>\n</div>"
],
- "class": "p5.SoundFile",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 2946,
- "description": "<p>loadSound() returns a new p5.SoundFile from a specified\npath. If called during preload(), the p5.SoundFile will be ready\nto play in time for setup() and draw(). If called outside of\npreload, the p5.SoundFile will not be ready immediately, so\nloadSound accepts a callback as the second parameter. Using a\n<a href=\"https://github.com/processing/p5.js/wiki/Local-server\">\nlocal server</a> is recommended when loading external files.</p>\n",
- "itemtype": "method",
- "name": "loadSound",
- "params": [
- {
- "name": "path",
- "description": "<p>Path to the sound file, or an array with\n paths to soundfiles in multiple formats\n i.e. ['sound.ogg', 'sound.mp3'].\n Alternately, accepts an object: either\n from the HTML5 File API, or a p5.File.</p>\n",
- "type": "String|Array"
- },
- {
- "name": "successCallback",
- "description": "<p>Name of a function to call once file loads</p>\n",
- "type": "Function",
- "optional": true
- },
- {
- "name": "errorCallback",
- "description": "<p>Name of a function to call if there is\n an error loading the file.</p>\n",
- "type": "Function",
- "optional": true
- },
+ "overloads": [
{
- "name": "whileLoading",
- "description": "<p>Name of a function to call while file is loading.\n This function will receive the percentage loaded\n so far, from 0.0 to 1.0.</p>\n",
- "type": "Function",
- "optional": true
+ "params": [
+ {
+ "name": "column",
+ "description": "columnName (string) or ID (number)",
+ "type": "String|Integer"
+ }
+ ]
}
],
- "return": {
- "description": "Returns a p5.SoundFile",
- "type": "SoundFile"
- },
- "example": [
- "\n<div><code>\nlet mySound;\nfunction preload() {\n soundFormats('mp3', 'ogg');\n mySound = loadSound('assets/doorbell');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap here to play', 10, 20);\n}\n\nfunction canvasPressed() {\n // playing a sound file on a user gesture\n // is equivalent to `userStartAudio()`\n mySound.play();\n}\n</code></div>"
- ],
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 3117,
- "description": "<p>Connects to the p5sound instance (main output) by default.\nOptionally, you can pass in a specific source (i.e. a soundfile).</p>\n",
+ "name": "set",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 968,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "setInput",
- "params": [
- {
- "name": "snd",
- "description": "<p>set the sound source\n (optional, defaults to\n main output)</p>\n",
- "type": "SoundObject|undefined",
- "optional": true
- },
- {
- "name": "smoothing",
- "description": "<p>a range between 0.0 and 1.0\n to smooth amplitude readings</p>\n",
- "type": "Number|undefined",
- "optional": true
- }
- ],
+ "description": "Stores a value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.",
"example": [
- "\n<div><code>\nfunction preload(){\n sound1 = loadSound('assets/beat.mp3');\n sound2 = loadSound('assets/drum.mp3');\n}\nfunction setup(){\n cnv = createCanvas(100, 100);\n cnv.mouseClicked(toggleSound);\n\n amplitude = new p5.Amplitude();\n amplitude.setInput(sound2);\n}\n\nfunction draw() {\n background(220);\n text('tap to play', 20, 20);\n\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\n\nfunction toggleSound(){\n if (sound1.isPlaying() && sound2.isPlaying()) {\n sound1.stop();\n sound2.stop();\n } else {\n sound1.play();\n sound2.play();\n }\n}\n</code></div>"
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Update the first row: change species to \"Canis Lupus\" and name to \"Wolf\"\n table.set(0, 'species', 'Canis Lupus');\n table.set(0, 'name', 'Wolf');\n\n // Set text properties for drawing on the canvas\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display the table values on the canvas:\n // Each row's values are concatenated into a single string and displayed on a new line.\n let y = 20; // Starting vertical position\n for (let r = 0; r < table.getRowCount(); r++) {\n let rowText = \"\";\n for (let c = 0; c < table.getColumnCount(); c++) {\n rowText += table.getString(r, c) + \" \";\n }\n text(rowText, 10, y * 2.5);\n y += 20;\n }\n\n describe('no image displayed');\n}\n</code>\n</div>"
],
- "class": "p5.Amplitude",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 3209,
- "description": "<p>Returns a single Amplitude reading at the moment it is called.\nFor continuous readings, run in the draw loop.</p>\n",
- "itemtype": "method",
- "name": "getLevel",
- "params": [
+ "overloads": [
{
- "name": "channel",
- "description": "<p>Optionally return only channel 0 (left) or 1 (right)</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "row",
+ "description": "row ID",
+ "type": "Integer"
+ },
+ {
+ "name": "column",
+ "description": "column ID (Number)\nor title (String)",
+ "type": "String|Integer"
+ },
+ {
+ "name": "value",
+ "description": "value to assign",
+ "type": "String|Number"
+ }
+ ]
}
],
- "return": {
- "description": "Amplitude as a number between 0.0 and 1.0",
- "type": "Number"
- },
- "example": [
- "\n<div><code>\nfunction preload(){\n sound = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mouseClicked(toggleSound);\n amplitude = new p5.Amplitude();\n}\n\nfunction draw() {\n background(220, 150);\n textAlign(CENTER);\n text('tap to play', width/2, 20);\n\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\n\nfunction toggleSound(){\n if (sound.isPlaying()) {\n sound.stop();\n } else {\n sound.play();\n }\n}\n</code></div>"
- ],
- "class": "p5.Amplitude",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 3264,
- "description": "<p>Determines whether the results of Amplitude.process() will be\nNormalized. To normalize, Amplitude finds the difference the\nloudest reading it has processed and the maximum amplitude of\n1.0. Amplitude adds this difference to all values to produce\nresults that will reliably map between 0.0 and 1.0. However,\nif a louder moment occurs, the amount that Normalize adds to\nall the values will change. Accepts an optional boolean parameter\n(true or false). Normalizing is off by default.</p>\n",
+ "name": "setNum",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 1013,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "toggleNormalize",
- "params": [
+ "description": "Stores a Float value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 100x100 canvas and set a white background\n createCanvas(100, 100);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Set the value in row 1, column \"id\" to the number 1\n table.setNum(1, 'id', 1);\n\n // Get the first column as an array and join its values into a string for display.\n let col0 = table.getColumn(0); // Expected output: [\"0\", 1, \"2\"]\n let output = col0.join(\", \");\n\n // Set text properties and display the output on the canvas\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n text(output, 30, 50);\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "boolean",
- "description": "<p>set normalize to true (1) or false (0)</p>\n",
- "type": "Boolean",
- "optional": true
+ "params": [
+ {
+ "name": "row",
+ "description": "row ID",
+ "type": "Integer"
+ },
+ {
+ "name": "column",
+ "description": "column ID (Number)\nor title (String)",
+ "type": "String|Integer"
+ },
+ {
+ "name": "value",
+ "description": "value to assign",
+ "type": "Number"
+ }
+ ]
}
],
- "class": "p5.Amplitude",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 3293,
- "description": "<p>Smooth Amplitude analysis by averaging with the last analysis\nframe. Off by default.</p>\n",
+ "name": "setString",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 1067,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "smooth",
- "params": [
+ "description": "Stores a String value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file from the assets folder with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Add a new row with the new animal data\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n // Convert the table to a 2D array\n let tableArray = table.getArray();\n\n // Set text properties\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n\n // Display each row of the table on the canvas\n let y = 20; // Starting y position\n for (let i = 0; i < tableArray.length; i++) {\n // Join the values of each row with a comma separator\n let rowText = tableArray[i].join(', ');\n text(rowText, 15, y * 2);\n y += 20; // Increment y position for the next row\n }\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "set",
- "description": "<p>smoothing from 0.0 <= 1</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "row",
+ "description": "row ID",
+ "type": "Integer"
+ },
+ {
+ "name": "column",
+ "description": "column ID (Number)\nor title (String)",
+ "type": "String|Integer"
+ },
+ {
+ "name": "value",
+ "description": "value to assign",
+ "type": "String"
+ }
+ ]
}
],
- "class": "p5.Amplitude",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 3476,
- "description": "<p>Set the input source for the FFT analysis. If no source is\nprovided, FFT will analyze all sound in the sketch.</p>\n",
+ "name": "get",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 1112,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "setInput",
- "params": [
+ "description": "Retrieves a value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 100x100 canvas\n createCanvas(100, 100);\n background(255); // Set background to white\n\n // Load the CSV file from the assets folder with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Set text properties for drawing on the canvas\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Get the values from the table\n let value1 = table.get(0, 1); // Using column index (1) => \"Capra hircus\"\n let value2 = table.get(0, 'species'); // Using column name => \"Capra hircus\"\n\n // Display the values on the canvas\n text(value1, 10, 30);\n text(value2, 10, 60);\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "source",
- "description": "<p>p5.sound object (or web audio API source node)</p>\n",
- "type": "Object",
- "optional": true
+ "params": [
+ {
+ "name": "row",
+ "description": "row ID",
+ "type": "Integer"
+ },
+ {
+ "name": "column",
+ "description": "columnName (string) or\nID (number)",
+ "type": "String|Integer"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "String|Number"
+ }
}
],
- "class": "p5.FFT",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "",
+ "type": "String|Number"
+ },
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 3501,
- "description": "<p>Returns an array of amplitude values (between -1.0 and +1.0) that represent\na snapshot of amplitude readings in a single buffer. Length will be\nequal to bins (defaults to 1024). Can be used to draw the waveform\nof a sound.</p>\n",
+ "name": "getNum",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 1157,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "waveform",
- "params": [
- {
- "name": "bins",
- "description": "<p>Must be a power of two between\n 16 and 1024. Defaults to 1024.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "Retrieves a Float value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 100x100 canvas\n createCanvas(100, 100);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Compute the result: id at row 1, column 0 plus 100 (i.e. 1 + 100 = 101)\n let result = table.getNum(1, 0) + 100;\n \n // Set text properties and display the result on the canvas\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n text(result, 10, 30); // Display the result at position (10, 30)\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "precision",
- "description": "<p>If any value is provided, will return results\n in a Float32 Array which is more precise\n than a regular array.</p>\n",
- "type": "String",
- "optional": true
+ "params": [
+ {
+ "name": "row",
+ "description": "row ID",
+ "type": "Integer"
+ },
+ {
+ "name": "column",
+ "description": "columnName (string) or\nID (number)",
+ "type": "String|Integer"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "Array Array of amplitude values (-1 to 1)\n over time. Array length = bins.",
- "type": "Array"
+ "description": "",
+ "type": "Number"
},
- "class": "p5.FFT",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 3553,
- "description": "<p>Returns an array of amplitude values (between 0 and 255)\nacross the frequency spectrum. Length is equal to FFT bins\n(1024 by default). The array indices correspond to frequencies\n(i.e. pitches), from the lowest to the highest that humans can\nhear. Each value represents amplitude at that slice of the\nfrequency spectrum. Must be called prior to using\n<code>getEnergy()</code>.</p>\n",
+ "name": "getString",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 1215,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "analyze",
- "params": [
- {
- "name": "bins",
- "description": "<p>Must be a power of two between\n 16 and 1024. Defaults to 1024.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "scale",
- "description": "<p>If \"dB,\" returns decibel\n float measurements between\n -140 and 0 (max).\n Otherwise returns integers from 0-255.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "return": {
- "description": "spectrum Array of energy (amplitude/volume)\n values across the frequency spectrum.\n Lowest energy (silence) = 0, highest\n possible is 255.",
- "type": "Array"
- },
+ "description": "Retrieves a String value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.",
"example": [
- "\n<div><code>\nlet osc, fft;\n\nfunction setup(){\n let cnv = createCanvas(100,100);\n cnv.mousePressed(startSound);\n osc = new p5.Oscillator();\n osc.amp(0);\n fft = new p5.FFT();\n}\n\nfunction draw(){\n background(220);\n\n let freq = map(mouseX, 0, windowWidth, 20, 10000);\n freq = constrain(freq, 1, 20000);\n osc.freq(freq);\n\n let spectrum = fft.analyze();\n noStroke();\n fill(255, 0, 255);\n for (let i = 0; i< spectrum.length; i++){\n let x = map(i, 0, spectrum.length, 0, width);\n let h = -height + map(spectrum[i], 0, 255, height, 0);\n rect(x, height, width / spectrum.length, h );\n }\n\n stroke(255);\n if (!osc.started) {\n text('tap here and drag to change frequency', 10, 20, width - 20);\n } else {\n text(round(freq)+'Hz', 10, 20);\n }\n}\n\nfunction startSound() {\n osc.start();\n osc.amp(0.5, 0.2);\n}\n\nfunction mouseReleased() {\n osc.amp(0, 0.2);\n}\n</code></div>\n\n"
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas\n createCanvas(200, 200);\n background(255); // Set background to white\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Set text properties\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display each table cell value on the canvas one below the other.\n // We use a variable 'y' to increment the vertical position.\n let y = 20;\n text(table.getString(0, 0), 10, y); // 0\n y += 20;\n text(table.getString(0, 1), 10, y); // Capra hircus\n y += 20;\n text(table.getString(0, 2), 10, y); // Goat\n y += 20;\n text(table.getString(1, 0), 10, y); // 1\n y += 20;\n text(table.getString(1, 1), 10, y); // Panthera pardus\n y += 20;\n text(table.getString(1, 2), 10, y); // Leopard\n y += 20;\n text(table.getString(2, 0), 10, y); // 2\n y += 20;\n text(table.getString(2, 1), 10, y); // Equus zebra\n y += 20;\n text(table.getString(2, 2), 10, y); // Zebra\n\n describe('no image displayed');\n}\n</code>\n</div>"
],
- "class": "p5.FFT",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 3650,
- "description": "<p>Returns the amount of energy (volume) at a specific\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\" target=\"_blank\">\nfrequency</a>, or the average amount of energy between two\nfrequencies. Accepts Number(s) corresponding\nto frequency (in Hz), or a \"string\" corresponding to predefined\nfrequency ranges (\"bass\", \"lowMid\", \"mid\", \"highMid\", \"treble\").\nReturns a range between 0 (no energy/volume at that frequency) and\n255 (maximum energy).\n<em>NOTE: analyze() must be called prior to getEnergy(). analyze()\ntells the FFT to analyze frequency data, and getEnergy() uses\nthe results to determine the value at a specific frequency or\nrange of frequencies.</em></p></p>\n",
- "itemtype": "method",
- "name": "getEnergy",
- "params": [
- {
- "name": "frequency1",
- "description": "<p>Will return a value representing\n energy at this frequency. Alternately,\n the strings \"bass\", \"lowMid\" \"mid\",\n \"highMid\", and \"treble\" will return\n predefined frequency ranges.</p>\n",
- "type": "Number|String"
- },
+ "overloads": [
{
- "name": "frequency2",
- "description": "<p>If a second frequency is given,\n will return average amount of\n energy that exists between the\n two frequencies.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "row",
+ "description": "row ID",
+ "type": "Integer"
+ },
+ {
+ "name": "column",
+ "description": "columnName (string) or\nID (number)",
+ "type": "String|Integer"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "String"
+ }
}
],
"return": {
- "description": "Energy Energy (volume/amplitude) from\n 0 and 255.",
- "type": "Number"
+ "description": "",
+ "type": "String"
},
- "class": "p5.FFT",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 3739,
- "description": "<p>Returns the\n<a href=\"http://en.wikipedia.org/wiki/Spectral_centroid\" target=\"_blank\">\nspectral centroid</a> of the input signal.\n<em>NOTE: analyze() must be called prior to getCentroid(). Analyze()\ntells the FFT to analyze frequency data, and getCentroid() uses\nthe results determine the spectral centroid.</em></p></p>\n",
+ "name": "getObject",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 1257,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "getCentroid",
- "return": {
- "description": "Spectral Centroid Frequency of the spectral centroid in Hz.",
- "type": "Number"
- },
+ "description": "Retrieves all table data and returns as an object. If a column name is\npassed in, each row object will be stored with that attribute as its\ntitle.",
"example": [
- "\n<div><code>\n function setup(){\ncnv = createCanvas(100,100);\ncnv.mousePressed(userStartAudio);\nsound = new p5.AudioIn();\nsound.start();\nfft = new p5.FFT();\nsound.connect(fft);\n}\n\nfunction draw() {\nif (getAudioContext().state !== 'running') {\n background(220);\n text('tap here and enable mic to begin', 10, 20, width - 20);\n return;\n}\nlet centroidplot = 0.0;\nlet spectralCentroid = 0;\n\nbackground(0);\nstroke(0,255,0);\nlet spectrum = fft.analyze();\nfill(0,255,0); // spectrum is green\n\n//draw the spectrum\nfor (let i = 0; i < spectrum.length; i++){\n let x = map(log(i), 0, log(spectrum.length), 0, width);\n let h = map(spectrum[i], 0, 255, 0, height);\n let rectangle_width = (log(i+1)-log(i))*(width/log(spectrum.length));\n rect(x, height, rectangle_width, -h )\n}\nlet nyquist = 22050;\n\n// get the centroid\nspectralCentroid = fft.getCentroid();\n\n// the mean_freq_index calculation is for the display.\nlet mean_freq_index = spectralCentroid/(nyquist/spectrum.length);\n\ncentroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, width);\n\nstroke(255,0,0); // the line showing where the centroid is will be red\n\nrect(centroidplot, 0, width / spectrum.length, height)\nnoStroke();\nfill(255,255,255); // text is white\ntext('centroid: ', 10, 20);\ntext(round(spectralCentroid)+' Hz', 10, 40);\n}\n </code></div>"
+ "<div class=\"norender\">\n<code>\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nasync function setup() {\n // The table is comma separated value \"csv\"\n // and has a header specifying the columns labels.\n table = await loadTable('assets/mammals.csv', 'csv', 'header');\n\n let tableObject = table.getObject();\n\n print(tableObject);\n //outputs an object\n\n describe('no image displayed');\n}\n</code>\n</div>"
],
- "class": "p5.FFT",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 3826,
- "description": "<p>Smooth FFT analysis by averaging with the last analysis frame.</p>\n",
- "itemtype": "method",
- "name": "smooth",
- "params": [
+ "overloads": [
{
- "name": "smoothing",
- "description": "<p>0.0 < smoothing < 1.0.\n Defaults to 0.8.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "headerColumn",
+ "description": "Name of the column which should be used to\ntitle each row object (optional)",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "Object"
+ }
}
],
- "class": "p5.FFT",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "",
+ "type": "Object"
+ },
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 3854,
- "description": "<p>Returns an array of average amplitude values for a given number\nof frequency bands split equally. N defaults to 16.\n<em>NOTE: analyze() must be called prior to linAverages(). Analyze()\ntells the FFT to analyze frequency data, and linAverages() uses\nthe results to group them into a smaller set of averages.</em></p></p>\n",
+ "name": "getArray",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.Table.js",
+ "line": 1317,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "linAverages",
- "params": [
+ "description": "Retrieves all table data and returns it as a multidimensional array.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Get the CSV data as a 2D array\n let tableArray = table.getArray();\n\n // Set text properties\n fill(0); // Set text color to black\n textSize(12); // Adjust text size as needed\n\n // Display each row of the CSV on the canvas\n // Each row is displayed on a separate line\n for (let i = 0; i < tableArray.length; i++) {\n let rowText = tableArray[i].join(\", \");\n text(rowText, 10, 20 + i * 50 + 30);\n }\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "N",
- "description": "<p>Number of returned frequency groups</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "",
+ "type": "Array"
+ }
}
],
"return": {
- "description": "linearAverages Array of average amplitude values for each group",
+ "description": "",
"type": "Array"
},
- "class": "p5.FFT",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Table",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 3889,
- "description": "<p>Returns an array of average amplitude values of the spectrum, for a given\nset of <a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">\nOctave Bands</a>\n<em>NOTE: analyze() must be called prior to logAverages(). Analyze()\ntells the FFT to analyze frequency data, and logAverages() uses\nthe results to group them into a smaller set of averages.</em></p></p>\n",
+ "name": "set",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
+ "line": 64,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "logAverages",
- "params": [
+ "description": "Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Set every row's \"name\" to \"Unicorn\"\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n // Convert the table to an array\n let tableArray = table.getArray();\n\n // Set text properties\n fill(0); // Set text color to black\n textSize(12); // Set text size\n\n // Display each row of the table on the canvas\n let y = 20; // Starting y position\n for (let i = 0; i < tableArray.length; i++) {\n let rowText = tableArray[i].join(', ');\n text(rowText, 10, y * 2.5);\n y += 20; // Increment y position for the next row\n }\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "octaveBands",
- "description": "<p>Array of Octave Bands objects for grouping</p>\n",
- "type": "Array"
+ "params": [
+ {
+ "name": "column",
+ "description": "Column ID (Number)\nor Title (String)",
+ "type": "String|Integer"
+ },
+ {
+ "name": "value",
+ "description": "The value to be stored",
+ "type": "String|Number"
+ }
+ ]
}
],
- "return": {
- "description": "logAverages Array of average amplitude values for each group",
- "type": "Array"
- },
- "class": "p5.FFT",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.TableRow",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 3925,
- "description": "<p>Calculates and Returns the 1/N\n<a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">Octave Bands</a>\nN defaults to 3 and minimum central frequency to 15.625Hz.\n(1/3 Octave Bands ~= 31 Frequency Bands)\nSetting fCtr0 to a central value of a higher octave will ignore the lower bands\nand produce less frequency groups.</p>\n",
+ "name": "setNum",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
+ "line": 135,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "getOctaveBands",
- "params": [
- {
- "name": "N",
- "description": "<p>Specifies the 1/N type of generated octave bands</p>\n",
- "type": "Number"
- },
+ "description": "Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x200 canvas and set a white background\n createCanvas(200, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Update each row's \"id\" to (row index + 10)\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].setNum('id', r + 10);\n }\n\n // Convert the table to a 2D array for display\n let tableArray = table.getArray();\n\n // Set text properties\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display each row of the table on the canvas\n let y = 20; // Starting y position\n for (let i = 0; i < tableArray.length; i++) {\n // Join each row's values with a comma separator\n let rowText = tableArray[i].join(', ');\n text(rowText, 10, y * 2.5);\n y += 20; // Increment y for the next row\n }\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "fCtr0",
- "description": "<p>Minimum central frequency for the lowest band</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "column",
+ "description": "Column ID (Number)\nor Title (String)",
+ "type": "String|Integer"
+ },
+ {
+ "name": "value",
+ "description": "The value to be stored\nas a Float",
+ "type": "Number|String"
+ }
+ ]
}
],
- "return": {
- "description": "octaveBands Array of octave band objects with their bounds",
- "type": "Array"
- },
- "class": "p5.FFT",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.TableRow",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4168,
- "description": "<p>Start an oscillator.</p>\n<p>Starting an oscillator on a user gesture will enable audio in browsers\nthat have a strict autoplay policy, including Chrome and most mobile\ndevices. See also: <code>userStartAudio()</code>.</p>\n",
+ "name": "setString",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
+ "line": 188,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "start",
- "params": [
- {
- "name": "time",
- "description": "<p>startTime in seconds from now.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 300x200 canvas and set a white background\n createCanvas(300, 200);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Update each row's \"name\" field\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n let name = rows[r].getString('name');\n rows[r].setString('name', 'A ' + name + ' named George');\n }\n\n // Convert the table to a 2D array for display\n let tableArray = table.getArray();\n\n // Set text properties\n fill(0); // Text color: black\n textSize(12); // Adjust text size as needed\n\n // Display each row of the table on the canvas\n let y = 20; // Starting y position\n for (let i = 0; i < tableArray.length; i++) {\n let rowText = tableArray[i].join(', ');\n text(rowText, 10, y * 2.5);\n y += 20; // Increment y for the next row\n }\n\n // describe('no image displayed');\n}\n</code>"
+ ],
+ "overloads": [
{
- "name": "frequency",
- "description": "<p>frequency in Hz.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "column",
+ "description": "Column ID (Number)\nor Title (String)",
+ "type": "String|Integer"
+ },
+ {
+ "name": "value",
+ "description": "The value to be stored\nas a String",
+ "type": "String|Number|Boolean|Object"
+ }
+ ]
}
],
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.TableRow",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4218,
- "description": "<p>Stop an oscillator. Accepts an optional parameter\nto determine how long (in seconds from now) until the\noscillator stops.</p>\n",
+ "name": "get",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
+ "line": 235,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "stop",
- "params": [
+ "description": "Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x100 canvas and set a white background\n createCanvas(200, 100);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n // Extract the names from each row and store them in an array\n let names = [];\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n names.push(rows[r].get('name'));\n }\n\n // Set text properties and display the names on the canvas\n fill(0); // Set text color to black\n textSize(12); // Set text size\n\n // Join names into a single string separated by commas\n let namesText = names.join(', ');\n text(namesText, 35, 50);\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "secondsFromNow",
- "description": "<p>Time, in seconds from now.</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "column",
+ "description": "columnName (string) or\nID (number)",
+ "type": "String|Integer"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "String|Number"
+ }
}
],
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "",
+ "type": "String|Number"
+ },
+ "class": "p5.TableRow",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4238,
- "description": "<p>Set the amplitude between 0 and 1.0. Or, pass in an object\nsuch as an oscillator to modulate amplitude with an audio signal.</p>\n",
+ "name": "getNum",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
+ "line": 287,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "amp",
- "params": [
- {
- "name": "vol",
- "description": "<p>between 0 and 1.0\n or a modulating signal/oscillator</p>\n",
- "type": "Number|Object"
- },
- {
- "name": "rampTime",
- "description": "<p>create a fade that lasts rampTime</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x100 canvas and set a white background\n createCanvas(200, 100);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n let rows = table.getRows();\n let minId = Infinity;\n let maxId = -Infinity;\n \n for (let r = 0; r < rows.length; r++) {\n let id = rows[r].getNum('id');\n minId = min(minId, id);\n maxId = max(maxId, id);\n }\n\n let result = 'minimum id = ' + minId + ', maximum id = ' + maxId;\n\n // Set text properties and display the result on the canvas\n fill(0); // Set text color to black\n textSize(12); // Set text size\n text(result, 10, 50);\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "timeFromNow",
- "description": "<p>schedule this event to happen\n seconds from now</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "column",
+ "description": "columnName (string) or\nID (number)",
+ "type": "String|Integer"
+ }
+ ],
+ "return": {
+ "description": "Float Floating point number",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "gain If no value is provided,\n returns the Web Audio API\n AudioParam that controls\n this oscillator's\n gain/amplitude/volume)",
- "type": "AudioParam"
+ "description": "Float Floating point number",
+ "type": "Number"
},
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.TableRow",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4271,
- "description": "<p>Returns the value of output gain</p>\n",
+ "name": "getString",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.TableRow.js",
+ "line": 345,
+ "deprecated": true,
+ "deprecationMessage": "p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)",
"itemtype": "method",
- "name": "getAmp",
+ "description": "Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.",
+ "example": [
+ "<div>\n<code>\nlet table;\n\nasync function setup() {\n // Create a 200x100 canvas and set a white background\n createCanvas(200, 100);\n background(255);\n\n // Load the CSV file with a header row\n table = await loadTable('assets/mammals.csv', ',', 'header');\n\n let rows = table.getRows();\n let longest = '';\n for (let r = 0; r < rows.length; r++) {\n let species = rows[r].getString('species');\n if (longest.length < species.length) {\n longest = species;\n }\n }\n\n let result = 'longest: ' + longest;\n\n // Set text properties and display the result on the canvas\n fill(0); // Set text color to black\n textSize(12); // Set text size\n text(result, 30, 50);\n\n describe('no image displayed');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "column",
+ "description": "columnName (string) or\nID (number)",
+ "type": "String|Integer"
+ }
+ ],
+ "return": {
+ "description": "String",
+ "type": "String"
+ }
+ }
+ ],
"return": {
- "description": "Amplitude value between 0.0 and 1.0",
- "type": "Number"
+ "description": "String",
+ "type": "String"
},
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.TableRow",
+ "static": false,
+ "module": "IO",
+ "submodule": "Table"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4285,
- "description": "<p>Set frequency of an oscillator to a value. Or, pass in an object\nsuch as an oscillator to modulate the frequency with an audio signal.</p>\n",
+ "name": "getParent",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 61,
"itemtype": "method",
- "name": "freq",
- "params": [
- {
- "name": "Frequency",
- "description": "<p>Frequency in Hz\n or modulating signal/oscillator</p>\n",
- "type": "Number|Object"
- },
- {
- "name": "rampTime",
- "description": "<p>Ramp time (in seconds)</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "Returns the element's parent element as a new <a href=\"#/p5.XML\">p5.XML</a>\nobject.",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal elements.\n let mammals = myXML.getChildren('mammal');\n\n // Get the first mammal element.\n let firstMammal = mammals[0];\n\n // Get the parent element.\n let parent = firstMammal.getParent();\n\n // Get the parent element's name.\n let name = parent.getName();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the parent element's name.\n text(name, 50, 50);\n\n describe('The word \"animals\" written in black on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "timeFromNow",
- "description": "<p>Schedule this event to happen\n at x seconds from now</p>\n",
- "type": "Number",
- "optional": true
+ "params": [],
+ "return": {
+ "description": "parent element.",
+ "type": "p5.XML"
+ }
}
],
"return": {
- "description": "Frequency If no value is provided,\n returns the Web Audio API\n AudioParam that controls\n this oscillator's frequency",
- "type": "AudioParam"
+ "description": "parent element.",
+ "type": "p5.XML"
},
- "example": [
- "\n<div><code>\nlet osc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playOscillator);\n osc = new p5.Oscillator(300);\n background(220);\n text('tap to play', 20, 20);\n}\n\nfunction playOscillator() {\n osc.start();\n osc.amp(0.5);\n // start at 700Hz\n osc.freq(700);\n // ramp to 60Hz over 0.7 seconds\n osc.freq(60, 0.7);\n osc.amp(0, 0.1, 0.7);\n}\n</code></div>"
- ],
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4360,
- "description": "<p>Returns the value of frequency of oscillator</p>\n",
+ "name": "getName",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 108,
"itemtype": "method",
- "name": "getFreq",
+ "description": "<p>Returns the element's name as a <code>String</code>.</p>\n<p>An XML element's name is given by its tag. For example, the element\n<code><language>JavaScript</language></code> has the name <code>language</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal elements.\n let mammals = myXML.getChildren('mammal');\n\n // Get the first mammal element.\n let firstMammal = mammals[0];\n\n // Get the mammal element's name.\n let name = firstMammal.getName();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's name.\n text(name, 50, 50);\n\n describe('The word \"mammal\" written in black on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "name of the element.",
+ "type": "String"
+ }
+ }
+ ],
"return": {
- "description": "Frequency of oscillator in Hertz",
- "type": "Number"
+ "description": "name of the element.",
+ "type": "String"
},
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4373,
- "description": "<p>Set type to 'sine', 'triangle', 'sawtooth' or 'square'.</p>\n",
+ "name": "setName",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 161,
"itemtype": "method",
- "name": "setType",
- "params": [
+ "description": "<p>Sets the element's tag name.</p>\n<p>An XML element's name is given by its tag. For example, the element\n<code><language>JavaScript</language></code> has the name <code>language</code>.</p>\n<p>The parameter, <code>name</code>, is the element's new name as a string. For example,\ncalling <code>myXML.setName('planet')</code> will make the element's new tag name\n<code><planet></planet></code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the element's original name.\n let oldName = myXML.getName();\n\n // Set the element's name.\n myXML.setName('monsters');\n\n // Get the element's new name.\n let newName = myXML.getName();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's names.\n text(oldName, 50, 33);\n text(newName, 50, 67);\n\n describe(\n 'The words \"animals\" and \"monsters\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code></div>"
+ ],
+ "overloads": [
{
- "name": "type",
- "description": "<p>'sine', 'triangle', 'sawtooth' or 'square'.</p>\n",
- "type": "String"
+ "params": [
+ {
+ "name": "name",
+ "description": "new tag name of the element.",
+ "type": "String"
+ }
+ ]
}
],
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4386,
- "description": "<p>Returns current type of oscillator eg. 'sine', 'triangle', 'sawtooth' or 'square'.</p>\n",
+ "name": "hasChildren",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 211,
"itemtype": "method",
- "name": "getType",
+ "description": "Returns <code>true</code> if the element has child elements and <code>false</code> if not.",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Check whether the element has child elements.\n let isParent = myXML.hasChildren();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Style the text.\n if (isParent === true) {\n text('Parent', 50, 50);\n } else {\n text('Not Parent', 50, 50);\n }\n\n describe('The word \"Parent\" written in black on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "whether the element has children.",
+ "type": "boolean"
+ }
+ }
+ ],
"return": {
- "description": "type of oscillator eg . 'sine', 'triangle', 'sawtooth' or 'square'.",
- "type": "String"
+ "description": "whether the element has children.",
+ "type": "boolean"
},
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4399,
- "description": "<p>Connect to a p5.sound / Web Audio object.</p>\n",
+ "name": "listChildren",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 259,
"itemtype": "method",
- "name": "connect",
- "params": [
+ "description": "Returns an array with the names of the element's child elements as\n<code>String</code>s.",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the names of the element's children as an array.\n let children = myXML.listChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the child element's name.\n text(children[i], 10, y);\n }\n\n describe(\n 'The words \"mammal\", \"mammal\", \"mammal\", and \"reptile\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "unit",
- "description": "<p>A p5.sound or Web Audio object</p>\n",
- "type": "Object"
+ "params": [],
+ "return": {
+ "description": "names of the child elements.",
+ "type": "String[]"
+ }
}
],
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "names of the child elements.",
+ "type": "String[]"
+ },
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4420,
- "description": "<p>Disconnect all outputs</p>\n",
+ "name": "getChildren",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 360,
"itemtype": "method",
- "name": "disconnect",
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "description": "<p>Returns an array with the element's child elements as new\n<a href=\"#/p5.XML\">p5.XML</a> objects.</p>\n<p>The parameter, <code>name</code>, is optional. If a string is passed, as in\n<code>myXML.getChildren('cat')</code>, then the method will only return child elements\nwith the tag <code><cat></code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array of the child elements.\n let children = myXML.getChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", \"Zebra\", and \"Turtle\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array of the child elements\n // that are mammals.\n let children = myXML.getChildren('mammal');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Zebra\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "name",
+ "description": "name of the elements to return.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "child elements.",
+ "type": "p5.XML[]"
+ }
+ }
+ ],
+ "return": {
+ "description": "child elements.",
+ "type": "p5.XML[]"
+ },
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4444,
- "description": "<p>Pan between Left (-1) and Right (1)</p>\n",
+ "name": "getChild",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 443,
"itemtype": "method",
- "name": "pan",
- "params": [
- {
- "name": "panning",
- "description": "<p>Number between -1 and 1</p>\n",
- "type": "Number"
- },
+ "description": "<p>Returns the first matching child element as a new\n<a href=\"#/p5.XML\">p5.XML</a> object.</p>\n<p>The parameter, <code>name</code>, is optional. If a string is passed, as in\n<code>myXML.getChild('cat')</code>, then the first child element with the tag\n<code><cat></code> will be returned. If a number is passed, as in\n<code>myXML.getChild(1)</code>, then the child element at that index will be returned.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first child element that is a mammal.\n let goat = myXML.getChild('mammal');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Get the child element's content.\n let content = goat.getContent();\n\n // Display the child element's content.\n text(content, 50, 50);\n\n describe('The word \"Goat\" written in black on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the child element at index 1.\n let leopard = myXML.getChild(1);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Get the child element's content.\n let content = leopard.getContent();\n\n // Display the child element's content.\n text(content, 50, 50);\n\n describe('The word \"Leopard\" written in black on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "timeFromNow",
- "description": "<p>schedule this event to happen\n seconds from now</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "name",
+ "description": "element name or index.",
+ "type": "String|Integer"
+ }
+ ],
+ "return": {
+ "description": "child element.",
+ "type": "p5.XML"
+ }
}
],
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "child element.",
+ "type": "p5.XML"
+ },
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4460,
- "description": "<p>Returns the current value of panPosition , between Left (-1) and Right (1)</p>\n",
+ "name": "addChild",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 507,
"itemtype": "method",
- "name": "getPan",
+ "description": "<p>Adds a new child element and returns a reference to it.</p>\n<p>The parameter, <code>child</code>, is the <a href=\"#/p5.XML\">p5.XML</a> object to add\nas a child element. For example, calling <code>myXML.addChild(otherXML)</code> inserts\n<code>otherXML</code> as a child element of <code>myXML</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Create a new p5.XML object.\n let newAnimal = new p5.XML();\n\n // Set its properties.\n newAnimal.setName('hydrozoa');\n newAnimal.setAttribute('id', 4);\n newAnimal.setAttribute('species', 'Physalia physalis');\n newAnimal.setContent('Bluebottle');\n\n // Add the child element.\n myXML.addChild(newAnimal);\n\n // Get the first child element that is a hydrozoa.\n let blueBottle = myXML.getChild('hydrozoa');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Get the child element's content.\n let content = blueBottle.getContent();\n\n // Display the child element's content.\n text(content, 50, 50);\n\n describe('The word \"Bluebottle\" written in black on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "child",
+ "description": "child element to add.",
+ "type": "p5.XML"
+ }
+ ],
+ "return": {
+ "description": "added child element.",
+ "type": "p5.XML"
+ }
+ }
+ ],
"return": {
- "description": "panPosition of oscillator , between Left (-1) and Right (1)",
- "type": "Number"
+ "description": "added child element.",
+ "type": "p5.XML"
},
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4494,
- "description": "<p>Set the phase of an oscillator between 0.0 and 1.0.\nIn this implementation, phase is a delay time\nbased on the oscillator's current frequency.</p>\n",
+ "name": "removeChild",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 613,
"itemtype": "method",
- "name": "phase",
- "params": [
+ "description": "<p>Removes the first matching child element.</p>\n<p>The parameter, <code>name</code>, is the child element to remove. If a string is\npassed, as in <code>myXML.removeChild('cat')</code>, then the first child element\nwith the tag <code><cat></code> will be removed. If a number is passed, as in\n<code>myXML.removeChild(1)</code>, then the child element at that index will be\nremoved.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Remove the first mammal element.\n myXML.removeChild('mammal');\n\n // Get an array of child elements.\n let children = myXML.getChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Leopard\", \"Zebra\", and \"Turtle\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Remove the element at index 2.\n myXML.removeChild(2);\n\n // Get an array of child elements.\n let children = myXML.getChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Turtle\" written on separate lines. The text is black on a gray background.'\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "phase",
- "description": "<p>float between 0.0 and 1.0</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "name",
+ "description": "name or index of the child element to remove.",
+ "type": "String|Integer"
+ }
+ ]
}
],
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4522,
- "description": "<p>Add a value to the p5.Oscillator's output amplitude,\nand return the oscillator. Calling this method again\nwill override the initial add() with a new value.</p>\n",
+ "name": "getAttributeCount",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 667,
"itemtype": "method",
- "name": "add",
- "params": [
+ "description": "Returns the number of attributes the element has.",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first child element.\n let first = myXML.getChild(0);\n\n // Get the number of attributes.\n let numAttributes = first.getAttributeCount();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the number of attributes.\n text(numAttributes, 50, 50);\n\n describe('The number \"2\" written in black on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "number",
- "description": "<p>Constant number to add</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "number of attributes.",
+ "type": "Integer"
+ }
}
],
"return": {
- "description": "Oscillator Returns this oscillator\n with scaled output",
- "type": "p5.Oscillator"
+ "description": "number of attributes.",
+ "type": "Integer"
},
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4543,
- "description": "<p>Multiply the p5.Oscillator's output amplitude\nby a fixed value (i.e. turn it up!). Calling this method\nagain will override the initial mult() with a new value.</p>\n",
+ "name": "listAttributes",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 712,
"itemtype": "method",
- "name": "mult",
- "params": [
+ "description": "<p>Returns an <code>Array</code> with the names of the element's attributes.</p>\n<p>Note: Use\n<a href=\"#/p5.XML/getString\">myXML.getString()</a> or\n<a href=\"#/p5.XML/getNum\">myXML.getNum()</a> to return an attribute's value.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first child element.\n let first = myXML.getChild(0);\n\n // Get the number of attributes.\n let attributes = first.listAttributes();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's attributes.\n text(attributes, 50, 50);\n\n describe('The text \"id,species\" written in black on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "number",
- "description": "<p>Constant number to multiply</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "attribute names.",
+ "type": "String[]"
+ }
}
],
"return": {
- "description": "Oscillator Returns this oscillator\n with multiplied output",
- "type": "p5.Oscillator"
+ "description": "attribute names.",
+ "type": "String[]"
},
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4563,
- "description": "<p>Scale this oscillator's amplitude values to a given\nrange, and return the oscillator. Calling this method\nagain will override the initial scale() with new values.</p>\n",
+ "name": "hasAttribute",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 772,
"itemtype": "method",
- "name": "scale",
- "params": [
+ "description": "<p>Returns <code>true</code> if the element has a given attribute and <code>false</code> if not.</p>\n<p>The parameter, <code>name</code>, is a string with the name of the attribute being\nchecked.</p>\n<p>Note: Use\n<a href=\"#/p5.XML/getString\">myXML.getString()</a> or\n<a href=\"#/p5.XML/getNum\">myXML.getNum()</a> to return an attribute's value.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first mammal child element.\n let mammal = myXML.getChild('mammal');\n\n // Check whether the element has an\n // species attribute.\n let hasSpecies = mammal.hasAttribute('species');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display whether the element has a species attribute.\n if (hasSpecies === true) {\n text('Species', 50, 50);\n } else {\n text('No species', 50, 50);\n }\n\n describe('The text \"Species\" written in black on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "inMin",
- "description": "<p>input range minumum</p>\n",
- "type": "Number"
- },
- {
- "name": "inMax",
- "description": "<p>input range maximum</p>\n",
- "type": "Number"
- },
- {
- "name": "outMin",
- "description": "<p>input range minumum</p>\n",
- "type": "Number"
- },
- {
- "name": "outMax",
- "description": "<p>input range maximum</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "name",
+ "description": "name of the attribute to be checked.",
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "whether the element has the attribute.",
+ "type": "boolean"
+ }
}
],
"return": {
- "description": "Oscillator Returns this oscillator\n with scaled output",
- "type": "p5.Oscillator"
+ "description": "whether the element has the attribute.",
+ "type": "boolean"
},
- "class": "p5.Oscillator",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 4767,
- "description": "<p>Time until envelope reaches attackLevel</p>\n",
- "itemtype": "property",
- "name": "attackTime",
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 4772,
- "description": "<p>Level once attack is complete.</p>\n",
- "itemtype": "property",
- "name": "attackLevel",
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 4778,
- "description": "<p>Time until envelope reaches decayLevel.</p>\n",
- "itemtype": "property",
- "name": "decayTime",
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 4784,
- "description": "<p>Level after decay. The envelope will sustain here until it is released.</p>\n",
- "itemtype": "property",
- "name": "decayLevel",
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 4790,
- "description": "<p>Duration of the release portion of the envelope.</p>\n",
- "itemtype": "property",
- "name": "releaseTime",
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 4796,
- "description": "<p>Level at the end of the release.</p>\n",
- "itemtype": "property",
- "name": "releaseLevel",
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4833,
- "description": "<p>Reset the envelope with a series of time/value pairs.</p>\n",
+ "name": "getNum",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 872,
"itemtype": "method",
- "name": "set",
- "params": [
- {
- "name": "attackTime",
- "description": "<p>Time (in seconds) before level\n reaches attackLevel</p>\n",
- "type": "Number"
- },
- {
- "name": "attackLevel",
- "description": "<p>Typically an amplitude between\n 0.0 and 1.0</p>\n",
- "type": "Number"
- },
- {
- "name": "decayTime",
- "description": "<p>Time</p>\n",
- "type": "Number"
- },
- {
- "name": "decayLevel",
- "description": "<p>Amplitude (In a standard ADSR envelope,\n decayLevel = sustainLevel)</p>\n",
- "type": "Number"
- },
- {
- "name": "releaseTime",
- "description": "<p>Release Time (in seconds)</p>\n",
- "type": "Number"
- },
+ "description": "<p>Return an attribute's value as a <code>Number</code>.</p>\n<p>The first parameter, <code>name</code>, is a string with the name of the attribute\nbeing checked. For example, calling <code>myXML.getNum('id')</code> returns the\nelement's <code>id</code> attribute as a number.</p>\n<p>The second parameter, <code>defaultValue</code>, is optional. If a number is passed,\nas in <code>myXML.getNum('id', -1)</code>, it will be returned if the attribute\ndoesn't exist or can't be converted to a number.</p>\n<p>Note: Use\n<a href=\"#/p5.XML/getString\">myXML.getString()</a> or\n<a href=\"#/p5.XML/getNum\">myXML.getNum()</a> to return an attribute's value.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's ID.\n let id = reptile.getNum('id');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the ID attribute.\n text(`${content} is ${id + 1}th`, 5, 50, 90);\n\n describe(`The text \"${content} is ${id + 1}th\" written in black on a gray background.`);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's size.\n let weight = reptile.getNum('weight', 135);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the ID attribute.\n text(`${content} is ${weight}kg`, 5, 50, 90);\n\n describe(\n `The text \"${content} is ${weight}kg\" written in black on a gray background.`\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "releaseLevel",
- "description": "<p>Amplitude</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "name",
+ "description": "name of the attribute to be checked.",
+ "type": "String"
+ },
+ {
+ "name": "defaultValue",
+ "description": "value to return if the attribute doesn't exist.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "attribute value as a number.",
+ "type": "Number"
+ }
}
],
- "example": [
- "\n<div><code>\nlet attackTime;\nlet l1 = 0.7; // attack level 0.0 to 1.0\nlet t2 = 0.3; // decay time in seconds\nlet l2 = 0.1; // decay level 0.0 to 1.0\nlet l3 = 0.2; // release time in seconds\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n\n env = new p5.Envelope();\n triOsc = new p5.Oscillator('triangle');\n}\n\nfunction draw() {\n background(220);\n text('tap here to play', 5, 20);\n\n attackTime = map(mouseX, 0, width, 0.0, 1.0);\n text('attack time: ' + attackTime, 5, height - 20);\n}\n\n// mouseClick triggers envelope if over canvas\nfunction playSound() {\n env.set(attackTime, l1, t2, l2, l3);\n\n triOsc.start();\n env.play(triOsc);\n}\n</code></div>\n"
- ],
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "attribute value as a number.",
+ "type": "Number"
+ },
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4895,
- "description": "<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n",
+ "name": "getString",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 971,
"itemtype": "method",
- "name": "setADSR",
- "params": [
- {
- "name": "attackTime",
- "description": "<p>Time (in seconds before envelope\n reaches Attack Level</p>\n",
- "type": "Number"
- },
- {
- "name": "decayTime",
- "description": "<p>Time (in seconds) before envelope\n reaches Decay/Sustain Level</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "susRatio",
- "description": "<p>Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using <code>setRange</code>),\n then decayLevel would increase proportionally, to become 0.5.</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Return an attribute's value as a string.</p>\n<p>The first parameter, <code>name</code>, is a string with the name of the attribute\nbeing checked. For example, calling <code>myXML.getString('color')</code> returns the\nelement's <code>id</code> attribute as a string.</p>\n<p>The second parameter, <code>defaultValue</code>, is optional. If a string is passed,\nas in <code>myXML.getString('color', 'deeppink')</code>, it will be returned if the\nattribute doesn't exist.</p>\n<p>Note: Use\n<a href=\"#/p5.XML/getString\">myXML.getString()</a> or\n<a href=\"#/p5.XML/getNum\">myXML.getNum()</a> to return an attribute's value.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's species.\n let species = reptile.getString('species');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the species attribute.\n text(`${content}: ${species}`, 5, 50, 90);\n\n describe(`The text \"${content}: ${species}\" written in black on a gray background.`);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's color.\n let attribute = reptile.getString('color', 'green');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n fill(attribute);\n\n // Display the element's content.\n text(content, 50, 50);\n\n describe(`The text \"${content}\" written in green on a gray background.`);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "releaseTime",
- "description": "<p>Time in seconds from now (defaults to 0)</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "name",
+ "description": "name of the attribute to be checked.",
+ "type": "String"
+ },
+ {
+ "name": "defaultValue",
+ "description": "value to return if the attribute doesn't exist.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "attribute value as a string.",
+ "type": "String"
+ }
}
],
- "example": [
- "\n<div><code>\nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playEnv);\n\n env = new p5.Envelope();\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.freq(220);\n}\n\nfunction draw() {\n background(220);\n text('tap here to play', 5, 20);\n attackTime = map(mouseX, 0, width, 0, 1.0);\n text('attack time: ' + attackTime, 5, height - 40);\n}\n\nfunction playEnv() {\n triOsc.start();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.play();\n}\n</code></div>"
- ],
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "attribute value as a string.",
+ "type": "String"
+ },
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 4964,
- "description": "<p>Set max (attackLevel) and min (releaseLevel) of envelope.</p>\n",
+ "name": "setAttribute",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 1034,
"itemtype": "method",
- "name": "setRange",
- "params": [
- {
- "name": "aLevel",
- "description": "<p>attack level (defaults to 1)</p>\n",
- "type": "Number"
- },
+ "description": "<p>Sets an attribute to a given value.</p>\n<p>The first parameter, <code>name</code>, is a string with the name of the attribute\nbeing set.</p>\n<p>The second parameter, <code>value</code>, is the attribute's new value. For example,\ncalling <code>myXML.setAttribute('id', 123)</code> sets the <code>id</code> attribute to the\nvalue 123.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Set the reptile's color.\n reptile.setAttribute('color', 'green');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's color.\n let attribute = reptile.getString('color');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's content.\n text(`${content} is ${attribute}`, 5, 50, 90);\n\n describe(\n `The text \"${content} is ${attribute}\" written in green on a gray background.`\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "rLevel",
- "description": "<p>release level (defaults to 0)</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "name",
+ "description": "name of the attribute to be set.",
+ "type": "String"
+ },
+ {
+ "name": "value",
+ "description": "attribute's new value.",
+ "type": "Number|String|Boolean"
+ }
+ ]
}
],
- "example": [
- "\n<div><code>\nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playEnv);\n\n env = new p5.Envelope();\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.freq(220);\n}\n\nfunction draw() {\n background(220);\n text('tap here to play', 5, 20);\n attackLevel = map(mouseY, height, 0, 0, 1.0);\n text('attack level: ' + attackLevel, 5, height - 20);\n}\n\nfunction playEnv() {\n triOsc.start();\n env.setRange(attackLevel, releaseLevel);\n env.play();\n}\n</code></div>"
- ],
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 5037,
- "description": "<p>Assign a parameter to be controlled by this envelope.\nIf a p5.Sound object is given, then the p5.Envelope will control its\noutput gain. If multiple inputs are provided, the env will\ncontrol all of them.</p>\n",
+ "name": "getContent",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 1107,
"itemtype": "method",
- "name": "setInput",
- "params": [
+ "description": "<p>Returns the element's content as a <code>String</code>.</p>\n<p>The parameter, <code>defaultValue</code>, is optional. If a string is passed, as in\n<code>myXML.getContent('???')</code>, it will be returned if the element has no\ncontent.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's content.\n text(content, 5, 50, 90);\n\n describe(`The text \"${content}\" written in green on a gray background.`);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.XML object.\n let blankSpace = new p5.XML();\n\n // Get the element's content and use a default value.\n let content = blankSpace.getContent('Your name');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's content.\n text(content, 5, 50, 90);\n\n describe(`The text \"${content}\" written in green on a gray background.`);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "inputs",
- "description": "<p>A p5.sound object or\n Web Audio Param.</p>\n",
- "type": "Object",
- "optional": true,
- "multiple": true
+ "params": [
+ {
+ "name": "defaultValue",
+ "description": "value to return if the element has no\ncontent.",
+ "optional": 1,
+ "type": "String"
+ }
+ ],
+ "return": {
+ "description": "element's content as a string.",
+ "type": "String"
+ }
}
],
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "element's content as a string.",
+ "type": "String"
+ },
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 5055,
- "description": "<p>Set whether the envelope ramp is linear (default) or exponential.\nExponential ramps can be useful because we perceive amplitude\nand frequency logarithmically.</p>\n",
+ "name": "serialize",
+ "file": "src/scripts/parsers/in/p5.js/src/io/p5.XML.js",
+ "line": 1221,
"itemtype": "method",
- "name": "setExp",
- "params": [
+ "description": "<p>Returns the element as a <code>String</code>.</p>\n<p><code>myXML.serialize()</code> is useful for sending the element over the network or\nsaving it to a file.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myXML;\n\nasync function setup() {\n // Load the XML and create a p5.XML object.\n myXML = await loadXML('assets/animals.xml');\n\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n // Use the file format .xml.\n let myWriter = createWriter('animals', 'xml');\n\n // Serialize the XML data to a string.\n let data = myXML.serialize();\n\n // Write the data to the print stream.\n myWriter.write(data);\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "isExp",
- "description": "<p>true is exponential, false is linear</p>\n",
- "type": "Boolean"
+ "params": [],
+ "return": {
+ "description": "element as a string.",
+ "type": "String"
+ }
}
],
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "element as a string.",
+ "type": "String"
+ },
+ "class": "p5.XML",
+ "static": false,
+ "module": "IO",
+ "submodule": "Input"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 5078,
- "description": "<p>Play tells the envelope to start acting on a given input.\nIf the input is a p5.sound object (i.e. AudioIn, Oscillator,\nSoundFile), then Envelope will control its output volume.\nEnvelopes can also be used to control any <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Audio Param.</a></p>",
+ "name": "getValue",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 119,
"itemtype": "method",
- "name": "play",
- "params": [
- {
- "name": "unit",
- "description": "<p>A p5.sound object or\n Web Audio Param.</p>\n",
- "type": "Object"
- },
- {
- "name": "startTime",
- "description": "<p>time from now (in seconds) at which to play</p>\n",
- "type": "Number",
- "optional": true
- },
+ "description": "<p>Retrieves the value at the specified index from the vector.</p>\n<p>This method allows you to get the value of a specific component of the vector\nby providing its index. Think of the vector as a list of numbers, where each\nnumber represents a different direction (like x, y, or z). The index is just\nthe position of the number in that list.</p>\n<p>For example, if you have a vector with values 10, 20, 30 the index 0 would\ngive you the first value 10, index 1 would give you the second value 20,\nand so on.</p>\n",
+ "example": [],
+ "overloads": [
{
- "name": "sustainTime",
- "description": "<p>time to sustain before releasing the envelope</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "index",
+ "description": "The position of the value you want to get from the vector.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "The value at the specified position in the vector.",
+ "type": "Number"
+ }
}
],
- "example": [
- "\n<div><code>\nlet attackLevel = 1.0;\nlet releaseLevel = 0;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.2;\nlet releaseTime = 0.5;\n\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playEnv);\n\n env = new p5.Envelope();\n triOsc = new p5.Oscillator('triangle');\n triOsc.amp(env);\n triOsc.freq(220);\n triOsc.start();\n}\n\nfunction draw() {\n background(220);\n text('tap here to play', 5, 20);\n attackTime = map(mouseX, 0, width, 0, 1.0);\n attackLevel = map(mouseY, height, 0, 0, 1.0);\n text('attack time: ' + attackTime, 5, height - 40);\n text('attack level: ' + attackLevel, 5, height - 20);\n}\n\nfunction playEnv() {\n // ensure that audio is enabled\n userStartAudio();\n\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(attackLevel, releaseLevel);\n env.play();\n}\n</code></div>"
- ],
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "The value at the specified position in the vector.",
+ "type": "Number"
+ },
+ "class": "p5.Vector",
+ "static": false,
+ "module": "Math"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 5148,
- "description": "<p>Trigger the Attack, and Decay portion of the Envelope.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go. Input can be\nany p5.sound object, or a <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Param</a>.</p>\n",
+ "name": "setValue",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 144,
"itemtype": "method",
- "name": "triggerAttack",
- "params": [
- {
- "name": "unit",
- "description": "<p>p5.sound Object or Web Audio Param</p>\n",
- "type": "Object"
- },
+ "description": "<p>Sets the value at the specified index of the vector.</p>\n<p>This method allows you to change a specific component of the vector by providing its index and the new value you want to set.\nThink of the vector as a list of numbers, where each number represents a different direction (like x, y, or z).\nThe index is just the position of the number in that list.</p>\n<p>For example, if you have a vector with values [0, 20, 30], and you want to change the second value (20) to 50,\nyou would use this method with index 1 (since indexes start at 0) and value 50.</p>\n",
+ "example": [],
+ "overloads": [
{
- "name": "secondsFromNow",
- "description": "<p>time from now (in seconds)</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "index",
+ "description": "The position in the vector where you want to set the new value.",
+ "type": "Number"
+ },
+ {
+ "name": "value",
+ "description": "The new value you want to set at the specified position.",
+ "type": "Number"
+ }
+ ]
}
],
- "example": [
- "\n<div><code>\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.3;\nlet releaseTime = 0.4;\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textSize(10);\n text('tap to triggerAttack', width/2, height/2);\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(1.0, 0.0);\n triOsc = new p5.Oscillator('triangle');\n triOsc.freq(220);\n\n cnv.mousePressed(envAttack);\n}\n\nfunction envAttack() {\n background(0, 255, 255);\n text('release to release', width/2, height/2);\n\n // ensures audio is enabled. See also: `userStartAudio`\n triOsc.start();\n\n env.triggerAttack(triOsc);\n}\n\nfunction mouseReleased() {\n background(220);\n text('tap to triggerAttack', width/2, height/2);\n\n env.triggerRelease(triOsc);\n}\n</code></div>"
- ],
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Vector",
+ "static": false,
+ "module": "Math"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 5256,
- "description": "<p>Trigger the Release of the Envelope. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.</p>\n",
+ "name": "toString",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 274,
"itemtype": "method",
- "name": "triggerRelease",
- "params": [
- {
- "name": "unit",
- "description": "<p>p5.sound Object or Web Audio Param</p>\n",
- "type": "Object"
- },
+ "description": "<p>Returns a string representation of a vector.</p>\n<p>Calling <code>toString()</code> is useful for printing vectors to the console while\ndebugging.</p>\n",
+ "example": [
+ "<div class = \"norender\">\n<code>\nfunction setup() {\n let v = createVector(20, 30);\n\n // Prints 'p5.Vector Object : [20, 30, 0]'.\n print(v.toString());\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "secondsFromNow",
- "description": "<p>time to trigger the release</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "string representation of the vector.",
+ "type": "String"
+ }
}
],
- "example": [
- "\n<div><code>\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet susPercent = 0.3;\nlet releaseTime = 0.4;\nlet env, triOsc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textSize(10);\n text('tap to triggerAttack', width/2, height/2);\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\n env.setRange(1.0, 0.0);\n triOsc = new p5.Oscillator('triangle');\n triOsc.freq(220);\n\n cnv.mousePressed(envAttack);\n}\n\nfunction envAttack() {\n background(0, 255, 255);\n text('release to release', width/2, height/2);\n\n // ensures audio is enabled. See also: `userStartAudio`\n triOsc.start();\n\n env.triggerAttack(triOsc);\n}\n\nfunction mouseReleased() {\n background(220);\n text('tap to triggerAttack', width/2, height/2);\n\n env.triggerRelease(triOsc);\n}\n</code></div>"
- ],
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "string representation of the vector.",
+ "type": "String"
+ },
+ "class": "p5.Vector",
+ "static": false,
+ "module": "Math"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 5350,
- "description": "<p>Exponentially ramp to a value using the first two\nvalues from <code><a href=\"#/p5.Envelope/setADSR\">setADSR(attackTime, decayTime)</a></code>\nas <a href=\"https://en.wikipedia.org/wiki/RC_time_constant\">\ntime constants</a> for simple exponential ramps.\nIf the value is higher than current value, it uses attackTime,\nwhile a decrease uses decayTime.</p>\n",
+ "name": "set",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 335,
"itemtype": "method",
- "name": "ramp",
- "params": [
- {
- "name": "unit",
- "description": "<p>p5.sound Object or Web Audio Param</p>\n",
- "type": "Object"
- },
- {
- "name": "secondsFromNow",
- "description": "<p>When to trigger the ramp</p>\n",
- "type": "Number"
- },
+ "chainable": 1,
+ "description": "<p>Sets the vector's <code>x</code>, <code>y</code>, and <code>z</code> components.</p>\n<p><code>set()</code> can use separate numbers, as in <code>v.set(1, 2, 3)</code>, a\n<a href=\"#/p5.Vector\">p5.Vector</a> object, as in <code>v.set(v2)</code>, or an\narray of numbers, as in <code>v.set([1, 2, 3])</code>.</p>\n<p>If a value isn't provided for a component, it will be set to 0. For\nexample, <code>v.set(4, 5)</code> sets <code>v.x</code> to 4, <code>v.y</code> to 5, and <code>v.z</code> to 0.\nCalling <code>set()</code> with no arguments, as in <code>v.set()</code>, sets all the vector's\ncomponents to 0.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top left.\n let pos = createVector(25, 25);\n point(pos);\n\n // Top right.\n // set() with numbers.\n pos.set(75, 25);\n point(pos);\n\n // Bottom right.\n // set() with a p5.Vector.\n let p2 = createVector(75, 75);\n pos.set(p2);\n point(pos);\n\n // Bottom left.\n // set() with an array.\n let arr = [25, 75];\n pos.set(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "v",
- "description": "<p>Target value</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "x",
+ "description": "x component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
},
{
- "name": "v2",
- "description": "<p>Second target value</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "value",
+ "description": "vector to set.",
+ "type": "p5.Vector|Number[]"
+ }
+ ]
}
],
- "example": [
- "\n<div><code>\nlet env, osc, amp;\n\nlet attackTime = 0.001;\nlet decayTime = 0.2;\nlet attackLevel = 1;\nlet decayLevel = 0;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n fill(0,255,0);\n noStroke();\n\n env = new p5.Envelope();\n env.setADSR(attackTime, decayTime);\n osc = new p5.Oscillator();\n osc.amp(env);\n amp = new p5.Amplitude();\n\n cnv.mousePressed(triggerRamp);\n}\n\nfunction triggerRamp() {\n // ensures audio is enabled. See also: `userStartAudio`\n osc.start();\n\n env.ramp(osc, 0, attackLevel, decayLevel);\n}\n\nfunction draw() {\n background(20);\n text('tap to play', 10, 20);\n let h = map(amp.getLevel(), 0, 0.4, 0, height);;\n rect(0, height, width, -h);\n}\n</code></div>"
- ],
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Vector",
+ "static": false,
+ "module": "Math"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 5460,
- "description": "<p>Add a value to the p5.Oscillator's output amplitude,\nand return the oscillator. Calling this method\nagain will override the initial add() with new values.</p>\n",
+ "name": "copy",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3333,
"itemtype": "method",
- "name": "add",
- "params": [
+ "description": "Returns a copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100 ,100);\n\n background(200);\n\n // Create a p5.Vector object.\n let pos = createVector(50, 50);\n\n // Make a copy.\n let pc = pos.copy();\n\n // Draw the point.\n strokeWeight(5);\n point(pc);\n\n describe('A black point drawn in the middle of a gray square.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "number",
- "description": "<p>Constant number to add</p>\n",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ }
+ },
+ {
+ "params": [
+ {
+ "name": "v",
+ "description": "the <a href=\"#/p5.Vector\">p5.Vector</a> to create a copy of",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "the copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object",
+ "type": "p5.Vector"
+ }
}
],
"return": {
- "description": "Envelope Returns this envelope\n with scaled output",
- "type": "p5.Envelope"
+ "description": "copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
},
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 5479,
- "description": "<p>Multiply the p5.Envelope's output amplitude\nby a fixed value. Calling this method\nagain will override the initial mult() with new values.</p>\n",
+ "name": "add",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3345,
"itemtype": "method",
- "name": "mult",
- "params": [
+ "chainable": 1,
+ "description": "<p>Adds to a vector's components.</p>\n<p><code>add()</code> can use separate numbers, as in <code>v.add(1, 2, 3)</code>,\nanother <a href=\"#/p5.Vector\">p5.Vector</a> object, as in <code>v.add(v2)</code>, or\nan array of numbers, as in <code>v.add([1, 2, 3])</code>.</p>\n<p>If a value isn't provided for a component, it won't change. For\nexample, <code>v.add(4, 5)</code> adds 4 to <code>v.x</code>, 5 to <code>v.y</code>, and 0 to <code>v.z</code>.\nCalling <code>add()</code> with no arguments, as in <code>v.add()</code>, has no effect.</p>\n<p>This method supports N-dimensional vectors.</p>\n<p>The static version of <code>add()</code>, as in <code>p5.Vector.add(v2, v1)</code>, returns a new\n<a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginals.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Top left.\n let pos = createVector(25, 25);\n point(pos);\n\n // Top right.\n // Add numbers.\n pos.add(50, 0);\n point(pos);\n\n // Bottom right.\n // Add a p5.Vector.\n let p2 = createVector(0, 50);\n pos.add(p2);\n point(pos);\n\n // Bottom left.\n // Add an array.\n let arr = [-50, 0];\n pos.add(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top left.\n let p1 = createVector(25, 25);\n\n // Center.\n let p2 = createVector(50, 50);\n\n // Bottom right.\n // Add p1 and p2.\n let p3 = p5.Vector.add(p1, p2);\n\n // Draw the points.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots in a diagonal line from top left to bottom right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(-30, 20);\n drawArrow(v1, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.add(v1, v2);\n drawArrow(origin, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "number",
- "description": "<p>Constant number to multiply</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "x",
+ "description": "x component of the vector to be added or an array of components.",
+ "type": "Number|Array"
+ },
+ {
+ "name": "y",
+ "description": "y component of the vector to be added.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z component of the vector to be added.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "value",
+ "description": "The vector to add",
+ "type": "p5.Vector|Number[]"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "v1",
+ "description": "A <a href=\"#/p5.Vector\">p5.Vector</a> to add",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "v2",
+ "description": "A <a href=\"#/p5.Vector\">p5.Vector</a> to add",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "target",
+ "description": "vector to receive the result.",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "resulting <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
+ }
}
],
"return": {
- "description": "Envelope Returns this envelope\n with scaled output",
- "type": "p5.Envelope"
+ "description": "resulting <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
},
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 5498,
- "description": "<p>Scale this envelope's amplitude values to a given\nrange, and return the envelope. Calling this method\nagain will override the initial scale() with new values.</p>\n",
+ "name": "rem",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3373,
"itemtype": "method",
- "name": "scale",
- "params": [
+ "chainable": 1,
+ "description": "<p>Performs modulo (remainder) division with a vector's <code>x</code>, <code>y</code>, and <code>z</code>\ncomponents.</p>\n<p><code>rem()</code> can use separate numbers, as in <code>v.rem(1, 2, 3)</code>,\nanother <a href=\"#/p5.Vector\">p5.Vector</a> object, as in <code>v.rem(v2)</code>, or\nan array of numbers, as in <code>v.rem([1, 2, 3])</code>.</p>\n<p>If only one value is provided, as in <code>v.rem(2)</code>, then all the components\nwill be set to their values modulo 2. If two values are provided, as in\n<code>v.rem(2, 3)</code>, then <code>v.z</code> won't change. Calling <code>rem()</code> with no\narguments, as in <code>v.rem()</code>, has no effect.</p>\n<p>The static version of <code>rem()</code>, as in <code>p5.Vector.rem(v2, v1)</code>, returns a\nnew <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginals.</p>\n",
+ "example": [
+ "<div class='norender'>\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2);\n\n // Prints 'p5.Vector Object : [1, 0, 1]'.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2, 3);\n\n // Prints 'p5.Vector Object : [1, 1, 5]'.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide numbers.\n v.rem(2, 3, 4);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4, 5);\n let v2 = createVector(2, 3, 4);\n\n // Divide a p5.Vector.\n v1.rem(v2);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div class='norender'>\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 5);\n\n // Divide an array.\n let arr = [2, 3, 4];\n v.rem(arr);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4, 5);\n let v2 = createVector(2, 3, 4);\n\n // Divide without modifying the original vectors.\n let v3 = p5.Vector.rem(v1, v2);\n\n // Prints 'p5.Vector Object : [1, 1, 1]'.\n print(v3.toString());\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "inMin",
- "description": "<p>input range minumum</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "x",
+ "description": "x component of divisor vector.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y component of divisor vector.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z component of divisor vector.",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "inMax",
- "description": "<p>input range maximum</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "value",
+ "description": "divisor vector.",
+ "type": "p5.Vector|Number[]"
+ }
+ ]
},
{
- "name": "outMin",
- "description": "<p>input range minumum</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "v1",
+ "description": "The dividend <a href=\"#/p5.Vector\">p5.Vector</a>",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "v2",
+ "description": "The divisor <a href=\"#/p5.Vector\">p5.Vector</a>",
+ "type": "p5.Vector"
+ }
+ ]
},
{
- "name": "outMax",
- "description": "<p>input range maximum</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "v1",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "v2",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "The resulting <a href=\"#/p5.Vector\">p5.Vector</a>",
+ "type": "p5.Vector"
+ }
}
],
"return": {
- "description": "Envelope Returns this envelope\n with scaled output",
- "type": "p5.Envelope"
+ "description": "The resulting <a href=\"#/p5.Vector\">p5.Vector</a>",
+ "type": "p5.Vector"
},
- "class": "p5.Envelope",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 5657,
- "description": "<p>Set type of noise to 'white', 'pink' or 'brown'.\nWhite is the default.</p>\n",
- "itemtype": "method",
- "name": "setType",
- "params": [
- {
- "name": "type",
- "description": "<p>'white', 'pink' or 'brown'</p>\n",
- "type": "String",
- "optional": true
- }
- ],
- "class": "p5.Noise",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 5871,
- "description": "<p>Set the width of a Pulse object (an oscillator that implements\nPulse Width Modulation).</p>\n",
+ "name": "sub",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3392,
"itemtype": "method",
- "name": "width",
- "params": [
- {
- "name": "width",
- "description": "<p>Width between the pulses (0 to 1.0,\n defaults to 0)</p>\n",
- "type": "Number",
- "optional": true
- }
+ "chainable": 1,
+ "description": "<p>Subtracts from a vector's <code>x</code>, <code>y</code>, and <code>z</code> components.</p>\n<p><code>sub()</code> can use separate numbers, as in <code>v.sub(1, 2, 3)</code>, another\n<a href=\"#/p5.Vector\">p5.Vector</a> object, as in <code>v.sub(v2)</code>, or an array\nof numbers, as in <code>v.sub([1, 2, 3])</code>.</p>\n<p>If a value isn't provided for a component, it won't change. For\nexample, <code>v.sub(4, 5)</code> subtracts 4 from <code>v.x</code>, 5 from <code>v.y</code>, and 0 from <code>v.z</code>.\nCalling <code>sub()</code> with no arguments, as in <code>v.sub()</code>, has no effect.</p>\n<p>The static version of <code>sub()</code>, as in <code>p5.Vector.sub(v2, v1)</code>, returns a new\n<a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginals.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom right.\n let pos = createVector(75, 75);\n point(pos);\n\n // Top right.\n // Subtract numbers.\n pos.sub(0, 50);\n point(pos);\n\n // Top left.\n // Subtract a p5.Vector.\n let p2 = createVector(50, 0);\n pos.sub(p2);\n point(pos);\n\n // Bottom left.\n // Subtract an array.\n let arr = [0, -50];\n pos.sub(arr);\n point(pos);\n\n describe('Four black dots arranged in a square on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(75, 75);\n let p2 = createVector(50, 50);\n\n // Subtract with modifying the original vectors.\n let p3 = p5.Vector.sub(p1, p2);\n\n // Draw the points.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots in a diagonal line from top left to bottom right.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = createVector(20, 70);\n drawArrow(origin, v2, 'blue');\n\n // Purple arrow.\n let v3 = p5.Vector.sub(v2, v1);\n drawArrow(v1, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
],
- "class": "p5.Pulse",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6066,
- "itemtype": "property",
- "name": "input",
- "type": "GainNode",
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6070,
- "itemtype": "property",
- "name": "output",
- "type": "GainNode",
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6075,
- "itemtype": "property",
- "name": "stream",
- "type": "MediaStream|null",
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6080,
- "itemtype": "property",
- "name": "mediaStream",
- "type": "MediaStreamAudioSourceNode|null",
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6085,
- "itemtype": "property",
- "name": "currentSource",
- "type": "Number|null",
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6090,
- "description": "<p>Client must allow browser to access their microphone / audioin source.\nDefault: false. Will become true when the client enables access.</p>\n",
- "itemtype": "property",
- "name": "enabled",
- "type": "Boolean",
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6098,
- "description": "<p>Input amplitude, connect to it by default but not to master out</p>\n",
- "itemtype": "property",
- "name": "amplitude",
- "type": "p5.Amplitude",
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6114,
- "description": "<p>Start processing audio input. This enables the use of other\nAudioIn methods like getLevel(). Note that by default, AudioIn\nis not connected to p5.sound's output. So you won't hear\nanything unless you use the connect() method.<br/></p>\n<p>Certain browsers limit access to the user's microphone. For example,\nChrome only allows access from localhost and over https. For this reason,\nyou may want to include an errorCallback—a function that is called in case\nthe browser won't provide mic access.</p>\n",
- "itemtype": "method",
- "name": "start",
- "params": [
+ "overloads": [
{
- "name": "successCallback",
- "description": "<p>Name of a function to call on\n success.</p>\n",
- "type": "Function",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "description": "x component of the vector to subtract.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y component of the vector to subtract.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z component of the vector to subtract.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
},
{
- "name": "errorCallback",
- "description": "<p>Name of a function to call if\n there was an error. For example,\n some browsers do not support\n getUserMedia.</p>\n",
- "type": "Function",
- "optional": true
- }
- ],
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6171,
- "description": "<p>Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().\nIf re-starting, the user may be prompted for permission access.</p>\n",
- "itemtype": "method",
- "name": "stop",
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6191,
- "description": "<p>Connect to an audio unit. If no parameter is provided, will\nconnect to the main output (i.e. your speakers).<br/></p>\n",
- "itemtype": "method",
- "name": "connect",
- "params": [
- {
- "name": "unit",
- "description": "<p>An object that accepts audio input,\n such as an FFT</p>\n",
- "type": "Object",
- "optional": true
- }
- ],
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6216,
- "description": "<p>Disconnect the AudioIn from all audio units. For example, if\nconnect() had been called, disconnect() will stop sending\nsignal to your speakers.<br/></p>\n",
- "itemtype": "method",
- "name": "disconnect",
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6234,
- "description": "<p>Read the Amplitude (volume level) of an AudioIn. The AudioIn\nclass contains its own instance of the Amplitude class to help\nmake it easy to get a microphone's volume level. Accepts an\noptional smoothing value (0.0 < 1.0). <em>NOTE: AudioIn must\n.start() before using .getLevel().</em><br/></p>\n",
- "itemtype": "method",
- "name": "getLevel",
- "params": [
+ "params": [
+ {
+ "name": "value",
+ "description": "the vector to subtract",
+ "type": "p5.Vector|Number[]"
+ }
+ ]
+ },
{
- "name": "smoothing",
- "description": "<p>Smoothing is 0.0 by default.\n Smooths values based on previous values.</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "v1",
+ "description": "A <a href=\"#/p5.Vector\">p5.Vector</a> to subtract from",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "v2",
+ "description": "A <a href=\"#/p5.Vector\">p5.Vector</a> to subtract",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "target",
+ "description": "vector to receive the result.",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "The resulting <a href=\"#/p5.Vector\">p5.Vector</a>",
+ "type": "p5.Vector"
+ }
}
],
"return": {
- "description": "Volume level (between 0.0 and 1.0)",
- "type": "Number"
+ "description": "The resulting <a href=\"#/p5.Vector\">p5.Vector</a>",
+ "type": "p5.Vector"
},
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 6257,
- "description": "<p>Set amplitude (volume) of a mic input between 0 and 1.0. <br/></p>\n",
+ "name": "mult",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3436,
"itemtype": "method",
- "name": "amp",
- "params": [
+ "chainable": 1,
+ "description": "Multiplies a vector by a scalar and returns a new vector.",
+ "example": [],
+ "overloads": [
{
- "name": "vol",
- "description": "<p>between 0 and 1.0</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "x",
+ "description": "number to multiply with the x component of the vector.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "number to multiply with the y component of the vector.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "number to multiply with the z component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
},
{
- "name": "time",
- "description": "<p>ramp time (optional)</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6280,
- "description": "<p>Returns a list of available input sources. This is a wrapper\nfor <a href=\"https://developer.mozilla.org/\nen-US/docs/Web/API/MediaDevices/enumerateDevices\" target=\"_blank\">\nMediaDevices.enumerateDevices() - Web APIs | MDN</a>\nand it returns a Promise.</p>\n",
- "itemtype": "method",
- "name": "getSources",
- "params": [
- {
- "name": "successCallback",
- "description": "<p>This callback function handles the sources when they\n have been enumerated. The callback function\n receives the deviceList array as its only argument</p>\n",
- "type": "Function",
- "optional": true
+ "params": [
+ {
+ "name": "arr",
+ "description": "array to multiply with the components of the vector.",
+ "type": "Number[]"
+ }
+ ]
},
{
- "name": "errorCallback",
- "description": "<p>This optional callback receives the error\n message as its argument.</p>\n",
- "type": "Function",
- "optional": true
- }
- ],
- "return": {
- "description": "Returns a Promise that can be used in place of the callbacks, similar\n to the enumerateDevices() method",
- "type": "Promise"
- },
- "example": [
- "\n <div><code>\n let audioIn;\n\n function setup(){\n text('getting sources...', 0, 20);\n audioIn = new p5.AudioIn();\n audioIn.getSources(gotSources);\n }\n\n function gotSources(deviceList) {\n if (deviceList.length > 0) {\n //set the source to the first item in the deviceList array\n audioIn.setSource(0);\n let currentSource = deviceList[audioIn.currentSource];\n text('set source to: ' + currentSource.deviceId, 5, 20, width);\n }\n }\n </code></div>"
- ],
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6340,
- "description": "<p>Set the input source. Accepts a number representing a\nposition in the array returned by getSources().\nThis is only available in browsers that support\n <a href=\"https://developer.mozilla.org/\n en-US/docs/Web/API/MediaDevices/enumerateDevices\" target=\"_blank\">\n navigator.mediaDevices.enumerateDevices()</a></p>\n",
- "itemtype": "method",
- "name": "setSource",
- "params": [
- {
- "name": "num",
- "description": "<p>position of input source in the array</p>\n",
- "type": "Number"
- }
- ],
- "example": [
- "\n<div><code>\nlet audioIn;\n\nfunction setup(){\n text('getting sources...', 0, 20);\n audioIn = new p5.AudioIn();\n audioIn.getSources(gotSources);\n}\n\nfunction gotSources(deviceList) {\n if (deviceList.length > 0) {\n //set the source to the first item in the deviceList array\n audioIn.setSource(0);\n let currentSource = deviceList[audioIn.currentSource];\n text('set source to: ' + currentSource.deviceId, 5, 20, width);\n }\n}\n</code></div>"
- ],
- "class": "p5.AudioIn",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6462,
- "description": "<p>In classes that extend\np5.Effect, connect effect nodes\nto the wet parameter</p>\n",
- "class": "p5.Effect",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6478,
- "description": "<p>Set the output volume of the filter.</p>\n",
- "itemtype": "method",
- "name": "amp",
- "params": [
- {
- "name": "vol",
- "description": "<p>amplitude between 0 and 1.0</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "v",
+ "description": "vector to multiply with the components of the original vector.",
+ "type": "p5.Vector"
+ }
+ ]
},
{
- "name": "rampTime",
- "description": "<p>create a fade that lasts until rampTime</p>\n",
- "type": "Number",
- "optional": true
+ "params": []
},
{
- "name": "tFromNow",
- "description": "<p>schedule this event to happen in tFromNow seconds</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Effect",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6502,
- "description": "<p>Link effects together in a chain\nExample usage: filter.chain(reverb, delay, panner);\nMay be used with an open-ended number of arguments</p>\n",
- "itemtype": "method",
- "name": "chain",
- "params": [
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "resulting new <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
+ }
+ },
{
- "name": "arguments",
- "description": "<p>Chain together multiple sound objects</p>\n",
- "type": "Object",
- "optional": true
- }
- ],
- "class": "p5.Effect",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6525,
- "description": "<p>Adjust the dry/wet value.</p>\n",
- "itemtype": "method",
- "name": "drywet",
- "params": [
+ "params": [
+ {
+ "name": "v",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "n",
+ "type": "Number"
+ },
+ {
+ "name": "target",
+ "description": "vector to receive the result.",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ]
+ },
{
- "name": "fade",
- "description": "<p>The desired drywet value (0 - 1.0)</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Effect",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6542,
- "description": "<p>Send output to a p5.js-sound, Web Audio Node, or use signal to\ncontrol an AudioParam</p>\n",
- "itemtype": "method",
- "name": "connect",
- "params": [
+ "params": [
+ {
+ "name": "v0",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "v1",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "target",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ]
+ },
{
- "name": "unit",
- "description": "",
- "type": "Object"
+ "params": [
+ {
+ "name": "v0",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "arr",
+ "type": "Number[]"
+ },
+ {
+ "name": "target",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ]
}
],
- "class": "p5.Effect",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6557,
- "description": "<p>Disconnect all output.</p>\n",
- "itemtype": "method",
- "name": "disconnect",
- "class": "p5.Effect",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6719,
- "description": "<p>The p5.Filter is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#BiquadFilterNode\">\nWeb Audio BiquadFilter Node</a>.</p>\n",
- "itemtype": "property",
- "name": "biquadFilter",
- "type": "DelayNode",
- "class": "p5.Filter",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "return": {
+ "description": "resulting new <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 6742,
- "description": "<p>Filter an audio signal according to a set\nof filter parameters.</p>\n",
+ "name": "div",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3505,
"itemtype": "method",
- "name": "process",
- "params": [
+ "chainable": 1,
+ "description": "<p>Divides a vector's <code>x</code>, <code>y</code>, and <code>z</code> components.</p>\n<p><code>div()</code> can use separate numbers, as in <code>v.div(1, 2, 3)</code>, another\n<a href=\"#/p5.Vector\">p5.Vector</a> object, as in <code>v.div(v2)</code>, or an array\nof numbers, as in <code>v.div([1, 2, 3])</code>.</p>\n<p>If only one value is provided, as in <code>v.div(2)</code>, then all the components\nwill be divided by 2. If a value isn't provided for a component, it\nwon't change. For example, <code>v.div(4, 5)</code> divides <code>v.x</code> by, <code>v.y</code> by 5,\nand <code>v.z</code> by 1. Calling <code>div()</code> with no arguments, as in <code>v.div()</code>, has\nno effect.</p>\n<p>The static version of <code>div()</code>, as in <code>p5.Vector.div(v, 2)</code>, returns a new\n<a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginals.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Center.\n let p = createVector(50, 50);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 2\n p.div(2);\n point(p);\n\n describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n p.div(2, 3);\n point(p);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n let arr = [2, 3];\n p.div(arr);\n point(p);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Divide p.x / 2 and p.y / 3\n let p2 = createVector(2, 3);\n p.div(p2);\n point(p);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the points.\n strokeWeight(5);\n\n // Bottom-right.\n let p = createVector(50, 75);\n point(p);\n\n // Top-left.\n // Create a new p5.Vector with\n // p3.x = p.x / p2.x\n // p3.y = p.y / p2.y\n let p2 = createVector(2, 3);\n let p3 = p5.Vector.div(p, p2);\n point(p3);\n\n 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.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n\n // Draw the red arrow.\n let v1 = createVector(50, 50);\n drawArrow(origin, v1, 'red');\n\n // Draw the blue arrow.\n let v2 = p5.Vector.div(v1, 2);\n drawArrow(origin, v2, 'blue');\n\n describe('Two arrows extending from the top left corner. The blue arrow is half the length of the red arrow.');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "Signal",
- "description": "<p>An object that outputs audio</p>\n",
- "type": "Object"
+ "params": [
+ {
+ "name": "n",
+ "description": "The number to divide the vector by",
+ "type": "Number"
+ }
+ ]
},
{
- "name": "freq",
- "description": "<p>Frequency in Hz, from 10 to 22050</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "x",
+ "description": "number to divide with the x component of the vector.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "number to divide with the y component of the vector.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "number to divide with the z component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
},
{
- "name": "res",
- "description": "<p>Resonance/Width of the filter frequency\n from 0.001 to 1000</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Filter",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6760,
- "description": "<p>Set the frequency and the resonance of the filter.</p>\n",
- "itemtype": "method",
- "name": "set",
- "params": [
- {
- "name": "freq",
- "description": "<p>Frequency in Hz, from 10 to 22050</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "arr",
+ "description": "array to divide the components of the vector by.",
+ "type": "Number[]"
+ }
+ ]
},
{
- "name": "res",
- "description": "<p>Resonance (Q) from 0.001 to 1000</p>\n",
- "type": "Number",
- "optional": true
+ "params": [
+ {
+ "name": "v",
+ "description": "vector to divide the components of the original vector by.",
+ "type": "p5.Vector"
+ }
+ ]
},
{
- "name": "timeFromNow",
- "description": "<p>schedule this event to happen\n seconds from now</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Filter",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6781,
- "description": "<p>Set the filter frequency, in Hz, from 10 to 22050 (the range of\nhuman hearing, although in reality most people hear in a narrower\nrange).</p>\n",
- "itemtype": "method",
- "name": "freq",
- "params": [
- {
- "name": "freq",
- "description": "<p>Filter Frequency</p>\n",
- "type": "Number"
+ "params": []
},
{
- "name": "timeFromNow",
- "description": "<p>schedule this event to happen\n seconds from now</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "return": {
- "description": "value Returns the current frequency value",
- "type": "Number"
- },
- "class": "p5.Filter",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6811,
- "description": "<p>Controls either width of a bandpass frequency,\nor the resonance of a low/highpass cutoff frequency.</p>\n",
- "itemtype": "method",
- "name": "res",
- "params": [
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "The resulting new <a href=\"#/p5.Vector\">p5.Vector</a>",
+ "type": "p5.Vector"
+ }
+ },
{
- "name": "res",
- "description": "<p>Resonance/Width of filter freq\n from 0.001 to 1000</p>\n",
- "type": "Number"
+ "params": [
+ {
+ "name": "v",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "n",
+ "type": "Number"
+ },
+ {
+ "name": "target",
+ "description": "The vector to receive the result",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ]
},
{
- "name": "timeFromNow",
- "description": "<p>schedule this event to happen\n seconds from now</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "return": {
- "description": "value Returns the current res value",
- "type": "Number"
- },
- "class": "p5.Filter",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6838,
- "description": "<p>Controls the gain attribute of a Biquad Filter.\nThis is distinctly different from .amp() which is inherited from p5.Effect\n.amp() controls the volume via the output gain node\np5.Filter.gain() controls the gain parameter of a Biquad Filter node.</p>\n",
- "itemtype": "method",
- "name": "gain",
- "params": [
- {
- "name": "gain",
- "description": "",
- "type": "Number"
- }
- ],
- "return": {
- "description": "Returns the current or updated gain value",
- "type": "Number"
- },
- "class": "p5.Filter",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6864,
- "description": "<p>Toggle function. Switches between the specified type and allpass</p>\n",
- "itemtype": "method",
- "name": "toggle",
- "return": {
- "description": "[Toggle value]",
- "type": "Boolean"
- },
- "class": "p5.Filter",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 6884,
- "description": "<p>Set the type of a p5.Filter. Possible types include:\n\"lowpass\" (default), \"highpass\", \"bandpass\",\n\"lowshelf\", \"highshelf\", \"peaking\", \"notch\",\n\"allpass\".</p>\n",
- "itemtype": "method",
- "name": "setType",
- "params": [
- {
- "name": "t",
- "description": "",
- "type": "String"
- }
- ],
- "class": "p5.Filter",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7198,
- "description": "<p>The p5.EQ is built with abstracted p5.Filter objects.\nTo modify any bands, use methods of the <a\nhref=\"/reference/#/p5.Filter\" title=\"p5.Filter reference\">\np5.Filter</a> API, especially <code>gain</code> and <code>freq</code>.\nBands are stored in an array, with indices 0 - 3, or 0 - 7</p>\n",
- "itemtype": "property",
- "name": "bands",
- "type": "Array",
- "class": "p5.EQ",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7239,
- "description": "<p>Process an input by connecting it to the EQ</p>\n",
- "itemtype": "method",
- "name": "process",
- "params": [
- {
- "name": "src",
- "description": "<p>Audio source</p>\n",
- "type": "Object"
- }
- ],
- "class": "p5.EQ",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7629,
- "description": "<p><a title=\"Web Audio Panner docs\" href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a></p>\n<p>Properties include<br>\n <a href=\"https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\">Panning Model</a>\n : \"equal power\" or \"HRTF\"<br>\n <a href=\"https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\">DistanceModel</a>\n: \"linear\", \"inverse\", or \"exponential\"</p>\n",
- "itemtype": "property",
- "name": "panner",
- "type": "AudioNode",
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7654,
- "description": "<p>Connect an audio sorce</p>\n",
- "itemtype": "method",
- "name": "process",
- "params": [
- {
- "name": "src",
- "description": "<p>Input source</p>\n",
- "type": "Object"
- }
- ],
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7668,
- "description": "<p>Set the X,Y,Z position of the Panner</p>\n",
- "itemtype": "method",
- "name": "set",
- "params": [
- {
- "name": "xVal",
- "description": "",
- "type": "Number"
- },
- {
- "name": "yVal",
- "description": "",
- "type": "Number"
- },
- {
- "name": "zVal",
- "description": "",
- "type": "Number"
+ "params": [
+ {
+ "name": "v0",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "v1",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "target",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ]
},
{
- "name": "time",
- "description": "",
- "type": "Number"
+ "params": [
+ {
+ "name": "v0",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "arr",
+ "type": "Number[]"
+ },
+ {
+ "name": "target",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ]
}
],
"return": {
- "description": "Updated x, y, z values as an array",
- "type": "Array"
- },
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7687,
- "description": "<p>Getter and setter methods for position coordinates</p>\n",
- "itemtype": "method",
- "name": "positionX",
- "return": {
- "description": "updated coordinate value",
- "type": "Number"
- },
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7694,
- "description": "<p>Getter and setter methods for position coordinates</p>\n",
- "itemtype": "method",
- "name": "positionY",
- "return": {
- "description": "updated coordinate value",
- "type": "Number"
- },
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7701,
- "description": "<p>Getter and setter methods for position coordinates</p>\n",
- "itemtype": "method",
- "name": "positionZ",
- "return": {
- "description": "updated coordinate value",
- "type": "Number"
+ "description": "The resulting new <a href=\"#/p5.Vector\">p5.Vector</a>",
+ "type": "p5.Vector"
},
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 7753,
- "description": "<p>Set the X,Y,Z position of the Panner</p>\n",
+ "name": "mag",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3629,
"itemtype": "method",
- "name": "orient",
- "params": [
- {
- "name": "xVal",
- "description": "",
- "type": "Number"
- },
+ "description": "<p>Calculates the magnitude (length) of the vector.</p>\n<p>Use <a href=\"#/p5/mag\">mag()</a> to calculate the magnitude of a 2D vector\nusing components as in <code>mag(x, y)</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector object.\n let p = createVector(30, 40);\n\n // Draw a line from the origin.\n line(0, 0, p.x, p.y);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the vector's magnitude.\n let m = p.mag();\n text(m, p.x, p.y);\n\n 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.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
{
- "name": "yVal",
- "description": "",
- "type": "Number"
+ "params": [],
+ "return": {
+ "description": "magnitude of the vector.",
+ "type": "Number"
+ }
},
{
- "name": "zVal",
- "description": "",
- "type": "Number"
+ "params": []
},
{
- "name": "time",
- "description": "",
- "type": "Number"
+ "params": [
+ {
+ "name": "vecT",
+ "description": "The vector to return the magnitude of",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "The magnitude of vecT",
+ "type": "Number"
+ }
}
],
"return": {
- "description": "Updated x, y, z values as an array",
- "type": "Array"
- },
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7772,
- "description": "<p>Getter and setter methods for orient coordinates</p>\n",
- "itemtype": "method",
- "name": "orientX",
- "return": {
- "description": "updated coordinate value",
- "type": "Number"
- },
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7779,
- "description": "<p>Getter and setter methods for orient coordinates</p>\n",
- "itemtype": "method",
- "name": "orientY",
- "return": {
- "description": "updated coordinate value",
- "type": "Number"
- },
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7786,
- "description": "<p>Getter and setter methods for orient coordinates</p>\n",
- "itemtype": "method",
- "name": "orientZ",
- "return": {
- "description": "updated coordinate value",
+ "description": "magnitude of the vector.",
"type": "Number"
},
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7838,
- "description": "<p>Set the rolloff factor and max distance</p>\n",
- "itemtype": "method",
- "name": "setFalloff",
- "params": [
- {
- "name": "maxDistance",
- "description": "",
- "type": "Number",
- "optional": true
- },
- {
- "name": "rolloffFactor",
- "description": "",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "file": "lib/addons/p5.sound.js",
- "line": 7852,
- "description": "<p>Maxium distance between the source and the listener</p>\n",
- "itemtype": "method",
- "name": "maxDist",
- "params": [
- {
- "name": "maxDistance",
- "description": "",
- "type": "Number"
- }
- ],
- "return": {
- "description": "updated value",
- "type": "Number"
- },
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7869,
- "description": "<p>How quickly the volume is reduced as the source moves away from the listener</p>\n",
- "itemtype": "method",
- "name": "rollof",
- "params": [
- {
- "name": "rolloffFactor",
- "description": "",
- "type": "Number"
- }
- ],
- "return": {
- "description": "updated value",
- "type": "Number"
- },
- "class": "p5.Panner3D",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7989,
- "description": "<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n",
- "itemtype": "property",
- "name": "leftDelay",
- "type": "DelayNode",
- "class": "p5.Delay",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 7999,
- "description": "<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n",
- "itemtype": "property",
- "name": "rightDelay",
- "type": "DelayNode",
- "class": "p5.Delay",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8049,
- "description": "<p>Add delay to an audio signal according to a set\nof delay parameters.</p>\n",
- "itemtype": "method",
- "name": "process",
- "params": [
- {
- "name": "Signal",
- "description": "<p>An object that outputs audio</p>\n",
- "type": "Object"
- },
- {
- "name": "delayTime",
- "description": "<p>Time (in seconds) of the delay/echo.\n Some browsers limit delayTime to\n 1 second.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "feedback",
- "description": "<p>sends the delay back through itself\n in a loop that decreases in volume\n each time.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "lowPass",
- "description": "<p>Cutoff frequency. Only frequencies\n below the lowPass will be part of the\n delay.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Delay",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8094,
- "description": "<p>Set the delay (echo) time, in seconds. Usually this value will be\na floating point number between 0.0 and 1.0.</p>\n",
- "itemtype": "method",
- "name": "delayTime",
- "params": [
- {
- "name": "delayTime",
- "description": "<p>Time (in seconds) of the delay</p>\n",
- "type": "Number"
- }
- ],
- "class": "p5.Delay",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8116,
- "description": "<p>Feedback occurs when Delay sends its signal back through its input\nin a loop. The feedback amount determines how much signal to send each\ntime through the loop. A feedback greater than 1.0 is not desirable because\nit will increase the overall output each time through the loop,\ncreating an infinite feedback loop. The default value is 0.5</p>\n",
- "itemtype": "method",
- "name": "feedback",
- "params": [
- {
- "name": "feedback",
- "description": "<p>0.0 to 1.0, or an object such as an\n Oscillator that can be used to\n modulate this param</p>\n",
- "type": "Number|Object"
- }
- ],
- "return": {
- "description": "Feedback value",
- "type": "Number"
- },
- "class": "p5.Delay",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8148,
- "description": "<p>Set a lowpass filter frequency for the delay. A lowpass filter\nwill cut off any frequencies higher than the filter frequency.</p>\n",
- "itemtype": "method",
- "name": "filter",
- "params": [
- {
- "name": "cutoffFreq",
- "description": "<p>A lowpass filter will cut off any\n frequencies higher than the filter frequency.</p>\n",
- "type": "Number|Object"
- },
- {
- "name": "res",
- "description": "<p>Resonance of the filter frequency\n cutoff, or an object (i.e. a p5.Oscillator)\n that can be used to modulate this parameter.\n High numbers (i.e. 15) will produce a resonance,\n low numbers (i.e. .2) will produce a slope.</p>\n",
- "type": "Number|Object"
- }
- ],
- "class": "p5.Delay",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8170,
- "description": "<p>Choose a preset type of delay. 'pingPong' bounces the signal\nfrom the left to the right channel to produce a stereo effect.\nAny other parameter will revert to the default delay setting.</p>\n",
- "itemtype": "method",
- "name": "setType",
- "params": [
- {
- "name": "type",
- "description": "<p>'pingPong' (1) or 'default' (0)</p>\n",
- "type": "String|Number"
- }
- ],
- "class": "p5.Delay",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8223,
- "description": "<p>Set the output level of the delay effect.</p>\n",
- "itemtype": "method",
- "name": "amp",
- "params": [
- {
- "name": "volume",
- "description": "<p>amplitude between 0 and 1.0</p>\n",
- "type": "Number"
- },
- {
- "name": "rampTime",
- "description": "<p>create a fade that lasts rampTime</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "timeFromNow",
- "description": "<p>schedule this event to happen\n seconds from now</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Delay",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8234,
- "description": "<p>Send output to a p5.sound or web audio object</p>\n",
- "itemtype": "method",
- "name": "connect",
- "params": [
- {
- "name": "unit",
- "description": "",
- "type": "Object"
- }
- ],
- "class": "p5.Delay",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8242,
- "description": "<p>Disconnect all output.</p>\n",
- "itemtype": "method",
- "name": "disconnect",
- "class": "p5.Delay",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8409,
- "description": "<p>Connect a source to the reverb, and assign reverb parameters.</p>\n",
- "itemtype": "method",
- "name": "process",
- "params": [
- {
- "name": "src",
- "description": "<p>p5.sound / Web Audio object with a sound\n output.</p>\n",
- "type": "Object"
- },
- {
- "name": "seconds",
- "description": "<p>Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "decayRate",
- "description": "<p>Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "reverse",
- "description": "<p>Play the reverb backwards or forwards.</p>\n",
- "type": "Boolean",
- "optional": true
- }
- ],
- "class": "p5.Reverb",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8446,
- "description": "<p>Set the reverb settings. Similar to .process(), but without\nassigning a new input.</p>\n",
- "itemtype": "method",
- "name": "set",
- "params": [
- {
- "name": "seconds",
- "description": "<p>Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "decayRate",
- "description": "<p>Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "reverse",
- "description": "<p>Play the reverb backwards or forwards.</p>\n",
- "type": "Boolean",
- "optional": true
- }
- ],
- "class": "p5.Reverb",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8482,
- "description": "<p>Set the output level of the reverb effect.</p>\n",
- "itemtype": "method",
- "name": "amp",
- "params": [
- {
- "name": "volume",
- "description": "<p>amplitude between 0 and 1.0</p>\n",
- "type": "Number"
- },
- {
- "name": "rampTime",
- "description": "<p>create a fade that lasts rampTime</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "timeFromNow",
- "description": "<p>schedule this event to happen\n seconds from now</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Reverb",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8493,
- "description": "<p>Send output to a p5.sound or web audio object</p>\n",
- "itemtype": "method",
- "name": "connect",
- "params": [
- {
- "name": "unit",
- "description": "",
- "type": "Object"
- }
- ],
- "class": "p5.Reverb",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8501,
- "description": "<p>Disconnect all output.</p>\n",
- "itemtype": "method",
- "name": "disconnect",
- "class": "p5.Reverb",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8621,
- "description": "<p>Internally, the p5.Convolver uses the a\n<a href=\"http://www.w3.org/TR/webaudio/#ConvolverNode\">\nWeb Audio Convolver Node</a>.</p>\n",
- "itemtype": "property",
- "name": "convolverNode",
- "type": "ConvolverNode",
- "class": "p5.Convolver",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8645,
- "description": "<p>If you load multiple impulse files using the .addImpulse method,\nthey will be stored as Objects in this Array. Toggle between them\nwith the <code>toggleImpulse(id)</code> method.</p>\n",
- "itemtype": "property",
- "name": "impulses",
- "type": "Array",
- "class": "p5.Convolver",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8737,
- "description": "<p>Connect a source to the convolver.</p>\n",
- "itemtype": "method",
- "name": "process",
- "params": [
- {
- "name": "src",
- "description": "<p>p5.sound / Web Audio object with a sound\n output.</p>\n",
- "type": "Object"
- }
- ],
- "example": [
- "\n<div><code>\nlet cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n\n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n text('tap to play', 20, 20);\n\n // disconnect from main output...\n sound.disconnect();\n\n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n}\n\nfunction playSound() {\n sound.play();\n}\n\n</code></div>"
- ],
- "class": "p5.Convolver",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8786,
- "description": "<p>Load and assign a new Impulse Response to the p5.Convolver.\nThe impulse is added to the <code>.impulses</code> array. Previous\nimpulses can be accessed with the <code>.toggleImpulse(id)</code>\nmethod.</p>\n",
- "itemtype": "method",
- "name": "addImpulse",
- "params": [
- {
- "name": "path",
- "description": "<p>path to a sound file</p>\n",
- "type": "String"
- },
- {
- "name": "callback",
- "description": "<p>function (optional)</p>\n",
- "type": "Function"
- },
- {
- "name": "errorCallback",
- "description": "<p>function (optional)</p>\n",
- "type": "Function"
- }
- ],
- "class": "p5.Convolver",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8808,
- "description": "<p>Similar to .addImpulse, except that the <code>.impulses</code>\nArray is reset to save memory. A new <code>.impulses</code>\narray is created with this impulse as the only item.</p>\n",
- "itemtype": "method",
- "name": "resetImpulse",
- "params": [
- {
- "name": "path",
- "description": "<p>path to a sound file</p>\n",
- "type": "String"
- },
- {
- "name": "callback",
- "description": "<p>function (optional)</p>\n",
- "type": "Function"
- },
- {
- "name": "errorCallback",
- "description": "<p>function (optional)</p>\n",
- "type": "Function"
- }
- ],
- "class": "p5.Convolver",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8831,
- "description": "<p>If you have used <code>.addImpulse()</code> to add multiple impulses\nto a p5.Convolver, then you can use this method to toggle between\nthe items in the <code>.impulses</code> Array. Accepts a parameter\nto identify which impulse you wish to use, identified either by its\noriginal filename (String) or by its position in the <code>.impulses\n</code> Array (Number).<br/>\nYou can access the objects in the .impulses Array directly. Each\nObject has two attributes: an <code>.audioBuffer</code> (type:\nWeb Audio <a href=\"\nhttp://webaudio.github.io/web-audio-api/#the-audiobuffer-interface\">\nAudioBuffer)</a> and a <code>.name</code>, a String that corresponds\nwith the original filename.</p>\n",
- "itemtype": "method",
- "name": "toggleImpulse",
- "params": [
- {
- "name": "id",
- "description": "<p>Identify the impulse by its original filename\n (String), or by its position in the\n <code>.impulses</code> Array (Number).</p>\n",
- "type": "String|Number"
- }
- ],
- "class": "p5.Convolver",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 8885,
- "description": "<p>Create a p5.Convolver. Accepts a path to a soundfile\nthat will be used to generate an impulse response.</p>\n",
- "itemtype": "method",
- "name": "createConvolver",
- "params": [
- {
- "name": "path",
- "description": "<p>path to a sound file</p>\n",
- "type": "String"
- },
- {
- "name": "callback",
- "description": "<p>function to call if loading is successful.\n The object will be passed in as the argument\n to the callback function.</p>\n",
- "type": "Function",
- "optional": true
- },
- {
- "name": "errorCallback",
- "description": "<p>function to call if loading is not successful.\n A custom error will be passed in as the argument\n to the callback function.</p>\n",
- "type": "Function",
- "optional": true
- }
- ],
- "return": {
- "description": "",
- "type": "p5.Convolver"
- },
- "example": [
- "\n<div><code>\nlet cVerb, sound;\nfunction preload() {\n // We have both MP3 and OGG versions of all sound assets\n soundFormats('ogg', 'mp3');\n\n // Try replacing 'bx-spring' with other soundfiles like\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\n cVerb = createConvolver('assets/bx-spring.mp3');\n\n // Try replacing 'Damscray_DancingTiger' with\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n text('tap to play', 20, 20);\n\n // disconnect from main output...\n sound.disconnect();\n\n // ...and process with cVerb\n // so that we only hear the convolution\n cVerb.process(sound);\n}\n\nfunction playSound() {\n sound.play();\n}\n</code></div>"
- ],
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9084,
- "description": "<p>Set the global tempo, in beats per minute, for all\np5.Parts. This method will impact all active p5.Parts.</p>\n",
- "itemtype": "method",
- "name": "setBPM",
- "params": [
- {
- "name": "BPM",
- "description": "<p>Beats Per Minute</p>\n",
- "type": "Number"
- },
- {
- "name": "rampTime",
- "description": "<p>Seconds from now</p>\n",
- "type": "Number"
- }
- ],
- "class": "p5",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9173,
- "description": "<p>Array of values to pass into the callback\nat each step of the phrase. Depending on the callback\nfunction's requirements, these values may be numbers,\nstrings, or an object with multiple parameters.\nZero (0) indicates a rest.</p>\n",
- "itemtype": "property",
- "name": "sequence",
- "type": "Array",
- "class": "p5.Phrase",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9263,
- "description": "<p>Set the tempo of this part, in Beats Per Minute.</p>\n",
- "itemtype": "method",
- "name": "setBPM",
- "params": [
- {
- "name": "BPM",
- "description": "<p>Beats Per Minute</p>\n",
- "type": "Number"
- },
- {
- "name": "rampTime",
- "description": "<p>Seconds from now</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Part",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9278,
- "description": "<p>Returns the tempo, in Beats Per Minute, of this part.</p>\n",
- "itemtype": "method",
- "name": "getBPM",
- "return": {
- "description": "",
- "type": "Number"
- },
- "class": "p5.Part",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9291,
- "description": "<p>Start playback of this part. It will play\nthrough all of its phrases at a speed\ndetermined by setBPM.</p>\n",
- "itemtype": "method",
- "name": "start",
- "params": [
- {
- "name": "time",
- "description": "<p>seconds from now</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Part",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9311,
- "description": "<p>Loop playback of this part. It will begin\nlooping through all of its phrases at a speed\ndetermined by setBPM.</p>\n",
- "itemtype": "method",
- "name": "loop",
- "params": [
- {
- "name": "time",
- "description": "<p>seconds from now</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Part",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9333,
- "description": "<p>Tell the part to stop looping.</p>\n",
- "itemtype": "method",
- "name": "noLoop",
- "class": "p5.Part",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9349,
- "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>\n",
- "itemtype": "method",
- "name": "stop",
- "params": [
- {
- "name": "time",
- "description": "<p>seconds from now</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Part",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9363,
- "description": "<p>Pause the part. Playback will resume\nfrom the current step.</p>\n",
- "itemtype": "method",
- "name": "pause",
- "params": [
- {
- "name": "time",
- "description": "<p>seconds from now</p>\n",
- "type": "Number"
- }
- ],
- "class": "p5.Part",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9379,
- "description": "<p>Add a p5.Phrase to this Part.</p>\n",
- "itemtype": "method",
- "name": "addPhrase",
- "params": [
- {
- "name": "phrase",
- "description": "<p>reference to a p5.Phrase</p>\n",
- "type": "p5.Phrase"
- }
- ],
- "class": "p5.Part",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9406,
- "description": "<p>Remove a phrase from this part, based on the name it was\ngiven when it was created.</p>\n",
- "itemtype": "method",
- "name": "removePhrase",
- "params": [
- {
- "name": "phraseName",
- "description": "",
- "type": "String"
- }
- ],
- "class": "p5.Part",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9424,
- "description": "<p>Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.</p>\n",
- "itemtype": "method",
- "name": "getPhrase",
- "params": [
- {
- "name": "phraseName",
- "description": "",
- "type": "String"
- }
- ],
- "class": "p5.Part",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9442,
- "description": "<p>Find all sequences with the specified name, and replace their patterns with the specified array.</p>\n",
- "itemtype": "method",
- "name": "replaceSequence",
- "params": [
- {
- "name": "phraseName",
- "description": "",
- "type": "String"
- },
- {
- "name": "sequence",
- "description": "<p>Array of values to pass into the callback\n at each step of the phrase.</p>\n",
- "type": "Array"
- }
- ],
- "class": "p5.Part",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9473,
- "description": "<p>Set the function that will be called at every step. This will clear the previous function.</p>\n",
- "itemtype": "method",
- "name": "onStep",
- "params": [
- {
- "name": "callback",
- "description": "<p>The name of the callback\n you want to fire\n on every beat/tatum.</p>\n",
- "type": "Function"
- }
- ],
- "class": "p5.Part",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9542,
- "description": "<p>Start playback of the score.</p>\n",
- "itemtype": "method",
- "name": "start",
- "class": "p5.Score",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9555,
- "description": "<p>Stop playback of the score.</p>\n",
- "itemtype": "method",
- "name": "stop",
- "class": "p5.Score",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9569,
- "description": "<p>Pause playback of the score.</p>\n",
- "itemtype": "method",
- "name": "pause",
- "class": "p5.Score",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9581,
- "description": "<p>Loop playback of the score.</p>\n",
- "itemtype": "method",
- "name": "loop",
- "class": "p5.Score",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9594,
- "description": "<p>Stop looping playback of the score. If it\nis currently playing, this will go into effect\nafter the current round of playback completes.</p>\n",
- "itemtype": "method",
- "name": "noLoop",
- "class": "p5.Score",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9628,
- "description": "<p>Set the tempo for all parts in the score</p>\n",
- "itemtype": "method",
- "name": "setBPM",
- "params": [
- {
- "name": "BPM",
- "description": "<p>Beats Per Minute</p>\n",
- "type": "Number"
- },
- {
- "name": "rampTime",
- "description": "<p>Seconds from now</p>\n",
- "type": "Number"
- }
- ],
- "class": "p5.Score",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9729,
- "description": "<p>Getters and Setters, setting any paramter will result in a change in the clock's\nfrequency, that will be reflected after the next callback\nbeats per minute (defaults to 60)</p>\n",
- "itemtype": "property",
- "name": "bpm",
- "type": "Number",
- "class": "p5.SoundLoop",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9750,
- "description": "<p>number of quarter notes in a measure (defaults to 4)</p>\n",
- "itemtype": "property",
- "name": "timeSignature",
- "type": "Number",
- "class": "p5.SoundLoop",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9770,
- "description": "<p>length of the loops interval</p>\n",
- "itemtype": "property",
- "name": "interval",
- "type": "Number|String",
- "class": "p5.SoundLoop",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9787,
- "description": "<p>how many times the callback has been called so far</p>\n",
- "itemtype": "property",
- "name": "iterations",
- "type": "Number",
- "readonly": "",
- "class": "p5.SoundLoop",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9800,
- "description": "<p>musicalTimeMode uses <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention\ntrue if string, false if number</p>\n",
- "itemtype": "property",
- "name": "musicalTimeMode",
- "type": "Boolean",
- "class": "p5.SoundLoop",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9808,
- "description": "<p>musicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string</p>\n",
- "class": "p5.SoundLoop",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9816,
- "description": "<p>Set a limit to the number of loops to play. defaults to Infinity</p>\n",
- "itemtype": "property",
- "name": "maxIterations",
- "type": "Number",
- "class": "p5.SoundLoop",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9826,
- "description": "<p>Do not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded</p>\n<p>The callback should only be called until maxIterations is reached</p>\n",
- "class": "p5.SoundLoop",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9841,
- "description": "<p>Start the loop</p>\n",
- "itemtype": "method",
- "name": "start",
- "params": [
- {
- "name": "timeFromNow",
- "description": "<p>schedule a starting time</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.SoundLoop",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9860,
- "description": "<p>Stop the loop</p>\n",
- "itemtype": "method",
- "name": "stop",
- "params": [
- {
- "name": "timeFromNow",
- "description": "<p>schedule a stopping time</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.SoundLoop",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9878,
- "description": "<p>Pause the loop</p>\n",
- "itemtype": "method",
- "name": "pause",
- "params": [
- {
- "name": "timeFromNow",
- "description": "<p>schedule a pausing time</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.SoundLoop",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 9896,
- "description": "<p>Synchronize loops. Use this method to start two or more loops in synchronization\nor to start a loop in synchronization with a loop that is already playing\nThis method will schedule the implicit loop in sync with the explicit master loop\ni.e. loopToStart.syncedStart(loopToSyncWith)</p>\n",
- "itemtype": "method",
- "name": "syncedStart",
- "params": [
- {
- "name": "otherLoop",
- "description": "<p>a p5.SoundLoop to sync with</p>\n",
- "type": "Object"
- },
- {
- "name": "timeFromNow",
- "description": "<p>Start the loops in sync after timeFromNow seconds</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.SoundLoop",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10068,
- "description": "<p>The p5.Compressor is built with a <a href=\"https://www.w3.org/TR/webaudio/#the-dynamicscompressornode-interface\"\n target=\"_blank\" title=\"W3 spec for Dynamics Compressor Node\">Web Audio Dynamics Compressor Node\n </a></p>\n",
- "itemtype": "property",
- "name": "compressor",
- "type": "AudioNode",
- "class": "p5.Compressor",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10084,
- "description": "<p>Performs the same function as .connect, but also accepts\noptional parameters to set compressor's audioParams</p>\n",
- "itemtype": "method",
- "name": "process",
- "params": [
- {
- "name": "src",
- "description": "<p>Sound source to be connected</p>\n",
- "type": "Object"
- },
- {
- "name": "attack",
- "description": "<p>The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "knee",
- "description": "<p>A decibel value representing the range above the\n threshold where the curve smoothly transitions to the \"ratio\" portion.\n default = 30, range 0 - 40</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "ratio",
- "description": "<p>The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "threshold",
- "description": "<p>The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "release",
- "description": "<p>The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Compressor",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10112,
- "description": "<p>Set the paramters of a compressor.</p>\n",
- "itemtype": "method",
- "name": "set",
- "params": [
- {
- "name": "attack",
- "description": "<p>The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1</p>\n",
- "type": "Number"
- },
- {
- "name": "knee",
- "description": "<p>A decibel value representing the range above the\n threshold where the curve smoothly transitions to the \"ratio\" portion.\n default = 30, range 0 - 40</p>\n",
- "type": "Number"
- },
- {
- "name": "ratio",
- "description": "<p>The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20</p>\n",
- "type": "Number"
- },
- {
- "name": "threshold",
- "description": "<p>The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0</p>\n",
- "type": "Number"
- },
- {
- "name": "release",
- "description": "<p>The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1</p>\n",
- "type": "Number"
- }
- ],
- "class": "p5.Compressor",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10152,
- "description": "<p>Get current attack or set value w/ time ramp</p>\n",
- "itemtype": "method",
- "name": "attack",
- "params": [
- {
- "name": "attack",
- "description": "<p>Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "time",
- "description": "<p>Assign time value to schedule the change in value</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Compressor",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10178,
- "description": "<p>Get current knee or set value w/ time ramp</p>\n",
- "itemtype": "method",
- "name": "knee",
- "params": [
- {
- "name": "knee",
- "description": "<p>A decibel value representing the range above the\n threshold where the curve smoothly transitions to the \"ratio\" portion.\n default = 30, range 0 - 40</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "time",
- "description": "<p>Assign time value to schedule the change in value</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Compressor",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10204,
- "description": "<p>Get current ratio or set value w/ time ramp</p>\n",
- "itemtype": "method",
- "name": "ratio",
- "params": [
- {
- "name": "ratio",
- "description": "<p>The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "time",
- "description": "<p>Assign time value to schedule the change in value</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Compressor",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10228,
- "description": "<p>Get current threshold or set value w/ time ramp</p>\n",
- "itemtype": "method",
- "name": "threshold",
- "params": [
- {
- "name": "threshold",
- "description": "<p>The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0</p>\n",
- "type": "Number"
- },
- {
- "name": "time",
- "description": "<p>Assign time value to schedule the change in value</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Compressor",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10252,
- "description": "<p>Get current release or set value w/ time ramp</p>\n",
- "itemtype": "method",
- "name": "release",
- "params": [
- {
- "name": "release",
- "description": "<p>The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1</p>\n",
- "type": "Number"
- },
- {
- "name": "time",
- "description": "<p>Assign time value to schedule the change in value</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Compressor",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10277,
- "description": "<p>Return the current reduction value</p>\n",
- "itemtype": "method",
- "name": "reduction",
- "return": {
- "description": "Value of the amount of gain reduction that is applied to the signal",
- "type": "Number"
- },
- "class": "p5.Compressor",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10419,
- "description": "<p>isDetected is set to true when a peak is detected.</p>\n",
- "itemtype": "attribute",
- "name": "isDetected",
- "type": "Boolean",
- "default": "false",
- "class": "p5.PeakDetect",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10432,
- "description": "<p>The update method is run in the draw loop.</p>\n<p>Accepts an FFT object. You must call .analyze()\non the FFT object prior to updating the peakDetect\nbecause it relies on a completed FFT analysis.</p>\n",
- "itemtype": "method",
- "name": "update",
- "params": [
- {
- "name": "fftObject",
- "description": "<p>A p5.FFT object</p>\n",
- "type": "p5.FFT"
- }
- ],
- "class": "p5.PeakDetect",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10470,
- "description": "<p>onPeak accepts two arguments: a function to call when\na peak is detected. The value of the peak,\nbetween 0.0 and 1.0, is passed to the callback.</p>\n",
- "itemtype": "method",
- "name": "onPeak",
- "params": [
- {
- "name": "callback",
- "description": "<p>Name of a function that will\n be called when a peak is\n detected.</p>\n",
- "type": "Function"
- },
- {
- "name": "val",
- "description": "<p>Optional value to pass\n into the function when\n a peak is detected.</p>\n",
- "type": "Object",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nvar cnv, soundFile, fft, peakDetect;\nvar ellipseWidth = 0;\n\nfunction preload() {\n soundFile = loadSound('assets/beat.mp3');\n}\n\nfunction setup() {\n cnv = createCanvas(100,100);\n textAlign(CENTER);\n\n fft = new p5.FFT();\n peakDetect = new p5.PeakDetect();\n\n setupSound();\n\n // when a beat is detected, call triggerBeat()\n peakDetect.onPeak(triggerBeat);\n}\n\nfunction draw() {\n background(0);\n fill(255);\n text('click to play', width/2, height/2);\n\n fft.analyze();\n peakDetect.update(fft);\n\n ellipseWidth *= 0.95;\n ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\n}\n\n// this function is called by peakDetect.onPeak\nfunction triggerBeat() {\n ellipseWidth = 50;\n}\n\n// mouseclick starts/stops sound\nfunction setupSound() {\n cnv.mouseClicked( function() {\n if (soundFile.isPlaying() ) {\n soundFile.stop();\n } else {\n soundFile.play();\n }\n });\n}\n</code></div>"
- ],
- "class": "p5.PeakDetect",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10676,
- "description": "<p>Connect a specific device to the p5.SoundRecorder.\nIf no parameter is given, p5.SoundRecorer will record\nall audible p5.sound from your sketch.</p>\n",
- "itemtype": "method",
- "name": "setInput",
- "params": [
- {
- "name": "unit",
- "description": "<p>p5.sound object or a web audio unit\n that outputs sound</p>\n",
- "type": "Object",
- "optional": true
- }
- ],
- "class": "p5.SoundRecorder",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10703,
- "description": "<p>Start recording. To access the recording, provide\na p5.SoundFile as the first parameter. The p5.SoundRecorder\nwill send its recording to that p5.SoundFile for playback once\nrecording is complete. Optional parameters include duration\n(in seconds) of the recording, and a callback function that\nwill be called once the complete recording has been\ntransfered to the p5.SoundFile.</p>\n",
- "itemtype": "method",
- "name": "record",
- "params": [
- {
- "name": "soundFile",
- "description": "<p>p5.SoundFile</p>\n",
- "type": "p5.SoundFile"
- },
- {
- "name": "duration",
- "description": "<p>Time (in seconds)</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "callback",
- "description": "<p>The name of a function that will be\n called once the recording completes</p>\n",
- "type": "Function",
- "optional": true
- }
- ],
- "class": "p5.SoundRecorder",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10739,
- "description": "<p>Stop the recording. Once the recording is stopped,\nthe results will be sent to the p5.SoundFile that\nwas given on .record(), and if a callback function\nwas provided on record, that function will be called.</p>\n",
- "itemtype": "method",
- "name": "stop",
- "class": "p5.SoundRecorder",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10864,
- "description": "<p>The p5.Distortion is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#WaveShaperNode\">\nWeb Audio WaveShaper Node</a>.</p>\n",
- "itemtype": "property",
- "name": "WaveShaperNode",
- "type": "AudioNode",
- "class": "p5.Distortion",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10883,
- "description": "<p>Process a sound source, optionally specify amount and oversample values.</p>\n",
- "itemtype": "method",
- "name": "process",
- "params": [
- {
- "name": "amount",
- "description": "<p>Unbounded distortion amount.\n Normal values range from 0-1.</p>\n",
- "type": "Number",
- "optional": true,
- "optdefault": "0.25"
- },
- {
- "name": "oversample",
- "description": "<p>'none', '2x', or '4x'.</p>\n",
- "type": "String",
- "optional": true,
- "optdefault": "'none'"
- }
- ],
- "class": "p5.Distortion",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10900,
- "description": "<p>Set the amount and oversample of the waveshaper distortion.</p>\n",
- "itemtype": "method",
- "name": "set",
- "params": [
- {
- "name": "amount",
- "description": "<p>Unbounded distortion amount.\n Normal values range from 0-1.</p>\n",
- "type": "Number",
- "optional": true,
- "optdefault": "0.25"
- },
- {
- "name": "oversample",
- "description": "<p>'none', '2x', or '4x'.</p>\n",
- "type": "String",
- "optional": true,
- "optdefault": "'none'"
- }
- ],
- "class": "p5.Distortion",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10923,
- "description": "<p>Return the distortion amount, typically between 0-1.</p>\n",
- "itemtype": "method",
- "name": "getAmount",
- "return": {
- "description": "Unbounded distortion amount.\n Normal values range from 0-1.",
- "type": "Number"
- },
- "class": "p5.Distortion",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 10937,
- "description": "<p>Return the oversampling.</p>\n",
- "itemtype": "method",
- "name": "getOversample",
- "return": {
- "description": "Oversample can either be 'none', '2x', or '4x'.",
- "type": "String"
- },
- "class": "p5.Distortion",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11055,
- "description": "<p>Connect a source to the gain node.</p>\n",
- "itemtype": "method",
- "name": "setInput",
- "params": [
- {
- "name": "src",
- "description": "<p>p5.sound / Web Audio object with a sound\n output.</p>\n",
- "type": "Object"
- }
- ],
- "class": "p5.Gain",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11070,
- "description": "<p>Send output to a p5.sound or web audio object</p>\n",
- "itemtype": "method",
- "name": "connect",
- "params": [
- {
- "name": "unit",
- "description": "",
- "type": "Object"
- }
- ],
- "class": "p5.Gain",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11084,
- "description": "<p>Disconnect all output.</p>\n",
- "itemtype": "method",
- "name": "disconnect",
- "class": "p5.Gain",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11098,
- "description": "<p>Set the output level of the gain node.</p>\n",
- "itemtype": "method",
- "name": "amp",
- "params": [
- {
- "name": "volume",
- "description": "<p>amplitude between 0 and 1.0</p>\n",
- "type": "Number"
- },
- {
- "name": "rampTime",
- "description": "<p>create a fade that lasts rampTime</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "timeFromNow",
- "description": "<p>schedule this event to happen\n seconds from now</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.Gain",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11181,
- "description": "<p>Connect to p5 objects or Web Audio Nodes</p>\n",
- "itemtype": "method",
- "name": "connect",
- "params": [
- {
- "name": "unit",
- "description": "",
- "type": "Object"
- }
- ],
- "class": "p5.AudioVoice",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11194,
- "description": "<p>Disconnect from soundOut</p>\n",
- "itemtype": "method",
- "name": "disconnect",
- "class": "p5.AudioVoice",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11322,
- "description": "<p>Getters and Setters</p>\n",
- "itemtype": "property",
- "name": "attack",
- "type": "Number",
- "class": "p5.MonoSynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11328,
- "itemtype": "property",
- "name": "decay",
- "type": "Number",
- "class": "p5.MonoSynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11333,
- "itemtype": "property",
- "name": "sustain",
- "type": "Number",
- "class": "p5.MonoSynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11338,
- "itemtype": "property",
- "name": "release",
- "type": "Number",
- "class": "p5.MonoSynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11379,
- "description": "<p>Play tells the MonoSynth to start playing a note. This method schedules\nthe calling of .triggerAttack and .triggerRelease.</p>\n",
- "itemtype": "method",
- "name": "play",
- "params": [
- {
- "name": "note",
- "description": "<p>the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format (\"C4\", \"Eb3\"...etc\")\n See <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n Tone</a>. Defaults to 440 hz.</p>\n",
- "type": "String | Number"
- },
- {
- "name": "velocity",
- "description": "<p>velocity of the note to play (ranging from 0 to 1)</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "secondsFromNow",
- "description": "<p>time from now (in seconds) at which to play</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "sustainTime",
- "description": "<p>time to sustain before releasing the envelope. Defaults to 0.15 seconds.</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n background(220);\n textAlign(CENTER);\n text('tap to play', width/2, height/2);\n\n monoSynth = new p5.MonoSynth();\n}\n\nfunction playSynth() {\n userStartAudio();\n\n let note = random(['Fb4', 'G4']);\n // note velocity (volume, from 0 to 1)\n let velocity = random();\n // time from now (in seconds)\n let time = 0;\n // note duration (in seconds)\n let dur = 1/6;\n\n monoSynth.play(note, velocity, time, dur);\n}\n</code></div>\n"
- ],
- "class": "p5.MonoSynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11431,
- "description": "<p>Trigger the Attack, and Decay portion of the Envelope.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go.</p>\n",
- "params": [
- {
- "name": "note",
- "description": "<p>the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format (\"C4\", \"Eb3\"...etc\")\n See <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n Tone</a>. Defaults to 440 hz</p>\n",
- "type": "String | Number"
- },
- {
- "name": "velocity",
- "description": "<p>velocity of the note to play (ranging from 0 to 1)</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "secondsFromNow",
- "description": "<p>time from now (in seconds) at which to play</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "itemtype": "method",
- "name": "triggerAttack",
- "example": [
- "\n<div><code>\nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(triggerAttack);\n background(220);\n text('tap here for attack, let go to release', 5, 20, width - 20);\n monoSynth = new p5.MonoSynth();\n}\n\nfunction triggerAttack() {\n userStartAudio();\n\n monoSynth.triggerAttack(\"E3\");\n}\n\nfunction mouseReleased() {\n monoSynth.triggerRelease();\n}\n</code></div>"
- ],
- "class": "p5.MonoSynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11478,
- "description": "<p>Trigger the release of the Envelope. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.</p>\n",
- "params": [
- {
- "name": "secondsFromNow",
- "description": "<p>time to trigger the release</p>\n",
- "type": "Number"
- }
- ],
- "itemtype": "method",
- "name": "triggerRelease",
- "example": [
- "\n<div><code>\nlet monoSynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(triggerAttack);\n background(220);\n text('tap here for attack, let go to release', 5, 20, width - 20);\n monoSynth = new p5.MonoSynth();\n}\n\nfunction triggerAttack() {\n userStartAudio();\n\n monoSynth.triggerAttack(\"E3\");\n}\n\nfunction mouseReleased() {\n monoSynth.triggerRelease();\n}\n</code></div>"
- ],
- "class": "p5.MonoSynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11516,
- "description": "<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n",
- "itemtype": "method",
- "name": "setADSR",
- "params": [
- {
- "name": "attackTime",
- "description": "<p>Time (in seconds before envelope\n reaches Attack Level</p>\n",
- "type": "Number"
- },
- {
- "name": "decayTime",
- "description": "<p>Time (in seconds) before envelope\n reaches Decay/Sustain Level</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "susRatio",
- "description": "<p>Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using <code>setRange</code>),\n then decayLevel would increase proportionally, to become 0.5.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "releaseTime",
- "description": "<p>Time in seconds from now (defaults to 0)</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.MonoSynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11544,
- "description": "<p>MonoSynth amp</p>\n",
- "itemtype": "method",
- "name": "amp",
- "params": [
- {
- "name": "vol",
- "description": "<p>desired volume</p>\n",
- "type": "Number"
- },
- {
- "name": "rampTime",
- "description": "<p>Time to reach new volume</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "return": {
- "description": "new volume value",
- "type": "Number"
- },
- "class": "p5.MonoSynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11564,
- "description": "<p>Connect to a p5.sound / Web Audio object.</p>\n",
- "itemtype": "method",
- "name": "connect",
- "params": [
- {
- "name": "unit",
- "description": "<p>A p5.sound or Web Audio object</p>\n",
- "type": "Object"
- }
- ],
- "class": "p5.MonoSynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11578,
- "description": "<p>Disconnect all outputs</p>\n",
- "itemtype": "method",
- "name": "disconnect",
- "class": "p5.MonoSynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11592,
- "description": "<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n",
- "itemtype": "method",
- "name": "dispose",
- "class": "p5.MonoSynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11742,
- "description": "<p>An object that holds information about which notes have been played and\nwhich notes are currently being played. New notes are added as keys\non the fly. While a note has been attacked, but not released, the value of the\nkey is the audiovoice which is generating that note. When notes are released,\nthe value of the key becomes undefined.</p>\n",
- "itemtype": "property",
- "name": "notes",
- "class": "p5.PolySynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11755,
- "description": "<p>A PolySynth must have at least 1 voice, defaults to 8</p>\n",
- "itemtype": "property",
- "name": "polyvalue",
- "class": "p5.PolySynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11761,
- "description": "<p>Monosynth that generates the sound for each note that is triggered. The\np5.PolySynth defaults to using the p5.MonoSynth as its voice.</p>\n",
- "itemtype": "property",
- "name": "AudioVoice",
- "class": "p5.PolySynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11800,
- "description": "<p>Play a note by triggering noteAttack and noteRelease with sustain time</p>\n",
- "itemtype": "method",
- "name": "play",
- "params": [
- {
- "name": "note",
- "description": "<p>midi note to play (ranging from 0 to 127 - 60 being a middle C)</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "velocity",
- "description": "<p>velocity of the note to play (ranging from 0 to 1)</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "secondsFromNow",
- "description": "<p>time from now (in seconds) at which to play</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "sustainTime",
- "description": "<p>time to sustain before releasing the envelope</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet polySynth;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSynth);\n background(220);\n text('click to play', 20, 20);\n\n polySynth = new p5.PolySynth();\n}\n\nfunction playSynth() {\n userStartAudio();\n\n // note duration (in seconds)\n let dur = 1.5;\n\n // time from now (in seconds)\n let time = 0;\n\n // velocity (volume, from 0 to 1)\n let vel = 0.1;\n\n // notes can overlap with each other\n polySynth.play('G2', vel, 0, dur);\n polySynth.play('C3', vel, time += 1/3, dur);\n polySynth.play('G3', vel, time += 1/3, dur);\n}\n</code></div>"
- ],
- "class": "p5.PolySynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11849,
- "description": "<p>noteADSR sets the envelope for a specific note that has just been triggered.\nUsing this method modifies the envelope of whichever audiovoice is being used\nto play the desired note. The envelope should be reset before noteRelease is called\nin order to prevent the modified envelope from being used on other notes.</p>\n",
- "itemtype": "method",
- "name": "noteADSR",
- "params": [
- {
- "name": "note",
- "description": "<p>Midi note on which ADSR should be set.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "attackTime",
- "description": "<p>Time (in seconds before envelope\n reaches Attack Level</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "decayTime",
- "description": "<p>Time (in seconds) before envelope\n reaches Decay/Sustain Level</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "susRatio",
- "description": "<p>Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using <code>setRange</code>),\n then decayLevel would increase proportionally, to become 0.5.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "releaseTime",
- "description": "<p>Time in seconds from now (defaults to 0)</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.PolySynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11881,
- "description": "<p>Set the PolySynths global envelope. This method modifies the envelopes of each\nmonosynth so that all notes are played with this envelope.</p>\n",
- "itemtype": "method",
- "name": "setADSR",
- "params": [
- {
- "name": "attackTime",
- "description": "<p>Time (in seconds before envelope\n reaches Attack Level</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "decayTime",
- "description": "<p>Time (in seconds) before envelope\n reaches Decay/Sustain Level</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "susRatio",
- "description": "<p>Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using <code>setRange</code>),\n then decayLevel would increase proportionally, to become 0.5.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "releaseTime",
- "description": "<p>Time in seconds from now (defaults to 0)</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "class": "p5.PolySynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 11909,
- "description": "<p>Trigger the Attack, and Decay portion of a MonoSynth.\nSimilar to holding down a key on a piano, but it will\nhold the sustain level until you let go.</p>\n",
- "itemtype": "method",
- "name": "noteAttack",
- "params": [
- {
- "name": "note",
- "description": "<p>midi note on which attack should be triggered.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "velocity",
- "description": "<p>velocity of the note to play (ranging from 0 to 1)/</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "secondsFromNow",
- "description": "<p>time from now (in seconds)</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet polySynth = new p5.PolySynth();\nlet pitches = ['G', 'D', 'G', 'C'];\nlet octaves = [2, 3, 4];\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playChord);\n background(220);\n text('tap to play', 20, 20);\n}\n\nfunction playChord() {\n userStartAudio();\n\n // play a chord: multiple notes at the same time\n for (let i = 0; i < 4; i++) {\n let note = random(pitches) + random(octaves);\n polySynth.noteAttack(note, 0.1);\n }\n}\n\nfunction mouseReleased() {\n // release all voices\n polySynth.noteRelease();\n}\n</code></div>"
- ],
- "class": "p5.PolySynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 12021,
- "description": "<p>Trigger the Release of an AudioVoice note. This is similar to releasing\nthe key on a piano and letting the sound fade according to the\nrelease level and release time.</p>\n",
- "itemtype": "method",
- "name": "noteRelease",
- "params": [
- {
- "name": "note",
- "description": "<p>midi note on which attack should be triggered.\n If no value is provided, all notes will be released.</p>\n",
- "type": "Number",
- "optional": true
- },
- {
- "name": "secondsFromNow",
- "description": "<p>time to trigger the release</p>\n",
- "type": "Number",
- "optional": true
- }
- ],
- "example": [
- "\n<div><code>\nlet polySynth = new p5.PolySynth();\nlet pitches = ['G', 'D', 'G', 'C'];\nlet octaves = [2, 3, 4];\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playChord);\n background(220);\n text('tap to play', 20, 20);\n}\n\nfunction playChord() {\n userStartAudio();\n\n // play a chord: multiple notes at the same time\n for (let i = 0; i < 4; i++) {\n let note = random(pitches) + random(octaves);\n polySynth.noteAttack(note, 0.1);\n }\n}\n\nfunction mouseReleased() {\n // release all voices\n polySynth.noteRelease();\n}\n</code></div>\n"
- ],
- "class": "p5.PolySynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 12105,
- "description": "<p>Connect to a p5.sound / Web Audio object.</p>\n",
- "itemtype": "method",
- "name": "connect",
- "params": [
- {
- "name": "unit",
- "description": "<p>A p5.sound or Web Audio object</p>\n",
- "type": "Object"
- }
- ],
- "class": "p5.PolySynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 12119,
- "description": "<p>Disconnect all outputs</p>\n",
- "itemtype": "method",
- "name": "disconnect",
- "class": "p5.PolySynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- },
- {
- "file": "lib/addons/p5.sound.js",
- "line": 12133,
- "description": "<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n",
- "itemtype": "method",
- "name": "dispose",
- "class": "p5.PolySynth",
- "module": "p5.sound",
- "submodule": "p5.sound"
- }
- ],
- "warnings": [
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/core/friendly_errors/fes_core.js:123"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/core/friendly_errors/fes_core.js:223"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/core/friendly_errors/fes_core.js:323"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/core/friendly_errors/fes_core.js:464"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/core/friendly_errors/fes_core.js:1018"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/core/friendly_errors/sketch_reader.js:243"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/core/friendly_errors/sketch_reader.js:268"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/core/friendly_errors/validate_params.js:336"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/core/environment.js:590"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/core/environment.js:621"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/core/environment.js:652"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/core/environment.js:680"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/core/environment.js:708"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/core/environment.js:708"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/core/environment.js:1059"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/core/environment.js:1078"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/core/environment.js:1208"
- },
- {
- "message": "replacing incorrect tag: function with method",
- "line": " src/core/internationalization.js:105"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/core/internationalization.js:105"
- },
- {
- "message": "unknown tag: name",
- "line": " src/core/p5.Element.js:56"
- },
- {
- "message": "unknown tag: name",
- "line": " src/core/p5.Element.js:87"
- },
- {
- "message": "unknown tag: name",
- "line": " src/core/p5.Element.js:94"
- },
- {
- "message": "unknown tag: name",
- "line": " src/core/p5.Element.js:102"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/core/p5.Element.js:966"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/core/structure.js:224"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/dom/dom.js:2636"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/dom/dom.js:2722"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/dom/dom.js:2893"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/dom/dom.js:2980"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/dom/dom.js:3118"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/image/loading_displaying.js:761"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/image/loading_displaying.js:794"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/image/loading_displaying.js:828"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/image/loading_displaying.js:871"
- },
- {
- "message": "unknown tag: name",
- "line": " src/image/p5.Image.js:114"
- },
- {
- "message": "unknown tag: name",
- "line": " src/image/p5.Image.js:151"
- },
- {
- "message": "unknown tag: name",
- "line": " src/image/p5.Image.js:198"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/image/p5.Image.js:299"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/image/pixels.js:706"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/io/files.js:986"
- },
- {
- "message": "unknown tag: name",
- "line": " src/io/p5.Table.js:43"
- },
- {
- "message": "unknown tag: name",
- "line": " src/io/p5.Table.js:80"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/math/calculation.js:1048"
- },
- {
- "message": "unknown tag: name",
- "line": " src/math/p5.Vector.js:113"
- },
- {
- "message": "unknown tag: name",
- "line": " src/math/p5.Vector.js:120"
- },
- {
- "message": "unknown tag: name",
- "line": " src/math/p5.Vector.js:127"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/math/trigonometry.js:775"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/math/trigonometry.js:790"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/math/trigonometry.js:805"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/math/trigonometry.js:820"
- },
- {
- "message": "unknown tag: name",
- "line": " src/typography/p5.Font.js:51"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/3d_primitives.js:266"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/3d_primitives.js:520"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/GeometryBuilder.js:122"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/material.js:173"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/material.js:540"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/material.js:886"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/material.js:1197"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/material.js:1292"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/material.js:1355"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/webgl/p5.Camera.js:2472"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.Framebuffer.js:297"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.Framebuffer.js:402"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.Framebuffer.js:892"
- },
- {
- "message": "unknown tag: name",
- "line": " src/webgl/p5.Geometry.js:252"
- },
- {
- "message": "unknown tag: name",
- "line": " src/webgl/p5.Geometry.js:375"
- },
- {
- "message": "unknown tag: name",
- "line": " src/webgl/p5.Geometry.js:505"
- },
- {
- "message": "unknown tag: name",
- "line": " src/webgl/p5.Geometry.js:591"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.Geometry.js:682"
- },
- {
- "message": "param name missing: {Number}",
- "line": " src/webgl/p5.Matrix.js:754"
- },
- {
- "message": "param name missing: {p5.Vector}",
- "line": " src/webgl/p5.Matrix.js:773"
- },
- {
- "message": "param name missing: {p5.Vector}",
- "line": " src/webgl/p5.Matrix.js:788"
- },
- {
- "message": "param name missing: {p5.Vector}",
- "line": " src/webgl/p5.Matrix.js:806"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.RendererGL.Immediate.js:320"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.RendererGL.Retained.js:19"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/webgl/p5.RendererGL.js:118"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.RendererGL.js:318"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.RendererGL.js:389"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.RendererGL.js:702"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.RendererGL.js:720"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/webgl/p5.RendererGL.js:948"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/webgl/p5.RendererGL.js:989"
- },
- {
- "message": "unknown tag: alt",
- "line": " src/webgl/p5.RendererGL.js:1304"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.RendererGL.js:1418"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.RendererGL.js:1947"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.RendererGL.js:2197"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.Shader.js:233"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.Shader.js:340"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/p5.Shader.js:574"
- },
- {
- "message": "replacing incorrect tag: function with method",
- "line": " src/webgl/text.js:118"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/text.js:162"
- },
- {
- "message": "replacing incorrect tag: function with method",
- "line": " src/webgl/text.js:194"
- },
- {
- "message": "replacing incorrect tag: function with method",
- "line": " src/webgl/text.js:206"
- },
- {
- "message": "replacing incorrect tag: function with method",
- "line": " src/webgl/text.js:255"
- },
- {
- "message": "replacing incorrect tag: function with method",
- "line": " src/webgl/text.js:269"
- },
- {
- "message": "replacing incorrect tag: function with method",
- "line": " src/webgl/text.js:408"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " src/webgl/text.js:408"
- },
- {
- "message": "replacing incorrect tag: function with method",
- "line": " src/webgl/text.js:476"
- },
- {
- "message": "replacing incorrect tag: function with method",
- "line": " src/webgl/text.js:491"
- },
- {
- "message": "replacing incorrect tag: function with method",
- "line": " src/webgl/text.js:576"
- },
- {
- "message": "replacing incorrect tag: params with param",
- "line": " lib/addons/p5.sound.js:2381"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " lib/addons/p5.sound.js:2381"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " lib/addons/p5.sound.js:2882"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " lib/addons/p5.sound.js:4271"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " lib/addons/p5.sound.js:4360"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " lib/addons/p5.sound.js:4386"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " lib/addons/p5.sound.js:4460"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " lib/addons/p5.sound.js:6280"
- },
- {
- "message": "replacing incorrect tag: returns with return",
- "line": " lib/addons/p5.sound.js:8116"
- },
- {
- "message": "Missing item type\nConversions adapted from <http://www.easyrgb.com/en/math.php>.\n\nIn these functions, hue is always in the range [0, 1], just like all other\ncomponents are in the range [0, 1]. 'Brightness' and 'value' are used\ninterchangeably.",
- "line": " src/color/color_conversion.js:8"
- },
- {
- "message": "Missing item type\nConvert an HSBA array to HSLA.",
- "line": " src/color/color_conversion.js:18"
- },
- {
- "message": "Missing item type\nConvert an HSBA array to RGBA.",
- "line": " src/color/color_conversion.js:44"
- },
- {
- "message": "Missing item type\nConvert an HSLA array to HSBA.",
- "line": " src/color/color_conversion.js:99"
- },
- {
- "message": "Missing item type\nConvert an HSLA array to RGBA.\n\nWe need to change basis from HSLA to something that can be more easily be\nprojected onto RGBA. We will choose hue and brightness as our first two\ncomponents, and pick a convenient third one ('zest') so that we don't need\nto calculate formal HSBA saturation.",
- "line": " src/color/color_conversion.js:122"
- },
- {
- "message": "Missing item type\nConvert an RGBA array to HSBA.",
- "line": " src/color/color_conversion.js:186"
- },
- {
- "message": "Missing item type\nConvert an RGBA array to HSLA.",
- "line": " src/color/color_conversion.js:225"
- },
- {
- "message": "Missing item type\nCSS named colors.",
- "line": " src/color/p5.Color.js:14"
- },
- {
- "message": "Missing item type\nThese regular expressions are used to build up the patterns for matching\nviable CSS color strings: fragmenting the regexes in this way increases the\nlegibility and comprehensibility of the code.\n\nNote that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.",
- "line": " src/color/p5.Color.js:168"
- },
- {
- "message": "Missing item type\nFull color string patterns. The capture groups are necessary.",
- "line": " src/color/p5.Color.js:181"
- },
- {
- "message": "Missing item type\nHue is the same in HSB and HSL, but the maximum value may be different.\nThis function will return the HSB-normalized saturation when supplied with\nan HSB color object, but will default to the HSL-normalized saturation\notherwise.",
- "line": " src/color/p5.Color.js:789"
- },
- {
- "message": "Missing item type\nSaturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object, but will default\nto the HSL saturation otherwise.",
- "line": " src/color/p5.Color.js:820"
- },
- {
- "message": "Missing item type\nFor a number of different inputs, returns a color formatted as [r, g, b, a]\narrays, with each component normalized between 0 and 1.",
- "line": " src/color/p5.Color.js:838"
- },
- {
- "message": "Missing item type\nFor HSB and HSL, interpret the gray level as a brightness/lightness\nvalue (they are equivalent when chroma is zero). For RGB, normalize the\ngray level according to the blue maximum.",
- "line": " src/color/p5.Color.js:1048"
- },
- {
- "message": "Missing item type",
- "line": " src/core/friendly_errors/fes_core.js:1"
- },
- {
- "message": "Missing item type\nPrints out all the colors in the color pallete with white text.\nFor color blindness testing.",
- "line": " src/core/friendly_errors/fes_core.js:932"
- },
- {
- "message": "Missing item type",
- "line": " src/core/friendly_errors/file_errors.js:1"
- },
- {
- "message": "Missing item type",
- "line": " src/core/friendly_errors/sketch_reader.js:1"
- },
- {
- "message": "Missing item type",
- "line": " src/core/friendly_errors/stacktrace.js:1"
- },
- {
- "message": "Missing item type\nGiven an Error object, extract the most information from it.",
- "line": " src/core/friendly_errors/stacktrace.js:32"
- },
- {
- "message": "Missing item type",
- "line": " src/core/friendly_errors/validate_params.js:1"
- },
- {
- "message": "Missing item type\nThis function does 3 things:\n\n 1. Bounds the desired start/stop angles for an arc (in radians) so that:\n\n 0 <= start < TWO_PI ; start <= stop < start + TWO_PI\n\n This means that the arc rendering functions don't have to be concerned\n with what happens if stop is smaller than start, or if the arc 'goes\n round more than once', etc.: they can just start at start and increase\n until stop and the correct arc will be drawn.\n\n 2. Optionally adjusts the angles within each quadrant to counter the naive\n scaling of the underlying ellipse up from the unit circle. Without\n this, the angles become arbitrary when width != height: 45 degrees\n might be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on\n a 'tall' ellipse.\n\n 3. Flags up when start and stop correspond to the same place on the\n underlying ellipse. This is useful if you want to do something special\n there (like rendering a whole ellipse instead).",
- "line": " src/core/shape/2d_primitives.js:16"
- },
- {
- "message": "Missing item type\nReturns the current framerate.",
- "line": " src/core/environment.js:421"
- },
- {
- "message": "Missing item type\nSpecifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within <a href=\"#/p5/setup\">setup()</a> is\nrecommended. The default rate is 60 frames per second.\n\nCalling `frameRate()` with no arguments returns the current frame rate.",
- "line": " src/core/environment.js:431"
- },
- {
- "message": "Missing item type\nCalled upon each p5 instantiation instead of module import due to the\npossibility of the window being resized when no sketch is active.",
- "line": " src/core/environment.js:803"
- },
- {
- "message": "Missing item type",
- "line": " src/core/helpers.js:1"
- },
- {
- "message": "Missing item type\n_globalInit\n\nTODO: ???\nif sketch is on window\nassume \"global\" mode\nand instantiate p5 automatically\notherwise do nothing",
- "line": " src/core/init.js:4"
- },
- {
- "message": "Missing item type\nThis is our i18next \"backend\" plugin. It tries to fetch languages\nfrom a CDN.",
- "line": " src/core/internationalization.js:30"
- },
- {
- "message": "Missing item type\nSet up our translation function, with loaded languages",
- "line": " src/core/internationalization.js:126"
- },
- {
- "message": "Missing item type\nReturns a list of languages we have translations loaded for",
- "line": " src/core/internationalization.js:171"
- },
- {
- "message": "Missing item type\nReturns the current language selected for translation",
- "line": " src/core/internationalization.js:178"
- },
- {
- "message": "Missing item type\nSets the current language for translation\nReturns a promise that resolved when loading is finished,\nor rejects if it fails.",
- "line": " src/core/internationalization.js:185"
- },
- {
- "message": "Missing item type",
- "line": " src/core/legacy.js:1"
- },
- {
- "message": "Missing item type",
- "line": " src/core/p5.Element.js:87"
- },
- {
- "message": "Missing item type",
- "line": " src/core/p5.Element.js:966"
- },
- {
- "message": "Missing item type",
- "line": " src/core/p5.Element.js:985"
- },
- {
- "message": "Missing item type",
- "line": " src/core/p5.Element.js:1002"
- },
- {
- "message": "Missing item type\nHelper fxn for sharing pixel methods",
- "line": " src/core/p5.Element.js:1015"
- },
- {
- "message": "Missing item type\nResize our canvas element.",
- "line": " src/core/p5.Renderer.js:120"
- },
- {
- "message": "Missing item type\nHelper function to check font type (system or otf)",
- "line": " src/core/p5.Renderer.js:468"
- },
- {
- "message": "Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178",
- "line": " src/core/p5.Renderer.js:520"
- },
- {
- "message": "Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer",
- "line": " src/core/p5.Renderer2D.js:6"
- },
- {
- "message": "Missing item type\nargs[0] is expected to be renderer\nargs[1] is expected to be canvas",
- "line": " src/core/rendering.js:483"
- },
- {
- "message": "Missing item type\nprivate helper function to handle the user passing in objects\nduring construction or calls to create()",
- "line": " src/data/p5.TypedDict.js:198"
- },
- {
- "message": "Missing item type\nprivate helper function to ensure that the user passed in valid\nvalues for the Dictionary type",
- "line": " src/data/p5.TypedDict.js:388"
- },
- {
- "message": "Missing item type\nprivate helper function to ensure that the user passed in valid\nvalues for the Dictionary type",
- "line": " src/data/p5.TypedDict.js:430"
- },
- {
- "message": "Missing item type\nprivate helper function for finding lowest or highest value\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'",
- "line": " src/data/p5.TypedDict.js:543"
- },
- {
- "message": "Missing item type\nprivate helper function for finding lowest or highest key\nthe argument 'flip' is used to flip the comparison arrow\nfrom 'less than' to 'greater than'",
- "line": " src/data/p5.TypedDict.js:607"
- },
- {
- "message": "Missing item type\nHelper function for select and selectAll",
- "line": " src/dom/dom.js:206"
- },
- {
- "message": "Missing item type\nHelper function for getElement and getElements.",
- "line": " src/dom/dom.js:221"
- },
- {
- "message": "Missing item type\nHelpers for create methods.",
- "line": " src/dom/dom.js:478"
- },
- {
- "message": "Missing item type",
- "line": " src/dom/dom.js:787"
- },
- {
- "message": "Missing item type",
- "line": " src/dom/dom.js:2068"
- },
- {
- "message": "Missing item type",
- "line": " src/dom/dom.js:2211"
- },
- {
- "message": "Missing item type",
- "line": " src/dom/dom.js:2259"
- },
- {
- "message": "Missing item type",
- "line": " src/dom/dom.js:4081"
- },
- {
- "message": "Missing item type",
- "line": " src/dom/dom.js:5093"
- },
- {
- "message": "Missing item type",
- "line": " src/dom/dom.js:5164"
- },
- {
- "message": "Missing item type\n_updatePAccelerations updates the pAcceleration values",
- "line": " src/events/acceleration.js:120"
- },
- {
- "message": "Missing item type\nThe onblur function is called when the user is no longer focused\non the p5 element. Because the keyup events will not fire if the user is\nnot focused on the element we must assume all keys currently down have\nbeen released.",
- "line": " src/events/keyboard.js:799"
- },
- {
- "message": "Missing item type\nThe _areDownKeys function returns a boolean true if any keys pressed\nand a false if no keys are currently pressed.\n\nHelps avoid instances where multiple keys are pressed simultaneously and\nreleasing a single key will then switch the\nkeyIsPressed property to true.",
- "line": " src/events/keyboard.js:925"
- },
- {
- "message": "Missing item type\nThis module defines the filters for use with image buffers.\n\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.\n\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.\n\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.",
- "line": " src/image/filters.js:1"
- },
- {
- "message": "Missing item type\nReturns the pixel buffer for a canvas.",
- "line": " src/image/filters.js:22"
- },
- {
- "message": "Missing item type\nReturns a 32-bit number containing ARGB data at the ith pixel in the\n1D array containing pixels data.",
- "line": " src/image/filters.js:65"
- },
- {
- "message": "Missing item type\nModifies pixels RGBA values to values contained in the data object.",
- "line": " src/image/filters.js:88"
- },
- {
- "message": "Missing item type\nReturns the ImageData object for a canvas.\nhttps://developer.mozilla.org/en-US/docs/Web/API/ImageData",
- "line": " src/image/filters.js:109"
- },
- {
- "message": "Missing item type\nReturns a blank ImageData object.",
- "line": " src/image/filters.js:130"
- },
- {
- "message": "Missing item type\nApplys a filter function to a canvas.\n\nThe difference between this and the actual filter functions defined below\nis that the filter functions generally modify the pixel buffer but do\nnot actually put that data back to the canvas (where it would actually\nupdate what is visible). By contrast this method does make the changes\nactually visible in the canvas.\n\nThe apply method is the method that callers of this module would generally\nuse. It has been separated from the actual filters to support an advanced\nuse case of creating a filter chain that executes without actually updating\nthe canvas in between everystep.",
- "line": " src/image/filters.js:145"
- },
- {
- "message": "Missing item type\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.\n\nBorrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/",
- "line": " src/image/filters.js:200"
- },
- {
- "message": "Missing item type\nConverts any colors in the image to grayscale equivalents.\nNo parameter is used.\n\nBorrowed from http://www.html5rocks.com/en/tutorials/canvas/imagefilters/",
- "line": " src/image/filters.js:233"
- },
- {
- "message": "Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.",
- "line": " src/image/filters.js:256"
- },
- {
- "message": "Missing item type\nSets each pixel to its inverse value. No parameter is used.",
- "line": " src/image/filters.js:272"
- },
- {
- "message": "Missing item type\nLimits each channel of the image to the number of colors specified as\nthe parameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.\n\nAdapted from java based processing implementation",
- "line": " src/image/filters.js:287"
- },
- {
- "message": "Missing item type\nIncreases the bright areas in an image.",
- "line": " src/image/filters.js:319"
- },
- {
- "message": "Missing item type\nReduces the bright areas in an image.\nSimilar to `dilate()`, but updates the output color based on the lowest luminance value.",
- "line": " src/image/filters.js:411"
- },
- {
- "message": "Missing item type\nThis module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> class\nfor drawing images to the main display canvas.",
- "line": " src/image/image.js:8"
- },
- {
- "message": "Missing item type\nHelper function for loading GIF-based images",
- "line": " src/image/loading_displaying.js:639"
- },
- {
- "message": "Missing item type",
- "line": " src/image/loading_displaying.js:761"
- },
- {
- "message": "Missing item type",
- "line": " src/image/loading_displaying.js:794"
- },
- {
- "message": "Missing item type",
- "line": " src/image/loading_displaying.js:828"
- },
- {
- "message": "Missing item type\nValidates clipping params. Per drawImage spec sWidth and sHight cannot be\nnegative or greater than image intrinsic width and height",
- "line": " src/image/loading_displaying.js:871"
- },
- {
- "message": "Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.",
- "line": " src/image/loading_displaying.js:1384"
- },
- {
- "message": "Missing item type\nThis module defines the <a href=\"#/p5.Image\">p5.Image</a> class and P5 methods for\ndrawing images to the main display canvas.",
- "line": " src/image/p5.Image.js:9"
+ "name": "magSq",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3644,
+ "itemtype": "method",
+ "description": "Calculates the magnitude (length) of the vector squared.",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector object.\n let p = createVector(30, 40);\n\n // Draw a line from the origin.\n line(0, 0, p.x, p.y);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the vector's magnitude squared.\n let m = p.magSq();\n text(m, p.x, p.y);\n\n 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.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "squared magnitude of the vector.",
+ "type": "Number"
+ }
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "vecT",
+ "description": "the vector to return the squared magnitude of",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "the squared magnitude of vecT",
+ "type": "Number"
+ }
+ }
+ ],
+ "return": {
+ "description": "squared magnitude of the vector.",
+ "type": "Number"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nHelper function for animating GIF-based images with time",
- "line": " src/image/p5.Image.js:342"
+ "name": "dot",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3531,
+ "itemtype": "method",
+ "description": "<p>Calculates the dot product of two vectors.</p>\n<p>The dot product is a number that describes the overlap between two vectors.\nVisually, the dot product can be thought of as the \"shadow\" one vector\ncasts on another. The dot product's magnitude is largest when two vectors\npoint in the same or opposite directions. Its magnitude is 0 when two\nvectors form a right angle.</p>\n<p>The version of <code>dot()</code> with one parameter interprets it as another\n<a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n<p>The version of <code>dot()</code> with multiple parameters interprets them as the\n<code>x</code>, <code>y</code>, and <code>z</code> components of another vector.</p>\n<p>The static version of <code>dot()</code>, as in <code>p5.Vector.dot(v1, v2)</code>, is the same\nas calling <code>v1.dot(v2)</code>.</p>\n",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(3, 4);\n let v2 = createVector(3, 0);\n\n // Calculate the dot product.\n let dp = v1.dot(v2);\n\n // Prints \"9\" to the console.\n print(dp);\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(0, 1);\n\n // Calculate the dot product.\n let dp = p5.Vector.dot(v1, v2);\n\n // Prints \"0\" to the console.\n print(dp);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Center.\n let v0 = createVector(50, 50);\n\n // Draw the black arrow.\n let v1 = createVector(30, 0);\n drawArrow(v0, v1, 'black');\n\n // Draw the red arrow.\n let v2 = createVector(mouseX - 50, mouseY - 50);\n drawArrow(v0, v2, 'red');\n\n // Display the dot product.\n let dp = v2.dot(v1);\n text(`v2 • v1 = ${dp}`, 10, 20);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x component of the vector.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "dot product.",
+ "type": "Number"
+ }
+ },
+ {
+ "params": [
+ {
+ "name": "v",
+ "description": "<a href=\"#/p5.Vector\">p5.Vector</a> to be dotted.",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "Number"
+ }
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v1",
+ "description": "first <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "v2",
+ "description": "second <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "dot product.",
+ "type": "Number"
+ }
+ }
+ ],
+ "return": {
+ "description": "dot product.",
+ "type": "Number"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nHelper fxn for sharing pixel methods",
- "line": " src/image/p5.Image.js:373"
+ "name": "cross",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3544,
+ "itemtype": "method",
+ "description": "<p>Calculates the cross product of two vectors.</p>\n<p>The cross product is a vector that points straight out of the plane created\nby two vectors. The cross product's magnitude is the area of the parallelogram\nformed by the original two vectors.</p>\n<p>The static version of <code>cross()</code>, as in <code>p5.Vector.cross(v1, v2)</code>, is the same\nas calling <code>v1.cross(v2)</code>.</p>\n",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(3, 4);\n\n // Calculate the cross product.\n let cp = v1.cross(v2);\n\n // Prints \"p5.Vector Object : [0, 0, 4]\" to the console.\n print(cp.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v1 = createVector(1, 0);\n let v2 = createVector(3, 4);\n\n // Calculate the cross product.\n let cp = p5.Vector.cross(v1, v2);\n\n // Prints \"p5.Vector Object : [0, 0, 4]\" to the console.\n print(cp.toString());\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "v",
+ "description": "<a href=\"#/p5.Vector\">p5.Vector</a> to be crossed.",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "cross product as a <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
+ }
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v1",
+ "description": "first <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "v2",
+ "description": "second <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "cross product.",
+ "type": "Number"
+ }
+ }
+ ],
+ "return": {
+ "description": "cross product as a <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nGenerate a blob of file data as a url to prepare for download.\nAccepts an array of data, a filename, and an extension (optional).\nThis is a private function because it does not do any formatting,\nbut it is used by <a href=\"#/p5/saveStrings\">saveStrings</a>, <a href=\"#/p5/saveJSON\">saveJSON</a>, <a href=\"#/p5/saveTable\">saveTable</a> etc.",
- "line": " src/io/files.js:2407"
+ "name": "normalize",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3657,
+ "itemtype": "method",
+ "description": "<p>Scales the components of a <a href=\"#/p5.Vector\">p5.Vector</a> object so\nthat its magnitude is 1.</p>\n<p>The static version of <code>normalize()</code>, as in <code>p5.Vector.normalize(v)</code>,\nreturns a new <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change\nthe original.</p>\n",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector.\n let v = createVector(10, 20, 2);\n\n // Normalize.\n v.normalize();\n\n // Prints \"p5.Vector Object : [0.445..., 0.890..., 0.089...]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Vector.\n let v0 = createVector(10, 20, 2);\n\n // Create a normalized copy.\n let v1 = p5.Vector.normalize(v0);\n\n // Prints \"p5.Vector Object : [10, 20, 2]\" to the console.\n print(v0.toString());\n // Prints \"p5.Vector Object : [0.445..., 0.890..., 0.089...]\" to the console.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.\");\n}\n\nfunction draw() {\n background(240);\n\n // Vector to the center.\n let v0 = createVector(50, 50);\n\n // Vector from the center to the mouse.\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n // Circle's radius.\n let r = 25;\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n v1.normalize();\n drawArrow(v0, v1.mult(r), 'blue');\n\n // Draw the circle.\n noFill();\n circle(50, 50, r * 2);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "normalized <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
+ }
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v",
+ "description": "The vector to normalize",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "target",
+ "description": "The vector to receive the result",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "The vector v, normalized to a length of 1",
+ "type": "p5.Vector"
+ }
+ }
+ ],
+ "return": {
+ "description": "normalized <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nReturns a file extension, or another string\nif the provided parameter has no extension.",
- "line": " src/io/files.js:2475"
+ "name": "limit",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3683,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Limits a vector's magnitude to a maximum value.</p>\n<p>The static version of <code>limit()</code>, as in <code>p5.Vector.limit(v, 5)</code>, returns a\nnew <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginal.</p>\n",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(10, 20, 2);\n\n // Limit its magnitude.\n v.limit(5);\n\n // Prints \"p5.Vector Object : [2.227..., 4.454..., 0.445...]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(10, 20, 2);\n\n // Create a copy an limit its magintude.\n let v1 = p5.Vector.limit(v0, 5);\n\n // Prints \"p5.Vector Object : [2.227..., 4.454..., 0.445...]\" to the console.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.\");\n}\nfunction draw() {\n background(240);\n\n // Vector to the center.\n let v0 = createVector(50, 50);\n\n // Vector from the center to the mouse.\n let v1 = createVector(mouseX - 50, mouseY - 50);\n\n // Circle's radius.\n let r = 25;\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v1.limit(r), 'blue');\n\n // Draw the circle.\n noFill();\n circle(50, 50, r * 2);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "max",
+ "description": "maximum magnitude for the vector.",
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v",
+ "description": "the vector to limit",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "max",
+ "type": "Number"
+ },
+ {
+ "name": "target",
+ "description": "the vector to receive the result (Optional)",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "v with a magnitude limited to max",
+ "type": "p5.Vector"
+ }
+ }
+ ],
+ "return": {
+ "description": "v with a magnitude limited to max",
+ "type": "p5.Vector"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nReturns true if the browser is Safari, false if not.\nSafari makes trouble for downloading files.",
- "line": " src/io/files.js:2508"
+ "name": "setMag",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3709,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Sets a vector's magnitude to a given value.</p>\n<p>The static version of <code>setMag()</code>, as in <code>p5.Vector.setMag(v, 10)</code>, returns\na new <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change the\noriginal.</p>\n",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(3, 4, 0);\n\n // Prints \"5\" to the console.\n print(v.mag());\n\n // Set its magnitude to 10.\n v.setMag(10);\n\n // Prints \"p5.Vector Object : [6, 8, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 4, 0);\n\n // Create a copy with a magnitude of 10.\n let v1 = p5.Vector.setMag(v0, 10);\n\n // Prints \"5\" to the console.\n print(v0.mag());\n\n // Prints \"p5.Vector Object : [6, 8, 0]\" to the console.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(240);\n\n let origin = createVector(0, 0);\n let v = createVector(50, 50);\n\n // Draw the red arrow.\n drawArrow(origin, v, 'red');\n\n // Set v's magnitude to 30.\n v.setMag(30);\n\n // Draw the blue arrow.\n drawArrow(origin, v, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "len",
+ "description": "new length for this vector.",
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v",
+ "description": "the vector to set the magnitude of",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "len",
+ "type": "Number"
+ },
+ {
+ "name": "target",
+ "description": "the vector to receive the result (Optional)",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "v with a magnitude set to len",
+ "type": "p5.Vector"
+ }
+ }
+ ],
+ "return": {
+ "description": "v with a magnitude set to len",
+ "type": "p5.Vector"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nHelper function, a callback for download that deletes\nan invisible anchor element from the DOM once the file\nhas been automatically downloaded.",
- "line": " src/io/files.js:2519"
+ "name": "heading",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3735,
+ "itemtype": "method",
+ "description": "<p>Calculates the angle a 2D vector makes with the positive x-axis.</p>\n<p>By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.</p>\n<p>If the vector was created with\n<a href=\"#/p5/createVector\">createVector()</a>, <code>heading()</code> returns angles\nin the units of the current <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>The static version of <code>heading()</code>, as in <code>p5.Vector.heading(v)</code>, works the\nsame way.</p>\n",
+ "example": [
+ "<div class = \"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1);\n\n // Prints \"0.785...\" to the console.\n print(v.heading());\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Prints \"45\" to the console.\n print(v.heading());\n}\n</code>\n</div>\n\n<div class = \"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1);\n\n // Prints \"0.785...\" to the console.\n print(p5.Vector.heading(v));\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Prints \"45\" to the console.\n print(p5.Vector.heading(v));\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n let origin = createVector(0, 0);\n let v = createVector(50, 50);\n\n // Draw the black arrow.\n drawArrow(origin, v, 'black');\n\n // Use radians.\n angleMode(RADIANS);\n\n // Display the heading in radians.\n let h = round(v.heading(), 2);\n text(`Radians: ${h}`, 20, 70);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Display the heading in degrees.\n h = v.heading();\n text(`Degrees: ${h}`, 20, 85);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "angle of rotation.",
+ "type": "Number"
+ }
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v",
+ "description": "the vector to find the angle of",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "the angle of rotation",
+ "type": "Number"
+ }
+ }
+ ],
+ "return": {
+ "description": "angle of rotation.",
+ "type": "Number"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nTable Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.\nCSV files are\n<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, often with the data in quotes. TSV\nfiles use tabs as separators, and usually don't bother with the\nquotes.\nFile names should end with .csv if they're comma separated.\nA rough \"spec\" for CSV can be found\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.\n\nPossible options include:\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>",
- "line": " src/io/p5.Table.js:9"
+ "name": "setHeading",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 2192,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Rotates a 2D vector to a specific angle without changing its magnitude.</p>\n<p>By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.</p>\n<p>If the vector was created with\n<a href=\"#/p5/createVector\">createVector()</a>, <code>setHeading()</code> uses\nthe units of the current <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(v.heading());\n\n // Point to the left.\n v.setHeading(PI);\n\n // Prints \"3.141...\" to the console.\n print(v.heading());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(v.heading());\n\n // Point to the left.\n v.setHeading(180);\n\n // Prints \"180\" to the console.\n print(v.heading());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two arrows extend from the center of a gray square. The red arrow points to the right and the blue arrow points down.');\n}\n\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Point down.\n v1.setHeading(HALF_PI);\n\n // Draw the blue arrow.\n drawArrow(v0, v1, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "angle",
+ "description": "angle of rotation.",
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Vector",
+ "static": false,
+ "module": "Math"
},
{
- "message": "Missing item type",
- "line": " src/math/p5.Vector.js:435"
+ "name": "rotate",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3461,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Rotates a 2D vector by an angle without changing its magnitude.</p>\n<p>By convention, the positive x-axis has an angle of 0. Angles increase in\nthe clockwise direction.</p>\n<p>If the vector was created with\n<a href=\"#/p5/createVector\">createVector()</a>, <code>rotate()</code> uses\nthe units of the current <a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n<p>The static version of <code>rotate()</code>, as in <code>p5.Vector.rotate(v, PI)</code>,\nreturns a new <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change\nthe original.</p>\n",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n\n // Rotate a quarter turn.\n v.rotate(HALF_PI);\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v = createVector(1, 0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n\n // Rotate a quarter turn.\n v.rotate(90);\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(1, 0);\n\n // Create a rotated copy.\n let v1 = p5.Vector.rotate(v0, HALF_PI);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v0.toString());\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create a p5.Vector object.\n let v0 = createVector(1, 0);\n\n // Create a rotated copy.\n let v1 = p5.Vector.rotate(v0, 90);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v0.toString());\n\n // Prints \"p5.Vector Object : [0, 1, 0]\" to the console.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nlet v0;\nlet v1;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n v0 = createVector(50, 50);\n v1 = createVector(30, 0);\n\n describe('A black arrow extends from the center of a gray square. The arrow rotates clockwise.');\n}\n\nfunction draw() {\n background(240);\n\n // Rotate v1.\n v1.rotate(0.01);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "angle",
+ "description": "angle of rotation.",
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "angle",
+ "type": "Number"
+ },
+ {
+ "name": "target",
+ "description": "The vector to receive the result",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type",
- "line": " src/math/p5.Vector.js:449"
+ "name": "angleBetween",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3750,
+ "itemtype": "method",
+ "description": "<p>Calculates the angle between two vectors.</p>\n<p>The angles returned are signed, which means that\n<code>v1.angleBetween(v2) === -v2.angleBetween(v1)</code>.</p>\n<p>If the vector was created with\n<a href=\"#/p5/createVector\">createVector()</a>, <code>angleBetween()</code> returns\nangles in the units of the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(v0.angleBetween(v1));\n\n // Prints \"-1.570...\" to the console.\n print(v1.angleBetween(v0));\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(v0.angleBetween(v1));\n\n // Prints \"-90\" to the console.\n print(v1.angleBetween(v0));\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"1.570...\" to the console.\n print(p5.Vector.angleBetween(v0, v1));\n\n // Prints \"-1.570...\" to the console.\n print(p5.Vector.angleBetween(v1, v0));\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Use degrees.\n angleMode(DEGREES);\n\n // Create p5.Vector objects.\n let v0 = createVector(1, 0);\n let v1 = createVector(0, 1);\n\n // Prints \"90\" to the console.\n print(p5.Vector.angleBetween(v0, v1));\n\n // Prints \"-90\" to the console.\n print(p5.Vector.angleBetween(v1, v0));\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n let v2 = createVector(0, 30);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Use radians.\n angleMode(RADIANS);\n\n // Display the angle in radians.\n let angle = round(v1.angleBetween(v2), 2);\n text(`Radians: ${angle}`, 20, 20);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Display the angle in degrees.\n angle = round(v1.angleBetween(v2), 2);\n text(`Degrees: ${angle}`, 20, 35);\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "value",
+ "description": "x, y, and z components of a <a href=\"#/p5.Vector\">p5.Vector</a>.",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "angle between the vectors.",
+ "type": "Number"
+ }
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v1",
+ "description": "the first vector.",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "v2",
+ "description": "the second vector.",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "angle between the two vectors.",
+ "type": "Number"
+ }
+ }
+ ],
+ "return": {
+ "description": "angle between the vectors.",
+ "type": "Number"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nMultiplies a vector by a scalar and returns a new vector.",
- "line": " src/math/p5.Vector.js:3431"
+ "name": "lerp",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3574,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Calculates new <code>x</code>, <code>y</code>, and <code>z</code> components that are proportionally the\nsame distance between two vectors.</p>\n<p>The <code>amt</code> parameter is the amount to interpolate between the old vector and\nthe new vector. 0.0 keeps all components equal to the old vector's, 0.5 is\nhalfway between, and 1.0 sets all components equal to the new vector's.</p>\n<p>The static version of <code>lerp()</code>, as in <code>p5.Vector.lerp(v0, v1, 0.5)</code>,\nreturns a new <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change\nthe original.</p>\n",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(1, 1, 1);\n let v1 = createVector(3, 3, 3);\n\n // Interpolate.\n v0.lerp(v1, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v0.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(1, 1, 1);\n\n // Interpolate.\n v.lerp(3, 3, 3, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(1, 1, 1);\n let v1 = createVector(3, 3, 3);\n\n // Interpolate.\n let v2 = p5.Vector.lerp(v0, v1, 0.5);\n\n // Prints \"p5.Vector Object : [2, 2, 2]\" to the console.\n print(v2.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(30, 0);\n let v2 = createVector(0, 30);\n\n // Interpolate.\n let v3 = p5.Vector.lerp(v1, v2, 0.5);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Draw the purple arrow.\n drawArrow(v0, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x component.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y component.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z component.",
+ "type": "Number"
+ },
+ {
+ "name": "amt",
+ "description": "amount of interpolation between 0.0 (old vector)\nand 1.0 (new vector). 0.5 is halfway between.",
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": [
+ {
+ "name": "v",
+ "description": "<a href=\"#/p5.Vector\">p5.Vector</a> to lerp toward.",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "amt",
+ "type": "Number"
+ }
+ ]
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v1",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "v2",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "amt",
+ "type": "Number"
+ },
+ {
+ "name": "target",
+ "description": "The vector to receive the result",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "The lerped value",
+ "type": "p5.Vector"
+ }
+ }
+ ],
+ "return": {
+ "description": "The lerped value",
+ "type": "p5.Vector"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nRotates the vector (only 2D vectors) by the given angle; magnitude remains the same. Returns a new vector.",
- "line": " src/math/p5.Vector.js:3487"
+ "name": "slerp",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3604,
+ "itemtype": "method",
+ "description": "<p>Calculates a new heading and magnitude that are between two vectors.</p>\n<p>The <code>amt</code> parameter is the amount to interpolate between the old vector and\nthe new vector. 0.0 keeps the heading and magnitude equal to the old\nvector's, 0.5 sets them halfway between, and 1.0 sets the heading and\nmagnitude equal to the new vector's.</p>\n<p><code>slerp()</code> differs from <a href=\"#/p5.Vector/lerp\">lerp()</a> because\nit interpolates magnitude. Calling <code>v0.slerp(v1, 0.5)</code> sets <code>v0</code>'s\nmagnitude to a value halfway between its original magnitude and <code>v1</code>'s.\nCalling <code>v0.lerp(v1, 0.5)</code> makes no such guarantee.</p>\n<p>The static version of <code>slerp()</code>, as in <code>p5.Vector.slerp(v0, v1, 0.5)</code>,\nreturns a new <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change\nthe original.</p>\n",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 0);\n\n // Prints \"3\" to the console.\n print(v0.mag());\n\n // Prints \"0\" to the console.\n print(v0.heading());\n\n // Create a p5.Vector object.\n let v1 = createVector(0, 1);\n\n // Prints \"1\" to the console.\n print(v1.mag());\n\n // Prints \"1.570...\" to the console.\n print(v1.heading());\n\n // Interpolate halfway between v0 and v1.\n v0.slerp(v1, 0.5);\n\n // Prints \"2\" to the console.\n print(v0.mag());\n\n // Prints \"0.785...\" to the console.\n print(v0.heading());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v0 = createVector(3, 0);\n\n // Prints \"3\" to the console.\n print(v0.mag());\n\n // Prints \"0\" to the console.\n print(v0.heading());\n\n // Create a p5.Vector object.\n let v1 = createVector(0, 1);\n\n // Prints \"1\" to the console.\n print(v1.mag());\n\n // Prints \"1.570...\" to the console.\n print(v1.heading());\n\n // Create a p5.Vector that's halfway between v0 and v1.\n let v3 = p5.Vector.slerp(v0, v1, 0.5);\n\n // Prints \"2\" to the console.\n print(v3.mag());\n\n // Prints \"0.785...\" to the console.\n print(v3.heading());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Create p5.Vector objects.\n let v0 = createVector(50, 50);\n let v1 = createVector(20, 0);\n let v2 = createVector(-40, 0);\n\n // Create a p5.Vector that's halfway between v1 and v2.\n let v3 = p5.Vector.slerp(v1, v2, 0.5);\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n\n // Draw the purple arrow.\n drawArrow(v0, v3, 'purple');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "v",
+ "description": "<a href=\"#/p5.Vector\">p5.Vector</a> to slerp toward.",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "amt",
+ "description": "amount of interpolation between 0.0 (old vector)\nand 1.0 (new vector). 0.5 is halfway between.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "p5.Vector"
+ }
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v1",
+ "description": "old vector.",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "v2",
+ "description": "new vector.",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "amt",
+ "type": "Number"
+ },
+ {
+ "name": "target",
+ "description": "vector to receive the result.",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "slerped vector between v1 and v2",
+ "type": "p5.Vector"
+ }
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "p5.Vector"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nDivides a vector by a scalar and returns a new vector.",
- "line": " src/math/p5.Vector.js:3516"
+ "name": "reflect",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3765,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Reflects a vector about a line in 2D or a plane in 3D.</p>\n<p>The orientation of the line or plane is described by a normal vector that\npoints away from the shape.</p>\n<p>The static version of <code>reflect()</code>, as in <code>p5.Vector.reflect(v, n)</code>,\nreturns a new <a href=\"#/p5.Vector\">p5.Vector</a> object and doesn't change\nthe original.</p>\n",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a normal vector.\n let n = createVector(0, 1);\n // Create a vector to reflect.\n let v = createVector(4, 6);\n\n // Reflect v about n.\n v.reflect(n);\n\n // Prints \"p5.Vector Object : [4, -6, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a normal vector.\n let n = createVector(0, 1);\n\n // Create a vector to reflect.\n let v0 = createVector(4, 6);\n\n // Create a reflected vector.\n let v1 = p5.Vector.reflect(v0, n);\n\n // Prints \"p5.Vector Object : [4, -6, 0]\" to the console.\n print(v1.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n 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.');\n}\nfunction draw() {\n background(200);\n\n // Draw a vertical line.\n line(50, 0, 50, 100);\n\n // Create a normal vector.\n let n = createVector(1, 0);\n\n // Center.\n let v0 = createVector(50, 50);\n\n // Create a vector to reflect.\n let v1 = createVector(30, 40);\n\n // Create a reflected vector.\n let v2 = p5.Vector.reflect(v1, n);\n\n // Scale the normal vector for drawing.\n n.setMag(30);\n\n // Draw the black arrow.\n drawArrow(v0, n, 'black');\n\n // Draw the red arrow.\n drawArrow(v0, v1, 'red');\n\n // Draw the blue arrow.\n drawArrow(v0, v2, 'blue');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "surfaceNormal",
+ "description": "<a href=\"#/p5.Vector\">p5.Vector</a>\nto reflect about.",
+ "type": "p5.Vector"
+ }
+ ]
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "incidentVector",
+ "description": "vector to be reflected.",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "surfaceNormal",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "target",
+ "description": "vector to receive the result.",
+ "optional": 1,
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "the reflected vector",
+ "type": "p5.Vector"
+ }
+ }
+ ],
+ "return": {
+ "description": "the reflected vector",
+ "type": "p5.Vector"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nCalculates the dot product of two vectors.",
- "line": " src/math/p5.Vector.js:3573"
+ "name": "array",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3791,
+ "itemtype": "method",
+ "description": "Returns the vector's components as an array of numbers.",
+ "example": [
+ "<div class = \"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = createVector(20, 30);\n\n // Prints \"[20, 30, 0]\" to the console.\n print(v.array());\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "array with the vector's components.",
+ "type": "Number[]"
+ }
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v",
+ "description": "the vector to convert to an array",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "an Array with the 3 values",
+ "type": "Number[]"
+ }
+ }
+ ],
+ "return": {
+ "description": "array with the vector's components.",
+ "type": "Number[]"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nCalculates the cross product of two vectors.",
- "line": " src/math/p5.Vector.js:3587"
+ "name": "equals",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3804,
+ "itemtype": "method",
+ "description": "<p>Checks whether all the vector's components are equal to another vector's.</p>\n<p><code>equals()</code> returns <code>true</code> if the vector's components are all the same as another\nvector's and <code>false</code> if not.</p>\n<p>The version of <code>equals()</code> with one parameter interprets it as another\n<a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n<p>The version of <code>equals()</code> with multiple parameters interprets them as the\ncomponents of another vector. Any missing parameters are assigned the value\n0.</p>\n<p>The static version of <code>equals()</code>, as in <code>p5.Vector.equals(v0, v1)</code>,\ninterprets both parameters as <a href=\"#/p5.Vector\">p5.Vector</a> objects.</p>\n",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(10, 20, 30);\n let v1 = createVector(10, 20, 30);\n let v2 = createVector(0, 0, 0);\n\n // Prints \"true\" to the console.\n print(v0.equals(v1));\n\n // Prints \"false\" to the console.\n print(v0.equals(v2));\n}\n</code>\n</div>\n\n<div class = \"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(5, 10, 20);\n let v1 = createVector(5, 10, 20);\n let v2 = createVector(13, 10, 19);\n\n // Prints \"true\" to the console.\n print(v0.equals(v1.x, v1.y, v1.z));\n\n // Prints \"false\" to the console.\n print(v0.equals(v2.x, v2.y, v2.z));\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create p5.Vector objects.\n let v0 = createVector(10, 20, 30);\n let v1 = createVector(10, 20, 30);\n let v2 = createVector(0, 0, 0);\n\n // Prints \"true\" to the console.\n print(p5.Vector.equals(v0, v1));\n\n // Prints \"false\" to the console.\n print(p5.Vector.equals(v0, v2));\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z component of the vector.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "whether the vectors are equal.",
+ "type": "Boolean"
+ }
+ },
+ {
+ "params": [
+ {
+ "name": "value",
+ "description": "vector to compare.",
+ "type": "p5.Vector|Array"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "Boolean"
+ }
+ },
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v1",
+ "description": "the first vector to compare",
+ "type": "p5.Vector|Array"
+ },
+ {
+ "name": "v2",
+ "description": "the second vector to compare",
+ "type": "p5.Vector|Array"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "Boolean"
+ }
+ }
+ ],
+ "return": {
+ "description": "whether the vectors are equal.",
+ "type": "Boolean"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nCalculates the Euclidean distance between two points (considering a\npoint as a vector object).",
- "line": " src/math/p5.Vector.js:3601"
+ "name": "fromAngle",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3154,
+ "itemtype": "method",
+ "description": "Creates a new 2D vector from an angle.",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngle(0);\n\n // Prints \"p5.Vector Object : [1, 0, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngle(0, 30);\n\n // Prints \"p5.Vector Object : [30, 0, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black arrow extends from the center of a gray square. It points to the right.');\n}\nfunction draw() {\n background(200);\n\n // Create a p5.Vector to the center.\n let v0 = createVector(50, 50);\n\n // Create a p5.Vector with an angle 0 and magnitude 30.\n let v1 = p5.Vector.fromAngle(0, 30);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "angle",
+ "description": "desired angle, in radians. Unaffected by <a href=\"#/p5/angleMode\">angleMode()</a>.",
+ "type": "Number"
+ },
+ {
+ "name": "length",
+ "description": "length of the new vector (defaults to 1).",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ }
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nLinear interpolate a vector to another vector and return the result as a\nnew vector.",
- "line": " src/math/p5.Vector.js:3616"
+ "name": "fromAngles",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3216,
+ "itemtype": "method",
+ "description": "Creates a new 3D vector from a pair of ISO spherical angles.",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngles(0, 0);\n\n // Prints \"p5.Vector Object : [0, -1, 0]\" to the console.\n print(v.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A light shines on a pink sphere as it orbits.');\n}\n\nfunction draw() {\n background(0);\n\n // Calculate the ISO angles.\n let theta = frameCount * 0.05;\n let phi = 0;\n\n // Create a p5.Vector object.\n let v = p5.Vector.fromAngles(theta, phi, 100);\n\n // Create a point light using the p5.Vector.\n let c = color('deeppink');\n pointLight(c, v);\n\n // Style the sphere.\n fill(255);\n noStroke();\n\n // Draw the sphere.\n sphere(35);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "theta",
+ "description": "polar angle in radians (zero is up).",
+ "type": "Number"
+ },
+ {
+ "name": "phi",
+ "description": "azimuthal angle in radians\n(zero is out of the screen).",
+ "type": "Number"
+ },
+ {
+ "name": "length",
+ "description": "length of the new vector (defaults to 1).",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ }
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nPerforms spherical linear interpolation with the other vector\nand returns the resulting vector.\nThis works in both 3D and 2D. As for 2D, the result of slerping\nbetween 2D vectors is always a 2D vector.",
- "line": " src/math/p5.Vector.js:3646"
+ "name": "random2D",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3295,
+ "itemtype": "method",
+ "description": "Creates a new 2D unit vector with a random heading.",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.random2D();\n\n // Prints \"p5.Vector Object : [x, y, 0]\" to the console\n // where x and y are small random numbers.\n print(v.toString());\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(1);\n\n describe('A black arrow in extends from the center of a gray square. It changes direction once per second.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a p5.Vector to the center.\n let v0 = createVector(50, 50);\n\n // Create a random p5.Vector.\n let v1 = p5.Vector.random2D();\n\n // Scale v1 for drawing.\n v1.mult(30);\n\n // Draw the black arrow.\n drawArrow(v0, v1, 'black');\n}\n\n// Draws an arrow between two vectors.\nfunction drawArrow(base, vec, myColor) {\n push();\n stroke(myColor);\n strokeWeight(3);\n fill(myColor);\n translate(base.x, base.y);\n line(0, 0, vec.x, vec.y);\n rotate(vec.heading());\n let arrowSize = 7;\n translate(vec.mag() - arrowSize, 0);\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n pop();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ }
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nCalculates the magnitude (length) of the vector and returns the result as\na float (this is simply the equation `sqrt(x*x + y*y + z*z)`.)",
- "line": " src/math/p5.Vector.js:3678"
+ "name": "random3D",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3318,
+ "itemtype": "method",
+ "description": "Creates a new 3D unit vector with a random heading.",
+ "example": [
+ "<div class=\"norender\">\n<code>\nfunction setup() {\n // Create a p5.Vector object.\n let v = p5.Vector.random3D();\n\n // Prints \"p5.Vector Object : [x, y, z]\" to the console\n // where x, y, and z are small random numbers.\n print(v.toString());\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ }
+ }
+ ],
+ "return": {
+ "description": "new <a href=\"#/p5.Vector\">p5.Vector</a> object.",
+ "type": "p5.Vector"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nCalculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation <em>(x\\*x + y\\*y + z\\*z)</em>.)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.",
- "line": " src/math/p5.Vector.js:3692"
+ "name": "dist",
+ "file": "src/scripts/parsers/in/p5.js/src/math/p5.Vector.js",
+ "line": 3558,
+ "itemtype": "method",
+ "description": "Calculates the Euclidean distance between two points (considering a\npoint as a vector object).",
+ "example": [],
+ "overloads": [
+ {
+ "params": []
+ },
+ {
+ "params": [
+ {
+ "name": "v1",
+ "description": "The first <a href=\"#/p5.Vector\">p5.Vector</a>",
+ "type": "p5.Vector"
+ },
+ {
+ "name": "v2",
+ "description": "The second <a href=\"#/p5.Vector\">p5.Vector</a>",
+ "type": "p5.Vector"
+ }
+ ],
+ "return": {
+ "description": "The distance",
+ "type": "Number"
+ }
+ }
+ ],
+ "return": {
+ "description": "The distance",
+ "type": "Number"
+ },
+ "class": "p5.Vector",
+ "static": 1,
+ "module": "Math"
},
{
- "message": "Missing item type\nNormalize the vector to length 1 (make it a unit vector).",
- "line": " src/math/p5.Vector.js:3708"
+ "name": "textToPaths",
+ "file": "src/scripts/parsers/in/p5.js/src/type/p5.Font.js",
+ "line": 200,
+ "itemtype": "method",
+ "description": "<p>Returns a flat array of path commands that describe the outlines of a string of text.</p>\n<p>Each command is represented as an array of the form <code>[type, ...coords]</code>, where:</p>\n<ul><li><code>type</code> is one of <code>'M'</code>, <code>'L'</code>, <code>'Q'</code>, <code>'C'</code>, or <code>'Z'</code>,</li><li><code>coords</code> are the numeric values needed for that command.</li></ul><p><code>'M'</code> indicates a \"move to\" (starting a new contour),\n<code>'L'</code> a line segment,\n<code>'Q'</code> a quadratic bezier,\n<code>'C'</code> a cubic bezier, and\n<code>'Z'</code> closes the current path.</p>\n<p>The first two parameters, <code>x</code> and <code>y</code>, specify the baseline origin for the text.\nOptionally, you can provide a <code>width</code> and <code>height</code> for text wrapping; if you don't need\nwrapping, you can omit them and directly pass <code>options</code> as the fourth parameter.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet font;\n\nasync function setup() {\n font = await loadFont('assets/inconsolata.otf');\n createCanvas(200, 200);\n background(220);\n noLoop();\n}\n\nfunction draw() {\n background(220);\n stroke(0);\n noFill();\n textSize(60);\n\n // Get path commands for \"Hello\" (drawn at baseline x=50, y=100):\n const pathCommands = font.textToPaths('Hello', 30, 110);\n\n beginShape();\n for (let i = 0; i < pathCommands.length; i++) {\n const cmd = pathCommands[i];\n const type = cmd[0];\n\n switch (type) {\n case 'M': {\n // Move to (start a new contour)\n const x = cmd[1];\n const y = cmd[2];\n endContour(); // In case we were already drawing\n beginContour();\n vertex(x, y);\n break;\n }\n case 'L': {\n // Line to\n const x = cmd[1];\n const y = cmd[2];\n vertex(x, y);\n break;\n }\n case 'Q': {\n // Quadratic bezier\n const cx = cmd[1];\n const cy = cmd[2];\n const x = cmd[3];\n const y = cmd[4];\n bezierOrder(2);\n bezierVertex(cx, cy);\n bezierVertex(x, y);\n break;\n }\n case 'C': {\n // Cubic bezier\n const cx1 = cmd[1];\n const cy1 = cmd[2];\n const cx2 = cmd[3];\n const cy2 = cmd[4];\n const x = cmd[5];\n const y = cmd[6];\n bezierOrder(3);\n bezierVertex(cx1, cy1);\n bezierVertex(cx2, cy2);\n bezierVertex(x, y);\n break;\n }\n case 'Z': {\n // Close path\n endContour(CLOSE);\n beginContour();\n break;\n }\n }\n }\n endContour();\n endShape();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "str",
+ "description": "The text to convert into path commands.",
+ "type": "String"
+ },
+ {
+ "name": "x",
+ "description": "x‐coordinate of the text baseline.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y‐coordinate of the text baseline.",
+ "type": "Number"
+ },
+ {
+ "name": "width",
+ "description": "Optional width for text wrapping.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "Optional height for text wrapping.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "options",
+ "description": "Configuration object for rendering text.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ],
+ "return": {
+ "description": "A flat array of path commands.",
+ "type": "Array[]"
+ }
+ }
+ ],
+ "return": {
+ "description": "A flat array of path commands.",
+ "type": "Array[]"
+ },
+ "class": "p5.Font",
+ "static": false,
+ "module": "Typography"
},
{
- "message": "Missing item type\nLimit the magnitude of the vector to the value used for the <b>max</b>\nparameter.",
- "line": " src/math/p5.Vector.js:3734"
+ "name": "textToPoints",
+ "file": "src/scripts/parsers/in/p5.js/src/type/p5.Font.js",
+ "line": 275,
+ "itemtype": "method",
+ "description": "<p>Returns an array of points outlining a string of text written using the\nfont.</p>\n<p>Each point object in the array has three properties that describe the\npoint's location and orientation, called its path angle. For example,\n<code>{ x: 10, y: 20, alpha: 450 }</code>.</p>\n<p>The first parameter, <code>str</code>, is a string of text. The second and third\nparameters, <code>x</code> and <code>y</code>, are the text's position. By default, they set the\ncoordinates of the bounding box's bottom-left corner. See\n<a href=\"#/p5/textAlign\">textAlign()</a> for more ways to align text.</p>\n<p>The fourth parameter, <code>options</code>, is also optional. <code>font.textToPoints()</code>\nexpects an object with the following properties:</p>\n<p><code>sampleFactor</code> is the ratio of the text's path length to the number of\nsamples. It defaults to 0.1. Higher values produce more points along the\npath and are more precise.</p>\n<p><code>simplifyThreshold</code> removes collinear points if it's set to a number other\nthan 0. The value represents the threshold angle to use when determining\nwhether two edges are collinear.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet font;\n\nasync function setup() {\n createCanvas(100, 100);\n font = await loadFont('assets/inconsolata.otf');\n\n background(200);\n textSize(35);\n\n // Get the point array.\n let points = font.textToPoints('p5*js', 6, 60, { sampleFactor: 0.5 });\n\n // Draw a dot at each point.\n for (let p of points) {\n point(p.x, p.y);\n }\n\n describe('A set of black dots outlining the text \"p5*js\" on a gray background.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "str",
+ "description": "string of text.",
+ "type": "String"
+ },
+ {
+ "name": "x",
+ "description": "x-coordinate of the text.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the text.",
+ "type": "Number"
+ },
+ {
+ "name": "options",
+ "description": "object with sampleFactor and simplifyThreshold\nproperties.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ],
+ "return": {
+ "description": "array of point objects, each with <code>x</code>, <code>y</code>, and <code>alpha</code> (path angle) properties.",
+ "type": "Object[]"
+ }
+ }
+ ],
+ "return": {
+ "description": "array of point objects, each with <code>x</code>, <code>y</code>, and <code>alpha</code> (path angle) properties.",
+ "type": "Object[]"
+ },
+ "class": "p5.Font",
+ "static": false,
+ "module": "Typography"
},
{
- "message": "Missing item type\nSet the magnitude of the vector to the value used for the <b>len</b>\nparameter.",
- "line": " src/math/p5.Vector.js:3762"
+ "name": "textToContours",
+ "file": "src/scripts/parsers/in/p5.js/src/type/p5.Font.js",
+ "line": 349,
+ "itemtype": "method",
+ "description": "<p>Returns an array of arrays of points outlining a string of text written using the\nfont. Each array represents a contour, so the letter O will have two outer arrays:\none for the outer edge of the shape, and one for the inner edge of the hole.</p>\n<p>Each point object in a contour array has three properties that describe the\npoint's location and orientation, called its path angle. For example,\n<code>{ x: 10, y: 20, alpha: 450 }</code>.</p>\n<p>The first parameter, <code>str</code>, is a string of text. The second and third\nparameters, <code>x</code> and <code>y</code>, are the text's position. By default, they set the\ncoordinates of the bounding box's bottom-left corner. See\n<a href=\"#/p5/textAlign\">textAlign()</a> for more ways to align text.</p>\n<p>The fourth parameter, <code>options</code>, is also optional. <code>font.textToPoints()</code>\nexpects an object with the following properties:</p>\n<p><code>sampleFactor</code> is the ratio of the text's path length to the number of\nsamples. It defaults to 0.1. Higher values produce more points along the\npath and are more precise.</p>\n<p><code>simplifyThreshold</code> removes collinear points if it's set to a number other\nthan 0. The value represents the threshold angle to use when determining\nwhether two edges are collinear.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet font;\n\nasync function setup() {\n createCanvas(100, 100);\n font = await loadFont('/assets/inconsolata.otf');\n}\n\nfunction draw() {\n background(200);\n textAlign(CENTER, CENTER);\n textSize(30);\n\n // Get the point array.\n let contours = font.textToContours('p5*js', width/2, height/2, { sampleFactor: 0.5 });\n\n beginShape();\n for (const pts of contours) {\n beginContour();\n for (const pt of pts) {\n vertex(pt.x + 5*sin(pt.y*0.1 + millis()*0.01), pt.y);\n }\n endContour(CLOSE);\n }\n endShape();\n\n describe('The text p5*js wobbling over time');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "str",
+ "description": "string of text.",
+ "type": "String"
+ },
+ {
+ "name": "x",
+ "description": "x-coordinate of the text.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the text.",
+ "type": "Number"
+ },
+ {
+ "name": "options",
+ "description": "object with sampleFactor and simplifyThreshold\nproperties.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ],
+ "return": {
+ "description": "array of point objects, each with <code>x</code>, <code>y</code>, and <code>alpha</code> (path angle) properties.",
+ "type": "Object[][]"
+ }
+ }
+ ],
+ "return": {
+ "description": "array of point objects, each with <code>x</code>, <code>y</code>, and <code>alpha</code> (path angle) properties.",
+ "type": "Object[][]"
+ },
+ "class": "p5.Font",
+ "static": false,
+ "module": "Typography"
},
{
- "message": "Missing item type\nCalculate the angle of rotation for this vector (only 2D vectors).\np5.Vectors created using <a href=\"#/p5/createVector\">createVector()</a>\nwill take the current <a href=\"#/p5/angleMode\">angleMode</a> into\nconsideration, and give the angle in radians or degrees accordingly.",
- "line": " src/math/p5.Vector.js:3790"
+ "name": "textToModel",
+ "file": "src/scripts/parsers/in/p5.js/src/type/p5.Font.js",
+ "line": 538,
+ "itemtype": "method",
+ "description": "<p>Converts text into a 3D model that can be rendered in WebGL mode.</p>\n<p>This method transforms flat text into extruded 3D geometry, allowing\nfor dynamic effects like depth, warping, and custom shading.</p>\n<p>It works by taking the outlines (contours) of each character in the\nprovided text string and constructing a 3D shape from them.</p>\n<p>Once your 3D text is ready, you can rotate it in 3D space using <a href=\"#/p5/orbitControl\">orbitControl()</a>\n— just click and drag with your mouse to see it from all angles!</p>\n<p>Use the extrude slider to give your letters depth: slide it up, and your\nflat text turns into a solid, multi-dimensional object.</p>\n<p>You can also choose from various fonts such as \"Anton\", \"Montserrat\", or \"Source Serif\",\nmuch like selecting fancy fonts in a word processor,</p>\n<p>The generated model (a Geometry object) can be manipulated further—rotated, scaled,\nor styled with shaders—to create engaging, interactive visual art.</p>\n",
+ "example": [
+ "<div modernizr='webgl'>\n<code>\nlet font;\nlet geom;\n\nasync function setup() {\n createCanvas(200, 200, WEBGL);\n font = await loadFont('https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm0K08i4gS7lu.ttf');\n\n geom = font.textToModel(\"Hello\", 50, 0, { sampleFactor: 2 });\n geom.clearColors();\n geom.normalize();\n}\n\nfunction draw() {\n background(255);\n orbitControl();\n fill(\"red\");\n strokeWeight(4);\n scale(min(width, height) / 300);\n model(geom);\n describe('A red non-extruded \"Hello\" in Anton on white canvas, rotatable via mouse.');\n}\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet font;\nlet geom;\n\nasync function setup() {\n createCanvas(200, 200, WEBGL);\n\n // Alternative fonts:\n // Anton: 'https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm0K08i4gS7lu.ttf'\n // Montserrat: 'https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-Y3tcoqK5.ttf'\n // Source Serif: 'https://fonts.gstatic.com/s/sourceserif4/v8/vEFy2_tTDB4M7-auWDN0ahZJW3IX2ih5nk3AucvUHf6OAVIJmeUDygwjihdqrhxXD-wGvjU.ttf'\n\n // Using Source Serif for this example:\n font = await loadFont('https://fonts.gstatic.com/s/sourceserif4/v8/vEFy2_tTDB4M7-auWDN0ahZJW3IX2ih5nk3AucvUHf6OAVIJmeUDygwjihdqrhxXD-wGvjU.ttf');\n\n geom = font.textToModel(\"Hello\", 50, 0, { sampleFactor: 2, extrude: 5 });\n geom.clearColors();\n geom.normalize();\n}\n\nfunction draw() {\n background(255);\n orbitControl();\n fill(\"red\");\n strokeWeight(4);\n scale(min(width, height) / 300);\n model(geom);\n describe('3D red extruded \"Hello\" in Source Serif on white, rotatable via mouse.');\n}\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet geom;\nlet activeFont;\nlet artShader;\nlet lineShader;\n\n// Define parameters as simple variables\nlet words = 'HELLO';\nlet warp = 1;\nlet extrude = 5;\nlet palette = [\"#ffe03d\", \"#fe4830\", \"#d33033\", \"#6d358a\", \"#1c509e\", \"#00953c\"];\n\nasync function setup() {\n createCanvas(200, 200, WEBGL);\n\n // Using Anton as the default font for this example:\n\n // Alternative fonts:\n // Anton: 'https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm0K08i4gS7lu.ttf'\n // Montserrat: 'https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-Y3tcoqK5.ttf'\n // Source Serif: 'https://fonts.gstatic.com/s/sourceserif4/v8/vEFy2_tTDB4M7-auWDN0ahZJW3IX2ih5nk3AucvUHf6OAVIJmeUDygwjihdqrhxXD-wGvjU.ttf'\n activeFont = await loadFont('https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm0K08i4gS7lu.ttf');\n\n geom = activeFont.textToModel(words, 0, 50, { sampleFactor: 2, extrude });\n geom.clearColors();\n geom.normalize();\n\n artShader = baseMaterialShader().modify({\n uniforms: {\n 'float time': () => millis(),\n 'float warp': () => warp,\n 'float numColors': () => palette.length,\n 'vec3[6] colors': () => palette.flatMap((c) => [red(c)/255, green(c)/255, blue(c)/255]),\n },\n vertexDeclarations: 'out vec3 vPos;',\n fragmentDeclarations: 'in vec3 vPos;',\n 'Vertex getObjectInputs': `(Vertex inputs) {\n vPos = inputs.position;\n inputs.position.x += 5. * warp * sin(inputs.position.y * 0.1 + time * 0.001) / (1. + warp);\n inputs.position.y += 5. * warp * sin(inputs.position.x * 0.1 + time * 0.0009) / (1. + warp);\n return inputs;\n }`,\n 'vec4 getFinalColor': `(vec4 _c) {\n float x = vPos.x * 0.005;\n float a = floor(fract(x) * numColors);\n float b = a == numColors - 1. ? 0. : a + 1.;\n float t = fract(x * numColors);\n vec3 c = mix(colors[int(a)], colors[int(b)], t);\n return vec4(c, 1.);\n }`\n });\n\n lineShader = baseStrokeShader().modify({\n uniforms: {\n 'float time': () => millis(),\n 'float warp': () => warp,\n },\n 'StrokeVertex getObjectInputs': `(StrokeVertex inputs) {\n inputs.position.x += 5. * warp * sin(inputs.position.y * 0.1 + time * 0.001) / (1. + warp);\n inputs.position.y += 5. * warp * sin(inputs.position.x * 0.1 + time * 0.0009) / (1. + warp);\n return inputs;\n }`,\n });\n}\n\nfunction draw() {\n background(255);\n orbitControl();\n shader(artShader);\n strokeShader(lineShader);\n strokeWeight(4);\n scale(min(width, height) / 210);\n model(geom);\n describe('3D wavy with different color sets \"Hello\" in Anton on white canvas, rotatable via mouse.');\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "str",
+ "description": "The text string to convert into a 3D model.",
+ "type": "String"
+ },
+ {
+ "name": "x",
+ "description": "The x-coordinate for the starting position of the text.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "The y-coordinate for the starting position of the text.",
+ "type": "Number"
+ },
+ {
+ "name": "width",
+ "description": "Maximum width of the text block (wraps text if exceeded).",
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "Maximum height of the text block.",
+ "type": "Number"
+ },
+ {
+ "name": "options",
+ "description": "Configuration options for the 3D text:",
+ "optional": 1,
+ "type": "Object"
+ },
+ {
+ "name": "options.extrude",
+ "description": "The depth to extrude the text. A value of 0 produces\nflat text; higher values create thicker, 3D models.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "options.sampleFactor",
+ "description": "A factor controlling the level of detail for the text contours.\n Higher values result in smoother curves.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "A geometry object representing the 3D model of the text.",
+ "type": "p5.Geometry"
+ }
+ }
+ ],
+ "return": {
+ "description": "A geometry object representing the 3D model of the text.",
+ "type": "p5.Geometry"
+ },
+ "class": "p5.Font",
+ "static": false,
+ "module": "Typography"
},
{
- "message": "Missing item type\nCalculates and returns the angle between two vectors. This function will take\nthe <a href=\"#/p5/angleMode\">angleMode</a> on v1 into consideration, and\ngive the angle in radians or degrees accordingly.",
- "line": " src/math/p5.Vector.js:3806"
+ "name": "perspective",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1199,
+ "itemtype": "method",
+ "description": "<p>Sets a perspective projection for the camera.</p>\n<p>In a perspective projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes. It’s applied by default in new\n<code>p5.Camera</code> objects.</p>\n<p><code>myCamera.perspective()</code> changes the camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.</p>\n<p>The first parameter, <code>fovy</code>, is the camera’s vertical field of view. It’s\nan angle that describes how tall or narrow a view the camera has. For\nexample, calling <code>myCamera.perspective(0.5)</code> sets the camera’s vertical\nfield of view to 0.5 radians. By default, <code>fovy</code> is calculated based on the\nsketch’s height and the camera’s default z-coordinate, which is 800. The\nformula for the default <code>fovy</code> is <code>2 * atan(height / 2 / 800)</code>.</p>\n<p>The second parameter, <code>aspect</code>, is the camera’s aspect ratio. It’s a number\nthat describes the ratio of the top plane’s width to its height. For\nexample, calling <code>myCamera.perspective(0.5, 1.5)</code> sets the camera’s field\nof view to 0.5 radians and aspect ratio to 1.5, which would make shapes\nappear thinner on a square canvas. By default, <code>aspect</code> is set to\n<code>width / height</code>.</p>\n<p>The third parameter, <code>near</code>, is the distance from the camera to the near\nplane. For example, calling <code>myCamera.perspective(0.5, 1.5, 100)</code> sets the\ncamera’s field of view to 0.5 radians, its aspect ratio to 1.5, and places\nthe near plane 100 pixels from the camera. Any shapes drawn less than 100\npixels from the camera won’t be visible. By default, <code>near</code> is set to\n<code>0.1 * 800</code>, which is 1/10th the default distance between the camera and\nthe origin.</p>\n<p>The fourth parameter, <code>far</code>, is the distance from the camera to the far\nplane. For example, calling <code>myCamera.perspective(0.5, 1.5, 100, 10000)</code>\nsets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5,\nplaces the near plane 100 pixels from the camera, and places the far plane\n10,000 pixels from the camera. Any shapes drawn more than 10,000 pixels\nfrom the camera won’t be visible. By default, <code>far</code> is set to <code>10 * 800</code>,\nwhich is 10 times the default distance between the camera and the origin.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right.\n cam2.camera(400, -400, 800);\n\n // Set its fovy to 0.2.\n // Set its aspect to 1.5.\n // Set its near to 600.\n // Set its far to 1200.\n cam2.perspective(0.2, 1.5, 600, 1200);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between a frontal view and a skewed aerial view when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right.\n cam2.camera(400, -400, 800);\n\n // Set its fovy to 0.2.\n // Set its aspect to 1.5.\n // Set its near to 600.\n // Set its far to 1200.\n cam2.perspective(0.2, 1.5, 600, 1200);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube moves left and right on a gray background. The camera toggles between a frontal and a skewed aerial view when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin left and right.\n let x = 100 * sin(frameCount * 0.01);\n translate(x, 0, 0);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "fovy",
+ "description": "camera frustum vertical field of view. Defaults to\n<code>2 * atan(height / 2 / 800)</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "aspect",
+ "description": "camera frustum aspect ratio. Defaults to\n<code>width / height</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "near",
+ "description": "distance from the camera to the near clipping plane.\nDefaults to <code>0.1 * 800</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "far",
+ "description": "distance from the camera to the far clipping plane.\nDefaults to <code>10 * 800</code>.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Camera",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "message": "Missing item type\nReflect a vector about a normal to a line in 2D, or about a normal to a\nplane in 3D.",
- "line": " src/math/p5.Vector.js:3822"
+ "name": "ortho",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1413,
+ "itemtype": "method",
+ "description": "<p>Sets an orthographic projection for the camera.</p>\n<p>In an orthographic projection, shapes with the same size always appear the\nsame size, regardless of whether they are near or far from the camera.</p>\n<p><code>myCamera.ortho()</code> changes the camera’s perspective by changing its viewing\nfrustum from a truncated pyramid to a rectangular prism. The frustum is the\nvolume of space that’s visible to the camera. The camera is placed in front\nof the frustum and views everything within the frustum. <code>myCamera.ortho()</code>\nhas six optional parameters to define the viewing frustum.</p>\n<p>The first four parameters, <code>left</code>, <code>right</code>, <code>bottom</code>, and <code>top</code>, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\n<code>myCamera.ortho(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels\nwide and 400 pixels tall. By default, these dimensions are set based on\nthe sketch’s width and height, as in\n<code>myCamera.ortho(-width / 2, width / 2, -height / 2, height / 2)</code>.</p>\n<p>The last two parameters, <code>near</code> and <code>far</code>, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\n<code>myCamera.ortho(-100, 100, 200, -200, 50, 1000)</code> creates a frustum that’s\n200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and\nends 1,000 pixels from the camera. By default, <code>near</code> and <code>far</code> are set to\n0 and <code>max(width, height) + 800</code>, respectively.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Apply an orthographic projection.\n cam2.ortho();\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A row of white cubes against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Apply an orthographic projection.\n cam2.ortho();\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A row of white cubes slither like a snake against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n push();\n // Calculate the box's coordinates.\n let x = 10 * sin(frameCount * 0.02 + i * 0.6);\n let z = -40 * i;\n // Translate the origin.\n translate(x, 0, z);\n // Draw the box.\n box(10);\n pop();\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "left",
+ "description": "x-coordinate of the frustum’s left plane. Defaults to <code>-width / 2</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "right",
+ "description": "x-coordinate of the frustum’s right plane. Defaults to <code>width / 2</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "bottom",
+ "description": "y-coordinate of the frustum’s bottom plane. Defaults to <code>height / 2</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "top",
+ "description": "y-coordinate of the frustum’s top plane. Defaults to <code>-height / 2</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "near",
+ "description": "z-coordinate of the frustum’s near plane. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "far",
+ "description": "z-coordinate of the frustum’s far plane. Defaults to <code>max(width, height) + 800</code>.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Camera",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "message": "Missing item type\nReturn a representation of this vector as a float array. This is only\nfor temporary use. If used in any other fashion, the contents should be\ncopied by using the <b>p5.Vector.<a href=\"#/p5.Vector/copy\">copy()</a></b>\nmethod to copy into your own vector.",
- "line": " src/math/p5.Vector.js:3850"
+ "name": "frustum",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1546,
+ "itemtype": "method",
+ "description": "<p>Sets the camera's frustum.</p>\n<p>In a frustum projection, shapes that are further from the camera appear\nsmaller than shapes that are near the camera. This technique, called\nforeshortening, creates realistic 3D scenes.</p>\n<p><code>myCamera.frustum()</code> changes the camera’s perspective by changing its\nviewing frustum. The frustum is the volume of space that’s visible to the\ncamera. The frustum’s shape is a pyramid with its top cut off. The camera\nis placed where the top of the pyramid should be and points towards the\nbase of the pyramid. It views everything within the frustum.</p>\n<p>The first four parameters, <code>left</code>, <code>right</code>, <code>bottom</code>, and <code>top</code>, set the\ncoordinates of the frustum’s sides, bottom, and top. For example, calling\n<code>myCamera.frustum(-100, 100, 200, -200)</code> creates a frustum that’s 200\npixels wide and 400 pixels tall. By default, these coordinates are set\nbased on the sketch’s width and height, as in\n<code>myCamera.frustum(-width / 20, width / 20, height / 20, -height / 20)</code>.</p>\n<p>The last two parameters, <code>near</code> and <code>far</code>, set the distance of the\nfrustum’s near and far plane from the camera. For example, calling\n<code>myCamera.frustum(-100, 100, 200, -200, 50, 1000)</code> creates a frustum that’s\n200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and ends\n1,000 pixels from the camera. By default, near is set to <code>0.1 * 800</code>, which\nis 1/10th the default distance between the camera and the origin. <code>far</code> is\nset to <code>10 * 800</code>, which is 10 times the default distance between the\ncamera and the origin.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Adjust the frustum.\n // Center it.\n // Set its width and height to 20 pixels.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n cam2.frustum(-10, 10, -10, 10, 300, 350);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera zooms in on one cube when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "left",
+ "description": "x-coordinate of the frustum’s left plane. Defaults to <code>-width / 20</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "right",
+ "description": "x-coordinate of the frustum’s right plane. Defaults to <code>width / 20</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "bottom",
+ "description": "y-coordinate of the frustum’s bottom plane. Defaults to <code>height / 20</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "top",
+ "description": "y-coordinate of the frustum’s top plane. Defaults to <code>-height / 20</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "near",
+ "description": "z-coordinate of the frustum’s near plane. Defaults to <code>0.1 * 800</code>.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "far",
+ "description": "z-coordinate of the frustum’s far plane. Defaults to <code>10 * 800</code>.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Camera",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "message": "Missing item type\nEquality check against a <a href=\"#/p5.Vector\">p5.Vector</a>",
- "line": " src/math/p5.Vector.js:3866"
+ "name": "pan",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1775,
+ "itemtype": "method",
+ "description": "<p>Rotates the camera left and right.</p>\n<p>Panning rotates the camera without changing its position. The rotation\nhappens in the camera’s \"local\" space.</p>\n<p>The parameter, <code>angle</code>, is the angle the camera should rotate. Passing a\npositive angle, as in <code>myCamera.pan(0.001)</code>, rotates the camera to the\nright. Passing a negative angle, as in <code>myCamera.pan(-0.001)</code>, rotates the\ncamera to the left.</p>\n<p>Note: Angles are interpreted based on the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Pan with the camera.\n cam.pan(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "angle",
+ "description": "amount to rotate in the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.",
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Camera",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "message": "Missing item type\nHelper function for clampToZero",
- "line": " src/math/p5.Vector.js:3912"
+ "name": "tilt",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1840,
+ "itemtype": "method",
+ "description": "<p>Rotates the camera up and down.</p>\n<p>Tilting rotates the camera without changing its position. The rotation\nhappens in the camera’s \"local\" space.</p>\n<p>The parameter, <code>angle</code>, is the angle the camera should rotate. Passing a\npositive angle, as in <code>myCamera.tilt(0.001)</code>, rotates the camera down.\nPassing a negative angle, as in <code>myCamera.tilt(-0.001)</code>, rotates the camera\nup.</p>\n<p>Note: Angles are interpreted based on the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet cam;\nlet delta = 0.001;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(0, 0, 0);\n\n describe(\n 'A white cube on a gray background. The cube goes in and out of view as the camera tilts up and down.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Pan with the camera.\n cam.tilt(delta);\n\n // Switch directions every 120 frames.\n if (frameCount % 120 === 0) {\n delta *= -1;\n }\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "angle",
+ "description": "amount to rotate in the current\n<a href=\"#/p5/angleMode\">angleMode()</a>.",
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Camera",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "message": "Missing item type\nHelper function to measure ascent and descent.",
- "line": " src/typography/attributes.js:455"
+ "name": "lookAt",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 1926,
+ "itemtype": "method",
+ "description": "<p>Points the camera at a location.</p>\n<p><code>myCamera.lookAt()</code> changes the camera’s orientation without changing its\nposition.</p>\n<p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are the coordinates in \"world\" space\nwhere the camera should point. For example, calling\n<code>myCamera.lookAt(10, 20, 30)</code> points the camera at the coordinates\n<code>(10, 20, 30)</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to look at a different cube.\n\nlet cam;\nlet isLookingLeft = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Camera object.\n cam = createCamera();\n\n // Set the camera\n setCamera(cam);\n\n // Place the camera at the top-center.\n cam.setPosition(0, -400, 800);\n\n // Point the camera at the origin.\n cam.lookAt(-30, 0, 0);\n\n describe(\n 'A red cube and a blue cube on a gray background. The camera switches focus between the cubes when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box on the left.\n push();\n // Translate the origin to the left.\n translate(-30, 0, 0);\n // Style the box.\n fill(255, 0, 0);\n // Draw the box.\n box(20);\n pop();\n\n // Draw the box on the right.\n push();\n // Translate the origin to the right.\n translate(30, 0, 0);\n // Style the box.\n fill(0, 0, 255);\n // Draw the box.\n box(20);\n pop();\n}\n\n// Change the camera's focus when the user double-clicks.\nfunction doubleClicked() {\n if (isLookingLeft === true) {\n cam.lookAt(30, 0, 0);\n isLookingLeft = false;\n } else {\n cam.lookAt(-30, 0, 0);\n isLookingLeft = true;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the position where the camera should look in \"world\" space.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the position where the camera should look in \"world\" space.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z-coordinate of the position where the camera should look in \"world\" space.",
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Camera",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "message": "Missing item type\nReturns the set of opentype glyphs for the supplied string.\n\nNote that there is not a strict one-to-one mapping between characters\nand glyphs, so the list of returned glyphs can be larger or smaller\n than the length of the given string.",
- "line": " src/typography/p5.Font.js:403"
+ "name": "camera",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 2108,
+ "itemtype": "method",
+ "description": "<p>Sets the position and orientation of the camera.</p>\n<p><code>myCamera.camera()</code> allows objects to be viewed from different angles. It\nhas nine parameters that are all optional.</p>\n<p>The first three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are the coordinates of the\ncamera’s position in \"world\" space. For example, calling\n<code>myCamera.camera(0, 0, 0)</code> places the camera at the origin <code>(0, 0, 0)</code>. By\ndefault, the camera is placed at <code>(0, 0, 800)</code>.</p>\n<p>The next three parameters, <code>centerX</code>, <code>centerY</code>, and <code>centerZ</code> are the\ncoordinates of the point where the camera faces in \"world\" space. For\nexample, calling <code>myCamera.camera(0, 0, 0, 10, 20, 30)</code> places the camera\nat the origin <code>(0, 0, 0)</code> and points it at <code>(10, 20, 30)</code>. By default, the\ncamera points at the origin <code>(0, 0, 0)</code>.</p>\n<p>The last three parameters, <code>upX</code>, <code>upY</code>, and <code>upZ</code> are the components of\nthe \"up\" vector in \"local\" space. The \"up\" vector orients the camera’s\ny-axis. For example, calling\n<code>myCamera.camera(0, 0, 0, 10, 20, 30, 0, -1, 0)</code> places the camera at the\norigin <code>(0, 0, 0)</code>, points it at <code>(10, 20, 30)</code>, and sets the \"up\" vector\nto <code>(0, -1, 0)</code> which is like holding it upside-down. By default, the \"up\"\nvector is <code>(0, 1, 0)</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the top-right: (1200, -600, 100)\n // Point it at the row of boxes: (-10, -10, 400)\n // Set its \"up\" vector to the default: (0, 1, 0)\n cam2.camera(1200, -600, 100, -10, -10, 400, 0, 1, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a frontal and an aerial view when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it at the right: (1200, 0, 100)\n // Point it at the row of boxes: (-10, -10, 400)\n // Set its \"up\" vector to the default: (0, 1, 0)\n cam2.camera(1200, 0, 100, -10, -10, 400, 0, 1, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a static frontal view and an orbiting view when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's position.\n let x = 1200 * cos(frameCount * 0.01);\n let y = -600 * sin(frameCount * 0.01);\n cam2.camera(x, y, 100, -10, -10, 400, 0, 1, 0);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the camera. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the camera. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z-coordinate of the camera. Defaults to 800.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "centerX",
+ "description": "x-coordinate of the point the camera faces. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "centerY",
+ "description": "y-coordinate of the point the camera faces. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "centerZ",
+ "description": "z-coordinate of the point the camera faces. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "upX",
+ "description": "x-component of the camera’s \"up\" vector. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "upY",
+ "description": "x-component of the camera’s \"up\" vector. Defaults to 1.",
+ "optional": 1,
+ "type": "Number"
+ },
+ {
+ "name": "upZ",
+ "description": "z-component of the camera’s \"up\" vector. Defaults to 0.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Camera",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "message": "Missing item type\nReturns an opentype path for the supplied string and position.",
- "line": " src/typography/p5.Font.js:418"
+ "name": "move",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 2247,
+ "itemtype": "method",
+ "description": "<p>Moves the camera along its \"local\" axes without changing its orientation.</p>\n<p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are the distances the camera should\nmove. For example, calling <code>myCamera.move(10, 20, 30)</code> moves the camera 10\npixels to the right, 20 pixels down, and 30 pixels backward in its \"local\"\nspace.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click the canvas to begin detecting key presses.\n\nlet cam;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam = createCamera();\n\n // Place the camera at the top-right.\n cam.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam.lookAt(0, 0, 0);\n\n // Set the camera.\n setCamera(cam);\n\n describe(\n 'A white cube drawn against a gray background. The cube appears to move when the user presses certain keys.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Move the camera along its \"local\" axes\n // when the user presses certain keys.\n\n // Move horizontally.\n if (keyIsDown(LEFT_ARROW)) {\n cam.move(-1, 0, 0);\n }\n if (keyIsDown(RIGHT_ARROW)) {\n cam.move(1, 0, 0);\n }\n\n // Move vertically.\n if (keyIsDown(UP_ARROW)) {\n cam.move(0, -1, 0);\n }\n if (keyIsDown(DOWN_ARROW)) {\n cam.move(0, 1, 0);\n }\n\n // Move in/out of the screen.\n if (keyIsDown('i')) {\n cam.move(0, 0, -1);\n }\n if (keyIsDown('o')) {\n cam.move(0, 0, 1);\n }\n\n // Draw the box.\n box();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "distance to move along the camera’s \"local\" x-axis.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "distance to move along the camera’s \"local\" y-axis.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "distance to move along the camera’s \"local\" z-axis.",
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Camera",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "message": "Missing item type",
- "line": " src/webgl/3d_primitives.js:1359"
+ "name": "setPosition",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 2404,
+ "itemtype": "method",
+ "description": "<p>Sets the camera’s position in \"world\" space without changing its\norientation.</p>\n<p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are the coordinates where the camera\nshould be placed. For example, calling <code>myCamera.setPosition(10, 20, 30)</code>\nplaces the camera at coordinates <code>(10, 20, 30)</code> in \"world\" space.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it closer to the origin.\n cam2.setPosition(0, 0, 600);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles the amount of zoom when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet isDefaultCamera = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Place it closer to the origin.\n cam2.setPosition(0, 0, 600);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe(\n 'A row of white cubes against a gray background. The camera toggles between a static view and a view that zooms in and out when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's z-coordinate.\n let z = 100 * sin(frameCount * 0.01) + 700;\n cam2.setPosition(0, 0, z);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 500);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -30);\n box(10);\n }\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (isDefaultCamera === true) {\n setCamera(cam2);\n isDefaultCamera = false;\n } else {\n setCamera(cam1);\n isDefaultCamera = true;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate in \"world\" space.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate in \"world\" space.",
+ "type": "Number"
+ },
+ {
+ "name": "z",
+ "description": "z-coordinate in \"world\" space.",
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Camera",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "message": "Missing item type\nDraws a point, a coordinate in space at the dimension of one pixel,\ngiven x, y and z coordinates. The color of the point is determined\nby the current stroke, while the point size is determined by current\nstroke weight.",
- "line": " src/webgl/3d_primitives.js:2411"
+ "name": "set",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 2480,
+ "itemtype": "method",
+ "description": "<p>Sets the camera’s position, orientation, and projection by copying another\ncamera.</p>\n<p>The parameter, <code>cam</code>, is the <code>p5.Camera</code> object to copy. For example, calling\n<code>cam2.set(cam1)</code> will set <code>cam2</code> using <code>cam1</code>’s configuration.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to \"reset\" the camera zoom.\n\nlet cam1;\nlet cam2;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n cam1 = createCamera();\n\n // Place the camera at the top-right.\n cam1.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam1.lookAt(0, 0, 0);\n\n // Create the second camera.\n cam2 = createCamera();\n\n // Copy cam1's configuration.\n cam2.set(cam1);\n\n // Set the camera.\n setCamera(cam2);\n\n describe(\n 'A white cube drawn against a gray background. The camera slowly moves forward. The camera resets when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Update cam2's position.\n cam2.move(0, 0, -1);\n\n // Draw the box.\n box();\n}\n\n// \"Reset\" the camera when the user double-clicks.\nfunction doubleClicked() {\n cam2.set(cam1);\n}"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "cam",
+ "description": "camera to copy.",
+ "type": "p5.Camera"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Camera",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "message": "Missing item type\nDraw a line given two points",
- "line": " src/webgl/3d_primitives.js:2923"
+ "name": "slerp",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Camera.js",
+ "line": 2578,
+ "itemtype": "method",
+ "description": "<p>Sets the camera’s position and orientation to values that are in-between\nthose of two other cameras.</p>\n<p><code>myCamera.slerp()</code> uses spherical linear interpolation to calculate a\nposition and orientation that’s in-between two other cameras. Doing so is\nhelpful for transitioning smoothly between two perspectives.</p>\n<p>The first two parameters, <code>cam0</code> and <code>cam1</code>, are the <code>p5.Camera</code> objects\nthat should be used to set the current camera.</p>\n<p>The third parameter, <code>amt</code>, is the amount to interpolate between <code>cam0</code> and\n<code>cam1</code>. 0.0 keeps the camera’s position and orientation equal to <code>cam0</code>’s,\n0.5 sets them halfway between <code>cam0</code>’s and <code>cam1</code>’s , and 1.0 sets the\nposition and orientation equal to <code>cam1</code>’s.</p>\n<p>For example, calling <code>myCamera.slerp(cam0, cam1, 0.1)</code> sets cam’s position\nand orientation very close to <code>cam0</code>’s. Calling\n<code>myCamera.slerp(cam0, cam1, 0.9)</code> sets cam’s position and orientation very\nclose to <code>cam1</code>’s.</p>\n<p>Note: All of the cameras must use the same projection.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet cam;\nlet cam0;\nlet cam1;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the main camera.\n // Keep its default settings.\n cam = createCamera();\n\n // Create the first camera.\n // Keep its default settings.\n cam0 = createCamera();\n\n // Create the second camera.\n cam1 = createCamera();\n\n // Place it at the top-right.\n cam1.setPosition(400, -400, 800);\n\n // Point it at the origin.\n cam1.lookAt(0, 0, 0);\n\n // Set the current camera to cam.\n setCamera(cam);\n\n describe('A white cube drawn against a gray background. The camera slowly oscillates between a frontal view and an aerial view.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the amount to interpolate between cam0 and cam1.\n let amt = 0.5 * sin(frameCount * 0.01) + 0.5;\n\n // Update the main camera's position and orientation.\n cam.slerp(cam0, cam1, amt);\n\n box();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "cam0",
+ "description": "first camera.",
+ "type": "p5.Camera"
+ },
+ {
+ "name": "cam1",
+ "description": "second camera.",
+ "type": "p5.Camera"
+ },
+ {
+ "name": "amt",
+ "description": "amount of interpolation between 0.0 (<code>cam0</code>) and 1.0 (<code>cam1</code>).",
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Camera",
+ "static": false,
+ "module": "3D",
+ "submodule": "Camera"
},
{
- "message": "Missing item type",
- "line": " src/webgl/GeometryBuilder.js:4"
+ "name": "resize",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 184,
+ "itemtype": "method",
+ "description": "<p>Resizes the framebuffer to a given width and height.</p>\n<p>The parameters, <code>width</code> and <code>height</code>, set the dimensions of the\nframebuffer. For example, calling <code>myBuffer.resize(300, 500)</code> resizes\nthe framebuffer to 300×500 pixels, then sets <code>myBuffer.width</code> to 300\nand <code>myBuffer.height</code> 500.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('A multicolor sphere on a white surface. The image grows larger or smaller when the user moves the mouse, revealing a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(255);\n normalMaterial();\n sphere(20);\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -50, -50);\n}\n\n// Resize the p5.Framebuffer object when the\n// user moves the mouse.\nfunction mouseMoved() {\n myBuffer.resize(mouseX, mouseY);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "width",
+ "description": "width of the framebuffer.",
+ "type": "Number"
+ },
+ {
+ "name": "height",
+ "description": "height of the framebuffer.",
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Framebuffer",
+ "static": false,
+ "module": "Rendering"
},
{
- "message": "Missing item type",
- "line": " src/webgl/GeometryBuilder.js:21"
+ "name": "pixelDensity",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 287,
+ "itemtype": "method",
+ "description": "<p>Sets the framebuffer's pixel density or returns its current density.</p>\n<p>Computer displays are grids of little lights called pixels. A display's\npixel density describes how many pixels it packs into an area. Displays\nwith smaller pixels have a higher pixel density and create sharper\nimages.</p>\n<p>The parameter, <code>density</code>, is optional. If a number is passed, as in\n<code>myBuffer.pixelDensity(1)</code>, it sets the framebuffer's pixel density. By\ndefault, the framebuffer's pixel density will match that of the canvas\nwhere it was created. All canvases default to match the display's pixel\ndensity.</p>\n<p>Calling <code>myBuffer.pixelDensity()</code> without an argument returns its current\npixel density.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe(\"A white circle on a gray canvas. The circle's edge become fuzzy while the user presses and holds the mouse.\");\n}\n\nfunction draw() {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(200);\n circle(0, 0, 40);\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -50, -50);\n}\n\n// Decrease the pixel density when the user\n// presses the mouse.\nfunction mousePressed() {\n myBuffer.pixelDensity(1);\n}\n\n// Increase the pixel density when the user\n// releases the mouse.\nfunction mouseReleased() {\n myBuffer.pixelDensity(2);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet myBuffer;\nlet myFont;\n\nasync function setup() {\n // Load a font and create a p5.Font object.\n myFont = await loadFont('assets/inconsolata.otf');\n\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n // Get the p5.Framebuffer object's pixel density.\n let d = myBuffer.pixelDensity();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont(myFont);\n textSize(16);\n fill(0);\n\n // Display the pixel density.\n text(`Density: ${d}`, 0, 0);\n\n describe(`The text \"Density: ${d}\" written in black on a gray background.`);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "density",
+ "description": "pixel density to set.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "current pixel density.",
+ "type": "Number"
+ }
+ }
+ ],
+ "return": {
+ "description": "current pixel density.",
+ "type": "Number"
+ },
+ "class": "p5.Framebuffer",
+ "static": false,
+ "module": "Rendering"
},
{
- "message": "Missing item type",
- "line": " src/webgl/GeometryBuilder.js:31"
+ "name": "autoSized",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 356,
+ "itemtype": "method",
+ "description": "<p>Toggles the framebuffer's autosizing mode or returns the current mode.</p>\n<p>By default, the framebuffer automatically resizes to match the canvas\nthat created it. Calling <code>myBuffer.autoSized(false)</code> disables this\nbehavior and calling <code>myBuffer.autoSized(true)</code> re-enables it.</p>\n<p>Calling <code>myBuffer.autoSized()</code> without an argument returns <code>true</code> if\nthe framebuffer automatically resizes and <code>false</code> if not.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to toggle the autosizing mode.\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('A multicolor sphere on a gray background. The image resizes when the user moves the mouse.');\n}\n\nfunction draw() {\n background(50);\n\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(200);\n normalMaterial();\n sphere(width / 4);\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -width / 2, -height / 2);\n}\n\n// Resize the canvas when the user moves the mouse.\nfunction mouseMoved() {\n let w = constrain(mouseX, 0, 100);\n let h = constrain(mouseY, 0, 100);\n resizeCanvas(w, h);\n}\n\n// Toggle autoSizing when the user double-clicks.\n// Note: opened an issue to fix(?) this.\nfunction doubleClicked() {\n let isAuto = myBuffer.autoSized();\n myBuffer.autoSized(!isAuto);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "autoSized",
+ "description": "whether to automatically resize the framebuffer to match the canvas.",
+ "optional": 1,
+ "type": "Boolean"
+ }
+ ],
+ "return": {
+ "description": "current autosize setting.",
+ "type": "Boolean"
+ }
+ }
+ ],
+ "return": {
+ "description": "current autosize setting.",
+ "type": "Boolean"
+ },
+ "class": "p5.Framebuffer",
+ "static": false,
+ "module": "Rendering"
},
{
- "message": "Missing item type",
- "line": " src/webgl/GeometryBuilder.js:43"
+ "name": "createCamera",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 902,
+ "itemtype": "method",
+ "description": "<p>Creates a new\n<a href=\"#/p5.Camera\">p5.Camera</a> object to use with the framebuffer.</p>\n<p>The new camera is initialized with a default position <code>(0, 0, 800)</code> and a\ndefault perspective projection. Its properties can be controlled with\n<a href=\"#/p5.Camera\">p5.Camera</a> methods such as <code>myCamera.lookAt(0, 0, 0)</code>.</p>\n<p>Framebuffer cameras should be created between calls to\n<a href=\"#/p5.Framebuffer/begin\">myBuffer.begin()</a> and\n<a href=\"#/p5.Framebuffer/end\">myBuffer.end()</a> like so:</p>\n<pre><code class=\"language-js\">let myCamera;\n\nmyBuffer.begin();\n\n// Create the camera for the framebuffer.\nmyCamera = myBuffer.createCamera();\n\nmyBuffer.end();</code></pre><p>Calling <a href=\"#/p5/setCamera\">setCamera()</a> updates the\nframebuffer's projection using the camera.\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a> must also be called for the\nview to change properly:</p>\n<pre><code class=\"language-js\">myBuffer.begin();\n\n// Set the camera for the framebuffer.\nsetCamera(myCamera);\n\n// Reset all transformations.\nresetMatrix();\n\n// Draw stuff...\n\nmyBuffer.end();</code></pre>",
+ "example": [
+ "<div>\n<code>\n// Double-click to toggle between cameras.\n\nlet myBuffer;\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n // Create the cameras between begin() and end().\n myBuffer.begin();\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = myBuffer.createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = myBuffer.createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n myBuffer.end();\n\n describe(\n 'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(200);\n\n // Set the camera.\n if (usingCam1 === true) {\n setCamera(cam1);\n } else {\n setCamera(cam2);\n }\n\n // Reset all transformations.\n resetMatrix();\n\n // Draw the box.\n box();\n\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -50, -50);\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n usingCam1 = false;\n } else {\n usingCam1 = true;\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "new camera.",
+ "type": "p5.Camera"
+ }
+ }
+ ],
+ "return": {
+ "description": "new camera.",
+ "type": "p5.Camera"
+ },
+ "class": "p5.Framebuffer",
+ "static": false,
+ "module": "Rendering"
},
{
- "message": "Missing item type\nAdds geometry from the renderer's immediate mode into the builder's\ncombined geometry.",
- "line": " src/webgl/GeometryBuilder.js:80"
+ "name": "remove",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 991,
+ "itemtype": "method",
+ "description": "<p>Deletes the framebuffer from GPU memory.</p>\n<p>Calling <code>myBuffer.remove()</code> frees the GPU memory used by the framebuffer.\nThe framebuffer also uses a bit of memory on the CPU which can be freed\nlike so:</p>\n<pre><code class=\"language-js\">// Delete the framebuffer from GPU memory.\nmyBuffer.remove();\n\n// Delete the framebuffer from CPU memory.\nmyBuffer = undefined;</code></pre><p>Note: All variables that reference the framebuffer must be assigned\nthe value <code>undefined</code> to delete the framebuffer from CPU memory. If any\nvariable still refers to the framebuffer, then it won't be garbage\ncollected.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Double-click to remove the p5.Framebuffer object.\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create an options object.\n let options = { width: 60, height: 60 };\n\n // Create a p5.Framebuffer object and\n // configure it using options.\n myBuffer = createFramebuffer(options);\n\n describe('A white circle at the center of a dark gray square disappears when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the p5.Framebuffer object if\n // it's available.\n if (myBuffer) {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(100);\n circle(0, 0, 20);\n myBuffer.end();\n\n image(myBuffer, -30, -30);\n }\n}\n\n// Remove the p5.Framebuffer object when the\n// the user double-clicks.\nfunction doubleClicked() {\n // Delete the framebuffer from GPU memory.\n myBuffer.remove();\n\n // Delete the framebuffer from CPU memory.\n myBuffer = undefined;\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.Framebuffer",
+ "static": false,
+ "module": "Rendering"
},
{
- "message": "Missing item type\nAdds geometry from the renderer's retained mode into the builder's\ncombined geometry.",
- "line": " src/webgl/GeometryBuilder.js:114"
+ "name": "begin",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 1055,
+ "itemtype": "method",
+ "description": "<p>Begins drawing shapes to the framebuffer.</p>\n<p><code>myBuffer.begin()</code> and <a href=\"#/p5.Framebuffer/end\">myBuffer.end()</a>\nallow shapes to be drawn to the framebuffer. <code>myBuffer.begin()</code> begins\ndrawing to the framebuffer and\n<a href=\"#/p5.Framebuffer/end\">myBuffer.end()</a> stops drawing to the\nframebuffer. Changes won't be visible until the framebuffer is displayed\nas an image or texture.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n background(50);\n rotateY(frameCount * 0.01);\n normalMaterial();\n torus(30);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Display the p5.Framebuffer object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(myBuffer, -50, -50);\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.Framebuffer",
+ "static": false,
+ "module": "Rendering"
},
{
- "message": "Missing item type\nCleans up the state of the renderer and returns the combined geometry that\nwas built.",
- "line": " src/webgl/GeometryBuilder.js:122"
+ "name": "end",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 1193,
+ "itemtype": "method",
+ "description": "<p>Stops drawing shapes to the framebuffer.</p>\n<p><a href=\"#/p5.Framebuffer/begin\">myBuffer.begin()</a> and <code>myBuffer.end()</code>\nallow shapes to be drawn to the framebuffer.\n<a href=\"#/p5.Framebuffer/begin\">myBuffer.begin()</a> begins drawing to\nthe framebuffer and <code>myBuffer.end()</code> stops drawing to the framebuffer.\nChanges won't be visible until the framebuffer is displayed as an image\nor texture.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n background(50);\n rotateY(frameCount * 0.01);\n normalMaterial();\n torus(30);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Display the p5.Framebuffer object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(myBuffer, -50, -50);\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.Framebuffer",
+ "static": false,
+ "module": "Rendering"
},
{
- "message": "Missing item type\nKeeps track of how many custom geometry objects have been made so that each\ncan be assigned a unique ID.",
- "line": " src/webgl/GeometryBuilder.js:133"
+ "name": "draw",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 1269,
+ "itemtype": "method",
+ "description": "<p>Draws to the framebuffer by calling a function that contains drawing\ninstructions.</p>\n<p>The parameter, <code>callback</code>, is a function with the drawing instructions\nfor the framebuffer. For example, calling <code>myBuffer.draw(myFunction)</code>\nwill call a function named <code>myFunction()</code> to draw to the framebuffer.\nDoing so has the same effect as the following:</p>\n<pre><code class=\"language-js\">myBuffer.begin();\nmyFunction();\nmyBuffer.end();</code></pre>",
+ "example": [
+ "<div>\n<code>\n// Click the canvas to display the framebuffer.\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw to the p5.Framebuffer object.\n myBuffer.draw(bagel);\n\n // Display the p5.Framebuffer object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(myBuffer, -50, -50);\n }\n}\n\n// Draw a rotating, multicolor torus.\nfunction bagel() {\n background(50);\n rotateY(frameCount * 0.01);\n normalMaterial();\n torus(30);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "callback",
+ "description": "function that draws to the framebuffer.",
+ "type": "Function"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Framebuffer",
+ "static": false,
+ "module": "Rendering"
},
{
- "message": "Missing item type\nParse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:\n\nv -0.5 -0.5 0.5\nv -0.5 -0.5 -0.5\nv -0.5 0.5 -0.5\nv -0.5 0.5 0.5\n\nf 4 3 2 1",
- "line": " src/webgl/loading.js:551"
+ "name": "get",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Framebuffer.js",
+ "line": 1379,
+ "itemtype": "method",
+ "description": "<p>Gets a pixel or a region of pixels from the framebuffer.</p>\n<p><code>myBuffer.get()</code> is easy to use but it's not as fast as\n<a href=\"#/p5.Framebuffer/pixels\">myBuffer.pixels</a>. Use\n<a href=\"#/p5.Framebuffer/pixels\">myBuffer.pixels</a> to read many pixel\nvalues.</p>\n<p>The version of <code>myBuffer.get()</code> with no parameters returns the entire\nframebuffer as a a <a href=\"#/p5.Image\">p5.Image</a> object.</p>\n<p>The version of <code>myBuffer.get()</code> with two parameters interprets them as\ncoordinates. It returns an array with the <code>[R, G, B, A]</code> values of the\npixel at the given point.</p>\n<p>The version of <code>myBuffer.get()</code> with four parameters interprets them as\ncoordinates and dimensions. It returns a subsection of the framebuffer as\na <a href=\"#/p5.Image\">p5.Image</a> object. The first two parameters are\nthe coordinates for the upper-left corner of the subsection. The last two\nparameters are the width and height of the subsection.</p>\n",
+ "example": [],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "x",
+ "description": "x-coordinate of the pixel. Defaults to 0.",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "description": "y-coordinate of the pixel. Defaults to 0.",
+ "type": "Number"
+ },
+ {
+ "name": "w",
+ "description": "width of the subsection to be returned.",
+ "type": "Number"
+ },
+ {
+ "name": "h",
+ "description": "height of the subsection to be returned.",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "p5.Image"
+ }
+ },
+ {
+ "params": [],
+ "return": {
+ "description": "entire framebuffer as a <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "p5.Image"
+ }
+ },
+ {
+ "params": [
+ {
+ "name": "x",
+ "type": "Number"
+ },
+ {
+ "name": "y",
+ "type": "Number"
+ }
+ ],
+ "return": {
+ "description": "color of the pixel at <code>(x, y)</code> as an array of color values <code>[R, G, B, A]</code>.",
+ "type": "Number[]"
+ }
+ }
+ ],
+ "return": {
+ "description": "subsection as a <a href=\"#/p5.Image\">p5.Image</a> object.",
+ "type": "p5.Image"
+ },
+ "class": "p5.Framebuffer",
+ "static": false,
+ "module": "Rendering"
},
{
- "message": "Missing item type\nSTL files can be of two types, ASCII and Binary,\n\nWe need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.",
- "line": " src/webgl/loading.js:695"
+ "name": "calculateBoundingBox",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 170,
+ "itemtype": "method",
+ "description": "<p>Calculates the position and size of the smallest box that contains the geometry.</p>\n<p>A bounding box is the smallest rectangular prism that contains the entire\ngeometry. It's defined by the box's minimum and maximum coordinates along\neach axis, as well as the size (length) and offset (center).</p>\n<p>Calling <code>myGeometry.calculateBoundingBox()</code> returns an object with four\nproperties that describe the bounding box:</p>\n<pre><code class=\"language-js\">// Get myGeometry's bounding box.\nlet bbox = myGeometry.calculateBoundingBox();\n\n// Print the bounding box to the console.\nconsole.log(bbox);\n\n// {\n// // The minimum coordinate along each axis.\n// min: { x: -1, y: -2, z: -3 },\n//\n// // The maximum coordinate along each axis.\n// max: { x: 1, y: 2, z: 3},\n//\n// // The size (length) along each axis.\n// size: { x: 2, y: 4, z: 6},\n//\n// // The offset (center) along each axis.\n// offset: { x: 0, y: 0, z: 0}\n// }</code></pre>",
+ "example": [
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet particles;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a new p5.Geometry object with random spheres.\n particles = buildGeometry(createParticles);\n\n describe('Ten white spheres placed randomly against a gray background. A box encloses the spheres.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the particles.\n noStroke();\n fill(255);\n\n // Draw the particles.\n model(particles);\n\n // Calculate the bounding box.\n let bbox = particles.calculateBoundingBox();\n\n // Translate to the bounding box's center.\n translate(bbox.offset.x, bbox.offset.y, bbox.offset.z);\n\n // Style the bounding box.\n stroke(255);\n noFill();\n\n // Draw the bounding box.\n box(bbox.size.x, bbox.size.y, bbox.size.z);\n}\n\nfunction createParticles() {\n for (let i = 0; i < 10; i += 1) {\n // Calculate random coordinates.\n let x = randomGaussian(0, 15);\n let y = randomGaussian(0, 15);\n let z = randomGaussian(0, 15);\n\n push();\n // Translate to the particle's coordinates.\n translate(x, y, z);\n // Draw the particle.\n sphere(3);\n pop();\n }\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "bounding box of the geometry.",
+ "type": "Object"
+ }
+ }
+ ],
+ "return": {
+ "description": "bounding box of the geometry.",
+ "type": "Object"
+ },
+ "class": "p5.Geometry",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "message": "Missing item type\nThis function checks if the file is in ASCII format or in Binary format\n\nIt is done by searching keyword `solid` at the start of the file.\n\nAn ASCII STL data must begin with `solid` as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the `d` are known to be\nplentiful. So, check the first 5 bytes for `solid`.\n\nSeveral encodings, such as UTF-8, precede the text with up to 5 bytes:\nhttps://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\nSearch for `solid` to start anywhere after those prefixes.",
- "line": " src/webgl/loading.js:722"
+ "name": "clearColors",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 315,
+ "itemtype": "method",
+ "description": "<p>Removes the geometry’s internal colors.</p>\n<p><code>p5.Geometry</code> objects can be created with \"internal colors\" assigned to\nvertices or the entire shape. When a geometry has internal colors,\n<a href=\"#/p5/fill\">fill()</a> has no effect. Calling\n<code>myGeometry.clearColors()</code> allows the\n<a href=\"#/p5/fill\">fill()</a> function to apply color to the geometry.</p>\n",
+ "example": [
+ "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Geometry object.\n // Set its internal color to red.\n let myGeometry = buildGeometry(function() {\n fill(255, 0, 0);\n plane(20);\n });\n\n // Style the shape.\n noStroke();\n\n // Draw the p5.Geometry object (center).\n model(myGeometry);\n\n // Translate the origin to the bottom-right.\n translate(25, 25, 0);\n\n // Try to fill the geometry with green.\n fill(0, 255, 0);\n\n // Draw the geometry again (bottom-right).\n model(myGeometry);\n\n // Clear the geometry's colors.\n myGeometry.clearColors();\n\n // Fill the geometry with blue.\n fill(0, 0, 255);\n\n // Translate the origin up.\n translate(0, -50, 0);\n\n // Draw the geometry again (top-right).\n model(myGeometry);\n\n describe(\n 'Three squares drawn against a gray background. Red squares are at the center and the bottom-right. A blue square is at the top-right.'\n );\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.Geometry",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "message": "Missing item type\nThis function matches the `query` at the provided `offset`",
- "line": " src/webgl/loading.js:749"
+ "name": "flipU",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 623,
+ "itemtype": "method",
+ "description": "<p>Flips the geometry’s texture u-coordinates.</p>\n<p>In order for <a href=\"#/p5/texture\">texture()</a> to work, the geometry\nneeds a way to map the points on its surface to the pixels in a rectangular\nimage that's used as a texture. The geometry's vertex at coordinates\n<code>(x, y, z)</code> maps to the texture image's pixel at coordinates <code>(u, v)</code>.</p>\n<p>The <a href=\"#/p5.Geometry/uvs\">myGeometry.uvs</a> array stores the\n<code>(u, v)</code> coordinates for each vertex in the order it was added to the\ngeometry. Calling <code>myGeometry.flipU()</code> flips a geometry's u-coordinates\nso that the texture appears mirrored horizontally.</p>\n<p>For example, a plane's four vertices are added clockwise starting from the\ntop-left corner. Here's how calling <code>myGeometry.flipU()</code> would change a\nplane's texture coordinates:</p>\n<pre><code class=\"language-js\">// Print the original texture coordinates.\n// Output: [0, 0, 1, 0, 0, 1, 1, 1]\nconsole.log(myGeometry.uvs);\n\n// Flip the u-coordinates.\nmyGeometry.flipU();\n\n// Print the flipped texture coordinates.\n// Output: [1, 0, 0, 0, 1, 1, 0, 1]\nconsole.log(myGeometry.uvs);\n\n// Notice the swaps:\n// Top vertices: [0, 0, 1, 0] --> [1, 0, 0, 0]\n// Bottom vertices: [0, 1, 1, 1] --> [1, 1, 0, 1]</code></pre>",
+ "example": [
+ "<div>\n<code>\nlet img;\n\nasync function setup() {\n img = await loadImage('assets/laDefense.jpg');\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create p5.Geometry objects.\n let geom1 = buildGeometry(createShape);\n let geom2 = buildGeometry(createShape);\n\n // Flip geom2's U texture coordinates.\n geom2.flipU();\n\n // Left (original).\n push();\n translate(-25, 0, 0);\n texture(img);\n noStroke();\n model(geom1);\n pop();\n\n // Right (flipped).\n push();\n translate(25, 0, 0);\n texture(img);\n noStroke();\n model(geom2);\n pop();\n\n describe(\n 'Two photos of a ceiling on a gray background. The photos are mirror images of each other.'\n );\n}\n\nfunction createShape() {\n plane(40);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.Geometry",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "message": "Missing item type\nThis function parses the Binary STL files.\nhttps://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL\n\nCurrently there is no support for the colors provided in STL files.",
- "line": " src/webgl/loading.js:761"
+ "name": "computeFaces",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 854,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Computes the geometry's faces using its vertices.</p>\n<p>All 3D shapes are made by connecting sets of points called vertices. A\ngeometry's surface is formed by connecting vertices to form triangles that\nare stitched together. Each triangular patch on the geometry's surface is\ncalled a face. <code>myGeometry.computeFaces()</code> performs the math needed to\ndefine each face based on the distances between vertices.</p>\n<p>The geometry's vertices are stored as <a href=\"#/p5.Vector\">p5.Vector</a>\nobjects in the <a href=\"#/p5.Geometry/vertices\">myGeometry.vertices</a>\narray. The geometry's first vertex is the\n<a href=\"#/p5.Vector\">p5.Vector</a> object at <code>myGeometry.vertices[0]</code>,\nits second vertex is <code>myGeometry.vertices[1]</code>, its third vertex is\n<code>myGeometry.vertices[2]</code>, and so on.</p>\n<p>Calling <code>myGeometry.computeFaces()</code> fills the\n<a href=\"#/p5.Geometry/faces\">myGeometry.faces</a> array with three-element\narrays that list the vertices that form each face. For example, a geometry\nmade from a rectangle has two faces because a rectangle is made by joining\ntwo triangles. <a href=\"#/p5.Geometry/faces\">myGeometry.faces</a> for a\nrectangle would be the two-dimensional array\n<code>[[0, 1, 2], [2, 1, 3]]</code>. The first face, <code>myGeometry.faces[0]</code>, is the\narray <code>[0, 1, 2]</code> because it's formed by connecting\n<code>myGeometry.vertices[0]</code>, <code>myGeometry.vertices[1]</code>,and\n<code>myGeometry.vertices[2]</code>. The second face, <code>myGeometry.faces[1]</code>, is the\narray <code>[2, 1, 3]</code> because it's formed by connecting\n<code>myGeometry.vertices[2]</code>, <code>myGeometry.vertices[1]</code>, and\n<code>myGeometry.vertices[3]</code>.</p>\n<p>Note: <code>myGeometry.computeFaces()</code> only works when geometries have four or more vertices.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = new p5.Geometry();\n\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(0, 40, 0);\n let v3 = createVector(40, 0, 0);\n\n // Add the vertices to myGeometry's vertices array.\n myGeometry.vertices.push(v0, v1, v2, v3);\n\n // Compute myGeometry's faces array.\n myGeometry.computeFaces();\n\n describe('A red square drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the shape.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object using a callback function.\n myGeometry = new p5.Geometry(1, 1, createShape);\n\n describe('A red square drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the shape.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(0, 40, 0);\n let v3 = createVector(40, 0, 0);\n\n // Add the vertices to the p5.Geometry object's vertices array.\n this.vertices.push(v0, v1, v2, v3);\n\n // Compute the faces array.\n this.computeFaces();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.Geometry",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "message": "Missing item type\nASCII STL file starts with `solid 'nameOfFile'`\nThen contain the normal of the face, starting with `facet normal`\nNext contain a keyword indicating the start of face vertex, `outer loop`\nNext comes the three vertex, starting with `vertex x y z`\nVertices ends with `endloop`\nFace ends with `endfacet`\nNext face starts with `facet normal`\nThe end of the file is indicated by `endsolid`",
- "line": " src/webgl/loading.js:849"
+ "name": "computeNormals",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 1199,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Calculates the normal vector for each vertex on the geometry.</p>\n<p>All 3D shapes are made by connecting sets of points called vertices. A\ngeometry's surface is formed by connecting vertices to create triangles\nthat are stitched together. Each triangular patch on the geometry's\nsurface is called a face. <code>myGeometry.computeNormals()</code> performs the\nmath needed to orient each face. Orientation is important for lighting\nand other effects.</p>\n<p>A face's orientation is defined by its normal vector which points out\nof the face and is normal (perpendicular) to the surface. Calling\n<code>myGeometry.computeNormals()</code> first calculates each face's normal vector.\nThen it calculates the normal vector for each vertex by averaging the\nnormal vectors of the faces surrounding the vertex. The vertex normals\nare stored as <a href=\"#/p5.Vector\">p5.Vector</a> objects in the\n<a href=\"#/p5.Geometry/vertexNormals\">myGeometry.vertexNormals</a> array.</p>\n<p>The first parameter, <code>shadingType</code>, is optional. Passing the constant\n<code>FLAT</code>, as in <code>myGeometry.computeNormals(FLAT)</code>, provides neighboring\nfaces with their own copies of the vertices they share. Surfaces appear\ntiled with flat shading. Passing the constant <code>SMOOTH</code>, as in\n<code>myGeometry.computeNormals(SMOOTH)</code>, makes neighboring faces reuse their\nshared vertices. Surfaces appear smoother with smooth shading. By\ndefault, <code>shadingType</code> is <code>FLAT</code>.</p>\n<p>The second parameter, <code>options</code>, is also optional. If an object with a\n<code>roundToPrecision</code> property is passed, as in\n<code>myGeometry.computeNormals(SMOOTH, { roundToPrecision: 5 })</code>, it sets the\nnumber of decimal places to use for calculations. By default,\n<code>roundToPrecision</code> uses 3 decimal places.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(function() {\n torus();\n });\n\n // Compute the vertex normals.\n myGeometry.computeNormals();\n\n describe(\n \"A white torus drawn on a dark gray background. Red lines extend outward from the torus' vertices.\"\n );\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(1);\n\n // Style the helix.\n stroke(0);\n\n // Display the helix.\n model(myGeometry);\n\n // Style the normal vectors.\n stroke(255, 0, 0);\n\n // Iterate over the vertices and vertexNormals arrays.\n for (let i = 0; i < myGeometry.vertices.length; i += 1) {\n\n // Get the vertex p5.Vector object.\n let v = myGeometry.vertices[i];\n\n // Get the vertex normal p5.Vector object.\n let n = myGeometry.vertexNormals[i];\n\n // Calculate a point along the vertex normal.\n let p = p5.Vector.mult(n, 5);\n\n // Draw the vertex normal as a red line.\n push();\n translate(v);\n line(0, 0, 0, p.x, p.y, p.z);\n pop();\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object using a callback function.\n myGeometry = new p5.Geometry();\n\n // Create p5.Vector objects to position the vertices.\n let v0 = createVector(-40, 0, 0);\n let v1 = createVector(0, -40, 0);\n let v2 = createVector(0, 40, 0);\n let v3 = createVector(40, 0, 0);\n\n // Add the vertices to the p5.Geometry object's vertices array.\n myGeometry.vertices.push(v0, v1, v2, v3);\n\n // Compute the faces array.\n myGeometry.computeFaces();\n\n // Compute the surface normals.\n myGeometry.computeNormals();\n\n describe('A red square drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a white point light.\n pointLight(255, 255, 255, 0, 0, 10);\n\n // Style the p5.Geometry object.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the p5.Geometry object.\n model(myGeometry);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(createShape);\n\n // Compute normals using default (FLAT) shading.\n myGeometry.computeNormals(FLAT);\n\n describe('A white, helical structure drawn on a dark gray background. Its faces appear faceted.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(1);\n\n // Style the helix.\n noStroke();\n\n // Display the helix.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create a helical shape.\n beginShape();\n for (let i = 0; i < TWO_PI * 3; i += 0.5) {\n let x = 30 * cos(i);\n let y = 30 * sin(i);\n let z = map(i, 0, TWO_PI * 3, -40, 40);\n vertex(x, y, z);\n }\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(createShape);\n\n // Compute normals using smooth shading.\n myGeometry.computeNormals(SMOOTH);\n\n describe('A white, helical structure drawn on a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(1);\n\n // Style the helix.\n noStroke();\n\n // Display the helix.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create a helical shape.\n beginShape();\n for (let i = 0; i < TWO_PI * 3; i += 0.5) {\n let x = 30 * cos(i);\n let y = 30 * sin(i);\n let z = map(i, 0, TWO_PI * 3, -40, 40);\n vertex(x, y, z);\n }\n endShape();\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Geometry object.\n myGeometry = buildGeometry(createShape);\n\n // Create an options object.\n let options = { roundToPrecision: 5 };\n\n // Compute normals using smooth shading.\n myGeometry.computeNormals(SMOOTH, options);\n\n describe('A white, helical structure drawn on a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(1);\n\n // Style the helix.\n noStroke();\n\n // Display the helix.\n model(myGeometry);\n}\n\nfunction createShape() {\n // Create a helical shape.\n beginShape();\n for (let i = 0; i < TWO_PI * 3; i += 0.5) {\n let x = 30 * cos(i);\n let y = 30 * sin(i);\n let z = map(i, 0, TWO_PI * 3, -40, 40);\n vertex(x, y, z);\n }\n endShape();\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "shadingType",
+ "description": "shading type. either FLAT or SMOOTH. Defaults to <code>FLAT</code>.",
+ "optional": 1,
+ "type": "FLAT|SMOOTH"
+ },
+ {
+ "name": "options",
+ "description": "shading options.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Geometry",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "message": "Missing item type",
- "line": " src/webgl/material.js:3185"
+ "name": "makeEdgesFromFaces",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 1391,
+ "itemtype": "method",
+ "description": "",
+ "example": [
+ "<div>\n<code>\nlet tetrahedron;\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n describe('A rotating tetrahedron');\n\n tetrahedron = new p5.Geometry();\n\n // Give each geometry a unique gid\n tetrahedron.gid = 'tetrahedron';\n\n // Add four points of the tetrahedron\n\n let radius = 50;\n // A 2D triangle:\n tetrahedron.vertices.push(createVector(radius, 0, 0));\n tetrahedron.vertices.push(createVector(radius, 0, 0).rotate(TWO_PI / 3));\n tetrahedron.vertices.push(createVector(radius, 0, 0).rotate(TWO_PI * 2 / 3));\n // Add a tip in the z axis:\n tetrahedron.vertices.push(createVector(0, 0, radius));\n\n // Create the four faces by connecting the sets of three points\n tetrahedron.faces.push([0, 1, 2]);\n tetrahedron.faces.push([0, 1, 3]);\n tetrahedron.faces.push([0, 2, 3]);\n tetrahedron.faces.push([1, 2, 3]);\n tetrahedron.makeEdgesFromFaces();\n}\nfunction draw() {\n background(200);\n strokeWeight(2);\n orbitControl();\n rotateY(millis() * 0.001);\n model(tetrahedron);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.Geometry",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "message": "Missing item type",
- "line": " src/webgl/material.js:3225"
+ "name": "normalize",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 1711,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Transforms the geometry's vertices to fit snugly within a 100×100×100 box\ncentered at the origin.</p>\n<p>Calling <code>myGeometry.normalize()</code> translates the geometry's vertices so that\nthey're centered at the origin <code>(0, 0, 0)</code>. Then it scales the vertices so\nthat they fill a 100×100×100 box. As a result, small geometries will grow\nand large geometries will shrink.</p>\n<p>Note: <code>myGeometry.normalize()</code> only works when called in the\n<a href=\"#/p5/setup\">setup()</a> function.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet myGeometry;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a very small torus.\n myGeometry = buildGeometry(function() {;\n torus(1, 0.25);\n });\n\n // Normalize the torus so its vertices fill\n // the range [-100, 100].\n myGeometry.normalize();\n\n describe('A white torus rotates slowly against a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Turn on the lights.\n lights();\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Style the torus.\n noStroke();\n\n // Draw the torus.\n model(myGeometry);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.Geometry",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "message": "Missing item type\nAn internal class to store data that will be sent to a p5.RenderBuffer.\nThose need to eventually go into a Float32Array, so this class provides a\nvariable-length array container backed by a Float32Array so that it can be\nsent to the GPU without allocating a new array each frame.\n\nLike a C++ vector, its fixed-length Float32Array backing its contents will\ndouble in size when it goes over its capacity.",
- "line": " src/webgl/p5.DataArray.js:3"
+ "name": "vertexProperty",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Geometry.js",
+ "line": 1842,
+ "itemtype": "method",
+ "description": "<p>Sets the shader's vertex property or attribute variables.</p>\n<p>A vertex property, or vertex attribute, is a variable belonging to a vertex in a shader. p5.js provides some\ndefault properties, such as <code>aPosition</code>, <code>aNormal</code>, <code>aVertexColor</code>, etc. These are\nset using <a href=\"#/p5/vertex\">vertex()</a>, <a href=\"#/p5/normal\">normal()</a>\nand <a href=\"#/p5/fill\">fill()</a> respectively. Custom properties can also\nbe defined within <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a>.</p>\n<p>The first parameter, <code>propertyName</code>, is a string with the property's name.\nThis is the same variable name which should be declared in the shader, as in\n<code>in vec3 aProperty</code>, similar to .<code>setUniform()</code>.</p>\n<p>The second parameter, <code>data</code>, is the value assigned to the shader variable. This value\nwill be pushed directly onto the Geometry object. There should be the same number\nof custom property values as vertices, this method should be invoked once for each\nvertex.</p>\n<p>The <code>data</code> can be a Number or an array of numbers. Tn the shader program the type\ncan be declared according to the WebGL specification. Common types include <code>float</code>,\n<code>vec2</code>, <code>vec3</code>, <code>vec4</code> or matrices.</p>\n<p>See also the global <a href=\"#/p5/vertexProperty\">vertexProperty()</a> function.</p>\n",
+ "example": [
+ "<div>\n<code>\nlet geo;\n\nfunction cartesianToSpherical(x, y, z) {\n let r = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));\n let theta = acos(z / r);\n let phi = atan2(y, x);\n return { theta, phi };\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Modify the material shader to display roughness.\n const myShader = baseMaterialShader().modify({\n vertexDeclarations:`in float aRoughness;\n out float vRoughness;`,\n fragmentDeclarations: 'in float vRoughness;',\n 'void afterVertex': `() {\n vRoughness = aRoughness;\n }`,\n 'vec4 combineColors': `(ColorComponents components) {\n vec4 color = vec4(0.);\n color.rgb += components.diffuse * components.baseColor * (1.0-vRoughness);\n color.rgb += components.ambient * components.ambientColor;\n color.rgb += components.specular * components.specularColor * (1.0-vRoughness);\n color.a = components.opacity;\n return color;\n }`\n });\n\n // Create the Geometry object.\n geo = buildGeometry(function() {\n fill('hotpink');\n sphere(45, 50, 50);\n });\n\n // Set the roughness value for every vertex.\n for (let v of geo.vertices){\n\n // convert coordinates to spherical coordinates\n let spherical = cartesianToSpherical(v.x, v.y, v.z);\n\n // Set the custom roughness vertex property.\n let roughness = noise(spherical.theta*5, spherical.phi*5);\n geo.vertexProperty('aRoughness', roughness);\n }\n\n // Use the custom shader.\n shader(myShader);\n\n describe('A rough pink sphere rotating on a blue background.');\n}\n\nfunction draw() {\n // Set some styles and lighting\n background('lightblue');\n noStroke();\n\n specularMaterial(255,125,100);\n shininess(2);\n\n directionalLight('white', -1, 1, -1);\n ambientLight(320);\n\n rotateY(millis()*0.001);\n\n // Draw the geometry\n model(geo);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "propertyName",
+ "description": "the name of the vertex property.",
+ "type": "String"
+ },
+ {
+ "name": "data",
+ "description": "the data tied to the vertex property.",
+ "type": "Number|Number[]"
+ },
+ {
+ "name": "size",
+ "description": "optional size of each unit of data.",
+ "optional": 1,
+ "type": "Number"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Geometry",
+ "static": false,
+ "module": "Shape",
+ "submodule": "3D Primitives"
},
{
- "message": "Missing item type\nReturns a Float32Array window sized to the exact length of the data",
- "line": " src/webgl/p5.DataArray.js:35"
+ "name": "version",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Shader.js",
+ "line": 180,
+ "itemtype": "method",
+ "description": "<p>Shaders are written in <a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\">GLSL</a>, but\nthere are different versions of GLSL that it might be written in.</p>\n<p>Calling this method on a <code>p5.Shader</code> will return the GLSL version it uses, either <code>100 es</code> or <code>300 es</code>.\nWebGL 1 shaders will only use <code>100 es</code>, and WebGL 2 shaders may use either.</p>\n",
+ "example": [],
+ "overloads": [
+ {
+ "params": [],
+ "return": {
+ "description": "The GLSL version used by the shader.",
+ "type": "String"
+ }
+ }
+ ],
+ "return": {
+ "description": "The GLSL version used by the shader.",
+ "type": "String"
+ },
+ "class": "p5.Shader",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "message": "Missing item type\nA \"soft\" clear, which keeps the underlying storage size the same, but\nempties the contents of its dataArray()",
- "line": " src/webgl/p5.DataArray.js:42"
+ "name": "inspectHooks",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Shader.js",
+ "line": 252,
+ "itemtype": "method",
+ "description": "<p>Logs the hooks available in this shader, and their current implementation.</p>\n<p>Each shader may let you override bits of its behavior. Each bit is called\na hook. A hook is either for the vertex shader, if it affects the\nposition of vertices, or in the fragment shader, if it affects the pixel\ncolor. This method logs those values to the console, letting you know what\nyou are able to use in a call to\n<a href=\"#/p5.Shader/modify\"><code>modify()</code></a>.</p>\n<p>For example, this shader will produce the following output:</p>\n<pre><code class=\"language-js\">myShader = baseMaterialShader().modify({\n declarations: 'uniform float time;',\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n});\nmyShader.inspectHooks();</code></pre><pre><code>==== Vertex shader hooks: ====\nvoid beforeVertex() {}\nvec3 getLocalPosition(vec3 position) { return position; }\n[MODIFIED] vec3 getWorldPosition(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }\nvec3 getLocalNormal(vec3 normal) { return normal; }\nvec3 getWorldNormal(vec3 normal) { return normal; }\nvec2 getUV(vec2 uv) { return uv; }\nvec4 getVertexColor(vec4 color) { return color; }\nvoid afterVertex() {}\n\n==== Fragment shader hooks: ====\nvoid beforeFragment() {}\nInputs getPixelInputs(Inputs inputs) { return inputs; }\nvec4 combineColors(ColorComponents components) {\n vec4 color = vec4(0.);\n color.rgb += components.diffuse * components.baseColor;\n color.rgb += components.ambient * components.ambientColor;\n color.rgb += components.specular * components.specularColor;\n color.rgb += components.emissive;\n color.a = components.opacity;\n return color;\n }\nvec4 getFinalColor(vec4 color) { return color; }\nvoid afterFragment() {}</code></pre>",
+ "example": [],
+ "overloads": [
+ {
+ "params": []
+ }
+ ],
+ "class": "p5.Shader",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "message": "Missing item type\nCan be used to scale a DataArray back down to fit its contents.",
- "line": " src/webgl/p5.DataArray.js:50"
+ "name": "modify",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Shader.js",
+ "line": 370,
+ "itemtype": "method",
+ "description": "<p>Returns a new shader, based on the original, but with custom snippets\nof shader code replacing default behaviour.</p>\n<p>Each shader may let you override bits of its behavior. Each bit is called\na hook. A hook is either for the vertex shader, if it affects the\nposition of vertices, or in the fragment shader, if it affects the pixel\ncolor. You can inspect the different hooks available by calling\n<a href=\"#/p5.Shader/inspectHooks\"><code>yourShader.inspectHooks()</code></a>. You can\nalso read the reference for the default material, normal material, color, line, and point shaders to\nsee what hooks they have available.</p>\n<p><code>modify()</code> takes one parameter, <code>hooks</code>, an object with the hooks you want\nto override. Each key of the <code>hooks</code> object is the name\nof a hook, and the value is a string with the GLSL code for your hook.</p>\n<p>If you supply functions that aren't existing hooks, they will get added at the start of\nthe shader as helper functions so that you can use them in your hooks.</p>\n<p>To add new <a href=\"#/p5.Shader/setUniform\">uniforms</a> to your shader, you can pass in a <code>uniforms</code> object containing\nthe type and name of the uniform as the key, and a default value or function returning\na default value as its value. These will be automatically set when the shader is set\nwith <code>shader(yourShader)</code>.</p>\n<p>You can also add a <code>declarations</code> key, where the value is a GLSL string declaring\ncustom uniform variables, globals, and functions shared\nbetween hooks. To add declarations just in a vertex or fragment shader, add\n<code>vertexDeclarations</code> and <code>fragmentDeclarations</code> keys.</p>\n",
+ "example": [
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n uniforms: {\n 'float time': () => millis() // Uniform for time\n },\n 'Vertex getWorldInputs': `(Vertex inputs) {\n inputs.position.y +=\n 20. * sin(time * 0.001 + inputs.position.x * 0.05);\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader); // Apply the custom shader\n lights(); // Enable lighting\n noStroke(); // Disable stroke\n fill('red'); // Set fill color to red\n sphere(50); // Draw a sphere with the shader applied\n}\n</code>\n</div>",
+ "<div modernizr='webgl'>\n<code>\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n // Manually specifying a uniform\n declarations: 'uniform float time;',\n 'Vertex getWorldInputs': `(Vertex inputs) {\n inputs.position.y +=\n 20. * sin(time * 0.001 + inputs.position.x * 0.05);\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n myShader.setUniform('time', millis());\n lights();\n noStroke();\n fill('red');\n sphere(50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "hooks",
+ "description": "The hooks in the shader to replace.",
+ "optional": 1,
+ "type": "Object"
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "p5.Shader"
+ }
+ }
+ ],
+ "return": {
+ "description": "",
+ "type": "p5.Shader"
+ },
+ "class": "p5.Shader",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "message": "Missing item type\nA full reset, which allocates a new underlying Float32Array at its initial\nlength",
- "line": " src/webgl/p5.DataArray.js:63"
+ "name": "copyToContext",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Shader.js",
+ "line": 692,
+ "itemtype": "method",
+ "description": "<p>Copies the shader from one drawing context to another.</p>\n<p>Each <code>p5.Shader</code> object must be compiled by calling\n<a href=\"#/p5/shader\">shader()</a> before it can run. Compilation happens\nin a drawing context which is usually the main canvas or an instance of\n<a href=\"#/p5.Graphics\">p5.Graphics</a>. A shader can only be used in the\ncontext where it was compiled. The <code>copyToContext()</code> method compiles the\nshader again and copies it to another drawing context where it can be\nreused.</p>\n<p>The parameter, <code>context</code>, is the drawing context where the shader will be\nused. The shader can be copied to an instance of\n<a href=\"#/p5.Graphics\">p5.Graphics</a>, as in\n<code>myShader.copyToContext(pg)</code>. The shader can also be copied from a\n<a href=\"#/p5.Graphics\">p5.Graphics</a> object to the main canvas using\nthe <code>p5.instance</code> variable, as in <code>myShader.copyToContext(p5.instance)</code>.</p>\n<p>Note: A <a href=\"#/p5.Shader\">p5.Shader</a> object created with\n<a href=\"#/p5/createShader\">createShader()</a>,\n<a href=\"#/p5/createFilterShader\">createFilterShader()</a>, or\n<a href=\"#/p5/loadShader\">loadShader()</a>\ncan be used directly with a <a href=\"#/p5.Framebuffer\">p5.Framebuffer</a>\nobject created with\n<a href=\"#/p5/createFramebuffer\">createFramebuffer()</a>. Both objects\nhave the same context as the main canvas.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\\\n}\n`;\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Shader object.\n let original = createShader(vertSrc, fragSrc);\n\n // Compile the p5.Shader object.\n shader(original);\n\n // Create a p5.Graphics object.\n pg = createGraphics(50, 50, WEBGL);\n\n // Copy the original shader to the p5.Graphics object.\n let copied = original.copyToContext(pg);\n\n // Apply the copied shader to the p5.Graphics object.\n pg.shader(copied);\n\n // Style the display surface.\n pg.noStroke();\n\n // Add a display surface for the shader.\n pg.plane(50, 50);\n\n describe('A square with purple-blue gradient on its surface drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the p5.Graphics object to the main canvas.\n image(pg, -25, -25);\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nlet copied;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Graphics object.\n let pg = createGraphics(25, 25, WEBGL);\n\n // Create a p5.Shader object.\n let original = pg.createShader(vertSrc, fragSrc);\n\n // Compile the p5.Shader object.\n pg.shader(original);\n\n // Copy the original shader to the main canvas.\n copied = original.copyToContext(p5.instance);\n\n // Apply the copied shader to the main canvas.\n shader(copied);\n\n describe('A rotating cube with a purple-blue gradient on its surface drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the x-, y-, and z-axes.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n\n // Draw the box.\n box(50);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "context",
+ "description": "WebGL context for the copied shader.",
+ "type": "p5|p5.Graphics"
+ }
+ ],
+ "return": {
+ "description": "new shader compiled for the target context.",
+ "type": "p5.Shader"
+ }
+ }
+ ],
+ "return": {
+ "description": "new shader compiled for the target context.",
+ "type": "p5.Shader"
+ },
+ "class": "p5.Shader",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "message": "Missing item type\nAdds values to the DataArray, expanding its internal storage to\naccommodate the new items.",
- "line": " src/webgl/p5.DataArray.js:72"
+ "name": "setUniform",
+ "file": "src/scripts/parsers/in/p5.js/src/webgl/p5.Shader.js",
+ "line": 1135,
+ "itemtype": "method",
+ "chainable": 1,
+ "description": "<p>Sets the shader’s uniform (global) variables.</p>\n<p>Shader programs run on the computer’s graphics processing unit (GPU).\nThey live in part of the computer’s memory that’s completely separate\nfrom the sketch that runs them. Uniforms are global variables within a\nshader program. They provide a way to pass values from a sketch running\non the CPU to a shader program running on the GPU.</p>\n<p>The first parameter, <code>uniformName</code>, is a string with the uniform’s name.\nFor the shader above, <code>uniformName</code> would be <code>'r'</code>.</p>\n<p>The second parameter, <code>data</code>, is the value that should be used to set the\nuniform. For example, calling <code>myShader.setUniform('r', 0.5)</code> would set\nthe <code>r</code> uniform in the shader above to <code>0.5</code>. data should match the\nuniform’s type. Numbers, strings, booleans, arrays, and many types of\nimages can all be passed to a shader with <code>setUniform()</code>.</p>\n",
+ "example": [
+ "<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nuniform float r;\n\nvoid main() {\n gl_FragColor = vec4(r, 1.0, 1.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(myShader);\n\n // Set the r uniform to 0.5.\n myShader.setUniform('r', 0.5);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface for the shader.\n plane(100, 100);\n\n describe('A cyan square.');\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nuniform float r;\n\nvoid main() {\n gl_FragColor = vec4(r, 1.0, 1.0, 1.0);\n}\n`;\n\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(myShader);\n\n describe('A square oscillates color between cyan and white.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the drawing surface.\n noStroke();\n\n // Update the r uniform.\n let nextR = 0.5 * (sin(frameCount * 0.01) + 1);\n myShader.setUniform('r', nextR);\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nlet mandelbrot;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n mandelbrot = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates\n // between 0 and 0.005.\n // r is the size of the image in Mandelbrot-space.\n let radius = 0.005 * (sin(frameCount * 0.01) + 1);\n mandelbrot.setUniform('r', radius);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n</code>\n</div>"
+ ],
+ "overloads": [
+ {
+ "params": [
+ {
+ "name": "uniformName",
+ "description": "name of the uniform. Must match the name\nused in the vertex and fragment shaders.",
+ "type": "String"
+ },
+ {
+ "name": "data",
+ "description": "value to assign to the uniform. Must match the uniform’s data type.",
+ "type": "Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture"
+ }
+ ]
+ }
+ ],
+ "class": "p5.Shader",
+ "static": false,
+ "module": "3D",
+ "submodule": "Material"
},
{
- "message": "Missing item type\nReturns a copy of the data from the index `from`, inclusive, to the index\n`to`, exclusive",
- "line": " src/webgl/p5.DataArray.js:82"
+ "file": "src/Amplitude.js",
+ "line": 53,
+ "description": "Connect an audio source to the amplitude object.",
+ "itemtype": "method",
+ "name": "setInput",
+ "params": [
+ {
+ "name": "input",
+ "description": "- An object that has audio output.",
+ "type": "Object"
+ }
+ ],
+ "class": "p5.Amplitude",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nReturns a mutable Float32Array window from the index `from`, inclusive, to\nthe index `to`, exclusive",
- "line": " src/webgl/p5.DataArray.js:90"
+ "file": "src/Amplitude.js",
+ "line": 63,
+ "description": "Get the current amplitude value of a sound.",
+ "itemtype": "method",
+ "name": "getLevel",
+ "return": {
+ "description": "Amplitude level (volume) of a sound.",
+ "type": "Number"
+ },
+ "class": "p5.Amplitude",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nExpand capacity of the internal storage until it can fit a target size",
- "line": " src/webgl/p5.DataArray.js:98"
+ "file": "src/Amplitude.js",
+ "line": 73,
+ "description": "Get the current amplitude value of a sound.",
+ "itemtype": "method",
+ "name": "smooth",
+ "params": [
+ {
+ "name": "Smooth",
+ "description": "Amplitude analysis by averaging with the last analysis frame. Off by default.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Amplitude",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nChecks the capabilities of the current WebGL environment to see if the\nsettings supplied by the user are capable of being fulfilled. If they\nare not, warnings will be logged and the settings will be changed to\nsomething close that can be fulfilled.",
- "line": " src/webgl/p5.Framebuffer.js:471"
+ "file": "src/AudioIn.js",
+ "line": 56,
+ "description": "Start the audio input.",
+ "itemtype": "method",
+ "name": "start",
+ "class": "p5.AudioIn",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nCreates new textures and renderbuffers given the current size of the\nframebuffer.",
- "line": " src/webgl/p5.Framebuffer.js:568"
+ "file": "src/AudioIn.js",
+ "line": 72,
+ "description": "Stop the audio input.",
+ "itemtype": "method",
+ "name": "stop",
+ "class": "p5.AudioIn",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nTo create a WebGL texture, one needs to supply three pieces of information:\nthe type (the data type each channel will be stored as, e.g. int or float),\nthe format (the color channels that will each be stored in the previously\nspecified type, e.g. rgb or rgba), and the internal format (the specifics\nof how data for each channel, in the aforementioned type, will be packed\ntogether, such as how many bits to use, e.g. RGBA32F or RGB565.)\n\nThe format and channels asked for by the user hint at what these values\nneed to be, and the WebGL version affects what options are avaiable.\nThis method returns the values for these three properties, given the\nframebuffer's settings.",
- "line": " src/webgl/p5.Framebuffer.js:719"
+ "file": "src/AudioIn.js",
+ "line": 81,
+ "description": "Set amplitude (volume) of a mic input between 0 and 1.0.",
+ "itemtype": "method",
+ "name": "amp",
+ "params": [
+ {
+ "name": "amplitudeAmount",
+ "description": "An amplitude value between 0 and 1.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.AudioIn",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nTo create a WebGL texture, one needs to supply three pieces of information:\nthe type (the data type each channel will be stored as, e.g. int or float),\nthe format (the color channels that will each be stored in the previously\nspecified type, e.g. rgb or rgba), and the internal format (the specifics\nof how data for each channel, in the aforementioned type, will be packed\ntogether, such as how many bits to use, e.g. RGBA32F or RGB565.)\n\nThis method takes into account the settings asked for by the user and\nreturns values for these three properties that can be used for the\ntexture storing depth information.",
- "line": " src/webgl/p5.Framebuffer.js:780"
+ "file": "src/Biquad.js",
+ "line": 79,
+ "description": "The filter's resonance factor.",
+ "itemtype": "method",
+ "name": "res",
+ "params": [
+ {
+ "name": "resonance",
+ "description": "resonance of the filter. A number between 0 and 100.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Biquad",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nA method that will be called when recreating textures. If the framebuffer\nis auto-sized, it will update its width, height, and density properties.",
- "line": " src/webgl/p5.Framebuffer.js:841"
+ "file": "src/Biquad.js",
+ "line": 89,
+ "description": "The gain of the filter in dB units.",
+ "itemtype": "method",
+ "name": "gain",
+ "params": [
+ {
+ "name": "gain",
+ "description": "gain value in dB units. The gain is only used for lowshelf, highshelf, and peaking filters.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Biquad",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nCalled when the canvas that the framebuffer is attached to resizes. If the\nframebuffer is auto-sized, it will update its textures to match the new\nsize.",
- "line": " src/webgl/p5.Framebuffer.js:855"
+ "file": "src/Biquad.js",
+ "line": 99,
+ "description": "Set the type of the filter.",
+ "itemtype": "method",
+ "name": "setType",
+ "params": [
+ {
+ "name": "type",
+ "description": "type of the filter. Options: \"lowpass\", \"highpass\", \"bandpass\", \"lowshelf\", \"highshelf\", \"notch\", \"allpass\", \"peaking\"",
+ "type": "String"
+ }
+ ],
+ "class": "p5.Biquad",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nCalled when the size of the framebuffer has changed (either by being\nmanually updated or from auto-size updates when its canvas changes size.)\nOld textures and renderbuffers will be deleted, and then recreated with the\nnew size.",
- "line": " src/webgl/p5.Framebuffer.js:868"
+ "file": "src/Biquad.js",
+ "line": 109,
+ "description": "Set the cutoff frequency of the filter.",
+ "itemtype": "method",
+ "name": "freq",
+ "params": [
+ {
+ "name": "cutoffFrequency",
+ "description": "the cutoff frequency of the filter.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Biquad",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nGiven a raw texture wrapper, delete its stored texture from WebGL memory,\nand remove it from p5's list of active textures.",
- "line": " src/webgl/p5.Framebuffer.js:1017"
+ "file": "src/Delay.js",
+ "line": 57,
+ "description": "Set the delay time in seconds.",
+ "itemtype": "method",
+ "name": "delayTime",
+ "params": [
+ {
+ "name": "delayTime",
+ "description": "The delay time in seconds.",
+ "type": "Number"
+ },
+ {
+ "name": "rampTime",
+ "description": "The time in seconds it takes to ramp to the new delay time. \n By default it is 0.1 seconds. Setting it to 0 will change \n the delay time immediately and demonstrate legacy behavior.",
+ "type": "Number",
+ "optional": true
+ }
+ ],
+ "example": [
+ "\n<div>\n<code>\nlet osc, delay, env;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textSize(9);\n text('click and drag mouse', width/2, height/2);\n\n osc = new p5.Oscillator('sawtooth');\n osc.amp(0.74);\n env = new p5.Envelope(0.01);\n delay = new p5.Delay(0.12, 0.7);\n \n osc.disconnect();\n osc.connect(env);\n env.disconnect();\n env.connect(delay);\n\n cnv.mousePressed(oscStart);\n cnv.mouseReleased(oscStop);\n cnv.mouseOut(oscStop);\n describe('Tap to play a square wave with delay effect.');\n}\n\nfunction oscStart() {\n background(0, 255, 255);\n text('release to hear delay', width/2, height/2);\n osc.start();\n env.triggerAttack();\n}\n\nfunction oscStop() {\n background(220);\n text('click and drag mouse', width/2, height/2);\n env.triggerRelease();\n} \n \nfunction draw() {\n \n let dtime = map(mouseX, 0, width, 0.1, 0.5);\n delay.delayTime(dtime);\n}"
+ ],
+ "class": "p5.Delay",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nAverages the vertex normals. Used in curved\nsurfaces",
- "line": " src/webgl/p5.Geometry.js:1891"
+ "file": "src/Delay.js",
+ "line": 122,
+ "description": "The amount of feedback in the delay line.",
+ "itemtype": "method",
+ "name": "feedback",
+ "params": [
+ {
+ "name": "feedbackAmount",
+ "description": "A number between 0 and 0.99.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Delay",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nAverages pole normals. Used in spherical primitives",
- "line": " src/webgl/p5.Geometry.js:1912"
+ "file": "src/Delay.js",
+ "line": 132,
+ "description": "Process an input signal with a delay effect.",
+ "itemtype": "method",
+ "name": "process",
+ "params": [
+ {
+ "name": "unit",
+ "description": "A p5.sound source such as an Oscillator, Soundfile, or AudioIn object.",
+ "type": "Object"
+ },
+ {
+ "name": "delayTime",
+ "description": "The amount of delay in seconds. A number between 0 and 1.",
+ "type": "Number"
+ },
+ {
+ "name": "feedback",
+ "description": "The amount of feedback. A number between 0 and 1.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Delay",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nCreate a 2D array for establishing stroke connections",
- "line": " src/webgl/p5.Geometry.js:1950"
+ "file": "src/Delay.js",
+ "line": 146,
+ "description": "Adjust the amplitude of the delay effect.",
+ "itemtype": "method",
+ "name": "amp",
+ "params": [
+ {
+ "name": "amplitudeAmount",
+ "description": "An amplitude value between 0 and 1.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Delay",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nConverts each line segment into the vertices and vertex attributes needed\nto turn the line into a polygon on screen. This will include:\n- Two triangles line segment to create a rectangle\n- Two triangles per endpoint to create a stroke cap rectangle. A fragment\n shader is responsible for displaying the appropriate cap style within\n that rectangle.\n- Four triangles per join between adjacent line segments, creating a quad on\n either side of the join, perpendicular to the lines. A vertex shader will\n discard the quad in the \"elbow\" of the join, and a fragment shader will\n display the appropriate join style within the remaining quad.",
- "line": " src/webgl/p5.Geometry.js:1967"
+ "file": "src/Envelope.js",
+ "line": 41,
+ "description": "Trigger the envelope and release it after the sustain time.",
+ "itemtype": "method",
+ "name": "play",
+ "class": "p5.Envelope",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nAdds the vertices and vertex attributes for two triangles making a rectangle\nfor a straight line segment. A vertex shader is responsible for picking\nproper coordinates on the screen given the centerline positions, the tangent,\nand the side of the centerline each vertex belongs to. Sides follow the\nfollowing scheme:\n\n -1 -1\n o-------------o\n | |\n o-------------o\n 1 1",
- "line": " src/webgl/p5.Geometry.js:2111"
+ "file": "src/Envelope.js",
+ "line": 50,
+ "description": "Trigger the Attack, and Decay portion of the Envelope. Similar to holding\ndown a key on a piano, but it will hold the sustain level until you let go.",
+ "itemtype": "method",
+ "name": "triggerAttack",
+ "example": [
+ "\n<div>\n<code>\nlet osc, env;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n cnv.mousePressed(playSound);\n cnv.mouseReleased(stopSound);\n textAlign(CENTER);\n textSize(10);\n text('tap to triggerAttack', width/2, height/2);\n\n osc = new p5.Oscillator();\n osc.disconnect();\n env = new p5.Envelope();\n osc.connect(env);\n}\n\nfunction playSound() {\n background(0, 255, 255);\n text('release to release', width/2, height/2);\n osc.start();\n env.attackTime(random(0.00, 0.25));\n env.triggerAttack(0.5);\n}\n\nfunction stopSound() {\n background(220);\n text('tap to triggerAttack', width/2, height/2);\n env.releaseTime(random(0.1, 0.3));\n env.triggerRelease();\n}\n</code>\n</div>"
+ ],
+ "class": "p5.Envelope",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nAdds the vertices and vertex attributes for two triangles representing the\nstroke cap of a line. A fragment shader is responsible for displaying the\nappropriate cap style within the rectangle they make.\n\nThe lineSides buffer will include the following values for the points on\nthe cap rectangle:\n\n -1 -2\n-----------o---o\n | |\n-----------o---o\n 1 2",
- "line": " src/webgl/p5.Geometry.js:2155"
+ "file": "src/Envelope.js",
+ "line": 96,
+ "description": "Trigger the Release of the envelope. Similar to releasing the key on \na piano and letting the sound fade according to the release level and \nrelease time.",
+ "itemtype": "method",
+ "name": "triggerRelease",
+ "example": [
+ "\n<div>\n<code>\nlet osc, env;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n cnv.mousePressed(playSound);\n cnv.mouseReleased(stopSound);\n textAlign(CENTER);\n textSize(10);\n text('tap to triggerAttack', width/2, height/2);\n\n osc = new p5.Oscillator();\n osc.disconnect();\n env = new p5.Envelope();\n osc.connect(env);\n}\n\nfunction playSound() {\n background(0, 255, 255);\n text('release to release', width/2, height/2);\n osc.start();\n env.attackTime(random(0.00, 0.25));\n env.triggerAttack(0.5);\n}\n\nfunction stopSound() {\n background(220);\n text('tap to triggerAttack', width/2, height/2);\n env.releaseTime(random(0.1, 0.3));\n env.triggerRelease();\n}\n</code>\n</div>"
+ ],
+ "class": "p5.Envelope",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nAdds the vertices and vertex attributes for four triangles representing a\njoin between two adjacent line segments. This creates a quad on either side\nof the shared vertex of the two line segments, with each quad perpendicular\nto the lines. A vertex shader will discard all but the quad in the \"elbow\" of\nthe join, and a fragment shader will display the appropriate join style\nwithin the remaining quad.\n\nThe lineSides buffer will include the following values for the points on\nthe join rectangles:\n\n -1 -2\n-------------o----o\n | |\n 1 o----o----o -3\n | | 0 |\n--------o----o |\n 2| 3 |\n | |\n | |",
- "line": " src/webgl/p5.Geometry.js:2185"
+ "file": "src/Envelope.js",
+ "line": 143,
+ "itemtype": "method",
+ "name": "setInput",
+ "params": [
+ {
+ "name": "unit",
+ "description": "A p5.sound Object",
+ "type": "Object"
+ }
+ ],
+ "class": "p5.Envelope",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type",
- "line": " src/webgl/p5.Matrix.js:1"
+ "file": "src/Envelope.js",
+ "line": 152,
+ "description": "Sets the attack, decay, sustain, and release times of the envelope.",
+ "itemtype": "method",
+ "name": "setADSR",
+ "params": [
+ {
+ "name": "attack",
+ "description": "how quickly the envelope reaches the maximum level",
+ "type": "Number"
+ },
+ {
+ "name": "decay",
+ "description": "how quickly the envelope reaches the sustain level",
+ "type": "Number"
+ },
+ {
+ "name": "sustain",
+ "description": "how long the envelope stays at the decay level",
+ "type": "Number"
+ },
+ {
+ "name": "release",
+ "description": "how quickly the envelope fades out after the sustain level",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Envelope",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nPRIVATE",
- "line": " src/webgl/p5.Matrix.js:962"
+ "file": "src/Envelope.js",
+ "line": 168,
+ "description": "Sets the release time of the envelope.",
+ "itemtype": "method",
+ "name": "releaseTime",
+ "params": [
+ {
+ "name": "releaseTime",
+ "description": "the release time in seconds",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Envelope",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nThis is similar to quaternion multiplication\nbut when multipying vector with quaternion\nthe multiplication can be simplified to the below formula.\nThis was taken from the below stackexchange link\nhttps://gamedev.stackexchange.com/questions/28395/rotating-vector3-by-a-quaternion/50545#50545",
- "line": " src/webgl/p5.Quat.js:65"
+ "file": "src/Envelope.js",
+ "line": 178,
+ "description": "Sets the attack time of the envelope.",
+ "itemtype": "method",
+ "name": "attackTime",
+ "params": [
+ {
+ "name": "attackTime",
+ "description": "the attack time in seconds",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Envelope",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nEnables and binds the buffers used by shader when the appropriate data exists in geometry.\nMust always be done prior to drawing geometry in WebGL.",
- "line": " src/webgl/p5.RenderBuffer.js:13"
+ "file": "src/FFT.js",
+ "line": 84,
+ "description": "Returns the frequency spectrum of the input signal.",
+ "itemtype": "method",
+ "name": "analyze",
+ "return": {
+ "description": "Array of amplitude values from 0 to 1.",
+ "type": "Array"
+ },
+ "class": "p5.FFT",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nWelcome to RendererGL Immediate Mode.\nImmediate mode is used for drawing custom shapes\nfrom a set of vertices. Immediate Mode is activated\nwhen you call <a href=\"#/p5/beginShape\">beginShape()</a> & de-activated when you call <a href=\"#/p5/endShape\">endShape()</a>.\nImmediate mode is a style of programming borrowed\nfrom OpenGL's (now-deprecated) immediate mode.\nIt differs from p5.js' default, Retained Mode, which caches\ngeometries and buffers on the CPU to reduce the number of webgl\ndraw calls. Retained mode is more efficient & performative,\nhowever, Immediate Mode is useful for sketching quick\ngeometric ideas.",
- "line": " src/webgl/p5.RendererGL.Immediate.js:1"
+ "file": "src/FFT.js",
+ "line": 94,
+ "description": "Returns an array of sample values from the input audio.",
+ "itemtype": "method",
+ "name": "waveform",
+ "return": {
+ "description": "Array of sample values from -1 to -1.",
+ "type": "Array"
+ },
+ "class": "p5.FFT",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nEnd shape drawing and render vertices to screen.",
- "line": " src/webgl/p5.RendererGL.Immediate.js:191"
+ "file": "src/Gain.js",
+ "line": 57,
+ "description": "Adjust the amplitude of the soundfile.",
+ "itemtype": "method",
+ "name": "amp",
+ "params": [
+ {
+ "name": "amplitude",
+ "description": "amplitude value between 0 and 1, or an audio rate signal such as an LFO.",
+ "type": "Number, Object"
+ }
+ ],
+ "class": "p5.Gain",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nCalled from endShape(). This function calculates the stroke vertices for custom shapes and\ntesselates shapes when applicable.",
- "line": " src/webgl/p5.RendererGL.Immediate.js:274"
+ "file": "src/Noise.js",
+ "line": 57,
+ "itemtype": "method",
+ "name": "type",
+ "params": [
+ {
+ "name": "type",
+ "description": "- the type of noise (white, pink, brown)",
+ "type": "String"
+ }
+ ],
+ "class": "p5.Noise",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nCalled from _processVertices(). This function calculates the stroke vertices for custom shapes and\ntesselates shapes when applicable.",
- "line": " src/webgl/p5.RendererGL.Immediate.js:320"
+ "file": "src/Noise.js",
+ "line": 66,
+ "description": "Adjust the amplitude of the noise source.",
+ "itemtype": "method",
+ "name": "amp",
+ "params": [
+ {
+ "name": "amplitude",
+ "description": "Set the amplitude between 0 and 1.0. Or, pass in an object such as an oscillator to modulate amplitude with an audio signal.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Noise",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nCalled from _processVertices() when applicable. This function tesselates immediateMode.geometry.",
- "line": " src/webgl/p5.RendererGL.Immediate.js:408"
+ "file": "src/Noise.js",
+ "line": 81,
+ "description": "Starts the noise source.",
+ "itemtype": "method",
+ "name": "start",
+ "class": "p5.Noise",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nCalled from endShape(). Responsible for calculating normals, setting shader uniforms,\nenabling all appropriate buffers, applying color blend, and drawing the fill geometry.",
- "line": " src/webgl/p5.RendererGL.Immediate.js:505"
+ "file": "src/Noise.js",
+ "line": 90,
+ "description": "Stops the noise source.",
+ "itemtype": "method",
+ "name": "stop",
+ "class": "p5.Noise",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nCalled from endShape(). Responsible for calculating normals, setting shader uniforms,\nenabling all appropriate buffers, applying color blend, and drawing the stroke geometry.",
- "line": " src/webgl/p5.RendererGL.Immediate.js:552"
+ "file": "src/Oscillator.js",
+ "line": 84,
+ "description": "Adjusts the frequency of the oscillator.",
+ "itemtype": "method",
+ "name": "freq",
+ "params": [
+ {
+ "name": "frequency",
+ "description": "frequency of the oscillator in Hz (cycles per second).",
+ "type": "Number"
+ },
+ {
+ "name": "rampTime",
+ "description": "the time in seconds it takes to ramp to the new frequency (defaults to 0).",
+ "type": "Number",
+ "optional": true
+ }
+ ],
+ "class": "p5.Oscillator",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type",
- "line": " src/webgl/p5.RendererGL.Retained.js:8"
+ "file": "src/Oscillator.js",
+ "line": 95,
+ "description": "Adjusts the phase of the oscillator.",
+ "itemtype": "method",
+ "name": "phase",
+ "params": [
+ {
+ "name": "phase",
+ "description": "phase of the oscillator in degrees (0-360).",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Oscillator",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\ninitializes buffer defaults. runs each time a new geometry is\nregistered",
- "line": " src/webgl/p5.RendererGL.Retained.js:19"
+ "file": "src/Oscillator.js",
+ "line": 105,
+ "description": "Sets the type of the oscillator.",
+ "itemtype": "method",
+ "name": "setType",
+ "params": [
+ {
+ "name": "type",
+ "description": "type of the oscillator. Options:\n 'sine' (default), 'triangle',\n 'sawtooth', 'square'",
+ "type": "String"
+ }
+ ],
+ "class": "p5.Oscillator",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\ncreates a buffers object that holds the WebGL render buffers\nfor a geometry.",
- "line": " src/webgl/p5.RendererGL.Retained.js:67"
+ "file": "src/Oscillator.js",
+ "line": 117,
+ "description": "Adjust the amplitude of the Oscillator.",
+ "itemtype": "method",
+ "name": "amp",
+ "params": [
+ {
+ "name": "amplitude",
+ "description": "Set the amplitude between 0 and 1.0. Or, pass in an object such as an oscillator to modulate amplitude with an audio signal.",
+ "type": "Number"
+ }
+ ],
+ "example": [
+ "\n<div>\n<code>\nlet osc, lfo;\nlet cnv;\n\nfunction setup() {\n describe(\"a sketch that demonstrates amplitude modulation with an LFO and sine tone\");\n cnv = createCanvas(100, 100);\n cnv.mousePressed(startSound);\n textAlign(CENTER);\n textWrap(WORD);\n textSize(10);\n \n osc = new p5.Oscillator('sine');\n lfo = new p5.Oscillator(1);\n lfo.disconnect();\n osc.amp(lfo);\n}\n\nfunction startSound() {\n lfo.start();\n osc.start();\n}\n\nfunction draw(){\n background(220);\n text('click to play sound', 0, height/2 - 20, 100);\n text('control lfo with mouseX position', 0, height/2, 100);\n\n let freq = map(mouseX, 0, width, 0, 10);\n lfo.freq(freq);\n}\n</code>\n</div>"
+ ],
+ "class": "p5.Oscillator",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nDraws buffers given a geometry key ID",
- "line": " src/webgl/p5.RendererGL.Retained.js:120"
+ "file": "src/Oscillator.js",
+ "line": 169,
+ "description": "Starts the oscillator. Usually from user gesture.",
+ "itemtype": "method",
+ "name": "start",
+ "example": [
+ "\n<div>\n<code>\nlet osc;\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(startOscillator);\n osc = new p5.Oscillator();\n}\n\nfunction startOscillator() {\n osc.start();\n}\n</code>\n</div>"
+ ],
+ "class": "p5.Oscillator",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type",
- "line": " src/webgl/p5.RendererGL.js:318"
+ "file": "src/Oscillator.js",
+ "line": 194,
+ "description": "Stops the oscillator.",
+ "itemtype": "method",
+ "name": "stop",
+ "class": "p5.Oscillator",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type",
- "line": " src/webgl/p5.RendererGL.js:389"
+ "file": "src/Panner.js",
+ "line": 53,
+ "description": "Pan a sound source left or right.",
+ "itemtype": "method",
+ "name": "pan",
+ "params": [
+ {
+ "name": "panAmount",
+ "description": "Sets the pan position of the sound source. Can be a value between -1 and 1 or an audio rate signal such as an LFO.",
+ "type": "Number, Object"
+ }
+ ],
+ "class": "p5.Panner",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nmodel view, projection, & normal\nmatrices",
- "line": " src/webgl/p5.RendererGL.js:535"
+ "file": "src/Panner3D.js",
+ "line": 116,
+ "description": "Connects an input source to the 3D panner.",
+ "itemtype": "method",
+ "name": "process",
+ "params": [
+ {
+ "name": "input",
+ "description": "an input source to process with the 3D panner.",
+ "type": "Object"
+ }
+ ],
+ "class": "p5.Panner3D",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\n[background description]",
- "line": " src/webgl/p5.RendererGL.js:933"
+ "file": "src/Panner3D.js",
+ "line": 126,
+ "description": "Set the x, y, and z position of the 3D panner.",
+ "itemtype": "method",
+ "name": "set",
+ "params": [
+ {
+ "name": "xPosition",
+ "description": "the x coordinate of the panner.",
+ "type": "Number"
+ },
+ {
+ "name": "yPosition",
+ "description": "the y coordinate of the panner.",
+ "type": "Number"
+ },
+ {
+ "name": "zPosition",
+ "description": "the z coordinate of the panner.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Panner3D",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type",
- "line": " src/webgl/p5.RendererGL.js:1418"
+ "file": "src/Panner3D.js",
+ "line": 140,
+ "description": "The rolloff rate of the panner.",
+ "itemtype": "method",
+ "name": "setFalloff",
+ "params": [
+ {
+ "name": "rolloffFactor",
+ "description": "",
+ "type": "Number"
+ },
+ {
+ "name": "maxDistance",
+ "description": "",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Panner3D",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\n[resize description]",
- "line": " src/webgl/p5.RendererGL.js:1451"
+ "file": "src/Panner3D.js",
+ "line": 152,
+ "description": "Set the maximum distance of the panner.",
+ "itemtype": "method",
+ "name": "maxDist",
+ "params": [
+ {
+ "name": "distance",
+ "description": "the maximum distance that the sound source can be heard from.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Panner3D",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nclears color and depth buffers\nwith r,g,b,a",
- "line": " src/webgl/p5.RendererGL.js:1488"
+ "file": "src/Panner3D.js",
+ "line": 162,
+ "description": "Set the rolloff rate of the panner.",
+ "itemtype": "method",
+ "name": "rolloff",
+ "params": [
+ {
+ "name": "r",
+ "description": "the rolloff rate of the panner.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Panner3D",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nResets all depth information so that nothing previously drawn will\nocclude anything subsequently drawn.",
- "line": " src/webgl/p5.RendererGL.js:1523"
+ "file": "src/Panner3D.js",
+ "line": 172,
+ "description": "Set the X position of the sound source.",
+ "itemtype": "method",
+ "name": "positionX",
+ "params": [
+ {
+ "name": "positionX",
+ "description": "the x position of the sound source.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Panner3D",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\n[translate description]",
- "line": " src/webgl/p5.RendererGL.js:1545"
+ "file": "src/Panner3D.js",
+ "line": 182,
+ "description": "Set the Y position of the sound source.",
+ "itemtype": "method",
+ "name": "positionY",
+ "params": [
+ {
+ "name": "positionY",
+ "description": "the y position of the sound source.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Panner3D",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nScales the Model View Matrix by a vector",
- "line": " src/webgl/p5.RendererGL.js:1564"
+ "file": "src/Panner3D.js",
+ "line": 192,
+ "description": "Set the Z position of the sound source.",
+ "itemtype": "method",
+ "name": "positionZ",
+ "params": [
+ {
+ "name": "positionZ",
+ "description": "the z position of the sound source.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Panner3D",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nTODO(dave): un-private this when there is a way to actually override the\nshader used for points\n\nGet the shader used when drawing points with <a href=\"#/p5/point\">`point()`</a>.\n\nYou can call <a href=\"#/p5.Shader/modify\">`pointShader().modify()`</a>\nand change any of the following hooks:\n- `void beforeVertex`: Called at the start of the vertex shader.\n- `vec3 getLocalPosition`: Update the position of vertices before transforms are applied. It takes in `vec3 position` and must return a modified version.\n- `vec3 getWorldPosition`: Update the position of vertices after transforms are applied. It takes in `vec3 position` and pust return a modified version.\n- `float getPointSize`: Update the size of the point. It takes in `float size` and must return a modified version.\n- `void afterVertex`: Called at the end of the vertex shader.\n- `void beforeFragment`: Called at the start of the fragment shader.\n- `bool shouldDiscard`: Points are drawn inside a square, with the corners discarded in the fragment shader to create a circle. Use this to change this logic. It takes in a `bool willDiscard` and must return a modified version.\n- `vec4 getFinalColor`: Update the final color after mixing. It takes in a `vec4 color` and must return a modified version.\n- `void afterFragment`: Called at the end of the fragment shader.\n\nCall `pointShader().inspectHooks()` to see all the possible hooks and\ntheir default implementations.",
- "line": " src/webgl/p5.RendererGL.js:1947"
+ "file": "src/PitchShifter.js",
+ "line": 55,
+ "description": "Shift the pitch of the source audio.",
+ "itemtype": "method",
+ "name": "shift",
+ "params": [
+ {
+ "name": "pitchValue",
+ "description": "amount of semitones to shift the pitch",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.PitchShifter",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nturn a two dimensional array into one dimensional array",
- "line": " src/webgl/p5.RendererGL.js:2384"
+ "file": "src/Reverb.js",
+ "line": 56,
+ "description": "Set the decay time of the reverb.",
+ "itemtype": "method",
+ "name": "set",
+ "params": [
+ {
+ "name": "time",
+ "description": "Decay time of the reverb in seconds.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Reverb",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nturn a p5.Vector Array into a one dimensional number array",
- "line": " src/webgl/p5.RendererGL.js:2395"
+ "file": "src/Reverb.js",
+ "line": 66,
+ "description": "Adjust the dry/wet value.",
+ "itemtype": "method",
+ "name": "drywet",
+ "params": [
+ {
+ "name": "mix",
+ "description": "The desired mix between the original and the affected signal. A number between 0 and 1. 0 is all dry, 1 is completely affected.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.Reverb",
+ "module": "p5.sound",
+ "submodule": "p5.sound"
},
{
- "message": "Missing item type\nensures that p5 is using a 3d renderer. throws an error if not.",
- "line": " src/webgl/p5.RendererGL.js:2534"
+ "file": "src/SoundFile.js",
+ "line": 12,
+ "description": "loadSound() returns a new SoundFile from a specified\npath. If called during preload(), the SoundFile will be ready\nto play in time for setup() and draw(). If called outside of\npreload, the SoundFile will not be ready immediately, so\nloadSound accepts a callback as the second parameter. Using a\n<a href=\"https://github.com/processing/p5.js/wiki/Local-server\">\nlocal server</a> is recommended when loading external files.",
+ "itemtype": "method",
+ "name": "loadSound",
+ "params": [
+ {
+ "name": "path",
+ "description": "Path to the sound file, or an array with\n paths to soundfiles in multiple formats\n i.e. ['sound.ogg', 'sound.mp3'].\n Alternately, accepts an object: either\n from the HTML5 File API, or a p5.File.",
+ "type": "String|Array"
+ }
+ ],
+ "return": {
+ "description": "Returns a SoundFile",
+ "type": "SoundFile"
+ },
+ "example": [
+ "\n<div><code>\nlet mySound;\nfunction preload() {\n mySound = loadSound('/assets/doorbell.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(canvasPressed);\n background(220);\n text('tap here to play', 10, 20);\n}\n\nfunction canvasPressed() {\n // playing a sound file on a user gesture\n // is equivalent to `userStartAudio()`\n mySound.play();\n}\n</code></div>"
+ ],
+ "class": "p5.sound",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nShaders are written in <a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\">GLSL</a>, but\nthere are different versions of GLSL that it might be written in.\n\nCalling this method on a `p5.Shader` will return the GLSL version it uses, either `100 es` or `300 es`.\nWebGL 1 shaders will only use `100 es`, and WebGL 2 shaders may use either.",
- "line": " src/webgl/p5.Shader.js:233"
+ "file": "src/SoundFile.js",
+ "line": 125,
+ "description": "Start the soundfile.",
+ "itemtype": "method",
+ "name": "start",
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type",
- "line": " src/webgl/p5.Shader.js:554"
+ "file": "src/SoundFile.js",
+ "line": 138,
+ "description": "Start the soundfile.",
+ "itemtype": "method",
+ "name": "play",
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type",
- "line": " src/webgl/p5.Shader.js:764"
+ "file": "src/SoundFile.js",
+ "line": 151,
+ "description": "Stop the soundfile.",
+ "itemtype": "method",
+ "name": "stop",
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type",
- "line": " lib/addons/p5.sound.js:1"
+ "file": "src/SoundFile.js",
+ "line": 161,
+ "description": "Pause the soundfile.",
+ "itemtype": "method",
+ "name": "pause",
+ "example": [
+ "\n<div>\n<code>\nlet player;\n\nfunction preload() {\n player = loadSound('/assets/Damscray_DancingTiger.mp3');\n}\n\nfunction setup() {\n describe('A sketch that pauses and resumes sound file playback.');\n let cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n textAlign(CENTER);\n textWrap(WORD);\n textSize(10);\n background(220);\n text('click to play', 0, 20, 100);\n \n player.loop();\n}\n\nfunction playSound() {\n if (!player.isPlaying()) {\n player.play();\n background(220);\n text('click to pause', 0, 20, 100);\n }\n else {\n player.pause();\n background(220);\n text('click to play', 0, 20, 100);\n }\n}\n</code>\n</div>"
+ ],
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\np5.sound \nhttps://p5js.org/reference/#/libraries/p5.sound\n\nFrom the Processing Foundation and contributors\nhttps://github.com/processing/p5.js-sound/graphs/contributors\n\nMIT License (MIT)\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE\n\nSome of the many audio libraries & resources that inspire p5.sound:\n - TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js\n - buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/\n - Boris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0\n - wavesurfer.js https://github.com/katspaugh/wavesurfer.js\n - Web Audio Components by Jordan Santell https://github.com/web-audio-components\n - Wilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound\n\n Web Audio API: http://w3.org/TR/webaudio/",
- "line": " lib/addons/p5.sound.js:52"
+ "file": "src/SoundFile.js",
+ "line": 210,
+ "description": "Loop the soundfile.",
+ "itemtype": "method",
+ "name": "loop",
+ "params": [
+ {
+ "name": "loopState",
+ "description": "Set to True or False in order to set the loop state.",
+ "type": "Boolean"
+ }
+ ],
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nThis module has shims",
- "line": " lib/addons/p5.sound.js:401"
+ "file": "src/SoundFile.js",
+ "line": 220,
+ "description": "Set a loop region, and optionally a playback rate, and amplitude for the soundfile.",
+ "itemtype": "method",
+ "name": "setLoop",
+ "params": [
+ {
+ "name": "startTime",
+ "description": "Set to True or False in order to set the loop state.",
+ "type": "Number",
+ "optional": true
+ },
+ {
+ "name": "rate",
+ "description": "Set to True or False in order to set the loop state.",
+ "type": "Number",
+ "optional": true
+ },
+ {
+ "name": "amp",
+ "description": "Set to True or False in order to set the loop state.",
+ "type": "Number",
+ "optional": true
+ },
+ {
+ "name": "duration",
+ "description": "Set to True or False in order to set the loop state.",
+ "type": "Number",
+ "optional": true
+ }
+ ],
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nDetermine which filetypes are supported (inspired by buzz.js)\nThe audio element (el) will only be used to test browser support for various audio formats",
- "line": " lib/addons/p5.sound.js:536"
+ "file": "src/SoundFile.js",
+ "line": 234,
+ "description": "Adjust the amplitude of the soundfile.",
+ "itemtype": "method",
+ "name": "amp",
+ "params": [
+ {
+ "name": "amplitude",
+ "description": "amplitude value between 0 and 1.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type",
- "line": " lib/addons/p5.sound.js:807"
+ "file": "src/SoundFile.js",
+ "line": 245,
+ "description": "Change the path for the soundfile.",
+ "itemtype": "method",
+ "name": "setPath",
+ "params": [
+ {
+ "name": "path",
+ "description": "Path to the sound file.",
+ "type": "String"
+ },
+ {
+ "name": "successCallback",
+ "description": "Function to call when the sound file is loaded.",
+ "type": "Function",
+ "optional": true
+ }
+ ],
+ "example": [
+ "\n<div>\n<code>\nlet soundSource, cnv, btn;\n\nfunction preload() {\n soundSource = loadSound('/assets/Damscray_-_Dancing_Tiger_01.mp3');\n}\n\nfunction setup() {\n describe(\n 'a sketch that says click to play sound. there is a button that says load sound. when you click the button, the path of the sound file player changes and the new sound plays.');\n cnv = createCanvas(100, 100);\n cnv.mousePressed(playSound);\n background(220);\n textAlign(CENTER);\n textWrap(WORD);\n textSize(10);\n text('click to play sound or the button to load a new sound', 0, 20, 100);\n btn = createButton('New Sound');\n btn.mousePressed(setNewPath);\n soundSource.loop(); \n}\n\nfunction playSound() {\n soundSource.play();\n}\n\nfunction setNewPath() {\n background(220);\n text('a new sound was loaded', 0, 20, 100);\n soundSource.setPath('/assets/Damscray_-_Dancing_Tiger_02.mp3', playSound); \n}\n</code>\n</div>"
+ ],
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nUsed by Osc and Envelope to chain signal math",
- "line": " lib/addons/p5.sound.js:1040"
+ "file": "src/SoundFile.js",
+ "line": 300,
+ "description": "Set the playback rate of the soundfile.",
+ "itemtype": "method",
+ "name": "rate",
+ "params": [
+ {
+ "name": "rate",
+ "description": "1 is normal speed, 2 is double speed. Negative values plays the soundfile backwards.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nThis is a helper function that the p5.SoundFile calls to load\nitself. Accepts a callback (the name of another function)\nas an optional parameter.",
- "line": " lib/addons/p5.sound.js:1542"
+ "file": "src/SoundFile.js",
+ "line": 315,
+ "description": "Returns the duration of a sound file in seconds.",
+ "itemtype": "method",
+ "name": "duration",
+ "return": {
+ "description": "duration",
+ "type": "Number"
+ },
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nStop playback on all of this soundfile's sources.",
- "line": " lib/addons/p5.sound.js:2056"
+ "file": "src/SoundFile.js",
+ "line": 325,
+ "description": "Return the sample rate of the sound file.",
+ "itemtype": "method",
+ "name": "sampleRate",
+ "return": {
+ "description": "sampleRate",
+ "type": "Number"
+ },
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type",
- "line": " lib/addons/p5.sound.js:2604"
+ "file": "src/SoundFile.js",
+ "line": 335,
+ "description": "Move the playhead of a soundfile that is currently playing to a new position.",
+ "itemtype": "method",
+ "name": "jump",
+ "params": [
+ {
+ "name": "timePoint",
+ "description": "Time to jump to in seconds.",
+ "type": "Number"
+ }
+ ],
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nThe p5.Effect class is built\n \tusing Tone.js CrossFade",
- "line": " lib/addons/p5.sound.js:6455"
+ "file": "src/SoundFile.js",
+ "line": 345,
+ "description": "Return the playback state of the soundfile.",
+ "itemtype": "method",
+ "name": "isPlaying",
+ "return": {
+ "description": "Playback state, true or false.",
+ "type": "Boolean"
+ },
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nIn classes that extend\np5.Effect, connect effect nodes\nto the wet parameter",
- "line": " lib/addons/p5.sound.js:6462"
+ "file": "src/SoundFile.js",
+ "line": 355,
+ "description": "Return the playback state of the soundfile.",
+ "itemtype": "method",
+ "name": "isLooping",
+ "return": {
+ "description": "Looping State, true or false.",
+ "type": "Boolean"
+ },
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nEQFilter extends p5.Filter with constraints\nnecessary for the p5.EQ",
- "line": " lib/addons/p5.sound.js:7009"
+ "file": "src/SoundFile.js",
+ "line": 365,
+ "description": "Define a function to call when the soundfile is done playing.",
+ "itemtype": "method",
+ "name": "onended",
+ "params": [
+ {
+ "name": "callback",
+ "description": "Name of a function that will be called when the soundfile is done playing.",
+ "type": "Function"
+ }
+ ],
+ "example": [
+ "\n<div>\n<code>\nlet player;\n\nfunction preload() {\n player = loadSound('/assets/lucky_dragons_-_power_melody.mp3');\n}\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textSize(10);\n text('click to play', width/2, height/2);\n cnv.mousePressed(playSound);\n player.onended(coolFunction);\n}\n\nfunction coolFunction() {\n background(220);\n text('sound is done', width/2, height/2);\n}\n\nfunction playSound() {\n background(0, 255, 255);\n text('sound is playing', width/2, height/2);\n if (!player.isPlaying()) {\n player.play();\n }\n}\n</code>\n</div>"
+ ],
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nInspired by Simple Reverb by Jordan Santell\nhttps://github.com/web-audio-components/simple-reverb/blob/master/index.js\n\nUtility function for building an impulse response\nbased on the module parameters.",
- "line": " lib/addons/p5.sound.js:8508"
+ "file": "src/SoundFile.js",
+ "line": 408,
+ "description": "Return the number of samples in a sound file.",
+ "itemtype": "method",
+ "name": "frames",
+ "return": {
+ "description": "The number of samples in the sound file.",
+ "type": "Number"
+ },
+ "example": [
+ "\n<div>\n<code>\nlet player;\n\nfunction preload() {\n player = loadSound('/assets/lucky_dragons_-_power_melody.mp3');\n}\n\nfunction setup() {\n describe('A sketch that calculates and displays the length of a sound file using number of samples and sample rate.');\n createCanvas(100, 100);\n background(220);\n textAlign(CENTER);\n textWrap(WORD);\n textSize(10);\n frames = player.frames();\n sampleRate = player.sampleRate();\n sampleLength = round((frames / sampleRate), 2);\n info = `sample is ${sampleLength} seconds long`;\n text(info, 0, 20, 100);\n}\n</code>\n</div>"
+ ],
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nPrivate method to load a buffer as an Impulse Response,\nassign it to the convolverNode, and add to the Array of .impulses.",
- "line": " lib/addons/p5.sound.js:8659"
+ "file": "src/SoundFile.js",
+ "line": 442,
+ "description": "Gets the number of channels in the sound file.",
+ "itemtype": "method",
+ "name": "sampleRate",
+ "return": {
+ "description": "Returns the sample rate of the sound file."
+ },
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nmusicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string",
- "line": " lib/addons/p5.sound.js:9808"
+ "file": "src/SoundFile.js",
+ "line": 452,
+ "description": "Gets the number of channels in the sound file.",
+ "itemtype": "method",
+ "name": "channels",
+ "return": {
+ "description": "Returns the number of channels in the sound file."
+ },
+ "class": "p5.SoundFile",
+ "module": "p5.sound",
+ "submodule": "SoundFile"
},
{
- "message": "Missing item type\nDo not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded\n\nThe callback should only be called until maxIterations is reached",
- "line": " lib/addons/p5.sound.js:9826"
+ "file": "src/Utils.js",
+ "line": 14,
+ "description": "Get the window's audio context.",
+ "itemtype": "method",
+ "name": "getAudioContext",
+ "return": {
+ "description": "the audio context",
+ "type": "AudioContext"
+ },
+ "class": "p5.sound",
+ "module": "Sound",
+ "submodule": "Sound Utilities"
},
{
- "message": "Missing item type\ncallback invoked when the recording is over",
- "line": " lib/addons/p5.sound.js:10660"
+ "file": "src/Utils.js",
+ "line": 30,
+ "description": "Sets the AudioContext to a specified context to enable cross library compatibility.",
+ "itemtype": "method",
+ "name": "setAudioContext",
+ "params": [
+ {
+ "name": "the",
+ "description": "desired AudioContext.",
+ "type": "AudioContext"
+ }
+ ],
+ "class": "p5.sound",
+ "module": "Sound",
+ "submodule": "Sound Utilities"
},
{
- "message": "Missing item type\nPrivate method to ensure accurate values of this._voicesInUse\nAny time a new value is scheduled, it is necessary to increment all subsequent\nscheduledValues after attack, and decrement all subsequent\nscheduledValues after release",
- "line": " lib/addons/p5.sound.js:11995"
+ "file": "src/Utils.js",
+ "line": 39,
+ "description": "userStartAudio() starts the AudioContext on a user gesture. It can be placed in a specific interaction function, such as mousePressed().",
+ "itemtype": "method",
+ "name": "userStartAudio",
+ "class": "p5.sound",
+ "module": "Sound",
+ "submodule": "Sound Utilities"
},
{
- "message": "Missing item type",
- "line": " lib/addons/p5.sound.min.js:1"
+ "file": "src/Utils.js",
+ "line": 47,
+ "description": "userStopAudio() stops the AudioContext on a user gesture.",
+ "itemtype": "method",
+ "name": "userStopAudio",
+ "class": "p5.sound",
+ "module": "Sound",
+ "submodule": "Sound Utilities"
}
],
"consts": {
- "LABEL": [
- "p5.describe",
- "p5.describeElement",
- "p5.textOutput",
- "p5.gridOutput"
- ],
- "FALLBACK": [
- "p5.describe",
- "p5.describeElement",
- "p5.textOutput",
- "p5.gridOutput"
- ],
"RGB": [
"p5.colorMode"
],
+ "RGBHDR": [
+ "p5.colorMode"
+ ],
"HSB": [
"p5.colorMode"
],
"HSL": [
"p5.colorMode"
],
- "CHORD": [
- "p5.arc"
+ "HWB": [
+ "p5.colorMode"
],
- "PIE": [
- "p5.arc"
+ "LAB": [
+ "p5.colorMode"
],
- "OPEN": [
- "p5.arc"
+ "LCH": [
+ "p5.colorMode"
],
- "CENTER": [
+ "OKLAB": [
+ "p5.colorMode"
+ ],
+ "OKLCH": [
+ "p5.colorMode"
+ ],
+ "RGBA": [],
+ "VERSION": [],
+ "P2D": [
+ "p5.createCanvas",
+ "p5.createGraphics"
+ ],
+ "WEBGL": [
+ "p5.createCanvas",
+ "p5.createGraphics"
+ ],
+ "WEBGL2": [],
+ "ARROW": [
+ "p5.cursor"
+ ],
+ "SIMPLE": [],
+ "FULL": [],
+ "CROSS": [
+ "p5.cursor"
+ ],
+ "HAND": [
+ "p5.cursor"
+ ],
+ "MOVE": [
+ "p5.cursor"
+ ],
+ "TEXT": [
+ "p5.cursor"
+ ],
+ "WAIT": [
+ "p5.cursor"
+ ],
+ "HALF_PI": [],
+ "PI": [],
+ "QUARTER_PI": [],
+ "TAU": [],
+ "TWO_PI": [],
+ "DEG_TO_RAD": [],
+ "CORNER": [
+ "p5.imageMode",
"p5.ellipseMode",
- "p5.rectMode",
+ "p5.rectMode"
+ ],
+ "CORNERS": [
"p5.imageMode",
- "p5.textAlign"
+ "p5.ellipseMode",
+ "p5.rectMode"
],
"RADIUS": [
"p5.ellipseMode",
"p5.rectMode"
],
- "CORNER": [
- "p5.ellipseMode",
- "p5.rectMode",
- "p5.imageMode"
+ "RIGHT": [
+ "p5.image",
+ "p5.textAlign"
],
- "CORNERS": [
+ "LEFT": [
+ "p5.image",
+ "p5.textAlign"
+ ],
+ "CENTER": [
+ "p5.image",
+ "p5.imageMode",
"p5.ellipseMode",
"p5.rectMode",
- "p5.imageMode"
- ],
- "ROUND": [
- "p5.strokeCap",
- "p5.strokeJoin"
- ],
- "SQUARE": [
- "p5.strokeCap"
+ "p5.textAlign"
],
- "PROJECT": [
- "p5.strokeCap"
+ "TOP": [
+ "p5.image",
+ "p5.textAlign"
],
- "MITER": [
- "p5.strokeJoin"
+ "BOTTOM": [
+ "p5.image",
+ "p5.textAlign"
],
- "BEVEL": [
- "p5.strokeJoin"
+ "BASELINE": [
+ "p5.textAlign"
],
"POINTS": [
"p5.beginShape"
@@ -31488,6 +28542,8 @@
"LINES": [
"p5.beginShape"
],
+ "LINE_STRIP": [],
+ "LINE_LOOP": [],
"TRIANGLES": [
"p5.beginShape"
],
@@ -31503,43 +28559,71 @@
"QUAD_STRIP": [
"p5.beginShape"
],
- "TESS": [
+ "TESS": [],
+ "EMPTY_PATH": [],
+ "PATH": [
"p5.beginShape"
],
"CLOSE": [
+ "p5.endContour",
"p5.endShape"
],
- "ARROW": [
- "p5.cursor"
+ "OPEN": [
+ "p5.arc",
+ "p5.endContour"
],
- "CROSS": [
- "p5.cursor"
+ "CHORD": [
+ "p5.arc"
],
- "HAND": [
- "p5.cursor"
+ "PIE": [
+ "p5.arc"
],
- "MOVE": [
- "p5.cursor"
+ "PROJECT": [
+ "p5.strokeCap"
],
- "TEXT": [
- "p5.cursor"
+ "SQUARE": [
+ "p5.strokeCap"
],
- "WAIT": [
- "p5.cursor"
+ "ROUND": [
+ "p5.strokeCap",
+ "p5.strokeJoin"
],
- "P2D": [
- "p5.createCanvas",
- "p5.createGraphics"
+ "BEVEL": [
+ "p5.strokeJoin"
],
- "WEBGL": [
- "p5.createCanvas",
- "p5.createGraphics"
+ "MITER": [
+ "p5.strokeJoin"
+ ],
+ "AUTO": [
+ "p5.Element.size"
],
+ "ALT": [],
+ "BACKSPACE": [],
+ "CONTROL": [],
+ "DELETE": [],
+ "DOWN_ARROW": [],
+ "ENTER": [],
+ "ESCAPE": [],
+ "LEFT_ARROW": [],
+ "OPTION": [],
+ "RETURN": [],
+ "RIGHT_ARROW": [],
+ "SHIFT": [],
+ "TAB": [],
+ "UP_ARROW": [],
"BLEND": [
"p5.blendMode",
"p5.Image.blend",
"p5.blend"
],
+ "REMOVE": [
+ "p5.blendMode"
+ ],
+ "ADD": [
+ "p5.blendMode",
+ "p5.Image.blend",
+ "p5.blend"
+ ],
"DARKEST": [
"p5.blendMode",
"p5.Image.blend",
@@ -31555,12 +28639,15 @@
"p5.Image.blend",
"p5.blend"
],
- "MULTIPLY": [
+ "SUBTRACT": [
+ "p5.blendMode"
+ ],
+ "EXCLUSION": [
"p5.blendMode",
"p5.Image.blend",
"p5.blend"
],
- "EXCLUSION": [
+ "MULTIPLY": [
"p5.blendMode",
"p5.Image.blend",
"p5.blend"
@@ -31600,23 +28687,6 @@
"p5.Image.blend",
"p5.blend"
],
- "ADD": [
- "p5.blendMode",
- "p5.Image.blend",
- "p5.blend"
- ],
- "REMOVE": [
- "p5.blendMode"
- ],
- "SUBTRACT": [
- "p5.blendMode"
- ],
- "AUDIO": [
- "p5.createCapture"
- ],
- "VIDEO": [
- "p5.createCapture"
- ],
"THRESHOLD": [
"p5.Image.filter",
"p5.filter"
@@ -31637,11 +28707,11 @@
"p5.Image.filter",
"p5.filter"
],
- "ERODE": [
+ "DILATE": [
"p5.Image.filter",
"p5.filter"
],
- "DILATE": [
+ "ERODE": [
"p5.Image.filter",
"p5.filter"
],
@@ -31655,27 +28725,6 @@
"p5.textStyle",
"p5.textureMode"
],
- "RADIANS": [
- "p5.angleMode"
- ],
- "DEGREES": [
- "p5.angleMode"
- ],
- "LEFT": [
- "p5.textAlign"
- ],
- "RIGHT": [
- "p5.textAlign"
- ],
- "TOP": [
- "p5.textAlign"
- ],
- "BOTTOM": [
- "p5.textAlign"
- ],
- "BASELINE": [
- "p5.textAlign"
- ],
"ITALIC": [
"p5.textStyle"
],
@@ -31685,23 +28734,70 @@
"BOLDITALIC": [
"p5.textStyle"
],
- "WORD": [
+ "CHAR": [
"p5.textWrap"
],
- "CHAR": [
+ "WORD": [
"p5.textWrap"
],
+ "LINEAR": [],
+ "QUADRATIC": [],
+ "BEZIER": [],
+ "CURVE": [],
+ "STROKE": [],
+ "FILL": [],
+ "TEXTURE": [],
+ "IMMEDIATE": [],
"IMAGE": [
"p5.textureMode"
],
- "CLAMP": [
+ "NEAREST": [],
+ "REPEAT": [
"p5.textureWrap"
],
- "REPEAT": [
+ "CLAMP": [
"p5.textureWrap"
],
"MIRROR": [
"p5.textureWrap"
- ]
+ ],
+ "FLAT": [
+ "p5.Geometry.computeNormals"
+ ],
+ "SMOOTH": [
+ "p5.Geometry.computeNormals"
+ ],
+ "LANDSCAPE": [],
+ "PORTRAIT": [],
+ "GRID": [
+ "p5.debugMode"
+ ],
+ "AXES": [
+ "p5.debugMode"
+ ],
+ "LABEL": [
+ "p5.describe",
+ "p5.describeElement",
+ "p5.textOutput",
+ "p5.gridOutput"
+ ],
+ "FALLBACK": [
+ "p5.describe",
+ "p5.describeElement",
+ "p5.textOutput",
+ "p5.gridOutput"
+ ],
+ "CONTAIN": [
+ "p5.image"
+ ],
+ "COVER": [
+ "p5.image"
+ ],
+ "UNSIGNED_BYTE": [],
+ "UNSIGNED_INT": [],
+ "FLOAT": [],
+ "HALF_FLOAT": [],
+ "INCLUDE": [],
+ "EXCLUDE": []
}
}
\ No newline at end of file
diff --git a/public/search-indices/en.json b/public/search-indices/en.json
index fd53c8bc19..8837216ba7 100644
--- a/public/search-indices/en.json
+++ b/public/search-indices/en.json
@@ -1 +1 @@
-{"contributor-docs":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure success volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increase groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](https://p5js.org/reference/p5.sound), [class page](https://p5js.org/reference/p5/p5.Vector), [method page](https://p5js.org/reference/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this instruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (https://p5js.org/reference/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (https://p5js.org/reference/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (https://p5js.org/reference/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (https://p5js.org/reference/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```javascript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (https://p5js.org/reference/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (https://p5js.org/reference/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed requires temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve *Both 1x include system diffing algorithm robust system* operating systems browsers render graphics subtle variations differences normal fail Common acceptable Single-pixel shifts line positions Slight anti-aliasing Text font weight kerning Minor curve smoothness text rendered macOS slightly Linux applies thin lines curves graphical elements image earlier caused environments [Example]src/content/contributor-docs/images/pixelmatch2png sophisticated distinguish Initial Compares pixels moderate threshold identify [pixelmatch](https://github.com/mapbox/pixelmatch/) pixel Cluster identification Groups connected difference Breadth-First Search BFS Pattern recognition specifically identifies Line shift clusters represent element shifted 1px Isolated noise Smart failure criteria Applies thresholds Ignores smaller total significant Permits minor typical platforms [Example]src/content/contributor-docs/images/pixelmatchpng balances sensitivity real tolerating platform-specific parameters const MIN_CLUSTER_SIZE Minimum cluster MAX_TOTAL_DIFF_PIXELS Maximum allowed analyzing neighborhood 80% ≤2 neighbors classified structural intelligent ensures due catching important note improved pass failed detecting showing visually meaningful makes reliable reduces failures require manual investigation ### efficient sizes dimensions close 50x50 resizes images canvases result faster Focus visible details intricate hard Design demonstrate reduced cramming variants call times visualTest'stroke variations' stroke p5stroke0 p5strokeWeight1 p5line10 Screenshot thick p5strokeWeight5"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries":{"AnimatorJs":{"relativeUrl":"/libraries/","description":"A javascript animation viewer based on a custom animation API primarily designed for p5.js and allows for dynamic, lightweight, real-time rendered browser animations controlled purely by code."},"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Pixyp5js":{"relativeUrl":"/libraries/","description":"A library for easily more easily dealing with pixels in images during runtime"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"TurtleGraphics":{"relativeUrl":"/libraries/","description":"Watch images being drawn using turtle graphics."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"Zoomp5js":{"relativeUrl":"/libraries/","description":"A simple library for adding the zooming functionality to your p5.js project."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.5":{"relativeUrl":"/libraries/","description":"Add UI to p5.js and other goodies"},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Modbuttons":{"relativeUrl":"/libraries/","description":"a simple and modular button system for p5js"},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Sprite":{"relativeUrl":"/libraries/","description":"A basic sprite library that supports both animated and static sprites for p5.js"},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.colorGenerator":{"relativeUrl":"/libraries/","description":"p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point."},"p5.comfyui-helper":{"relativeUrl":"/libraries/","description":"A library for interfacing with ComfyUI"},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."},"XYscope.js":{"relativeUrl":"/libraries/","description":"p5.js library to render graphics on analog vector displays"}},"events":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro VimeoEmbed ///components/VimeoEmbed/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg Introduction Casey Reas Johanna Hedva Stephanie Pi Phoenix Perry Taeyoon Choi Sara Hendren Epic Jefferson Chandler McWilliams Q&A ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aarati Akkapeddi ":{"relativeUrl":"/people/#aarati-akkapeddi-"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aaron Welles":{"relativeUrl":"/people/#aaron-welles"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abdiel Lopez":{"relativeUrl":"/people/#abdiel-lopez"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Animesh Sinha":{"relativeUrl":"/people/#animesh-sinha"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antoinette Bumatay-Chan":{"relativeUrl":"/people/#antoinette-bumatay-chan"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashish Karn":{"relativeUrl":"/people/#ashish-karn"},"ashish singh":{"relativeUrl":"/people/#ashish-singh"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"Ashwani Dey":{"relativeUrl":"/people/#ashwani-dey"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"beau-muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"benpalevsky":{"relativeUrl":"/people/#benpalevsky"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"blackboxlogic":{"relativeUrl":"/people/#blackboxlogic"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Bojidar Marinov":{"relativeUrl":"/people/#bojidar-marinov"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"c-dacanay":{"relativeUrl":"/people/#c-dacanay"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Callie":{"relativeUrl":"/people/#callie"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Carrie Wang":{"relativeUrl":"/people/#carrie-wang"},"Casey Conchinha":{"relativeUrl":"/people/#casey-conchinha"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chloe Yan":{"relativeUrl":"/people/#chloe-yan"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"cog25":{"relativeUrl":"/people/#cog25"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"computational mama":{"relativeUrl":"/people/#computational-mama"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"crh82":{"relativeUrl":"/people/#crh82"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Darren Kessner":{"relativeUrl":"/people/#darren-kessner"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"davidblitz":{"relativeUrl":"/people/#davidblitz"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"dhanush":{"relativeUrl":"/people/#dhanush"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"FORCHA PEARL":{"relativeUrl":"/people/#forcha-pearl"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Franolich Design":{"relativeUrl":"/people/#franolich-design"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gabriel Sroka":{"relativeUrl":"/people/#gabriel-sroka"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Albers":{"relativeUrl":"/people/#greg-albers"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Greg Stanton":{"relativeUrl":"/people/#greg-stanton"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Kholiya":{"relativeUrl":"/people/#himanshu-kholiya"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"Ilona Brand":{"relativeUrl":"/people/#ilona-brand"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jackie Liu":{"relativeUrl":"/people/#jackie-liu"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Berghold":{"relativeUrl":"/people/#jared-berghold"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"jeanette":{"relativeUrl":"/people/#jeanette"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Philyaw":{"relativeUrl":"/people/#jordan-philyaw"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Kathryn Lichlyter":{"relativeUrl":"/people/#kathryn-lichlyter"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Gupta":{"relativeUrl":"/people/#keshav-gupta"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"Kit Kuksenok":{"relativeUrl":"/people/#kit-kuksenok"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"Kristian Hamilton":{"relativeUrl":"/people/#kristian-hamilton"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Berrios":{"relativeUrl":"/people/#lauren-berrios"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"Luke Plowden":{"relativeUrl":"/people/#luke-plowden"},"M":{"relativeUrl":"/people/#m"},"ma haidong":{"relativeUrl":"/people/#ma-haidong"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marco Macarena":{"relativeUrl":"/people/#marco-macarena"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Martin Leopold Groedl":{"relativeUrl":"/people/#martin-leopold-groedl"},"Martin Lorentzon":{"relativeUrl":"/people/#martin-lorentzon"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"mathewpan2":{"relativeUrl":"/people/#mathewpan2"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Arguelles":{"relativeUrl":"/people/#maya-arguelles"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"Mayank Verma":{"relativeUrl":"/people/#mayank-verma"},"mclark414":{"relativeUrl":"/people/#mclark414"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"Melody Sharp":{"relativeUrl":"/people/#melody-sharp"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"Mx. Ramsey":{"relativeUrl":"/people/#mx--ramsey"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"oliver thurley":{"relativeUrl":"/people/#oliver-thurley"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"Pim Tournaye":{"relativeUrl":"/people/#pim-tournaye"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Qingfeng Huang":{"relativeUrl":"/people/#qingfeng-huang"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajas Samse":{"relativeUrl":"/people/#rajas-samse"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"Renjie Li":{"relativeUrl":"/people/#renjie-li"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishab Kumar Jha":{"relativeUrl":"/people/#rishab-kumar-jha"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Rishi":{"relativeUrl":"/people/#rishi"},"Ritesh Patil":{"relativeUrl":"/people/#ritesh-patil"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"roxi09":{"relativeUrl":"/people/#roxi09"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"Seyko":{"relativeUrl":"/people/#seyko"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shoury Singh":{"relativeUrl":"/people/#shoury-singh"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Tibor Udvari":{"relativeUrl":"/people/#tibor-udvari"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Vaivaswat Dubey":{"relativeUrl":"/people/#vaivaswat-dubey"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"Vik":{"relativeUrl":"/people/#vik"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishesh Rawal":{"relativeUrl":"/people/#vishesh-rawal"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"willallstet":{"relativeUrl":"/people/#willallstet"},"William Hazard":{"relativeUrl":"/people/#william-hazard"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"Xevi H. Aqeel":{"relativeUrl":"/people/#xevi-h--aqeel"},"Xin Xin":{"relativeUrl":"/people/#xin-xin"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"ℤ":{"relativeUrl":"/people/#ℤ"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference":{"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"append()":{"relativeUrl":"/reference/p5/append","alias":"append"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"arrayCopy()":{"relativeUrl":"/reference/p5/arrayCopy","alias":"arrayCopy"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"baseColorShader()":{"relativeUrl":"/reference/p5/baseColorShader","alias":"baseColorShader"},"baseMaterialShader()":{"relativeUrl":"/reference/p5/baseMaterialShader","alias":"baseMaterialShader"},"baseNormalShader()":{"relativeUrl":"/reference/p5/baseNormalShader","alias":"baseNormalShader"},"baseStrokeShader()":{"relativeUrl":"/reference/p5/baseStrokeShader","alias":"baseStrokeShader"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"concat()":{"relativeUrl":"/reference/p5/concat","alias":"concat"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"HSB":{"relativeUrl":"/reference/p5/HSB"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createConvolver()":{"relativeUrl":"/reference/p5/createConvolver","alias":"createConvolver"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createModel()":{"relativeUrl":"/reference/p5/createModel","alias":"createModel"},"createNumberDict()":{"relativeUrl":"/reference/p5/createNumberDict","alias":"createNumberDict"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createStringDict()":{"relativeUrl":"/reference/p5/createStringDict","alias":"createStringDict"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"freqToMidi()":{"relativeUrl":"/reference/p5/freqToMidi","alias":"freqToMidi"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getAudioContext()":{"relativeUrl":"/reference/p5/getAudioContext","alias":"getAudioContext"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getOutputVolume()":{"relativeUrl":"/reference/p5/getOutputVolume","alias":"getOutputVolume"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"join()":{"relativeUrl":"/reference/p5/join","alias":"join"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadSound()":{"relativeUrl":"/reference/p5/loadSound","alias":"loadSound"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"match()":{"relativeUrl":"/reference/p5/match","alias":"match"},"matchAll()":{"relativeUrl":"/reference/p5/matchAll","alias":"matchAll"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"midiToFreq()":{"relativeUrl":"/reference/p5/midiToFreq","alias":"midiToFreq"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"outputVolume()":{"relativeUrl":"/reference/p5/outputVolume","alias":"outputVolume"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.NumberDict":{"relativeUrl":"/reference/p5/p5.NumberDict"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Renderer":{"relativeUrl":"/reference/p5/p5.Renderer"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.StringDict":{"relativeUrl":"/reference/p5/p5.StringDict"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.TypedDict":{"relativeUrl":"/reference/p5/p5.TypedDict"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"paletteLerp()":{"relativeUrl":"/reference/p5/paletteLerp","alias":"paletteLerp"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"preload()":{"relativeUrl":"/reference/p5/preload","alias":"preload"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"reverse()":{"relativeUrl":"/reference/p5/reverse","alias":"reverse"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"sampleRate()":{"relativeUrl":"/reference/p5/sampleRate","alias":"sampleRate"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveSound()":{"relativeUrl":"/reference/p5/saveSound","alias":"saveSound"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setBPM()":{"relativeUrl":"/reference/p5/setBPM","alias":"setBPM"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shorten()":{"relativeUrl":"/reference/p5/shorten","alias":"shorten"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"sort()":{"relativeUrl":"/reference/p5/sort","alias":"sort"},"soundFormats()":{"relativeUrl":"/reference/p5/soundFormats","alias":"soundFormats"},"soundOut":{"relativeUrl":"/reference/p5/soundOut"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"splice()":{"relativeUrl":"/reference/p5/splice","alias":"splice"},"split()":{"relativeUrl":"/reference/p5/split","alias":"split"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"subset()":{"relativeUrl":"/reference/p5/subset","alias":"subset"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"trim()":{"relativeUrl":"/reference/p5/trim","alias":"trim"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"userStartAudio()":{"relativeUrl":"/reference/p5/userStartAudio","alias":"userStartAudio"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.Amplitude.toggleNormalize()":{"relativeUrl":"/reference/p5.Amplitude/toggleNormalize","alias":"toggleNormalize"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.amplitude":{"relativeUrl":"/reference/p5.AudioIn/amplitude","alias":"amplitude"},"p5.AudioIn.connect()":{"relativeUrl":"/reference/p5.AudioIn/connect","alias":"connect"},"p5.AudioIn.disconnect()":{"relativeUrl":"/reference/p5.AudioIn/disconnect","alias":"disconnect"},"p5.AudioIn.enabled":{"relativeUrl":"/reference/p5.AudioIn/enabled","alias":"enabled"},"p5.AudioIn.getLevel()":{"relativeUrl":"/reference/p5.AudioIn/getLevel","alias":"getLevel"},"p5.AudioIn.getSources()":{"relativeUrl":"/reference/p5.AudioIn/getSources","alias":"getSources"},"p5.AudioIn.setSource()":{"relativeUrl":"/reference/p5.AudioIn/setSource","alias":"setSource"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.AudioVoice.connect()":{"relativeUrl":"/reference/p5.AudioVoice/connect","alias":"connect"},"p5.AudioVoice.disconnect()":{"relativeUrl":"/reference/p5.AudioVoice/disconnect","alias":"disconnect"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.roll()":{"relativeUrl":"/reference/p5.Camera/roll","alias":"roll"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Compressor.attack()":{"relativeUrl":"/reference/p5.Compressor/attack","alias":"attack"},"p5.Compressor.compressor":{"relativeUrl":"/reference/p5.Compressor/compressor","alias":"compressor"},"p5.Compressor.knee()":{"relativeUrl":"/reference/p5.Compressor/knee","alias":"knee"},"p5.Compressor.process()":{"relativeUrl":"/reference/p5.Compressor/process","alias":"process"},"p5.Compressor.ratio()":{"relativeUrl":"/reference/p5.Compressor/ratio","alias":"ratio"},"p5.Compressor.reduction()":{"relativeUrl":"/reference/p5.Compressor/reduction","alias":"reduction"},"p5.Compressor.release()":{"relativeUrl":"/reference/p5.Compressor/release","alias":"release"},"p5.Compressor.set()":{"relativeUrl":"/reference/p5.Compressor/set","alias":"set"},"p5.Compressor.threshold()":{"relativeUrl":"/reference/p5.Compressor/threshold","alias":"threshold"},"p5.Convolver.addImpulse()":{"relativeUrl":"/reference/p5.Convolver/addImpulse","alias":"addImpulse"},"p5.Convolver.convolverNode":{"relativeUrl":"/reference/p5.Convolver/convolverNode","alias":"convolverNode"},"p5.Convolver.impulses":{"relativeUrl":"/reference/p5.Convolver/impulses","alias":"impulses"},"p5.Convolver.process()":{"relativeUrl":"/reference/p5.Convolver/process","alias":"process"},"p5.Convolver.resetImpulse()":{"relativeUrl":"/reference/p5.Convolver/resetImpulse","alias":"resetImpulse"},"p5.Convolver.toggleImpulse()":{"relativeUrl":"/reference/p5.Convolver/toggleImpulse","alias":"toggleImpulse"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.connect()":{"relativeUrl":"/reference/p5.Delay/connect","alias":"connect"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.disconnect()":{"relativeUrl":"/reference/p5.Delay/disconnect","alias":"disconnect"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.filter()":{"relativeUrl":"/reference/p5.Delay/filter","alias":"filter"},"p5.Delay.leftDelay":{"relativeUrl":"/reference/p5.Delay/leftDelay","alias":"leftDelay"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Delay.rightDelay":{"relativeUrl":"/reference/p5.Delay/rightDelay","alias":"rightDelay"},"p5.Delay.setType()":{"relativeUrl":"/reference/p5.Delay/setType","alias":"setType"},"p5.Distortion.WaveShaperNode":{"relativeUrl":"/reference/p5.Distortion/WaveShaperNode","alias":"WaveShaperNode"},"p5.Distortion.getAmount()":{"relativeUrl":"/reference/p5.Distortion/getAmount","alias":"getAmount"},"p5.Distortion.getOversample()":{"relativeUrl":"/reference/p5.Distortion/getOversample","alias":"getOversample"},"p5.Distortion.process()":{"relativeUrl":"/reference/p5.Distortion/process","alias":"process"},"p5.Distortion.set()":{"relativeUrl":"/reference/p5.Distortion/set","alias":"set"},"p5.EQ.bands":{"relativeUrl":"/reference/p5.EQ/bands","alias":"bands"},"p5.EQ.process()":{"relativeUrl":"/reference/p5.EQ/process","alias":"process"},"p5.Effect.amp()":{"relativeUrl":"/reference/p5.Effect/amp","alias":"amp"},"p5.Effect.chain()":{"relativeUrl":"/reference/p5.Effect/chain","alias":"chain"},"p5.Effect.connect()":{"relativeUrl":"/reference/p5.Effect/connect","alias":"connect"},"p5.Effect.disconnect()":{"relativeUrl":"/reference/p5.Effect/disconnect","alias":"disconnect"},"p5.Effect.drywet()":{"relativeUrl":"/reference/p5.Effect/drywet","alias":"drywet"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.touchEnded()":{"relativeUrl":"/reference/p5.Element/touchEnded","alias":"touchEnded"},"p5.Element.touchMoved()":{"relativeUrl":"/reference/p5.Element/touchMoved","alias":"touchMoved"},"p5.Element.touchStarted()":{"relativeUrl":"/reference/p5.Element/touchStarted","alias":"touchStarted"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.add()":{"relativeUrl":"/reference/p5.Envelope/add","alias":"add"},"p5.Envelope.attackLevel":{"relativeUrl":"/reference/p5.Envelope/attackLevel","alias":"attackLevel"},"p5.Envelope.attackTime":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.decayLevel":{"relativeUrl":"/reference/p5.Envelope/decayLevel","alias":"decayLevel"},"p5.Envelope.decayTime":{"relativeUrl":"/reference/p5.Envelope/decayTime","alias":"decayTime"},"p5.Envelope.mult()":{"relativeUrl":"/reference/p5.Envelope/mult","alias":"mult"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.ramp()":{"relativeUrl":"/reference/p5.Envelope/ramp","alias":"ramp"},"p5.Envelope.releaseLevel":{"relativeUrl":"/reference/p5.Envelope/releaseLevel","alias":"releaseLevel"},"p5.Envelope.releaseTime":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.scale()":{"relativeUrl":"/reference/p5.Envelope/scale","alias":"scale"},"p5.Envelope.set()":{"relativeUrl":"/reference/p5.Envelope/set","alias":"set"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.setExp()":{"relativeUrl":"/reference/p5.Envelope/setExp","alias":"setExp"},"p5.Envelope.setInput()":{"relativeUrl":"/reference/p5.Envelope/setInput","alias":"setInput"},"p5.Envelope.setRange()":{"relativeUrl":"/reference/p5.Envelope/setRange","alias":"setRange"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.getCentroid()":{"relativeUrl":"/reference/p5.FFT/getCentroid","alias":"getCentroid"},"p5.FFT.getEnergy()":{"relativeUrl":"/reference/p5.FFT/getEnergy","alias":"getEnergy"},"p5.FFT.getOctaveBands()":{"relativeUrl":"/reference/p5.FFT/getOctaveBands","alias":"getOctaveBands"},"p5.FFT.linAverages()":{"relativeUrl":"/reference/p5.FFT/linAverages","alias":"linAverages"},"p5.FFT.logAverages()":{"relativeUrl":"/reference/p5.FFT/logAverages","alias":"logAverages"},"p5.FFT.setInput()":{"relativeUrl":"/reference/p5.FFT/setInput","alias":"setInput"},"p5.FFT.smooth()":{"relativeUrl":"/reference/p5.FFT/smooth","alias":"smooth"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Filter.biquadFilter":{"relativeUrl":"/reference/p5.Filter/biquadFilter","alias":"biquadFilter"},"p5.Filter.freq()":{"relativeUrl":"/reference/p5.Filter/freq","alias":"freq"},"p5.Filter.gain()":{"relativeUrl":"/reference/p5.Filter/gain","alias":"gain"},"p5.Filter.process()":{"relativeUrl":"/reference/p5.Filter/process","alias":"process"},"p5.Filter.res()":{"relativeUrl":"/reference/p5.Filter/res","alias":"res"},"p5.Filter.set()":{"relativeUrl":"/reference/p5.Filter/set","alias":"set"},"p5.Filter.setType()":{"relativeUrl":"/reference/p5.Filter/setType","alias":"setType"},"p5.Filter.toggle()":{"relativeUrl":"/reference/p5.Filter/toggle","alias":"toggle"},"p5.Font.font":{"relativeUrl":"/reference/p5.Font/font","alias":"font"},"p5.Font.textBounds()":{"relativeUrl":"/reference/p5.Font/textBounds","alias":"textBounds"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.loadPixels()":{"relativeUrl":"/reference/p5.Framebuffer/loadPixels","alias":"loadPixels"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Framebuffer.updatePixels()":{"relativeUrl":"/reference/p5.Framebuffer/updatePixels","alias":"updatePixels"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Gain.connect()":{"relativeUrl":"/reference/p5.Gain/connect","alias":"connect"},"p5.Gain.disconnect()":{"relativeUrl":"/reference/p5.Gain/disconnect","alias":"disconnect"},"p5.Gain.setInput()":{"relativeUrl":"/reference/p5.Gain/setInput","alias":"setInput"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.saveObj()":{"relativeUrl":"/reference/p5.Geometry/saveObj","alias":"saveObj"},"p5.Geometry.saveStl()":{"relativeUrl":"/reference/p5.Geometry/saveStl","alias":"saveStl"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.MonoSynth.amp()":{"relativeUrl":"/reference/p5.MonoSynth/amp","alias":"amp"},"p5.MonoSynth.attack":{"relativeUrl":"/reference/p5.MonoSynth/attack","alias":"attack"},"p5.MonoSynth.connect()":{"relativeUrl":"/reference/p5.MonoSynth/connect","alias":"connect"},"p5.MonoSynth.disconnect()":{"relativeUrl":"/reference/p5.MonoSynth/disconnect","alias":"disconnect"},"p5.MonoSynth.dispose()":{"relativeUrl":"/reference/p5.MonoSynth/dispose","alias":"dispose"},"p5.MonoSynth.play()":{"relativeUrl":"/reference/p5.MonoSynth/play","alias":"play"},"p5.MonoSynth.setADSR()":{"relativeUrl":"/reference/p5.MonoSynth/setADSR","alias":"setADSR"},"p5.MonoSynth.triggerAttack()":{"relativeUrl":"/reference/p5.MonoSynth/triggerAttack","alias":"triggerAttack"},"p5.MonoSynth.triggerRelease()":{"relativeUrl":"/reference/p5.MonoSynth/triggerRelease","alias":"triggerRelease"},"p5.Noise.setType()":{"relativeUrl":"/reference/p5.Noise/setType","alias":"setType"},"p5.NumberDict.add()":{"relativeUrl":"/reference/p5.NumberDict/add","alias":"add"},"p5.NumberDict.div()":{"relativeUrl":"/reference/p5.NumberDict/div","alias":"div"},"p5.NumberDict.maxKey()":{"relativeUrl":"/reference/p5.NumberDict/maxKey","alias":"maxKey"},"p5.NumberDict.maxValue()":{"relativeUrl":"/reference/p5.NumberDict/maxValue","alias":"maxValue"},"p5.NumberDict.minKey()":{"relativeUrl":"/reference/p5.NumberDict/minKey","alias":"minKey"},"p5.NumberDict.minValue()":{"relativeUrl":"/reference/p5.NumberDict/minValue","alias":"minValue"},"p5.NumberDict.mult()":{"relativeUrl":"/reference/p5.NumberDict/mult","alias":"mult"},"p5.NumberDict.sub()":{"relativeUrl":"/reference/p5.NumberDict/sub","alias":"sub"},"p5.Oscillator.add()":{"relativeUrl":"/reference/p5.Oscillator/add","alias":"add"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.connect()":{"relativeUrl":"/reference/p5.Oscillator/connect","alias":"connect"},"p5.Oscillator.disconnect()":{"relativeUrl":"/reference/p5.Oscillator/disconnect","alias":"disconnect"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.getAmp()":{"relativeUrl":"/reference/p5.Oscillator/getAmp","alias":"getAmp"},"p5.Oscillator.getFreq()":{"relativeUrl":"/reference/p5.Oscillator/getFreq","alias":"getFreq"},"p5.Oscillator.getPan()":{"relativeUrl":"/reference/p5.Oscillator/getPan","alias":"getPan"},"p5.Oscillator.getType()":{"relativeUrl":"/reference/p5.Oscillator/getType","alias":"getType"},"p5.Oscillator.mult()":{"relativeUrl":"/reference/p5.Oscillator/mult","alias":"mult"},"p5.Oscillator.pan()":{"relativeUrl":"/reference/p5.Oscillator/pan","alias":"pan"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.scale()":{"relativeUrl":"/reference/p5.Oscillator/scale","alias":"scale"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.orient()":{"relativeUrl":"/reference/p5.Panner3D/orient","alias":"orient"},"p5.Panner3D.orientX()":{"relativeUrl":"/reference/p5.Panner3D/orientX","alias":"orientX"},"p5.Panner3D.orientY()":{"relativeUrl":"/reference/p5.Panner3D/orientY","alias":"orientY"},"p5.Panner3D.orientZ()":{"relativeUrl":"/reference/p5.Panner3D/orientZ","alias":"orientZ"},"p5.Panner3D.panner":{"relativeUrl":"/reference/p5.Panner3D/panner","alias":"panner"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rollof()":{"relativeUrl":"/reference/p5.Panner3D/rollof","alias":"rollof"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.Part.addPhrase()":{"relativeUrl":"/reference/p5.Part/addPhrase","alias":"addPhrase"},"p5.Part.getBPM()":{"relativeUrl":"/reference/p5.Part/getBPM","alias":"getBPM"},"p5.Part.getPhrase()":{"relativeUrl":"/reference/p5.Part/getPhrase","alias":"getPhrase"},"p5.Part.loop()":{"relativeUrl":"/reference/p5.Part/loop","alias":"loop"},"p5.Part.noLoop()":{"relativeUrl":"/reference/p5.Part/noLoop","alias":"noLoop"},"p5.Part.onStep()":{"relativeUrl":"/reference/p5.Part/onStep","alias":"onStep"},"p5.Part.pause()":{"relativeUrl":"/reference/p5.Part/pause","alias":"pause"},"p5.Part.removePhrase()":{"relativeUrl":"/reference/p5.Part/removePhrase","alias":"removePhrase"},"p5.Part.replaceSequence()":{"relativeUrl":"/reference/p5.Part/replaceSequence","alias":"replaceSequence"},"p5.Part.setBPM()":{"relativeUrl":"/reference/p5.Part/setBPM","alias":"setBPM"},"p5.Part.start()":{"relativeUrl":"/reference/p5.Part/start","alias":"start"},"p5.Part.stop()":{"relativeUrl":"/reference/p5.Part/stop","alias":"stop"},"isDetected":{"relativeUrl":"/reference/p5.PeakDetect/isDetected"},"p5.PeakDetect.onPeak()":{"relativeUrl":"/reference/p5.PeakDetect/onPeak","alias":"onPeak"},"p5.PeakDetect.update()":{"relativeUrl":"/reference/p5.PeakDetect/update","alias":"update"},"p5.Phrase.sequence":{"relativeUrl":"/reference/p5.Phrase/sequence","alias":"sequence"},"p5.PolySynth.AudioVoice":{"relativeUrl":"/reference/p5.PolySynth/AudioVoice","alias":"AudioVoice"},"p5.PolySynth.connect()":{"relativeUrl":"/reference/p5.PolySynth/connect","alias":"connect"},"p5.PolySynth.disconnect()":{"relativeUrl":"/reference/p5.PolySynth/disconnect","alias":"disconnect"},"p5.PolySynth.dispose()":{"relativeUrl":"/reference/p5.PolySynth/dispose","alias":"dispose"},"p5.PolySynth.noteADSR()":{"relativeUrl":"/reference/p5.PolySynth/noteADSR","alias":"noteADSR"},"p5.PolySynth.noteAttack()":{"relativeUrl":"/reference/p5.PolySynth/noteAttack","alias":"noteAttack"},"p5.PolySynth.noteRelease()":{"relativeUrl":"/reference/p5.PolySynth/noteRelease","alias":"noteRelease"},"p5.PolySynth.notes":{"relativeUrl":"/reference/p5.PolySynth/notes","alias":"notes"},"p5.PolySynth.play()":{"relativeUrl":"/reference/p5.PolySynth/play","alias":"play"},"p5.PolySynth.polyvalue":{"relativeUrl":"/reference/p5.PolySynth/polyvalue","alias":"polyvalue"},"p5.PolySynth.setADSR()":{"relativeUrl":"/reference/p5.PolySynth/setADSR","alias":"setADSR"},"p5.PrintWriter.clear()":{"relativeUrl":"/reference/p5.PrintWriter/clear","alias":"clear"},"p5.PrintWriter.close()":{"relativeUrl":"/reference/p5.PrintWriter/close","alias":"close"},"p5.PrintWriter.print()":{"relativeUrl":"/reference/p5.PrintWriter/print","alias":"print"},"p5.PrintWriter.write()":{"relativeUrl":"/reference/p5.PrintWriter/write","alias":"write"},"p5.Pulse.width()":{"relativeUrl":"/reference/p5.Pulse/width","alias":"width"},"p5.Reverb.amp()":{"relativeUrl":"/reference/p5.Reverb/amp","alias":"amp"},"p5.Reverb.connect()":{"relativeUrl":"/reference/p5.Reverb/connect","alias":"connect"},"p5.Reverb.disconnect()":{"relativeUrl":"/reference/p5.Reverb/disconnect","alias":"disconnect"},"p5.Reverb.process()":{"relativeUrl":"/reference/p5.Reverb/process","alias":"process"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Score.loop()":{"relativeUrl":"/reference/p5.Score/loop","alias":"loop"},"p5.Score.noLoop()":{"relativeUrl":"/reference/p5.Score/noLoop","alias":"noLoop"},"p5.Score.pause()":{"relativeUrl":"/reference/p5.Score/pause","alias":"pause"},"p5.Score.setBPM()":{"relativeUrl":"/reference/p5.Score/setBPM","alias":"setBPM"},"p5.Score.start()":{"relativeUrl":"/reference/p5.Score/start","alias":"start"},"p5.Score.stop()":{"relativeUrl":"/reference/p5.Score/stop","alias":"stop"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.inspectHooks()":{"relativeUrl":"/reference/p5.Shader/inspectHooks","alias":"inspectHooks"},"p5.Shader.modify()":{"relativeUrl":"/reference/p5.Shader/modify","alias":"modify"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.SoundFile.addCue()":{"relativeUrl":"/reference/p5.SoundFile/addCue","alias":"addCue"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.clearCues()":{"relativeUrl":"/reference/p5.SoundFile/clearCues","alias":"clearCues"},"p5.SoundFile.connect()":{"relativeUrl":"/reference/p5.SoundFile/connect","alias":"connect"},"p5.SoundFile.currentTime()":{"relativeUrl":"/reference/p5.SoundFile/currentTime","alias":"currentTime"},"p5.SoundFile.disconnect()":{"relativeUrl":"/reference/p5.SoundFile/disconnect","alias":"disconnect"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.getBlob()":{"relativeUrl":"/reference/p5.SoundFile/getBlob","alias":"getBlob"},"p5.SoundFile.getPan()":{"relativeUrl":"/reference/p5.SoundFile/getPan","alias":"getPan"},"p5.SoundFile.getPeaks()":{"relativeUrl":"/reference/p5.SoundFile/getPeaks","alias":"getPeaks"},"p5.SoundFile.isLoaded()":{"relativeUrl":"/reference/p5.SoundFile/isLoaded","alias":"isLoaded"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPaused()":{"relativeUrl":"/reference/p5.SoundFile/isPaused","alias":"isPaused"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pan()":{"relativeUrl":"/reference/p5.SoundFile/pan","alias":"pan"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.playMode()":{"relativeUrl":"/reference/p5.SoundFile/playMode","alias":"playMode"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.removeCue()":{"relativeUrl":"/reference/p5.SoundFile/removeCue","alias":"removeCue"},"p5.SoundFile.reverseBuffer()":{"relativeUrl":"/reference/p5.SoundFile/reverseBuffer","alias":"reverseBuffer"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.save()":{"relativeUrl":"/reference/p5.SoundFile/save","alias":"save"},"p5.SoundFile.setBuffer()":{"relativeUrl":"/reference/p5.SoundFile/setBuffer","alias":"setBuffer"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.setVolume()":{"relativeUrl":"/reference/p5.SoundFile/setVolume","alias":"setVolume"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.SoundLoop.bpm":{"relativeUrl":"/reference/p5.SoundLoop/bpm","alias":"bpm"},"p5.SoundLoop.interval":{"relativeUrl":"/reference/p5.SoundLoop/interval","alias":"interval"},"p5.SoundLoop.iterations":{"relativeUrl":"/reference/p5.SoundLoop/iterations","alias":"iterations"},"p5.SoundLoop.maxIterations":{"relativeUrl":"/reference/p5.SoundLoop/maxIterations","alias":"maxIterations"},"p5.SoundLoop.musicalTimeMode":{"relativeUrl":"/reference/p5.SoundLoop/musicalTimeMode","alias":"musicalTimeMode"},"p5.SoundLoop.pause()":{"relativeUrl":"/reference/p5.SoundLoop/pause","alias":"pause"},"p5.SoundLoop.start()":{"relativeUrl":"/reference/p5.SoundLoop/start","alias":"start"},"p5.SoundLoop.stop()":{"relativeUrl":"/reference/p5.SoundLoop/stop","alias":"stop"},"p5.SoundLoop.syncedStart()":{"relativeUrl":"/reference/p5.SoundLoop/syncedStart","alias":"syncedStart"},"p5.SoundLoop.timeSignature":{"relativeUrl":"/reference/p5.SoundLoop/timeSignature","alias":"timeSignature"},"p5.SoundRecorder.record()":{"relativeUrl":"/reference/p5.SoundRecorder/record","alias":"record"},"p5.SoundRecorder.setInput()":{"relativeUrl":"/reference/p5.SoundRecorder/setInput","alias":"setInput"},"p5.SoundRecorder.stop()":{"relativeUrl":"/reference/p5.SoundRecorder/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.TypedDict.clear()":{"relativeUrl":"/reference/p5.TypedDict/clear","alias":"clear"},"p5.TypedDict.create()":{"relativeUrl":"/reference/p5.TypedDict/create","alias":"create"},"p5.TypedDict.get()":{"relativeUrl":"/reference/p5.TypedDict/get","alias":"get"},"p5.TypedDict.hasKey()":{"relativeUrl":"/reference/p5.TypedDict/hasKey","alias":"hasKey"},"p5.TypedDict.print()":{"relativeUrl":"/reference/p5.TypedDict/print","alias":"print"},"p5.TypedDict.remove()":{"relativeUrl":"/reference/p5.TypedDict/remove","alias":"remove"},"p5.TypedDict.saveJSON()":{"relativeUrl":"/reference/p5.TypedDict/saveJSON","alias":"saveJSON"},"p5.TypedDict.saveTable()":{"relativeUrl":"/reference/p5.TypedDict/saveTable","alias":"saveTable"},"p5.TypedDict.set()":{"relativeUrl":"/reference/p5.TypedDict/set","alias":"set"},"p5.TypedDict.size()":{"relativeUrl":"/reference/p5.TypedDict/size","alias":"size"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.clampToZero()":{"relativeUrl":"/reference/p5.Vector/clampToZero","alias":"clampToZero"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setContent()":{"relativeUrl":"/reference/p5.XML/setContent","alias":"setContent"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.AudioVoice":{"relativeUrl":"/reference/p5.sound/p5.AudioVoice"},"p5.BandPass":{"relativeUrl":"/reference/p5.sound/p5.BandPass"},"p5.Compressor":{"relativeUrl":"/reference/p5.sound/p5.Compressor"},"p5.Convolver":{"relativeUrl":"/reference/p5.sound/p5.Convolver"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Distortion":{"relativeUrl":"/reference/p5.sound/p5.Distortion"},"p5.EQ":{"relativeUrl":"/reference/p5.sound/p5.EQ"},"p5.Effect":{"relativeUrl":"/reference/p5.sound/p5.Effect"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Filter":{"relativeUrl":"/reference/p5.sound/p5.Filter"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.HighPass":{"relativeUrl":"/reference/p5.sound/p5.HighPass"},"p5.LowPass":{"relativeUrl":"/reference/p5.sound/p5.LowPass"},"p5.MonoSynth":{"relativeUrl":"/reference/p5.sound/p5.MonoSynth"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.OnsetDetect":{"relativeUrl":"/reference/p5.sound/p5.OnsetDetect"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.Part":{"relativeUrl":"/reference/p5.sound/p5.Part"},"p5.PeakDetect":{"relativeUrl":"/reference/p5.sound/p5.PeakDetect"},"p5.Phrase":{"relativeUrl":"/reference/p5.sound/p5.Phrase"},"p5.PolySynth":{"relativeUrl":"/reference/p5.sound/p5.PolySynth"},"p5.Pulse":{"relativeUrl":"/reference/p5.sound/p5.Pulse"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.Score":{"relativeUrl":"/reference/p5.sound/p5.Score"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SoundLoop":{"relativeUrl":"/reference/p5.sound/p5.SoundLoop"},"p5.SoundRecorder":{"relativeUrl":"/reference/p5.sound/p5.SoundRecorder"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"}},"tutorials":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Chatting with/about Code":{"relativeUrl":"/tutorials/criticalAI1-chatting-with-about-code","description":"Using generative AI to code with p5.js"},"Critical AI Prompt Battle":{"relativeUrl":"/tutorials/criticalAI2-prompt-battle","description":"Build a tool to compare generative AI prompts"},"Critical AI Sentiment Dataset Explorer":{"relativeUrl":"/tutorials/criticalAI3-sentiment-dataset-explorer","description":"Examine the datasets that run AI tools"},"Critical AI No-AI Chatbot":{"relativeUrl":"/tutorials/criticalAI4-no-ai-chatbot","description":"Make an interactive chatbot without using any AI"},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to GLSL":{"relativeUrl":"/tutorials/intro-to-glsl","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU using GLSL."},"p5.strands: Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-p5-strands","description":"An introduction to shaders using p5.strands"},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
+{"contributor-docs":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure success volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increase groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](https://p5js.org/reference/p5.sound), [class page](https://p5js.org/reference/p5/p5.Vector), [method page](https://p5js.org/reference/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (https://p5js.org/reference/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (https://p5js.org/reference/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (https://p5js.org/reference/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (https://p5js.org/reference/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```javascript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (https://p5js.org/reference/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (https://p5js.org/reference/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"JSDoc Best Practices\n":{"relativeUrl":"/contribute/jsdoc","description":"Documentation website built comments p5js repo things mind order documentation parsed correctly ## * top file add comment `@module` tag optionally `@submodule` reference category subcategory names contents ```js /** @module Rendering */ ``` Data @submodule LocalStorage classes Create *outside* addon function assign `p5` *inside* class MyClass { // } export default myAddonp5 fn p5MyClass = Document methods directly members *without* `@method` Description myMethod return spot added definition include `@class` including prefix parameters constructor description exist constructorn thisn @class @param {Number} number pass properties `@for` referencing `@property` naming property myProperty @property @for global functions Add listing @method myFunction p5myFunction dynamically generated usual `@for p5` const key ['nameA' nameB'] fn[key] `Hello ${key}` nameA p5 nameB Mark showing `@private` automatically start `_` @private privateMethodA _privateMethodB"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed requires temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve *Both 1x include system diffing algorithm robust system* operating systems browsers render graphics subtle variations differences normal fail Common acceptable Single-pixel shifts line positions Slight anti-aliasing Text font weight kerning Minor curve smoothness text rendered macOS slightly Linux applies thin lines curves graphical elements image earlier caused environments [Example]src/content/contributor-docs/images/pixelmatch2png sophisticated distinguish Initial Compares pixels moderate threshold identify [pixelmatch](https://github.com/mapbox/pixelmatch/) pixel Cluster identification Groups connected difference Breadth-First Search BFS Pattern recognition specifically identifies Line shift clusters represent element shifted 1px Isolated noise Smart failure criteria Applies thresholds Ignores smaller total significant Permits minor typical platforms [Example]src/content/contributor-docs/images/pixelmatchpng balances sensitivity real tolerating platform-specific parameters const MIN_CLUSTER_SIZE Minimum cluster MAX_TOTAL_DIFF_PIXELS Maximum allowed analyzing neighborhood 80% ≤2 neighbors classified structural intelligent ensures due catching important note improved pass failed detecting showing visually meaningful makes reliable reduces failures require manual investigation ### efficient sizes dimensions close 50x50 resizes images canvases result faster Focus visible details intricate hard Design demonstrate reduced cramming variants call times visualTest'stroke variations' stroke p5stroke0 p5strokeWeight1 p5line10 Screenshot thick p5strokeWeight5"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries":{"AnimatorJs":{"relativeUrl":"/libraries/","description":"A javascript animation viewer based on a custom animation API primarily designed for p5.js and allows for dynamic, lightweight, real-time rendered browser animations controlled purely by code."},"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Pixyp5js":{"relativeUrl":"/libraries/","description":"A library for easily more easily dealing with pixels in images during runtime"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"TurtleGraphics":{"relativeUrl":"/libraries/","description":"Watch images being drawn using turtle graphics."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"Zoomp5js":{"relativeUrl":"/libraries/","description":"A simple library for adding the zooming functionality to your p5.js project."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.5":{"relativeUrl":"/libraries/","description":"Add UI to p5.js and other goodies"},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Modbuttons":{"relativeUrl":"/libraries/","description":"a simple and modular button system for p5js"},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Sprite":{"relativeUrl":"/libraries/","description":"A basic sprite library that supports both animated and static sprites for p5.js"},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.colorGenerator":{"relativeUrl":"/libraries/","description":"p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point."},"p5.comfyui-helper":{"relativeUrl":"/libraries/","description":"A library for interfacing with ComfyUI"},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."},"XYscope.js":{"relativeUrl":"/libraries/","description":"p5.js library to render graphics on analog vector displays"}},"events":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro VimeoEmbed ///components/VimeoEmbed/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg Introduction Casey Reas Johanna Hedva Stephanie Pi Phoenix Perry Taeyoon Choi Sara Hendren Epic Jefferson Chandler McWilliams Q&A ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aarati Akkapeddi ":{"relativeUrl":"/people/#aarati-akkapeddi-"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aaron Welles":{"relativeUrl":"/people/#aaron-welles"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abdiel Lopez":{"relativeUrl":"/people/#abdiel-lopez"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Animesh Sinha":{"relativeUrl":"/people/#animesh-sinha"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antoinette Bumatay-Chan":{"relativeUrl":"/people/#antoinette-bumatay-chan"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashish Karn":{"relativeUrl":"/people/#ashish-karn"},"ashish singh":{"relativeUrl":"/people/#ashish-singh"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"Ashwani Dey":{"relativeUrl":"/people/#ashwani-dey"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"beau-muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"benpalevsky":{"relativeUrl":"/people/#benpalevsky"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"blackboxlogic":{"relativeUrl":"/people/#blackboxlogic"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Bojidar Marinov":{"relativeUrl":"/people/#bojidar-marinov"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"c-dacanay":{"relativeUrl":"/people/#c-dacanay"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Callie":{"relativeUrl":"/people/#callie"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Carrie Wang":{"relativeUrl":"/people/#carrie-wang"},"Casey Conchinha":{"relativeUrl":"/people/#casey-conchinha"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chloe Yan":{"relativeUrl":"/people/#chloe-yan"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"cog25":{"relativeUrl":"/people/#cog25"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"computational mama":{"relativeUrl":"/people/#computational-mama"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"crh82":{"relativeUrl":"/people/#crh82"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Darren Kessner":{"relativeUrl":"/people/#darren-kessner"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"davidblitz":{"relativeUrl":"/people/#davidblitz"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"dhanush":{"relativeUrl":"/people/#dhanush"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"FORCHA PEARL":{"relativeUrl":"/people/#forcha-pearl"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Franolich Design":{"relativeUrl":"/people/#franolich-design"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gabriel Sroka":{"relativeUrl":"/people/#gabriel-sroka"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Albers":{"relativeUrl":"/people/#greg-albers"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Greg Stanton":{"relativeUrl":"/people/#greg-stanton"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Kholiya":{"relativeUrl":"/people/#himanshu-kholiya"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"Ilona Brand":{"relativeUrl":"/people/#ilona-brand"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jackie Liu":{"relativeUrl":"/people/#jackie-liu"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Berghold":{"relativeUrl":"/people/#jared-berghold"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"jeanette":{"relativeUrl":"/people/#jeanette"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Philyaw":{"relativeUrl":"/people/#jordan-philyaw"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Kathryn Lichlyter":{"relativeUrl":"/people/#kathryn-lichlyter"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Gupta":{"relativeUrl":"/people/#keshav-gupta"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"Kit Kuksenok":{"relativeUrl":"/people/#kit-kuksenok"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"Kristian Hamilton":{"relativeUrl":"/people/#kristian-hamilton"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Berrios":{"relativeUrl":"/people/#lauren-berrios"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"Luke Plowden":{"relativeUrl":"/people/#luke-plowden"},"M":{"relativeUrl":"/people/#m"},"ma haidong":{"relativeUrl":"/people/#ma-haidong"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marco Macarena":{"relativeUrl":"/people/#marco-macarena"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Martin Leopold Groedl":{"relativeUrl":"/people/#martin-leopold-groedl"},"Martin Lorentzon":{"relativeUrl":"/people/#martin-lorentzon"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"mathewpan2":{"relativeUrl":"/people/#mathewpan2"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Arguelles":{"relativeUrl":"/people/#maya-arguelles"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"Mayank Verma":{"relativeUrl":"/people/#mayank-verma"},"mclark414":{"relativeUrl":"/people/#mclark414"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"Melody Sharp":{"relativeUrl":"/people/#melody-sharp"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"Mx. Ramsey":{"relativeUrl":"/people/#mx--ramsey"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"oliver thurley":{"relativeUrl":"/people/#oliver-thurley"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"Pim Tournaye":{"relativeUrl":"/people/#pim-tournaye"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Qingfeng Huang":{"relativeUrl":"/people/#qingfeng-huang"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajas Samse":{"relativeUrl":"/people/#rajas-samse"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"Renjie Li":{"relativeUrl":"/people/#renjie-li"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishab Kumar Jha":{"relativeUrl":"/people/#rishab-kumar-jha"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Rishi":{"relativeUrl":"/people/#rishi"},"Ritesh Patil":{"relativeUrl":"/people/#ritesh-patil"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"roxi09":{"relativeUrl":"/people/#roxi09"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"Seyko":{"relativeUrl":"/people/#seyko"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shoury Singh":{"relativeUrl":"/people/#shoury-singh"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Tibor Udvari":{"relativeUrl":"/people/#tibor-udvari"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Vaivaswat Dubey":{"relativeUrl":"/people/#vaivaswat-dubey"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"Vik":{"relativeUrl":"/people/#vik"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishesh Rawal":{"relativeUrl":"/people/#vishesh-rawal"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"willallstet":{"relativeUrl":"/people/#willallstet"},"William Hazard":{"relativeUrl":"/people/#william-hazard"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"Xevi H. Aqeel":{"relativeUrl":"/people/#xevi-h--aqeel"},"Xin Xin":{"relativeUrl":"/people/#xin-xin"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"ℤ":{"relativeUrl":"/people/#ℤ"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference":{"HSB":{"relativeUrl":"/reference/p5/HSB"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"addElement()":{"relativeUrl":"/reference/p5/addElement","alias":"addElement"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"baseColorShader()":{"relativeUrl":"/reference/p5/baseColorShader","alias":"baseColorShader"},"baseFilterShader()":{"relativeUrl":"/reference/p5/baseFilterShader","alias":"baseFilterShader"},"baseMaterialShader()":{"relativeUrl":"/reference/p5/baseMaterialShader","alias":"baseMaterialShader"},"baseNormalShader()":{"relativeUrl":"/reference/p5/baseNormalShader","alias":"baseNormalShader"},"baseStrokeShader()":{"relativeUrl":"/reference/p5/baseStrokeShader","alias":"baseStrokeShader"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierOrder()":{"relativeUrl":"/reference/p5/bezierOrder","alias":"bezierOrder"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"close()":{"relativeUrl":"/reference/p5/close","alias":"close"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEG_TO_RAD":{"relativeUrl":"/reference/p5/DEG_TO_RAD"},"EXCLUDE":{"relativeUrl":"/reference/p5/EXCLUDE"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"INCLUDE":{"relativeUrl":"/reference/p5/INCLUDE"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createModel()":{"relativeUrl":"/reference/p5/createModel","alias":"createModel"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"fontAscent()":{"relativeUrl":"/reference/p5/fontAscent","alias":"fontAscent"},"fontBounds()":{"relativeUrl":"/reference/p5/fontBounds","alias":"fontBounds"},"fontDescent()":{"relativeUrl":"/reference/p5/fontDescent","alias":"fontDescent"},"fontWidth()":{"relativeUrl":"/reference/p5/fontWidth","alias":"fontWidth"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"imageShader()":{"relativeUrl":"/reference/p5/imageShader","alias":"imageShader"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBlob()":{"relativeUrl":"/reference/p5/loadBlob","alias":"loadBlob"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFilterShader()":{"relativeUrl":"/reference/p5/loadFilterShader","alias":"loadFilterShader"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"paletteLerp()":{"relativeUrl":"/reference/p5/paletteLerp","alias":"paletteLerp"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveObj()":{"relativeUrl":"/reference/p5/saveObj","alias":"saveObj"},"saveStl()":{"relativeUrl":"/reference/p5/saveStl","alias":"saveStl"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"screenToWorld()":{"relativeUrl":"/reference/p5/screenToWorld","alias":"screenToWorld"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spline()":{"relativeUrl":"/reference/p5/spline","alias":"spline"},"splinePoint()":{"relativeUrl":"/reference/p5/splinePoint","alias":"splinePoint"},"splineProperties()":{"relativeUrl":"/reference/p5/splineProperties","alias":"splineProperties"},"splineProperty()":{"relativeUrl":"/reference/p5/splineProperty","alias":"splineProperty"},"splineTangent()":{"relativeUrl":"/reference/p5/splineTangent","alias":"splineTangent"},"splineVertex()":{"relativeUrl":"/reference/p5/splineVertex","alias":"splineVertex"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeMode()":{"relativeUrl":"/reference/p5/strokeMode","alias":"strokeMode"},"strokeShader()":{"relativeUrl":"/reference/p5/strokeShader","alias":"strokeShader"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textBounds()":{"relativeUrl":"/reference/p5/textBounds","alias":"textBounds"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textDirection()":{"relativeUrl":"/reference/p5/textDirection","alias":"textDirection"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textProperties()":{"relativeUrl":"/reference/p5/textProperties","alias":"textProperties"},"textProperty()":{"relativeUrl":"/reference/p5/textProperty","alias":"textProperty"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWeight()":{"relativeUrl":"/reference/p5/textWeight","alias":"textWeight"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"vertexProperty()":{"relativeUrl":"/reference/p5/vertexProperty","alias":"vertexProperty"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"worldToScreen()":{"relativeUrl":"/reference/p5/worldToScreen","alias":"worldToScreen"},"write()":{"relativeUrl":"/reference/p5/write","alias":"write"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.Biquad.freq()":{"relativeUrl":"/reference/p5.Biquad/freq","alias":"freq"},"p5.Biquad.gain()":{"relativeUrl":"/reference/p5.Biquad/gain","alias":"gain"},"p5.Biquad.res()":{"relativeUrl":"/reference/p5.Biquad/res","alias":"res"},"p5.Biquad.setType()":{"relativeUrl":"/reference/p5.Biquad/setType","alias":"setType"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.changed()":{"relativeUrl":"/reference/p5.Element/changed","alias":"changed"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.input()":{"relativeUrl":"/reference/p5.Element/input","alias":"input"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.attackTime()":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.releaseTime()":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Font.textToContours()":{"relativeUrl":"/reference/p5.Font/textToContours","alias":"textToContours"},"p5.Font.textToModel()":{"relativeUrl":"/reference/p5.Font/textToModel","alias":"textToModel"},"p5.Font.textToPaths()":{"relativeUrl":"/reference/p5.Font/textToPaths","alias":"textToPaths"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertexProperty()":{"relativeUrl":"/reference/p5.Geometry/vertexProperty","alias":"vertexProperty"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.Noise.amp()":{"relativeUrl":"/reference/p5.Noise/amp","alias":"amp"},"p5.Noise.start()":{"relativeUrl":"/reference/p5.Noise/start","alias":"start"},"p5.Noise.stop()":{"relativeUrl":"/reference/p5.Noise/stop","alias":"stop"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner.pan()":{"relativeUrl":"/reference/p5.Panner/pan","alias":"pan"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rolloff()":{"relativeUrl":"/reference/p5.Panner3D/rolloff","alias":"rolloff"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.PitchShifter.shift()":{"relativeUrl":"/reference/p5.PitchShifter/shift","alias":"shift"},"p5.Reverb.drywet()":{"relativeUrl":"/reference/p5.Reverb/drywet","alias":"drywet"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.inspectHooks()":{"relativeUrl":"/reference/p5.Shader/inspectHooks","alias":"inspectHooks"},"p5.Shader.modify()":{"relativeUrl":"/reference/p5.Shader/modify","alias":"modify"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.Shader.version()":{"relativeUrl":"/reference/p5.Shader/version","alias":"version"},"p5.SoundFile.amp()":{"relativeUrl":"/reference/p5.SoundFile/amp","alias":"amp"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.start()":{"relativeUrl":"/reference/p5.SoundFile/start","alias":"start"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.getValue()":{"relativeUrl":"/reference/p5.Vector/getValue","alias":"getValue"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.setValue()":{"relativeUrl":"/reference/p5.Vector/setValue","alias":"setValue"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.sound.getAudioContext()":{"relativeUrl":"/reference/p5.sound/getAudioContext","alias":"getAudioContext"},"p5.sound.loadSound()":{"relativeUrl":"/reference/p5.sound/loadSound","alias":"loadSound"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.BandPass":{"relativeUrl":"/reference/p5.sound/p5.BandPass"},"p5.Biquad":{"relativeUrl":"/reference/p5.sound/p5.Biquad"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.HighPass":{"relativeUrl":"/reference/p5.sound/p5.HighPass"},"p5.LowPass":{"relativeUrl":"/reference/p5.sound/p5.LowPass"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner":{"relativeUrl":"/reference/p5.sound/p5.Panner"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.PitchShifter":{"relativeUrl":"/reference/p5.sound/p5.PitchShifter"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"},"p5.sound.setAudioContext()":{"relativeUrl":"/reference/p5.sound/setAudioContext","alias":"setAudioContext"},"p5.sound.userStartAudio()":{"relativeUrl":"/reference/p5.sound/userStartAudio","alias":"userStartAudio"},"p5.sound.userStopAudio()":{"relativeUrl":"/reference/p5.sound/userStopAudio","alias":"userStopAudio"}},"tutorials":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Chatting with/about Code":{"relativeUrl":"/tutorials/criticalAI1-chatting-with-about-code","description":"Using generative AI to code with p5.js"},"Critical AI Prompt Battle":{"relativeUrl":"/tutorials/criticalAI2-prompt-battle","description":"Build a tool to compare generative AI prompts"},"Critical AI Sentiment Dataset Explorer":{"relativeUrl":"/tutorials/criticalAI3-sentiment-dataset-explorer","description":"Examine the datasets that run AI tools"},"Critical AI No-AI Chatbot":{"relativeUrl":"/tutorials/criticalAI4-no-ai-chatbot","description":"Make an interactive chatbot without using any AI"},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to GLSL":{"relativeUrl":"/tutorials/intro-to-glsl","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU using GLSL."},"p5.strands: Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-p5-strands","description":"An introduction to shaders using p5.strands"},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
diff --git a/public/search-indices/es.json b/public/search-indices/es.json
index 79453baccc..0455434d32 100644
--- a/public/search-indices/es.json
+++ b/public/search-indices/es.json
@@ -1 +1 @@
-{"contributor-docs":{"Estructura del directorio del proyecto\n":{"relativeUrl":"/contribute/README","description":"Help is needed translating these Developer Docs to Spanish and other languages [See this link for more info!](https://github.com/processing/p5.js/issues/4137/) ¡Hola ¡Gracias interés contribuir p5js comenzar formas [aquí](https://p5js.org/community/#contribute). carpeta contiene documentos destinados desarrolladores * `src /` código fuente biblioteca organizado temas módulos separados trabajará cambiando `lib versión destinada usuarios carguen bocetos proyectos incluidos formularios comprimidos salida [Grunt](https://gruntjs.com/) compila archivo `contributor_docs Markdown probablemente útiles particular explican prácticas principios `docs realidad utilizado \\* generar [manual referencia línea](https://p5js.org/reference/). `tests pruebas unitarias aseguran continúe funcionando correctamente medida realizan cambios `task scripts tareas automatizadas relacionadas compilación implementación lanzamiento versiones `parches contener [parches Git](https://git-scm.com/docs/git-format-patch/) casos ignorar completo directorio"},"Nuestro enfoque en el acceso\n":{"relativeUrl":"/contribute/access","description":"{/* significa compromiso acceso colaboradoras usuarias biblioteca */} [Conferencia Colaboradores 2019](https://p5js.org/community/contributors-conference-2019.html), p5js comprometió agregar características aumenten inclusión accesibilidad aceptaremos solicitudes respalden esfuerzos comprometemos reconocer desmantelar prevenir barreras implica considerar experiencias interseccionales[^1] diversidad afectar participación incluyen alineaciones género raza etnia sexualidad idioma ubicación etcétera centramos necesidades grupos marginados comodidad continuada privilegiados comunidad explorando colectivamente significado aprendiendo practicar enseñar Elegimos pensar marcos expansivos interseccionales coalición valores fundamentales delineados [Declaración Comunitaria](https://p5js.org/about/#community-statement). ## Tipos Aumentar expandir número neto personas continuo disponible accesible excluidas consecuencia opresión estructural extiende herramientas plataformas ofrece incluye composición toma decisiones acciones liderazgo resistimos cultura tecnológica velocidad crecimiento competencia Damos prioridad intencionalidad lentitud adaptación responsabilidad actos cuidado colectivo equitativo * Personas idiomas distintos inglés negras indígenas color etnias marginadas lesbianas gays bisexuales queer cuestionamiento pansexuales asexuales trans fluido agénero intersexuales espíritus mujeres géneros ciegas s/Sordas[^2] dificultades auditivas discapacitadas/con discapacidad neurodivergentes enfermedades crónicas[^3] bajos ingresos falta capital financiero cultural experiencia previa código abierto programación creativa diversos trasfondos educativos edad incluidos niños ancianos variedad habilidades tecnológicas internet religiosos sistemáticamente históricamente subrepresentadas intersecciones Reconocemos complejidad términos utilizados describir respectivas identidades lenguaje matizado evolutivo controvertido lista exhaustiva nombrar rendir cuentas compromisos diversas ### Ejemplos ejemplos creemos aumentan Traducir documentación materiales descentralizando imperialismo lingüístico[^4] [Processing kuna](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/) Rolando Vargas [Pê Internacionalización popularización hablantes portugués](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/) Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancino Mejorar soporte tecnologías asistencia lectores pantalla [Agregar texto alternativo p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/) Katie Liu [Proyecto p5](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/) Claire Kearney-Volpe Seguir [Pautas Contenido Web](https://www.w3.org/TR/WCAG21/) facilitar usuarios sigan proyectos mensajes error útiles sirvan apoyo herramienta [Sistema errores amigable FES siglas inglés)](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)) Tutoría estudiantes comunidades artes digitales Organizar eventos comunitarios [Día 2022](https://p5js.org/community/p5js-access-day-2022.html) [La web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/)) tácticas organización centradas interpretación ASL subtitulado vivo lugares accesibles Apoyar creación recursos [A11y Syllabus](http://a11ysyllabus.site/) Adekemi Sijuwade-Ukadike Publicar informes directrices WCAG utilicen sencillo centren principiantes [Informe OSACC p5.js](https://github.com/processing/OSACC-p5.js-Access-Report/)) Mantenimiento aceptando esfuerzo aumentar Verás criterio reflejado plantillas *issue* *pull request* afirmamos intención mantener conjunto existentes gustaría corregir independientemente encuentren base Creemos consistencia mejoran Aumentos rendimiento hardware potente Soporte dibujar-en/leer-desde *framebuffers* Consistencia API Agregar arcVertex crear arcos beginShape/endShape *** favor documento conversación priorizar continua Invitamos participar describe ideas sugerencias invitamos compartirlas Github enviando correo electrónico [hello@p5jsorg]mailtohello@p5jsorg versión declaración revisada colaboración Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Conferencia Artes Código Abierto finalizada publicada Beca Fundación Processing [^1] Crenshaw Kimberlé Demarginalizing the intersection of race and sex black feminist critique antidiscrimination doctrine theory antiracist politics \\[Desmarginalizando intersección sexo crítica feminista negra doctrina antidiscriminatoria teoría política antirracista] University Chicago Legal Forum 139–167 ISSN 0892-5593 Texto completo Archiveorg [^2] mayúscula Sordo refiere culturalmente Sordas Sorda minúscula sordo término audiológico asociadas identidad [^3] preferencias persona vs discapacidades [Desempaquetando debate autista inglés)](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/) [Soy discapacitado inglés)](https://thebodyisnotanapology.com/magazine/i-am-disabled-on-identity-first-versus-people-first-language/). [^4] lingüístico dominación/priorización/imposición expensas nativos expansión imperial globalización"},"Contribuir a la referencia de p5.js\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write and edit p5js reference using the right format */} creamos referencias código ves página [referencia](https://p5js.org/reference/) sitio web incluyéndolas fuente biblioteca comentarios especializados referencia incluyen descripción firma función parámetros retorno ejemplos palabras contenido función/variable construye documento mostrará escribir formatear eventualmente puedan renderizados correctamente Debes seguir guía editando escribiendo variable ## introducción rápida funcionamiento mires verás líneas ven ``` /** * Calculates sine of an angle `sin` is useful for many geometric tasks in creative coding The values returned oscillate between -1 as input increases takes into account current angleMode @method @param {Number} @return @example function draw { background200 let = frameCount sint + linex circlex describe'A white ball on string oscillates up down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ seguidos JavaScript real define comienzan `/**` terminan `*/` línea `*` inicio cosa bloque interpretará documentación familiarizado estilo [JSDoc](https://jsdoc.app/). JSDoc utiliza herramienta llamada [YUIDoc](https://yui.github.io/yuidoc/) sintaxis similar subdivide elementos individuales veremos continuación Bloque Desglosemos veamos sección Puedes comparar [`sin()`](https://p5js.org/reference/p5/sin/). superior comentario textual contener markdown HTML concisa describir necesario detalles peculiaridades comportamientos normalmente secciones anteriores comenzando símbolo `@` seguido siguientes clave `@method` definir nombre caso nota incluye paréntesis `` `@param` argumentos acepta palabra almacenado llaves `{}` tipo parámetro resto `@return` formato genérico {type} name Description here opcional agrega corchetes [name] ### Información adicional Constantes toma valores definidos [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), especificarse `{Constant}` válidos enumerarse `either` {Constant} horizAlign horizontal alignment either LEFT CENTER or RIGHT tipos debes data puedes omitir etiqueta Encadenamiento método devuelve objeto superclase agregar @chainable Firmas adicionales múltiples opciones posibles especificar individualmente [`background()`](https://p5js.org/reference/#p5/background/) serie Sintaxis Elige versión incluirla usando plantilla firmas background {String} colorstring color possible formats include integer rgb rgba percentage 3-digit hex 6-digit [a] alpha value gray specifies Múltiples crear separada única diferencia adición Limita medida ruido innecesario Referencia variables visto funciones constantes siguen estructura etiquetas system mouseX always contains position mouse relative to canvas at top-left corner 2-D -width/2 -height/2 WebGL If touch used instead will hold most recent point @property @readOnly // Move across background244 linemouseX describe'horizontal line moves left with x-position' contiene `mouseX` `@property` `@readonly` presente mayoría internamente indicar sobrescrito directamente usuario Agregar discutido `@example` defines ejecuta visitas [Screenshot page red showing only example code section]src/content/contributor-docs/images/reference-screenshotpng crea const color255 fillc rect15 Sets redValue redc fillredValue rect50 describe Two rectangles edges rectangle yellow one comenzar seguida apertura cierre insertarás cuestión principio básico mantener simples mínimas significativo explicar funciona valga redundancia complicado lienzo 100x100 pixeles `setup` incluida envuelto automáticamente predeterminado fondo gris píxeles entraremos prácticas consulta justo cerrado separados blanco arc50 PI QUARTER_PI OPEN describe'An ellipse created arc its top open' describe'The bottom half arc' deseas ejecute quieres muestre clase `norender` describe'ellipse pruebas automatizadas requiere interacción `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' archivos externos recursos colócalos carpeta [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) reutiliza enlázalos assets/nombrearchivoext Consulta [tint()](https://p5js.org/reference/p5/tint/) `describe` añadas utilices accesible lectores pantalla Incluye cadena sucediendo xoff background204 noisexoff width linen height vertical randomly from right' noiseScale background0 obtener información visita [documentación accesibilidad contribuyentes](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions). deberías herramientas necesarias editar usos encontrar útiles situaciones específicas necesites frecuencia Etiqueta `@private` propiedad privada característica marcada renderizará razón marcar privado documentar características internas `_start` _start calls preload @private p5prototype_start `@module` relacionadas archivo módulos corresponden grupo renderizar dividen correspondientes módulo submódulos `@submodule` `@for` relación `p5` indicando efectivamente `@requires` depende actual importar @module Color @submodule Creating Reading @for p5 @requires core constants convención subcarpeta `src/` añadiendo subcarpetas/archivos necesitar `@class` constructores clases definen `@class`y `@constructor` definirse indicará constructora Mira `p5Color` class Each object stores mode level maxes that were active during construction These are interpret arguments passed object's constructor They also determine output formatting such when saturation called stored internally array ideal RGBA floating normalized calculate closest screen colors which levels Screen sent renderer When different representations calculated results cached performance floating-point numbers recommended way create instance this @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals containing green blue channel CSS Generando previsualizando repositorio configurado puedas generar previsualizar necesidad compilar ejecutar comando principal npm run docs generará vista previa necesarios `docs/reference/datajson` minificación utilizará continuamente docsdev lanzará vivo cuyo renderizado actualizará realices cambios necesitarás actualizar verlos aparecer útil especialmente ejecutan navegador principales almacenan `docs/` casos añadir `docs/yuidoc-p5-theme/assets` Siguientes pasos sistema consultar [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). problemas relacionados echa vistazo [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [pautas contribuyentes](https://github.com/processing/p5.js/blob/main/contributor_docs/es/contributor_guidelines.md)"},"Instrucciones para colaboradores\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information about contributing to p5js on GitHub */} ¡Bienvenidos documento diseñado ayudar contribuidores deseen aportar código biblioteca busquen refrescar conocimientos procedimientos técnicos útil persona interesada tipo contribución buscando contribuir allá repositorios escribiendo tutoriales planeando clases organizando eventos favor consulta documentación correspondiente colaboraciones Supervisores Responsables mantenimiento encontrarán referirse [Instrucciones Supervisores](https://github.com/processing/p5.js/blob/main/contributor_docs/es/steward_guidelines.md) revisar Issues problemas Pull Requests' relativamente integral trataremos indicar pasos Utiliza tabla contenidos encontrar secciones relevantes siéntete libre omitir contribuciones planeas **Si contribuidor sugerimos comenzar sección acerca simplemente quieres configuración paso-a-paso proceso desarrollo puedes dirigirte Inicio Rápido Desarrolladores** Tabla Contenidos * [Todo problemas]#todo-acerca-de-los-issues-o-problemas [¿Qué GitHub]#qué-son-los-issues-en-github/ [Plantillas reportar Issues']#plantillas-para-reportar-issues [Reportar error]#reportar-un-error [Sugerir mejora funcionalidad existente]#sugerir-una-mejora-a-una-funcionalidad-existente nueva]#sugerir-una-funcionalidad-nueva [Abrir discusión ]#abrir-una-discusión/ [Trabajando base p5js]#trabajando-en-la-base-de-código-de-p5js/ [Inicio Desarrolladores]#inicio-rápido-para-desarrolladores/ [Utilizando edición Github]#utilizando-la-funcionalidad-de-edición-de-github/ [Haciendo fork trabajando fork]#haciendo-un-fork-de-p5js-y-trabajando-desde-tu-fork Github Desktop]#utilizando-github-desktop interfaz línea comandos Git]#utilizando-la-interfaz-de-línea-de-comandos-de-git/ [Desglose ]#desglose-de-la-base-de-código/ [Configuración compilación]#configuración-de-compilación/ [Flujo Git]#flujo-de-trabajo-de-git [Código fuente]#código-fuente/ [Pruebas unitarias]#pruebas-unitarias [Documentación línea]#documentación-en-línea/ [Internacionalización](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#internationalization) [Accesibilidad]#accesibilidad [Estándares código]#estándares-de-código/ [Principios Diseño Software]#principios-de-diseño-de-software/ [Pull Requests]#pull-requests [Creación Request]#creación-de-un-pull-request/ [Información Request]#información-sobre-el-pull-request/ [Titulo]#titulo [Resuelve]#resuelve [Cambios]#cambios [Captura pantalla cambios]#captura-de-pantalla-de-los-cambios [Lista verificación Request]#lista-de-verificación-del-pull-request/ [Rebase resolución conflictos]#rebase-y-resolución-de-conflictos/ [Discutir Corregir]#discutir-y-corregir *** mayoría actividad conocidos repo forma abreviada ocurre Issues' excelente viaje ## ¿Qué [A cropped screenshot of the library repository only showing contents top right corner red box is drawn surrounding tab]src/content/contributor-docs/images/issues-tabpng nombre común publicación apunta describir problema reportes error solicitudes añadir relacione Cualquiera comentarios Issue ¡incluyendo bots discuten temas relacionados proyecto repositorio creado razones usualmente utilizamos creación discutir fuente Temas corrección errores invitación colaboradores discutidos [foro](https://discourse.processing.com) plataformas comunicación [Discord](https://discord.gg/SHQ8dH25r9/). ¡Hemos plantillas fáciles ayudarte determinar tema adecuado publicado apropiado publicarlo Plantillas sencillo responsables entender contenido sugerido colaborador facilitan completar permiten recibir respuesta rápida [Screenshot an example what issue looks like The title in Warning being logged Safari when using filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng registrar haz click pestaña ubicada superior página clic botón New costado derecho presentarán opciones plantilla dirigir recomendamos elegir relevante caso asegurarte reciba rápidamente atención correcta [Cropped repository's page with green button highlighted it]src/content/contributor-docs/images/new-issuepng ### Error\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encuentres comportamiento incorrecto comportando descrito \\[usa plantilla]\\/ [https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml)). ten tratado corregir sketch boceto crees \\[foro discusiones]\\/ [https://discourse.processing.org/](https://discourse.processing.org/)) provee campos debes llenar información **¿Cuál subárea adecuada p5js** añadirá automáticamente \\[etiquetas]\\/ [https://github.com/processing/p5.js/blob/main/contributor\\_docs/issue\\_labels/](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels/)) ayudará identificar responder adecuadamente **Versión Puedes verificar versión etiqueta `` archivo p5js/p5minjs Opcionalmente \\[editor p5js]\\/ [https://editor.p5js.org/](https://editor.p5js.org/)), Ayuda Acerca podrás lucirá `191`tres números separados punto **Navegadores web mismos** ayuda diversos comportamientos navegadores navegador instrucciones proporcionadas utilizando Chrome Firefox Abre ventana barra direcciones navega `chrome//version` `aboutsupport` venta menú aparecerá desplegable deberás seleccionar **Sistema Operativo** incluye Sistema Operativo `macOS 125` derivar sistema operativo **Pasos reproducir error** piezas importantes Comparte lista detallados replicar encontrado Compartir muestra exponga cualquiera busque enfrentando formular solución **¡La replicación clave** objetivo proveas fácil comunidad buscar **Sé detallado evita afirmaciones genéricas** digas función `image` funciona específico imagen GIF cargada tamaño correcto mencionando siguientes aspectos esperas compartido esperado presente deseas reportado indícalo descripción proveer sugerencias corregido apoyo necesitas **No Request cambios registrado aprobado implementación** propuesta aceptada requerir enfoque completamente real registre cerrado previamente reporte aceptado \\[Supervisor área Responsable mantenimiento]\\/ [https://github.com/processing/p5.js#stewards](https://github.com/processing/p5.js#stewards)), existente](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) usada proponer sugerir mejoras existente funciones constantes renderización etc quisieras definir color `color` acepten colores utilizar **Mejorar accesibilidad** campo requerido explicar adición cambio \\[mejorar accesibilidad]\\/ [https://github.com/processing/p5.js/blob/main/contributor\\_docs/access/](https://github.com/processing/p5.js/blob/main/contributor_docs/access/)) personas históricamente marginadas disciplinas artes tecnologías **Es importante destacar declaración** obstante dudas incluir seguro conversación comprender abordar eficazmente mejorar accesibilidad **Detalles funcionalidad** generalmente necesaria propuestas aceptadas aprobadas comience garantía nueva\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) imagina soporte dibujar elementos HTML llame `createTable` superpone existentes evalúes elijas consideres apropiada aprobada \\[Supervisores discusión](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) utiliza registrando encaja anteriores corresponda inusual adoptar API específica debería registrarse ['Sugerir modos registrada \\[Sugerir existente]\\/ #sugerir-una-mejora-a-una-funcionalidad-existente Finalmente anuncio evento local programación foro inclusive podrías contactar Fundación Processing publicidad abrir panel Etiquetas encontraras agregar etiquetas consiste abierto permite \\[aquí]\\/ [https://github.com/processing/p5.js/issues/6517/](https://github.com/processing/p5.js/issues/6517/)) [**⬆ Volver arriba**]#instrucciones-para-colaboradores Trabajando Pre-requisitos proceder conocimiento mínimo git nodejs configurado entorno Introducción discutido implementación dispuesto listo empezar participado discusiones supervisores autor original miembros indicado dispuestos ofrecerte voluntario enviar solicitar asignen saltarte fila** llenando alguien interés asignado daremos prioridad orden asignación aceptar abres notas meses asignada dejando comentario amable preguntes progreso ofrezcas Generalmente permitimos período puedan entendemos voluntarios desarrollar trabajes ritmo fecha límite estricta debas entregar aspecto dudes pedir ¡Haremos guiarte Desarrolladores 🌸 desarrollador directamente mejorando subproyectos [Friendly Error Systems](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md), seguir [Crea copia p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clona crea local.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Configura sincronice suele nombrarse upstream comando terminal.](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote add https://github.com/processing/p5.js Asegúrate [node.js](https://nodejs.org/en/download/) instalado computador terminal node -v Instala dependencias necesarias npm ci Crea rama `main` descriptivo crear checkout -b [branch_name] medida comiences ejecuta pruebas frecuentemente toma garantiza deteriorando test Añade unitarias funcionalidades terminado commit Request]#pull-requests Utilizando viendo revisando vas icono lápiz proporciona conveniente simplifica procesos cubriendo simples archivos file view src/color/color\\_conversionjs arrow pointing pencil icon side image]src/content/contributor-docs/images/edit-filepng recomendado trate principales adicionar complejos compilados validados localmente registrados fluido comparación básico paso Forking definición especifica Open Source Código Abierto propósito significa Fork creará main labeled and 593k outlined dark orange]src/content/contributor-docs/images/forkpng necesario acceso directo oficial permitirá modificaciones enviarlas vuelta Desktop programa usuario gráfica escribir opción alternar conveniencia \\[descarga instala Desktop]\\/ [https://desktop.github.com/](https://desktop.github.com/)). abre aplicación pedirá inicies sesión iniciado hará proyectos incluyendo Selecciona `tuUsuario/p5js` azul Clone clonar preguntar detalles ubicar cambiar ubicación continuar predefinida [The user interface after signing On half screen it lists your projects bottom right]src/content/contributor-docs/images/github-desktop-initpng clonado To contribute parent project Contribuir Continuar cloning It asks if you are planning or use for own purposes]src/content/contributor-docs/images/github-desktop-forkpng Git *fork* URL verde *Code* Debería `https://github.com/limzykenneth/p5.js.git` list files landing Code orange outline]src/content/contributor-docs/images/code-buttonpng ve clona Clonar descargar máquina Corre carpeta quieras almacenar clone [git_url] Sustituye `[git_url]` acabas copiar minutos dependiendo velocidad conexión internet ¡un preparar café finalice descargaste llamada `p5js` editor preferido explorar Desglose carpetas clave encontrarás `src` - reside eventualmente combina finales p5minjs [`test`](https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md) encuentran probar ejemplos `tasks` compilación personalizado `Gruntfilejs` principal `contributor_docs` configuraciones tipos casos modificación Configuración cosa necesitarás configurar construir ejecutar Suponiendo probable lleve descarga simple ¿verdad Flujo liste necesarios partes subsecciones continuación compilar cero completarse run build construirá `lib/` `p5minjs` creados hagas aparte *branch* indica ramificada *commits* afectar *main* ramas múltiples aisladas confianza cometes afectará Rama Actual ingresar propósitos ingresa describa realizarás Crear branch selection menu After entering new name that does not yet exist Create Branch appears]src/content/contributor-docs/images/github-desktop-create-branchpng ejecuta`git branch_name` sustituyendo `branch_name` separada realizas ejecutes `npm test` frecuencia especialmente Ejecutar llevará asegura rompan pasar *commit* confirmación describe colección guardados esencialmente registra actual pregunta surgir ¿con deberías preferible esfuerces agrupar pauta completado subtarea describirse frase actuales Mostrará modificado lateral izquierda específicos derecha Escribe alto nivel esquina inferior título dejarlo blanco Haz Commit finalizar having made change area where need write circled lower left window]src/content/contributor-docs/images/github-desktop-commitpng confirmar Verifica enumeren cambiado status enumerados [restaurar](https://git-scm.com/docs/git-restore/) intencionados mostrar diff intención Organiza -m [your_commit_message] `[your_commit_message]` reemplazado mensaje evitando descripciones genéricas `Documentation fix 1` di `Add documentation circle function` Add function Repite commits aseguras regularidad funcione características visitar documentada enlace reference website containing sentence Notice any errors typos Please let us know feel free edit src/core/shape/2d\\_primitivesjs pull request Part above says underline it]src/content/contributor-docs/images/reference-code-linkpng Pruebas [aquí](https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md). Ten correcciones cubren implementaciones incluidas PR Documentación [aquí](https://p5js.org/contribute/contributing_to_the_p5js_reference/). Accesibilidad revisa [aquí](https://github.com/processing/p5.js/blob/main/contributor_docs/web_accessibility.md). amigable [acá](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md). Estándares estándar estilo aplica [ESLint](https://eslint.org/). *pull request* sigas codificación extensión ESLint disponible texto resaltado editores populares Principios Software característica principios diseño prioridades diferir vienes familiarices **Acceso** Priorizamos decisiones tomamos aumenta grupos marginados Lee declaración **Amigable principiantes** programadores principiantes brinda interactivo visual HTML5/Canvas/DOM avanzadas **Educativo** centra plan estudios respalda educativo referencia completa planes estudio introducen básicos creativa atractivo **JavaScript comunidad** busca prácticas accesibles modelando patrones adecuados JavaScript abstrae librería amplia difusión **Processing inspira lenguaje transición Java clara volver arriba**]#contributor-guidelines Requests corresponde fusionen formalmente solicitud extraer fusionar bifurcado historial Creación subir piensa remota justo committing changes push online red]src/content/contributor-docs/images/publish-branchpng subido mostrará vista previa realmente Presiona iniciar pushing code In sidebar changed items pane below header blue Review been marked up circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin subida veas navegar Abrir command line response includes link open request]src/content/contributor-docs/images/new-branchpng visites funcionará section near yellow call action text Compare request]src/content/contributor-docs/images/recent-pushespng Información prepopulated p5js's template]src/content/contributor-docs/images/new-prpng Titulo brevemente Resuelve `Resuelve #[Agregar número aquí]` reemplazar `[Agregar *issue* abordando/solucionando [arriba](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#all-about-issues) #1234` asegurará cierre fusionado cerrar separado cambia `Resuelve` `Aborda` Cambios Debes claramente extracción Incluye detalle tomado revisará Captura opcional circunstancias incluirse renderiza visuales *canvas* lienzo captura *sketch* Lista Contiene marcar reemplazando `[ ]` `[x]` Rebase conflictos Fix shaders rectMode applied tests #6603]src/content/contributor-docs/images/opened-prpng inspeccionar prestar coincidir trabajabas Commits Archivos cambiados resolverse esperabas necesites [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) resolver significan aplicado recientemente conjunto mantener dejar avísanos guiaremos básicas mostrándote `Resolver conflictos` merge conflicts conflicting filenames listed there Resolve highlighted]src/content/contributor-docs/images/resolve-conflictspng muestran `>>>>>>` `=======` GitHub's conflict resolution contains markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Elimina marcadores conflicto conserva Marcar resuelto editing remove mark as resolved upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng resueltos all have enabled]src/content/contributor-docs/images/commit-mergepng complicados muestre prefieres método manual Ejecuta `git https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` ¡Es lib/p5js lib/p5minjs arreglar construye nuevamente resolverlos ¡pide --continue push` comprobación borre Discutir Corregir supervisa mantiene supervisor paciencia ¿Por aprovechar *issues* abiertos revisado suceder fusionada ¡yuju administra preguntas entres pánico perfectamente normal ¡y solicitan [mismo antes](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#git-workflow) continúa realiza súbelos remoto adicionales verás aparecen Deja informar revisor solicitados necesitan ¡tu"},"Directrices para Supervisores\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn about how to manage and review contributions p5js */} recién unido supervisor responsable mantenimiento experimentado punto intermedio guía contiene información consejos trucos ayudarán contribuir efectiva escribe pautas indique contrario significa puedes adaptar prácticas mostradas ajusten flujo ## Tabla Contenidos * [Issues]/steward_guidelinesmd#issues [Informe Errores]/steward_guidelinesmd#informe-de-errores [Solicitud Funcionalidades]/steward_guidelinesmd#solicitud-de-funcionalidades [Mejora Funcionalidades]/steward_guidelinesmd#mejora-de-funcionalidades [Discusión]/steward_guidelinesmd#discusión/ [Pull Requests]/steward_guidelinesmd#pull-requests [Corrección Sencilla]/steward_guidelinesmd#correción-sencilla/ Error]/steward_guidelinesmd#corrección-de-error/ [Nuevas Funcionalidades/Mejora Funcionalidades]/steward_guidelinesmd#nuevas-funcionalidades/Mejora-de-funcionalidades/ [Dependabot]/steward_guidelinesmd#dependabot [Proceso Construcción]/steward_guidelinesmd#proceso-de-construcción/ [Tarea Principal Construcción]/steward_guidelinesmd#tarea-principal-de-construcción/ Variada]/steward_guidelinesmd#tarea-variada Lanzamiento]/steward_guidelinesmd#proceso-de-lanzamiento [Consejos Trucos]/steward_guidelinesmd#consejos-y-trucos [Plantillas Respuesta]/steward_guidelinesmd#plantillas-de-respuesta [GitHub CLI]/steward_guidelinesmd#github-cli [Gestión Notificaciones]/steward_guidelinesmd#gestión-de-notificaciones/ *** *Issues* Alentamos mayoría contribuciones código fuente comenzar *issue* *issues* discusiones pasos seguir revisar dependerán tipo repositorio utiliza GitHub](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/), organizar tipos alentar autores proporcionar relevante paso plantilla completada determinar necesita adicional campos completaron utilizó incorrecta ### Informe Errores informes errores deberían utilizar *Issue* Found bug típico abordar Replicar error objetivo suficiente revisor intente replicar cuestión reportado abrió p5js-website Transfiera acceso deje comentario debería presentarse informe enlace directo proporcionado cierre verificar proporciona descrito necesario discusión solucionar particular directootras complicado favor consulte [principios diseño p5js]/design_principles/ tomar decisión caso autor dispuesto solución Apruebe dejando asignándoles Utilice botón engranaje derecho Assignee desea Deje reconociendo Intente solucionarlo agregue etiqueta `help wanted` señalar Solicite versión navegador sistema operativo etc entorno prueba difiere informa ejemploun diciendo específico Agregue incidente pida alguien configuración especificada *bugs* ocurren editor web probar localmente redirigido [repositorio web](https://github.com/processing/p5.js-web-editor/). replicación regrese origina usuario proporcionó comportamiento Determine documentación implementación amigable mejorarse evitar cometa Redirija amablemente pregunta [foro](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) cambios Solicitud Funcionalidades solicitar funcionalidades New Feature Request solicitudes función compromiso aumentar solicitud justificar aumenta comunidades históricamente marginadas campo detalles disponibles [aquí]/access/ funcionalidad suficientemente completado Increasing Access Aumento Acceso preguntar declaración proporcionada miembro comunidad incluidos revisores evaluada inclusión base siguientes criterios ¿La encaja alcance proyecto principios diseño]/design_principles/ agregar forma primitiva dibujo considerada adoptar protocolo Internet basado probablemente relativamente estrecho exceso características utilizadas sugiere implemente biblioteca complementaria idea sugerir concepto ayuda usuarios concreto importancia necesariamente completa completamente integrada integrarse núcleo corresponde ¿Es probable propuesta cause cambio incompatible ¿Entrará conflicto variables existentes *sketches* bocetos típicos escritos causen conflictos mencionadas anteriormente consideran incompatibles [Lanzamiento mayor](https://docs.npmjs.com/about-semantic-versioning/),no deberíamos ¿Se lograr utilizando p5jscódigo JavaScript nativo simple bibliotecas fáciles unir matriz cadenas `join[Helloworld]` preferirse `[Helloworld]join` requisito consideraciones cumplidas supervisores responsables aprobar comience PR proceso revisión *pull request* documentado continuación Mejora mejora incidentes Existing Enhancement Existentes similar diferencia *new feature *feature Funcionalidad confusa solicitando adición Similar mejoras aceptadas aumentan consulta [sección anterior]/steward_guidelinesmd#feature-request similares prestar especial atención posibles modificando firmas válidas documentadas previamente comportarse aprobadas Discusión mínima utilizada recopilar comentarios retroalimentaciones tema consolidarlo cerrarse finaliza conversación creado específicos resultantes abre *bug report* aplicar correcta quitar discussión incluido contribución repositorios GitHub redirigidos foro Discord cerrado etiquetas adicionales mirarla *Pull Requests* realizan Pull *push access* escritura anima > pull request encontrar [Aquî](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). requests asociados abiertos discutidos los[flujos mås relevantes ]/steward_guidelinesmd#issues seguidos revisada únicas instancias aplica correcciones menores tipográficos requieren abierto fusionadas persona *merge* fusionar área excepción aplicaremos práctica siga alentando contribuyentes abrir palabras dudas simplemente modos requestno resuelve referenciado editar publicación original cambiar Resolves #OOOO Addresses automáticamente aplique fusione Correción Sencilla Correcciones simples corrección pequeño tipográfico fusionarse directamente revisa pestaña Files Changed asegurarte automatizada integración continua CI [The files changed tab when viewing on GitHub]src/content/contributor-docs/images/files-changedpng All checks have passed indicator highlighted above the merge button]src/content/contributor-docs/images/all-checks-passedpng Corrección Error *Bug fixes* revisado idealmente aprobó inicialmente *fix* ccorrección implementa Debería probada CLI ayudar agilizar abajo trucos]/steward_guidelinesmd#tips-tricks [ ] existente acuerde impacto significativo rendimiento accesibilidad estándar moderno codificación pasar pruebas automatizadas incluir tests línea líneas describió [aquí](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). bloque sugerencias usado específicos\\ Suggest Change button while writing comment code in request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested change appearing within fences with suggestion tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed as diff]src/content/contributor-docs/images/suggestion-previewpng múltiples agregues procedimiento [aquí](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) aclaraciones elige Comment changes\\ option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng requieran marcar Aprobada eligiendo opción Approve access fusión bot @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) llamado colaborador lista colaboradores archivo READMEmd indicado `[contribution` `type]` `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` funcionalidades/Mejora feature* funcionalidadeso *feature\\_enhacement* errorespero notable aprobada fusionada Dependabot requests* generalmente visibles administradores omite sección actualización [semver](https://semver.org/) parche semver menor pase recomienda rápida verificación registro dependencia actualizada principal afectar compilación actual asegurarse procesos funcionando disruptivos dependencias números principales dejan admitir oficialmente versiones antiguas Nodejs casos implican API Proceso Construcción cubrirá construcción comandos sucede escena Consulta [directrices administradores]/contributor_guidelinesmd#working-on-p5js-codebase obtener detallada Gruntfilejs definiciones herramientas construir incluyen limitan Grunt Browserify YUIDoc ESLint Babel Uglify Mocha útil tarea `default` retroceder documento explicación Tarea ``` gruntregisterTask'default' ['lint' test'] ejecutamos `grunt` script npm `npm test` predeterminada consiste `lint` `test` #### gruntregisterTask'lint' ['lintsource' lintsamples'] sub tareas `lintsource` `lintsamples` subdividida `eslintbuild` `eslintsource` `eslinttest` utilizan scripts ejecutará `yui` `yuidocprod` `cleanreference` `minjson` extraen JSON eliminan archivos utilizados minifican generado \\`dataminjson respectivamente `eslint-samplessource` escrita personalizada cuya definición [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convención resto ejecuta necesitamos construya podamos lint ejemplos ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport veamos `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest comienzan `browserify` definidas [/tasks/build/browserifyjs]/tasks/build/browserifyjs siguen diferencias numerosos construye `browserifymin` minificado datos necesarios funcione FES `uglify` toma salida minifica p5minjs `browserifytest` construyendo idéntica informar cobertura usando [Istanbul](https://istanbul.js.org/)). nodejs `fsreadFileSync` reemplazado contenido real `brfs-babel` WebGL insertar shader separados incluidas node\\_modules transpila cumplir [Browserslist](https://browsersl.ist/) definido packagejson convertir declaraciones importación ES6 `require` CommonJS browserify comprende permite sintaxis disponible allá preocupación compatibilidad empaquetar empaquetado escriba pasa `pretty-fast` destinado limpiado formato consistente anticipamos leer inspeccionar omiten detallados pequeños vinculado connectserver inicia servidor local aloja construidos puedan ejecutarse Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Utiliza Puppeteer iniciar interfaz controlada remota asociadas HTML carpeta `/test` incluye minificar minificada conjuntos unitarias referencia mochaTest `mochaChrome` subconjunto requerirán conjunto ampliarse realmente necesitan Finalmente construcciones completas recopilará probando mostrará consola monitorear puntos 100% ¡Y cubre Variada `npx grunt [step]` mencionan útiles yuidev descritas seguidas puesta marcha sirve funcionalmente página encontrarás sitio [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). supervisará busca reconstruirá `yuidev` trabajando necesitas mover reconstruir hagas previsualizar ligeramente simplificada confianza hiciste mostrarán correctamente Ten modificaciones estilo hacerse probarse watch watchmain watchquick observación vigilarán serie ejecutarán cambiado única `watch` ejecutar detectar `watchmain` `watchquick` Dependiendo elegir ahorrarte manualmente reconstrucción desees Lanzamiento [release\\_processmd]/release_process/ Consejos Trucos cantidad issues abrumadora implementar faciliten PRs Plantillas Respuesta característica [Respuestas Guardadas](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/), redactar respuesta flujos descritos requerir responder respuestas idénticas redireccionar preguntas aceptar problema Respuestas Guardadas eficiente muestran mantenedores ¡Puedes usarlas crear ##### Cerrando Reproducir reproducir dudes reabrir demuestre ¡Gracias Necesita Fragmento cerrando motivos organizativos reabre fragmento ilustre issue Foro problemas escribir tutoriales publicar GSOC discutir propuestas [foro](https://discourse.processing.org/c/summer-of-code/). veo interés clara [amplía acceso]/access/ cerraré volver abrirlo vemos abrirla Complemento mantenerla minimalista partida complemento [https://github.com/processing/p5.js/blob/main/contributor\\_docs/creating\\_libraries.md](../creating_libraries/) Issue Gracias recordatorio abrirse abran etiquetarse seguimiento desarrollo mantener Aprobar Puedes Fusionado ve Revisar complejo difícil git complejos puedas probarla Afortunadamente CLI](https://cli.github.com/) enormemente instalar sesión ejecutando comando `gh pr checkout [id_del_pull_request]` fork remoto rama Volver `git main` ¡Incluso dejar necesidad visitar absoluto herramienta Gestión Notificaciones pestañas Issues Requests clic Watch ícono ojo superior frente nombre [Cropped screenshot of top right corner repository page showing series buttons center from left Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng observar eventos menciones actividades suscrito enviarán notificaciones [página notificaciones](https://github.com/notifications/), leídas descartadas buzón correo electrónico recibir correos electrónicos observando personalizarlos incluida desuscripción notificaciones](https://github.com/settings/notifications/). Configurar opciones adapten buscar issues/PRs sentirse abrumado interminables requiere equilibrio sugerencia inicial configurarlo Participando @menciones personalizadas"},"Guía de Contribución a WebGL\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* How to get started working on the p5js WebGL mode source code */} leyendo página probablemente interesado ayudar ¡Gracias agradecemos ayuda explicar estructuramos contribuciones ofrecer consejos cambios ## Recursos * Lee [visión arquitectura p5js]/webgl_mode_architecture/ entender difiere 2D referencia valiosa detalles implementación shaders trazos [instrucciones contribuidores](https://p5js.org/contributor-docs/#/./contributor_guidelines/) obtener información crear issues configurar código base probar útil API navegador basa p5js[WebGL Fundamentals](https://webglfundamentals.org/) repasa conceptos básicos renderización [The Book of Shaders](https://thebookofshaders.com/) explica técnicas utilizadas Planificación Organizamos abiertos [en Proyecto GitHub](https://github.com/orgs/processing/projects/5/), dividimos tipos **Cambios nivel sistema** objetivos plazo implicaciones alcance requieren discusión planificación comenzar **Errores solución aún** informes errores necesitan depuración reducir causa listos corregidos discutir corregirla soluciones PR** decidido solucionarlo libres alguien escriba **Mejoras menores** características obvio actual necesidad encajarlas acordado vale pena hacerlas disponibles **Funcionalidades 2D** comportamiento esperado funcionalidad implementada coincida necesitemos requisitos usuario claros funcionan contextos** formas métodos coordenadas 3D fallan **solicitudes funcionalidad** solicitudes asegurarnos encajen hoja ruta Issues **documentación** cambio documentación Colocar Código relacionado subdirectorio `src/webgl` directorio funciones principales dividen archivos área temática comandos luz encuentran `lightingjs` materiales `materialsjs` implementar clases orientadas generalmente archivo clase ocasionalmente utilidad interna `p5Framebufferjs` incluye `p5Framebuffer` consta adicionalmente subclases específicas framebuffer `p5RendererGL` grande maneja cantidad comportamientos razón divide descripción #### `p5RendererGLjs` Inicialización principal `p5RendererGLImmediatejs` Funcionalidad relacionada dibujo **modo inmediato** almacenarán reutilizarán `beginShape` `endShape` `p5RendererGLRetainedjs` retenido** almacenado reutilización `sphere` `materialjs` Gestión modos mezcla `3d_primitivesjs` Funciones dibujan `triangle` definen geometría renderizado ocurre tratando entrada forma genérica `Textjs` utilidades renderizar texto Pruebas Cambios ### Consistencia difícil verificar manualmente agregamos pruebas unitarias confianza rompimos siguen pasando agregar prueba función funciona mejores consistencia píxeles resultantes iguales unitaria ```js test'coplanar strokes match 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER if === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` desactivar antialiasing ligeramente funcionar líneas rectas ejes exclusiva comparar verificamos color podríamos convertir sistema robusto compare instantáneas imagen completas resultados esperados verificación test'color interpolation' renderer myp5createCanvas256 // upper lower expected center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] rendimiento preocupación causen impacto Normalmente creando sketches comparamos velocidades fotogramas medir Deshabilita amigables `p5disableFriendlyErrors true` superior sketch simplemente `p5minjs` Muestra velocidad promedio idea clara estable let frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 draw rate frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' casos ponen presión partes proceso complicadas modelo curva larga simples `line` llamado bucle for"}},"examples":{"Primitivas de Formas":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"programa demuestra funciones básicas primitivas formas square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expande Primitivas Formas añadiendo color background llena lienzo stroke establece dibujar líneas fill interior formas noStroke noFill apagan línea respectivamente colores representados demuestra opciones"},"Dibujando Líneas":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Haz clic arrastra ratón dibujar línea demuestra variables integradas mouseX mouseY almacenan posición actual representada pmouseX pmouseY muestra colorMode HSB tono-saturación-brillo variable establece tono"},"Animación con Eventos":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demuestra loop noLoop pausar reanudar animación clic ratón alterna bucle detenida usuario presionar tecla avanzar fotograma Nota establecer enfoque lienzo pulsaciones teclas registren Avanzar logra llamando función redraw resulta llamada draw"},"Movimiento en Dispositivo Móvil":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"función deviceMoved ejecuta dispositivo móvil muestra sketch mueve valores accelerationX accelerationY accelerationZ configuran posición tamaño círculo funciona dispositivos móviles"},"Condiciones":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"declaraciones if else permiten bloque código ejecute condición anima mantiene presionado mouse declaración línea Puedes leer referencia p5 MDN operadores comparación ayudan formar condiciones comparar valores tono círculo reinicia cero lógicos combinar && verifica ambas verdaderas relleno negro centro horizontal lienzo blanco posición || invierte velocidad llega borde izquierdo derecho"},"Palabras":{"relativeUrl":"/examples/imported-media-words","description":"función text utiliza insertar texto lienzo Puedes cambiar fuente tamaño usando funciones loadFont fontSize alinearse izquierda centro derecha textAlign formas color fill"},"Copiar Datos de Imagen":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"Usando método copy puedes simular colorear imagen copiando color blanco negro arrastre cursor"},"Máscara Alfa":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"Usando método mask puedes crear máscara imagen especificar transparencia partes ejecutar localmente necesitarás archivos servidor local funcionamiento server"},"Transparencia de Imagen":{"relativeUrl":"/examples/imported-media-image-transparency","description":"programa superpone imagen modificando alfa función tint Mueve cursor izquierda derecha lienzo cambiar posición ejecutar localmente necesitarás archivo servidor local funcionamiento server"},"Reproductor de Audio":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio crea reproductor audio muestra controles ajusta velocidad reproducción normal ratón borde izquierdo ventana vuelve rápida medida mueve derecha información elementos multimedia reproductores página referencia p5MediaElement archivo bucle piano dominio público Josef Pres"},"Reproductor de Video":{"relativeUrl":"/examples/imported-media-video","description":"Usando funciones noCanvas createVideo puedes cargar video DOM incrustar lienzo construir incrustado elemento canvas visita Video Canvas"},"Video en el Lienzo":{"relativeUrl":"/examples/imported-media-video-canvas","description":"Usando funciones createVideo image puedes cargar video lienzo captura pasa constructor añadir filtros usando método filter ejecutar localmente necesitarás servidor local funcionamiento server construir incrustarlo visita Video"},"Captura de Video":{"relativeUrl":"/examples/imported-media-video-capture","description":"Usando funciones createCapture image puedes tomar captura video dispositivo dibujarlo lienzo pasa constructor añadir filtros método filter estrategias cargar presentar estilizar videos visita ejemplos Video Canvas"},"Soltar Imagen":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop método elemento p5js registra callback carga archivo cargado crea clase p5File Puedes revisar tipo usarlo declaraciones condicionales respondan"},"Entrada y Botón":{"relativeUrl":"/examples/input-elements-input-button","description":"Usando funciones createElement createInput createButton puedes tomar cadena caracteres ingresada entrada texto mostrarla lienzo"},"Elementos de un formulario":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM representa estructura resultante página web elementos forma p5js's tales createInput createSelect createRadio permiten crear distintas maneras acceder información ingresada botón select input radio actualizar base obtenida"},"Trasladar":{"relativeUrl":"/examples/transformation-translate","description":"función translate mueve origen sistema coordenadas ubicación especificada funciones push pop guardan restauran configuraciones dibujo tales color relleno Nota dibujamos figuras rectángulo cuadrado distinto ocasión"},"Rotar":{"relativeUrl":"/examples/transformation-rotate","description":"función rotate rota sistema coordenadas actual origen Nota defecto ubica esquina superior izquierda lienzo rotar centro trasladar funciones push pop guardan restauran respectivamente"},"Ajustar la escala":{"relativeUrl":"/examples/transformation-scale","description":"función scale ajusta escala sistema coordenadas actual factor especificado funciones push pop guardan restauran respectivamente dibuja cuadrado tamaño origen factores"},"Interpolación lineal":{"relativeUrl":"/examples/calculating-values-interpolate","description":"interpolación calcula valores número camino tipos utilizan tasas cambio lineal abreviada lerp inglés utiliza tasa constante función interpola linealmente números Mueve ratón pantalla símbolo seguirá cuadro animación elipse mueve distancia posición actual cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"función map convierte rango posición horizontal cursor resultante tono círculo Map vertical diámetro"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demuestra función random usuario presiona botón mouse posición color círculo cambian aleatoriamente"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"dibuja círculo posición cursor mantiene rectángulo pasando coordenadas ratón función constrain"},"Reloj":{"relativeUrl":"/examples/calculating-values-clock","description":"hora actual obtener funciones second minute hour utiliza map calcular ángulo manecillas transformaciones establecer posición"},"Interpolación de color":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolación calcula valores número camino tipos interpolación utilizan tasas cambio lineal abreviada lerp inglés utiliza tasa constante función interpola linealmente números lerpColor demostrada colores variable stripeCount ajusta franjas horizontales aparecen Configurar alto hará vea individuales degradado"},"Rueda de Color":{"relativeUrl":"/examples/repetition-color-wheel","description":"ilustra apariencia tonos Utiliza bucle for repetir transformaciones inicializa variable llamada ángulo cambia rotación círculo tono repite dibuja relativo centro lienzo funciones push pop afecten individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"curvas bezier crean utilizando puntos control anclaje parámetros función especifican punto curva intermedios establecen definen forma"},"Caleidoscopio":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"caleidoscopio instrumento óptico superficies reflectantes inclinadas ángulo Utilizando funciones translate rotate scale puedes replicar efecto visual resultante lienzo"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"ruido Perlines algoritmo creado Ken Perlin producir secuencias parecen aleatorias orgánicas función noise p5 produce puntos tamaño basado valores deslizador izquierda establece distancia derecha desplazamiento cálculo"},"Árbol recursivo":{"relativeUrl":"/examples/repetition-recursive-tree","description":"renderizar estructura similar árbol recursión ángulo ramificación calcula función posición horizontal mouse Mueve izquierda derecha cambiar Basado Recursive Tree Example Daniel Shiffman Processing"},"Poema Aleatorio":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"Usando funciones floor random puedes seleccionar aleatoriamente serie elementos arreglo dibujarlos tamaños posiciones lienzo"},"Seno y Coseno":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demuestra funciones matemáticas seno coseno animación muestra movimiento circular uniforme círculo unitario radio ángulo medido eje determina punto definidos coordenadas respectivamente"},"Apuntar":{"relativeUrl":"/examples/angles-and-motion-aim","description":"función atan2 calcula ángulo posiciones utilizado rotar forma ojos rotan apuntan mirar cursor"},"Tira de triángulos":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demuestra crear forma especificando vértices TRIANGLE_STRIP utilizando funciones beginShape endShape vertex"},"Clicker circular":{"relativeUrl":"/examples/games-circle-clicker","description":"demuestra juego límite puntuación almacenamiento local navegador guarda alta juega nuevamente permanece Borrar datos borra"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"juego inspirado videojuegos arcade antiguos Pong Atari jugadores controla paleta representada rectángulo blanco jugador izquierda mover abajo usando teclas derecha flechas ganan puntos rebotar pelota cuadrado allá borde oponente lienzo"},"Juego de serpiente":{"relativeUrl":"/examples/games-snake","description":"reproducción tipo juego arcade llamado Snake Blockade lanzado juegos estructura jugador controla movimientos serpiente representada línea verde objetivo colisione fruta punto rojo colisiona crece crecer bordes área utiliza matriz vectores almacenar posiciones segmentos teclas flecha controlan movimiento"},"Geometrías":{"relativeUrl":"/examples/3d-geometries","description":"WEBGL p5js incluye formas primitivas plano caja cilindro cono toro esfera elipsoide model muestra geometría personalizada cargada loadModel modelo colección NASA"},"Geometría Personalizada":{"relativeUrl":"/examples/3d-custom-geometry","description":"función buildGeometry almacena formas modelo 3D utilizado reutilizado eficiente"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"renderización 3D material determina superficie responde luz WEBGL p5js admite materiales ambient ambientales emissive emisión normal normales specular especulares ambiental especular fuente muestra color independientemente contextos típicamente emite visualiza dirección mira combinarse fill stroke Fill establece base vértices objeto función texture envuelve imagen modelo textura colección NASA"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"control órbita utiliza entrada ratón tacto ajustar orientación cámara boceto 3D rotar haz clic izquierdo arrastra desliza pantalla táctil desplazar derecho dedos acercar alejar centro rueda desplazamiento presiona adentro/hacia afuera"},"Filtro de sombreado":{"relativeUrl":"/examples/3d-filter-shader","description":"filtros sombreado forma aplicar efecto lienzo aplica vídeo"},"Ajusta Posiciones con un Sombreador.":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"sombreadores ajustar posiciones vértices formas permite distorsionar animar modelos 3D"},"Desenfoque del búfer de trama (framebuffer)":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"sombreador utiliza información profundidad p5Framebuffer aplicar desenfoque cámara real objetos aparecen borrosos enfoque objetivo simula efecto boceto renderiza esferas framebuffer lienzo usando"},"Crear Gráficos":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"función createGraphics usada crear objeto p5Graphics servir búfer gráficos pantalla lienzo búferes dimensiones propiedades superficie visualización actual parezcan existir espacio"},"Múltiples Lienzos":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"defecto p5 ejecuta Global significa funciones ámbito global relacionadas lienzo aplican ejecutarse Instancia métodos instancia clase función definida parámetro represente etiquetada variables típicamente globales pertenecerán Pasando constructor"},"Shader como Textura":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"shaders aplicarse formas 2D/3D texturas aprender p5js Shaders"},"Copos de Nieve":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demuestra sistema partículas simular movimiento copos nieve caen programa define clase copo class utiliza array almacenar objetos"},"Agitar y Rebotar la Pelota":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"Usando clase puedes crear colección círculos mueven lienzo respuesta inclinación dispositivo móvil Debes abrir página mostrar boceto"},"Partículas Conectadas":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"utiliza clases personalizadas clase Particle almacena posición velocidad tono Renderiza círculo usando actuales actualiza actual Path matriz objetos creados líneas conectando partículas usuario clic ratón boceto crea instancia arrastra añade trayecto"},"Agrupación":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demostración comportamiento agrupamiento discusión completa implementación encontrar libro Nature of Code Daniel Shiffman simulación basa investigación Craig Reynolds utilizó término boid representar objeto similar pájaro"},"Almacenamiento Local":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"navegadores permiten sitios web almacenar datos dispositivo visitante llama almacenamiento local funciones getItem storeItem clearStorage removeItem controlan inspirado ejemplos Daniel Shiffman Carga Datos JSON Tabulares Processing escritos Java Utiliza clase organizar burbuja agregar burbujas guardarán vuelve visitar boceto cargarán"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON formato escribir datos archivo sintaxis proviene utiliza contextos basado Carga Datos Daniel Shiffman Processing escrito Java Utiliza clase organizar burbuja boceto comienza carga burbujas visitante agregar descargar actualizado cargar"},"Tabla":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Valores Separados Comas CSV formato escribir datos archivo p5 usando p5Table basado Carga Datos Tabulares Daniel Shiffman Processing Utiliza clase organizar representan burbuja comienza boceto carga burbujas visitante agregar descargar actualizado cargar"},"Reflexión No Ortogonal":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demuestra pelota rebotando superficie inclinada implementada usando cálculos vectoriales reflexión código extensivo clase p5Vector incluyendo función createVector crear vectores métodos add dot"},"Cuerpo Blando":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Simulación física cuerpo blando experimentando aceleración posición ratón forma crea curvas usando curveVertex curveTightness"},"Fuerzas":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demostración múltiples fuerzas actuando cuerpos experimentan gravedad continuamente resistencia fluido agua natureofcodecom cálculos fuerza realizan usando clase p5Vector incluyendo función createVector crear vectores"},"Partículas de Humo":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Demostración sistema partículas humo basado original Shiffman Processing código clase p5Vector incluyendo función createVector diversos cálculos actualizar posiciones velocidades realizan métodos implementa contiene array objetos Particle"},"Juego de la Vida":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Juego Vida autómata celular creado matemático John Conway tipo simulación cuadrícula células célula muerta viva cuadrados negros representan vivas blancos muertas medida ejecuta cambian basadas conjunto reglas vecinos vivos muere vive cambios próxima generación exactamente cobrará vida generan interacciones complejas Haz clic lienzo comenzar aleatorias reiniciará"},"Conjunto de Mandelbrot":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Renderización colorida conjunto Mandelbrot basada Daniel Shiffman Processing"}},"libraries":{"p5.xr":{"relativeUrl":"/libraries/","description":"Librería"}},"reference":{"Array":{"relativeUrl":"/reference/p5/Array"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"Number":{"relativeUrl":"/reference/p5/number"},"Object":{"relativeUrl":"/reference/p5/object"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"String":{"relativeUrl":"/reference/p5/string"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"}},"contributor-docs-fallback":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure success volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increase groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](https://p5js.org/reference/p5.sound), [class page](https://p5js.org/reference/p5/p5.Vector), [method page](https://p5js.org/reference/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this instruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (https://p5js.org/reference/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (https://p5js.org/reference/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (https://p5js.org/reference/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (https://p5js.org/reference/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```javascript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (https://p5js.org/reference/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (https://p5js.org/reference/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed requires temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve *Both 1x include system diffing algorithm robust system* operating systems browsers render graphics subtle variations differences normal fail Common acceptable Single-pixel shifts line positions Slight anti-aliasing Text font weight kerning Minor curve smoothness text rendered macOS slightly Linux applies thin lines curves graphical elements image earlier caused environments [Example]src/content/contributor-docs/images/pixelmatch2png sophisticated distinguish Initial Compares pixels moderate threshold identify [pixelmatch](https://github.com/mapbox/pixelmatch/) pixel Cluster identification Groups connected difference Breadth-First Search BFS Pattern recognition specifically identifies Line shift clusters represent element shifted 1px Isolated noise Smart failure criteria Applies thresholds Ignores smaller total significant Permits minor typical platforms [Example]src/content/contributor-docs/images/pixelmatchpng balances sensitivity real tolerating platform-specific parameters const MIN_CLUSTER_SIZE Minimum cluster MAX_TOTAL_DIFF_PIXELS Maximum allowed analyzing neighborhood 80% ≤2 neighbors classified structural intelligent ensures due catching important note improved pass failed detecting showing visually meaningful makes reliable reduces failures require manual investigation ### efficient sizes dimensions close 50x50 resizes images canvases result faster Focus visible details intricate hard Design demonstrate reduced cramming variants call times visualTest'stroke variations' stroke p5stroke0 p5strokeWeight1 p5line10 Screenshot thick p5strokeWeight5"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples-fallback":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries-fallback":{"AnimatorJs":{"relativeUrl":"/libraries/","description":"A javascript animation viewer based on a custom animation API primarily designed for p5.js and allows for dynamic, lightweight, real-time rendered browser animations controlled purely by code."},"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Pixyp5js":{"relativeUrl":"/libraries/","description":"A library for easily more easily dealing with pixels in images during runtime"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"TurtleGraphics":{"relativeUrl":"/libraries/","description":"Watch images being drawn using turtle graphics."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"Zoomp5js":{"relativeUrl":"/libraries/","description":"A simple library for adding the zooming functionality to your p5.js project."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.5":{"relativeUrl":"/libraries/","description":"Add UI to p5.js and other goodies"},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Modbuttons":{"relativeUrl":"/libraries/","description":"a simple and modular button system for p5js"},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Sprite":{"relativeUrl":"/libraries/","description":"A basic sprite library that supports both animated and static sprites for p5.js"},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.colorGenerator":{"relativeUrl":"/libraries/","description":"p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point."},"p5.comfyui-helper":{"relativeUrl":"/libraries/","description":"A library for interfacing with ComfyUI"},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."},"XYscope.js":{"relativeUrl":"/libraries/","description":"p5.js library to render graphics on analog vector displays"}},"events-fallback":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro VimeoEmbed ///components/VimeoEmbed/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg Introduction Casey Reas Johanna Hedva Stephanie Pi Phoenix Perry Taeyoon Choi Sara Hendren Epic Jefferson Chandler McWilliams Q&A ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people-fallback":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aarati Akkapeddi ":{"relativeUrl":"/people/#aarati-akkapeddi-"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aaron Welles":{"relativeUrl":"/people/#aaron-welles"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abdiel Lopez":{"relativeUrl":"/people/#abdiel-lopez"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Animesh Sinha":{"relativeUrl":"/people/#animesh-sinha"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antoinette Bumatay-Chan":{"relativeUrl":"/people/#antoinette-bumatay-chan"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashish Karn":{"relativeUrl":"/people/#ashish-karn"},"ashish singh":{"relativeUrl":"/people/#ashish-singh"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"Ashwani Dey":{"relativeUrl":"/people/#ashwani-dey"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"beau-muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"benpalevsky":{"relativeUrl":"/people/#benpalevsky"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"blackboxlogic":{"relativeUrl":"/people/#blackboxlogic"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Bojidar Marinov":{"relativeUrl":"/people/#bojidar-marinov"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"c-dacanay":{"relativeUrl":"/people/#c-dacanay"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Callie":{"relativeUrl":"/people/#callie"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Carrie Wang":{"relativeUrl":"/people/#carrie-wang"},"Casey Conchinha":{"relativeUrl":"/people/#casey-conchinha"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chloe Yan":{"relativeUrl":"/people/#chloe-yan"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"cog25":{"relativeUrl":"/people/#cog25"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"computational mama":{"relativeUrl":"/people/#computational-mama"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"crh82":{"relativeUrl":"/people/#crh82"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Darren Kessner":{"relativeUrl":"/people/#darren-kessner"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"davidblitz":{"relativeUrl":"/people/#davidblitz"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"dhanush":{"relativeUrl":"/people/#dhanush"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"FORCHA PEARL":{"relativeUrl":"/people/#forcha-pearl"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Franolich Design":{"relativeUrl":"/people/#franolich-design"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gabriel Sroka":{"relativeUrl":"/people/#gabriel-sroka"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Albers":{"relativeUrl":"/people/#greg-albers"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Greg Stanton":{"relativeUrl":"/people/#greg-stanton"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Kholiya":{"relativeUrl":"/people/#himanshu-kholiya"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"Ilona Brand":{"relativeUrl":"/people/#ilona-brand"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jackie Liu":{"relativeUrl":"/people/#jackie-liu"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Berghold":{"relativeUrl":"/people/#jared-berghold"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"jeanette":{"relativeUrl":"/people/#jeanette"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Philyaw":{"relativeUrl":"/people/#jordan-philyaw"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Kathryn Lichlyter":{"relativeUrl":"/people/#kathryn-lichlyter"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Gupta":{"relativeUrl":"/people/#keshav-gupta"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"Kit Kuksenok":{"relativeUrl":"/people/#kit-kuksenok"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"Kristian Hamilton":{"relativeUrl":"/people/#kristian-hamilton"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Berrios":{"relativeUrl":"/people/#lauren-berrios"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"Luke Plowden":{"relativeUrl":"/people/#luke-plowden"},"M":{"relativeUrl":"/people/#m"},"ma haidong":{"relativeUrl":"/people/#ma-haidong"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marco Macarena":{"relativeUrl":"/people/#marco-macarena"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Martin Leopold Groedl":{"relativeUrl":"/people/#martin-leopold-groedl"},"Martin Lorentzon":{"relativeUrl":"/people/#martin-lorentzon"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"mathewpan2":{"relativeUrl":"/people/#mathewpan2"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Arguelles":{"relativeUrl":"/people/#maya-arguelles"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"Mayank Verma":{"relativeUrl":"/people/#mayank-verma"},"mclark414":{"relativeUrl":"/people/#mclark414"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"Melody Sharp":{"relativeUrl":"/people/#melody-sharp"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"Mx. Ramsey":{"relativeUrl":"/people/#mx--ramsey"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"oliver thurley":{"relativeUrl":"/people/#oliver-thurley"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"Pim Tournaye":{"relativeUrl":"/people/#pim-tournaye"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Qingfeng Huang":{"relativeUrl":"/people/#qingfeng-huang"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajas Samse":{"relativeUrl":"/people/#rajas-samse"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"Renjie Li":{"relativeUrl":"/people/#renjie-li"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishab Kumar Jha":{"relativeUrl":"/people/#rishab-kumar-jha"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Rishi":{"relativeUrl":"/people/#rishi"},"Ritesh Patil":{"relativeUrl":"/people/#ritesh-patil"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"roxi09":{"relativeUrl":"/people/#roxi09"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"Seyko":{"relativeUrl":"/people/#seyko"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shoury Singh":{"relativeUrl":"/people/#shoury-singh"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Tibor Udvari":{"relativeUrl":"/people/#tibor-udvari"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Vaivaswat Dubey":{"relativeUrl":"/people/#vaivaswat-dubey"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"Vik":{"relativeUrl":"/people/#vik"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishesh Rawal":{"relativeUrl":"/people/#vishesh-rawal"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"willallstet":{"relativeUrl":"/people/#willallstet"},"William Hazard":{"relativeUrl":"/people/#william-hazard"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"Xevi H. Aqeel":{"relativeUrl":"/people/#xevi-h--aqeel"},"Xin Xin":{"relativeUrl":"/people/#xin-xin"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"ℤ":{"relativeUrl":"/people/#ℤ"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference-fallback":{"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"append()":{"relativeUrl":"/reference/p5/append","alias":"append"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"arrayCopy()":{"relativeUrl":"/reference/p5/arrayCopy","alias":"arrayCopy"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"baseColorShader()":{"relativeUrl":"/reference/p5/baseColorShader","alias":"baseColorShader"},"baseMaterialShader()":{"relativeUrl":"/reference/p5/baseMaterialShader","alias":"baseMaterialShader"},"baseNormalShader()":{"relativeUrl":"/reference/p5/baseNormalShader","alias":"baseNormalShader"},"baseStrokeShader()":{"relativeUrl":"/reference/p5/baseStrokeShader","alias":"baseStrokeShader"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"concat()":{"relativeUrl":"/reference/p5/concat","alias":"concat"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"HSB":{"relativeUrl":"/reference/p5/HSB"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createConvolver()":{"relativeUrl":"/reference/p5/createConvolver","alias":"createConvolver"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createModel()":{"relativeUrl":"/reference/p5/createModel","alias":"createModel"},"createNumberDict()":{"relativeUrl":"/reference/p5/createNumberDict","alias":"createNumberDict"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createStringDict()":{"relativeUrl":"/reference/p5/createStringDict","alias":"createStringDict"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"freqToMidi()":{"relativeUrl":"/reference/p5/freqToMidi","alias":"freqToMidi"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getAudioContext()":{"relativeUrl":"/reference/p5/getAudioContext","alias":"getAudioContext"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getOutputVolume()":{"relativeUrl":"/reference/p5/getOutputVolume","alias":"getOutputVolume"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"join()":{"relativeUrl":"/reference/p5/join","alias":"join"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadSound()":{"relativeUrl":"/reference/p5/loadSound","alias":"loadSound"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"match()":{"relativeUrl":"/reference/p5/match","alias":"match"},"matchAll()":{"relativeUrl":"/reference/p5/matchAll","alias":"matchAll"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"midiToFreq()":{"relativeUrl":"/reference/p5/midiToFreq","alias":"midiToFreq"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"outputVolume()":{"relativeUrl":"/reference/p5/outputVolume","alias":"outputVolume"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.NumberDict":{"relativeUrl":"/reference/p5/p5.NumberDict"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Renderer":{"relativeUrl":"/reference/p5/p5.Renderer"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.StringDict":{"relativeUrl":"/reference/p5/p5.StringDict"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.TypedDict":{"relativeUrl":"/reference/p5/p5.TypedDict"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"paletteLerp()":{"relativeUrl":"/reference/p5/paletteLerp","alias":"paletteLerp"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"preload()":{"relativeUrl":"/reference/p5/preload","alias":"preload"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"reverse()":{"relativeUrl":"/reference/p5/reverse","alias":"reverse"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"sampleRate()":{"relativeUrl":"/reference/p5/sampleRate","alias":"sampleRate"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveSound()":{"relativeUrl":"/reference/p5/saveSound","alias":"saveSound"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setBPM()":{"relativeUrl":"/reference/p5/setBPM","alias":"setBPM"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shorten()":{"relativeUrl":"/reference/p5/shorten","alias":"shorten"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"sort()":{"relativeUrl":"/reference/p5/sort","alias":"sort"},"soundFormats()":{"relativeUrl":"/reference/p5/soundFormats","alias":"soundFormats"},"soundOut":{"relativeUrl":"/reference/p5/soundOut"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"splice()":{"relativeUrl":"/reference/p5/splice","alias":"splice"},"split()":{"relativeUrl":"/reference/p5/split","alias":"split"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"subset()":{"relativeUrl":"/reference/p5/subset","alias":"subset"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"trim()":{"relativeUrl":"/reference/p5/trim","alias":"trim"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"userStartAudio()":{"relativeUrl":"/reference/p5/userStartAudio","alias":"userStartAudio"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.Amplitude.toggleNormalize()":{"relativeUrl":"/reference/p5.Amplitude/toggleNormalize","alias":"toggleNormalize"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.amplitude":{"relativeUrl":"/reference/p5.AudioIn/amplitude","alias":"amplitude"},"p5.AudioIn.connect()":{"relativeUrl":"/reference/p5.AudioIn/connect","alias":"connect"},"p5.AudioIn.disconnect()":{"relativeUrl":"/reference/p5.AudioIn/disconnect","alias":"disconnect"},"p5.AudioIn.enabled":{"relativeUrl":"/reference/p5.AudioIn/enabled","alias":"enabled"},"p5.AudioIn.getLevel()":{"relativeUrl":"/reference/p5.AudioIn/getLevel","alias":"getLevel"},"p5.AudioIn.getSources()":{"relativeUrl":"/reference/p5.AudioIn/getSources","alias":"getSources"},"p5.AudioIn.setSource()":{"relativeUrl":"/reference/p5.AudioIn/setSource","alias":"setSource"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.AudioVoice.connect()":{"relativeUrl":"/reference/p5.AudioVoice/connect","alias":"connect"},"p5.AudioVoice.disconnect()":{"relativeUrl":"/reference/p5.AudioVoice/disconnect","alias":"disconnect"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.roll()":{"relativeUrl":"/reference/p5.Camera/roll","alias":"roll"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Compressor.attack()":{"relativeUrl":"/reference/p5.Compressor/attack","alias":"attack"},"p5.Compressor.compressor":{"relativeUrl":"/reference/p5.Compressor/compressor","alias":"compressor"},"p5.Compressor.knee()":{"relativeUrl":"/reference/p5.Compressor/knee","alias":"knee"},"p5.Compressor.process()":{"relativeUrl":"/reference/p5.Compressor/process","alias":"process"},"p5.Compressor.ratio()":{"relativeUrl":"/reference/p5.Compressor/ratio","alias":"ratio"},"p5.Compressor.reduction()":{"relativeUrl":"/reference/p5.Compressor/reduction","alias":"reduction"},"p5.Compressor.release()":{"relativeUrl":"/reference/p5.Compressor/release","alias":"release"},"p5.Compressor.set()":{"relativeUrl":"/reference/p5.Compressor/set","alias":"set"},"p5.Compressor.threshold()":{"relativeUrl":"/reference/p5.Compressor/threshold","alias":"threshold"},"p5.Convolver.addImpulse()":{"relativeUrl":"/reference/p5.Convolver/addImpulse","alias":"addImpulse"},"p5.Convolver.convolverNode":{"relativeUrl":"/reference/p5.Convolver/convolverNode","alias":"convolverNode"},"p5.Convolver.impulses":{"relativeUrl":"/reference/p5.Convolver/impulses","alias":"impulses"},"p5.Convolver.process()":{"relativeUrl":"/reference/p5.Convolver/process","alias":"process"},"p5.Convolver.resetImpulse()":{"relativeUrl":"/reference/p5.Convolver/resetImpulse","alias":"resetImpulse"},"p5.Convolver.toggleImpulse()":{"relativeUrl":"/reference/p5.Convolver/toggleImpulse","alias":"toggleImpulse"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.connect()":{"relativeUrl":"/reference/p5.Delay/connect","alias":"connect"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.disconnect()":{"relativeUrl":"/reference/p5.Delay/disconnect","alias":"disconnect"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.filter()":{"relativeUrl":"/reference/p5.Delay/filter","alias":"filter"},"p5.Delay.leftDelay":{"relativeUrl":"/reference/p5.Delay/leftDelay","alias":"leftDelay"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Delay.rightDelay":{"relativeUrl":"/reference/p5.Delay/rightDelay","alias":"rightDelay"},"p5.Delay.setType()":{"relativeUrl":"/reference/p5.Delay/setType","alias":"setType"},"p5.Distortion.WaveShaperNode":{"relativeUrl":"/reference/p5.Distortion/WaveShaperNode","alias":"WaveShaperNode"},"p5.Distortion.getAmount()":{"relativeUrl":"/reference/p5.Distortion/getAmount","alias":"getAmount"},"p5.Distortion.getOversample()":{"relativeUrl":"/reference/p5.Distortion/getOversample","alias":"getOversample"},"p5.Distortion.process()":{"relativeUrl":"/reference/p5.Distortion/process","alias":"process"},"p5.Distortion.set()":{"relativeUrl":"/reference/p5.Distortion/set","alias":"set"},"p5.EQ.bands":{"relativeUrl":"/reference/p5.EQ/bands","alias":"bands"},"p5.EQ.process()":{"relativeUrl":"/reference/p5.EQ/process","alias":"process"},"p5.Effect.amp()":{"relativeUrl":"/reference/p5.Effect/amp","alias":"amp"},"p5.Effect.chain()":{"relativeUrl":"/reference/p5.Effect/chain","alias":"chain"},"p5.Effect.connect()":{"relativeUrl":"/reference/p5.Effect/connect","alias":"connect"},"p5.Effect.disconnect()":{"relativeUrl":"/reference/p5.Effect/disconnect","alias":"disconnect"},"p5.Effect.drywet()":{"relativeUrl":"/reference/p5.Effect/drywet","alias":"drywet"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.touchEnded()":{"relativeUrl":"/reference/p5.Element/touchEnded","alias":"touchEnded"},"p5.Element.touchMoved()":{"relativeUrl":"/reference/p5.Element/touchMoved","alias":"touchMoved"},"p5.Element.touchStarted()":{"relativeUrl":"/reference/p5.Element/touchStarted","alias":"touchStarted"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.add()":{"relativeUrl":"/reference/p5.Envelope/add","alias":"add"},"p5.Envelope.attackLevel":{"relativeUrl":"/reference/p5.Envelope/attackLevel","alias":"attackLevel"},"p5.Envelope.attackTime":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.decayLevel":{"relativeUrl":"/reference/p5.Envelope/decayLevel","alias":"decayLevel"},"p5.Envelope.decayTime":{"relativeUrl":"/reference/p5.Envelope/decayTime","alias":"decayTime"},"p5.Envelope.mult()":{"relativeUrl":"/reference/p5.Envelope/mult","alias":"mult"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.ramp()":{"relativeUrl":"/reference/p5.Envelope/ramp","alias":"ramp"},"p5.Envelope.releaseLevel":{"relativeUrl":"/reference/p5.Envelope/releaseLevel","alias":"releaseLevel"},"p5.Envelope.releaseTime":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.scale()":{"relativeUrl":"/reference/p5.Envelope/scale","alias":"scale"},"p5.Envelope.set()":{"relativeUrl":"/reference/p5.Envelope/set","alias":"set"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.setExp()":{"relativeUrl":"/reference/p5.Envelope/setExp","alias":"setExp"},"p5.Envelope.setInput()":{"relativeUrl":"/reference/p5.Envelope/setInput","alias":"setInput"},"p5.Envelope.setRange()":{"relativeUrl":"/reference/p5.Envelope/setRange","alias":"setRange"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.getCentroid()":{"relativeUrl":"/reference/p5.FFT/getCentroid","alias":"getCentroid"},"p5.FFT.getEnergy()":{"relativeUrl":"/reference/p5.FFT/getEnergy","alias":"getEnergy"},"p5.FFT.getOctaveBands()":{"relativeUrl":"/reference/p5.FFT/getOctaveBands","alias":"getOctaveBands"},"p5.FFT.linAverages()":{"relativeUrl":"/reference/p5.FFT/linAverages","alias":"linAverages"},"p5.FFT.logAverages()":{"relativeUrl":"/reference/p5.FFT/logAverages","alias":"logAverages"},"p5.FFT.setInput()":{"relativeUrl":"/reference/p5.FFT/setInput","alias":"setInput"},"p5.FFT.smooth()":{"relativeUrl":"/reference/p5.FFT/smooth","alias":"smooth"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Filter.biquadFilter":{"relativeUrl":"/reference/p5.Filter/biquadFilter","alias":"biquadFilter"},"p5.Filter.freq()":{"relativeUrl":"/reference/p5.Filter/freq","alias":"freq"},"p5.Filter.gain()":{"relativeUrl":"/reference/p5.Filter/gain","alias":"gain"},"p5.Filter.process()":{"relativeUrl":"/reference/p5.Filter/process","alias":"process"},"p5.Filter.res()":{"relativeUrl":"/reference/p5.Filter/res","alias":"res"},"p5.Filter.set()":{"relativeUrl":"/reference/p5.Filter/set","alias":"set"},"p5.Filter.setType()":{"relativeUrl":"/reference/p5.Filter/setType","alias":"setType"},"p5.Filter.toggle()":{"relativeUrl":"/reference/p5.Filter/toggle","alias":"toggle"},"p5.Font.font":{"relativeUrl":"/reference/p5.Font/font","alias":"font"},"p5.Font.textBounds()":{"relativeUrl":"/reference/p5.Font/textBounds","alias":"textBounds"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.loadPixels()":{"relativeUrl":"/reference/p5.Framebuffer/loadPixels","alias":"loadPixels"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Framebuffer.updatePixels()":{"relativeUrl":"/reference/p5.Framebuffer/updatePixels","alias":"updatePixels"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Gain.connect()":{"relativeUrl":"/reference/p5.Gain/connect","alias":"connect"},"p5.Gain.disconnect()":{"relativeUrl":"/reference/p5.Gain/disconnect","alias":"disconnect"},"p5.Gain.setInput()":{"relativeUrl":"/reference/p5.Gain/setInput","alias":"setInput"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.saveObj()":{"relativeUrl":"/reference/p5.Geometry/saveObj","alias":"saveObj"},"p5.Geometry.saveStl()":{"relativeUrl":"/reference/p5.Geometry/saveStl","alias":"saveStl"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.MonoSynth.amp()":{"relativeUrl":"/reference/p5.MonoSynth/amp","alias":"amp"},"p5.MonoSynth.attack":{"relativeUrl":"/reference/p5.MonoSynth/attack","alias":"attack"},"p5.MonoSynth.connect()":{"relativeUrl":"/reference/p5.MonoSynth/connect","alias":"connect"},"p5.MonoSynth.disconnect()":{"relativeUrl":"/reference/p5.MonoSynth/disconnect","alias":"disconnect"},"p5.MonoSynth.dispose()":{"relativeUrl":"/reference/p5.MonoSynth/dispose","alias":"dispose"},"p5.MonoSynth.play()":{"relativeUrl":"/reference/p5.MonoSynth/play","alias":"play"},"p5.MonoSynth.setADSR()":{"relativeUrl":"/reference/p5.MonoSynth/setADSR","alias":"setADSR"},"p5.MonoSynth.triggerAttack()":{"relativeUrl":"/reference/p5.MonoSynth/triggerAttack","alias":"triggerAttack"},"p5.MonoSynth.triggerRelease()":{"relativeUrl":"/reference/p5.MonoSynth/triggerRelease","alias":"triggerRelease"},"p5.Noise.setType()":{"relativeUrl":"/reference/p5.Noise/setType","alias":"setType"},"p5.NumberDict.add()":{"relativeUrl":"/reference/p5.NumberDict/add","alias":"add"},"p5.NumberDict.div()":{"relativeUrl":"/reference/p5.NumberDict/div","alias":"div"},"p5.NumberDict.maxKey()":{"relativeUrl":"/reference/p5.NumberDict/maxKey","alias":"maxKey"},"p5.NumberDict.maxValue()":{"relativeUrl":"/reference/p5.NumberDict/maxValue","alias":"maxValue"},"p5.NumberDict.minKey()":{"relativeUrl":"/reference/p5.NumberDict/minKey","alias":"minKey"},"p5.NumberDict.minValue()":{"relativeUrl":"/reference/p5.NumberDict/minValue","alias":"minValue"},"p5.NumberDict.mult()":{"relativeUrl":"/reference/p5.NumberDict/mult","alias":"mult"},"p5.NumberDict.sub()":{"relativeUrl":"/reference/p5.NumberDict/sub","alias":"sub"},"p5.Oscillator.add()":{"relativeUrl":"/reference/p5.Oscillator/add","alias":"add"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.connect()":{"relativeUrl":"/reference/p5.Oscillator/connect","alias":"connect"},"p5.Oscillator.disconnect()":{"relativeUrl":"/reference/p5.Oscillator/disconnect","alias":"disconnect"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.getAmp()":{"relativeUrl":"/reference/p5.Oscillator/getAmp","alias":"getAmp"},"p5.Oscillator.getFreq()":{"relativeUrl":"/reference/p5.Oscillator/getFreq","alias":"getFreq"},"p5.Oscillator.getPan()":{"relativeUrl":"/reference/p5.Oscillator/getPan","alias":"getPan"},"p5.Oscillator.getType()":{"relativeUrl":"/reference/p5.Oscillator/getType","alias":"getType"},"p5.Oscillator.mult()":{"relativeUrl":"/reference/p5.Oscillator/mult","alias":"mult"},"p5.Oscillator.pan()":{"relativeUrl":"/reference/p5.Oscillator/pan","alias":"pan"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.scale()":{"relativeUrl":"/reference/p5.Oscillator/scale","alias":"scale"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.orient()":{"relativeUrl":"/reference/p5.Panner3D/orient","alias":"orient"},"p5.Panner3D.orientX()":{"relativeUrl":"/reference/p5.Panner3D/orientX","alias":"orientX"},"p5.Panner3D.orientY()":{"relativeUrl":"/reference/p5.Panner3D/orientY","alias":"orientY"},"p5.Panner3D.orientZ()":{"relativeUrl":"/reference/p5.Panner3D/orientZ","alias":"orientZ"},"p5.Panner3D.panner":{"relativeUrl":"/reference/p5.Panner3D/panner","alias":"panner"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rollof()":{"relativeUrl":"/reference/p5.Panner3D/rollof","alias":"rollof"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.Part.addPhrase()":{"relativeUrl":"/reference/p5.Part/addPhrase","alias":"addPhrase"},"p5.Part.getBPM()":{"relativeUrl":"/reference/p5.Part/getBPM","alias":"getBPM"},"p5.Part.getPhrase()":{"relativeUrl":"/reference/p5.Part/getPhrase","alias":"getPhrase"},"p5.Part.loop()":{"relativeUrl":"/reference/p5.Part/loop","alias":"loop"},"p5.Part.noLoop()":{"relativeUrl":"/reference/p5.Part/noLoop","alias":"noLoop"},"p5.Part.onStep()":{"relativeUrl":"/reference/p5.Part/onStep","alias":"onStep"},"p5.Part.pause()":{"relativeUrl":"/reference/p5.Part/pause","alias":"pause"},"p5.Part.removePhrase()":{"relativeUrl":"/reference/p5.Part/removePhrase","alias":"removePhrase"},"p5.Part.replaceSequence()":{"relativeUrl":"/reference/p5.Part/replaceSequence","alias":"replaceSequence"},"p5.Part.setBPM()":{"relativeUrl":"/reference/p5.Part/setBPM","alias":"setBPM"},"p5.Part.start()":{"relativeUrl":"/reference/p5.Part/start","alias":"start"},"p5.Part.stop()":{"relativeUrl":"/reference/p5.Part/stop","alias":"stop"},"isDetected":{"relativeUrl":"/reference/p5.PeakDetect/isDetected"},"p5.PeakDetect.onPeak()":{"relativeUrl":"/reference/p5.PeakDetect/onPeak","alias":"onPeak"},"p5.PeakDetect.update()":{"relativeUrl":"/reference/p5.PeakDetect/update","alias":"update"},"p5.Phrase.sequence":{"relativeUrl":"/reference/p5.Phrase/sequence","alias":"sequence"},"p5.PolySynth.AudioVoice":{"relativeUrl":"/reference/p5.PolySynth/AudioVoice","alias":"AudioVoice"},"p5.PolySynth.connect()":{"relativeUrl":"/reference/p5.PolySynth/connect","alias":"connect"},"p5.PolySynth.disconnect()":{"relativeUrl":"/reference/p5.PolySynth/disconnect","alias":"disconnect"},"p5.PolySynth.dispose()":{"relativeUrl":"/reference/p5.PolySynth/dispose","alias":"dispose"},"p5.PolySynth.noteADSR()":{"relativeUrl":"/reference/p5.PolySynth/noteADSR","alias":"noteADSR"},"p5.PolySynth.noteAttack()":{"relativeUrl":"/reference/p5.PolySynth/noteAttack","alias":"noteAttack"},"p5.PolySynth.noteRelease()":{"relativeUrl":"/reference/p5.PolySynth/noteRelease","alias":"noteRelease"},"p5.PolySynth.notes":{"relativeUrl":"/reference/p5.PolySynth/notes","alias":"notes"},"p5.PolySynth.play()":{"relativeUrl":"/reference/p5.PolySynth/play","alias":"play"},"p5.PolySynth.polyvalue":{"relativeUrl":"/reference/p5.PolySynth/polyvalue","alias":"polyvalue"},"p5.PolySynth.setADSR()":{"relativeUrl":"/reference/p5.PolySynth/setADSR","alias":"setADSR"},"p5.PrintWriter.clear()":{"relativeUrl":"/reference/p5.PrintWriter/clear","alias":"clear"},"p5.PrintWriter.close()":{"relativeUrl":"/reference/p5.PrintWriter/close","alias":"close"},"p5.PrintWriter.print()":{"relativeUrl":"/reference/p5.PrintWriter/print","alias":"print"},"p5.PrintWriter.write()":{"relativeUrl":"/reference/p5.PrintWriter/write","alias":"write"},"p5.Pulse.width()":{"relativeUrl":"/reference/p5.Pulse/width","alias":"width"},"p5.Reverb.amp()":{"relativeUrl":"/reference/p5.Reverb/amp","alias":"amp"},"p5.Reverb.connect()":{"relativeUrl":"/reference/p5.Reverb/connect","alias":"connect"},"p5.Reverb.disconnect()":{"relativeUrl":"/reference/p5.Reverb/disconnect","alias":"disconnect"},"p5.Reverb.process()":{"relativeUrl":"/reference/p5.Reverb/process","alias":"process"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Score.loop()":{"relativeUrl":"/reference/p5.Score/loop","alias":"loop"},"p5.Score.noLoop()":{"relativeUrl":"/reference/p5.Score/noLoop","alias":"noLoop"},"p5.Score.pause()":{"relativeUrl":"/reference/p5.Score/pause","alias":"pause"},"p5.Score.setBPM()":{"relativeUrl":"/reference/p5.Score/setBPM","alias":"setBPM"},"p5.Score.start()":{"relativeUrl":"/reference/p5.Score/start","alias":"start"},"p5.Score.stop()":{"relativeUrl":"/reference/p5.Score/stop","alias":"stop"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.inspectHooks()":{"relativeUrl":"/reference/p5.Shader/inspectHooks","alias":"inspectHooks"},"p5.Shader.modify()":{"relativeUrl":"/reference/p5.Shader/modify","alias":"modify"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.SoundFile.addCue()":{"relativeUrl":"/reference/p5.SoundFile/addCue","alias":"addCue"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.clearCues()":{"relativeUrl":"/reference/p5.SoundFile/clearCues","alias":"clearCues"},"p5.SoundFile.connect()":{"relativeUrl":"/reference/p5.SoundFile/connect","alias":"connect"},"p5.SoundFile.currentTime()":{"relativeUrl":"/reference/p5.SoundFile/currentTime","alias":"currentTime"},"p5.SoundFile.disconnect()":{"relativeUrl":"/reference/p5.SoundFile/disconnect","alias":"disconnect"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.getBlob()":{"relativeUrl":"/reference/p5.SoundFile/getBlob","alias":"getBlob"},"p5.SoundFile.getPan()":{"relativeUrl":"/reference/p5.SoundFile/getPan","alias":"getPan"},"p5.SoundFile.getPeaks()":{"relativeUrl":"/reference/p5.SoundFile/getPeaks","alias":"getPeaks"},"p5.SoundFile.isLoaded()":{"relativeUrl":"/reference/p5.SoundFile/isLoaded","alias":"isLoaded"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPaused()":{"relativeUrl":"/reference/p5.SoundFile/isPaused","alias":"isPaused"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pan()":{"relativeUrl":"/reference/p5.SoundFile/pan","alias":"pan"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.playMode()":{"relativeUrl":"/reference/p5.SoundFile/playMode","alias":"playMode"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.removeCue()":{"relativeUrl":"/reference/p5.SoundFile/removeCue","alias":"removeCue"},"p5.SoundFile.reverseBuffer()":{"relativeUrl":"/reference/p5.SoundFile/reverseBuffer","alias":"reverseBuffer"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.save()":{"relativeUrl":"/reference/p5.SoundFile/save","alias":"save"},"p5.SoundFile.setBuffer()":{"relativeUrl":"/reference/p5.SoundFile/setBuffer","alias":"setBuffer"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.setVolume()":{"relativeUrl":"/reference/p5.SoundFile/setVolume","alias":"setVolume"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.SoundLoop.bpm":{"relativeUrl":"/reference/p5.SoundLoop/bpm","alias":"bpm"},"p5.SoundLoop.interval":{"relativeUrl":"/reference/p5.SoundLoop/interval","alias":"interval"},"p5.SoundLoop.iterations":{"relativeUrl":"/reference/p5.SoundLoop/iterations","alias":"iterations"},"p5.SoundLoop.maxIterations":{"relativeUrl":"/reference/p5.SoundLoop/maxIterations","alias":"maxIterations"},"p5.SoundLoop.musicalTimeMode":{"relativeUrl":"/reference/p5.SoundLoop/musicalTimeMode","alias":"musicalTimeMode"},"p5.SoundLoop.pause()":{"relativeUrl":"/reference/p5.SoundLoop/pause","alias":"pause"},"p5.SoundLoop.start()":{"relativeUrl":"/reference/p5.SoundLoop/start","alias":"start"},"p5.SoundLoop.stop()":{"relativeUrl":"/reference/p5.SoundLoop/stop","alias":"stop"},"p5.SoundLoop.syncedStart()":{"relativeUrl":"/reference/p5.SoundLoop/syncedStart","alias":"syncedStart"},"p5.SoundLoop.timeSignature":{"relativeUrl":"/reference/p5.SoundLoop/timeSignature","alias":"timeSignature"},"p5.SoundRecorder.record()":{"relativeUrl":"/reference/p5.SoundRecorder/record","alias":"record"},"p5.SoundRecorder.setInput()":{"relativeUrl":"/reference/p5.SoundRecorder/setInput","alias":"setInput"},"p5.SoundRecorder.stop()":{"relativeUrl":"/reference/p5.SoundRecorder/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.TypedDict.clear()":{"relativeUrl":"/reference/p5.TypedDict/clear","alias":"clear"},"p5.TypedDict.create()":{"relativeUrl":"/reference/p5.TypedDict/create","alias":"create"},"p5.TypedDict.get()":{"relativeUrl":"/reference/p5.TypedDict/get","alias":"get"},"p5.TypedDict.hasKey()":{"relativeUrl":"/reference/p5.TypedDict/hasKey","alias":"hasKey"},"p5.TypedDict.print()":{"relativeUrl":"/reference/p5.TypedDict/print","alias":"print"},"p5.TypedDict.remove()":{"relativeUrl":"/reference/p5.TypedDict/remove","alias":"remove"},"p5.TypedDict.saveJSON()":{"relativeUrl":"/reference/p5.TypedDict/saveJSON","alias":"saveJSON"},"p5.TypedDict.saveTable()":{"relativeUrl":"/reference/p5.TypedDict/saveTable","alias":"saveTable"},"p5.TypedDict.set()":{"relativeUrl":"/reference/p5.TypedDict/set","alias":"set"},"p5.TypedDict.size()":{"relativeUrl":"/reference/p5.TypedDict/size","alias":"size"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.clampToZero()":{"relativeUrl":"/reference/p5.Vector/clampToZero","alias":"clampToZero"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setContent()":{"relativeUrl":"/reference/p5.XML/setContent","alias":"setContent"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.AudioVoice":{"relativeUrl":"/reference/p5.sound/p5.AudioVoice"},"p5.BandPass":{"relativeUrl":"/reference/p5.sound/p5.BandPass"},"p5.Compressor":{"relativeUrl":"/reference/p5.sound/p5.Compressor"},"p5.Convolver":{"relativeUrl":"/reference/p5.sound/p5.Convolver"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Distortion":{"relativeUrl":"/reference/p5.sound/p5.Distortion"},"p5.EQ":{"relativeUrl":"/reference/p5.sound/p5.EQ"},"p5.Effect":{"relativeUrl":"/reference/p5.sound/p5.Effect"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Filter":{"relativeUrl":"/reference/p5.sound/p5.Filter"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.HighPass":{"relativeUrl":"/reference/p5.sound/p5.HighPass"},"p5.LowPass":{"relativeUrl":"/reference/p5.sound/p5.LowPass"},"p5.MonoSynth":{"relativeUrl":"/reference/p5.sound/p5.MonoSynth"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.OnsetDetect":{"relativeUrl":"/reference/p5.sound/p5.OnsetDetect"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.Part":{"relativeUrl":"/reference/p5.sound/p5.Part"},"p5.PeakDetect":{"relativeUrl":"/reference/p5.sound/p5.PeakDetect"},"p5.Phrase":{"relativeUrl":"/reference/p5.sound/p5.Phrase"},"p5.PolySynth":{"relativeUrl":"/reference/p5.sound/p5.PolySynth"},"p5.Pulse":{"relativeUrl":"/reference/p5.sound/p5.Pulse"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.Score":{"relativeUrl":"/reference/p5.sound/p5.Score"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SoundLoop":{"relativeUrl":"/reference/p5.sound/p5.SoundLoop"},"p5.SoundRecorder":{"relativeUrl":"/reference/p5.sound/p5.SoundRecorder"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"}},"tutorials-fallback":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Chatting with/about Code":{"relativeUrl":"/tutorials/criticalAI1-chatting-with-about-code","description":"Using generative AI to code with p5.js"},"Critical AI Prompt Battle":{"relativeUrl":"/tutorials/criticalAI2-prompt-battle","description":"Build a tool to compare generative AI prompts"},"Critical AI Sentiment Dataset Explorer":{"relativeUrl":"/tutorials/criticalAI3-sentiment-dataset-explorer","description":"Examine the datasets that run AI tools"},"Critical AI No-AI Chatbot":{"relativeUrl":"/tutorials/criticalAI4-no-ai-chatbot","description":"Make an interactive chatbot without using any AI"},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to GLSL":{"relativeUrl":"/tutorials/intro-to-glsl","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU using GLSL."},"p5.strands: Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-p5-strands","description":"An introduction to shaders using p5.strands"},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
+{"contributor-docs":{"Estructura del directorio del proyecto\n":{"relativeUrl":"/contribute/README","description":"Help is needed translating these Developer Docs to Spanish and other languages [See this link for more info!](https://github.com/processing/p5.js/issues/4137/) ¡Hola ¡Gracias interés contribuir p5js comenzar formas [aquí](https://p5js.org/community/#contribute). carpeta contiene documentos destinados desarrolladores * `src /` código fuente biblioteca organizado temas módulos separados trabajará cambiando `lib versión destinada usuarios carguen bocetos proyectos incluidos formularios comprimidos salida [Grunt](https://gruntjs.com/) compila archivo `contributor_docs Markdown probablemente útiles particular explican prácticas principios `docs realidad utilizado \\* generar [manual referencia línea](https://p5js.org/reference/). `tests pruebas unitarias aseguran continúe funcionando correctamente medida realizan cambios `task scripts tareas automatizadas relacionadas compilación implementación lanzamiento versiones `parches contener [parches Git](https://git-scm.com/docs/git-format-patch/) casos ignorar completo directorio"},"Nuestro enfoque en el acceso\n":{"relativeUrl":"/contribute/access","description":"{/* significa compromiso acceso colaboradoras usuarias biblioteca */} [Conferencia Colaboradores 2019](https://p5js.org/community/contributors-conference-2019.html), p5js comprometió agregar características aumenten inclusión accesibilidad aceptaremos solicitudes respalden esfuerzos comprometemos reconocer desmantelar prevenir barreras implica considerar experiencias interseccionales[^1] diversidad afectar participación incluyen alineaciones género raza etnia sexualidad idioma ubicación etcétera centramos necesidades grupos marginados comodidad continuada privilegiados comunidad explorando colectivamente significado aprendiendo practicar enseñar Elegimos pensar marcos expansivos interseccionales coalición valores fundamentales delineados [Declaración Comunitaria](https://p5js.org/about/#community-statement). ## Tipos Aumentar expandir número neto personas continuo disponible accesible excluidas consecuencia opresión estructural extiende herramientas plataformas ofrece incluye composición toma decisiones acciones liderazgo resistimos cultura tecnológica velocidad crecimiento competencia Damos prioridad intencionalidad lentitud adaptación responsabilidad actos cuidado colectivo equitativo * Personas idiomas distintos inglés negras indígenas color etnias marginadas lesbianas gays bisexuales queer cuestionamiento pansexuales asexuales trans fluido agénero intersexuales espíritus mujeres géneros ciegas s/Sordas[^2] dificultades auditivas discapacitadas/con discapacidad neurodivergentes enfermedades crónicas[^3] bajos ingresos falta capital financiero cultural experiencia previa código abierto programación creativa diversos trasfondos educativos edad incluidos niños ancianos variedad habilidades tecnológicas internet religiosos sistemáticamente históricamente subrepresentadas intersecciones Reconocemos complejidad términos utilizados describir respectivas identidades lenguaje matizado evolutivo controvertido lista exhaustiva nombrar rendir cuentas compromisos diversas ### Ejemplos ejemplos creemos aumentan Traducir documentación materiales descentralizando imperialismo lingüístico[^4] [Processing kuna](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/) Rolando Vargas [Pê Internacionalización popularización hablantes portugués](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/) Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancino Mejorar soporte tecnologías asistencia lectores pantalla [Agregar texto alternativo p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/) Katie Liu [Proyecto p5](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/) Claire Kearney-Volpe Seguir [Pautas Contenido Web](https://www.w3.org/TR/WCAG21/) facilitar usuarios sigan proyectos mensajes error útiles sirvan apoyo herramienta [Sistema errores amigable FES siglas inglés)](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)) Tutoría estudiantes comunidades artes digitales Organizar eventos comunitarios [Día 2022](https://p5js.org/community/p5js-access-day-2022.html) [La web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/)) tácticas organización centradas interpretación ASL subtitulado vivo lugares accesibles Apoyar creación recursos [A11y Syllabus](http://a11ysyllabus.site/) Adekemi Sijuwade-Ukadike Publicar informes directrices WCAG utilicen sencillo centren principiantes [Informe OSACC p5.js](https://github.com/processing/OSACC-p5.js-Access-Report/)) Mantenimiento aceptando esfuerzo aumentar Verás criterio reflejado plantillas *issue* *pull request* afirmamos intención mantener conjunto existentes gustaría corregir independientemente encuentren base Creemos consistencia mejoran Aumentos rendimiento hardware potente Soporte dibujar-en/leer-desde *framebuffers* Consistencia API Agregar arcVertex crear arcos beginShape/endShape *** favor documento conversación priorizar continua Invitamos participar describe ideas sugerencias invitamos compartirlas Github enviando correo electrónico [hello@p5jsorg]mailtohello@p5jsorg versión declaración revisada colaboración Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Conferencia Artes Código Abierto finalizada publicada Beca Fundación Processing [^1] Crenshaw Kimberlé Demarginalizing the intersection of race and sex black feminist critique antidiscrimination doctrine theory antiracist politics \\[Desmarginalizando intersección sexo crítica feminista negra doctrina antidiscriminatoria teoría política antirracista] University Chicago Legal Forum 139–167 ISSN 0892-5593 Texto completo Archiveorg [^2] mayúscula Sordo refiere culturalmente Sordas Sorda minúscula sordo término audiológico asociadas identidad [^3] preferencias persona vs discapacidades [Desempaquetando debate autista inglés)](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/) [Soy discapacitado inglés)](https://thebodyisnotanapology.com/magazine/i-am-disabled-on-identity-first-versus-people-first-language/). [^4] lingüístico dominación/priorización/imposición expensas nativos expansión imperial globalización"},"Contribuir a la referencia de p5.js\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write and edit p5js reference using the right format */} creamos referencias código ves página [referencia](https://p5js.org/reference/) sitio web incluyéndolas fuente biblioteca comentarios especializados referencia incluyen descripción firma función parámetros retorno ejemplos palabras contenido función/variable construye documento mostrará escribir formatear eventualmente puedan renderizados correctamente Debes seguir guía editando escribiendo variable ## introducción rápida funcionamiento mires verás líneas ven ``` /** * Calculates sine of an angle `sin` is useful for many geometric tasks in creative coding The values returned oscillate between -1 as input increases takes into account current angleMode @method @param {Number} @return @example function draw { background200 let = frameCount sint + linex circlex describe'A white ball on string oscillates up down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ seguidos JavaScript real define comienzan `/**` terminan `*/` línea `*` inicio cosa bloque interpretará documentación familiarizado estilo [JSDoc](https://jsdoc.app/). JSDoc utiliza herramienta llamada [YUIDoc](https://yui.github.io/yuidoc/) sintaxis similar subdivide elementos individuales veremos continuación Bloque Desglosemos veamos sección Puedes comparar [`sin()`](https://p5js.org/reference/p5/sin/). superior comentario textual contener markdown HTML concisa describir necesario detalles peculiaridades comportamientos normalmente secciones anteriores comenzando símbolo `@` seguido siguientes clave `@method` definir nombre caso nota incluye paréntesis `` `@param` argumentos acepta palabra almacenado llaves `{}` tipo parámetro resto `@return` formato genérico {type} name Description here opcional agrega corchetes [name] ### Información adicional Constantes toma valores definidos [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), especificarse `{Constant}` válidos enumerarse `either` {Constant} horizAlign horizontal alignment either LEFT CENTER or RIGHT tipos debes data puedes omitir etiqueta Encadenamiento método devuelve objeto superclase agregar @chainable Firmas adicionales múltiples opciones posibles especificar individualmente [`background()`](https://p5js.org/reference/#p5/background/) serie Sintaxis Elige versión incluirla usando plantilla firmas background {String} colorstring color possible formats include integer rgb rgba percentage 3-digit hex 6-digit [a] alpha value gray specifies Múltiples crear separada única diferencia adición Limita medida ruido innecesario Referencia variables visto funciones constantes siguen estructura etiquetas system mouseX always contains position mouse relative to canvas at top-left corner 2-D -width/2 -height/2 WebGL If touch used instead will hold most recent point @property @readOnly // Move across background244 linemouseX describe'horizontal line moves left with x-position' contiene `mouseX` `@property` `@readonly` presente mayoría internamente indicar sobrescrito directamente usuario Agregar discutido `@example` defines ejecuta visitas [Screenshot page red showing only example code section]src/content/contributor-docs/images/reference-screenshotpng crea const color255 fillc rect15 Sets redValue redc fillredValue rect50 describe Two rectangles edges rectangle yellow one comenzar seguida apertura cierre insertarás cuestión principio básico mantener simples mínimas significativo explicar funciona valga redundancia complicado lienzo 100x100 pixeles `setup` incluida envuelto automáticamente predeterminado fondo gris píxeles entraremos prácticas consulta justo cerrado separados blanco arc50 PI QUARTER_PI OPEN describe'An ellipse created arc its top open' describe'The bottom half arc' deseas ejecute quieres muestre clase `norender` describe'ellipse pruebas automatizadas requiere interacción `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' archivos externos recursos colócalos carpeta [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) reutiliza enlázalos assets/nombrearchivoext Consulta [tint()](https://p5js.org/reference/p5/tint/) `describe` añadas utilices accesible lectores pantalla Incluye cadena sucediendo xoff background204 noisexoff width linen height vertical randomly from right' noiseScale background0 obtener información visita [documentación accesibilidad contribuyentes](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions). deberías herramientas necesarias editar usos encontrar útiles situaciones específicas necesites frecuencia Etiqueta `@private` propiedad privada característica marcada renderizará razón marcar privado documentar características internas `_start` _start calls preload @private p5prototype_start `@module` relacionadas archivo módulos corresponden grupo renderizar dividen correspondientes módulo submódulos `@submodule` `@for` relación `p5` indicando efectivamente `@requires` depende actual importar @module Color @submodule Creating Reading @for p5 @requires core constants convención subcarpeta `src/` añadiendo subcarpetas/archivos necesitar `@class` constructores clases definen `@class`y `@constructor` definirse indicará constructora Mira `p5Color` class Each object stores mode level maxes that were active during construction These are interpret arguments passed object's constructor They also determine output formatting such when saturation called stored internally array ideal RGBA floating normalized calculate closest screen colors which levels Screen sent renderer When different representations calculated results cached performance floating-point numbers recommended way create instance this @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals containing green blue channel CSS Generando previsualizando repositorio configurado puedas generar previsualizar necesidad compilar ejecutar comando principal npm run docs generará vista previa necesarios `docs/reference/datajson` minificación utilizará continuamente docsdev lanzará vivo cuyo renderizado actualizará realices cambios necesitarás actualizar verlos aparecer útil especialmente ejecutan navegador principales almacenan `docs/` casos añadir `docs/yuidoc-p5-theme/assets` Siguientes pasos sistema consultar [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). problemas relacionados echa vistazo [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [pautas contribuyentes](https://github.com/processing/p5.js/blob/main/contributor_docs/es/contributor_guidelines.md)"},"Instrucciones para colaboradores\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information about contributing to p5js on GitHub */} ¡Bienvenidos documento diseñado ayudar contribuidores deseen aportar código biblioteca busquen refrescar conocimientos procedimientos técnicos útil persona interesada tipo contribución buscando contribuir allá repositorios escribiendo tutoriales planeando clases organizando eventos favor consulta documentación correspondiente colaboraciones Supervisores Responsables mantenimiento encontrarán referirse [Instrucciones Supervisores](https://github.com/processing/p5.js/blob/main/contributor_docs/es/steward_guidelines.md) revisar Issues problemas Pull Requests' relativamente integral trataremos indicar pasos Utiliza tabla contenidos encontrar secciones relevantes siéntete libre omitir contribuciones planeas **Si contribuidor sugerimos comenzar sección acerca simplemente quieres configuración paso-a-paso proceso desarrollo puedes dirigirte Inicio Rápido Desarrolladores** Tabla Contenidos * [Todo problemas]#todo-acerca-de-los-issues-o-problemas [¿Qué GitHub]#qué-son-los-issues-en-github/ [Plantillas reportar Issues']#plantillas-para-reportar-issues [Reportar error]#reportar-un-error [Sugerir mejora funcionalidad existente]#sugerir-una-mejora-a-una-funcionalidad-existente nueva]#sugerir-una-funcionalidad-nueva [Abrir discusión ]#abrir-una-discusión/ [Trabajando base p5js]#trabajando-en-la-base-de-código-de-p5js/ [Inicio Desarrolladores]#inicio-rápido-para-desarrolladores/ [Utilizando edición Github]#utilizando-la-funcionalidad-de-edición-de-github/ [Haciendo fork trabajando fork]#haciendo-un-fork-de-p5js-y-trabajando-desde-tu-fork Github Desktop]#utilizando-github-desktop interfaz línea comandos Git]#utilizando-la-interfaz-de-línea-de-comandos-de-git/ [Desglose ]#desglose-de-la-base-de-código/ [Configuración compilación]#configuración-de-compilación/ [Flujo Git]#flujo-de-trabajo-de-git [Código fuente]#código-fuente/ [Pruebas unitarias]#pruebas-unitarias [Documentación línea]#documentación-en-línea/ [Internacionalización](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#internationalization) [Accesibilidad]#accesibilidad [Estándares código]#estándares-de-código/ [Principios Diseño Software]#principios-de-diseño-de-software/ [Pull Requests]#pull-requests [Creación Request]#creación-de-un-pull-request/ [Información Request]#información-sobre-el-pull-request/ [Titulo]#titulo [Resuelve]#resuelve [Cambios]#cambios [Captura pantalla cambios]#captura-de-pantalla-de-los-cambios [Lista verificación Request]#lista-de-verificación-del-pull-request/ [Rebase resolución conflictos]#rebase-y-resolución-de-conflictos/ [Discutir Corregir]#discutir-y-corregir *** mayoría actividad conocidos repo forma abreviada ocurre Issues' excelente viaje ## ¿Qué [A cropped screenshot of the library repository only showing contents top right corner red box is drawn surrounding tab]src/content/contributor-docs/images/issues-tabpng nombre común publicación apunta describir problema reportes error solicitudes añadir relacione Cualquiera comentarios Issue ¡incluyendo bots discuten temas relacionados proyecto repositorio creado razones usualmente utilizamos creación discutir fuente Temas corrección errores invitación colaboradores discutidos [foro](https://discourse.processing.com) plataformas comunicación [Discord](https://discord.gg/SHQ8dH25r9/). ¡Hemos plantillas fáciles ayudarte determinar tema adecuado publicado apropiado publicarlo Plantillas sencillo responsables entender contenido sugerido colaborador facilitan completar permiten recibir respuesta rápida [Screenshot an example what issue looks like The title in Warning being logged Safari when using filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng registrar haz click pestaña ubicada superior página clic botón New costado derecho presentarán opciones plantilla dirigir recomendamos elegir relevante caso asegurarte reciba rápidamente atención correcta [Cropped repository's page with green button highlighted it]src/content/contributor-docs/images/new-issuepng ### Error\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encuentres comportamiento incorrecto comportando descrito \\[usa plantilla]\\/ [https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml)). ten tratado corregir sketch boceto crees \\[foro discusiones]\\/ [https://discourse.processing.org/](https://discourse.processing.org/)) provee campos debes llenar información **¿Cuál subárea adecuada p5js** añadirá automáticamente \\[etiquetas]\\/ [https://github.com/processing/p5.js/blob/main/contributor\\_docs/issue\\_labels/](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels/)) ayudará identificar responder adecuadamente **Versión Puedes verificar versión etiqueta `` archivo p5js/p5minjs Opcionalmente \\[editor p5js]\\/ [https://editor.p5js.org/](https://editor.p5js.org/)), Ayuda Acerca podrás lucirá `191`tres números separados punto **Navegadores web mismos** ayuda diversos comportamientos navegadores navegador instrucciones proporcionadas utilizando Chrome Firefox Abre ventana barra direcciones navega `chrome//version` `aboutsupport` venta menú aparecerá desplegable deberás seleccionar **Sistema Operativo** incluye Sistema Operativo `macOS 125` derivar sistema operativo **Pasos reproducir error** piezas importantes Comparte lista detallados replicar encontrado Compartir muestra exponga cualquiera busque enfrentando formular solución **¡La replicación clave** objetivo proveas fácil comunidad buscar **Sé detallado evita afirmaciones genéricas** digas función `image` funciona específico imagen GIF cargada tamaño correcto mencionando siguientes aspectos esperas compartido esperado presente deseas reportado indícalo descripción proveer sugerencias corregido apoyo necesitas **No Request cambios registrado aprobado implementación** propuesta aceptada requerir enfoque completamente real registre cerrado previamente reporte aceptado \\[Supervisor área Responsable mantenimiento]\\/ [https://github.com/processing/p5.js#stewards](https://github.com/processing/p5.js#stewards)), existente](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) usada proponer sugerir mejoras existente funciones constantes renderización etc quisieras definir color `color` acepten colores utilizar **Mejorar accesibilidad** campo requerido explicar adición cambio \\[mejorar accesibilidad]\\/ [https://github.com/processing/p5.js/blob/main/contributor\\_docs/access/](https://github.com/processing/p5.js/blob/main/contributor_docs/access/)) personas históricamente marginadas disciplinas artes tecnologías **Es importante destacar declaración** obstante dudas incluir seguro conversación comprender abordar eficazmente mejorar accesibilidad **Detalles funcionalidad** generalmente necesaria propuestas aceptadas aprobadas comience garantía nueva\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) imagina soporte dibujar elementos HTML llame `createTable` superpone existentes evalúes elijas consideres apropiada aprobada \\[Supervisores discusión](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) utiliza registrando encaja anteriores corresponda inusual adoptar API específica debería registrarse ['Sugerir modos registrada \\[Sugerir existente]\\/ #sugerir-una-mejora-a-una-funcionalidad-existente Finalmente anuncio evento local programación foro inclusive podrías contactar Fundación Processing publicidad abrir panel Etiquetas encontraras agregar etiquetas consiste abierto permite \\[aquí]\\/ [https://github.com/processing/p5.js/issues/6517/](https://github.com/processing/p5.js/issues/6517/)) [**⬆ Volver arriba**]#instrucciones-para-colaboradores Trabajando Pre-requisitos proceder conocimiento mínimo git nodejs configurado entorno Introducción discutido implementación dispuesto listo empezar participado discusiones supervisores autor original miembros indicado dispuestos ofrecerte voluntario enviar solicitar asignen saltarte fila** llenando alguien interés asignado daremos prioridad orden asignación aceptar abres notas meses asignada dejando comentario amable preguntes progreso ofrezcas Generalmente permitimos período puedan entendemos voluntarios desarrollar trabajes ritmo fecha límite estricta debas entregar aspecto dudes pedir ¡Haremos guiarte Desarrolladores 🌸 desarrollador directamente mejorando subproyectos [Friendly Error Systems](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md), seguir [Crea copia p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clona crea local.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Configura sincronice suele nombrarse upstream comando terminal.](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote add https://github.com/processing/p5.js Asegúrate [node.js](https://nodejs.org/en/download/) instalado computador terminal node -v Instala dependencias necesarias npm ci Crea rama `main` descriptivo crear checkout -b [branch_name] medida comiences ejecuta pruebas frecuentemente toma garantiza deteriorando test Añade unitarias funcionalidades terminado commit Request]#pull-requests Utilizando viendo revisando vas icono lápiz proporciona conveniente simplifica procesos cubriendo simples archivos file view src/color/color\\_conversionjs arrow pointing pencil icon side image]src/content/contributor-docs/images/edit-filepng recomendado trate principales adicionar complejos compilados validados localmente registrados fluido comparación básico paso Forking definición especifica Open Source Código Abierto propósito significa Fork creará main labeled and 593k outlined dark orange]src/content/contributor-docs/images/forkpng necesario acceso directo oficial permitirá modificaciones enviarlas vuelta Desktop programa usuario gráfica escribir opción alternar conveniencia \\[descarga instala Desktop]\\/ [https://desktop.github.com/](https://desktop.github.com/)). abre aplicación pedirá inicies sesión iniciado hará proyectos incluyendo Selecciona `tuUsuario/p5js` azul Clone clonar preguntar detalles ubicar cambiar ubicación continuar predefinida [The user interface after signing On half screen it lists your projects bottom right]src/content/contributor-docs/images/github-desktop-initpng clonado To contribute parent project Contribuir Continuar cloning It asks if you are planning or use for own purposes]src/content/contributor-docs/images/github-desktop-forkpng Git *fork* URL verde *Code* Debería `https://github.com/limzykenneth/p5.js.git` list files landing Code orange outline]src/content/contributor-docs/images/code-buttonpng ve clona Clonar descargar máquina Corre carpeta quieras almacenar clone [git_url] Sustituye `[git_url]` acabas copiar minutos dependiendo velocidad conexión internet ¡un preparar café finalice descargaste llamada `p5js` editor preferido explorar Desglose carpetas clave encontrarás `src` - reside eventualmente combina finales p5minjs [`test`](https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md) encuentran probar ejemplos `tasks` compilación personalizado `Gruntfilejs` principal `contributor_docs` configuraciones tipos casos modificación Configuración cosa necesitarás configurar construir ejecutar Suponiendo probable lleve descarga simple ¿verdad Flujo liste necesarios partes subsecciones continuación compilar cero completarse run build construirá `lib/` `p5minjs` creados hagas aparte *branch* indica ramificada *commits* afectar *main* ramas múltiples aisladas confianza cometes afectará Rama Actual ingresar propósitos ingresa describa realizarás Crear branch selection menu After entering new name that does not yet exist Create Branch appears]src/content/contributor-docs/images/github-desktop-create-branchpng ejecuta`git branch_name` sustituyendo `branch_name` separada realizas ejecutes `npm test` frecuencia especialmente Ejecutar llevará asegura rompan pasar *commit* confirmación describe colección guardados esencialmente registra actual pregunta surgir ¿con deberías preferible esfuerces agrupar pauta completado subtarea describirse frase actuales Mostrará modificado lateral izquierda específicos derecha Escribe alto nivel esquina inferior título dejarlo blanco Haz Commit finalizar having made change area where need write circled lower left window]src/content/contributor-docs/images/github-desktop-commitpng confirmar Verifica enumeren cambiado status enumerados [restaurar](https://git-scm.com/docs/git-restore/) intencionados mostrar diff intención Organiza -m [your_commit_message] `[your_commit_message]` reemplazado mensaje evitando descripciones genéricas `Documentation fix 1` di `Add documentation circle function` Add function Repite commits aseguras regularidad funcione características visitar documentada enlace reference website containing sentence Notice any errors typos Please let us know feel free edit src/core/shape/2d\\_primitivesjs pull request Part above says underline it]src/content/contributor-docs/images/reference-code-linkpng Pruebas [aquí](https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md). Ten correcciones cubren implementaciones incluidas PR Documentación [aquí](https://p5js.org/contribute/contributing_to_the_p5js_reference/). Accesibilidad revisa [aquí](https://github.com/processing/p5.js/blob/main/contributor_docs/web_accessibility.md). amigable [acá](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md). Estándares estándar estilo aplica [ESLint](https://eslint.org/). *pull request* sigas codificación extensión ESLint disponible texto resaltado editores populares Principios Software característica principios diseño prioridades diferir vienes familiarices **Acceso** Priorizamos decisiones tomamos aumenta grupos marginados Lee declaración **Amigable principiantes** programadores principiantes brinda interactivo visual HTML5/Canvas/DOM avanzadas **Educativo** centra plan estudios respalda educativo referencia completa planes estudio introducen básicos creativa atractivo **JavaScript comunidad** busca prácticas accesibles modelando patrones adecuados JavaScript abstrae librería amplia difusión **Processing inspira lenguaje transición Java clara volver arriba**]#contributor-guidelines Requests corresponde fusionen formalmente solicitud extraer fusionar bifurcado historial Creación subir piensa remota justo committing changes push online red]src/content/contributor-docs/images/publish-branchpng subido mostrará vista previa realmente Presiona iniciar pushing code In sidebar changed items pane below header blue Review been marked up circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin subida veas navegar Abrir command line response includes link open request]src/content/contributor-docs/images/new-branchpng visites funcionará section near yellow call action text Compare request]src/content/contributor-docs/images/recent-pushespng Información prepopulated p5js's template]src/content/contributor-docs/images/new-prpng Titulo brevemente Resuelve `Resuelve #[Agregar número aquí]` reemplazar `[Agregar *issue* abordando/solucionando [arriba](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#all-about-issues) #1234` asegurará cierre fusionado cerrar separado cambia `Resuelve` `Aborda` Cambios Debes claramente extracción Incluye detalle tomado revisará Captura opcional circunstancias incluirse renderiza visuales *canvas* lienzo captura *sketch* Lista Contiene marcar reemplazando `[ ]` `[x]` Rebase conflictos Fix shaders rectMode applied tests #6603]src/content/contributor-docs/images/opened-prpng inspeccionar prestar coincidir trabajabas Commits Archivos cambiados resolverse esperabas necesites [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) resolver significan aplicado recientemente conjunto mantener dejar avísanos guiaremos básicas mostrándote `Resolver conflictos` merge conflicts conflicting filenames listed there Resolve highlighted]src/content/contributor-docs/images/resolve-conflictspng muestran `>>>>>>` `=======` GitHub's conflict resolution contains markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Elimina marcadores conflicto conserva Marcar resuelto editing remove mark as resolved upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng resueltos all have enabled]src/content/contributor-docs/images/commit-mergepng complicados muestre prefieres método manual Ejecuta `git https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` ¡Es lib/p5js lib/p5minjs arreglar construye nuevamente resolverlos ¡pide --continue push` comprobación borre Discutir Corregir supervisa mantiene supervisor paciencia ¿Por aprovechar *issues* abiertos revisado suceder fusionada ¡yuju administra preguntas entres pánico perfectamente normal ¡y solicitan [mismo antes](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#git-workflow) continúa realiza súbelos remoto adicionales verás aparecen Deja informar revisor solicitados necesitan ¡tu"},"Directrices para Supervisores\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn about how to manage and review contributions p5js */} recién unido supervisor responsable mantenimiento experimentado punto intermedio guía contiene información consejos trucos ayudarán contribuir efectiva escribe pautas indique contrario significa puedes adaptar prácticas mostradas ajusten flujo ## Tabla Contenidos * [Issues]/steward_guidelinesmd#issues [Informe Errores]/steward_guidelinesmd#informe-de-errores [Solicitud Funcionalidades]/steward_guidelinesmd#solicitud-de-funcionalidades [Mejora Funcionalidades]/steward_guidelinesmd#mejora-de-funcionalidades [Discusión]/steward_guidelinesmd#discusión/ [Pull Requests]/steward_guidelinesmd#pull-requests [Corrección Sencilla]/steward_guidelinesmd#correción-sencilla/ Error]/steward_guidelinesmd#corrección-de-error/ [Nuevas Funcionalidades/Mejora Funcionalidades]/steward_guidelinesmd#nuevas-funcionalidades/Mejora-de-funcionalidades/ [Dependabot]/steward_guidelinesmd#dependabot [Proceso Construcción]/steward_guidelinesmd#proceso-de-construcción/ [Tarea Principal Construcción]/steward_guidelinesmd#tarea-principal-de-construcción/ Variada]/steward_guidelinesmd#tarea-variada Lanzamiento]/steward_guidelinesmd#proceso-de-lanzamiento [Consejos Trucos]/steward_guidelinesmd#consejos-y-trucos [Plantillas Respuesta]/steward_guidelinesmd#plantillas-de-respuesta [GitHub CLI]/steward_guidelinesmd#github-cli [Gestión Notificaciones]/steward_guidelinesmd#gestión-de-notificaciones/ *** *Issues* Alentamos mayoría contribuciones código fuente comenzar *issue* *issues* discusiones pasos seguir revisar dependerán tipo repositorio utiliza GitHub](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/), organizar tipos alentar autores proporcionar relevante paso plantilla completada determinar necesita adicional campos completaron utilizó incorrecta ### Informe Errores informes errores deberían utilizar *Issue* Found bug típico abordar Replicar error objetivo suficiente revisor intente replicar cuestión reportado abrió p5js-website Transfiera acceso deje comentario debería presentarse informe enlace directo proporcionado cierre verificar proporciona descrito necesario discusión solucionar particular directootras complicado favor consulte [principios diseño p5js]/design_principles/ tomar decisión caso autor dispuesto solución Apruebe dejando asignándoles Utilice botón engranaje derecho Assignee desea Deje reconociendo Intente solucionarlo agregue etiqueta `help wanted` señalar Solicite versión navegador sistema operativo etc entorno prueba difiere informa ejemploun diciendo específico Agregue incidente pida alguien configuración especificada *bugs* ocurren editor web probar localmente redirigido [repositorio web](https://github.com/processing/p5.js-web-editor/). replicación regrese origina usuario proporcionó comportamiento Determine documentación implementación amigable mejorarse evitar cometa Redirija amablemente pregunta [foro](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) cambios Solicitud Funcionalidades solicitar funcionalidades New Feature Request solicitudes función compromiso aumentar solicitud justificar aumenta comunidades históricamente marginadas campo detalles disponibles [aquí]/access/ funcionalidad suficientemente completado Increasing Access Aumento Acceso preguntar declaración proporcionada miembro comunidad incluidos revisores evaluada inclusión base siguientes criterios ¿La encaja alcance proyecto principios diseño]/design_principles/ agregar forma primitiva dibujo considerada adoptar protocolo Internet basado probablemente relativamente estrecho exceso características utilizadas sugiere implemente biblioteca complementaria idea sugerir concepto ayuda usuarios concreto importancia necesariamente completa completamente integrada integrarse núcleo corresponde ¿Es probable propuesta cause cambio incompatible ¿Entrará conflicto variables existentes *sketches* bocetos típicos escritos causen conflictos mencionadas anteriormente consideran incompatibles [Lanzamiento mayor](https://docs.npmjs.com/about-semantic-versioning/),no deberíamos ¿Se lograr utilizando p5jscódigo JavaScript nativo simple bibliotecas fáciles unir matriz cadenas `join[Helloworld]` preferirse `[Helloworld]join` requisito consideraciones cumplidas supervisores responsables aprobar comience PR proceso revisión *pull request* documentado continuación Mejora mejora incidentes Existing Enhancement Existentes similar diferencia *new feature *feature Funcionalidad confusa solicitando adición Similar mejoras aceptadas aumentan consulta [sección anterior]/steward_guidelinesmd#feature-request similares prestar especial atención posibles modificando firmas válidas documentadas previamente comportarse aprobadas Discusión mínima utilizada recopilar comentarios retroalimentaciones tema consolidarlo cerrarse finaliza conversación creado específicos resultantes abre *bug report* aplicar correcta quitar discussión incluido contribución repositorios GitHub redirigidos foro Discord cerrado etiquetas adicionales mirarla *Pull Requests* realizan Pull *push access* escritura anima > pull request encontrar [Aquî](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). requests asociados abiertos discutidos los[flujos mås relevantes ]/steward_guidelinesmd#issues seguidos revisada únicas instancias aplica correcciones menores tipográficos requieren abierto fusionadas persona *merge* fusionar área excepción aplicaremos práctica siga alentando contribuyentes abrir palabras dudas simplemente modos requestno resuelve referenciado editar publicación original cambiar Resolves #OOOO Addresses automáticamente aplique fusione Correción Sencilla Correcciones simples corrección pequeño tipográfico fusionarse directamente revisa pestaña Files Changed asegurarte automatizada integración continua CI [The files changed tab when viewing on GitHub]src/content/contributor-docs/images/files-changedpng All checks have passed indicator highlighted above the merge button]src/content/contributor-docs/images/all-checks-passedpng Corrección Error *Bug fixes* revisado idealmente aprobó inicialmente *fix* ccorrección implementa Debería probada CLI ayudar agilizar abajo trucos]/steward_guidelinesmd#tips-tricks [ ] existente acuerde impacto significativo rendimiento accesibilidad estándar moderno codificación pasar pruebas automatizadas incluir tests línea líneas describió [aquí](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). bloque sugerencias usado específicos\\ Suggest Change button while writing comment code in request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested change appearing within fences with suggestion tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed as diff]src/content/contributor-docs/images/suggestion-previewpng múltiples agregues procedimiento [aquí](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) aclaraciones elige Comment changes\\ option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng requieran marcar Aprobada eligiendo opción Approve access fusión bot @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) llamado colaborador lista colaboradores archivo READMEmd indicado `[contribution` `type]` `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` funcionalidades/Mejora feature* funcionalidadeso *feature\\_enhacement* errorespero notable aprobada fusionada Dependabot requests* generalmente visibles administradores omite sección actualización [semver](https://semver.org/) parche semver menor pase recomienda rápida verificación registro dependencia actualizada principal afectar compilación actual asegurarse procesos funcionando disruptivos dependencias números principales dejan admitir oficialmente versiones antiguas Nodejs casos implican API Proceso Construcción cubrirá construcción comandos sucede escena Consulta [directrices administradores]/contributor_guidelinesmd#working-on-p5js-codebase obtener detallada Gruntfilejs definiciones herramientas construir incluyen limitan Grunt Browserify YUIDoc ESLint Babel Uglify Mocha útil tarea `default` retroceder documento explicación Tarea ``` gruntregisterTask'default' ['lint' test'] ejecutamos `grunt` script npm `npm test` predeterminada consiste `lint` `test` #### gruntregisterTask'lint' ['lintsource' lintsamples'] sub tareas `lintsource` `lintsamples` subdividida `eslintbuild` `eslintsource` `eslinttest` utilizan scripts ejecutará `yui` `yuidocprod` `cleanreference` `minjson` extraen JSON eliminan archivos utilizados minifican generado \\`dataminjson respectivamente `eslint-samplessource` escrita personalizada cuya definición [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convención resto ejecuta necesitamos construya podamos lint ejemplos ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport veamos `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest comienzan `browserify` definidas [/tasks/build/browserifyjs]/tasks/build/browserifyjs siguen diferencias numerosos construye `browserifymin` minificado datos necesarios funcione FES `uglify` toma salida minifica p5minjs `browserifytest` construyendo idéntica informar cobertura usando [Istanbul](https://istanbul.js.org/)). nodejs `fsreadFileSync` reemplazado contenido real `brfs-babel` WebGL insertar shader separados incluidas node\\_modules transpila cumplir [Browserslist](https://browsersl.ist/) definido packagejson convertir declaraciones importación ES6 `require` CommonJS browserify comprende permite sintaxis disponible allá preocupación compatibilidad empaquetar empaquetado escriba pasa `pretty-fast` destinado limpiado formato consistente anticipamos leer inspeccionar omiten detallados pequeños vinculado connectserver inicia servidor local aloja construidos puedan ejecutarse Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Utiliza Puppeteer iniciar interfaz controlada remota asociadas HTML carpeta `/test` incluye minificar minificada conjuntos unitarias referencia mochaTest `mochaChrome` subconjunto requerirán conjunto ampliarse realmente necesitan Finalmente construcciones completas recopilará probando mostrará consola monitorear puntos 100% ¡Y cubre Variada `npx grunt [step]` mencionan útiles yuidev descritas seguidas puesta marcha sirve funcionalmente página encontrarás sitio [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). supervisará busca reconstruirá `yuidev` trabajando necesitas mover reconstruir hagas previsualizar ligeramente simplificada confianza hiciste mostrarán correctamente Ten modificaciones estilo hacerse probarse watch watchmain watchquick observación vigilarán serie ejecutarán cambiado única `watch` ejecutar detectar `watchmain` `watchquick` Dependiendo elegir ahorrarte manualmente reconstrucción desees Lanzamiento [release\\_processmd]/release_process/ Consejos Trucos cantidad issues abrumadora implementar faciliten PRs Plantillas Respuesta característica [Respuestas Guardadas](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/), redactar respuesta flujos descritos requerir responder respuestas idénticas redireccionar preguntas aceptar problema Respuestas Guardadas eficiente muestran mantenedores ¡Puedes usarlas crear ##### Cerrando Reproducir reproducir dudes reabrir demuestre ¡Gracias Necesita Fragmento cerrando motivos organizativos reabre fragmento ilustre issue Foro problemas escribir tutoriales publicar GSOC discutir propuestas [foro](https://discourse.processing.org/c/summer-of-code/). veo interés clara [amplía acceso]/access/ cerraré volver abrirlo vemos abrirla Complemento mantenerla minimalista partida complemento [https://github.com/processing/p5.js/blob/main/contributor\\_docs/creating\\_libraries.md](../creating_libraries/) Issue Gracias recordatorio abrirse abran etiquetarse seguimiento desarrollo mantener Aprobar Puedes Fusionado ve Revisar complejo difícil git complejos puedas probarla Afortunadamente CLI](https://cli.github.com/) enormemente instalar sesión ejecutando comando `gh pr checkout [id_del_pull_request]` fork remoto rama Volver `git main` ¡Incluso dejar necesidad visitar absoluto herramienta Gestión Notificaciones pestañas Issues Requests clic Watch ícono ojo superior frente nombre [Cropped screenshot of top right corner repository page showing series buttons center from left Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng observar eventos menciones actividades suscrito enviarán notificaciones [página notificaciones](https://github.com/notifications/), leídas descartadas buzón correo electrónico recibir correos electrónicos observando personalizarlos incluida desuscripción notificaciones](https://github.com/settings/notifications/). Configurar opciones adapten buscar issues/PRs sentirse abrumado interminables requiere equilibrio sugerencia inicial configurarlo Participando @menciones personalizadas"},"Guía de Contribución a WebGL\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* How to get started working on the p5js WebGL mode source code */} leyendo página probablemente interesado ayudar ¡Gracias agradecemos ayuda explicar estructuramos contribuciones ofrecer consejos cambios ## Recursos * Lee [visión arquitectura p5js]/webgl_mode_architecture/ entender difiere 2D referencia valiosa detalles implementación shaders trazos [instrucciones contribuidores](https://p5js.org/contributor-docs/#/./contributor_guidelines/) obtener información crear issues configurar código base probar útil API navegador basa p5js[WebGL Fundamentals](https://webglfundamentals.org/) repasa conceptos básicos renderización [The Book of Shaders](https://thebookofshaders.com/) explica técnicas utilizadas Planificación Organizamos abiertos [en Proyecto GitHub](https://github.com/orgs/processing/projects/5/), dividimos tipos **Cambios nivel sistema** objetivos plazo implicaciones alcance requieren discusión planificación comenzar **Errores solución aún** informes errores necesitan depuración reducir causa listos corregidos discutir corregirla soluciones PR** decidido solucionarlo libres alguien escriba **Mejoras menores** características obvio actual necesidad encajarlas acordado vale pena hacerlas disponibles **Funcionalidades 2D** comportamiento esperado funcionalidad implementada coincida necesitemos requisitos usuario claros funcionan contextos** formas métodos coordenadas 3D fallan **solicitudes funcionalidad** solicitudes asegurarnos encajen hoja ruta Issues **documentación** cambio documentación Colocar Código relacionado subdirectorio `src/webgl` directorio funciones principales dividen archivos área temática comandos luz encuentran `lightingjs` materiales `materialsjs` implementar clases orientadas generalmente archivo clase ocasionalmente utilidad interna `p5Framebufferjs` incluye `p5Framebuffer` consta adicionalmente subclases específicas framebuffer `p5RendererGL` grande maneja cantidad comportamientos razón divide descripción #### `p5RendererGLjs` Inicialización principal `p5RendererGLImmediatejs` Funcionalidad relacionada dibujo **modo inmediato** almacenarán reutilizarán `beginShape` `endShape` `p5RendererGLRetainedjs` retenido** almacenado reutilización `sphere` `materialjs` Gestión modos mezcla `3d_primitivesjs` Funciones dibujan `triangle` definen geometría renderizado ocurre tratando entrada forma genérica `Textjs` utilidades renderizar texto Pruebas Cambios ### Consistencia difícil verificar manualmente agregamos pruebas unitarias confianza rompimos siguen pasando agregar prueba función funciona mejores consistencia píxeles resultantes iguales unitaria ```js test'coplanar strokes match 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER if === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` desactivar antialiasing ligeramente funcionar líneas rectas ejes exclusiva comparar verificamos color podríamos convertir sistema robusto compare instantáneas imagen completas resultados esperados verificación test'color interpolation' renderer myp5createCanvas256 // upper lower expected center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] rendimiento preocupación causen impacto Normalmente creando sketches comparamos velocidades fotogramas medir Deshabilita amigables `p5disableFriendlyErrors true` superior sketch simplemente `p5minjs` Muestra velocidad promedio idea clara estable let frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 draw rate frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' casos ponen presión partes proceso complicadas modelo curva larga simples `line` llamado bucle for"}},"examples":{"Primitivas de Formas":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"programa demuestra funciones básicas primitivas formas square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expande Primitivas Formas añadiendo color background llena lienzo stroke establece dibujar líneas fill interior formas noStroke noFill apagan línea respectivamente colores representados demuestra opciones"},"Dibujando Líneas":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Haz clic arrastra ratón dibujar línea demuestra variables integradas mouseX mouseY almacenan posición actual representada pmouseX pmouseY muestra colorMode HSB tono-saturación-brillo variable establece tono"},"Animación con Eventos":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demuestra loop noLoop pausar reanudar animación clic ratón alterna bucle detenida usuario presionar tecla avanzar fotograma Nota establecer enfoque lienzo pulsaciones teclas registren Avanzar logra llamando función redraw resulta llamada draw"},"Movimiento en Dispositivo Móvil":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"función deviceMoved ejecuta dispositivo móvil muestra sketch mueve valores accelerationX accelerationY accelerationZ configuran posición tamaño círculo funciona dispositivos móviles"},"Condiciones":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"declaraciones if else permiten bloque código ejecute condición anima mantiene presionado mouse declaración línea Puedes leer referencia p5 MDN operadores comparación ayudan formar condiciones comparar valores tono círculo reinicia cero lógicos combinar && verifica ambas verdaderas relleno negro centro horizontal lienzo blanco posición || invierte velocidad llega borde izquierdo derecho"},"Palabras":{"relativeUrl":"/examples/imported-media-words","description":"función text utiliza insertar texto lienzo Puedes cambiar fuente tamaño usando funciones loadFont fontSize alinearse izquierda centro derecha textAlign formas color fill"},"Copiar Datos de Imagen":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"Usando método copy puedes simular colorear imagen copiando color blanco negro arrastre cursor"},"Máscara Alfa":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"Usando método mask puedes crear máscara imagen especificar transparencia partes ejecutar localmente necesitarás archivos servidor local funcionamiento server"},"Transparencia de Imagen":{"relativeUrl":"/examples/imported-media-image-transparency","description":"programa superpone imagen modificando alfa función tint Mueve cursor izquierda derecha lienzo cambiar posición ejecutar localmente necesitarás archivo servidor local funcionamiento server"},"Reproductor de Audio":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio crea reproductor audio muestra controles ajusta velocidad reproducción normal ratón borde izquierdo ventana vuelve rápida medida mueve derecha información elementos multimedia reproductores página referencia p5MediaElement archivo bucle piano dominio público Josef Pres"},"Reproductor de Video":{"relativeUrl":"/examples/imported-media-video","description":"Usando funciones noCanvas createVideo puedes cargar video DOM incrustar lienzo construir incrustado elemento canvas visita Video Canvas"},"Video en el Lienzo":{"relativeUrl":"/examples/imported-media-video-canvas","description":"Usando funciones createVideo image puedes cargar video lienzo captura pasa constructor añadir filtros usando método filter ejecutar localmente necesitarás servidor local funcionamiento server construir incrustarlo visita Video"},"Captura de Video":{"relativeUrl":"/examples/imported-media-video-capture","description":"Usando funciones createCapture image puedes tomar captura video dispositivo dibujarlo lienzo pasa constructor añadir filtros método filter estrategias cargar presentar estilizar videos visita ejemplos Video Canvas"},"Soltar Imagen":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop método elemento p5js registra callback carga archivo cargado crea clase p5File Puedes revisar tipo usarlo declaraciones condicionales respondan"},"Entrada y Botón":{"relativeUrl":"/examples/input-elements-input-button","description":"Usando funciones createElement createInput createButton puedes tomar cadena caracteres ingresada entrada texto mostrarla lienzo"},"Elementos de un formulario":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM representa estructura resultante página web elementos forma p5js's tales createInput createSelect createRadio permiten crear distintas maneras acceder información ingresada botón select input radio actualizar base obtenida"},"Trasladar":{"relativeUrl":"/examples/transformation-translate","description":"función translate mueve origen sistema coordenadas ubicación especificada funciones push pop guardan restauran configuraciones dibujo tales color relleno Nota dibujamos figuras rectángulo cuadrado distinto ocasión"},"Rotar":{"relativeUrl":"/examples/transformation-rotate","description":"función rotate rota sistema coordenadas actual origen Nota defecto ubica esquina superior izquierda lienzo rotar centro trasladar funciones push pop guardan restauran respectivamente"},"Ajustar la escala":{"relativeUrl":"/examples/transformation-scale","description":"función scale ajusta escala sistema coordenadas actual factor especificado funciones push pop guardan restauran respectivamente dibuja cuadrado tamaño origen factores"},"Interpolación lineal":{"relativeUrl":"/examples/calculating-values-interpolate","description":"interpolación calcula valores número camino tipos utilizan tasas cambio lineal abreviada lerp inglés utiliza tasa constante función interpola linealmente números Mueve ratón pantalla símbolo seguirá cuadro animación elipse mueve distancia posición actual cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"función map convierte rango posición horizontal cursor resultante tono círculo Map vertical diámetro"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demuestra función random usuario presiona botón mouse posición color círculo cambian aleatoriamente"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"dibuja círculo posición cursor mantiene rectángulo pasando coordenadas ratón función constrain"},"Reloj":{"relativeUrl":"/examples/calculating-values-clock","description":"hora actual obtener funciones second minute hour utiliza map calcular ángulo manecillas transformaciones establecer posición"},"Interpolación de color":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolación calcula valores número camino tipos interpolación utilizan tasas cambio lineal abreviada lerp inglés utiliza tasa constante función interpola linealmente números lerpColor demostrada colores variable stripeCount ajusta franjas horizontales aparecen Configurar alto hará vea individuales degradado"},"Rueda de Color":{"relativeUrl":"/examples/repetition-color-wheel","description":"ilustra apariencia tonos Utiliza bucle for repetir transformaciones inicializa variable llamada ángulo cambia rotación círculo tono repite dibuja relativo centro lienzo funciones push pop afecten individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"curvas bezier crean utilizando puntos control anclaje parámetros función especifican punto curva intermedios establecen definen forma"},"Caleidoscopio":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"caleidoscopio instrumento óptico superficies reflectantes inclinadas ángulo Utilizando funciones translate rotate scale puedes replicar efecto visual resultante lienzo"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"ruido Perlines algoritmo creado Ken Perlin producir secuencias parecen aleatorias orgánicas función noise p5 produce puntos tamaño basado valores deslizador izquierda establece distancia derecha desplazamiento cálculo"},"Árbol recursivo":{"relativeUrl":"/examples/repetition-recursive-tree","description":"renderizar estructura similar árbol recursión ángulo ramificación calcula función posición horizontal mouse Mueve izquierda derecha cambiar Basado Recursive Tree Example Daniel Shiffman Processing"},"Poema Aleatorio":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"Usando funciones floor random puedes seleccionar aleatoriamente serie elementos arreglo dibujarlos tamaños posiciones lienzo"},"Seno y Coseno":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demuestra funciones matemáticas seno coseno animación muestra movimiento circular uniforme círculo unitario radio ángulo medido eje determina punto definidos coordenadas respectivamente"},"Apuntar":{"relativeUrl":"/examples/angles-and-motion-aim","description":"función atan2 calcula ángulo posiciones utilizado rotar forma ojos rotan apuntan mirar cursor"},"Tira de triángulos":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demuestra crear forma especificando vértices TRIANGLE_STRIP utilizando funciones beginShape endShape vertex"},"Clicker circular":{"relativeUrl":"/examples/games-circle-clicker","description":"demuestra juego límite puntuación almacenamiento local navegador guarda alta juega nuevamente permanece Borrar datos borra"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"juego inspirado videojuegos arcade antiguos Pong Atari jugadores controla paleta representada rectángulo blanco jugador izquierda mover abajo usando teclas derecha flechas ganan puntos rebotar pelota cuadrado allá borde oponente lienzo"},"Juego de serpiente":{"relativeUrl":"/examples/games-snake","description":"reproducción tipo juego arcade llamado Snake Blockade lanzado juegos estructura jugador controla movimientos serpiente representada línea verde objetivo colisione fruta punto rojo colisiona crece crecer bordes área utiliza matriz vectores almacenar posiciones segmentos teclas flecha controlan movimiento"},"Geometrías":{"relativeUrl":"/examples/3d-geometries","description":"WEBGL p5js incluye formas primitivas plano caja cilindro cono toro esfera elipsoide model muestra geometría personalizada cargada loadModel modelo colección NASA"},"Geometría Personalizada":{"relativeUrl":"/examples/3d-custom-geometry","description":"función buildGeometry almacena formas modelo 3D utilizado reutilizado eficiente"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"renderización 3D material determina superficie responde luz WEBGL p5js admite materiales ambient ambientales emissive emisión normal normales specular especulares ambiental especular fuente muestra color independientemente contextos típicamente emite visualiza dirección mira combinarse fill stroke Fill establece base vértices objeto función texture envuelve imagen modelo textura colección NASA"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"control órbita utiliza entrada ratón tacto ajustar orientación cámara boceto 3D rotar haz clic izquierdo arrastra desliza pantalla táctil desplazar derecho dedos acercar alejar centro rueda desplazamiento presiona adentro/hacia afuera"},"Filtro de sombreado":{"relativeUrl":"/examples/3d-filter-shader","description":"filtros sombreado forma aplicar efecto lienzo aplica vídeo"},"Ajusta Posiciones con un Sombreador.":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"sombreadores ajustar posiciones vértices formas permite distorsionar animar modelos 3D"},"Desenfoque del búfer de trama (framebuffer)":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"sombreador utiliza información profundidad p5Framebuffer aplicar desenfoque cámara real objetos aparecen borrosos enfoque objetivo simula efecto boceto renderiza esferas framebuffer lienzo usando"},"Crear Gráficos":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"función createGraphics usada crear objeto p5Graphics servir búfer gráficos pantalla lienzo búferes dimensiones propiedades superficie visualización actual parezcan existir espacio"},"Múltiples Lienzos":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"defecto p5 ejecuta Global significa funciones ámbito global relacionadas lienzo aplican ejecutarse Instancia métodos instancia clase función definida parámetro represente etiquetada variables típicamente globales pertenecerán Pasando constructor"},"Shader como Textura":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"shaders aplicarse formas 2D/3D texturas aprender p5js Shaders"},"Copos de Nieve":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demuestra sistema partículas simular movimiento copos nieve caen programa define clase copo class utiliza array almacenar objetos"},"Agitar y Rebotar la Pelota":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"Usando clase puedes crear colección círculos mueven lienzo respuesta inclinación dispositivo móvil Debes abrir página mostrar boceto"},"Partículas Conectadas":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"utiliza clases personalizadas clase Particle almacena posición velocidad tono Renderiza círculo usando actuales actualiza actual Path matriz objetos creados líneas conectando partículas usuario clic ratón boceto crea instancia arrastra añade trayecto"},"Agrupación":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demostración comportamiento agrupamiento discusión completa implementación encontrar libro Nature of Code Daniel Shiffman simulación basa investigación Craig Reynolds utilizó término boid representar objeto similar pájaro"},"Almacenamiento Local":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"navegadores permiten sitios web almacenar datos dispositivo visitante llama almacenamiento local funciones getItem storeItem clearStorage removeItem controlan inspirado ejemplos Daniel Shiffman Carga Datos JSON Tabulares Processing escritos Java Utiliza clase organizar burbuja agregar burbujas guardarán vuelve visitar boceto cargarán"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON formato escribir datos archivo sintaxis proviene utiliza contextos basado Carga Datos Daniel Shiffman Processing escrito Java Utiliza clase organizar burbuja boceto comienza carga burbujas visitante agregar descargar actualizado cargar"},"Tabla":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Valores Separados Comas CSV formato escribir datos archivo p5 usando p5Table basado Carga Datos Tabulares Daniel Shiffman Processing Utiliza clase organizar representan burbuja comienza boceto carga burbujas visitante agregar descargar actualizado cargar"},"Reflexión No Ortogonal":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demuestra pelota rebotando superficie inclinada implementada usando cálculos vectoriales reflexión código extensivo clase p5Vector incluyendo función createVector crear vectores métodos add dot"},"Cuerpo Blando":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Simulación física cuerpo blando experimentando aceleración posición ratón forma crea curvas usando curveVertex curveTightness"},"Fuerzas":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demostración múltiples fuerzas actuando cuerpos experimentan gravedad continuamente resistencia fluido agua natureofcodecom cálculos fuerza realizan usando clase p5Vector incluyendo función createVector crear vectores"},"Partículas de Humo":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Demostración sistema partículas humo basado original Shiffman Processing código clase p5Vector incluyendo función createVector diversos cálculos actualizar posiciones velocidades realizan métodos implementa contiene array objetos Particle"},"Juego de la Vida":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Juego Vida autómata celular creado matemático John Conway tipo simulación cuadrícula células célula muerta viva cuadrados negros representan vivas blancos muertas medida ejecuta cambian basadas conjunto reglas vecinos vivos muere vive cambios próxima generación exactamente cobrará vida generan interacciones complejas Haz clic lienzo comenzar aleatorias reiniciará"},"Conjunto de Mandelbrot":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Renderización colorida conjunto Mandelbrot basada Daniel Shiffman Processing"}},"libraries":{"p5.xr":{"relativeUrl":"/libraries/","description":"Librería"}},"reference":{"Array":{"relativeUrl":"/reference/p5/Array"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"Number":{"relativeUrl":"/reference/p5/number"},"Object":{"relativeUrl":"/reference/p5/object"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"String":{"relativeUrl":"/reference/p5/string"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"}},"contributor-docs-fallback":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure success volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increase groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](https://p5js.org/reference/p5.sound), [class page](https://p5js.org/reference/p5/p5.Vector), [method page](https://p5js.org/reference/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (https://p5js.org/reference/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (https://p5js.org/reference/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (https://p5js.org/reference/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (https://p5js.org/reference/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```javascript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (https://p5js.org/reference/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (https://p5js.org/reference/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"JSDoc Best Practices\n":{"relativeUrl":"/contribute/jsdoc","description":"Documentation website built comments p5js repo things mind order documentation parsed correctly ## * top file add comment `@module` tag optionally `@submodule` reference category subcategory names contents ```js /** @module Rendering */ ``` Data @submodule LocalStorage classes Create *outside* addon function assign `p5` *inside* class MyClass { // } export default myAddonp5 fn p5MyClass = Document methods directly members *without* `@method` Description myMethod return spot added definition include `@class` including prefix parameters constructor description exist constructorn thisn @class @param {Number} number pass properties `@for` referencing `@property` naming property myProperty @property @for global functions Add listing @method myFunction p5myFunction dynamically generated usual `@for p5` const key ['nameA' nameB'] fn[key] `Hello ${key}` nameA p5 nameB Mark showing `@private` automatically start `_` @private privateMethodA _privateMethodB"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed requires temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve *Both 1x include system diffing algorithm robust system* operating systems browsers render graphics subtle variations differences normal fail Common acceptable Single-pixel shifts line positions Slight anti-aliasing Text font weight kerning Minor curve smoothness text rendered macOS slightly Linux applies thin lines curves graphical elements image earlier caused environments [Example]src/content/contributor-docs/images/pixelmatch2png sophisticated distinguish Initial Compares pixels moderate threshold identify [pixelmatch](https://github.com/mapbox/pixelmatch/) pixel Cluster identification Groups connected difference Breadth-First Search BFS Pattern recognition specifically identifies Line shift clusters represent element shifted 1px Isolated noise Smart failure criteria Applies thresholds Ignores smaller total significant Permits minor typical platforms [Example]src/content/contributor-docs/images/pixelmatchpng balances sensitivity real tolerating platform-specific parameters const MIN_CLUSTER_SIZE Minimum cluster MAX_TOTAL_DIFF_PIXELS Maximum allowed analyzing neighborhood 80% ≤2 neighbors classified structural intelligent ensures due catching important note improved pass failed detecting showing visually meaningful makes reliable reduces failures require manual investigation ### efficient sizes dimensions close 50x50 resizes images canvases result faster Focus visible details intricate hard Design demonstrate reduced cramming variants call times visualTest'stroke variations' stroke p5stroke0 p5strokeWeight1 p5line10 Screenshot thick p5strokeWeight5"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples-fallback":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries-fallback":{"AnimatorJs":{"relativeUrl":"/libraries/","description":"A javascript animation viewer based on a custom animation API primarily designed for p5.js and allows for dynamic, lightweight, real-time rendered browser animations controlled purely by code."},"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Pixyp5js":{"relativeUrl":"/libraries/","description":"A library for easily more easily dealing with pixels in images during runtime"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"TurtleGraphics":{"relativeUrl":"/libraries/","description":"Watch images being drawn using turtle graphics."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"Zoomp5js":{"relativeUrl":"/libraries/","description":"A simple library for adding the zooming functionality to your p5.js project."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.5":{"relativeUrl":"/libraries/","description":"Add UI to p5.js and other goodies"},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Modbuttons":{"relativeUrl":"/libraries/","description":"a simple and modular button system for p5js"},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Sprite":{"relativeUrl":"/libraries/","description":"A basic sprite library that supports both animated and static sprites for p5.js"},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.colorGenerator":{"relativeUrl":"/libraries/","description":"p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point."},"p5.comfyui-helper":{"relativeUrl":"/libraries/","description":"A library for interfacing with ComfyUI"},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."},"XYscope.js":{"relativeUrl":"/libraries/","description":"p5.js library to render graphics on analog vector displays"}},"events-fallback":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro VimeoEmbed ///components/VimeoEmbed/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg Introduction Casey Reas Johanna Hedva Stephanie Pi Phoenix Perry Taeyoon Choi Sara Hendren Epic Jefferson Chandler McWilliams Q&A ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people-fallback":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aarati Akkapeddi ":{"relativeUrl":"/people/#aarati-akkapeddi-"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aaron Welles":{"relativeUrl":"/people/#aaron-welles"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abdiel Lopez":{"relativeUrl":"/people/#abdiel-lopez"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Animesh Sinha":{"relativeUrl":"/people/#animesh-sinha"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antoinette Bumatay-Chan":{"relativeUrl":"/people/#antoinette-bumatay-chan"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashish Karn":{"relativeUrl":"/people/#ashish-karn"},"ashish singh":{"relativeUrl":"/people/#ashish-singh"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"Ashwani Dey":{"relativeUrl":"/people/#ashwani-dey"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"beau-muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"benpalevsky":{"relativeUrl":"/people/#benpalevsky"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"blackboxlogic":{"relativeUrl":"/people/#blackboxlogic"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Bojidar Marinov":{"relativeUrl":"/people/#bojidar-marinov"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"c-dacanay":{"relativeUrl":"/people/#c-dacanay"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Callie":{"relativeUrl":"/people/#callie"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Carrie Wang":{"relativeUrl":"/people/#carrie-wang"},"Casey Conchinha":{"relativeUrl":"/people/#casey-conchinha"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chloe Yan":{"relativeUrl":"/people/#chloe-yan"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"cog25":{"relativeUrl":"/people/#cog25"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"computational mama":{"relativeUrl":"/people/#computational-mama"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"crh82":{"relativeUrl":"/people/#crh82"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Darren Kessner":{"relativeUrl":"/people/#darren-kessner"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"davidblitz":{"relativeUrl":"/people/#davidblitz"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"dhanush":{"relativeUrl":"/people/#dhanush"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"FORCHA PEARL":{"relativeUrl":"/people/#forcha-pearl"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Franolich Design":{"relativeUrl":"/people/#franolich-design"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gabriel Sroka":{"relativeUrl":"/people/#gabriel-sroka"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Albers":{"relativeUrl":"/people/#greg-albers"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Greg Stanton":{"relativeUrl":"/people/#greg-stanton"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Kholiya":{"relativeUrl":"/people/#himanshu-kholiya"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"Ilona Brand":{"relativeUrl":"/people/#ilona-brand"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jackie Liu":{"relativeUrl":"/people/#jackie-liu"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Berghold":{"relativeUrl":"/people/#jared-berghold"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"jeanette":{"relativeUrl":"/people/#jeanette"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Philyaw":{"relativeUrl":"/people/#jordan-philyaw"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Kathryn Lichlyter":{"relativeUrl":"/people/#kathryn-lichlyter"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Gupta":{"relativeUrl":"/people/#keshav-gupta"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"Kit Kuksenok":{"relativeUrl":"/people/#kit-kuksenok"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"Kristian Hamilton":{"relativeUrl":"/people/#kristian-hamilton"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Berrios":{"relativeUrl":"/people/#lauren-berrios"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"Luke Plowden":{"relativeUrl":"/people/#luke-plowden"},"M":{"relativeUrl":"/people/#m"},"ma haidong":{"relativeUrl":"/people/#ma-haidong"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marco Macarena":{"relativeUrl":"/people/#marco-macarena"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Martin Leopold Groedl":{"relativeUrl":"/people/#martin-leopold-groedl"},"Martin Lorentzon":{"relativeUrl":"/people/#martin-lorentzon"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"mathewpan2":{"relativeUrl":"/people/#mathewpan2"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Arguelles":{"relativeUrl":"/people/#maya-arguelles"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"Mayank Verma":{"relativeUrl":"/people/#mayank-verma"},"mclark414":{"relativeUrl":"/people/#mclark414"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"Melody Sharp":{"relativeUrl":"/people/#melody-sharp"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"Mx. Ramsey":{"relativeUrl":"/people/#mx--ramsey"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"oliver thurley":{"relativeUrl":"/people/#oliver-thurley"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"Pim Tournaye":{"relativeUrl":"/people/#pim-tournaye"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Qingfeng Huang":{"relativeUrl":"/people/#qingfeng-huang"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajas Samse":{"relativeUrl":"/people/#rajas-samse"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"Renjie Li":{"relativeUrl":"/people/#renjie-li"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishab Kumar Jha":{"relativeUrl":"/people/#rishab-kumar-jha"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Rishi":{"relativeUrl":"/people/#rishi"},"Ritesh Patil":{"relativeUrl":"/people/#ritesh-patil"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"roxi09":{"relativeUrl":"/people/#roxi09"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"Seyko":{"relativeUrl":"/people/#seyko"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shoury Singh":{"relativeUrl":"/people/#shoury-singh"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Tibor Udvari":{"relativeUrl":"/people/#tibor-udvari"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Vaivaswat Dubey":{"relativeUrl":"/people/#vaivaswat-dubey"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"Vik":{"relativeUrl":"/people/#vik"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishesh Rawal":{"relativeUrl":"/people/#vishesh-rawal"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"willallstet":{"relativeUrl":"/people/#willallstet"},"William Hazard":{"relativeUrl":"/people/#william-hazard"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"Xevi H. Aqeel":{"relativeUrl":"/people/#xevi-h--aqeel"},"Xin Xin":{"relativeUrl":"/people/#xin-xin"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"ℤ":{"relativeUrl":"/people/#ℤ"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference-fallback":{"HSB":{"relativeUrl":"/reference/p5/HSB"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"addElement()":{"relativeUrl":"/reference/p5/addElement","alias":"addElement"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"baseColorShader()":{"relativeUrl":"/reference/p5/baseColorShader","alias":"baseColorShader"},"baseFilterShader()":{"relativeUrl":"/reference/p5/baseFilterShader","alias":"baseFilterShader"},"baseMaterialShader()":{"relativeUrl":"/reference/p5/baseMaterialShader","alias":"baseMaterialShader"},"baseNormalShader()":{"relativeUrl":"/reference/p5/baseNormalShader","alias":"baseNormalShader"},"baseStrokeShader()":{"relativeUrl":"/reference/p5/baseStrokeShader","alias":"baseStrokeShader"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierOrder()":{"relativeUrl":"/reference/p5/bezierOrder","alias":"bezierOrder"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"close()":{"relativeUrl":"/reference/p5/close","alias":"close"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEG_TO_RAD":{"relativeUrl":"/reference/p5/DEG_TO_RAD"},"EXCLUDE":{"relativeUrl":"/reference/p5/EXCLUDE"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"INCLUDE":{"relativeUrl":"/reference/p5/INCLUDE"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createModel()":{"relativeUrl":"/reference/p5/createModel","alias":"createModel"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"fontAscent()":{"relativeUrl":"/reference/p5/fontAscent","alias":"fontAscent"},"fontBounds()":{"relativeUrl":"/reference/p5/fontBounds","alias":"fontBounds"},"fontDescent()":{"relativeUrl":"/reference/p5/fontDescent","alias":"fontDescent"},"fontWidth()":{"relativeUrl":"/reference/p5/fontWidth","alias":"fontWidth"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"imageShader()":{"relativeUrl":"/reference/p5/imageShader","alias":"imageShader"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBlob()":{"relativeUrl":"/reference/p5/loadBlob","alias":"loadBlob"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFilterShader()":{"relativeUrl":"/reference/p5/loadFilterShader","alias":"loadFilterShader"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"paletteLerp()":{"relativeUrl":"/reference/p5/paletteLerp","alias":"paletteLerp"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveObj()":{"relativeUrl":"/reference/p5/saveObj","alias":"saveObj"},"saveStl()":{"relativeUrl":"/reference/p5/saveStl","alias":"saveStl"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"screenToWorld()":{"relativeUrl":"/reference/p5/screenToWorld","alias":"screenToWorld"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spline()":{"relativeUrl":"/reference/p5/spline","alias":"spline"},"splinePoint()":{"relativeUrl":"/reference/p5/splinePoint","alias":"splinePoint"},"splineProperties()":{"relativeUrl":"/reference/p5/splineProperties","alias":"splineProperties"},"splineProperty()":{"relativeUrl":"/reference/p5/splineProperty","alias":"splineProperty"},"splineTangent()":{"relativeUrl":"/reference/p5/splineTangent","alias":"splineTangent"},"splineVertex()":{"relativeUrl":"/reference/p5/splineVertex","alias":"splineVertex"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeMode()":{"relativeUrl":"/reference/p5/strokeMode","alias":"strokeMode"},"strokeShader()":{"relativeUrl":"/reference/p5/strokeShader","alias":"strokeShader"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textBounds()":{"relativeUrl":"/reference/p5/textBounds","alias":"textBounds"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textDirection()":{"relativeUrl":"/reference/p5/textDirection","alias":"textDirection"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textProperties()":{"relativeUrl":"/reference/p5/textProperties","alias":"textProperties"},"textProperty()":{"relativeUrl":"/reference/p5/textProperty","alias":"textProperty"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWeight()":{"relativeUrl":"/reference/p5/textWeight","alias":"textWeight"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"vertexProperty()":{"relativeUrl":"/reference/p5/vertexProperty","alias":"vertexProperty"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"worldToScreen()":{"relativeUrl":"/reference/p5/worldToScreen","alias":"worldToScreen"},"write()":{"relativeUrl":"/reference/p5/write","alias":"write"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.Biquad.freq()":{"relativeUrl":"/reference/p5.Biquad/freq","alias":"freq"},"p5.Biquad.gain()":{"relativeUrl":"/reference/p5.Biquad/gain","alias":"gain"},"p5.Biquad.res()":{"relativeUrl":"/reference/p5.Biquad/res","alias":"res"},"p5.Biquad.setType()":{"relativeUrl":"/reference/p5.Biquad/setType","alias":"setType"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.changed()":{"relativeUrl":"/reference/p5.Element/changed","alias":"changed"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.input()":{"relativeUrl":"/reference/p5.Element/input","alias":"input"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.attackTime()":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.releaseTime()":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Font.textToContours()":{"relativeUrl":"/reference/p5.Font/textToContours","alias":"textToContours"},"p5.Font.textToModel()":{"relativeUrl":"/reference/p5.Font/textToModel","alias":"textToModel"},"p5.Font.textToPaths()":{"relativeUrl":"/reference/p5.Font/textToPaths","alias":"textToPaths"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertexProperty()":{"relativeUrl":"/reference/p5.Geometry/vertexProperty","alias":"vertexProperty"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.Noise.amp()":{"relativeUrl":"/reference/p5.Noise/amp","alias":"amp"},"p5.Noise.start()":{"relativeUrl":"/reference/p5.Noise/start","alias":"start"},"p5.Noise.stop()":{"relativeUrl":"/reference/p5.Noise/stop","alias":"stop"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner.pan()":{"relativeUrl":"/reference/p5.Panner/pan","alias":"pan"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rolloff()":{"relativeUrl":"/reference/p5.Panner3D/rolloff","alias":"rolloff"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.PitchShifter.shift()":{"relativeUrl":"/reference/p5.PitchShifter/shift","alias":"shift"},"p5.Reverb.drywet()":{"relativeUrl":"/reference/p5.Reverb/drywet","alias":"drywet"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.inspectHooks()":{"relativeUrl":"/reference/p5.Shader/inspectHooks","alias":"inspectHooks"},"p5.Shader.modify()":{"relativeUrl":"/reference/p5.Shader/modify","alias":"modify"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.Shader.version()":{"relativeUrl":"/reference/p5.Shader/version","alias":"version"},"p5.SoundFile.amp()":{"relativeUrl":"/reference/p5.SoundFile/amp","alias":"amp"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.start()":{"relativeUrl":"/reference/p5.SoundFile/start","alias":"start"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.getValue()":{"relativeUrl":"/reference/p5.Vector/getValue","alias":"getValue"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.setValue()":{"relativeUrl":"/reference/p5.Vector/setValue","alias":"setValue"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.sound.getAudioContext()":{"relativeUrl":"/reference/p5.sound/getAudioContext","alias":"getAudioContext"},"p5.sound.loadSound()":{"relativeUrl":"/reference/p5.sound/loadSound","alias":"loadSound"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.BandPass":{"relativeUrl":"/reference/p5.sound/p5.BandPass"},"p5.Biquad":{"relativeUrl":"/reference/p5.sound/p5.Biquad"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.HighPass":{"relativeUrl":"/reference/p5.sound/p5.HighPass"},"p5.LowPass":{"relativeUrl":"/reference/p5.sound/p5.LowPass"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner":{"relativeUrl":"/reference/p5.sound/p5.Panner"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.PitchShifter":{"relativeUrl":"/reference/p5.sound/p5.PitchShifter"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"},"p5.sound.setAudioContext()":{"relativeUrl":"/reference/p5.sound/setAudioContext","alias":"setAudioContext"},"p5.sound.userStartAudio()":{"relativeUrl":"/reference/p5.sound/userStartAudio","alias":"userStartAudio"},"p5.sound.userStopAudio()":{"relativeUrl":"/reference/p5.sound/userStopAudio","alias":"userStopAudio"}},"tutorials-fallback":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Chatting with/about Code":{"relativeUrl":"/tutorials/criticalAI1-chatting-with-about-code","description":"Using generative AI to code with p5.js"},"Critical AI Prompt Battle":{"relativeUrl":"/tutorials/criticalAI2-prompt-battle","description":"Build a tool to compare generative AI prompts"},"Critical AI Sentiment Dataset Explorer":{"relativeUrl":"/tutorials/criticalAI3-sentiment-dataset-explorer","description":"Examine the datasets that run AI tools"},"Critical AI No-AI Chatbot":{"relativeUrl":"/tutorials/criticalAI4-no-ai-chatbot","description":"Make an interactive chatbot without using any AI"},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to GLSL":{"relativeUrl":"/tutorials/intro-to-glsl","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU using GLSL."},"p5.strands: Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-p5-strands","description":"An introduction to shaders using p5.strands"},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
diff --git a/public/search-indices/hi.json b/public/search-indices/hi.json
index 92f784f2d9..e8a958845a 100644
--- a/public/search-indices/hi.json
+++ b/public/search-indices/hi.json
@@ -1 +1 @@
-{"contributor-docs":{"🌸 नमस्कार! 🌺\n":{"relativeUrl":"/contribute/README","description":"\n\np5.js में योगदान देने में आपकी रुचि के लिए धन्यवाद! हमारा समुदाय सभी रूपों के योगदान को महत्व देता है और जहाँ तक हो सके \"योगदानकर्ता\" शब्द के अर्थ का विस्तार करना चाहता है। इसमें दस्तावेज़ीकरण, शिक्षण, कोड लिखना, आर्ट बनाना, लिखना, रचना, सक्रियतावाद, व्यवस्थित करना, संधारण करना, या ऐसी कोई भी चीज जिसकी आप कल्पना कर सकते हैं। आप [यहाँ](https://p5js.org/community/#contribute) योगदान करने के कुछ अलग तरीकों से शुरुआत कर सकते हैं। तकनीकी योगदान आरंभ करने के लिए, इस पृष्ठ को पढ़ें।\n\nयह परियोजना [सभी योगदानकर्ताओं](https://github.com/kentcdodds/all-contributors/) के विनिर्देशन का अनुसरण करती है। अपना नाम [readme](https://github.com/processing/p5.js/blob/main/README.md#contributors) में दर्ज करने क लिए [इन नियमों](https://github.com/processing/p5.js/issues/2309/) का पालन करे अथवा [GitHub मुद्दों](https://github.com/processing/p5.js/issues/) में अपने योगदान के साथ टिप्पणी करें और हम आपका नाम दर्ज कर देंगे।\n\n# पहुँच को प्राथमिकता देना\n\nहम ऐसे काम को प्राथमिकता दे रहे हैं जो p5.js तक पहुंच (समावेश और पहुंच) का विस्तार करता है! अधिक विवरण के लिए [हमारा पहुंच के लिए बयान](../access/) देखें।\n\n# हमारा कोड कहां रहता है\n\nव्यापक p5.js परियोजना में इस के अलावा कुछ रिपॉजिटरी शामिल हैं-\n\n* [p5.js](https://github.com/processing/p5.js): इस रिपॉजिटरी में p5.js लाइब्रेरी का स्रोत कोड है। [p5.js संदर्भ मैनुअल](https://p5js.org/reference/) भी इस स्रोत कोड में शामिल [JSDoc](http://usejsdoc.org/) टिप्पणियों से उत्पन्न होता है। इसका अनुरक्षण [Moira Turner](https://github.com/mcturner1995/) के द्वारा किया जा रहा है।\n* [p5.js-website](https://github.com/processing/p5.js-website/) इस रिपॉजिटरी में [p5.js वेबसाइट](https://p5js.org) का अधिकांश कोड हैं, संदर्भ मैनुअल के अपवाद के साथ। इसका अनुरक्षण [Moira Turner](https://github.com/mcturner1995/) के द्वारा किया जा रहा है।\n* [p5.js-sound](https://github.com/processing/p5.js-sound/) इस भंडार में p5.sound.js लाइब्रेरी है। इसका अनुरक्षण [Jason Sigal](https://github.com/therewasaguy/) के द्वारा किया जा रहा है।\n* [p5.js-web-editor](https://github.com/processing/p5.js-web-editor/) इस रिपॉजिटरी में [p5.js वेब एडिटर](https://editor.p5js.org) के लिए स्रोत कोड है। इसका अनुरक्षण [Cassie Tarakajian](https://github.com/catarak/) के द्वारा किया जा रहा है। ध्यान दें कि पुराना [p5.js संपादक](https://github.com/processing/p5.js-editor/) अब पदावनत हो गया है।\n\n# रिपोजिटरी फ़ाइल संरचना\n\nयहाँ बहुत सारी फाइलें हैं! यह एक संक्षिप्त अवलोकन है। यह भ्रामक हो सकता है, लेकिन आरंभ करने के लिए आपको रिपॉजिटरी की प्रत्येक फ़ाइल को समझने की आवश्यकता नहीं है। हम एक क्षेत्र में शुरुआत करने की सलाह देते हैं (उदाहरण के लिए, कुछ इनलाइन प्रलेखन को ठीक करना), और अधिक खोज करने के लिए अपने तरीके से काम करना। Luisa Pereira का [लुकिंग इनसाइड p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/) भी p5 .js वर्कफ़्लो में उपयोग किए जाने वाले टूल और फ़ाइलों का वीडियो टूर देता है।\n\n* `contributor_docs/` में विभिन्न दस्तावेज हैं, जो विशेष रूप से p5.js के डेवलपर्स के लिए उपयोगी होने की संभावना है, क्योंकि वे प्रथाओं और सिद्धांतों की व्याख्या करते हैं।\n* `docs/` वास्तव में डॉक्स शामिल नहीं है! इसके बजाय, इसमें \\* [ऑनलाइन संदर्भ पुस्तिका](https://p5js.org/reference/) \\* का उपयोग करने वाला कोड शामिल है।\n* `lib/` में शामिल है एक खाली उदाहरण और p5.sound ऐड-ऑन, जो समय-समय पर [p5.js-sound रिपॉजिटरी](https://github.com/processing/p5.js-sound/) से पुल अनुरोध के माध्यम से अद्यतन किया जाता है। यह वह जगह है जहाँ अंतर्निहित p5.js लाइब्रेरी को [ग्रंट](https://gruntjs.com/) का उपयोग करके एक फ़ाइल में संकलित किए जाने के बाद रखा जाता है। जब आप एक पुल अनुरोध करते हैं तो इसे GitHub रिपॉजिटरी में जांचने की आवश्यकता नहीं होती है।\n* `src/` में लाइब्रेरी के लिए सभी स्रोत कोड शामिल हैं, जो अलग-अलग मॉड्यूल में शीर्ष रूप से व्यवस्थित है। यदि आप p5.js. बदल रहे हैं, तो आप इस पर काम करेंगे। अधिकांश फ़ोल्डरों के पास अपनी स्वयं की readme.md फाइलें होती हैं जो आपको अपना रास्ता खोजने में मदद करती हैं।\n* `tasks/` में स्क्रिप्ट शामिल हैं जो p5.js के नए संस्करणों के निर्माण, परिनियोजन और रिलीज़ से संबंधित स्वचालित कार्य करते हैं।\n* `tests/` में यूनिट परीक्षण शामिल हैं जो सुनिश्चित करते हैं कि लाइब्रेरी सही ढंग से कार्य कर रहे हैं क्योंकि परिवर्तन किए जाते हैं।\n* `utils/` इसमें रिपॉजिटरी के लिए उपयोगी अतिरिक्त फाइलें हो सकती हैं, लेकिन आम तौर पर आप इस डायरेक्टरी को अनदेखा कर सकते हैं।\n\n# प्रलेखन\n\nहमें एहसास है कि प्रलेखन इस परियोजना का सबसे महत्वपूर्ण हिस्सा है। खराब प्रलेखन नए उपयोगकर्ताओं और योगदानकर्ताओं के लिए उपयोग करने के लिए मुख्य बाधाओं में से एक है, जिससे परियोजना कम समावेशी हो जाती है। [contributing\\_documentation.md](../contributing_documentation/) पृष्ठ प्रलेखन के साथ आरंभ करने का एक गहन अवलोकन देता है। p5.js के लिए प्रलेखन कुछ मुख्य स्थानों में पाया जा सकता है:\n\n* [p5js.org संदर्भ](https://p5js.org/reference/) स्रोत कोड में ही [इनलाइन प्रलेखन](../inline_documentation/) से उत्पन्न होता है। इसमें पाठ विवरण और पैरामीटर के साथ-साथ कोड स्निपेट उदाहरण भी शामिल हैं। हम कोड और प्रलेखन को निकटता से रखने के लिए यह सब इनलाइन रखते हैं, और इस विचार को सुदृढ़ करने के लिए कि कोड में योगदान देने की तुलना में प्रलेखन में योगदान करना अधिक महत्वपूर्ण है (यदि अधिक नहीं)। जब लाइब्रेरी निर्मित हो जाता है, तो यह इनलाइन प्रलेखन और उदाहरणों की जांच करता है ताकि यह सुनिश्चित हो सके कि वे कोड के व्यवहार के तरीके से मेल खाते हैं। योगदान करने के लिए, आप [inline\\_documentation.md](../inline_documentation/) पृष्ठ को देखकर शुरू कर सकते हैं।\n* The [p5js.org उदाहरण](https://p5js.org/examples/) पृष्ठ में लंबे उदाहरण हैं जो p5.js. सीखने के लिए उपयोगी हो सकते हैं। योगदान करने के लिए, आप [add\\_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) पृष्ठ को देखकर शुरू कर सकते हैं।\n* The [p5js.org सीखिए](https://p5js.org/tutorials/) पृष्ठ में p5.js और प्रोग्रामिंग की अवधारणाओं को सीखने में मदद करने के लिए ट्यूटोरियल हैं। योगदान करने के लिए, आप [p5.js ट्यूटोरियल में योगदान करने के लिए गाइड](https://p5js.org/learn/tutorial-guide.html) देखकर शुरू कर सकते हैं।\n* आप देखेंगे कि वर्तमान में p5.js वेबसाइट कुछ अलग भाषाओं का समर्थन करती है। इसे अंतर्राष्ट्रीयकरण (या संक्षेप में i18n) कहा जाता है। आप इस दस्तावेज़ के बारे में [i18n\\_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contention.md) पृष्ठ पर अधिक पढ़ सकते हैं।\n\n# गिटहब मुद्दों का संचलान\n\n* ज्ञात बग और इच्छित नई सुविधाओं को [GitHub मुद्दों](https://github.com/processing/p5.js/issues/) का उपयोग करके ट्रैक किया जाता है। समस्या [लेबल](../issue_labels/) का उपयोग श्रेणियों में मुद्दों को हल करने के लिए किया जाता है, जैसे कि जो [शुरुआती के लिए उपयुक्त](https://github.com/processing/p5.js/labels/level%3Abeginner/) है।\n\n* यदि आप किसी मौजूदा मुद्दे पर काम करना शुरू करना चाहते हैं, तो उस मुद्दे पर टिप्पणी करें कि आप इस पर काम करने की योजना बना रहे हैं ताकि अन्य योगदानकर्ताओं को यह पता चले कि आप काम कर रहे है और मदद की पेशकश कर सकते है।\n\n* एक बार जब आप उस मुद्दे पर अपना काम पूरा कर लेते हैं, तो p5.js मुख्य शाखा के खिलाफ [एक पुल निवेदन (PR)](../preparation_a_pull_request/) जमा करें। पुल निवेदन के विवरण क्षेत्र में, आप जो समाधान कर रहे हैं उस समस्या को टैग करते हुए \"resolves #XXXX\" लिखे। यदि पुल निवेदन समस्या को संबोधित करता है, लेकिन उसे पूरी तरह से हल नहीं करता है (यानी आपके पुल निवेदन विलय के बाद मुद्दा खुला रहना चाहिए), तो \"addresses #XXXX\" लिखें।\n\n* यदि आप बग की खोज करते हैं या एक नई सुविधा के लिए एक विचार है जिसे आप जोड़ना चाहते हैं, तो एक मुद्दा सबमिट करके शुरू करें। कृपया पहले से कोई मुद्दा बनाये बिना, समाधान या नई सुविधा युक्त पुल अनुरोध सबमिट न करें, हम शायद इसे स्वीकार नहीं कर पाएंगे। एक बार जब आपको इस मुद्दे पर कुछ प्रतिक्रिया मिल जाती है और इसे संबोधित करने के लिए आगे बढ़ते हैं, तो आप समाधान या सुविधा को योगदान देने के लिए ऊपर की प्रक्रिया का पालन कर सकते हैं।\n\n* आप उन समस्याओं को ट्राइएज कर सकते हैं जिनमें बग रिपोर्ट को पुन: प्रस्तुत करना या महत्वपूर्ण जानकारी मांगना शामिल हो सकता है, जैसे कि संस्करण संख्या या प्रजनन निर्देश। यदि आप मुद्दों को ट्राइएज करना शुरू करना चाहते हैं, तो आरंभ करने का एक आसान तरीका [CodeTriage पर p5.js की सदस्यता लेना](https://www.codetriage.com/processing/p5.js)। [](https://www.codetriage.com/processing/p5.js)\n\n* [Organization.md](https://github.com/processing/p5.js/blob/main/contributor_docs/organization.md) फ़ाइल एक उच्च-स्तरीय अवलोकन देती है कि मुद्दों को कैसे व्यवस्थित किया जा सकता है और निर्णय प्रक्रिया का पालन कैसे करना है। यदि आप रुचि रखते हैं तो हम इसमें शामिल होने के लिए आपका स्वागत करते हैं।\n\n# विकास की प्रक्रिया\n\n1. स्थापित करें [node.js](http://nodejs.org/), जो स्वचालित रूप से [npm](https://www.npmjs.org) पैकेज मैनेजर भी स्थापित करता है।\n\n2. [फोर्क](https://help.github.com/articles/fork-a-repo/) [p5.js रिपॉजिटरी](https://github.com/processing/p5.js) अपने खुद के गिटहब खाते में।\n\n3. [क्लोन](https://help.github.com/articles/cloning-a-repository/) आपके स्थानीय कंप्यूटर पर गिटहब से रिपॉजिटरी का नया फोर्क।\n\n ```shell\n $ git clone https://github.com/YOUR_USERNAME/p5.js.git\n ```\n\n4. प्रोजेक्ट फ़ोल्डर में नेविगेट करें और npm के साथ अपनी सभी आवश्यक निर्भरताएं स्थापित करें।\n\n ```shell\n $ cd p5.js\n $ npm ci\n ```\n\n5. [ग्रंट](https://gruntjs.com/) अब स्थापित किया जाना चाहिए, और आप इसका उपयोग स्रोत कोड से लाइब्रेरी बनाने के लिए कर सकते हैं।\n\n ```shell\n $ npm run grunt\n ```\n\nयदि आप लाइब्रेरी में लगातार फाइलों को बदल रहे हैं, तो आप अपने लिए लाइब्रेरी को स्वचालित रूप से पुनर्निर्माण करने के लिए `npm run dev` को चलाना चाहते हैं, जब भी इसका कोई भी सोर्स आपके बिना पहली बार मैन्युअल रूप से टाइप किए बिना बदल जाता है।\n\n6. स्थानीय रूप से कोडबेस और [कमिट](https://help.github.com/articles/github-glossary/#commit) में कुछ बदलाव करें।\n\n ```shell\n $ git add -u\n $ git commit -m \"YOUR COMMIT MESSAGE\"\n ```\n\n7. रन `npm run grunt` फिर से सुनिश्चित करें कि कोई सिंटैक्स त्रुटियां, परीक्षण विफलताओं, या अन्य समस्याएं नहीं हैं।\n\n8. [पुश](https://help.github.com/articles/github-glossary/#push) गिटहब पर आपके फोर्क में आपके नए परिवर्तन।\n\n ```shell\n $ git push\n ```\n\n9. एक बार सब कुछ तैयार हो जाने के बाद, अपने परिवर्तनों को एक [पुल अनुरोध](https://help.github.com/articles/creating-a-pull-request/) के रूप में सबमिट करें।\n\n# गोचास\n\np5.js कोडबेस के साथ शामिल डेवलपर टूलिंग जानबूझकर कुछ चीजों के बारे में बहुत सख्त है। यह एक अच्छी बात है! यह सब कुछ सुसंगत बनाता है, और यह आपको अनुशासित होने के लिए प्रोत्साहित करेगा। इसका मतलब यह है कि आप अपनी परियोजना को खारिज करने के लिए केवल कुछ बदलने की कोशिश कर सकते हैं, लेकिन निराश न हों; यहां तक कि अनुभवी p5.js डेवलपर्स को हर समय इसका सामना करना पड़ता है। आमतौर पर समस्या दो क्षेत्रों में से एक में होगी, कोड सिंटैक्स या यूनिट परीक्षण।\n\n## कोड सिंटैक्स\n\np5.js को स्वच्छ और शैलीगत सुसंगत कोड सिंटैक्स की आवश्यकता होती है, जिसे वह [Prettier](https://prettier.io/) और [ESlint](https://eslint.org/) के साथ लागू करता है। आपके द्वारा किए जाने से पहले नियमों की जाँच की जाती है, लेकिन जैसे ही आप उन्हें लिखते हैं, त्रुटियों को उजागर करने के लिए आप अपने कोड संपादक के लिए [ESlint प्लगइन](https://eslint.org/docs/user-guide/integrations#editors) भी स्थापित कर सकते हैं। , जो शायद आपकी मदद करेंगे क्योंकि आप कोडिंग कर रहे हैं और आपको एक असफल Git प्रतिबद्ध की परेशानी से बचाता है। सामान्य तौर पर, हम लचीलेपन के पक्ष में गलती करते हैं, जब यह कोड शैली की बात आती है, ताकि भागीदारी और योगदान के लिए बाधाओं को कम किया जा सके।\n\nत्रुटियों का पता लगाने के लिए, अपने टर्मिनल में निम्न कमांड चलाएँ (`$` प्रांप्ट टाइप न करें):\n\n```shell\n$ npm run lint\n```\n\nकुछ सिंटैक्स त्रुटियां स्वचालित रूप से ठीक की जा सकती हैं:\n\n```shell\n$ npm run lint:fix\n```\n\nस्थापित परियोजना शैली के साथ चिपके रहना आमतौर पर बेहतर होता है, लेकिन [कभी-कभी](https://github.com/processing/p5.js/search?utf8=%E2%9C%93\\&q=prettier-ignore\\&type=) एक वैकल्पिक वाक्यविन्यास का उपयोग कर सकते हैं। अपने कोड को समझना आसान बनाएं। इन मामलों के लिए, Prettier [एक एस्केप हैच प्रदान करता है](https://prettier.io/docs/en/ignore.html), `// prettier-ignore` टिप्पणी, जिसका उपयोग आप ग्रैनुलर अपवाद बनाने के लिए कर सकते हैं। यदि आप कर सकते हैं तो इसका उपयोग करने से बचने की कोशिश करें, क्योंकि लाइनिंग द्वारा लागू अधिकांश शैली वरीयताओं के लिए अच्छे कारण हैं।\n\nयहाँ कोड शैली नियमों का एक त्वरित सारांश है। कृपया ध्यान दें कि यह सूची अधूरी हो सकती है, और [.prettierrc](https://github.com/processing/p5.js/blob/main/.prettierrc) और [.esintintrc](https://github.com/processing/p5.js/blob/main/.eslintrc) को संदर्भित करना सबसे अच्छा है।\n\n* ES6 कोड सिंटैक्स का उपयोग किया जाता है\n* सिंगल कोट्स (डबल कोट्स के बजाय) का उपयोग करें\n* इंडेंटेशन दो स्थानों के साथ किया जाता है\n* कोड में परिभाषित सभी चर का उपयोग कम से कम एक बार किया जाना चाहिए, या पूरी तरह से हटा दिया जाना चाहिए\n* X == सत्य या x == असत्य की तुलना न करें। इसके बजाय (x) या (!x) का उपयोग करें। x == सच, निश्चित रूप से अगर (x) से अलग है! यदि भ्रम की संभावना है, तो ऑब्जेक्ट्स को शून्य, संख्याओं से 0 या स्ट्रिंग्स की तुलना करें।\n* जब भी आप लिख रहे हैं, तो कार्य में अस्पष्टता या जटिलता होने पर अपना कोड कमेंट करें।\n* देखें [मोज़िला JS प्रथाओं](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style#JavaScript_practices) अधिक स्टाइलिंग टिप्स के लिए एक उपयोगी मार्गदर्शिका के रूप में।\n\n## इकाई परीक्षण\n\nइकाई परीक्षण कोड के छोटे टुकड़े होते हैं जो प्राथमिक तर्क के पूरक के रूप में बनाए जाते हैं और सत्यापन करते हैं। यदि आप p5.js के लिए एक प्रमुख नई सुविधा विकसित कर रहे हैं, तो आपको शायद परीक्षण शामिल करना चाहिए। पुल अनुरोध सबमिट न करें जिसमें परीक्षण पास नहीं होते हैं, क्योंकि इसका मतलब है कि कुछ टूट गया है।\n\nइकाई परीक्षण चलाने के लिए, आपको पहले परियोजना की निर्भरताएँ स्थापित करनी होंगी।\n\n```shell\n$ npm ci\n```\n\nयह p5.js के लिए *सभी* निर्भरताएं स्थापित करेगा; संक्षेप में, यूनिट परीक्षण के लिए सबसे महत्वपूर्ण निर्भरताएं शामिल हैं:\n\n* [मोचा](https://mochajs.org/), एक शक्तिशाली परीक्षण ढाँचा जो व्यक्तिगत परीक्षण फ़ाइलों को निष्पादित करता है जो p5.js के लिए विशिष्ट हैं\n* [मोचा-क्रोम](https://github.com/shellscape/mocha-chrome/), एक मोचा प्लगइन जो बिना सिर के गूगल क्रोम का उपयोग करके मोचा परीक्षण चलाता है\n\nएक बार निर्भरताएं स्थापित हो जाने के बाद, यूनिट परीक्षणों को चलाने के लिए ग्रंट का उपयोग करें।\n\n```shell\n$ grunt\n```\n\nकभी-कभी कमांड लाइन पर के बजाय ब्राउज़र में परीक्षण चलाना उपयोगी होता है। ऐसा करने के लिए, पहले [कनेक्ट](https://github.com/gruntjs/grunt-contrib-connect/) सर्वर शुरू करें:\n\n```shell\n$ npm run dev\n```\n\nसर्वर के चलने के साथ, आपको एक ब्राउज़र में `test/test.html` खोलने में सक्षम होना चाहिए।\n\nइकाई परीक्षण के लिए एक पूर्ण मार्गदर्शिका p5.js प्रलेखन के दायरे से परे है, लेकिन संक्षिप्त संस्करण यह है कि `src/` निर्देशिका में निहित स्रोत कोड में लागू किए गए किसी भी बड़े बदलाव या नई सुविधाओं को भी `test/` फ़ाइलों के साथ होना चाहिए लाइब्रेरी के सभी भविष्य के संस्करणों में लगातार व्यवहार को सत्यापित करने के लिए मोचा द्वारा निष्पादित किया जा सकता है। इकाई परीक्षण लिखते समय, अपने दावे संदेशों को फिर से प्रकाशित करने के लिए एक गाइड के रूप में [Chai.js संदर्भ](http://www.chaijs.com/api/assert/) का उपयोग करें ताकि भविष्य में आपके परीक्षणों द्वारा पकड़ी गई कोई भी त्रुटि लगातार और परिणामस्वरूप दूसरों को समझने के लिए आसान होगी।\n\n# विविध\n\n* [योगदानकर्ता डॉक्स](https://github.com/processing/p5.js/tree/main/contributor_docs/) फ़ोल्डर में अन्य फाइलें हैं जिन्हें आप देख सकते हैं। वे इस परियोजना के विशिष्ट क्षेत्रों, दोनों तकनीकी और गैर-तकनीकी में योगदान करने से संबंधित हैं।\n* [लुकिंग इनसाइड p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/) p5.js डेवलपमेंट वर्कफ़्लो में इस्तेमाल होने वाले टूल्स और फाइल्स का वीडियो टूर है।\n* [द कोडिंग ट्रेन का यह वीडियो](https://youtu.be/Rr3vLyP1Ods/) :train::rainbow: तकनीकी योगदान के साथ शुरू करने का अवलोकन देता है।\n* p5.js [डॉकर छवि](https://github.com/toolness/p5.js-docker/) [डॉकर](https://www.docker.com/) में आरोहित किया जा सकता है और इसका उपयोग p5 विकसित करने के लिए किया जाता है [नोड](https://nodejs.org/) जैसी आवश्यकताओं की मैन्युअल स्थापना की आवश्यकता के बिना .js या अन्यथा डॉकर की स्थापना से अलग किसी भी तरह से मेजबान ऑपरेटिंग सिस्टम को प्रभावित करना।\n* p5.js लाइब्रेरी के लिए निर्माण प्रक्रिया एक [json डेटा फ़ाइल](https://p5js.org/reference/data.json) उत्पन्न करती है, जिसमें p5.js की सार्वजनिक API होती है और इसका उपयोग स्वचालित टूलिंग में किया जा सकता है, जैसे एक संपादक में स्वतः पूर्ण p5.js विधियों के रूप में। यह फ़ाइल p5.js वेबसाइट पर होस्ट की गई है, लेकिन यह रिपॉजिटरी के हिस्से के रूप में शामिल नहीं है।\n* p5.js ने हाल ही में [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015) पर माइग्रेट किया है। यह देखने के लिए कि यह संक्रमण आपके योगदान को कैसे प्रभावित कर सकता है कृपया [es6-adoption.md](../es6-adoption/) फ़ाइल पर जाएँ।\n"},"पहुँच पर हमारा ध्यान\n":{"relativeUrl":"/contribute/access","description":"{/* लाइब्रेरी के योगदानकर्ताओं और उपयोगकर्ताओं के लिए पहुंच के प्रति हमारी प्रतिबद्धता का क्या मतलब है। */}\n\n\n\n[2019 योगदानकर्ता सम्मेलन](https://p5js.org/community/contributors-conference-2019.html) में, p5.js ने केवल नई सुविधाओं को जोड़ने की प्रतिबद्धता जताई जो पहुंच (समावेशन और पहुंच) को बढ़ाती हैं। हम उन सुविधा अनुरोधों को स्वीकार नहीं करेंगे जो इन प्रयासों का समर्थन नहीं करते हैं। हम बाधाओं को स्वीकार करने, ख़त्म करने और रोकने के कार्य के लिए प्रतिबद्ध हैं। इसका मतलब विविधता के अनुभवों को जोड़ने पर विचार करना है जो पहुंच और भागीदारी को प्रभावित कर सकते हैं। इनमें लिंग, नस्ल, जातीयता, कामुकता, भाषा, स्थान आदि का संरेखण शामिल है। हम p5.js समुदाय के भीतर विशेषाधिकार प्राप्त लोगों की निरंतर सुविधा पर हाशिए पर रहने वाले समूहों की जरूरतों को केंद्रित करते हैं। हम सामूहिक रूप से पहुंच का अर्थ तलाश रहे हैं। हम सीख रहे हैं कि कैसे अभ्यास करें और पहुंच कैसे सिखाएं। हम व्यापक, अंतर्संबंधीय और गठबंधनवादी ढांचे के माध्यम से पहुंच के बारे में सोचना चुनते हैं। यह प्रतिबद्धता हमारे [सामुदायिक वक्तव्य](https://p5js.org/about/#community-statement) में उल्लिखित p5.js के मूल मूल्यों का हिस्सा है।\n\n## पहुंच के प्रकार\n\nपहुंच बढ़ाना p5.js समुदाय में लोगों की संख्या का विस्तार करने पर केंद्रित नहीं है। यह उन लोगों के लिए p5.js को उपलब्ध कराने और उन तक पहुंच योग्य बनाने की एक निरंतर प्रतिबद्धता है, जिन्हें संरचनात्मक उत्पीड़न के परिणामस्वरूप p5.js समुदाय से बाहर रखा गया है। यह प्रतिबद्धता p5.js द्वारा प्रदान किए जाने वाले टूल और प्लेटफ़ॉर्म तक फैली हुई है। इसमें p5.js नेतृत्व की संरचना, निर्णय लेना और कार्य भी शामिल हैं। हम गति, विकास और प्रतिस्पर्धा की तकनीकी संस्कृति का विरोध करते हैं। हम सामूहिक देखभाल के कार्यों के रूप में जानबूझकर, धीमेपन, समायोजन और जवाबदेही को प्राथमिकता देते हैं।\n\nयहां पहुंच का अर्थ है p5.js को इनके लिए न्यायसंगत बनाना:\n\n* जो लोग अंग्रेजी के अलावा अन्य भाषाएं बोलते हैं\n - काले लोग, स्वदेशी लोग और रंग के लोग\n* समलैंगिक, उभयलिंगी, पैनसेक्सुअल और अलैंगिक लोग\n* ट्रांस, जेंडरफ्लुइड, एजेंडर, इंटरसेक्स, महिलाएं, और हाशिए पर अन्य लिंग वाले लोग\n* जो लोग अंधे हैं, डी/बधिर हैं[^2] या सुनने में कठिन हैं, विकलांग हैं/विकलांगता से ग्रस्त हैं, न्यूरोडायवर्जेंट हैं, और लंबे समय से बीमार हैं[^3]\n* जिन लोगों की आय कम है, या जिनके पास वित्तीय या सांस्कृतिक पूंजी तक पहुंच नहीं है\n* ओपन सोर्स और क्रिएटिव कोडिंग में बहुत कम या कोई पूर्व अनुभव नहीं रखने वाले लोग\n* विविध शैक्षिक पृष्ठभूमि के लोग\n* बच्चों और बुजुर्गों सहित सभी आयु वर्ग के लोग\n* विभिन्न तकनीकी कौशल, उपकरण और इंटरनेट पहुंच वाले लोग\n* विविध धार्मिक पृष्ठभूमि के लोग\n* अन्य लोग जिन्हें व्यवस्थित रूप से बहिष्कृत किया गया है और ऐतिहासिक रूप से कम प्रतिनिधित्व दिया गया है\n* और उसके सभी चौराहे\n\nहम अपनी-अपनी पहचान का वर्णन करने के लिए उपयोग किए जाने वाले शब्दों की जटिलता को पहचानते हैं। भाषा सूक्ष्म है, विकसित हो रही है और विवादित है। यह एक विस्तृत सूची नहीं है। हम अपनी प्रतिबद्धताओं और p5.js समुदाय की विविध आवश्यकताओं के प्रति जवाबदेह होने का प्रयास करते हैं।\n\n### उदाहरण\n\nये उन प्रयासों के उदाहरण हैं जिनके बारे में हमारा मानना है कि पहुंच में वृद्धि होगी:\n\n* दस्तावेज़ीकरण और अन्य सामग्रियों का अधिक भाषाओं में अनुवाद करना, भाषाई साम्राज्यवाद को विकेंद्रीकृत करना[^4] (उदाहरण के लिए, रोलैंडो वर्गास' [कुना भाषा में प्रसंस्करण](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in/) -कुना-लैंग्वेज-विथ-रोलैंडो-वर्गास-एंड-एडिन्सन-इज़क्विएर्डो-8079एफ14851एफ7), फेलिप सैंटोस गोम्स, जूलिया ब्रासिल, कैथरीन फिन ज़ेंडर, और मार्सेला मैनसिनो की \\[पी सिन्को: पुर्तगाली बोलने वालों के लिए अंतर्राष्ट्रीयकरण और लोकप्रियकरण]\\(https\\:// मीडियम.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/))\n* सहायक तकनीकों के लिए हमारे समर्थन में सुधार करना, जैसे कि स्क्रीन रीडर (उदाहरण के लिए, केटी लियू का [p5.js में Alt टेक्स्ट जोड़ना](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), क्लेयर किर्नी -वोल्पे का [पी5 एक्सेसिबिलिटी प्रोजेक्ट](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/))\n* हमारे टूल में \\[वेब कंटेंट एक्सेसिबिलिटी दिशानिर्देशों] ([https://www.w3.org/TR/WCAG21/](https://www.w3.org/TR/WCAG21/)) का पालन करना और उपयोगकर्ताओं के लिए अपने प्रोजेक्ट में उनका पालन करना आसान बनाने की दिशा में काम करना\n* टूल का उपयोग करने वाले लोगों के लिए p5.js त्रुटि संदेशों को अधिक उपयोगी और सहायक बनाना (उदाहरण के लिए, [p5.js फ्रेंडली एरर सिस्टम (FES)](https://github.com/processing/p5.js/blob/main/) योगदानकर्ता\\_docs/friendly\\_error\\_system.md))\n* उन समुदायों के भीतर p5.js के शिक्षार्थियों को सलाह देना और समर्थन करना, जिन्हें ऐतिहासिक रूप से रचनात्मक कोडिंग और डिजिटल कलाओं से बाहर रखा गया है और हाशिए पर रखा गया है।\n* सामुदायिक कार्यक्रमों की मेजबानी (उदाहरण के लिए, [p5.js Access Day 2022](https://p5js.org/community/p5js-access-day-2022.html), [द वेब वी वांट: p5.js x W3C TPAC 2020 )](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) एक्सेस-केंद्रित आयोजन रणनीति (उदाहरण के लिए, एएसएल व्याख्या, लाइव कैप्शनिंग, सुलभ स्थान) के साथ\n* शैक्षिक संसाधनों के निर्माण का समर्थन करना (उदाहरण के लिए, अडेकेमी सिजुवाडे-उकाडिके का [ए11वाई पाठ्यक्रम](http://a11ysyllabus.site/))\n* हमारे काम के दस्तावेज़ और रिपोर्ट प्रकाशित करना जो WCAG दिशानिर्देशों का पालन करते हैं, सरल भाषा का उपयोग करते हैं, और विविध अनुभवों से शुरुआती लोगों पर ध्यान केंद्रित करते हैं (उदाहरण के लिए, \\[OSACC p5.js एक्सेस रिपोर्ट] ([https://github.com/processing/OSACC-p5)।](https://github.com/processing/OSACC-p5\\)।) जेएस-एक्सेस-रिपोर्ट))\n\n## रखरखाव\n\nहम उन सुविधा अनुरोधों को स्वीकार नहीं कर रहे हैं जो पहुंच बढ़ाने के हमारे प्रयास का समर्थन नहीं करते हैं। आप इस मानदंड को हमारे अंक में प्रतिबिंबित देखेंगे और अनुरोध टेम्पलेट खींचेंगे। हम p5.js के मौजूदा फीचर सेट को बनाए रखने के अपने इरादे की भी पुष्टि करते हैं। हम बग्स को ठीक करना चाहेंगे, भले ही वे कोडबेस के किसी भी क्षेत्र में हों। हमारा मानना है कि टूल की स्थिरता इसे शुरुआती लोगों के लिए अधिक सुलभ बनाती है। पहुंच में सुधार करने वाले सुविधा अनुरोधों के उदाहरणों में शामिल हैं:\nकम शक्तिशाली हार्डवेयर का उपयोग करने वाले लोगों के लिए प्रदर्शन बढ़ता है (उदाहरण के लिए, फ़्रेमबफ़र्स से ड्राइंग/पढ़ने के लिए समर्थन)\nएपीआई में संगति (उदाहरण के लिए, शुरुआती आकार ()/एंडशेप () के साथ आर्क बनाने के लिए आर्क वर्टेक्स () जोड़ें)\n\n***\n\nकृपया इसे एक 'जीवित दस्तावेज़' मानें। हम इस बारे में बातचीत जारी रखेंगे कि पहुंच को प्राथमिकता देने का क्या मतलब है। हम अपने समुदाय को इस दस्तावेज़ और इसमें वर्णित मूल्यों से जुड़ने के लिए आमंत्रित करते हैं। यदि आपके पास विचार या सुझाव हैं, तो हम आपको उन्हें Github पर एक मुद्दे के रूप में या [hello@p5js.org](mailto:hello@p5js.org) पर ईमेल करके साझा करने के लिए आमंत्रित करते हैं।\n\nपी5.जेएस एक्सेस स्टेटमेंट के इस संस्करण को एवलिन मासो, नेट डेकर, बॉबी जो स्मिथ III, सैमी वीलर, सोनिया (सुह्युन) चोई, शिन शिन, केट होलेनबैक, लॉरेन ली मैक्कार्थी, कैरोलीन सिंडर्स, कियानकियान ये के सहयोग से संशोधित किया गया था। 2023 ओपन सोर्स आर्ट्स कंट्रीब्यूटर्स कॉन्फ्रेंस में ट्रिस्टन जोवानी मैग्नो एस्पिनोज़ा, तन्वी शर्मा, त्सिज टैफेस और सारा सिस्टन। इसे प्रोसेसिंग फाउंडेशन फ़ेलोशिप के सहयोग से बॉबी जो स्मिथ III और नेट डेकर द्वारा अंतिम रूप दिया गया और प्रकाशित किया गया।\n\n[^1]: क्रेंशॉ, किम्बर्ले (1989)। \"जाति और लिंग के प्रतिच्छेदन को सीमाबद्ध करना: भेदभाव विरोधी सिद्धांत, नारीवादी सिद्धांत और नस्लवाद विरोधी राजनीति की एक काली नारीवादी आलोचना\"। शिकागो विश्वविद्यालय कानूनी फोरम। 1989 (1): 139-167। आईएसएसएन 0892-5593। पूरा पाठ Archive.org पर।\n\n[^2]: कैपिटल 'डी' डेफ उन लोगों को संदर्भित करता है जो सांस्कृतिक रूप से बधिर हैं या बधिर समुदाय का हिस्सा हैं, जबकि लोअर केस 'डी' डेफ एक ऑडियोलॉजिकल शब्द है जो बधिर पहचान से जुड़े लोगों का वर्णन नहीं कर सकता है।\n\n[^3]: विकलांगता समुदाय के भीतर 'व्यक्ति-प्रथम' बनाम 'पहचान-प्रथम' भाषा के बीच अलग-अलग प्राथमिकताएँ हैं। पढ़ें \\[ऑटिज़्म समुदाय में व्यक्ति-प्रथम बनाम पहचान-प्रथम भाषा पर बहस को खोलना]\\([https://news.northeaster.edu/2018/07/12/unpacking-the-debate-over-person-first-vs](https://news.northeaster.edu/2018/07/12/unpacking-the-debate-over-person-first-vs) -पहचान-प्रथम-भाषा-में-ऑटिज्म-समुदाय/) और \\[मैं विकलांग हूं: पहचान-प्रथम बनाम लोग-प्रथम भाषा पर]\\([https://thebodyisnotanapology.com/magazine/i-am-disabled-on](https://thebodyisnotanapology.com/magazine/i-am-disabled-on) -पहचान-प्रथम-बनाम-लोग-प्रथम-भाषा/)।\n\n[^4]: भाषाई साम्राज्यवाद, या भाषा साम्राज्यवाद, शाही विस्तार और वैश्वीकरण के कारण मूल भाषाओं की कीमत पर अंग्रेजी जैसी कुछ भाषाओं के चल रहे वर्चस्व/प्राथमिकता/थोपे जाने को संदर्भित करता है।\n"},"p5.js संदर्भ में योगदान\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* सही प्रारूप का उपयोग करके p5.js संदर्भ लिखें और संपादित करें। */}\n\n\n\np5.js में, हम p5.js वेबसाइट पर [संदर्भ](https://p5js.org/reference/) पृष्ठ पर दिखाई देने वाले कोड संदर्भ का योगदान करते हैं जिन्हें लाइब्रेरी के स्रोत कोड के साथ शामिल किया गया है विशेषज्ञ टिप्पणियों के रूप में। ये संदर्भ टिप्पणियाँ विवरण, समारोह की हस्ताक्षर (इसके पैरामीटर और वापसी मान), और उपयोग उदाहरणों को सम्मिलित करती हैं। अन्य शब्दों में, प्रत्येक p5.js फ़ंक्शन/चर के संदर्भ पृष्ठ पर का सामग्री स्रोत कोड में संदर्भ टिप्पणियों से निर्मित होता है।\n\nइस दस्तावेज़ का उद्देश्य आपको संदर्भ टिप्पणियों को कैसे लिखें और स्वरूपित करें ताकि वे अंत में वेबसाइट पर सही ढंग से प्रस्तुत किए जा सकें, यह दिखाना है। जब भी आप किसी p5.js फ़ंक्शन या चर के लिए संदर्भ संपादित या लिखते हैं, तो आपको इस गाइड का पालन करना चाहिए।\n\n## संदर्भ टिप्पणी काम कैसे करते हैं का एक त्वरित परिचय\n\np5.js के स्रोत कोड को देखने पर, आपको लाइब्रेरी में कई पंक्तियों में संदर्भ टिप्पणियाँ दिखाई देंगी; वे इस तरह से दिखती हैं:\n\n```\n/**\n * एक कोण का साइन कैलकुलेट करता है। sin() बहुत से रचनात्मक कोडिंग में ज्यामिति कार्यों के लिए उपयोगी होता है।\n * इनपुट कोण बढ़ने पर वापसी की गई मान बीच -1 और 1 के बीच ओसिलेट करती है।\n * sin() में वर्तमान को संज्ञान में लेता है।\n * <a href=\"#/p5/angleMode\">angleMode</a>.\n *\n * @method sin\n * @param {Number} angle the angle.\n * @return {Number} sine of the angle.\n *\n * @example\n * <div>\n * <code>\n * function draw() {\n * background(200);\n *\n * let t = frameCount;\n * let x = 50;\n * let y = 30 * sin(t * 0.05) + 50;\n * line(x, 50, x, y);\n * circle(x, y, 20);\n *\n * describe('A white ball on a string oscillates up and down.');\n * }\n * </code>\n * </div>\n *\n * <div>\n * <code>\n * function draw() {\n * let x = frameCount;\n * let y = 30 * sin(x * 0.1) + 50;\n * point(x, y);\n *\n * describe('A series of black dots form a wave pattern.');\n * }\n * </code>\n * </div>\n *\n * <div>\n * <code>\n * function draw() {\n * let t = frameCount;\n * let x = 30 * cos(t * 0.1) + 50;\n * let y = 10 * sin(t * 0.2) + 50;\n * point(x, y);\n *\n * describe('A series of black dots form an infinity symbol.');\n * }\n * </code>\n * </div>\n */\n```\n\nउन्हें आमतौर पर वास्तविक जावास्क्रिप्ट कोड के साथ अनुसरण किया जाता है जो फ़ंक्शन को परिभाषित करता है। संदर्भ टिप्पणियाँ हमेशा `/**` से शुरू होती हैं और `*/` से समाप्त होती हैं, जिसमें दोनों के बीच की प्रत्येक पंक्ति `*` से शुरू होती है।\n\nइस तरह के ब्लॉक में कोई भी चीज संदर्भ दस्तावेज़ के रूप में निर्वाचित की जाएगी। आप इस कोड टिप्पणियों के इस स्टाइल के माध्यम से परिचित हो सकते हैं [JSDoc](https://jsdoc.app/) के माध्यम से। p5.js ,JSDoc का उपयोग नहीं करता है, बल्कि यह बहुत ही समान उपकरण का उपयोग करता है जिसे [YUIDoc](https://yui.github.io/yuidoc/) कहा जाता है, जिसमें एक बहुत ही समान संदर्भ वाक्य संरचना है। इस स्टाइल के संदर्भ टिप्पणियों में, प्रत्येक टिप्पणी ब्लॉक को और अधिक व्यक्तिगत तत्वों में विभाजित किया गया है, जिस पर हम अगले में एक नज़र डालेंगे। \n\n## संदर्भ टिप्पणी ब्लॉक\n\nऊपर दिए गए `sin()` फ़ंक्शन के लिए संदर्भ टिप्पणियों ब्लॉक को विश्लेषित करें और देखें कि प्रत्येक खंड का क्या काम है। आप यहाँ टिप्पणियों में दिखने वाली जानकारी और `sin()` के संदर्भ पृष्ठ पर जो दिखता है, उनकी तुलना कर सकते हैं। ([`sin()`](https://p5js.org/reference/p5/sin/))\n\n```\n/**\n * एक कोण का साइन कैलकुलेट करता है। sin() बहुत से रचनात्मक कोडिंग में ज्यामिति कार्यों के लिए उपयोगी होता है।\n * इनपुट कोण बढ़ने पर वापसी की गई मान बीच -1 और 1 के बीच ओसिलेट करती है। \n * `sin()` में वर्तमान को संज्ञान में लेता है।\n * <a href=\"#/p5/angleMode\">angleMode</a>.\n```\n\nटिप्पणी के बहुत ऊपर, फ़ंक्शन का पाठित वर्णन होता है। यह वर्णन मार्कडाउन सिंटेक्स और HTML दोनों को समाविष्ट कर सकता है। विवरण संक्षिप्त होना चाहिए और फ़ंक्शन के क्या काम करता है और, यदि आवश्यक हो, उसकी कुछ विशेषताओं या व्यवहार के बारे में कुछ विवरण करना चाहिए।\n\n```\n * @method sin\n * @param {Number} angle the angle.\n * @return {Number} sine of the angle.\n```\n\nएक फ़ंक्शन के आमतौर पर ऊपर वर्णित तीन खंड होते हैं, प्रत्येक एक `@` प्रतीक से शुरू होता है और इनमें से एक निम्नलिखित कीवर्डों में से एक के साथ आता है:\n\n* `@method` को फ़ंक्शन का नाम परिभाषित करने के लिए प्रयोग किया जाता है, इस मामले में `sin` (ध्यान दें कि फ़ंक्शन का नाम ब्रैकेट `()` को समाविष्ट नहीं करता है)।\n* `@param` को फ़ंक्शन द्वारा स्वीकार किए जाने वाले पैरामीटर या तर्क को परिभाषित करने के लिए प्रयोग किया जाता है।\n * `@param` के पीछे, मध्यम कोष्ठक `{}` में संग्रहित, पैरामीटर का प्रकार होता है।\n * प्रकार के बाद, अगला शब्द (कोण) पैरामीटर का नाम होता है।\n * नाम के बाद, पंक्ति का शेष भाग पैरामीटर का विवरण होता है।\n* `@return` को फ़ंक्शन की वापसी मान को परिभाषित करने के लिए प्रयोग किया जाता है।\n * `@return` के पीछे, मध्यम कोष्ठक `{}` में संग्रहित, वापसी मान का प्रकार होता है।\n * प्रकार के बाद, पंक्ति का शेष भाग वापसी मान का विवरण होता है।\n\nपैरामीटरों के लिए अधिक सामान्य रूप में, आपको इस प्रारूप का पालन करना चाहिए:\n\n```\n@param {type} name Description here.\n```\n\nयदि पैरामीटर वैकल्पिक है, तो नाम के आसपास वर्गाकार ब्रैकेट जोड़ें:\n\n```\n@param {type} [name] Description here.\n```\n\n### अतिरिक्त जानकारी: स्थिरांक\n\nयदि पैरामीटर [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js) में परिभाषित एक या एक से अधिक मानों को लेता है, तो प्रकार को `{Constant}` के रूप में निर्दिष्ट किया जाना चाहिए और मान्य मानों को `either` की प्रतिलिपि के बाद की टिप्पणी में व्यवस्थित किया जाना चाहिए, जैसे:\n\n```\n@param {Constant} horizAlign horizontal alignment, either LEFT, CENTER, or RIGHT\n```\n\nवापसी प्रकारों के लिए, आपको इस प्रारूप का पालन करना चाहिए:\n\n```\n@return {type} Description of the data returned.\n```\n\nयदि फ़ंक्शन कोई मान नहीं वापस भेजता है, तो `@return` टैग छोड़ दिया जा सकता है।\n\n### अतिरिक्त जानकारी: चेनिंग\n\nयदि विधि मात्र अभिभावक ऑब्जेक्ट को वापस करती है, तो आप `@return` टैग को छोड़ सकते हैं और इस बजाय इस पंक्ति को जोड़ सकते हैं:\n\n```\n@chainable\n```\n\n## अतिरिक्त चिन्ह\n\nयदि किसी फ़ंक्शन के पास कई संभावित पैरामीटर विकल्प हैं, तो आप प्रत्येक को व्यक्तिगत रूप से निर्दिष्ट कर सकते हैं। उदाहरण के लिए, [`background()`](https://p5js.org/reference/#p5/background/) फ़ंक्शन कई विभिन्न पैरामीटर विकल्प लेता है (संदर्भ पृष्ठ पर \"सिंटैक्स\" खण्ड देखें)। पहले हस्ताक्षर के रूप में एक संस्करण को चुनें और उसे पहले संदर्भ टिप्पणी ब्लॉक के अंत में जोड़ें, निम्नलिखित उदाहरण का पालन करें। पहले संदर्भ टिप्पणी ब्लॉक के अंत में, आप अतिरिक्त हस्ताक्षर जोड़ सकते हैं, प्रत्येक अपने ब्लॉक में, केवल `@method` और `@param` टैग का पालन करते हुए, निम्नलिखित उदाहरण का पालन करें।\n\n```\n/**\n * @method background\n * @param {String} colorstring color string, possible formats include: integer\n * rgb() or rgba(), percentage rgb() or rgba(),\n * 3-digit hex, 6-digit hex\n * @param {Number} [a] alpha value\n */\n\n/**\n * @method background\n * @param {Number} gray specifies a value between white and black\n * @param {Number} [a]\n */\n```\n\n### अतिरिक्त जानकारी: विभिन्न चिन्ह\n\nअगर दो चिन्हों के बीच एक ही अंतर केवल एक वैकल्पिक पैरामीटर के जोड़ने का है, तो एक अलग चिन्ह बनाना आवश्यक नहीं है। इस सुविधा का उपयोग संभव होते हुए सीमित करें क्योंकि यह संदर्भ में अनावश्यक शोर उत्पन्न कर सकता है।\n\n## p5.js चरों के लिए संदर्भ\n\nअब तक, हमने फ़ंक्शन और स्थिरांकों के लिए संदर्भ कैसे लिखें इसे देखा है। चर भी एक ही संरचना का पालन करते हैं, लेकिन विभिन्न टैग का प्रयोग करते हैं।\n\n```\n/**\n * सिस्टम चर mouseX हमेशा माउस के वर्तमान केंद्रीय स्थान को संदर्भित करता है,\n * कैनवास के (0, 0) के प्रति। शीर्ष-बाएं कोने में मान (0, 0) होता है\n * 2-डी के लिए और WebGL के लिए (-चौड़ाई/2, -ऊचाई/2)।\n * यदि माउस इनपुट की जगह स्पर्श का उपयोग किया जाता है, तो mouseX एक्स वैल्यू को धारण करेगा\n * सबसे हाल के स्पर्श बिंदु की।\n *\n * @property {Number} mouseX\n * @readOnly\n *\n * @example\n * <div>\n * <code>\n * // Move the mouse across the canvas\n * function draw() {\n * background(244, 248, 252);\n * line(mouseX, 0, mouseX, 100);\n * describe('horizontal black line moves left and right with mouse x-position');\n * }\n * </code>\n * </div>\n */\n```\n\nब्लॉक की शुरुआत में चर का वर्णन होता है (`mouseX` इस मामले में)। चर का नाम परिभाषित करने के लिए, हम `@method` के बजाय `@property` का प्रयोग करते हैं। `@property` पैरामीटर के लिए वही नियमावली का पालन करता है जो `@param` के लिए होता है, उसके प्रकार और उसके नाम को परिभाषित करने के लिए। `@readonly` टैग अधिकांश p5.js चरों पर मौजूद होता है और इसका उपयोग आंतरिक रूप से किया जाता है ताकि इस मान को एक पुस्तकालय उपयोगकर्ता द्वारा सीधे अधिलेखित न किया जाए।\n\n## उदाहरण जोड़ना\n\nजिस टैग की हमने अभी तक चर्चा नहीं की है, वह है `@example` टैग, जो `sin()` और `mouseX` के संदर्भ टिप्पणियों में मौजूद है। यह टैग उस स्थान को परिभाषित करता है जहाँ आप संदर्भ पृष्ठ पर जाते समय चलाया जाने वाला कोड उदाहरण(ओं) को परिभाषित करता है।\n\n\n\nउपरोक्त चित्र को बनाने के लिए उपयुक्त `@example` टैग निम्नलिखित है:\n\n```\n * @example\n * <div>\n * <code>\n * const c = color(255, 204, 0);\n * fill(c);\n * rect(15, 20, 35, 60);\n * // Sets 'redValue' to 255.\n * const redValue = red(c);\n * fill(redValue, 0, 0);\n * rect(50, 20, 35, 60);\n * describe(\n * 'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'\n * );\n * </code>\n * </div>\n```\n\n`@example` टैग के बाद, आपको एक HTML `<div>` टैग शुरू करना चाहिए जिसके बाद एक `<code>` टैग आता है। खुलने और बंद होने वाले `<code>` टैग के बीच, आप संबंधित उदाहरण कोड डालेंगे। संदर्भ के लिए अच्छे उदाहरण कोड लिखने का मूल सिद्धांत चीजों को सरल और न्यूनतम रखना है। उदाहरण का मायने होना चाहिए और यह बिना जटिल होने के साथ यह समझाना चाहिए कि विशेषता कैसे काम करती है। उदाहरण के कैनवास का आकार 100x100 पिक्सेल होना चाहिए और यदि `setup()` फ़ंक्शन शामिल नहीं किया गया है, जैसा कि ऊपर के उदाहरण में, तो कोड को स्वचालित रूप से एक डिफ़ॉल्ट 100x100 पिक्सेल के ग्रे बैकग्राउंड कैनवास के साथ `setup()` फ़ंक्शन में लपेट दिया जाएगा। हम यहां उदाहरण कोड के लिए श्रेष्ठ प्रथाओं और कोड शैली के विवरण में नहीं जाएंगे; कृपया बजाय में संदर्भ शैली गाइड देखें।\n\nआप एक विशेषता के लिए एक से अधिक उदाहरण रख सकते हैं। इसके लिए, पहले बंद `<div>` के बाद एक अतिरिक्त `<div>` और `<code>` HTML ब्लॉक जोड़ें, जो एक खाली पंक्ति से अलग हो।\n\n```\n* @example\n* <div>\n* <code>\n* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n* describe('An ellipse created using an arc with its top right open.');\n* </code>\n* </div>\n* \n* <div>\n* <code>\n* arc(50, 50, 80, 80, 0, PI, OPEN);\n* describe('The bottom half of an ellipse created using arc.');\n* </code>\n* </div>\n```\n\nयदि आप चाहते हैं कि संदर्भ पृष्ठ आपके उदाहरण कोड को नहीं चलाए (अर्थात, आप चाहते हैं कि केवल कोड प्रदर्शित हो), तो `<div>` में \"norender\" वर्ग शामिल करें:\n\n```\n* @example\n* <div class=\"norender\">\n* <code>\n* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n* describe('ellipse created using arc with its top right open');\n* </code>\n* </div>\n```\n\nयदि आप चाहते हैं कि उदाहरण को ऑटोमेटेड टेस्ट का हिस्सा के रूप में नहीं चलाया जाए (उदाहरण के लिए, यदि उदाहरण में उपयोगकर्ता संवाद की आवश्यकता हो), तो `<div>` में \"notest\" वर्ग शामिल करें:\n\n```\n* @example\n* <div class='norender notest'><code>\n* function setup() {\n* let c = createCanvas(100, 100);\n* saveCanvas(c, 'myCanvas', 'jpg');\n* }\n* </code></div>\n```\n\nयदि आपका उदाहरण बाहरी संसाधन फ़ाइलों का उपयोग करता है, तो उन्हें [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) फ़ोल्डर में रखें (या पहले से वहां मौजूद कोई उपयोग करें) फिर उन्हें कोड में \"assets/filename.ext\" के साथ लिंक करें। उदाहरण के लिए [tint()](https://p5js.org/reference/p5/tint/) संदर्भ देखें।\n\n### `describe()` का उपयोग करके कैनवास का विवरण जोड़ें\n\nअंतिम रूप में, आपको हर उदाहरण के लिए p5.js फ़ंक्शन `describe()` का उपयोग करना आवश्यक है ताकि कैनवास के लिए एक स्क्रीन-रीडर एक्सेसिबल विवरण बनाया जा सके। केवल एक पैरामीटर शामिल करें: एक स्ट्रिंग जिसमें कैनवास पर क्या हो रहा है, इसका संक्षिप्त विवरण हो।\n\n```\n* @example\n* <div>\n* <code>\n* let xoff = 0.0;\n* function draw() {\n* background(204);\n* xoff = xoff + 0.01;\n* let n = noise(xoff) * width;\n* line(n, 0, n, height);\n* describe('A vertical line moves randomly from left to right.');\n* }\n* </code>\n* </div>\n* \n* <div>\n* <code>\n* let noiseScale = 0.02;\n* function draw() {\n* background(0);\n* for (let x = 0; x < width; x += 1) {\n* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);\n* stroke(noiseVal*255);\n* line(x, mouseY + noiseVal * 80, x, height);\n* }\n* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');\n* }\n* </code>\n* </div>\n```\n\n`describe()` पर अधिक जानकारी के लिए [web accessibility contributor documentation](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions) पर जाएं।\n\nऊपर दिए गए सभी तत्वों के साथ, आपके पास p5.js संदर्भ टिप्पणियों को लिखने और संपादित करने के लिए अधिकांश उपकरण होने चाहिए। हालांकि, p5.js में आपके सामने कुछ और विशेष उपयोग होते हैं जो JSDoc शैली की संदर्भ टिप्पणियों के विशेष प्रयोग होते हैं। ये परिस्थितिकी रूप से उपयोगी होते हैं और अक्सर जरूरी नहीं होते।\n\n### `@private` टैग\n\nआप `@private` टैग का उपयोग कर सकते हैं अगर कोई गुप्त फ़ंक्शन या चर है। यदि किसी विशेषता को `@private` के रूप में चिह्नित किया जाता है तो यह वेबसाइट पर रेंडर किए गए संदर्भ का हिस्सा नहीं होगा। `@private` टैग का उपयोग एक संदर्भ टिप्पणियों ब्लॉक को निजी रूप में चिह्नित करने के लिए किया जाता है जब आप पुस्तकालय के लिए आंतरिक विशेषताओं का विवरण करते हैं। उदाहरण के लिए, नीचे `_start` के संदर्भ टिप्पणियों को देखें:\n\n```\n/**\n * _start calls preload() setup() and draw()\n * \n * @method _start\n * @private\n */\np5.prototype._start = function () {\n```\n\n### `@module` और संबंधित टैग\n\nप्रत्येक स्रोत कोड फ़ाइल के शीर्ष पर एक `@module` टैग होगा। मॉड्यूल p5.js में एक समूह का प्रतिनिधित्व करते हैं जो वेबसाइट पर रेंडर किए गए संदर्भ पृष्ठ पर उपयोगकर्ता द्वारा उपयोग की जाने वाली विशेषताओं में विभाजित होता है। प्रत्येक मॉड्यूल में, `@submodule` टैग के साथ अतिरिक्त उपमॉड्यूल परिभाषित होते हैं।\n\n`@for` टैग इस मॉड्यूल और कुल `p5` क्लास के बीच संबंध को परिभाषित करता है, यहां कहना प्रभावी रूप से कि यह मॉड्यूल `p5` क्लास का हिस्सा है।\n\n`@requires` टैग वर्तमान मॉड्यूल के लिए आवश्यक आयातित मॉड्यूल को परिभाषित करता है जिस पर वर्तमान मॉड्यूल का निर्भर करता है।\n\n```\n/**\n * @module Color\n * @submodule Creating & Reading\n * @for p5\n * @requires core\n * @requires constants\n */\n```\n\np5.js का अनुसरण किया जाने वाला शैली यह है कि `src/` फ़ोल्डर में प्रत्येक सबफ़ोल्डर एक `@module` होगा जबकि सबफ़ोल्डर में शामिल हर फ़ाइल अपने उपयुक्त सबफ़ोल्डर के `@module` के तहत अपना खुद का `@submodule` होगा। p5.js स्रोत कोड में नए सबफ़ोल्डर/फ़ाइल नहीं जोड़ रहे हैं तो आपको इस संदर्भ टिप्पणियों ब्लॉक को संपादित करने की आवश्यकता नहीं होनी चाहिए।\n\n### `@class` टैग\n\nक्लास निर्माताओं को `@class` टैग और `@constructor` टैग के साथ परिभाषित किया जाता है। इस ब्लॉक के लिए प्रारूप एक समूची फ़ंक्शन के प्रारूप के समान होता है, क्लास का नाम `@class` टैग के साथ परिभाषित किया जाना चाहिए और `@constructor` टैग इस बात को सूचित करेगा कि क्लास में एक कंस्ट्रक्टर फ़ंक्शन है। `p5.Color` क्लास के लिए नीचे उदाहरण देखें:\n\n```\n/**\n * एक वर्ण को वर्णन करने के लिए एक क्लास। प्रत्येक `p5.Color` ऑब्जेक्ट रंग मोड\n * और स्तर की अधिकतम जो कि उसके निर्माण के दौरान सक्रिय थे। ये मान हैं\n * ऑब्जेक्ट के निर्माण में पारित विशेषताओं का व्याख्या करने के लिए उपयोग किए जाते हैं। वे\n * आउटपुट प्रारूपिकरण की भी निर्धारित करते हैं जैसे कि जब\n * <a href=\"#/p5/saturation\">saturation()</a> is called.\n *\n * रंग को आंतरिक रूप से एक आदर्श RGBA मानों की एक सरणी के रूप में संग्रहीत किया जाता है, जो 0 से 1 तक नॉर्मलाइज़ किया गया है। ये मान उपयोग किए जाते हैं\n * सबसे निकटतम स्क्रीन रंगों की गणना करने के लिए, जो 0 से 255 तक के RGBA स्तर होते हैं। स्क्रीन रंग\n * प्रेषित किए जाते हैं रेंडरर को।\n *\n * जब विभिन्न रंग प्रतिनिधित्वों की गणना की जाती है, तो परिणाम को प्रदर्शन के लिए कैश किया जाता है\n * प्रदर्शन। ये मान नॉर्मलाइज़ किए गए, फ़्लोटिंग-पॉइंट संख्याएँ हैं।\n *\n * <a href=\"#/p5/color\">color()</a> is the recommended way to create an instance\n * of this class.\n *\n * @class p5.Color\n * @constructor\n * @param {p5} [pInst] pointer to p5 instance.\n *\n * @param {Number[]|String} vals an array containing the color values\n * for red, green, blue and alpha channel\n * or CSS color.\n */\n```\n\n## संदर्भ उत्पन्न करना और पूर्वावलोकन करना\n\np5.js रिपॉजिटरी इस तरह से सेट अप किया गया है कि आपको p5.js वेबसाइट को बिल्ड और चलाने की आवश्यकता न होने पर भी संदर्भ को उत्पन्न और पूर्वावलोकन कर सकते हैं।\n\n* स्रोत कोड में संदर्भ टिप्पणियों से संदर्भ उत्पन्न करने का मुख्य आदेश निम्नलिखित कमांड को चलाना है। \n\n```\nnpm run docs\n```\n\nयह आवश्यक पूर्वावलोकन फ़ाइलें और मुख्य `docs/reference/data.json` फ़ाइल को उत्पन्न करेगा, जो समान फ़ाइल (संक्षेपन के बाद) है जो वेबसाइट पर संदर्भ पृष्ठ को प्रस्तुत करने के लिए उपयोग किया जाएगा।\n\n* संदर्भ पर निरंतर कार्य के लिए आप निम्न कमांड चला सकते हैं।\n\n```\nnpm run docs:dev\n```\n\nयह प्रस्तुत किए गए संदर्भ का एक लाइव पूर्वावलोकन लॉन्च करेगा जो हर बार आपके द्वारा परिवर्तन करने पर अपडेट हो जाएगा (आपको परिवर्तन करने के बाद उन्हें प्रदर्शित होते देखने के लिए पृष्ठ को ताज़ा करना होगा)। यह उपयोगी है, विशेष रूप से ब्राउज़र में चल रहे उदाहरण कोड का पूर्वावलोकन करने के लिए।\n\n* मुख्य टेम्पलेट फ़ाइलें `docs/` फ़ोल्डर में संग्रहित हैं और अधिकांश मामलों में, आपको इस फ़ोल्डर में फ़ाइलों में सीधे परिवर्तन नहीं करने चाहिए, केवल नए संपत्ति फ़ाइलों को `docs/yuidoc-p5-theme/assets` फ़ोल्डर में जोड़ने के लिए।\n\n## अगले कदम\n\nसंदर्भ प्रणाली के अतिरिक्त विवरण के लिए, आप [JSDoc](https://jsdoc.app/) और [YUIDoc](https://yui.github.io/yuidoc/) के दस्तावेज़ को देख सकते हैं।\n\nसंदर्भ से संबंधित मुद्दों के उदाहरण के लिए, [#6519](https://github.com/processing/p5.js/issues/6519/) और [#6045](https://github.com/processing/p5.js/issues/6045/) पर नज़र डालें। [योगदानकर्ता दिशानिर्देश](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md) दस्तावेज़ भी एक अच्छा स्थान है शुरू करने के लिए।\n"},"स्टीवर्ड दिशानिर्देश\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* p5.js में योगदान को प्रबंधित और समीक्षा करने के तरीके के बारे में जानें। */}\n\n\n\nचाहे आप हाल ही में हमारे साथ स्टीवर्ड के रूप में शामिल हुए हों, p5.js के अनुभवी रखरखावकर्ता हों, या कहीं बीच में हों, यह गाइड जानकारी के साथ-साथ उन सुझावों और ट्रिक्स को शामिल करता है जो आपको p5.js में प्रभावी योगदान देने में मदद करेगा। यहां लिखा गया अधिकांश दिशानिर्देश हैं, अगर कुछ और नहीं बताया गया है, तो इसका अर्थ है कि आप यहां दिखाए गए अभ्यासों को अपने काम के लिए अनुकूल बना सकते हैं।\n\n## विषय सूची\n\n* [समस्याएँ](../steward_guidelines.md#समस्याएँ/)\n\n * [बग रिपोर्ट](../steward_guidelines.md#बग-रिपोर्ट/)\n * [सुविधा अनुरोध](../steward_guidelines.md#सुविधा-अनुरोध/)\n * [सुविधा विस्तार](../steward_guidelines.md#सुविधा-विस्तार/)\n * [चर्चा](../steward_guidelines.md#चर्चा/)\n\n* [पुल-रिक्वेस्ट](../steward_guidelines.md#पुल-रिक्वेस्ट/)\n\n * [सरल सुधार](../steward_guidelines.md#सरल-सुधार/)\n * [बग फ़िक्स](../steward_guidelines.md#बग-फ़िक्स/)\n * [नई सुविधा/सुविधा वृद्धि](../steward_guidelines.md#नई-सुविधासुविधा-वृद्धि/)\n * [डिपेंडेबॉट](../steward_guidelines.md#डिपेंडेबॉट/)\n\n* [निर्माण प्रक्रिया](../steward_guidelines.md#निर्माण-प्रक्रिया/)\n\n * [मुख्य निर्माण कार्य](../steward_guidelines.md#मुख्य-निर्माण-कार्य/)\n * [विविध कार्य](../steward_guidelines.md#विविध-कार्य/)\n\n* [युक्तियाँ और ट्रिक्स](../steward_guidelines.md#युक्तियाँ-और-ट्रिक्स/)\n\n * [उत्तर टेम्पलेट](../steward_guidelines.md#उत्तर-टेम्पलेट/)\n * [गिटहब सीएलआई](../steward_guidelines.md#गिटहब-सीएलआई/)\n * [सूचनाओं का प्रबंधन](../steward_guidelines.md#सूचनाओं-का-प्रबंधन/)\n\n***\n\n## समस्याएँ\n\nहम अधिकांश स्रोत कोड योगदानों को एक समस्या के साथ शुरू करने की प्रोत्साहना करते हैं, क्योंकि समस्या वह स्थान हैं जहां अधिकांश चर्चाएं होंगी। किसी मुद्दे की समीक्षा करते समय उठाए जाने वाले कदम इस बात पर निर्भर करेंगे कि यह किस प्रकार का मुद्दा है। रेपो विभिन्न प्रकार की समस्याओं को बेहतर ढंग से व्यवस्थित करने और समस्या लेखकों को अपनी समस्याओं के बारे में सभी प्रासंगिक जानकारी प्रदान करने के लिए [गिटहब समस्या टेम्पलेट](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) का उपयोग करती है। समस्या की समीक्षा का पहला कदम अक्सर भरे गए टेम्पलेट को देखना होगा और यह तय करना होगा कि क्या आपको अतिरिक्त जानकारी की आवश्यकता है (जैसे कि कुछ क्षेत्र भरे नहीं गए हों या गलत टेम्पलेट का प्रयोग किया गया हो)।\n\n### बग रिपोर्ट\n\nबग रिपोर्ट समस्याओं को \"बग मिला\" (`Found a bug`) समस्या टेम्पलेट का प्रयोग करना चाहिए। बग रिपोर्ट का समाधान करने के लिए निम्नलिखित कार्यक्रम सामान्य होता है:\n\n1. बग को अनुकृत करें\n * टेम्प्लेट का लक्ष्य समीक्षक को संबंधित बग को दोहराने का प्रयास करने के लिए पर्याप्त जानकारी प्रदान करना है।\n * यदि रिपोर्ट किया गया बग वर्तमान रेपो के लिए प्रासंगिक नहीं है (p5.js, p5.js-वेबसाइट, या अन्यत्र):\n * यदि आपके पास संबंधित रेपो तक पहुंच है, तो इसे स्थानांतरित करें।\n * अन्यथा, एक टिप्पणी छोड़ें जिसमें बग रिपोर्ट को कहां फाइल किया जाना चाहिए (सीधा लिंक सहित) और समस्या को बंद करें।\n * बग रिपोर्ट की समीक्षा करने में पहला कदम यह देखना है कि बग प्रतिकृति के लिए पर्याप्त जानकारी प्रदान की गई है या नहीं, और यदि हां, तो वर्णित अनुसार बग को दोहराने का प्रयास करें।\n2. अगर बग प्रतिरूपित किया जा सकता है:\n * किसी विशेष बग को सही करने का सबसे अच्छा तरीका निर्धारित करने के लिए कुछ चर्चा की जा सकती है। कभी-कभी, यह सीधा हो सकता है; कभी-कभी, यह कठिन हो सकता है। कृपया इस निर्णय को एक मामला-दर-मामला आधार पर लेते समय [p5.js' डिज़ाइन सिद्धांतों](../design_principles/) का उल्लेख करें।\n * यदि समस्या लेखक ने समस्या में इस संकेत किया है कि वे एक सुधार योगदान देने के लिए तत्पर हैं:\n * कॉमेंट छोड़कर समस्या को सुधारने के लिए समस्या लेखक को स्वीकृत करें और उन्हें समस्या के लिए असाइन करें। \"असाइनी (`Assignee`)\" के बगल में \"टोलिया (`cog button`)\" का उपयोग करें।\n * यदि समस्या लेखक कोई सुधार नहीं करना चाहते हैं:\n * बग प्रतिरूपित होने का स्वीकृति छोड़ें।\n * बग को स्वयं ठीक करने का प्रयास करें या बग को ठीक करने की आवश्यकता होने पर मदद की जरूरत के लिए `मदद चाहिए (help wanted)` लेबल जोड़ें।\n3. यदि बग प्रतिरूपित नहीं हो सकता है:\n * अअतिरिक्त जानकारी के लिए पूछें जो पहले से ही टेम्पलेट में प्रदान नहीं की गई है (p5.js संस्करण, ब्राउज़र संस्करण, ओएस संस्करण आदि)।\n * यदि आपका परीक्षण पर्याप्त नहीं है जो समस्या में रिपोर्ट किया गया है (उदाहरण के लिए, एक अलग ब्राउज़र या ओएस):\n * एक टिप्पणी छोड़ें कि आप अपने विशिष्ट पर्यावरण में प्रतिरूपित नहीं कर सकते हैं।\n * बग को प्रतिरूपित करने के लिए `मदद चाहिए (help wanted)` लेबल जोड़ें और समस्या को जिन निर्दिष्ट सेटअप के साथ प्रतिरूपित किया गया है, उनसे बग को प्रतिरूपित करने के लिए कहें।\n * कभी-कभी, बग केवल वेब संपादक के उपयोग करते समय ही होते हैं और स्थानीय टेस्ट करते समय नहीं। इस मामले में, समस्या को [वेब संपादक रेपो](https://github.com/processing/p5.js-web-editor/) की ओर पुनर्निर्देशित किया जाना चाहिए।\n * यदि प्रतिरूपण बाद में संभव है, तो कदम 2 पर वापस जाएं।\n4. यदि बग उपयोगकर्ता द्वारा प्रदान किए गए कोड से आता है और p5.js के व्यवहार से नहीं:\n * यह निर्धारित करें कि क्या p5.js दस्तावेज़ीकरण, कोड कार्यान्वयन, या मित्रसंपर्क त्रुटि प्रणाली को सुधारा जा सकता है ताकि वही गलती फिर से न हो।\n * कृपया आगे किसी भी परिवर्तन के लिए [मंच](https://discourse.processing.org/) या [डिस्कॉर्ड](https://discord.com/invite/SHQ8dH25r9/) पर और अधिक प्रश्न अद्यतन करें और यदि p5.js में कोई अधिक परिवर्तन नहीं करना है, तो समस्या को बंद करें।\n\n### सुविधा अनुरोध\n\nसुविधा अनुरोध \"नई सुविधा अनुरोध\" समस्या टेम्पलेट का उपयोग करनी चाहिए। सुविधा अनुरोध को सम्बोधित करने के लिए निम्नलिखित वर्कफ़्लो सामान्य है:\n\n1. पहुंच बढ़ाने के लिए p5.js की प्रतिबद्धता के हिस्से के रूप में, एक सुविधा अनुरोध को यह मामला बनाना चाहिए कि यह उन समुदायों तक p5.js की पहुंच कैसे बढ़ाता है जो ऐतिहासिक रूप से क्षेत्र में हाशिए पर हैं। अधिक विवरण [यहां](../access/) उपलब्ध हैं।\n * यदि कोई सुविधा अनुरोध \"पहुंच बढ़ाने\" क्षेत्र को पर्याप्त रूप से भरा नहीं है, तो आप समस्या लेखक से सुविधा कैसे पहुंच बढ़ाती है, इसके बारे में पूछ सकते हैं।\n * सुविधा की पहुंच का बयान किसी अलग समुदाय सदस्य, समस्या समीक्षकों सहित, द्वारा प्रदान किया जा सकता है।\n2. नई सुविधा अनुरोध को निम्नलिखित मानकों के आधार पर समाविष्टि के लिए मूल्यांकन किया जा सकता है।\n * क्या सुविधा परियोजना के धारा और [डिज़ाइन सिद्धांतों](../design_principles/) में फिट है?\n * उदाहरण के लिए, एक नई आकृति जोड़ने का अनुरोध किया जा सकता है, लेकिन ब्राउज़र-आधारित आईओटी प्रोटोकॉल को ग्रहण करने का अनुरोध असंगत होगा।\n * सम्पूर्ण रूप से, p5.js का धारा संक्षिप्त होना चाहिए ताकि अनियमित उपयोग की सुविधाओं से बचा जा सके।\n * यदि कोई सुविधा p5.js के धारा में फिट नहीं होती है, तो सुझाव दें कि समस्या लेखक सुविधा को एक ऐड-ऑन पुस्तकालय के रूप में अमल करें।\n * यदि स्पष्ट नहीं है कि यह फिट है या नहीं, तो एक प्रमाण-प्रतिसाद के रूप में एक ऐड-ऑन पुस्तकालय बनाने का सुझाव देना एक अच्छा विचार हो सकता है। यह प्रयोक्ताओं को सुविधा का उपयोग करने का एक तरीका देता है, इसका उपयोग और महत्ता का एक अधिक स्पष्ट उदाहरण प्रदान करता है, और पूरी तरह से एक स्थायी समाधान की तरह पूरा नहीं होना चाहिए। यह परियोजना की मूल धारा में बाद में शामिल किया जा सकता है।\n * क्या इस सुविधा के कारण ब्रेकिंग परिवर्तन होने की संभावना है?\n * क्या यह मौजूदा p5.js फ़ंक्शंस और वेरिएबल्स के साथ विरोध करेगा?\n * क्या यह p5.js के लिए पहले से लिखे गए विशिष्ट रेखाचित्रों के साथ टकराव करेगा?\n * निम्नलिखित सुविधाएं जो संघर्ष पैदा कर सकती हैं जैसा कि उपरोक्त किए गए वे ब्रेकिंग बदलाव के रूप में गिना जाता है। [प्रमुख संस्करण रिलीज](https://docs.npmjs.com/about-semantic-versioning/) के बिना, हमें p5.js में ब्रेकिंग बदलाव नहीं करने चाहिए।\n * क्या प्रस्तावित नई सुविधा को पहले से p5.js में मौजूद सुविधाओं का उपयोग करके, एक्सिस्टिंग साधारित जावास्क्रिप्ट कोड या मौजूदा सरल उपयोगिता वाली पुस्तकालयों का उपयोग करके प्राप्त किया जा सकता है?\n * उदाहरण के लिए, `join([\"हैलो\", \"वर्ल्ड!\"])` जैसी स्ट्रिंग्स की एक सरणी में शामिल होने के लिए एक p5.js फ़ंक्शन प्रदान करने के बजाय, मूल जावास्क्रिप्ट `[\"हैलो\", \"वर्ल्ड!\"].join()` को प्राथमिकता दी जानी चाहिए।\n3. यदि पहुंच की आवश्यकता और अन्य विचार पूरे हो गए हैं, तो पुल रिक्वेस्ट की दिशा में काम शुरू करने से पहले कम से कम दो प्रबंधकों या अनुरक्षकों को नई सुविधा के अनुरोध को मंजूरी देनी होगी। नई सुविधाओं के पुल रिक्वेस्ट की समीक्षा प्रक्रिया नीचे विवरणित है।\n\n### सुविधा विस्तार\n\nसुविधा विस्तार समस्याओं को \"मौजूदा सुविधा विस्तार\" समस्या टेम्प्लेट का उपयोग करना चाहिए। प्रक्रिया नई सुविधा अनुरोधों के साथ बहुत समान है। नई सुविधा अनुरोध और सुविधा विस्तार के बीच का अंतर कभी-कभी कम हो सकता है। सुविधा विस्तार मुख्य रूप से p5.js के मौजूदा कार्यों के साथ संबंधित होता है जबकि नई सुविधा अनुरोध पूरी तरह से नए कार्यों को जोड़ने का अनुरोध कर सकता है।\n\n1. नई सुविधा अनुरोधों की तरह, सुविधा विस्तार को केवल उन्हें स्वीकार किया जाना चाहिए अगर वे p5.js के पहुँच को बढ़ाते हैं। कृपया [ऊपर दिए गए खंड](../steward_guidelines.md#सुविधा-अनुरोध/) का बिंदु 1 देखें।\n\n2. सुविधा विस्तार के लिए समावेशन मानदंड सुविधा अनुरोधों के समान हैं, लेकिन संभावित ब्रेकिंग परिवर्तनों पर विशेष ध्यान दिया जाना चाहिए।\n\n * मौजूदा कार्यों को संशोधित करते समय, सभी पिछले मान्य और दस्तावेजित कार्य साकार तरीके से बर्ताव करने चाहिए।\n\n3. पुल रिक्वेस्ट की ओर काम शुरू करने से पहले फीचर संवर्द्धन को कम से कम एक प्रबंधक या अनुरक्षक द्वारा अनुमोदित किया जाना चाहिए। सुविधा विस्तार के लिए पुल रिक्वेस्ट समीक्षा प्रक्रिया नीचे विवरणित है।\n\n### चर्चा\n\nइस प्रकार की समस्या के पास एक न्यूनतम टेम्प्लेट (\"चर्चा\" (discussion)) होता है और इसका उपयोग विषय के चारों ओर संवाद जमा करने के लिए किया जाना चाहिए, जो बाद में किसी विशेष मुद्दे में एकत्रित किया जाता है, जैसे कि एक सुविधा अनुरोध। इन प्रकार की चर्चा समस्याओं को समाप्त होने पर बंद किया जा सकता है और परिणामी अधिक विशिष्ट समस्याएं बना दी गई हैं:\n\n* यदि कोई समस्या चर्चा के रूप में खोला गया है, उदाहरण के लिए, एक बग रिपोर्ट होना चाहिए, तो सही लेबल लागू किया जाना चाहिए और \"चर्चा\" लेबल हटा दिया जाना चाहिए। यदि पहले से शामिल नहीं है तो बग के बारे में अतिरिक्त जानकारी भी लेखक से मांगी जानी चाहिए।\n* यदि कोई समस्या चर्चा के रूप में खोला गया है, लेकिन स्रोत कोड योगदान के लिए प्रासंगिक नहीं है या अन्यथा गिटहब रिपॉजिटरी/योगदान प्रक्रिया/योगदान समुदाय के लिए प्रासंगिक नहीं है, तो उन्हें फ़ोरम या डिस्कॉर्ड पर पुनर्निर्देशित किया जाना चाहिए और मुद्दा बंद कर दिया जाना चाहिए।\n* यदि लागू हो, तो चर्चा के लिए अतिरिक्त लेबल जोड़े जा सकते हैं ताकि एक नजर में यह देखा जा सके कि यह किस प्रकार की चर्चा है।\n\n***\n\n## पुल रिक्वेस्ट\n\nप्राय: p5.js रिपॉजिट्रीज में कोड योगदानों का अधिकांश पुल रिक्वेस्ट के माध्यम से होता है। प्रबंधकों और अनुरक्षकों के पास रिपॉजिटरी तक पहुंच हो सकती है, लेकिन फिर भी उन्हें कोड का योगदान करते समय उसी मुद्दे> पुल रिक्वेस्ट> समीक्षा प्रक्रिया का पालन करने के लिए प्रोत्साहित किया जाता है। यहां पुल रिक्वेस्ट की समीक्षा के चरण दिए गए हैं:\n\n* पुल रिक्वेस्ट टेम्पलेट [यहाँ मिलेगा](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md)।\n* लगभग सभी पुल रिक्वेस्टों में संबंधित समस्याएं को पहले खोला और चर्चा की जानी चाहिए, जिसका अर्थ है कि किसी भी प्रबंधक या अनुरक्षक द्वारा पुल रिक्वेस्ट की समीक्षा करने से पहले प्रासंगिक [इश्यू वर्कफ़्लो](../steward_guidelines.md#समस्याएँ/) का पहले पालन किया जाना चाहिए।\n * एकमात्र उदाहरण जहां यह लागू नहीं होता है, वे बहुत मामूली टाइपो फिक्स होते हैं, जिनके लिए एक खुली समस्या की आवश्यकता नहीं होती है और रेपो तक मर्ज पहुंच वाले किसी भी व्यक्ति द्वारा विलय किया जा सकता है, भले ही वे किसी विशेष क्षेत्र के प्रबंधक न हों।\n * हालांकि यह अपवाद मौजूद है, हम इसे व्यवहार में तभी लागू करेंगे जब योगदानकर्ताओं को पहले नए समस्याएं खोलने के लिए प्रोत्साहित किया जाएगा। दूसरे शब्दों में, यदि इस बारे में संदेह है कि यह अपवाद लागू होता है या नहीं, तो फिर भी एक समस्या खोलें।\n* यदि कोई पुल रिक्वेस्ट संदर्भित समस्या को पूरी तरह से हल नहीं करता है, तो आप मूल पोस्ट को संपादित कर सकते हैं और `Resolves #OOOO` को `Addresses #OOOO` में बदल सकते हैं ताकि पुल रिक्वेस्ट विलय होने पर यह स्वचालित रूप से मूल समस्या को बंद न करे।\n\n### सरल सुधार\n\nसरल सुधार, जैसे कि छोटी टाइपो फिक्स, को मर्ज एक्सेस वाले किसी भी व्यक्ति द्वारा सीधे मर्ज किया जा सकता है। यह सुनिश्चित करने के लिए कि स्वचालित सीआई परीक्षण पास हो गया है, पुल रिक्वेस्ट \"फ़ाइलें परिवर्तित (files changed)\" टैब पर जांचें।\n\n\n\n\n\n### बग फ़िक्स\n\n1. बग फ़िक्स का समीक्षा उस संबंधित क्षेत्र के स्टीवर्ड द्वारा किया जाना चाहिए, आदर्शतः उसी जिसने संदर्भित मुद्दे को फ़िक्स के लिए स्वीकृति दी थी।\n\n2. पुल रिक्वेस्ट \"फ़ाइलें बदली गईं\" टैब का उपयोग प्रारंभ में यह समीक्षा करने के लिए किया जा सकता है कि समस्या चर्चा में बताए अनुसार समाधान लागू किया गया है या नहीं।\n\n3. पुल रिक्वेस्ट को संभावनापूर्वक और संबंधित होने पर स्थानीय रूप से परीक्षण किया जाना चाहिए। यदि संभव हो, तो गिटहब CLI कुछ प्रक्रिया को सुव्यवस्थित करने में मदद कर सकता है। (यहाँ [टिप्स और ट्रिक्स](../steward_guidelines.md#युक्तियाँ-और-ट्रिक्स/) में अधिक देखें).\n * [ ] फ़िक्स को मूल समस्या को पर्याप्त रूप से संबोधित करना चाहिए।\n * [ ] फ़िक्स को किसी भी मौजूदा व्यवहार में परिवर्तन नहीं करना चाहिए जब तक मूल समस्या में सहमति न हो।\n * [ ] फ़िक्स पर p5.js पर कोई महत्वपूर्ण प्रभाव नहीं होना चाहिए।\n * [ ] फ़िक्स पर p5.js की पहुँच कोई प्रभाव नहीं होना चाहिए।\n * [ ] फ़िक्स को जावास्क्रिप्ट कोडिंग के आधुनिक मानक का उपयोग करना चाहिए।\n * [ ] फ़िक्स को सभी स्वचालित परीक्षणों को पार करना चाहिए और यदि योग्य हो, तो नए परीक्षण शामिल करना चाहिए।\n\n4. यदि कोई अतिरिक्त परिवर्तन आवश्यक हो, तो पंक्ति टिप्पणियाँ यहाँ जोड़ी [जानी चाहिए](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request)।\n\n * एक सुझाव ब्लॉक का उपयोग किया जा सकता है विशिष्ट परिवर्तनों का सुझाव देने के लिए:\n \\\n \\\n \n\n * यदि कई परिवर्तन की आवश्यकता है, तो एकाधिक बार एकल-लाइन टिप्पणियाँ न जोड़ें। बजाय इसके, कई-लाइन टिप्पणियाँ और एक ही परिवर्तन के लिए एक मांग करने के लिए यहाँ दस्तावेज़ की प्रक्रिया का [पालन करें](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/)।\n\n * यदि लाइन टिप्पणियाँ स्पष्टीकरण या चर्चा के लिए हैं, तो \"अनुरोध परिवर्तन\" की बजाय \"टिप्पणी\" का चयन करें:\\\n \n\n5. एक बार जब पुल रिक्वेस्ट की समीक्षा हो जाती है और किसी अतिरिक्त बदलाव की आवश्यकता नहीं होती है, तो एक प्रबंधक पिछले चरण में \"स्वीकृत\" विकल्प चुनकर, अतिरिक्त टिप्पणियों के साथ या उसके बिना, पुल रिक्वेस्ट को \"स्वीकृत\" के रूप में चिह्नित कर सकता है। यदि वांछित हो तो प्रबंधक या तो किसी अन्य प्रबंधक या अनुरक्षक द्वारा अतिरिक्त समीक्षा का अनुरोध कर सकता है, यदि उनके पास मर्ज की पहुंच है तो पुल रिक्वेस्ट का विलय कर सकता है, या अनुरक्षक से विलय का अनुरोध कर सकता है।\n\n6. @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) बॉट को बुलाया जाना चाहिए ताकि `README.md` फ़ाइल में नए योगदानकर्ताओं को योगदानकर्ताओं की सूची में जोड़ा जा सके। `[योगदान के प्रकार]` के स्थान पर हर प्रकार का योगदान निर्दिष्ट किया जा सकता है, योगदान के उपलब्ध प्रकार की पूरी सूची ऊपर दी गई लिंक में मिलेगी।\n\n`@all-contributors` `please` `add` `@[गिटहब हैंडल]` `for` `[योगदान के प्रकार]`\n\n### नई सुविधा/सुविधा वृद्धि\n\nनई सुविधा या सुविधा वृद्धि पुल रिक्वेस्ट के लिए परिक्रिया बग निवारण के साथ मिलती जुलती है, केवल एक विशेष अंतर है:\n\n* एक नई सुविधा/सुविधा वृद्धि पुल रिक्वेस्ट को मर्ज करने से पहले कम से कम दो स्टीवर्ड या रक्षक द्वारा समीक्षित और मंजूर किया जाना चाहिए।\n\n### डिपेंडेबॉट\n\nडिपेंडेबॉट पुल रिक्वेस्ट आमतौर पर केवल रिपो व्यवस्थापकों को ही दिखाई जाती हैं, इसलिए यदि यह आपके लिए लागू नहीं होता है, तो कृपया इस खंड को छोड़ें।\n\n* यदि संस्करण अद्यतन एक [सीमवर](https://semver.org/) पैच संस्करण है और स्वचालित सीआई परीक्षण पास हो गया है, तो डिपेंडेबॉट पुल रिक्वेस्ट को सीधे मर्ज किया जा सकता है।\n* स्वचालित सीआई परीक्षण पास होने पर मामूली सेमेस्टर संस्करण परिवर्तनों वाले डिपेंडाबोट पुल रिक्वेस्ट को आमतौर पर सीधे मर्ज किया जा सकता है। अद्यतन निर्भरता के चेंजलॉग पर त्वरित जांच की अनुशंसा की जाती है।\n* प्रमुख सेमेस्टर संस्करण परिवर्तनों के साथ डिपेंडाबॉट पुल रिक्वेस्ट संभवतः निर्माण प्रक्रिया या p5.js कार्यक्षमता को प्रभावित करेंगे। इस मामले में, यदि संभव हो तो समीक्षक को वर्तमान संस्करण से लक्ष्य संस्करण तक चेंजलॉग की समीक्षा करने के लिए प्रोत्साहित किया जाता है। उनसे यह भी अपेक्षा की जाती है कि वे स्थानीय स्तर पर पुल रिक्वेस्ट का परीक्षण करें ताकि यह सुनिश्चित किया जा सके कि सभी प्रक्रियाएं कार्य कर रही हैं, और निर्भरता में संभावित ब्रेकिंग परिवर्तनों के कारण कोई भी आवश्यक परिवर्तन करें।\n * कई निर्भरताओं ने मुख्य संस्करण संख्याओं को केवल इसलिए बढ़ाया है क्योंकि वे बहुत पुराने संस्करणों के लिए आधिकारिक समर्थन को हटा देते हैं। बहुत से मामलों में, मुख्य संस्करण परिवर्तन निर्भरता एपीआई परिवर्तन से होने वाले तोड़फोड़ को नहीं अवश्य मतलब है।\n\n***\n\n## निर्माण प्रक्रिया\n\nयह खंड सामान्य निर्माण सेटअप या आदेश का विवरण नहीं करेगा, बल्कि विवरणों के पीछे क्या हो रहा है उसके बारे में जानकारी देगा। कृपया अधिक विस्तृत निर्माण जानकारी के लिए [योगदानकर्ता दिशानिर्देश](../contributing_documentation.md#🗯-संदर्भ-के-लिए-योगदान-करें/) देखें।\n\n`Gruntfile.js` फ़ाइल p5.js के मुख्य निर्माण परिभाषणों को संबोधित करती है। पुस्तकालय और दस्तावेज़ीकरण निर्माण के लिए उपयोग किए जाने वाले विभिन्न उपकरणों में `Grunt`, `Browserify`, `YUIDoc`, `ESLint`, `Babel`, `Uglify`, और `Mocha` शामिल हैं। यह हमारे लिए `default (डिफ़ॉल्ट)` टास्क के साथ शुरू करने और वहां से पिछले काम करने में मददगार हो सकता है। इस विवरण के दौरान `Gruntfile.js` दस्तावेज़ को खोलना भी उपयोगी हो सकता है।\n\n### मुख्य निर्माण कार्य\n\n```\ngrunt.registerTask('default', ['lint', 'test']);\n```\n\nजब हम `grunt` या `npm` स्क्रिप्ट npm `test` चलाते हैं, तो हम लिंट फिर परीक्षण के रूप में डिफ़ॉल्ट टास्क चलाते हैं।\n\n#### `lint` कार्य\n\n```\ngrunt.registerTask('lint', ['lint:source', 'lint:samples']);\n```\n\nलिंट कार्य में दो उप-कार्य होते हैं: `lint:source` और `lint:samples`। `lint:source` को तीन और उप-कार्यों में विभाजित किया गया है `eslint:build`, `eslint:source`, और `eslint:test`, जो ESLint का उपयोग निर्माण स्क्रिप्ट, सोर्स कोड, और परीक्षण स्क्रिप्ट की जाँच करने के लिए करता है।\n\n`lint:samples` कार्य पहले `yui` कार्य को चलाएगा जिसमें स्वयं `yuidoc: prod`, `clean:reference`, और `minjson` शामिल हैं, जो स्रोत कोड से दस्तावेज़ को JSON दस्तावेज़ में परिवर्तित करते हैं, पिछले चरण से अप्रयुक्त फ़ाइलें हटाते हैं, और उत्पन्न JSON फ़ाइल को क्रमशः `data.min.json` में छोटा करते हैं।\n\n`lint:samples` में अगला है `eslint-samples:source`, जो एक कस्टम लिखित कार्य है जिसकी परिभाषा [tasks/build/eslint-samples.js](../tasks/build/eslint-samples.js) में है; यह दस्तावेज़ीकरण उदाहरण कोड की जांच करने के लिए ESLint चलाएगा ताकि यह सुनिश्चित किया जा सके कि वे बाकी p5.js के समान कोडिंग कन्वेंशन का पालन करते हैं (`yui` यहां पहले चलाया गया है क्योंकि हमें उदाहरणों को लिंट करने से पहले JSON फ़ाइल बनाने की आवश्यकता है)।\n\n#### `test` कार्य\n\n```js\ngrunt.registerTask(\"test\", [\"build\", \"connect:server\", \"mochaChrome\", \"mochaTest\", \"nyc:report\"]);\n```\n\nसबसे पहले `test` तहत `build` कार्य को देखते हैं।\n\n```js\ngrunt.registerTask(\"build\", [\"browserify\", \"browserify:min\", \"uglify\", \"browserify:test\"]);\n```\n\n`browserify` से शुरू होने वाले कार्य [tasks/build/browserify.js](../tasks/build/browserify.js) में परिभाषित होते हैं। इनमें सभी मुख्य कदम होते हैं जो बहुत से उपयोगकर्ता कोड फ़ाइलों को संग्रहीत और एक में बनाने के लिए हैं:\n\n* `browserify` p5.js का निर्माण कार्य है जबकि `browserify:min` अगले कदम में संक्षिप्त किए जाने वाले एक बीच की फ़ाइल को बनाता है। `browserify` और `browserify:min` के बीच अंतर यह है कि `browserify:min` FES के लिए कार्यात्मक नहीं होने वाले डेटा को नहीं समाहित करता।\n* `uglify` `browserify:min` की उत्पादित फ़ाइल को छोटा करता है और अंतिम `p5.min.js` बनाता है (इस कदम की विन्यासिकता मुख्य `Gruntfile.js` में है)।\n* `browserify:test` का उपयोग पूर्ण p5.js के समान संस्करण बनाने के लिए किया जाता है, सिवाय परीक्षण कोड कवरेज रिपोर्टिंग के लिए जोड़े गए कोड को छोड़कर ([Istanbul](https://istanbul.js.org/) का उपयोग करके) को बाहर रखा गया है।\n\nसबसे पहले, `node.js` के `fs.readFileSync()` का उपयोग करके पढ़े गए कोड को `brfs-babel` का उपयोग करके फ़ाइल की वास्तविक सामग्री से बदल दिया जाता है। इसका उपयोग मुख्य रूप से WebGL कोड द्वारा अलग-अलग फ़ाइलों के रूप में लिखे गए स्रोत कोड से इनलाइन शेडर कोड के लिए किया जाता है।\n\nइसके बाद, `package.json` में परिभाषित \\[ब्राउजर्सलिस्ट] ([https://browsersl.ist/](https://browsersl.ist/)) आवश्यकता से मेल खाने के लिए `node_modules` से स्रोत कोड और सभी निर्भरताओं को `Babel` का उपयोग करके ट्रांसपाइल्ड किया जाता है। यह यह भी सुनिश्चित करता है कि सभी ES6 `import` विवरण CommonJS `require()` कथनों में परिवर्तित हो जाते हैं जिन्हें ब्राउज़र समझता है। यह हमें ब्राउज़र संगतता के बारे में चिंता किए बिना ES6 और उससे आगे उपलब्ध नए सिंटैक्स का उपयोग करने में भी सक्षम बनाता है।\n\nबंडलिंग के बाद, लेकिन बंडल कोड को फ़ाइल में लिखे जाने से पहले, कोड को `pretty-fast` के माध्यम से पारित किया जाता है (यदि कोड को छोटा नहीं किया जाना है, तो इसे साफ किया जाना चाहिए ताकि अंतिम स्वरूपण थोड़ा अधिक सुसंगत हो)। ऐसा इसलिए किया जाता है क्योंकि हम आशा करते हैं कि यदि वांछित हो तो p5.js स्रोत कोड को पढ़ा और निरीक्षण किया जा सकता है।\n\nयहां कुछ छोटे विस्तृत कदम छोड़े गए हैं; आप नीचे दिए गए ब्राउज़रीफ़ाई निर्माण परिभाषण फ़ाइल की जांच करने के लिए सब कुछ को और करीब से देख सकते हैं।\n\n```\nconnect:server\n```\n\nयह कदम स्थानीय सर्वर को शुरू करता है जो परीक्षण फ़ाइलों और निर्मित स्रोत कोड फ़ाइलों को होस्ट करता है ताकि क्रोम में स्वचालित परीक्षण चलाया जा सके।\n\n```\nmochaChrome\n```\n\nयह कदम [tasks/test/mocha-chrome.js](../tasks/test/mocha-chrome.js) में परिभाषित है। यह `Puppeteer` का उपयोग करता है जो `Chrome` का एक हेडलेस संस्करण शुरू करता है जिसे रिमोट नियंत्रित किया जा सकता है, और `./test` फ़ोल्डर में `HTML` फ़ाइलों के साथ जुड़े परीक्षणों को चलाता है, जिसमें लाइब्रेरी के अनमिनिफ़ाइड और मिनिफ़ाइड संस्करणों को यूनिट परीक्षण सुइटों और सभी संदर्भ उदाहरणों के साथ परीक्षण किया जाता है।\n\n```\nmochaTest\n```\n\nयह चरण `mochaChrome` से भिन्न है क्योंकि यह `Chrome` के बजाय `Node.js` में चलाया जाता है और लाइब्रेरी में केवल सुविधाओं के एक छोटे उपसमूह का परीक्षण करता है। p5.js में अधिकांश सुविधाओं के लिए ब्राउज़र वातावरण की आवश्यकता होगी, इसलिए परीक्षणों के इस सेट का विस्तार केवल तभी किया जाना चाहिए जब नए परीक्षणों को वास्तव में ब्राउज़र वातावरण की आवश्यकता न हो।\n\n```\nnyc:report\n```\n\nअंत में, सभी निर्माण और परीक्षण पूरे होने के बाद, यह चरण परीक्षण कवरेज रिपोर्ट एकत्र करेगा। तुलना के लिए, `mochaChrome` लाइब्रेरी के पूर्ण संस्करण का परीक्षण कर रहा था और परीक्षण कवरेज डेटा को कंसोल पर प्रिंट कर रहा था। p5.js के लिए परीक्षण कवरेज मुख्य रूप से निगरानी और कुछ अतिरिक्त डेटा बिंदुओं के लिए है; 100% परीक्षण कवरेज प्राप्त करना कोई लक्ष्य नहीं है।\n\nऔर यही `Gruntfile.js` कॉन्फ़िगरेशन में डिफ़ॉल्ट कार्य को कवर करता है!\n\n### विविध कार्य\n\nसभी कदमों को `npx grunt [कदम]` के साथ सीधे चलाया जा सकता है। ऊपर नहीं चित्रित कुछ कार्य हैं जो ऊपर नहीं शामिल हैं लेकिन कुछ विशेष प्रकार के मामलों में उपयोगी हो सकते हैं।\n\n```\ngrunt yui:dev\n```\n\nयह कार्य ऊपर बताए अनुसार दस्तावेज़ीकरण और लाइब्रेरी बिल्ड चलाएगा, और फिर एक वेब सर्वर शुरू करेगा जो वेबसाइट पर [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/) पर पाए गए संदर्भ पृष्ठ के समान संस्करण पेश करेगा। इसके बाद यह परिवर्तनों के लिए स्रोत कोड की निगरानी भी करेगा और दस्तावेज़ीकरण और लाइब्रेरी का पुनर्निर्माण भी करेगा।\n\n`grunt` `yui:dev` तब उपयोगी होता है जब आप इनलाइन दस्तावेज़ में संदर्भ पर काम कर रहे होते हैं। इस कमांड का उपयोग करने के बाद, आपको निर्मित फ़ाइलों को p5.js रिपॉजिटरी से स्थानीय p5.js-वेबसाइट रिपॉजिटरी में स्थानांतरित करने और हर बार बदलाव करने पर वेबसाइट को फिर से बनाने की ज़रूरत नहीं है; आप अपने ब्राउज़र में संदर्भ के इस थोड़े सरलीकृत संस्करण के साथ अपने परिवर्तनों का पूर्वावलोकन कर सकते हैं। इस तरह, आप अधिक आश्वस्त हो सकते हैं कि आपके परिवर्तन संभवतः वेबसाइट पर सही ढंग से दिखाई देंगे। ध्यान दें कि यह केवल इनलाइन दस्तावेज़ीकरण में संशोधन के लिए है; स्टाइलिंग और लेआउट सहित, संदर्भ पृष्ठ में परिवर्तन किए जाने चाहिए और वेबसाइट रिपॉजिटरी पर परीक्षण किया जाना चाहिए।\n\n```\ngrunt watch\ngrunt watch:main\ngrunt watch:quick\n```\n\n`watch` कार्य विभिन्न फ़ाइलों के लिए बदलावों की निगरानी करेंगे और कौन से फ़ाइलों में क्या परिवर्तन हुआ है, उस अनुसार संबंधित कार्यों को चलाएगे। ये सभी कार्य एक ही चीज़ करते हैं, जिसका दायरा अलग है।\n\n`watch` कार्य स्रोत कोड में परिवर्तनों का पता लगाने पर पूर्ण डिफ़ॉल्ट कार्य चलाने के समान सभी बिल्ड और परीक्षण चलाएगा।\n\n`watch:main` कार्य लाइब्रेरी निर्माण और परीक्षण चलाएगा लेकिन स्रोत कोड में परिवर्तनों का पता लगाने पर संदर्भ का पुनर्निर्माण नहीं करेगा।\n\n`watch:quick` कार्य केवल स्रोत कोड में परिवर्तनों का पता लगाने पर लाइब्रेरी बिल्ड चलाएगा।\n\nआप जिस पर काम कर रहे हैं उसके आधार पर, यहां सबसे न्यूनतम घड़ी कार्य चुनने से आप जब भी कुछ बदलाव करना चाहें तो मैन्युअल रूप से पुनर्निर्माण चलाने से बच सकते हैं।\n\n***\n\n## रिहाई प्रक्रिया\n\nकृपया रिलीज [`release_process.md`](../release_process/) देखें।\n\n***\n\n## युक्तियाँ और ट्रिक्स\n\nकभी-कभी, समीक्षा के लिए जितने भी जटिल पुल रिक्वेस्ट हैं, उन्हें स्थानीय रूप से परीक्षण करने के लिए गिट के जटिल कमांड की आवश्यकता हो सकती है। भाग्य से, गिटहब सीएलआई टूल इस प्रक्रिया और अधिक के साथ बहुत मदद कर सकता है।\n\n### उत्तर टेम्पलेट\n\nएक आसान गिटहब सुविधा जिसका आप उपयोग कर सकते हैं वह है [उत्तर टेम्पलेट](https://docs.github.com/en/get-started/writing-on-github/working-with-saveled-replies/about-saveled-replies/), जो समस्या\nया पुल रिक्वेस्टों का उत्तर लिखते समय उपयोग के लिए उपलब्ध है। ऊपर वर्णित कुछ वर्कफ़्लो में समान या बहुत समान उत्तरों के साथ समस्याएं या पुल रिक्वेस्ट का जवाब देने की आवश्यकता हो सकती है (प्रश्नों को फ़ोरम पर पुनर्निर्देशित करना, फिक्सिंग के लिए किसी समस्या को स्वीकार करना, आदि), और सहेजे गए उत्तरों का उपयोग करना इसे थोड़ा और अधिक कुशल बना सकता है।\n\nनीचे कुछ सहेजे गए उत्तर दिए गए हैं जिनका उपयोग p5.js अनुरक्षकों द्वारा किया जा रहा है। आप उन्हें स्वयं उपयोग कर सकते हैं या अपना खुद का बना सकते हैं!\n\n##### समापन: पुनरुत्पादन नहीं किया जा सकता\n\n> हम इसे पुन: पेश करने में सक्षम नहीं हैं, लेकिन यदि आप कोई कोड नमूना प्रदान कर सकते हैं जो समस्या को दर्शाता है तो कृपया बेझिझक इसे दोबारा खोलें। धन्यवाद!\n\n##### समापन: स्निपेट की आवश्यकता है\n\n> मैं इसे संगठनात्मक उद्देश्यों के लिए बंद कर रहा हूं। यदि आप एक कोड स्निपेट प्रदान कर सकते हैं जो समस्या को दर्शाता है तो कृपया फिर से खोलें। धन्यवाद!\n\n##### समापन: फोरम का उपयोग करें\n\n> यहां गिटहब समस्या p5.js लाइब्रेरी के बग और समस्याएं के लिए एक अच्छी जगह हैं। अपना स्वयं का कोड लिखने, परीक्षण करने या ट्यूटोरियल का अनुसरण करने के बारे में प्रश्नों के लिए, [फोरम](https://discourse.processing.org/) पोस्ट करने के लिए सबसे अच्छी जगह है। धन्यवाद!\n\n##### समापन: जीएसओसी\n\n> धन्यवाद! जीएसओसी प्रस्तावों पर चर्चा करने के लिए सबसे अच्छी जगह हमारा [फोरम](https://discourse.processing.org/c/summer-of-code/) है।\n\n##### समापन: पहुंच\n\n> मुझे इस सुविधा में बहुत अधिक रुचि नहीं दिख रही है, और हमारे पास इसकी स्पष्ट व्याख्या नहीं है कि यह कैसे [पहुंच का विस्तार करता है](../access/), इसलिए मैं इसे अभी बंद कर दूंगा। यदि समस्या अनुरोध में एक एक्सेस स्टेटमेंट जोड़ा जा सकता है, तो कृपया पुनः खोलने का स्वागत करें।\n\n> हमें इस बारे में कोई और स्पष्टीकरण नहीं दिख रहा है कि यह मुद्दा कैसे [पहुंच का विस्तार करता है](../access/), इसलिए मैं इस समस्या को अभी के लिए बंद कर दूंगा। यदि फीचर अनुरोध में अधिक विस्तृत एक्सेस स्टेटमेंट जोड़ा जा सकता है, तो कृपया इसे फिर से खोलने का स्वागत करें। धन्यवाद!\n\n##### समापन: ऐडऑन\n\n> मुझे लगता है कि यह फ़ंक्शन p5.js एपीआई के दायरे से परे है (हम इसे यथासंभव न्यूनतम रखने की कोशिश करते हैं), लेकिन यह एक ऐडऑन लाइब्रेरी के लिए एक बेहतरीन शुरुआती बिंदु हो सकता है। ऐडऑन बनाने के तरीके के लिए यहां दस्तावेज़ देखें: [https://github.com/processing/p5.js/blob/main/contributor\\_docs/creating\\_libraries.md](../creating_libraries/)\n\n##### समापन पुल रिक्वेस्ट: पहले समस्या की आवश्यकता है\n\n> धन्यवाद. एक अनुस्मारक के रूप में, पुल रिक्वेस्टों को खोलने और समस्या के साथ टैग करने से पहले समस्याएं को खोला जाना चाहिए। विकास पर नज़र रखने और चर्चा को स्पष्ट रखने के लिए यह आवश्यक है। धन्यवाद!\n\n##### समस्या को ठीक करने के लिए स्वीकृति दें\n\n> आप सुधार के साथ आगे बढ़ सकते हैं। धन्यवाद।\n\n##### मर्ज किया गया पुल रिक्वेस्ट\n\n> किये गये परिवर्तन मुझे अच्छे लग रहे हैं। धन्यवाद!\n\n### गिटहब सीएलआई\n\nआपके परीक्षण के लिए स्थानीय स्तर पर कोड का पुल रिक्वेस्ट संस्करण प्राप्त करने के लिए आवश्यक जटिल गिट कमांड के साथ एक जटिल पुल रिक्वेस्ट की समीक्षा करना मुश्किल हो सकता है। सौभाग्य से, [गिटहब CLI](https://cli.github.com/) टूल इस प्रक्रिया और बहुत कुछ में काफी मदद कर सकता है।\n\nCLI को स्थानीय रूप से लिंक करने के लिए इस आईडी का कमांड `gh pr checkout [पुल रिक्वेस्ट आईडी]` चलाने से पुल रिक्वेस्ट की संस्करण कोड को आपके लिए स्थानीय रूप से प्राप्त करना संभव है, और रिमोट फोर्क को प्राप्त करने, एक ब्रांच बनाने और ब्रांच को चेकआउट करने की प्रक्रिया सभी आपके लिए स्वचालित रूप से की जाती है। मुख्य शाखा पर वापस जाना एक ब्रांच को स्विच करने के लिए उसी तरह होगा जैसे `git checkout main`। आप एक टिप्पणी भी छोड़ सकते हैं बिना वेबपेज पर जाने की आवश्यकता के साथ पुल रिक्वेस्ट में से!\n\nगिटहब एसईएलआई में बहुत सारे अन्य कमांड भी उपलब्ध हैं जो आपको उपयोगी हो सकते हैं या नहीं मिल सकते हैं, लेकिन यह एक अच्छा उपकरण है जिसका आपके आसपास होना है किसी भी मामले में।\n\n### सूचनाओं का प्रबंधन\n\nनए समस्याएं या पुल रिक्वेस्ट के लिए \"समस्याएं\" या \"पुल रिक्वेस्ट\" टैबों का मैन्युअल निगरानी करने की बजाय, आप रिपो को देखकर \"नजर रखना (watch)\" कर सकते हैं जिसमें रेपो के नाम के साथ एक आई आइकन है जो रेपो के नाम के विपरीत है।\n\n\n\nरेपो को देखकर, नई समस्याएं, नई पुल रिक्वेस्ट्स, आपके उपयोगकर्ता हैंडल का उल्लेख, और अन्य गतिविधियां, जिनकी आपने रेपो में सब्सक्राइब की हैं, इन घटनाओं को आपके [सूचना पृष्ठ](https://github.com/notifications/) पर सूचनाएं के रूप में भेजी जाती हैं, जिन्हें आप स्वीकार कर सकते हैं या उन्हें ईमेल इनबॉक्स की तरह पढ़कर या खारिज कर सकते हैं।\n\nकई मामलों में, आपको GitHub से रेपो में हो रही घटनाओं के बारे में ईमेल भी मिल सकते हैं, और आप इन्हें अपनी [सूचना सेटिंग्स पेज](https://github.com/settings/notifications/) से कस्टमाइज़ कर सकते हैं (पूरी तरह से उनका अनसब्सक्राइब करके समेत)।\n\nआपके काम करने के तरीके को ध्यान में रखते हुए इन्हें सेट करना, समस्याओं/पुल रिक्वेस्ट समीक्षा को मैन्युअली से खोजने की आवश्यकता न हो और GitHub से अंतहीन सूचनाओं से अधिक भरी होने से बचाने में अंतर हो सकता है। यहां एक अच्छा संतुलन आवश्यक है। एक शुरुआती सुझाव के रूप में, स्टीवर्ड्स को इस रेपो के लिए \"समस्याएँ\" और \"पुल रिक्वेस्ट्स\" के लिए देखना चाहिए और इसे \"भाग लेना, @मेंशन्स और कस्टम (Participating, @mentions and custom)\" पर सेट करना चाहिए।\n"},"इकाई परीक्षण\n":{"relativeUrl":"/contribute/unit_testing","description":"\n\nहम यह सुनिश्चित करने के लिए इकाई परीक्षण का उपयोग करते हैं कि कोडबेस के अलग-अलग घटक काम करते हैं जैसा कि हम उनसे उम्मीद करते हैं।\n\n### संदर्भ\n\nयहां एक समान तकनीक स्टैक के साथ [यूनिट परीक्षण](https://codeburst.io/javascript-unit-testing-using-mocha-and-chai-1d97d9f18e71/) के लिए एक अच्छा, त्वरित परिचय है, और यहां गहराई से [व्याख्या](https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d/) दी गयी है।\n\n### सभी यूनिट टेस्ट को चलाना\n\nरेपो रूट में, अपने टर्मिनल में निम्न कमांड का उपयोग करें\n\n```shell\n$ npm test\n```\n\n### परीक्षण कवरेज\n\nजब भी परीक्षण चलाए जाते हैं, एक कवरेज रिपोर्ट तैयार की जाती है। यह कवरेज रिपोर्ट बताती है कि परीक्षण सूट द्वारा किस स्रोत कोड फ़ाइलों का उपयोग किया गया था, प्रभावी रूप से हमें बता रहा था कि कोडबेस का कितना परीक्षण किया गया था।\n\nपरीक्षण चलाने के बाद एक सारांश मुद्रित किया जाता है, और आप किसी भी वेब ब्राउज़र में `coverage/index.html` पर विस्तृत रिपोर्ट देख सकते हैं। आप अपने डिफॉल्ट वेब ब्राउज़र में पेज खोलने के लिए Mac पर कमांड लाइन से `open coverage/index.html` चला सकते हैं। आप कमांड का उपयोग करके टर्मिनल में परीक्षण चलाने के बाद कवरेज रिपोर्ट भी देख सकते हैं `npx nyc report --reporter=text`.\n\n### एक सुइट चला कर देखें\n\nएकल परीक्षण या परीक्षणों के समूह को चलाने के लिए,`.only` सुइट में या तो `.js` फ़ाइल में परीक्षण करें और उपरोक्त आदेश का उपयोग करके परीक्षण चलाएं। सावधान रहो, हालांकि आप प्रतिबद्ध नहीं हैं। `.only` (हम हमेशा चाहते हैं कि हमारा CI सभी यूनिट टेस्ट चलाए।)\n\n### एक उदाहरण\n\nकेवल \"p5.ColorConversion\" परीक्षणों का सूट चलाने के लिए, आप पढ़ने के लिए `test/unit/color/color_conversion.js` की पहली पंक्ति को बदल देंगे-\n\n```js\nsuite.only('color/p5.ColorConversion', function() {\n```\n\nअब जब आप `npm test` का उपयोग करते हैं, तो केवल उस `function()` बॉडी के भीतर परीक्षण चलाए जाएंगे।\n\n### एक परीक्षण सूट लंघन\n\nयह सुविधा .only () का विलोम है। .Skip () को जोड़कर, आप मोचा को इन सुइट्स और टेस्ट केस (मामलों) को अनदेखा करने के लिए कह सकते हैं। कुछ भी छोड़ दिया जाना लंबित के रूप में चिह्नित किया जाएगा, और इस तरह की रिपोर्ट की जाएगी।\n\n## आधारिक संरचना\n\n### ढांचा\n\nहम अपने यूनिट परीक्षणों को संरचित करने और चलाने के लिए [Mocha](https://mochajs.org/) का उपयोग करते हैं हम कोड का व्यवहार कैसे करना चाहिए, इसके बारे में अलग-अलग कथन लिखने के लिए हम \\[chai assert (और except)]\\([https://www.chaijs.com](https://www.chaijs.com) api/assert/) का उपयोग करते हैं।\n\n### वातावरण\n\nहमारे पास `test/unit` फ़ोल्डर के तहत परीक्षण का एक संग्रह है जो ब्राउज़र में चलता है और `test/node` के तहत परीक्षणों का एक संग्रह है जो नोड्स .js. में चलता है।\n\nब्राउज़र परीक्षण [हेडलेस क्रोम](https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai/) में चलते हैं। यही कारण है कि जब आप परीक्षण चलाते हैं तो आपको ब्राउज़र विंडो पॉप-अप नहीं दिखाई देती है।\n\n### सेटअप और सहायक\n\nये वर्तमान में केवल ब्राउज़र परीक्षणों के लिए उपलब्ध हैं (जहाँ हमारे अधिकांश परीक्षण चलते हैं)-\n\n* test/js/mocha\\_setup.js मोचा के लिए कुछ विकल्प कॉन्फ़िगर करता है।\n* test/js/chai\\_helpers.js chai.assert में चाई स्थापित करता है और कुछ उपयोगी कार्यों को जोड़ता है।\n* test/js/p5\\_helpers.js p5 स्केच के परीक्षण के लिए कुछ सहायकों को जोड़ता है।\n\nNode.js परीक्षणों के लिए सेटअप सभी `test/mocha.opts` में किया जाता है।\n\n### निरंतर एकीकरण परीक्षण\n\nजब आप p5.js रेपो में एक पुल अनुरोध भेजते हैं, तो यह स्वचालित रूप से [परीक्षण चलाएगा](https://github.com/processing/p5.js/actions/)। इससे हमें यह जांचने में मदद मिलती है कि परीक्षण प्रत्येक पुल अनुरोध के लिए गुजरता है, व्यक्तिगत योगदानकर्ताओं से कोई अतिरिक्त काम नहीं है। यह स्वतः ही [कोडेकोव](https://codecov.io/github/processing/p5.js) रिपोर्ट को कवरेज रिपोर्ट भी अपलोड कर देता है।\n\n### इकाई परीक्षण जोड़ना\n\nयदि आप अधिक इकाई परीक्षण जोड़ना चाहते हैं, तो देखें और देखें कि क्या उस घटक के लिए पहले से ही एक परीक्षण फ़ाइल है जिसके लिए आप परीक्षण जोड़ना चाहते हैं। आम तौर पर, src में दिए गए फ़ाइल के लिए `test/unit` के तहत एक ही रास्ते पर होते हैं। (उदाहरण के लिए `src/color/p5.Color.js` के लिए परीक्षण `test/unit/color/p5.Color.js`\nमें हैं।)\n\nयदि आपको एक नहीं मिल रहा है, तो शायद इसलिए कि उस फ़ाइल के लिए कोई परीक्षण नहीं हुआ है (अभी तक पलक), इसलिए ऊपर दिए गए सम्मेलनों के अनुसार एक नई फ़ाइल बनाएं। यदि आप जिस मॉड्यूल का परीक्षण कर रहे हैं, उसे काम करने के लिए ब्राउज़र की आवश्यकता होती है, तो आप इसे test/unit में रखना चाहते हैं, लेकिन यदि ऐसा नहीं है, तो आप इसे test/node के तहत जोड़ना चाह सकते हैं। जब संदेह हो, तो test/unit में एक ब्राउज़र टेस्ट जोड़ने के लिए डिफ़ॉल्ट! (यदि हमें ज़रूरत है तो बाद में स्थानांतरित करना बहुत आसान है।)\n\nयदि आपको test/unit के लिए मॉड्यूल के लिए एक परीक्षण फ़ाइल को जोड़ना है, तो आपको test/unit/spec.js में युक्ति के लिए परीक्षण के तहत मॉड्यूल की भी आवश्यकता होगी। यह सुनिश्चित करेगा कि आपके परीक्षण को चलाने के लिए आवश्यक मॉड्यूल लोड किए गए हैं। आप इन परीक्षणों को ब्राउज़र में test/test.html फ़ाइल देखकर देख सकते हैं।\n\n### इकाई परीक्षण लिखना\n\nएक इकाई चुनें, यह परीक्षण करने के लिए एक विधि या एक चर हो सकता है। एक उदाहरण के रूप में `p5.prototype.isKeyPressed` का उपयोग करें। परीक्षण लिखने की शुरुआत करने से पहले, हमें इस पद्धति के अपेक्षित व्यवहार को समझने की आवश्यकता है। **अपेक्षित व्यवहार**: बूलियन सिस्टम वैरिएबल सही होना चाहिए यदि कोई कुंजी दबाया जाता है और गलत है यदि कोई कुंजी दबाया नहीं जाता है। अब आप इस अपेक्षित व्यवहार के खिलाफ विभिन्न परीक्षणों के बारे में सोच सकते हैं। संभावित परीक्षण मामले हो सकते हैं-\n\n* वेरिएबल एक बूलियन है।\n* यह सच होना चाहिए अगर एक कुंजी को दबाया जाता है।\n* यह सच होना चाहिए अगर एक कुंजी को दबाया जाता है - वर्णमाला कुंजी, संख्या कुंजी, विशेष कुंजी आदि।\n* यदि कई कुंजियों को दबाया जाए तो यह सही होना चाहिए।\n* यह गलत होना चाहिए अगर कोई कुंजी दबाया नहीं जाता है।\n* यदि आप अधिक के बारे में सोच सकते हैं, तो आगे बढ़ें और उनके लिए परीक्षण जोड़ें।\n\nहम `p5.prototype.isKeyPressed` के लिए एक परीक्षण सूट बना सकते हैं और इसके लिए परीक्षण बनाना शुरू कर सकते हैं। हम अपने यूनिट परीक्षणों की संरचना के लिए Mocha का उपयोग करेंगे।\n\n```js\nsuite('p5.prototype.keyIsPressed', function() {\n test('keyIsPressed is a boolean', function() {\n //परीक्षण यहाँ लिखें\n });\n\n test('keyIsPressed is true on key press', function() {\n //परीक्षण यहाँ लिखें\n });\n\n test('keyIsPressed is false when no keys are pressed', function() {\n //परीक्षण यहाँ लिखें\n });\n});\n```\n\nहमने परीक्षणों की संरचना की है, लेकिन हमने अभी तक परीक्षण नहीं लिखे हैं। हम इसके लिए ची के दावे का उपयोग करेंगे। निम्नलिखित को धयान मे रखते हुए-\n\n```js\ntest('keyIsPressed is a boolean', function() {\n assert.isBoolean(myp5.keyIsPressed); //दावा करता है कि मूल्य एक बूलियन है।\n});\n```\n\nइसी प्रकार हम `assert.strictEqual(myp5.keyIsPressed, true)` का उपयोग कर सकते हैं यदि मान सत्य है। आप यहां चाय के दावे के बारे में अधिक पढ़ सकते हैं। अब जब आप परीक्षण लिख चुके हैं, तो उन्हें चलाएं और देखें कि क्या विधि अपेक्षित रूप से व्यवहार करती है। यदि नहीं, तो उसी के लिए एक मुद्दा बनाएं और यदि आप चाहें, तो आप इसे ठीक करने पर भी काम कर सकते हैं।\n"},"वेबजीएल योगदान गाइड\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* p5.js WebGL मोड सोर्स कोड पर काम कैसे शुरू करें। */}\n\n\n\nनमस्ते, यदि आप इस पृष्ठ को पढ़ रहे हैं, तो आप शायद वेबजीएल मोड पर काम करने में मदद करने के इच्छुक हैं। आपकी मदद के लिए धन्यवाद, हम आपकी सहायता के लिए आभारी हैं! इस पृष्ठ का उद्देश्य वेबजीएल योगदानों को संरचित करने का तरीका समझाना और परिवर्तन करते समय कुछ सुझाव प्रदान करना है।\n\n## संसाधन\n\n* हमारे [p5.js वेबजीएल मोड की संरचना अवलोकन](https://github.com/processing/p5.js/blob/main/contributor_docs/webgl_mode_architecture.md) पढ़ें ताकि समझा जा सके कि 2डी मोड से वेबजीएल मोड कैसे भिन्न है। इससे शेडर, स्ट्रोक और अन्य के लिए कुछ कार्यान्वयन विशेषताओं को समझने में मदद मिलेगी।\n* हमारे [योगदानकर्ता दिशानिर्देश](https://p5js.org/contributor-docs/#/./contributor_guidelines/) पढ़ें जिससे यह पता चलेगा कि समस्या को कैसे बनाया जाए, कोडबेस को कैसे सेट किया जाए और परिवर्तनों को कैसे परीक्षित किया जाए।\n* यह जानना भी उपयोगी हो सकता है कि ब्राउज़र के वेबजीएल एपीआई के बारे में थोड़ा जानना, जिस पर p5.js का वेबजीएल मोड बनाया गया है:\n * [वेबजीएल मूलभूत बातें](https://webglfundamentals.org/) कई कोर रेंडरिंग अवधारणाओं पर जाती है\n * [शेडर की किताब](https://thebookofshaders.com/) वेबजीएल शेडर में उपयोग की जाने वाली कई तकनीकों को समझाती है\n\n## योजना बनाना\n\nहम खुली समस्यों को [एक गिटहब प्रोजेक्ट में](https://github.com/orgs/processing/projects/5/) व्यवस्थित करते हैं, जहां हम उन्हें कुछ प्रकारों में विभाजित करते हैं:\n\n* **प्रणाली-स्तरीय परिवर्तन** लंबी अवधि के लक्ष्य हैं जिनके कोड में व्यापक निहितार्थ हैं। इन्हें कार्यान्वयन में कूटनीति और योजनाबद्धता की सबसे अधिक चर्चा और योजना की आवश्यकता होती है।।\n* **कोई समाधान नहीं वाले बग** ऐसे बग रिपोर्ट हैं जिनमें कारण को संकीर्ण करने के लिए डीबगिंग की आवश्यकता होती है। ये अभी तक ठीक करने के लिए तैयार नहीं हैं: एकबार कारण मिल जाता है, तो हम इसे कैसे ठीक करना है, इस पर चर्चा कर सकते हैं।\n* **समाधान वाले बग लेकिन कोई पीआर नहीं वाले बग** वे हैं जहां हमने इसे कैसे ठीक करना है तय कर लिया है और किसी को भी कोड लिखने के लिए स्वतंत्र हैं।\n* **छोटे विस्तार** वे समस्या हैं जिनमें नई सुविधाएं हैं जिनके लिए वर्तमान संरचना के भीतर एक स्पष्ट स्थान है और इसे फिट करने की तरीके पर चर्चा करने की आवश्यकता नहीं है। एक बार यह तय हो जाता है कि इन्हें करना लायक है, तो आप कोड लिखने के लिए स्वतंत्र हैं।\n* **2डी सुविधाएं** वे हैं जो पहले से ही p5.js में मौजूद हैं लेकिन वेबजीएल मोड में नहीं। इस सुविधा को लागू करने के बाद, उम्मीद है कि इसका व्यवहार 2डी मोड से मेल खाएगा। हमें शायद इसके सर्वोत्तम कार्यान्वयन पर चर्चा करनी पड़ सकती है, लेकिन इनके लिए उपयोगकर्ता आवश्यकताएं स्पष्ट हैं।\n* **सभी संदर्भों में काम नहीं करने वाली सुविधाएं** वे हैं जो वेबजीएल मोड में मौजूद हैं लेकिन वेबजीएल मोड का उपयोग करने के सभी तरीकों में काम नहीं करती हैं। उदाहरण के लिए, कुछ p5.js विधियां 2डी निर्देशांकों और 3डी निर्देशांकों दोनों के साथ काम करती हैं, लेकिन अन्य 3डी निर्देशांकों का उपयोग करने पर टूट जाती हैं। आमतौर पर इन पर काम शुरू करने के लिए स्वतंत्र हैं।\n* **विशेषता अनुरोध** सभी अन्य कोड परिवर्तन अनुरोध हैं। इन पर यह सुनिश्चित करने के लिए थोड़ी चर्चा करने की आवश्यकता होती है कि वे वेबजीएल मोड की रोडमैप में फिट बैठते हैं या नहीं।\n* **दस्तावेजीकरण समस्या** वे हैं जिनके लिए कोड परिवर्तन की आवश्यकता नहीं होती है, बल्कि इसके बजाय p5.js के व्यवहार की बेहतर दस्तावेजीकरण की आवश्यकता होती है।\n\n## कोड कहाँ रखना है\n\nयहां वेबजीएल से संबंधित सभी चीजें src/webgl सबडायरेक्टरी में हैं। इस डायरेक्टरी के भीतर, शीर्ष-स्तरीय p5.js फ़ंक्शन विषय क्षेत्र के आधार पर फाइलों में विभाजित हैं: प्रकाश सेट करने के आदेश lighting.js में जाते हैं; सामग्रियां सेट करने के आदेश materials.js में जाते हैं।\n\nजब उपयोगकर्ता-अभिमुख वर्गों को लागू किया जाता है, तो हम आमतौर पर एक फ़ाइल प्रति वर्ग रखने की कोशिश करते हैं। इन फ़ाइलों में कभी-कभी कुछ अन्य आंतरिक उपयोगिता वर्ग हो सकते हैं। उदाहरण के लिए, `p5.Framebuffer.js` में `p5.Framebuffer` वर्ग शामिल है, और इसमें अन्य मुख्य वर्गों की कुछ फ्रेमबफर-विशिष्ट उपवर्ग भी शामिल हैं। अन्य फ्रेमबफर-विशिष्ट उपवर्ग भी इस फ़ाइल में जा सकते हैं।\n\n`p5.RendererGL` एक बड़ा वर्ग है जो बहुत सारे व्यवहार को संभालता है। इस कारण से, एक बड़ी वर्ग फ़ाइल होने के बजाय, इसकी कार्यक्षमता कई फ़ाइलों में विभाजित है, जो इस बात पर निर्भर करती है कि यह किस विषय क्षेत्र से संबंधित है। यहां एक विवरण है कि हम `p5.RendererGL` को किन फाइलों में विभाजित करते हैं, और प्रत्येक में क्या डालना है:\n\n#### `p5.RendererGL.js`\n\nआरंभीकरण और मूल कार्यक्षमता।\n\n#### `p5.RendererGL.Immediate.js`\n\n**तत्काल मोड** आरेखण से संबंधित कार्यक्षमता (आकृतियां जो संग्रहीत और पुन: उपयोग नहीं की जाएंगी, जैसे `beginShape()` और `endShape()`)\n\n#### `p5.RendererGL.Retained.js`\n\n**रिटेन्ड मोड** आरेखण से संबंधित कार्यक्षमता (आकृतियां जो पुन: उपयोग के लिए संग्रहीत की गई हैं, जैसे `sphere()`)\n\n#### `material.js`\n\nमिश्रण मोड का प्रबंधन\n\n#### `3d_primitives.js`\n\nउपयोगकर्ता-अभिमुख फ़ंक्शन जो आकृतियां आरेखित करते हैं, जैसे `triangle()`। ये आकृतियों की ज्यामिति परिभाषित करते हैं। उन आकृतियों का रेंडरिंग फिर `p5.RendererGL.Retained.js` या `p5.RendererGL.Immediate.js` में होता है, ज्यामिति इनपुट को एक सामान्य आकृति के रूप में मानते हुए।\n\n#### `Text.js`\n\nलेखन रेंडरिंग के लिए कार्यक्षमता और उपयोगिता वर्ग।\n\n## वेबजीएल परिवर्तनों का परीक्षण करना\n\n### सुसंगतता का परीक्षण\n\np5.js में फ़ंक्शन का उपयोग करने के बहुत से तरीके हैं। इसकी मैन्युअल रूप से जांच करना मुश्किल है, इसलिए हम जहां भी संभव हो युनिट टेस्ट जोड़ते हैं। इस तरह, जब हम नए परिवर्तन करते हैं, तो हम अधिक आश्वस्त हो सकते हैं कि हमने किसी चीज को नहीं तोड़ा है यदि सभी युनिट टेस्ट अभी भी पास हो रहे हैं।\n\nजब एक नया टेस्ट जोड़ा जाता है, तो यदि विशेषता कुछ ऐसा है जो 2डी मोड में भी काम करता है, तो सुसंगतता की जांच करने का सबसे अच्छा तरीका यह है कि आप देखें कि दोनों मोड में परिणामी पिक्सेल समान हैं। एक युनिट टेस्ट में इसका एक उदाहरण यहां दिया गया है:\n\n```js\ntest('coplanar strokes match 2D', function() {\n const getColors = function(mode) {\n myp5.createCanvas(20, 20, mode);\n myp5.pixelDensity(1);\n myp5.background(255);\n myp5.strokeCap(myp5.SQUARE);\n myp5.strokeJoin(myp5.MITER);\n if (mode === myp5.WEBGL) {\n myp5.translate(-myp5.width/2, -myp5.height/2);\n }\n myp5.stroke('black');\n myp5.strokeWeight(4);\n myp5.fill('red');\n myp5.rect(10, 10, 15, 15);\n myp5.fill('blue');\n myp5.rect(0, 0, 15, 15);\n myp5.loadPixels();\n return [...myp5.pixels];\n };\n assert.deepEqual(getColors(myp5.P2D), getColors(myp5.WEBGL));\n});\n```\n\nयह हमेशा काम नहीं करता क्योंकि आप 2डी मोड में एंटीएलियासिंग को बंद नहीं कर सकते, और वेबजीएल मोड में एंटीएलियासिंग अक्सर थोड़ा अलग होगा। हालांकि, ये x और y अक्षों में सीधी रेखाओं के लिए काम कर सकता है!\n\nयदि कोई सुविधा केवल वेबजीएल के लिए है, तो 2डी मोड के साथ पिक्सेल की तुलना करने के बजाय, हम अक्सर कुछ पिक्सेल की जांच करते हैं ताकि यह सुनिश्चित किया जा सके कि उनका रंग वह है जिसकी हम उम्मीद करते हैं। एक दिन, हम इसे हमारे अपेक्षित परिणामों की पूरी छवि स्नैपशॉट की तुलना करने के लिए एक अधिक मजबूत प्रणाली में बदल सकते हैं, बजाय कुछ पिक्सेल की तुलना करने के, लेकिन अभी के लिए, यहां एक पिक्सेल रंग जांच का उदाहरण है:\n\n```js\ntest('color interpolation', function() {\n const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);\n // upper color: (200, 0, 0, 255);\n // lower color: (0, 0, 200, 255);\n // expected center color: (100, 0, 100, 255);\n myp5.beginShape();\n myp5.fill(200, 0, 0);\n myp5.vertex(-128, -128);\n myp5.fill(200, 0, 0);\n myp5.vertex(128, -128);\n myp5.fill(0, 0, 200);\n myp5.vertex(128, 128);\n myp5.fill(0, 0, 200);\n myp5.vertex(-128, 128);\n myp5.endShape(myp5.CLOSE);\n assert.equal(renderer._useVertexColor, true);\n assert.deepEqual(myp5.get(128, 128), [100, 0, 100, 255]);\n});\n```\n\n### परफॉर्मेंस परीक्षण\n\nजबकि यह p5.js का # 1 समस्या नहीं है, हम सुनिश्चित करने की कोशिश करते हैं कि परिवर्तन परफॉर्मेंस पर बहुत अधिक प्रभाव नहीं डालते हैं। आमतौर पर, यह दो परीक्षण स्केच बनाकर किया जाता है: एक आपके बदलाव के साथ और एक बिना बदलाव के। फिर हम दोनों के फ्रेम रेट की तुलना करते हैं।\n\nपरफॉर्मेंस को मापने के बारे में कुछ सलाह:\n\n* अपने स्केच के शीर्ष पर `p5.disableFriendlyErrors = true` के साथ अनुकूल त्रुटियों को अक्षम करें (या बस `p5.min.js` का परीक्षण करें, जिसमें अनुकूल त्रुटि प्रणाली शामिल नहीं है)\n* स्थिर स्टेट फ्रेम दर का स्पष्ट अनुभव प्राप्त करने के लिए औसत फ्रेम दर प्रदर्शित करें:\n\n```js\nlet frameRateP;\nlet avgFrameRates = [];\nlet frameRateSum = 0;\nconst numSamples = 30;\nfunction setup() {\n // ...\n frameRateP = createP();\n frameRateP.position(0, 0);\n}\nfunction draw() {\n // ...\n const rate = frameRate() / numSamples;\n avgFrameRates.push(rate);\n frameRateSum += rate;\n if (avgFrameRates.length > numSamples) {\n frameRateSum -= avgFrameRates.shift();\n }\n \n frameRateP.html(round(frameRateSum) + ' avg fps');\n}\n```\n\nहम निम्नलिखित मामलों का परीक्षण करने की कोशिश करते हैं क्योंकि वे रेंडरिंग पाइपलाइन के विभिन्न हिस्सों पर दबाव डालते हैं:\n\n* कुछ बहुत ही जटिल आकृतियां (उदाहरण के लिए, एक बड़ा 3डी मॉडल या एक लंबी वक्र रेखा)\n* कई सरल आकृतियां (उदाहरण के लिए, एक फॉर लूप में कई बार `line()` फ़ंक्शन का उपयोग)\n"}},"examples":{"आदिम आकार":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"\nयह प्रोग्राम\n<a href=\"https://p5js.org/reference/p5/square\" target=\"_blank\">square()</a>,\n<a href=\"https://p5js.org/reference/p5/rect\" target=\"_blank\">rect()</a>,\n<a href=\"https://p5js.org/reference/p5/ellipse\" target=\"_blank\">ellipse()</a>,\n<a href=\"https://p5js.org/reference/p5/circle\" target=\"_blank\">circle()</a>,\n<a href=\"https://p5js.org/reference/p5/arc\" target=\"_blank\">arc()</a>,\n<a href=\"https://p5js.org/reference/p5/line\" target=\"_blank\">line()</a>,\n<a href=\"https://p5js.org/reference/p5/triangle\" target=\"_blank\">triangle()</a>,\nऔर <a href=\"https://p5js.org/reference/p5/quad\" target=\"_blank\">quad()</a> जैसे मूल आकार के आदिम कार्यों के उपयोग को प्रदर्शित करता है।"},"रंग":{"relativeUrl":"/examples/shapes-and-color-color","description":"\r\nयह रंग जोड़कर आकार आदिम उदाहरण पर विस्तार करता है।\r\n<a href='https://p5js.org/reference/p5/background' target='_blank'>background()</a> कैनवास को एक रंग से भरता है, <a href=\"https:// p5js.org/reference/p5/stroke\" target='_blank'>stroke()</a> रेखाएं खींचने के लिए रंग सेट करता है, और <a href=\"https://p5js.org/reference/p5/fill\" target=\"_blank\">fill()</a> आकृतियों के अंदर का रंग सेट करता है। <a href='https://p5js.org/reference/p5/noStroke' target='_blank'>noStroke()</a> और <a href='https://p5js.org/reference/ #/p5/noFill' target='_blank'>noFill()</a> क्रमशः लाइन रंग और आंतरिक रंग बंद करते है।\r\n\r\nरंगों को कई अलग-अलग तरीकों से दर्शाया जा सकता है। यह उदाहरण कई विकल्प प्रदर्शित करता ह।"},"रेखाएँ खींचना":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"\r\nएक रेखा खींचने के लिए माउस को क्लिक करें और खींचें।\r\n\r\nयह उदाहरण कई बिल्ट-इन वेरिएबल के उपयोग को प्रदर्शित करता है।\r\n<a href='https://p5js.org/reference/p5/mouseX'>mouseX</a> और <a href='https://p5js.org/reference/p5/mouseY'> mouseY</a> वर्तमान माउस स्थिति को संग्रहीत करता है, जबकि पिछली माउस स्थिति को <a href=\"https://p5js.org/reference/p5/pmouseX\">pmouseX</a> और <a href=\"https://p5js.org/reference/p5/pmouseY\">pmouseY</a> द्वारा दर्शाया जाता है।\r\n\r\n *\r\n\r\nयह उदाहरण HSB (रंग-संतृप्ति-चमक) के साथ <a href=\"https://p5js.org/reference/p5/colorMode\">colorMode</a> का उपयोग भी दिखाता है, ताकि पहला वेरिएबल रंग सेट कर पाये।"},"घटनाओं के साथ एनीमेशन":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"\r\nयह उदाहरण <a href='https://p5js.org/reference/p5/loop'>loop()</a> और <a href='https://p5js.org/reference/p5/noLoop'>noLoop()</a> के उपयोग को एनीमेशन को रोकने और फिर से शुरू करने के लिए दर्शाता है।\r\n\r\nमाउस पर क्लिक करने से एनीमेशन लूप चालू हो जाता है। यदि एनीमेशन लूप बंद हो जाता है, तो उपयोगकर्ता एक फ्रेम को आगे बढ़ाने के लिए कोई भी कुंजी दबा सकता है। ध्यान दें: कुंजी दबाने को पंजीकृत करने के लिए उपयोगकर्ता को कैनवास पर फोकस सेट करने के लिए क्लिक करना होगा।\r\n\r\nएकल फ़्रेम को आगे बढ़ाने का काम <a href='https://p5js.org/reference/p5/redraw'>redraw()</a> फ़ंक्शन को कॉल करके पूरा किया जाता है, जो आंतरिक रूप से draw() कॉल करता है।"},"मोबाइल डिवाइस मूवमेंट":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"\r\n<a href='https://p5js.org/reference/p5/deviceMoved' target='_blank'>deviceMoved()</a>\r\nफ़ंक्शन तब चलता है जब स्केच प्रदर्शित करने वाला मोबाइल उपकरण चलता है।\r\n\r\nइस उदाहरण में, <a href='https://p5js.org/reference/p5/accelerationX' target='_blank'>accelerationX</a>, <a href='https://p5js.org/reference/p5/accelerationY' target='_blank'>accelerationY</a>, और <a href='https://p5js.org/reference/p5/accelerationZ' target='_blank'>accelerationZ </a> मान वृत्त की स्थिति और आकार निर्धारित करते हैं। यह केवल मोबाइल उपकरणों के लिए काम करता है।"},"स्थितियाँ":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"\r\n<code>if</code> और <code>else</code> कथन <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block' target='_blank'>कोड के ब्लॉक</a> केवल तभी चलाते हैं जब कोई निश्चित शर्त सत्य हो। यह उदाहरण केवल तभी एनिमेट होता है जब माउस को नीचे दबाया जाता है। ऐसा लाइन 59 पर मौजूद <code>if</code> स्टेटमेंट के कारण है। आप <code>if</code> और <code>else</code> स्टेटमेंट्स के बारे में अधिक पढ़ सकते हैं <a href='https://p5js.org/reference/p5/if-else'>p5 रेफरेंस में</ a> या <a href='https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals' target='_blank'>MDN पर</a>।\r\n\r\nतुलना ऑपरेटर दो मानों की तुलना करके स्थितियाँ बनाने में मदद करते हैं। इस उदाहरण में, पंक्ति 69 पर <code>if</code> कथन के कारण रंग कम से कम 360 होने पर वृत्त का रंग शून्य पर रीसेट हो जाता है। आप तुलना ऑपरेटरों के बारे में अधिक पढ़ सकते हैं <a href='https://developer.mozilla.org/ en-US/docs/Web/JavaScript/Reference/Operators#relational_operators' target='_blank'>MDN</a> पर।\r\n\r\n\r\nतार्किक संचालक शर्तों को संयोजित करने की अनुमति देते हैं। <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operator/Logical_AND' target='_blank'>&&</a> जांचता है कि दोनों स्थितियां सच हैं। इस उदाहरण में वृत्त जब कैनवास के क्षैतिज केंद्र की ओर होता है तो उसमें काला भराव होता है, और जब ऐसा नहीं होता है तो उसमें सफेद भराव होता है। ऐसा पंक्ति 45 पर दिए गए <code>if</code> कथन के कारण है, जो जाँचता है कि वृत्त की x स्थिति कम से कम 100 है और 300 से अधिक नहीं है।\r\n<a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operator/Logical_OR' target='_blank'>||</a> जांचता है कि इनमें से कम से कम एक स्थितियाँ सत्य हैं। जब वृत्त पंक्ति 75 पर दिए गए <code>if</code> कथन के कारण कैनवास के बाएँ या दाएँ किनारे तक पहुँचता है तो वह क्षैतिज गति को उलट देता है।\r\n"},"शब्द":{"relativeUrl":"/examples/imported-media-words","description":"\r\n<a href='https://p5js.org/reference/p5/text' target='_blank'>text()</a> फ़ंक्शन का उपयोग कैनवास में टेक्स्ट डालने के लिए किया जाता है।\r\n\r\nआप <a href='https://p5js.org/reference/p5/loadFont' target='_blank'>loadFont()</a> और <a href=\"https://p5js.org/reference/p5/fontSize\" target=\"_blank\">fontSize()</a> फ़ंक्शन का उपयोग करके फ़ॉन्ट और टेक्स्ट का आकार बदल सकते हैं।\r\n\r\nटेक्स्ट को <a href='https://p5js.org/reference/p5/textAlign' target='_blank'>textAlign()</a> फ़ंक्शन के साथ बाएं, केंद्र या दाएं संरेखित किया जा सकता है, और, आकृतियों की तरह, टेक्स्ट को <a href='https://p5js.org/reference/p5/fill' target='_blank'>fill()</a> से रंगीन किया जा सकता है।\r\n"},"छवि डेटा कॉपी करें":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"\r\n<a href='https://p5js.org/reference/p5/copy' target='_blank'>copy()</a> विधि का उपयोग करके, आप किसी छवि को रंगने की प्रक्रिया का अनुकरण कर सकते हैं। यह काले और सफेद छवि के शीर्ष पर जहां भी कर्सर खींचा जाता है, रंगीन छवि की एक छवि की प्रतिलिपि बनाकर किया जाता है।"},"अल्फा मास्क":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"\r\n<a href='https://p5js.org/reference/p5/mask' target='_blank'>mask()</a> विधि का उपयोग करके, आप एक छवि के लिए एक मास्क बना सकते हैं, और इसका उपयोग कर सकते हैं विभिन्न भागों में पारदर्शिता निर्दिष्ट करने के लिए। इस उदाहरण को स्थानीय रूप से चलाने के लिए, आपको दो छवि फ़ाइलों और एक चालू <a href=\"https://github.com/processing/p5.js/wiki/Local-server\">स्थानीय सर्वर</a> की आवश्यकता होगी।"},"छवि पारदर्शिता":{"relativeUrl":"/examples/imported-media-image-transparency","description":"\r\nयह प्रोग्राम <a href='https://p5js.org/reference/p5/tint' target='_blank'>tint()</a> फ़ंक्शन के साथ छवि के अल्फा मान को संशोधित करके एक छवि को दूसरी छवि पर ओवरले करता है। छवि की स्थिति बदलने के लिए कर्सर को कैनवास पर बाएँ और दाएँ घुमाएँ। इस उदाहरण को स्थानीय रूप से चलाने के लिए, आपको एक छवि फ़ाइल और एक चालू <a href=\"https://github.com/processing/p5.js/wiki/Local-server\">स्थानीय सर्वर</a> की आवश्यकता होगी।"},"ऑडियो प्लेयर":{"relativeUrl":"/examples/imported-media-create-audio","description":"\r\n<a href='https://p5js.org/reference/p5/createAudio' target='_blank'>createAudio()</a> एक ऑडियो प्लेयर बनाता है। यह उदाहरण ऑडियो प्लेयर के नियंत्रण को प्रदर्शित करता है और उसकी गति को समायोजित करता है। जब माउस विंडो के बाएँ किनारे पर होता है तो प्लेबैक गति सामान्य होती है, और जैसे ही माउस दाईं ओर जाता है यह तेज़ हो जाती है। ऑडियो प्लेयर जैसे मीडिया तत्वों का उपयोग करने के बारे में अधिक जानकारी <a href='https://p5js.org/reference/p5.MediaElement' target='_blank'>p5.MediaElement</a> संदर्भ पृष्ठ पर है। ऑडियो फ़ाइल एक <a href='https://freesound.org/people/josefpres/sounds/711156/' target='_blank'> सार्वजनिक डोमेन में जोसेफ़ प्रेस द्वारा बनाया गया पियानो लूप</a> है।"},"वीडियो प्लेयर":{"relativeUrl":"/examples/imported-media-video","description":"\r\n<a href='https://p5js.org/reference/p5/noCanvas' target='_blank'>noCanvas()</a> और <a href='https://p5js.org/reference/p5/createVideo' target='_blank'>createVideo()</a> फ़ंक्शन का उपयोग करके आप <a href='https://developer.mozilla.org/en-US/docs/Glossary/DOM' target=\"_blank\">DOM</a> में एक वीडियो अपलोड कर सकते हैं, वीडियो को कैनवास में एम्बेड किए बिना। कैनवास तत्व के भीतर एम्बेडेड वीडियो बनाने के लिए, <a href='https://p5js.org/examples/imported-media-video-canvas/' target='_blank'>वीडियो कैनवास</a> उदाहरण पर जाएं।"},"वीडियो कैनवास":{"relativeUrl":"/examples/imported-media-video-canvas","description":"\r\n<a href='https://p5js.org/reference/p5/createVideo' target='_blank'>createVideo()</a> और <a href='https://p5js.org/reference/p5/image' target=\"_blank\">image()</a> फ़ंक्शंस का उपयोग करके आप कैनवास में एक वीडियो अपलोड कर सकते हैं।\r\nचूँकि वीडियो कैप्चर <a href='https://p5js.org/reference/p5/image' target='_blank'>image()</a> कंस्ट्रक्टर से होकर गुजरता है, आप इसमें फ़िल्टर जोड़ सकते हैं <a href='https://p5js.org/reference/p5/filter' target='_blank'>filter()</a> विधि का उपयोग करके।\r\nइस उदाहरण को स्थानीय रूप से चलाने के लिए, आपको एक चालू <a href=\"https://github.com/processing/p5.js/wiki/Local-server\">स्थानीय सर्वर</a> की आवश्यकता होगी।\r\nकैनवास में एम्बेड किए बिना वीडियो बनाने के लिए, <a href='https://p5js.org/examples/imported-media-video/'>वीडियो</a> उदाहरण पर जाएं।"},"विडियो रिकॉर्ड":{"relativeUrl":"/examples/imported-media-video-capture","description":"\r\n<a href='https://p5js.org/reference/p5/createCapture' target='_blank'>createCapture()</a> \r\nऔर <a href='https://p5js.org/reference/p5/image' target='_blank'>image()</a> फ़ंक्शन का उपयोग करके आप किसी डिवाइस का वीडियो कैप्चर ले सकते हैं और उसे कैनवास में बना सकते हैं।\r\nचूँकि वीडियो कैप्चर <a href='https://p5js.org/reference/p5/image' target='_blank'>image()</a> कंस्ट्रक्टर से होकर गुजरता है, आप इसमें <a href='https://p5js.org/reference/p5/filter' target='_blank'>filter()</a> विधि से फ़िल्टर जोड़ सकते हैं।\r\nवीडियो अपलोड करने, प्रस्तुत करने या स्टाइल करने की विभिन्न रणनीतियों के लिए, <a href='https://p5js.org/examples/imported-media-video/' target='_blank'>वीडियो</a> और <a href='https://p5js.org/examples/imported-media-video-canvas/' target='_blank'>वीडियो कैनवस</a> उदाहरण पर जाएं।"},"छवि ड्रॉप":{"relativeUrl":"/examples/input-elements-image-drop","description":"\r\n<a href='https://p5js.org/reference/p5.Element/drop' target='_blank'>drop()</a> एक p5.js तत्व विधि है जो हर बार कॉलबैक फ़ंक्शन को कॉल करती है जब एक फ़ाइल तत्व में लोड करना पूरा करती है। \r\nअपलोड की गई फ़ाइल एक <a href='https://p5js.org/reference/p5.File' target='_blank'>p5.File</a> क्लास में बनाई गई है।\r\nआप फ़ाइल प्रकार की जांच करने के लिए <a href='https://p5js.org/reference/p5.Element/drop' target='_blank'>drop()</a> कॉलबैक का उपयोग कर सकते हैं, और फिर विभिन्न फ़ाइल प्रकारों पर अलग-अलग प्रतिक्रिया देने के लिए सशर्त विवरण लिख सकते हैं।"},"इनपुट और बटन":{"relativeUrl":"/examples/input-elements-input-button","description":"\r\n<a href='https://p5js.org/reference/p5.Element/createElement' target='_blank'>createElement()</a>, <a href='https://p5js का उपयोग करना। org/reference/p5/createInput' target='_blank'>createInput()</a>, और <a href='https://p5js.org/reference/p5.Element/createButton' target= \"_blank\">createButton()</a> फ़ंक्शंस के साथ, आप टेक्स्ट इनपुट के माध्यम से सबमिट किए गए एक टेक्स्ट स्ट्रिंग ले सकते हैं और इसे अपने कैनवास पर प्रदर्शित कर सकते हैं।"},"फॉर्म तत्व":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"\r\n<a href='https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model' target='_blank'>डॉक्यूमेंट ऑब्जेक्ट मॉडल</a>, या DOM, वेब पेज की परिणामी संरचना का प्रतिनिधित्व करता है। \r\np5.js के फॉर्म तत्वों का उपयोग करके, जैसे <a href='https://p5js.org/reference/p5/createInput' target='_blank'>createInput()</a>, <a href='https://p5js.org/reference/p5/createSelect' target='_blank'>createSelect()</a>, और <a href='https://p5js.org/reference/p5/createRadio' target='_blank'>createRadio()</a>, आप <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select' target='_blank'>select</a>, <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input' target='_blank'>input</a>, या <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio\" target=\"_blank\">radio button</ a> के माध्यम से सबमिट की गई जानकारी लेने के विभिन्न तरीके बना सकते हैं और जानकारी के आधार पर DOM को अपडेट कर सकते हैं।\r\n "},"ट्रांसलेट":{"relativeUrl":"/examples/transformation-translate","description":"\r\n<a href='https://p5js.org/reference/p5/translate'>translate()</a> फ़ंक्शन कोऑर्डनिट सिस्टम के ऑरिजिन को निर्दिष्ट स्थान पर ले जाता है।\r\n<a href='https://p5js.org/reference/p5/push'>push()</a> और <a href='https://p5js.org/reference/p5/ pop'>पॉप()</a> फ़ंक्शन कोऑर्डनिट सिस्टम और विभिन्न अन्य ड्राइंग सेटिंग्स, जैसे भरण रंग, को सहेजते और पुनर्स्थापित करते हैं।\r\nध्यान दें कि इस उदाहरण में, हम हर बार एक अलग कोऑर्डनिट सिस्टम में आकृतियाँ (आयत और वृत्त) बनाते हैं।\r\n"},"रोटेट":{"relativeUrl":"/examples/transformation-rotate","description":"\r\n<a href='https://p5js.org/reference/p5/rotate'>rotate()</a> फ़ंक्शन वर्तमान समन्वय प्रणाली को वर्तमान मूल के चारों ओर घुमाता है।\r\nध्यान दें कि डिफ़ॉल्ट रूप से मूल कैनवास का ऊपरी बाएँ कोना है।\r\nकैनवास के केंद्र के चारों ओर घूमने के लिए, हमें पहले समन्वय प्रणाली का अनुवाद करना होगा, और फिर नए मूल के चारों ओर घूमना होगा।\r\n<a href='https://p5js.org/reference/p5/push'>push()</a> और <a href='https://p5js.org/reference/p5/ pop'>pop()</a> फ़ंक्शन क्रमशः समन्वय प्रणाली को सहेजते और पुनर्स्थापित करते हैं।\r\n"},"स्केल":{"relativeUrl":"/examples/transformation-scale","description":"\r\n<a href='https://p5js.org/reference/p5/scale'>scale()</a> फ़ंक्शन निर्दिष्ट स्केल द्वारा वर्तमान समन्वय प्रणाली को बधा देता है।\r\n<a href='https://p5js.org/reference/p5/push'>push()</a> और <a href='https://p5js.org/reference/p5/ pop'>pop()</a> फ़ंक्शन क्रमशः समन्वय प्रणाली को सहेजते और पुनर्स्थापित करते हैं।\r\nइस उदाहरण में, तीन अलग-अलग स्केलिंग फैक्टर के साथ, 200 आकार के वर्ग बनाये गये हैं।"},"रेखिक आंतरिक":{"relativeUrl":"/examples/calculating-values-interpolate","description":"\r\n<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Interpolation\" target=\"_blank\">Interpolation</a>\r\nदो अन्य मानों के बीच मान की गणना करता है। उदाहरण के लिए, संख्या 5 है\r\n0 और 10 के मध्य। विभिन्न प्रकार के प्रक्षेप उपयोग\r\nमूल्यों के बीच परिवर्तन की विभिन्न दरें। रेखिक आंतरिक,\r\nजिसे संक्षेप में एलआरपी कहा जाता है, परिवर्तन की निरंतर दर का उपयोग करता है।\r\n<a href='https://p5js.org/reference/p5/lerp' target='_blank'>lerp()</a>\r\nफ़ंक्शन दो संख्याओं के बीच रैखिक रूप से अंतरण करता है।\r\n\r\nमाउस को स्क्रीन पर ले जाएँ और प्रतीक अनुसरण करेगा।\r\nएनीमेशन के प्रत्येक फ्रेम को चित्रित करने के बीच, दीर्घवृत्त भाग चलता है\r\nकर्सर की ओर इसकी वर्तमान स्थिति से दूरी की।"},"नक्शा":{"relativeUrl":"/examples/calculating-values-map","description":"\r\nThe\r\n<a href=\"https://p5js.org/reference/p5/map\" target=\"_blank\">map()</a>\r\nफ़ंक्शन किसी मान को एक श्रेणी से दूसरी श्रेणी में परिवर्तित करता है। इस उदाहरण में, मानचित्र\r\nकर्सर की क्षैतिज स्थिति को 0-720 से 0-360 की सीमा में परिवर्तित करता है।\r\nपरिणामी मान वृत्त का रंग बन जाता है। मानचित्र कर्सर को भी परिवर्तित करता है\r\nऊर्ध्वाधर स्थिति 0-400 से 20-300 की सीमा तक। परिणामी मूल्य\r\nवृत्त का व्यास बन जाता है।"},"यादृच्छिक":{"relativeUrl":"/examples/calculating-values-random","description":"\r\nयह उदाहरण इस फंक्शन के उपयोग को \r\n<a href='https://p5js.org/reference/p5/random'>random()</a>\r\nदर्शाता है।\r\n\r\nजब उपयोगकर्ता माउस बटन दबाता है, तो स्थिति और रंग\r\nवृत्त का अनियमित रूप से परिवर्तन होता है।"},"विवश":{"relativeUrl":"/examples/calculating-values-constrain","description":"\r\nयह उदाहरण कर्सर की स्थिति के अनुसार एक वृत्त खींचता है\r\nवृत्त को एक आयत के भीतर रखता है। यह पारित करके ऐसा करता है\r\nमाउस के निर्देशांक में\r\n<a href='https://p5js.org/reference/p5/constrain' target='_blank'>constrain()</a>\r\nफंक्शन।\r\n"},"घड़ी":{"relativeUrl":"/examples/calculating-values-clock","description":"\r\nइन फंक्शन से वर्तमान समय पढ़ा जा सकता है\r\n<a href=\"https://p5js.org/reference/p5/second\" target=\"_blank\">second()</a>,\r\n<a href=\"https://p5js.org/reference/p5/minute\" target=\"_blank\">minute()</a>,\r\nand <a href=\"https://p5js.org/reference/p5/minute\" target=\"_blank\">hour()</a>\r\nयह उदाहरण उपयोग करता है\r\n<a href=\"https://p5js.org/reference/p5/map\" target=\"_blank\">map()</a>\r\nहाथों के कोण की गणना करने के लिए. इसके बाद उपयोग होता है\r\n<a href=\"https://p5js.org/reference/#group-Transform\" target=\"_blank\">transformations</a>\r\nउनकी स्थिति निर्धारित करने के लिए."},"रंग अंतर्वेशन":{"relativeUrl":"/examples/repetition-color-interpolation","description":"\r\n<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Interpolation\" target=\"_blank\">Interpolation</a>\r\nदो अन्य मानों के बीच मान की गणना करता है। उदाहरण के लिए, संख्या 5 है\r\n0 और 10 के मध्य। विभिन्न प्रकार के प्रक्षेप उपयोग\r\nमूल्यों के बीच परिवर्तन की विभिन्न दरें। रेखिक आंतरिक,\r\nजिसे संक्षेप में एलआरपी कहा जाता है, परिवर्तन की निरंतर दर का उपयोग करता है।\r\n<a href='https://p5js.org/reference/p5/lerp' target='_blank'>lerp()</a>\r\nफ़ंक्शन दो संख्याओं के बीच रैखिक रूप से अंतरण करता है।\r\n<a href='https://p5js.org/reference/p5/lerpColor' target='_blank'>lerpColor()</a>\r\nफ़ंक्शन, यहां प्रदर्शित किया गया है, दो रंगों के बीच रैखिक रूप से अंतरण करता है।\r\nइस उदाहरण में, स्ट्राइपकाउंट वैरिएबल कितने क्षैतिज को समायोजित करता है\r\nधारियाँ दिखाई देती हैं. मान को अधिक संख्या पर सेट करने से वह कम दिखाई देगी\r\nअलग-अलग धारियों की तरह और एक ढाल की तरह।"},"रंग पहिया":{"relativeUrl":"/examples/repetition-color-wheel","description":"\r\nयह उदाहरण भिन्न-भिन्न रंग की उपस्थिति को दर्शाता है\r\nयह एक का उपयोग करता है\r\n<a href='https://p5js.org/reference/p5/for' target='_blank'>for loop</a>\r\nपरिवर्तनों को दोहराने के लिए. लूप प्रारंभ होता है\r\nएक चर जिसे कोण कहा जाता है, जो वृत्त के घूर्णन को इस प्रकार बदलता है\r\nसाथ ही उसका रंग भी. हर बार जब लूप दोहराया जाता है, तो एक वृत्त खींचा जाता है\r\nकैनवास के केंद्र के सापेक्ष.\r\n<a href='https://p5js.org/reference/p5/push' target='_blank'>push()</a>\r\nऔर <a href='https://p5js.org/reference/p5/pop' target='_blank'>pop()</a>\r\nफ़ंक्शंस इन परिवर्तनों को केवल व्यक्तिगत सर्कल को प्रभावित करते हैं।\r\n"},"बेज़ियर":{"relativeUrl":"/examples/repetition-bezier","description":"\r\n<a href=\"https://p5js.org/reference/p5/bezier\" target='_blank'>bezier()</a> \r\nनियंत्रण और एंकर बिंदुओं का उपयोग करके वक्र बनाए जाते हैं।\r\nके लिए पहले दो पैरामीटर\r\n<a href='https://p5js.org/reference/p5/bezier' target='_blank'>bezier()</a>\r\nफ़ंक्शन वक्र में पहला बिंदु और अंतिम दो पैरामीटर निर्दिष्ट करता है\r\nअंतिम बिंदु निर्दिष्ट करें. मध्य पैरामीटर नियंत्रण बिंदु निर्धारित करते हैं\r\nवक्र के आकार को परिभाषित करें."},"बहुरूपदर्शक":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"\r\nबहुरूपदर्शक दो या दो से अधिक वाला एक ऑप्टिकल उपकरण है\r\nपरावर्तक सतहें एक दूसरे से एक कोण पर झुकी हुई होती हैं। का उपयोग\r\n<a href='https://p5js.org/reference/p5/translate' target='_blank'>translate()</a>,\r\n<a href='https://p5js.org/reference/p5/rotate' target='_blank'>rotate()</a>,\r\nऔर <a href='https://p5js.org/reference/p5/scale' target='_blank'>scale()</a> फ़ंक्शन, आप परिणामी दृश्य को दोहरा सकते हैं\r\nएक कैनवास में बहुरूपदर्शक का."},"शोर":{"relativeUrl":"/examples/repetition-noise","description":"\r\n<a href=\"https://en.wikipedia.org/wiki/Perlin_noise\" target=\"_blank\">Perlin noise</a>\r\nकेन पेरलिन द्वारा लिखित एक एल्गोरिदम है जो दोनों प्रकार के अनुक्रम उत्पन्न करता है\r\nयादृच्छिक और जैविक.\r\n<a href='https://p5js.org/reference/p5/noise' target='_blank'>शोर()</a>\r\np5 में फ़ंक्शन पर्लिन शोर उत्पन्न करता है।\r\n\r\nइस उदाहरण में बिंदुओं का आकार शोर मानों के आधार पर किया गया है। स्लाइडर पर\r\nबाएँ बिंदुओं के बीच की दूरी निर्धारित करता है। दाईं ओर का स्लाइडर ऑफसेट सेट करता है\r\nशोर गणना में."},"पुनरावर्ती वृक्ष":{"relativeUrl":"/examples/repetition-recursive-tree","description":"\r\nयह रिकर्सन के माध्यम से एक सरल पेड़ जैसी संरचना प्रस्तुत करने का एक उदाहरण है।\r\nशाखा कोण की गणना क्षैतिज माउस के फ़ंक्शन के रूप में की जाती है\r\nजगह। कोण बदलने के लिए माउस को बाएँ और दाएँ घुमाएँ।\r\nप्रोसेसिंग के लिए डैनियल शिफमैन के <a href=\"https://processing.org/examples/tree.html\">Recursive tree example</a> पर आधारित।\r\n"},"यादृच्छिक कविता":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"\r\n<a href='https://p5js.org/reference/p5/floor' target='_blank'>floor()</a>\r\nऔर\r\n<a href='https://p5js.org/reference/p5/random' target='_blank'>random()</a>\r\nफ़ंक्शंस, का उपयोग\r\nआप किसी सरणी से यादृच्छिक रूप से आइटमों की एक श्रृंखला का चयन कर सकते हैं\r\nऔर उन्हें कैनवास पर विभिन्न आकारों और स्थानों पर बनाएं।"},"साइन और कोसाइन":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"\r\nयह उदाहरण दर्शाता है\r\n<a href='https://en.wikipedia.org/wiki/Sine_and_cosine'>sine and cosine</a>\r\nगणितीय कार्य.\r\n\r\nएनीमेशन यूनिट सर्कल के चारों ओर एक समान गोलाकार गति दिखाता है\r\n(त्रिज्या 1 वाला वृत्त)। x-अक्ष से मापा गया कोई भी कोण\r\nवृत्त पर एक बिंदु निर्धारित करता है। कोण की कोज्या और ज्या\r\nको क्रमशः x और y निर्देशांक के रूप में परिभाषित किया गया है\r\nबिंदु।"},"उद्देश्य":{"relativeUrl":"/examples/angles-and-motion-aim","description":"\r\n<a href='https://p5js.org/reference/p5/atan2' target='_blank'>atan2()</a>\r\nफ़ंक्शन दो स्थितियों के बीच के कोण की गणना करता है। यह कोण\r\nगणना का उपयोग किसी आकृति को किसी चीज़ की ओर घुमाने के लिए किया जा सकता है। इस में\r\nउदाहरण के लिए, आंखें कर्सर को देखने के लिए घूमती हैं।"},"त्रिकोण पट्टी":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"\r\nयह उदाहरण दर्शाता है कि आकृति कैसे बनाई जाती है\r\nका उपयोग करके, इसके शीर्षों को TRIANGLE_STRIP मोड में निर्दिष्ट करके\r\n<a href='https://p5js.org/reference/p5/beginShape'>beginShape()</a>,\r\n<a href='https://p5js.org/reference/p5/endShape'>endShape()</a>,\r\nऔर\r\n<a href='https://p5js.org/reference/p5/vertex'>vertex()</a>\r\nकार्य."},"सर्कल क्लिकर":{"relativeUrl":"/examples/games-circle-clicker","description":"\r\nयह उदाहरण एक खेल को समय सीमा और स्कोर के साथ प्रदर्शित करता है। ब्राउज़र का\r\n<a href='https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage' target='_blank'>local storage</a>\r\nउच्च स्कोर को संग्रहीत करता है ताकि जब गेम उसी ब्राउज़र का उपयोग करके दोबारा खेला जाए,\r\nउच्च स्कोर बना हुआ है. ब्राउज़र डेटा साफ़ करने से उच्च स्कोर भी साफ़ हो जाता है।"},"पिंग पोंग":{"relativeUrl":"/examples/games-ping-pong","description":"\r\nयह सबसे पुराने आर्केड वीडियो में से एक से प्रेरित गेम है\r\nखेल: अटारी\r\n<a href='https://en.wikipedia.org/wiki/Pong' target='_blank'>pong</a>।\r\nइस दो-खिलाड़ियों के खेल में, प्रत्येक खिलाड़ी एक पैडल को नियंत्रित करता है, जिसे a द्वारा दर्शाया जाता है\r\nसफ़ेद आयत. W और S कुंजियाँ बाईं ओर के पैडल को ऊपर और नीचे घुमाती हैं,\r\nऔर ऊपर और नीचे तीर कुंजियाँ पैडल को दाईं ओर ऊपर और नीचे घुमाती हैं।\r\nखिलाड़ी गेंद को उछालकर अंक अर्जित करते हैं, जिसे एक सफेद वर्ग द्वारा दर्शाया जाता है,\r\nकैनवास के प्रतिद्वंद्वी पक्ष के किनारे से आगे निकलें।`"},"साँप":{"relativeUrl":"/examples/games-snake","description":"\r\nयह एक प्रकार के आर्केड गेम का पुनरुत्पादन है जिसे कहा जाता है\r\n<a href='https://en.wikipedia.org/wiki/Snake_(video_game_genre)' target='_blank'>snake</a>।\r\nपहला स्नेक गेम नाकाबंदी था, जो 1976 में जारी किया गया था, और कई\r\nगेम समान संरचना का उपयोग करते हैं. स्नेक गेम्स में, खिलाड़ी नियंत्रण करता है\r\nइस उदाहरण में साँप की गतिविधियों को हरे रंग से दर्शाया गया है\r\nरेखा। खिलाड़ी का लक्ष्य साँप को एक फल से टकराना है,\r\nएक लाल बिंदु द्वारा दर्शाया गया। हर बार सांप किसी फल से टकराता है,\r\nसाँप लम्बा हो जाता है। खिलाड़ी का लक्ष्य साँप को उतना बड़ा करना है\r\nजितना संभव हो सांप को अपने आप से या किनारों से टकराए बिना\r\nखेल क्षेत्र का.\r\n\r\nयह उदाहरण एक सारणी का उपयोग करता है\r\n<a href='https://p5js.org/reference/p5.Vector' target='_blank'>vector</a>\r\nसाँप के प्रत्येक खंड की स्थिति को संग्रहीत करने के लिए। तीर\r\nचाबियाँ साँप की गति को नियंत्रित करती हैं।"},"ज्योमेट्री":{"relativeUrl":"/examples/3d-geometries","description":"\r\np5 के <a href=\"https://p5js.org/reference/p5/WEBGL\" target=\"_blank\">WEBGL</a> \r\nमोड में 7 आदिम आकार शामिल हैं। वे आकृतियाँ समतल, बॉक्स, बेलन, शंकु, टोरस, गोला और दीर्घवृत्ताभ हैं। इसके अतिरिक्त, \r\n<a href='https://p5js.org/reference/p5/model' target=\"_blank\">model()</a> के माध्यम से लोड की गई एक कस्टम ज्यामिति प्रदर्शित करता है\r\n<a href='https://p5js.org/reference/p5/loadModel' target=\"_blank\">loadModel()</a>। \r\nइस उदाहरण में प्रत्येक आदिम आकृतियाँ शामिल हैं। इसमें <a href='https://nasa3d.arc.nasa.gov/models' \r\ntarget=\"_blank\">NASA के संग्रह</a> से एक मॉडल भी शामिल है।"},"कस्टम ज्यामिति":{"relativeUrl":"/examples/3d-custom-geometry","description":"\r\n<a href='https://p5js.org/reference/p5/buildGeometry' target=\"_blank\">buildGeometry()</a> \r\nफ़ंक्शन आकृतियों को एक 3D मॉडल में संग्रहीत करता है जिसे कुशलतापूर्वक उपयोग और पुन: उपयोग किया जा सकता है।"},"सामग्री":{"relativeUrl":"/examples/3d-materials","description":"\r\n3डी रेंडरिंग में, एक सामग्री यह निर्धारित करती है कि कोई सतह प्रकाश के प्रति कैसी प्रतिक्रिया करती है। p5 का <a href='https://p5js.org/reference/p5/WEBGL' target='_blank'>WEBGL</a> मोड सपोर्ट करता है\r\n<a href=\"https://p5js.org/reference/p5/ambientMaterial\" target=\"_blank\">परिवेश</a>,\r\n<a href=\"https://p5js.org/reference/p5/emissiveMaterial\" target=\"_blank\">उत्सर्जक</a>,\r\n<a href=\"https://p5js.org/reference/p5/normalMaterial\" target=\"_blank\">सामान्य</a>, और\r\n<a href=\"https://p5js.org/reference/p5/specularMaterial\" target=\"_blank\">स्पेक्युलर</a>\r\nसामग्री.\r\n\r\nएक परिवेशीय सामग्री केवल परिवेशी प्रकाश के प्रति प्रतिक्रिया करती है। एक स्पेक्युलर\r\nसामग्री किसी भी प्रकाश स्रोत पर प्रतिक्रिया करती है। पी5 में, एक उत्सर्जक पदार्थ\r\nप्रकाश स्रोत की परवाह किए बिना अपना रंग प्रदर्शित करता है। अन्य सन्दर्भों में,\r\nआमतौर पर एक उत्सर्जक पदार्थ प्रकाश उत्सर्जित करता है। एक सामान्य सामग्री\r\nसतह के प्रत्येक भाग की दिशा की कल्पना करता है। एक सामान्य\r\nसामग्री प्रकाश के प्रति प्रतिक्रिया नहीं करती।\r\n\r\nपरिवेशी और उत्सर्जक सामग्रियों को एक दूसरे के साथ जोड़ा जा सकता है।\r\nइन्हें फिल और स्ट्रोक के साथ भी जोड़ा जा सकता है। भरण एक आधार सेट करता है\r\nसतह के लिए रंग, और स्ट्रोक वस्तु के लिए रंग निर्धारित करता है\r\nशिखर.\r\n\r\nइसके अतिरिक्त,\r\n<a href=\"https://p5js.org/reference/p5/texture\" target=\"_blank\">texture()</a>\r\nकिसी वस्तु को छवि के साथ लपेटता है। इस उदाहरण में मॉडल और छवि बनावट हैं <a href=\"https://nasa3d.arc.nasa.gov\" target=\"_blank\">NASA</a> के संग्रह से।."},"कक्षा नियंत्रण":{"relativeUrl":"/examples/3d-orbit-control","description":"\r\n<a href='https://p5js.org/reference/p5/orbitControl' target=\"_blank\">कक्षा नियंत्रण</a>\r\n3D में कैमरा ओरिएंटेशन को समायोजित करने के लिए माउस या टच इनपुट का उपयोग करता है\r\nस्केच. कैमरा घुमाने के लिए, माउस पर बायाँ-क्लिक करें और खींचें या स्वाइप करें\r\nएक टच स्क्रीन पर. कैमरे को पैन करने के लिए, राइट क्लिक करें और माउस खींचें\r\nया टच स्क्रीन पर एकाधिक अंगुलियों से स्वाइप करें। कैमरा हिलाने के लिए\r\nस्केच के केंद्र के करीब या आगे, स्क्रॉल व्हील का उपयोग करें\r\nमाउस पर या टच स्क्रीन पर पिंच इन/आउट करें।"},"फ़िल्टर शेडर":{"relativeUrl":"/examples/3d-filter-shader","description":"\r\nफ़िल्टर शेडर्स किसी भी चीज़ पर प्रभाव लागू करने का एक तरीका है\r\nकैनवास पर है. इस उदाहरण में, प्रभाव एक वीडियो पर लागू किया जाता है।"},"शेडर के साथ स्थितियों को समायोजित करना":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"\r\nशेडर्स आकृतियों के शीर्षों की स्थिति को समायोजित कर सकते हैं।\r\nयह आपको 3D मॉडल को विकृत और चेतन करने देता है।"},"फ़्रेमबफ़र धुंधला":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"\r\nइस उदाहरण में <a href='https://www.khronos.org/opengl/wiki/Shader' target=\"_blank\">shader</a> ब्लर लगाने के लिए \r\n<a href=\"https://p5js.org/reference/p5.Framebuffer\" target=\"_blank\">p5.Framebuffer</a> से गहराई से जानकारी का उपयोग करता है। वास्तविक कैमरे पर, वस्तुएँ धुंधली दिखाई देती हैं यदि वे लेंस के फोकस से अधिक निकट या दूर हों। यह उस प्रभाव का अनुकरण करता है. सबसे पहले, स्केच फ़्रेमबफ़र को पांच गोले प्रदान करता है। फिर, \r\nयह ब्लर शेडर का उपयोग करके फ़्रेमबफ़र को कैनवास पर प्रस्तुत करता है।"},"ग्राफ़िक्स बनाएं":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"\r\n<a href=\"https://p5js.org/reference/p5/createGraphics\" target=\"_blank\">createGraphics()</a>\r\nफ़ंक्शन का उपयोग एक नया p5.Graphics ऑब्जेक्ट बनाने के लिए किया जा सकता है, जो कैनवास के भीतर एक ऑफ-स्क्रीन ग्राफिक्स बफर के रूप में काम कर सकता है। \r\nऑफ-स्क्रीन बफ़र्स के आयाम और गुण उनकी वर्तमान डिस्प्ले सतह से भिन्न हो सकते हैं, भले ही वे एक ही स्थान पर मौजूद प्रतीत होते हों।"},"एकाधिक कैनवस":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"\r\nडिफ़ॉल्ट रूप से, p5 ग्लोबल मोड में चलता है, जिसका अर्थ है\r\nसभी p5 फ़ंक्शंस वैश्विक दायरे में हैं, और सभी कैनवास-संबंधित फ़ंक्शंस\r\nएक ही कैनवास पर लागू करें. p5 इंस्टेंस मोड में भी चल सकता है, जिसमें वे\r\nसमान फ़ंक्शन p5 वर्ग के उदाहरण की विधियाँ हैं। प्रत्येक उदाहरण\r\np5 का अपना कैनवास हो सकता है.\r\n\r\nइंस्टेंस मोड का उपयोग करने के लिए, एक फ़ंक्शन को प्रतिनिधित्व करने वाले पैरामीटर के साथ परिभाषित किया जाना चाहिए\r\np5 उदाहरण (इस उदाहरण में p लेबल किया गया है)। सभी p5 फ़ंक्शंस और वेरिएबल्स\r\nजो आम तौर पर वैश्विक हैं वे इस फ़ंक्शन के भीतर इस पैरामीटर से संबंधित होंगे\r\nदायरा। फ़ंक्शन को p5 कंस्ट्रक्टर में पास करके, उसे चलाता है।"},"एक बनावट के रूप में शेडर":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"\r\nशेडर्स को टेक्सचर के रूप में 2D/3D आकृतियों पर लागू किया जा सकता है।\r\n\r\nP5.js में शेडर्स का उपयोग करने के बारे में अधिक जानने के लिए:\r\n<a href='https://itp-xstory.github.io/p5js-shaders/'>p5.js Shaders</a>"},"बर्फ के टुकड़े":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"\r\nयह उदाहरण कण प्रणाली के उपयोग को प्रदर्शित करता है\r\nगिरते बर्फ के टुकड़ों की गति का अनुकरण करने के लिए। यह प्रोग्राम एक को परिभाषित करता है\r\nस्नोफ्लेक <a href='https://p5js.org/reference/p5/class'>class</a>\r\nऔर बर्फ के टुकड़े वाली वस्तुओं को रखने के लिए एक सरणी का उपयोग करता है।"},"शेक बॉल बाउंस":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"\r\n<a href='https://p5js.org/reference/p5/class' target=\"_blank\">class</a> का उपयोग करके, आप उन वृत्तों का एक संग्रह\r\nबना सकते हैं जो कैनवास के भीतर चलते हैं मोबाइल डिवाइस का झुकाव. स्केच प्रदर्शित करने के लिए आपको यह पृष्ठ मोबाइल डिवाइस पर खोलना होगा।"},"जुड़े हुए कण":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"\r\nयह उदाहरण दो कस्टम <a href='https://p5js.org/reference/p5/class' target='_blank'>Classes</a> का उपयोग करता है।\r\nकण वर्ग स्थिति, वेग और रंग को संग्रहीत करता है। यह प्रस्तुत करता है\r\nवर्तमान स्थिति और रंग का उपयोग करके एक वृत्त, और यह अद्यतन करता है\r\nवर्तमान वेग का उपयोग कर स्थिति. पथ वर्ग एक सरणी संग्रहीत करता है\r\nकण वर्ग से निर्मित वस्तुओं की। यह पंक्तियाँ प्रस्तुत करता है\r\nप्रत्येक कण को जोड़ना। जब उपयोगकर्ता माउस पर क्लिक करता है\r\nस्केच पथ वर्ग का एक नया उदाहरण बनाता है। जब उपयोगकर्ता खींचता है\r\nमाउस, स्केच कण वर्ग का एक नया उदाहरण जोड़ता है\r\nवर्तमान पथ."},"झुंड बनाना":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"\r\nझुंड के व्यवहार का प्रदर्शन. कार्यान्वयन की पूरी चर्चा डेनियल शिफ़मैन की <a href=\"https://natureofcode.com/book/chapter-6-autonomous-agents/\">Nature of Code</a> पुस्तक में पाई जा सकती है। सिमुलेशन <a href=\"http://www.red3d.com/cwr/\">क्रेग रेनॉल्ड्स</a> \r\nके शोध पर आधारित है, जिन्होंने पक्षी जैसी वस्तु का प्रतिनिधित्व करने के लिए 'बॉइड' शब्द का इस्तेमाल किया था।"},"स्थानीय भंडारण":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"\nब्राउज़र वेबसाइटों को विज़िटर का डेटा संग्रहीत करने की अनुमति देते हैं\nउपकरण। यह कहा जाता है\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">local storage</a>.\n<a href=\"https://p5js.org/reference/p5/getItem\" target=\"_blank\">getItem()</a>,\n<a href=\"https://p5js.org/reference/p5/storeItem\" target=\"_blank\">storeItem()</a>,\n<a href=\"https://p5js.org/reference/p5/clearStorage\" target=\"_blank\">clearStorage()</a>,\nand <a href=\"https://p5js.org/reference/p5/removeItem\" target=\"_blank\">removeItem()</a>\nफ़ंक्शन इसे नियंत्रित करते हैं.\n\nयह उदाहरण जावा में लिखे डैनियल शिफमैन के लोडिंग JSON डेटा और प्रोसेसिंग के लिए सारणीबद्ध डेटा उदाहरणों को लोड करने से प्रेरित है। \nयह बबल के लिए डेटा व्यवस्थित करने के लिए <a href=\"https://p5js.org/reference/p5/class\" target=\"_blank\">class</a>\nका उपयोग करता है। विज़िटर नए बबल जोड़ सकते हैं, और उनका डेटा स्थानीय संग्रहण में सहेजा जाएगा। यदि आगंतुक स्केच को दोबारा देखता है, तो वह उसी बुलबुले को फिर से लोड करेगा।"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"\n<a href='https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON' target='_blank'>जावास्क्रिप्ट ऑब्जेक्ट नोटेशन, या JSON</a>,\n एक प्रारूप है किसी फ़ाइल में डेटा लिखना. जबकि सिंटैक्स जावास्क्रिप्ट से आता है, JSON का उपयोग कई अन्य संदर्भों में किया जाता है। \n यह उदाहरण जावा में लिखे डैनियल शिफमैन के लोडिंग JSON डेटा उदाहरण फॉर प्रोसेसिंग पर आधारित है। यह एक \n <a href='https://p5js.org/reference/p5/class' target='_blank'>class</a> का उपयोग करता है\nएक बुलबुले के लिए डेटा व्यवस्थित करने के लिए। जब स्केच शुरू होता है, तो यह JSON फ़ाइल से दो बबल के लिए डेटा लोड करता है। \nविज़िटर नए बबल जोड़ सकता है, एक अद्यतन JSON फ़ाइल डाउनलोड कर सकता है और JSON फ़ाइल में लोड कर सकता है।"},"तालिका":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"\nकॉमा-सेपरेटेड वैल्यूज़, या सीएसवी, फ़ाइल में डेटा लिखने का एक प्रारूप है। p5 \n<a href='https://p5js.org/reference/p5.Table' target='_blank'>p5.Table</a> \nका उपयोग करके इस प्रारूप के साथ काम कर सकता है। यह उदाहरण प्रोसेसिंग के लिए डेनियल शिफमैन के \n<a href=\"https://processing.org/examples/loadsavetable.html\" target=\"_blank\">Loading Tabular Data</a> \nउदाहरण पर आधारित है। यह बुलबुले का प्रतिनिधित्व करने वाले डेटा को व्यवस्थित करने के लिए एक वर्ग का उपयोग करता है। जब स्केच शुरू होता है, \nतो यह CSV फ़ाइल से चार बबल के लिए डेटा लोड करता है। विज़िटर नए बबल जोड़ सकता है, अद्यतन CSV फ़ाइल डाउनलोड कर सकता है और CSV फ़ाइल में लोड कर सकता है।"},"गैर-ऑर्थोगोनल प्रतिबिंब":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"\nयह उदाहरण एक गेंद को तिरछी दिशा में उछलते हुए दर्शाता है\nसतह, प्रतिबिंब के लिए वेक्टर गणनाओं का उपयोग करके कार्यान्वित की गई।\n\nकोड का व्यापक उपयोग होता है\n<a href='https://p5js.org/reference/p5.Vector'>p5.Vector</a>\nवर्ग, सहित\n<a href='https://p5js.org/reference/p5/createVector'>createVector()</a> नए वेक्टर बनाने के लिए फ़ंक्शन,\nऔर वेक्टर विधियाँ\n<a href='https://p5js.org/reference/p5.Vector/add'>add()</a>\nऔर\n<a href='https://p5js.org/reference/p5.Vector/dot'>dot()</a>\nवेक्टर गणना के लिए."},"नरम शरीर":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"\nनरम शरीर के अनुभव का भौतिकी अनुकरण\nमाउस की स्थिति की ओर त्वरण। आकृति निर्मित होती है\n<a href='https://p5js.org/reference/p5/curveVertex'>curveVertex()</a> का उपयोग करके वक्रों के साथ\nऔर <a href='https://p5js.org/reference/p5/curveTightness'>curveTightness()</a>।"},"ताकतों":{"relativeUrl":"/examples/math-and-physics-forces","description":"\nपिंडों पर कार्य करने वाली अनेक शक्तियों का प्रदर्शन।\nपिंड लगातार गुरुत्वाकर्षण का अनुभव करते हैं। शरीर में तरल पदार्थ का अनुभव होता है\n\"पानी\" में होने पर प्रतिरोध।\n(<a href=\"http://natureofcode.com\">natureofcode.com</a>)\n\nबल की गणना का उपयोग करके की जाती है\n<a href='https://p5js.org/reference/p5.Vector'>p5.Vector</a>\nक्लास, जिसमें वेक्टर बनाने के लिए <a href='https://p5js.org/reference/p5/createVector'>createVector()</a> फ़ंक्शन शामिल है।"},"धुएँ के कण":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"\n\nस्मोक पार्टिकल सिस्टम डेमो, प्रसंस्करण के लिए डैन शिफमैन के मूल <a href=\"https://natureofcode.com/book/chapter-4-particle-systems/\">उदाहरण</a> पर आधारित है। कोड का उपयोग करता है\n<a href='https://p5js.org/reference/p5.Vector'>p5.Vector</a>\nक्लास, जिसमें <a href='https://p5js.org/reference/p5/createVector'>createVector()</a> फ़ंक्शन शामिल है। कणों को अद्यतन करने के लिए विभिन्न गणनाएँ'\nस्थिति और वेग p5.वेक्टर विधियों से निष्पादित किए जाते हैं। कण प्रणाली को एक <a href='https://p5js.org/reference/p5/class'>वर्ग</a> के रूप में कार्यान्वित किया जाता है, जिसमें वस्तुओं की एक सरणी होती है (वर्ग कण की)।"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"\nद गेम ऑफ लाइफ गणितज्ञ जॉन कॉनवे द्वारा बनाया गया एक सेलुलर ऑटोमेटन है। सेल्युलर ऑटोमेटन एक प्रकार का अनुकरण है। \nजीवन के खेल में, कोशिकाओं का एक ग्रिड होता है जिसमें प्रत्येक कोशिका या तो मृत होती है या जीवित होती है। इस उदाहरण में, \nकाले वर्ग जीवित कोशिकाओं का प्रतिनिधित्व करते हैं और सफेद वर्ग मृत कोशिकाओं का प्रतिनिधित्व करते हैं। जैसे-जैसे सिमुलेशन चलता है, \nकोशिकाएं नियमों के एक सेट के आधार पर मृत और जीवित होने के बीच स्विच करती हैं:\n<ol>\n <li>दो से कम जीवित पड़ोसियों वाली कोई भी जीवित कोशिका मर जाती है।</li>\n <li>तीन से अधिक जीवित पड़ोसियों वाली कोई भी जीवित कोशिका मर जाती है।</li>\n <li>दो या तीन जीवित पड़ोसियों के साथ कोई भी जीवित कोशिका अपरिवर्तित रहती है,\nअगली पीढ़ी के लिए.</li>\n <li>ठीक तीन जीवित पड़ोसियों वाली कोई भी मृत कोशिका जीवित हो जाएगी।</li>\n</ol>\nये नियम जटिल अंतःक्रियाएँ उत्पन्न करते हैं। आरंभ करने के लिए कैनवास पर क्लिक करें\nयादृच्छिक कोशिकाओं के साथ अनुकरण। कैनवास पर फिर से क्लिक करना होगा\nइसे पुनः आरंभ करें."},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"\nडैनियल शिफ़मैन के आधार पर मैंडेलब्रॉट सेट का रंगीन प्रतिपादन प्रसंस्करण के लिए <a ref='https://processing.org/examples/mandelbrot.html'> मैंडेलब्रॉट उदाहरण</a>।"}},"reference":{"Array":{"relativeUrl":"/reference/p5/Array"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour":{"relativeUrl":"/reference/p5/beginContour"},"beginGeometry":{"relativeUrl":"/reference/p5/beginGeometry"},"beginShape":{"relativeUrl":"/reference/p5/beginShape"},"bezier":{"relativeUrl":"/reference/p5/bezier"},"bezierDetail":{"relativeUrl":"/reference/p5/bezierDetail"},"bezierPoint":{"relativeUrl":"/reference/p5/bezierPoint"},"bezierTangent":{"relativeUrl":"/reference/p5/bezierTangent"},"bezierVertex":{"relativeUrl":"/reference/p5/bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box":{"relativeUrl":"/reference/p5/box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry":{"relativeUrl":"/reference/p5/buildGeometry"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone":{"relativeUrl":"/reference/p5/cone"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA":{"relativeUrl":"/reference/p5/createA"},"createAudio":{"relativeUrl":"/reference/p5/createAudio"},"createButton":{"relativeUrl":"/reference/p5/createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCapture":{"relativeUrl":"/reference/p5/createCapture"},"createCheckbox":{"relativeUrl":"/reference/p5/createCheckbox"},"createColorPicker":{"relativeUrl":"/reference/p5/createColorPicker"},"createDiv":{"relativeUrl":"/reference/p5/createDiv"},"createElement":{"relativeUrl":"/reference/p5/createElement"},"createFileInput":{"relativeUrl":"/reference/p5/createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg":{"relativeUrl":"/reference/p5/createImg"},"createInput":{"relativeUrl":"/reference/p5/createInput"},"createP":{"relativeUrl":"/reference/p5/createP"},"createRadio":{"relativeUrl":"/reference/p5/createRadio"},"createSelect":{"relativeUrl":"/reference/p5/createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider":{"relativeUrl":"/reference/p5/createSlider"},"createSpan":{"relativeUrl":"/reference/p5/createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo":{"relativeUrl":"/reference/p5/createVideo"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve":{"relativeUrl":"/reference/p5/curve"},"curveDetail":{"relativeUrl":"/reference/p5/curveDetail"},"curvePoint":{"relativeUrl":"/reference/p5/curvePoint"},"curveTangent":{"relativeUrl":"/reference/p5/curveTangent"},"curveTightness":{"relativeUrl":"/reference/p5/curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder":{"relativeUrl":"/reference/p5/cylinder"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid":{"relativeUrl":"/reference/p5/ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour":{"relativeUrl":"/reference/p5/endContour"},"endGeometry":{"relativeUrl":"/reference/p5/endGeometry"},"endShape":{"relativeUrl":"/reference/p5/endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry":{"relativeUrl":"/reference/p5/freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadModel":{"relativeUrl":"/reference/p5/loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"model":{"relativeUrl":"/reference/p5/model"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal":{"relativeUrl":"/reference/p5/normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"Number":{"relativeUrl":"/reference/p5/number"},"Object":{"relativeUrl":"/reference/p5/object"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane":{"relativeUrl":"/reference/p5/plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex":{"relativeUrl":"/reference/p5/quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"removeElements":{"relativeUrl":"/reference/p5/removeElements"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"select":{"relativeUrl":"/reference/p5/select"},"selectAll":{"relativeUrl":"/reference/p5/selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere":{"relativeUrl":"/reference/p5/sphere"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"String":{"relativeUrl":"/reference/p5/string"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus":{"relativeUrl":"/reference/p5/torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex":{"relativeUrl":"/reference/p5/vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"}},"contributor-docs-fallback":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure success volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increase groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](https://p5js.org/reference/p5.sound), [class page](https://p5js.org/reference/p5/p5.Vector), [method page](https://p5js.org/reference/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this instruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (https://p5js.org/reference/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (https://p5js.org/reference/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (https://p5js.org/reference/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (https://p5js.org/reference/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```javascript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (https://p5js.org/reference/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (https://p5js.org/reference/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed requires temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve *Both 1x include system diffing algorithm robust system* operating systems browsers render graphics subtle variations differences normal fail Common acceptable Single-pixel shifts line positions Slight anti-aliasing Text font weight kerning Minor curve smoothness text rendered macOS slightly Linux applies thin lines curves graphical elements image earlier caused environments [Example]src/content/contributor-docs/images/pixelmatch2png sophisticated distinguish Initial Compares pixels moderate threshold identify [pixelmatch](https://github.com/mapbox/pixelmatch/) pixel Cluster identification Groups connected difference Breadth-First Search BFS Pattern recognition specifically identifies Line shift clusters represent element shifted 1px Isolated noise Smart failure criteria Applies thresholds Ignores smaller total significant Permits minor typical platforms [Example]src/content/contributor-docs/images/pixelmatchpng balances sensitivity real tolerating platform-specific parameters const MIN_CLUSTER_SIZE Minimum cluster MAX_TOTAL_DIFF_PIXELS Maximum allowed analyzing neighborhood 80% ≤2 neighbors classified structural intelligent ensures due catching important note improved pass failed detecting showing visually meaningful makes reliable reduces failures require manual investigation ### efficient sizes dimensions close 50x50 resizes images canvases result faster Focus visible details intricate hard Design demonstrate reduced cramming variants call times visualTest'stroke variations' stroke p5stroke0 p5strokeWeight1 p5line10 Screenshot thick p5strokeWeight5"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples-fallback":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries-fallback":{"AnimatorJs":{"relativeUrl":"/libraries/","description":"A javascript animation viewer based on a custom animation API primarily designed for p5.js and allows for dynamic, lightweight, real-time rendered browser animations controlled purely by code."},"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Pixyp5js":{"relativeUrl":"/libraries/","description":"A library for easily more easily dealing with pixels in images during runtime"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"TurtleGraphics":{"relativeUrl":"/libraries/","description":"Watch images being drawn using turtle graphics."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"Zoomp5js":{"relativeUrl":"/libraries/","description":"A simple library for adding the zooming functionality to your p5.js project."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.5":{"relativeUrl":"/libraries/","description":"Add UI to p5.js and other goodies"},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Modbuttons":{"relativeUrl":"/libraries/","description":"a simple and modular button system for p5js"},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Sprite":{"relativeUrl":"/libraries/","description":"A basic sprite library that supports both animated and static sprites for p5.js"},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.colorGenerator":{"relativeUrl":"/libraries/","description":"p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point."},"p5.comfyui-helper":{"relativeUrl":"/libraries/","description":"A library for interfacing with ComfyUI"},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."},"XYscope.js":{"relativeUrl":"/libraries/","description":"p5.js library to render graphics on analog vector displays"}},"events-fallback":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro VimeoEmbed ///components/VimeoEmbed/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg Introduction Casey Reas Johanna Hedva Stephanie Pi Phoenix Perry Taeyoon Choi Sara Hendren Epic Jefferson Chandler McWilliams Q&A ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people-fallback":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aarati Akkapeddi ":{"relativeUrl":"/people/#aarati-akkapeddi-"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aaron Welles":{"relativeUrl":"/people/#aaron-welles"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abdiel Lopez":{"relativeUrl":"/people/#abdiel-lopez"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Animesh Sinha":{"relativeUrl":"/people/#animesh-sinha"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antoinette Bumatay-Chan":{"relativeUrl":"/people/#antoinette-bumatay-chan"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashish Karn":{"relativeUrl":"/people/#ashish-karn"},"ashish singh":{"relativeUrl":"/people/#ashish-singh"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"Ashwani Dey":{"relativeUrl":"/people/#ashwani-dey"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"beau-muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"benpalevsky":{"relativeUrl":"/people/#benpalevsky"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"blackboxlogic":{"relativeUrl":"/people/#blackboxlogic"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Bojidar Marinov":{"relativeUrl":"/people/#bojidar-marinov"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"c-dacanay":{"relativeUrl":"/people/#c-dacanay"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Callie":{"relativeUrl":"/people/#callie"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Carrie Wang":{"relativeUrl":"/people/#carrie-wang"},"Casey Conchinha":{"relativeUrl":"/people/#casey-conchinha"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chloe Yan":{"relativeUrl":"/people/#chloe-yan"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"cog25":{"relativeUrl":"/people/#cog25"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"computational mama":{"relativeUrl":"/people/#computational-mama"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"crh82":{"relativeUrl":"/people/#crh82"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Darren Kessner":{"relativeUrl":"/people/#darren-kessner"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"davidblitz":{"relativeUrl":"/people/#davidblitz"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"dhanush":{"relativeUrl":"/people/#dhanush"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"FORCHA PEARL":{"relativeUrl":"/people/#forcha-pearl"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Franolich Design":{"relativeUrl":"/people/#franolich-design"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gabriel Sroka":{"relativeUrl":"/people/#gabriel-sroka"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Albers":{"relativeUrl":"/people/#greg-albers"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Greg Stanton":{"relativeUrl":"/people/#greg-stanton"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Kholiya":{"relativeUrl":"/people/#himanshu-kholiya"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"Ilona Brand":{"relativeUrl":"/people/#ilona-brand"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jackie Liu":{"relativeUrl":"/people/#jackie-liu"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Berghold":{"relativeUrl":"/people/#jared-berghold"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"jeanette":{"relativeUrl":"/people/#jeanette"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Philyaw":{"relativeUrl":"/people/#jordan-philyaw"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Kathryn Lichlyter":{"relativeUrl":"/people/#kathryn-lichlyter"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Gupta":{"relativeUrl":"/people/#keshav-gupta"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"Kit Kuksenok":{"relativeUrl":"/people/#kit-kuksenok"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"Kristian Hamilton":{"relativeUrl":"/people/#kristian-hamilton"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Berrios":{"relativeUrl":"/people/#lauren-berrios"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"Luke Plowden":{"relativeUrl":"/people/#luke-plowden"},"M":{"relativeUrl":"/people/#m"},"ma haidong":{"relativeUrl":"/people/#ma-haidong"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marco Macarena":{"relativeUrl":"/people/#marco-macarena"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Martin Leopold Groedl":{"relativeUrl":"/people/#martin-leopold-groedl"},"Martin Lorentzon":{"relativeUrl":"/people/#martin-lorentzon"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"mathewpan2":{"relativeUrl":"/people/#mathewpan2"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Arguelles":{"relativeUrl":"/people/#maya-arguelles"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"Mayank Verma":{"relativeUrl":"/people/#mayank-verma"},"mclark414":{"relativeUrl":"/people/#mclark414"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"Melody Sharp":{"relativeUrl":"/people/#melody-sharp"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"Mx. Ramsey":{"relativeUrl":"/people/#mx--ramsey"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"oliver thurley":{"relativeUrl":"/people/#oliver-thurley"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"Pim Tournaye":{"relativeUrl":"/people/#pim-tournaye"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Qingfeng Huang":{"relativeUrl":"/people/#qingfeng-huang"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajas Samse":{"relativeUrl":"/people/#rajas-samse"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"Renjie Li":{"relativeUrl":"/people/#renjie-li"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishab Kumar Jha":{"relativeUrl":"/people/#rishab-kumar-jha"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Rishi":{"relativeUrl":"/people/#rishi"},"Ritesh Patil":{"relativeUrl":"/people/#ritesh-patil"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"roxi09":{"relativeUrl":"/people/#roxi09"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"Seyko":{"relativeUrl":"/people/#seyko"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shoury Singh":{"relativeUrl":"/people/#shoury-singh"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Tibor Udvari":{"relativeUrl":"/people/#tibor-udvari"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Vaivaswat Dubey":{"relativeUrl":"/people/#vaivaswat-dubey"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"Vik":{"relativeUrl":"/people/#vik"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishesh Rawal":{"relativeUrl":"/people/#vishesh-rawal"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"willallstet":{"relativeUrl":"/people/#willallstet"},"William Hazard":{"relativeUrl":"/people/#william-hazard"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"Xevi H. Aqeel":{"relativeUrl":"/people/#xevi-h--aqeel"},"Xin Xin":{"relativeUrl":"/people/#xin-xin"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"ℤ":{"relativeUrl":"/people/#ℤ"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference-fallback":{"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"append()":{"relativeUrl":"/reference/p5/append","alias":"append"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"arrayCopy()":{"relativeUrl":"/reference/p5/arrayCopy","alias":"arrayCopy"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"baseColorShader()":{"relativeUrl":"/reference/p5/baseColorShader","alias":"baseColorShader"},"baseMaterialShader()":{"relativeUrl":"/reference/p5/baseMaterialShader","alias":"baseMaterialShader"},"baseNormalShader()":{"relativeUrl":"/reference/p5/baseNormalShader","alias":"baseNormalShader"},"baseStrokeShader()":{"relativeUrl":"/reference/p5/baseStrokeShader","alias":"baseStrokeShader"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"concat()":{"relativeUrl":"/reference/p5/concat","alias":"concat"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"HSB":{"relativeUrl":"/reference/p5/HSB"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createConvolver()":{"relativeUrl":"/reference/p5/createConvolver","alias":"createConvolver"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createModel()":{"relativeUrl":"/reference/p5/createModel","alias":"createModel"},"createNumberDict()":{"relativeUrl":"/reference/p5/createNumberDict","alias":"createNumberDict"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createStringDict()":{"relativeUrl":"/reference/p5/createStringDict","alias":"createStringDict"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"freqToMidi()":{"relativeUrl":"/reference/p5/freqToMidi","alias":"freqToMidi"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getAudioContext()":{"relativeUrl":"/reference/p5/getAudioContext","alias":"getAudioContext"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getOutputVolume()":{"relativeUrl":"/reference/p5/getOutputVolume","alias":"getOutputVolume"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"join()":{"relativeUrl":"/reference/p5/join","alias":"join"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadSound()":{"relativeUrl":"/reference/p5/loadSound","alias":"loadSound"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"match()":{"relativeUrl":"/reference/p5/match","alias":"match"},"matchAll()":{"relativeUrl":"/reference/p5/matchAll","alias":"matchAll"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"midiToFreq()":{"relativeUrl":"/reference/p5/midiToFreq","alias":"midiToFreq"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"outputVolume()":{"relativeUrl":"/reference/p5/outputVolume","alias":"outputVolume"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.NumberDict":{"relativeUrl":"/reference/p5/p5.NumberDict"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Renderer":{"relativeUrl":"/reference/p5/p5.Renderer"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.StringDict":{"relativeUrl":"/reference/p5/p5.StringDict"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.TypedDict":{"relativeUrl":"/reference/p5/p5.TypedDict"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"paletteLerp()":{"relativeUrl":"/reference/p5/paletteLerp","alias":"paletteLerp"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"preload()":{"relativeUrl":"/reference/p5/preload","alias":"preload"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"reverse()":{"relativeUrl":"/reference/p5/reverse","alias":"reverse"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"sampleRate()":{"relativeUrl":"/reference/p5/sampleRate","alias":"sampleRate"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveSound()":{"relativeUrl":"/reference/p5/saveSound","alias":"saveSound"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setBPM()":{"relativeUrl":"/reference/p5/setBPM","alias":"setBPM"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shorten()":{"relativeUrl":"/reference/p5/shorten","alias":"shorten"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"sort()":{"relativeUrl":"/reference/p5/sort","alias":"sort"},"soundFormats()":{"relativeUrl":"/reference/p5/soundFormats","alias":"soundFormats"},"soundOut":{"relativeUrl":"/reference/p5/soundOut"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"splice()":{"relativeUrl":"/reference/p5/splice","alias":"splice"},"split()":{"relativeUrl":"/reference/p5/split","alias":"split"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"subset()":{"relativeUrl":"/reference/p5/subset","alias":"subset"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"trim()":{"relativeUrl":"/reference/p5/trim","alias":"trim"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"userStartAudio()":{"relativeUrl":"/reference/p5/userStartAudio","alias":"userStartAudio"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.Amplitude.toggleNormalize()":{"relativeUrl":"/reference/p5.Amplitude/toggleNormalize","alias":"toggleNormalize"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.amplitude":{"relativeUrl":"/reference/p5.AudioIn/amplitude","alias":"amplitude"},"p5.AudioIn.connect()":{"relativeUrl":"/reference/p5.AudioIn/connect","alias":"connect"},"p5.AudioIn.disconnect()":{"relativeUrl":"/reference/p5.AudioIn/disconnect","alias":"disconnect"},"p5.AudioIn.enabled":{"relativeUrl":"/reference/p5.AudioIn/enabled","alias":"enabled"},"p5.AudioIn.getLevel()":{"relativeUrl":"/reference/p5.AudioIn/getLevel","alias":"getLevel"},"p5.AudioIn.getSources()":{"relativeUrl":"/reference/p5.AudioIn/getSources","alias":"getSources"},"p5.AudioIn.setSource()":{"relativeUrl":"/reference/p5.AudioIn/setSource","alias":"setSource"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.AudioVoice.connect()":{"relativeUrl":"/reference/p5.AudioVoice/connect","alias":"connect"},"p5.AudioVoice.disconnect()":{"relativeUrl":"/reference/p5.AudioVoice/disconnect","alias":"disconnect"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.roll()":{"relativeUrl":"/reference/p5.Camera/roll","alias":"roll"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Compressor.attack()":{"relativeUrl":"/reference/p5.Compressor/attack","alias":"attack"},"p5.Compressor.compressor":{"relativeUrl":"/reference/p5.Compressor/compressor","alias":"compressor"},"p5.Compressor.knee()":{"relativeUrl":"/reference/p5.Compressor/knee","alias":"knee"},"p5.Compressor.process()":{"relativeUrl":"/reference/p5.Compressor/process","alias":"process"},"p5.Compressor.ratio()":{"relativeUrl":"/reference/p5.Compressor/ratio","alias":"ratio"},"p5.Compressor.reduction()":{"relativeUrl":"/reference/p5.Compressor/reduction","alias":"reduction"},"p5.Compressor.release()":{"relativeUrl":"/reference/p5.Compressor/release","alias":"release"},"p5.Compressor.set()":{"relativeUrl":"/reference/p5.Compressor/set","alias":"set"},"p5.Compressor.threshold()":{"relativeUrl":"/reference/p5.Compressor/threshold","alias":"threshold"},"p5.Convolver.addImpulse()":{"relativeUrl":"/reference/p5.Convolver/addImpulse","alias":"addImpulse"},"p5.Convolver.convolverNode":{"relativeUrl":"/reference/p5.Convolver/convolverNode","alias":"convolverNode"},"p5.Convolver.impulses":{"relativeUrl":"/reference/p5.Convolver/impulses","alias":"impulses"},"p5.Convolver.process()":{"relativeUrl":"/reference/p5.Convolver/process","alias":"process"},"p5.Convolver.resetImpulse()":{"relativeUrl":"/reference/p5.Convolver/resetImpulse","alias":"resetImpulse"},"p5.Convolver.toggleImpulse()":{"relativeUrl":"/reference/p5.Convolver/toggleImpulse","alias":"toggleImpulse"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.connect()":{"relativeUrl":"/reference/p5.Delay/connect","alias":"connect"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.disconnect()":{"relativeUrl":"/reference/p5.Delay/disconnect","alias":"disconnect"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.filter()":{"relativeUrl":"/reference/p5.Delay/filter","alias":"filter"},"p5.Delay.leftDelay":{"relativeUrl":"/reference/p5.Delay/leftDelay","alias":"leftDelay"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Delay.rightDelay":{"relativeUrl":"/reference/p5.Delay/rightDelay","alias":"rightDelay"},"p5.Delay.setType()":{"relativeUrl":"/reference/p5.Delay/setType","alias":"setType"},"p5.Distortion.WaveShaperNode":{"relativeUrl":"/reference/p5.Distortion/WaveShaperNode","alias":"WaveShaperNode"},"p5.Distortion.getAmount()":{"relativeUrl":"/reference/p5.Distortion/getAmount","alias":"getAmount"},"p5.Distortion.getOversample()":{"relativeUrl":"/reference/p5.Distortion/getOversample","alias":"getOversample"},"p5.Distortion.process()":{"relativeUrl":"/reference/p5.Distortion/process","alias":"process"},"p5.Distortion.set()":{"relativeUrl":"/reference/p5.Distortion/set","alias":"set"},"p5.EQ.bands":{"relativeUrl":"/reference/p5.EQ/bands","alias":"bands"},"p5.EQ.process()":{"relativeUrl":"/reference/p5.EQ/process","alias":"process"},"p5.Effect.amp()":{"relativeUrl":"/reference/p5.Effect/amp","alias":"amp"},"p5.Effect.chain()":{"relativeUrl":"/reference/p5.Effect/chain","alias":"chain"},"p5.Effect.connect()":{"relativeUrl":"/reference/p5.Effect/connect","alias":"connect"},"p5.Effect.disconnect()":{"relativeUrl":"/reference/p5.Effect/disconnect","alias":"disconnect"},"p5.Effect.drywet()":{"relativeUrl":"/reference/p5.Effect/drywet","alias":"drywet"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.touchEnded()":{"relativeUrl":"/reference/p5.Element/touchEnded","alias":"touchEnded"},"p5.Element.touchMoved()":{"relativeUrl":"/reference/p5.Element/touchMoved","alias":"touchMoved"},"p5.Element.touchStarted()":{"relativeUrl":"/reference/p5.Element/touchStarted","alias":"touchStarted"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.add()":{"relativeUrl":"/reference/p5.Envelope/add","alias":"add"},"p5.Envelope.attackLevel":{"relativeUrl":"/reference/p5.Envelope/attackLevel","alias":"attackLevel"},"p5.Envelope.attackTime":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.decayLevel":{"relativeUrl":"/reference/p5.Envelope/decayLevel","alias":"decayLevel"},"p5.Envelope.decayTime":{"relativeUrl":"/reference/p5.Envelope/decayTime","alias":"decayTime"},"p5.Envelope.mult()":{"relativeUrl":"/reference/p5.Envelope/mult","alias":"mult"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.ramp()":{"relativeUrl":"/reference/p5.Envelope/ramp","alias":"ramp"},"p5.Envelope.releaseLevel":{"relativeUrl":"/reference/p5.Envelope/releaseLevel","alias":"releaseLevel"},"p5.Envelope.releaseTime":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.scale()":{"relativeUrl":"/reference/p5.Envelope/scale","alias":"scale"},"p5.Envelope.set()":{"relativeUrl":"/reference/p5.Envelope/set","alias":"set"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.setExp()":{"relativeUrl":"/reference/p5.Envelope/setExp","alias":"setExp"},"p5.Envelope.setInput()":{"relativeUrl":"/reference/p5.Envelope/setInput","alias":"setInput"},"p5.Envelope.setRange()":{"relativeUrl":"/reference/p5.Envelope/setRange","alias":"setRange"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.getCentroid()":{"relativeUrl":"/reference/p5.FFT/getCentroid","alias":"getCentroid"},"p5.FFT.getEnergy()":{"relativeUrl":"/reference/p5.FFT/getEnergy","alias":"getEnergy"},"p5.FFT.getOctaveBands()":{"relativeUrl":"/reference/p5.FFT/getOctaveBands","alias":"getOctaveBands"},"p5.FFT.linAverages()":{"relativeUrl":"/reference/p5.FFT/linAverages","alias":"linAverages"},"p5.FFT.logAverages()":{"relativeUrl":"/reference/p5.FFT/logAverages","alias":"logAverages"},"p5.FFT.setInput()":{"relativeUrl":"/reference/p5.FFT/setInput","alias":"setInput"},"p5.FFT.smooth()":{"relativeUrl":"/reference/p5.FFT/smooth","alias":"smooth"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Filter.biquadFilter":{"relativeUrl":"/reference/p5.Filter/biquadFilter","alias":"biquadFilter"},"p5.Filter.freq()":{"relativeUrl":"/reference/p5.Filter/freq","alias":"freq"},"p5.Filter.gain()":{"relativeUrl":"/reference/p5.Filter/gain","alias":"gain"},"p5.Filter.process()":{"relativeUrl":"/reference/p5.Filter/process","alias":"process"},"p5.Filter.res()":{"relativeUrl":"/reference/p5.Filter/res","alias":"res"},"p5.Filter.set()":{"relativeUrl":"/reference/p5.Filter/set","alias":"set"},"p5.Filter.setType()":{"relativeUrl":"/reference/p5.Filter/setType","alias":"setType"},"p5.Filter.toggle()":{"relativeUrl":"/reference/p5.Filter/toggle","alias":"toggle"},"p5.Font.font":{"relativeUrl":"/reference/p5.Font/font","alias":"font"},"p5.Font.textBounds()":{"relativeUrl":"/reference/p5.Font/textBounds","alias":"textBounds"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.loadPixels()":{"relativeUrl":"/reference/p5.Framebuffer/loadPixels","alias":"loadPixels"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Framebuffer.updatePixels()":{"relativeUrl":"/reference/p5.Framebuffer/updatePixels","alias":"updatePixels"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Gain.connect()":{"relativeUrl":"/reference/p5.Gain/connect","alias":"connect"},"p5.Gain.disconnect()":{"relativeUrl":"/reference/p5.Gain/disconnect","alias":"disconnect"},"p5.Gain.setInput()":{"relativeUrl":"/reference/p5.Gain/setInput","alias":"setInput"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.saveObj()":{"relativeUrl":"/reference/p5.Geometry/saveObj","alias":"saveObj"},"p5.Geometry.saveStl()":{"relativeUrl":"/reference/p5.Geometry/saveStl","alias":"saveStl"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.MonoSynth.amp()":{"relativeUrl":"/reference/p5.MonoSynth/amp","alias":"amp"},"p5.MonoSynth.attack":{"relativeUrl":"/reference/p5.MonoSynth/attack","alias":"attack"},"p5.MonoSynth.connect()":{"relativeUrl":"/reference/p5.MonoSynth/connect","alias":"connect"},"p5.MonoSynth.disconnect()":{"relativeUrl":"/reference/p5.MonoSynth/disconnect","alias":"disconnect"},"p5.MonoSynth.dispose()":{"relativeUrl":"/reference/p5.MonoSynth/dispose","alias":"dispose"},"p5.MonoSynth.play()":{"relativeUrl":"/reference/p5.MonoSynth/play","alias":"play"},"p5.MonoSynth.setADSR()":{"relativeUrl":"/reference/p5.MonoSynth/setADSR","alias":"setADSR"},"p5.MonoSynth.triggerAttack()":{"relativeUrl":"/reference/p5.MonoSynth/triggerAttack","alias":"triggerAttack"},"p5.MonoSynth.triggerRelease()":{"relativeUrl":"/reference/p5.MonoSynth/triggerRelease","alias":"triggerRelease"},"p5.Noise.setType()":{"relativeUrl":"/reference/p5.Noise/setType","alias":"setType"},"p5.NumberDict.add()":{"relativeUrl":"/reference/p5.NumberDict/add","alias":"add"},"p5.NumberDict.div()":{"relativeUrl":"/reference/p5.NumberDict/div","alias":"div"},"p5.NumberDict.maxKey()":{"relativeUrl":"/reference/p5.NumberDict/maxKey","alias":"maxKey"},"p5.NumberDict.maxValue()":{"relativeUrl":"/reference/p5.NumberDict/maxValue","alias":"maxValue"},"p5.NumberDict.minKey()":{"relativeUrl":"/reference/p5.NumberDict/minKey","alias":"minKey"},"p5.NumberDict.minValue()":{"relativeUrl":"/reference/p5.NumberDict/minValue","alias":"minValue"},"p5.NumberDict.mult()":{"relativeUrl":"/reference/p5.NumberDict/mult","alias":"mult"},"p5.NumberDict.sub()":{"relativeUrl":"/reference/p5.NumberDict/sub","alias":"sub"},"p5.Oscillator.add()":{"relativeUrl":"/reference/p5.Oscillator/add","alias":"add"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.connect()":{"relativeUrl":"/reference/p5.Oscillator/connect","alias":"connect"},"p5.Oscillator.disconnect()":{"relativeUrl":"/reference/p5.Oscillator/disconnect","alias":"disconnect"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.getAmp()":{"relativeUrl":"/reference/p5.Oscillator/getAmp","alias":"getAmp"},"p5.Oscillator.getFreq()":{"relativeUrl":"/reference/p5.Oscillator/getFreq","alias":"getFreq"},"p5.Oscillator.getPan()":{"relativeUrl":"/reference/p5.Oscillator/getPan","alias":"getPan"},"p5.Oscillator.getType()":{"relativeUrl":"/reference/p5.Oscillator/getType","alias":"getType"},"p5.Oscillator.mult()":{"relativeUrl":"/reference/p5.Oscillator/mult","alias":"mult"},"p5.Oscillator.pan()":{"relativeUrl":"/reference/p5.Oscillator/pan","alias":"pan"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.scale()":{"relativeUrl":"/reference/p5.Oscillator/scale","alias":"scale"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.orient()":{"relativeUrl":"/reference/p5.Panner3D/orient","alias":"orient"},"p5.Panner3D.orientX()":{"relativeUrl":"/reference/p5.Panner3D/orientX","alias":"orientX"},"p5.Panner3D.orientY()":{"relativeUrl":"/reference/p5.Panner3D/orientY","alias":"orientY"},"p5.Panner3D.orientZ()":{"relativeUrl":"/reference/p5.Panner3D/orientZ","alias":"orientZ"},"p5.Panner3D.panner":{"relativeUrl":"/reference/p5.Panner3D/panner","alias":"panner"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rollof()":{"relativeUrl":"/reference/p5.Panner3D/rollof","alias":"rollof"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.Part.addPhrase()":{"relativeUrl":"/reference/p5.Part/addPhrase","alias":"addPhrase"},"p5.Part.getBPM()":{"relativeUrl":"/reference/p5.Part/getBPM","alias":"getBPM"},"p5.Part.getPhrase()":{"relativeUrl":"/reference/p5.Part/getPhrase","alias":"getPhrase"},"p5.Part.loop()":{"relativeUrl":"/reference/p5.Part/loop","alias":"loop"},"p5.Part.noLoop()":{"relativeUrl":"/reference/p5.Part/noLoop","alias":"noLoop"},"p5.Part.onStep()":{"relativeUrl":"/reference/p5.Part/onStep","alias":"onStep"},"p5.Part.pause()":{"relativeUrl":"/reference/p5.Part/pause","alias":"pause"},"p5.Part.removePhrase()":{"relativeUrl":"/reference/p5.Part/removePhrase","alias":"removePhrase"},"p5.Part.replaceSequence()":{"relativeUrl":"/reference/p5.Part/replaceSequence","alias":"replaceSequence"},"p5.Part.setBPM()":{"relativeUrl":"/reference/p5.Part/setBPM","alias":"setBPM"},"p5.Part.start()":{"relativeUrl":"/reference/p5.Part/start","alias":"start"},"p5.Part.stop()":{"relativeUrl":"/reference/p5.Part/stop","alias":"stop"},"isDetected":{"relativeUrl":"/reference/p5.PeakDetect/isDetected"},"p5.PeakDetect.onPeak()":{"relativeUrl":"/reference/p5.PeakDetect/onPeak","alias":"onPeak"},"p5.PeakDetect.update()":{"relativeUrl":"/reference/p5.PeakDetect/update","alias":"update"},"p5.Phrase.sequence":{"relativeUrl":"/reference/p5.Phrase/sequence","alias":"sequence"},"p5.PolySynth.AudioVoice":{"relativeUrl":"/reference/p5.PolySynth/AudioVoice","alias":"AudioVoice"},"p5.PolySynth.connect()":{"relativeUrl":"/reference/p5.PolySynth/connect","alias":"connect"},"p5.PolySynth.disconnect()":{"relativeUrl":"/reference/p5.PolySynth/disconnect","alias":"disconnect"},"p5.PolySynth.dispose()":{"relativeUrl":"/reference/p5.PolySynth/dispose","alias":"dispose"},"p5.PolySynth.noteADSR()":{"relativeUrl":"/reference/p5.PolySynth/noteADSR","alias":"noteADSR"},"p5.PolySynth.noteAttack()":{"relativeUrl":"/reference/p5.PolySynth/noteAttack","alias":"noteAttack"},"p5.PolySynth.noteRelease()":{"relativeUrl":"/reference/p5.PolySynth/noteRelease","alias":"noteRelease"},"p5.PolySynth.notes":{"relativeUrl":"/reference/p5.PolySynth/notes","alias":"notes"},"p5.PolySynth.play()":{"relativeUrl":"/reference/p5.PolySynth/play","alias":"play"},"p5.PolySynth.polyvalue":{"relativeUrl":"/reference/p5.PolySynth/polyvalue","alias":"polyvalue"},"p5.PolySynth.setADSR()":{"relativeUrl":"/reference/p5.PolySynth/setADSR","alias":"setADSR"},"p5.PrintWriter.clear()":{"relativeUrl":"/reference/p5.PrintWriter/clear","alias":"clear"},"p5.PrintWriter.close()":{"relativeUrl":"/reference/p5.PrintWriter/close","alias":"close"},"p5.PrintWriter.print()":{"relativeUrl":"/reference/p5.PrintWriter/print","alias":"print"},"p5.PrintWriter.write()":{"relativeUrl":"/reference/p5.PrintWriter/write","alias":"write"},"p5.Pulse.width()":{"relativeUrl":"/reference/p5.Pulse/width","alias":"width"},"p5.Reverb.amp()":{"relativeUrl":"/reference/p5.Reverb/amp","alias":"amp"},"p5.Reverb.connect()":{"relativeUrl":"/reference/p5.Reverb/connect","alias":"connect"},"p5.Reverb.disconnect()":{"relativeUrl":"/reference/p5.Reverb/disconnect","alias":"disconnect"},"p5.Reverb.process()":{"relativeUrl":"/reference/p5.Reverb/process","alias":"process"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Score.loop()":{"relativeUrl":"/reference/p5.Score/loop","alias":"loop"},"p5.Score.noLoop()":{"relativeUrl":"/reference/p5.Score/noLoop","alias":"noLoop"},"p5.Score.pause()":{"relativeUrl":"/reference/p5.Score/pause","alias":"pause"},"p5.Score.setBPM()":{"relativeUrl":"/reference/p5.Score/setBPM","alias":"setBPM"},"p5.Score.start()":{"relativeUrl":"/reference/p5.Score/start","alias":"start"},"p5.Score.stop()":{"relativeUrl":"/reference/p5.Score/stop","alias":"stop"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.inspectHooks()":{"relativeUrl":"/reference/p5.Shader/inspectHooks","alias":"inspectHooks"},"p5.Shader.modify()":{"relativeUrl":"/reference/p5.Shader/modify","alias":"modify"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.SoundFile.addCue()":{"relativeUrl":"/reference/p5.SoundFile/addCue","alias":"addCue"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.clearCues()":{"relativeUrl":"/reference/p5.SoundFile/clearCues","alias":"clearCues"},"p5.SoundFile.connect()":{"relativeUrl":"/reference/p5.SoundFile/connect","alias":"connect"},"p5.SoundFile.currentTime()":{"relativeUrl":"/reference/p5.SoundFile/currentTime","alias":"currentTime"},"p5.SoundFile.disconnect()":{"relativeUrl":"/reference/p5.SoundFile/disconnect","alias":"disconnect"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.getBlob()":{"relativeUrl":"/reference/p5.SoundFile/getBlob","alias":"getBlob"},"p5.SoundFile.getPan()":{"relativeUrl":"/reference/p5.SoundFile/getPan","alias":"getPan"},"p5.SoundFile.getPeaks()":{"relativeUrl":"/reference/p5.SoundFile/getPeaks","alias":"getPeaks"},"p5.SoundFile.isLoaded()":{"relativeUrl":"/reference/p5.SoundFile/isLoaded","alias":"isLoaded"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPaused()":{"relativeUrl":"/reference/p5.SoundFile/isPaused","alias":"isPaused"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pan()":{"relativeUrl":"/reference/p5.SoundFile/pan","alias":"pan"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.playMode()":{"relativeUrl":"/reference/p5.SoundFile/playMode","alias":"playMode"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.removeCue()":{"relativeUrl":"/reference/p5.SoundFile/removeCue","alias":"removeCue"},"p5.SoundFile.reverseBuffer()":{"relativeUrl":"/reference/p5.SoundFile/reverseBuffer","alias":"reverseBuffer"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.save()":{"relativeUrl":"/reference/p5.SoundFile/save","alias":"save"},"p5.SoundFile.setBuffer()":{"relativeUrl":"/reference/p5.SoundFile/setBuffer","alias":"setBuffer"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.setVolume()":{"relativeUrl":"/reference/p5.SoundFile/setVolume","alias":"setVolume"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.SoundLoop.bpm":{"relativeUrl":"/reference/p5.SoundLoop/bpm","alias":"bpm"},"p5.SoundLoop.interval":{"relativeUrl":"/reference/p5.SoundLoop/interval","alias":"interval"},"p5.SoundLoop.iterations":{"relativeUrl":"/reference/p5.SoundLoop/iterations","alias":"iterations"},"p5.SoundLoop.maxIterations":{"relativeUrl":"/reference/p5.SoundLoop/maxIterations","alias":"maxIterations"},"p5.SoundLoop.musicalTimeMode":{"relativeUrl":"/reference/p5.SoundLoop/musicalTimeMode","alias":"musicalTimeMode"},"p5.SoundLoop.pause()":{"relativeUrl":"/reference/p5.SoundLoop/pause","alias":"pause"},"p5.SoundLoop.start()":{"relativeUrl":"/reference/p5.SoundLoop/start","alias":"start"},"p5.SoundLoop.stop()":{"relativeUrl":"/reference/p5.SoundLoop/stop","alias":"stop"},"p5.SoundLoop.syncedStart()":{"relativeUrl":"/reference/p5.SoundLoop/syncedStart","alias":"syncedStart"},"p5.SoundLoop.timeSignature":{"relativeUrl":"/reference/p5.SoundLoop/timeSignature","alias":"timeSignature"},"p5.SoundRecorder.record()":{"relativeUrl":"/reference/p5.SoundRecorder/record","alias":"record"},"p5.SoundRecorder.setInput()":{"relativeUrl":"/reference/p5.SoundRecorder/setInput","alias":"setInput"},"p5.SoundRecorder.stop()":{"relativeUrl":"/reference/p5.SoundRecorder/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.TypedDict.clear()":{"relativeUrl":"/reference/p5.TypedDict/clear","alias":"clear"},"p5.TypedDict.create()":{"relativeUrl":"/reference/p5.TypedDict/create","alias":"create"},"p5.TypedDict.get()":{"relativeUrl":"/reference/p5.TypedDict/get","alias":"get"},"p5.TypedDict.hasKey()":{"relativeUrl":"/reference/p5.TypedDict/hasKey","alias":"hasKey"},"p5.TypedDict.print()":{"relativeUrl":"/reference/p5.TypedDict/print","alias":"print"},"p5.TypedDict.remove()":{"relativeUrl":"/reference/p5.TypedDict/remove","alias":"remove"},"p5.TypedDict.saveJSON()":{"relativeUrl":"/reference/p5.TypedDict/saveJSON","alias":"saveJSON"},"p5.TypedDict.saveTable()":{"relativeUrl":"/reference/p5.TypedDict/saveTable","alias":"saveTable"},"p5.TypedDict.set()":{"relativeUrl":"/reference/p5.TypedDict/set","alias":"set"},"p5.TypedDict.size()":{"relativeUrl":"/reference/p5.TypedDict/size","alias":"size"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.clampToZero()":{"relativeUrl":"/reference/p5.Vector/clampToZero","alias":"clampToZero"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setContent()":{"relativeUrl":"/reference/p5.XML/setContent","alias":"setContent"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.AudioVoice":{"relativeUrl":"/reference/p5.sound/p5.AudioVoice"},"p5.BandPass":{"relativeUrl":"/reference/p5.sound/p5.BandPass"},"p5.Compressor":{"relativeUrl":"/reference/p5.sound/p5.Compressor"},"p5.Convolver":{"relativeUrl":"/reference/p5.sound/p5.Convolver"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Distortion":{"relativeUrl":"/reference/p5.sound/p5.Distortion"},"p5.EQ":{"relativeUrl":"/reference/p5.sound/p5.EQ"},"p5.Effect":{"relativeUrl":"/reference/p5.sound/p5.Effect"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Filter":{"relativeUrl":"/reference/p5.sound/p5.Filter"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.HighPass":{"relativeUrl":"/reference/p5.sound/p5.HighPass"},"p5.LowPass":{"relativeUrl":"/reference/p5.sound/p5.LowPass"},"p5.MonoSynth":{"relativeUrl":"/reference/p5.sound/p5.MonoSynth"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.OnsetDetect":{"relativeUrl":"/reference/p5.sound/p5.OnsetDetect"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.Part":{"relativeUrl":"/reference/p5.sound/p5.Part"},"p5.PeakDetect":{"relativeUrl":"/reference/p5.sound/p5.PeakDetect"},"p5.Phrase":{"relativeUrl":"/reference/p5.sound/p5.Phrase"},"p5.PolySynth":{"relativeUrl":"/reference/p5.sound/p5.PolySynth"},"p5.Pulse":{"relativeUrl":"/reference/p5.sound/p5.Pulse"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.Score":{"relativeUrl":"/reference/p5.sound/p5.Score"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SoundLoop":{"relativeUrl":"/reference/p5.sound/p5.SoundLoop"},"p5.SoundRecorder":{"relativeUrl":"/reference/p5.sound/p5.SoundRecorder"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"}},"tutorials-fallback":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Chatting with/about Code":{"relativeUrl":"/tutorials/criticalAI1-chatting-with-about-code","description":"Using generative AI to code with p5.js"},"Critical AI Prompt Battle":{"relativeUrl":"/tutorials/criticalAI2-prompt-battle","description":"Build a tool to compare generative AI prompts"},"Critical AI Sentiment Dataset Explorer":{"relativeUrl":"/tutorials/criticalAI3-sentiment-dataset-explorer","description":"Examine the datasets that run AI tools"},"Critical AI No-AI Chatbot":{"relativeUrl":"/tutorials/criticalAI4-no-ai-chatbot","description":"Make an interactive chatbot without using any AI"},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to GLSL":{"relativeUrl":"/tutorials/intro-to-glsl","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU using GLSL."},"p5.strands: Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-p5-strands","description":"An introduction to shaders using p5.strands"},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
+{"contributor-docs":{"🌸 नमस्कार! 🌺\n":{"relativeUrl":"/contribute/README","description":"\n\np5.js में योगदान देने में आपकी रुचि के लिए धन्यवाद! हमारा समुदाय सभी रूपों के योगदान को महत्व देता है और जहाँ तक हो सके \"योगदानकर्ता\" शब्द के अर्थ का विस्तार करना चाहता है। इसमें दस्तावेज़ीकरण, शिक्षण, कोड लिखना, आर्ट बनाना, लिखना, रचना, सक्रियतावाद, व्यवस्थित करना, संधारण करना, या ऐसी कोई भी चीज जिसकी आप कल्पना कर सकते हैं। आप [यहाँ](https://p5js.org/community/#contribute) योगदान करने के कुछ अलग तरीकों से शुरुआत कर सकते हैं। तकनीकी योगदान आरंभ करने के लिए, इस पृष्ठ को पढ़ें।\n\nयह परियोजना [सभी योगदानकर्ताओं](https://github.com/kentcdodds/all-contributors/) के विनिर्देशन का अनुसरण करती है। अपना नाम [readme](https://github.com/processing/p5.js/blob/main/README.md#contributors) में दर्ज करने क लिए [इन नियमों](https://github.com/processing/p5.js/issues/2309/) का पालन करे अथवा [GitHub मुद्दों](https://github.com/processing/p5.js/issues/) में अपने योगदान के साथ टिप्पणी करें और हम आपका नाम दर्ज कर देंगे।\n\n# पहुँच को प्राथमिकता देना\n\nहम ऐसे काम को प्राथमिकता दे रहे हैं जो p5.js तक पहुंच (समावेश और पहुंच) का विस्तार करता है! अधिक विवरण के लिए [हमारा पहुंच के लिए बयान](../access/) देखें।\n\n# हमारा कोड कहां रहता है\n\nव्यापक p5.js परियोजना में इस के अलावा कुछ रिपॉजिटरी शामिल हैं-\n\n* [p5.js](https://github.com/processing/p5.js): इस रिपॉजिटरी में p5.js लाइब्रेरी का स्रोत कोड है। [p5.js संदर्भ मैनुअल](https://p5js.org/reference/) भी इस स्रोत कोड में शामिल [JSDoc](http://usejsdoc.org/) टिप्पणियों से उत्पन्न होता है। इसका अनुरक्षण [Moira Turner](https://github.com/mcturner1995/) के द्वारा किया जा रहा है।\n* [p5.js-website](https://github.com/processing/p5.js-website/) इस रिपॉजिटरी में [p5.js वेबसाइट](https://p5js.org) का अधिकांश कोड हैं, संदर्भ मैनुअल के अपवाद के साथ। इसका अनुरक्षण [Moira Turner](https://github.com/mcturner1995/) के द्वारा किया जा रहा है।\n* [p5.js-sound](https://github.com/processing/p5.js-sound/) इस भंडार में p5.sound.js लाइब्रेरी है। इसका अनुरक्षण [Jason Sigal](https://github.com/therewasaguy/) के द्वारा किया जा रहा है।\n* [p5.js-web-editor](https://github.com/processing/p5.js-web-editor/) इस रिपॉजिटरी में [p5.js वेब एडिटर](https://editor.p5js.org) के लिए स्रोत कोड है। इसका अनुरक्षण [Cassie Tarakajian](https://github.com/catarak/) के द्वारा किया जा रहा है। ध्यान दें कि पुराना [p5.js संपादक](https://github.com/processing/p5.js-editor/) अब पदावनत हो गया है।\n\n# रिपोजिटरी फ़ाइल संरचना\n\nयहाँ बहुत सारी फाइलें हैं! यह एक संक्षिप्त अवलोकन है। यह भ्रामक हो सकता है, लेकिन आरंभ करने के लिए आपको रिपॉजिटरी की प्रत्येक फ़ाइल को समझने की आवश्यकता नहीं है। हम एक क्षेत्र में शुरुआत करने की सलाह देते हैं (उदाहरण के लिए, कुछ इनलाइन प्रलेखन को ठीक करना), और अधिक खोज करने के लिए अपने तरीके से काम करना। Luisa Pereira का [लुकिंग इनसाइड p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/) भी p5 .js वर्कफ़्लो में उपयोग किए जाने वाले टूल और फ़ाइलों का वीडियो टूर देता है।\n\n* `contributor_docs/` में विभिन्न दस्तावेज हैं, जो विशेष रूप से p5.js के डेवलपर्स के लिए उपयोगी होने की संभावना है, क्योंकि वे प्रथाओं और सिद्धांतों की व्याख्या करते हैं।\n* `docs/` वास्तव में डॉक्स शामिल नहीं है! इसके बजाय, इसमें \\* [ऑनलाइन संदर्भ पुस्तिका](https://p5js.org/reference/) \\* का उपयोग करने वाला कोड शामिल है।\n* `lib/` में शामिल है एक खाली उदाहरण और p5.sound ऐड-ऑन, जो समय-समय पर [p5.js-sound रिपॉजिटरी](https://github.com/processing/p5.js-sound/) से पुल अनुरोध के माध्यम से अद्यतन किया जाता है। यह वह जगह है जहाँ अंतर्निहित p5.js लाइब्रेरी को [ग्रंट](https://gruntjs.com/) का उपयोग करके एक फ़ाइल में संकलित किए जाने के बाद रखा जाता है। जब आप एक पुल अनुरोध करते हैं तो इसे GitHub रिपॉजिटरी में जांचने की आवश्यकता नहीं होती है।\n* `src/` में लाइब्रेरी के लिए सभी स्रोत कोड शामिल हैं, जो अलग-अलग मॉड्यूल में शीर्ष रूप से व्यवस्थित है। यदि आप p5.js. बदल रहे हैं, तो आप इस पर काम करेंगे। अधिकांश फ़ोल्डरों के पास अपनी स्वयं की readme.md फाइलें होती हैं जो आपको अपना रास्ता खोजने में मदद करती हैं।\n* `tasks/` में स्क्रिप्ट शामिल हैं जो p5.js के नए संस्करणों के निर्माण, परिनियोजन और रिलीज़ से संबंधित स्वचालित कार्य करते हैं।\n* `tests/` में यूनिट परीक्षण शामिल हैं जो सुनिश्चित करते हैं कि लाइब्रेरी सही ढंग से कार्य कर रहे हैं क्योंकि परिवर्तन किए जाते हैं।\n* `utils/` इसमें रिपॉजिटरी के लिए उपयोगी अतिरिक्त फाइलें हो सकती हैं, लेकिन आम तौर पर आप इस डायरेक्टरी को अनदेखा कर सकते हैं।\n\n# प्रलेखन\n\nहमें एहसास है कि प्रलेखन इस परियोजना का सबसे महत्वपूर्ण हिस्सा है। खराब प्रलेखन नए उपयोगकर्ताओं और योगदानकर्ताओं के लिए उपयोग करने के लिए मुख्य बाधाओं में से एक है, जिससे परियोजना कम समावेशी हो जाती है। [contributing\\_documentation.md](../contributing_documentation/) पृष्ठ प्रलेखन के साथ आरंभ करने का एक गहन अवलोकन देता है। p5.js के लिए प्रलेखन कुछ मुख्य स्थानों में पाया जा सकता है:\n\n* [p5js.org संदर्भ](https://p5js.org/reference/) स्रोत कोड में ही [इनलाइन प्रलेखन](../inline_documentation/) से उत्पन्न होता है। इसमें पाठ विवरण और पैरामीटर के साथ-साथ कोड स्निपेट उदाहरण भी शामिल हैं। हम कोड और प्रलेखन को निकटता से रखने के लिए यह सब इनलाइन रखते हैं, और इस विचार को सुदृढ़ करने के लिए कि कोड में योगदान देने की तुलना में प्रलेखन में योगदान करना अधिक महत्वपूर्ण है (यदि अधिक नहीं)। जब लाइब्रेरी निर्मित हो जाता है, तो यह इनलाइन प्रलेखन और उदाहरणों की जांच करता है ताकि यह सुनिश्चित हो सके कि वे कोड के व्यवहार के तरीके से मेल खाते हैं। योगदान करने के लिए, आप [inline\\_documentation.md](../inline_documentation/) पृष्ठ को देखकर शुरू कर सकते हैं।\n* The [p5js.org उदाहरण](https://p5js.org/examples/) पृष्ठ में लंबे उदाहरण हैं जो p5.js. सीखने के लिए उपयोगी हो सकते हैं। योगदान करने के लिए, आप [add\\_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) पृष्ठ को देखकर शुरू कर सकते हैं।\n* The [p5js.org सीखिए](https://p5js.org/tutorials/) पृष्ठ में p5.js और प्रोग्रामिंग की अवधारणाओं को सीखने में मदद करने के लिए ट्यूटोरियल हैं। योगदान करने के लिए, आप [p5.js ट्यूटोरियल में योगदान करने के लिए गाइड](https://p5js.org/learn/tutorial-guide.html) देखकर शुरू कर सकते हैं।\n* आप देखेंगे कि वर्तमान में p5.js वेबसाइट कुछ अलग भाषाओं का समर्थन करती है। इसे अंतर्राष्ट्रीयकरण (या संक्षेप में i18n) कहा जाता है। आप इस दस्तावेज़ के बारे में [i18n\\_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contention.md) पृष्ठ पर अधिक पढ़ सकते हैं।\n\n# गिटहब मुद्दों का संचलान\n\n* ज्ञात बग और इच्छित नई सुविधाओं को [GitHub मुद्दों](https://github.com/processing/p5.js/issues/) का उपयोग करके ट्रैक किया जाता है। समस्या [लेबल](../issue_labels/) का उपयोग श्रेणियों में मुद्दों को हल करने के लिए किया जाता है, जैसे कि जो [शुरुआती के लिए उपयुक्त](https://github.com/processing/p5.js/labels/level%3Abeginner/) है।\n\n* यदि आप किसी मौजूदा मुद्दे पर काम करना शुरू करना चाहते हैं, तो उस मुद्दे पर टिप्पणी करें कि आप इस पर काम करने की योजना बना रहे हैं ताकि अन्य योगदानकर्ताओं को यह पता चले कि आप काम कर रहे है और मदद की पेशकश कर सकते है।\n\n* एक बार जब आप उस मुद्दे पर अपना काम पूरा कर लेते हैं, तो p5.js मुख्य शाखा के खिलाफ [एक पुल निवेदन (PR)](../preparation_a_pull_request/) जमा करें। पुल निवेदन के विवरण क्षेत्र में, आप जो समाधान कर रहे हैं उस समस्या को टैग करते हुए \"resolves #XXXX\" लिखे। यदि पुल निवेदन समस्या को संबोधित करता है, लेकिन उसे पूरी तरह से हल नहीं करता है (यानी आपके पुल निवेदन विलय के बाद मुद्दा खुला रहना चाहिए), तो \"addresses #XXXX\" लिखें।\n\n* यदि आप बग की खोज करते हैं या एक नई सुविधा के लिए एक विचार है जिसे आप जोड़ना चाहते हैं, तो एक मुद्दा सबमिट करके शुरू करें। कृपया पहले से कोई मुद्दा बनाये बिना, समाधान या नई सुविधा युक्त पुल अनुरोध सबमिट न करें, हम शायद इसे स्वीकार नहीं कर पाएंगे। एक बार जब आपको इस मुद्दे पर कुछ प्रतिक्रिया मिल जाती है और इसे संबोधित करने के लिए आगे बढ़ते हैं, तो आप समाधान या सुविधा को योगदान देने के लिए ऊपर की प्रक्रिया का पालन कर सकते हैं।\n\n* आप उन समस्याओं को ट्राइएज कर सकते हैं जिनमें बग रिपोर्ट को पुन: प्रस्तुत करना या महत्वपूर्ण जानकारी मांगना शामिल हो सकता है, जैसे कि संस्करण संख्या या प्रजनन निर्देश। यदि आप मुद्दों को ट्राइएज करना शुरू करना चाहते हैं, तो आरंभ करने का एक आसान तरीका [CodeTriage पर p5.js की सदस्यता लेना](https://www.codetriage.com/processing/p5.js)। [](https://www.codetriage.com/processing/p5.js)\n\n* [Organization.md](https://github.com/processing/p5.js/blob/main/contributor_docs/organization.md) फ़ाइल एक उच्च-स्तरीय अवलोकन देती है कि मुद्दों को कैसे व्यवस्थित किया जा सकता है और निर्णय प्रक्रिया का पालन कैसे करना है। यदि आप रुचि रखते हैं तो हम इसमें शामिल होने के लिए आपका स्वागत करते हैं।\n\n# विकास की प्रक्रिया\n\n1. स्थापित करें [node.js](http://nodejs.org/), जो स्वचालित रूप से [npm](https://www.npmjs.org) पैकेज मैनेजर भी स्थापित करता है।\n\n2. [फोर्क](https://help.github.com/articles/fork-a-repo/) [p5.js रिपॉजिटरी](https://github.com/processing/p5.js) अपने खुद के गिटहब खाते में।\n\n3. [क्लोन](https://help.github.com/articles/cloning-a-repository/) आपके स्थानीय कंप्यूटर पर गिटहब से रिपॉजिटरी का नया फोर्क।\n\n ```shell\n $ git clone https://github.com/YOUR_USERNAME/p5.js.git\n ```\n\n4. प्रोजेक्ट फ़ोल्डर में नेविगेट करें और npm के साथ अपनी सभी आवश्यक निर्भरताएं स्थापित करें।\n\n ```shell\n $ cd p5.js\n $ npm ci\n ```\n\n5. [ग्रंट](https://gruntjs.com/) अब स्थापित किया जाना चाहिए, और आप इसका उपयोग स्रोत कोड से लाइब्रेरी बनाने के लिए कर सकते हैं।\n\n ```shell\n $ npm run grunt\n ```\n\nयदि आप लाइब्रेरी में लगातार फाइलों को बदल रहे हैं, तो आप अपने लिए लाइब्रेरी को स्वचालित रूप से पुनर्निर्माण करने के लिए `npm run dev` को चलाना चाहते हैं, जब भी इसका कोई भी सोर्स आपके बिना पहली बार मैन्युअल रूप से टाइप किए बिना बदल जाता है।\n\n6. स्थानीय रूप से कोडबेस और [कमिट](https://help.github.com/articles/github-glossary/#commit) में कुछ बदलाव करें।\n\n ```shell\n $ git add -u\n $ git commit -m \"YOUR COMMIT MESSAGE\"\n ```\n\n7. रन `npm run grunt` फिर से सुनिश्चित करें कि कोई सिंटैक्स त्रुटियां, परीक्षण विफलताओं, या अन्य समस्याएं नहीं हैं।\n\n8. [पुश](https://help.github.com/articles/github-glossary/#push) गिटहब पर आपके फोर्क में आपके नए परिवर्तन।\n\n ```shell\n $ git push\n ```\n\n9. एक बार सब कुछ तैयार हो जाने के बाद, अपने परिवर्तनों को एक [पुल अनुरोध](https://help.github.com/articles/creating-a-pull-request/) के रूप में सबमिट करें।\n\n# गोचास\n\np5.js कोडबेस के साथ शामिल डेवलपर टूलिंग जानबूझकर कुछ चीजों के बारे में बहुत सख्त है। यह एक अच्छी बात है! यह सब कुछ सुसंगत बनाता है, और यह आपको अनुशासित होने के लिए प्रोत्साहित करेगा। इसका मतलब यह है कि आप अपनी परियोजना को खारिज करने के लिए केवल कुछ बदलने की कोशिश कर सकते हैं, लेकिन निराश न हों; यहां तक कि अनुभवी p5.js डेवलपर्स को हर समय इसका सामना करना पड़ता है। आमतौर पर समस्या दो क्षेत्रों में से एक में होगी, कोड सिंटैक्स या यूनिट परीक्षण।\n\n## कोड सिंटैक्स\n\np5.js को स्वच्छ और शैलीगत सुसंगत कोड सिंटैक्स की आवश्यकता होती है, जिसे वह [Prettier](https://prettier.io/) और [ESlint](https://eslint.org/) के साथ लागू करता है। आपके द्वारा किए जाने से पहले नियमों की जाँच की जाती है, लेकिन जैसे ही आप उन्हें लिखते हैं, त्रुटियों को उजागर करने के लिए आप अपने कोड संपादक के लिए [ESlint प्लगइन](https://eslint.org/docs/user-guide/integrations#editors) भी स्थापित कर सकते हैं। , जो शायद आपकी मदद करेंगे क्योंकि आप कोडिंग कर रहे हैं और आपको एक असफल Git प्रतिबद्ध की परेशानी से बचाता है। सामान्य तौर पर, हम लचीलेपन के पक्ष में गलती करते हैं, जब यह कोड शैली की बात आती है, ताकि भागीदारी और योगदान के लिए बाधाओं को कम किया जा सके।\n\nत्रुटियों का पता लगाने के लिए, अपने टर्मिनल में निम्न कमांड चलाएँ (`$` प्रांप्ट टाइप न करें):\n\n```shell\n$ npm run lint\n```\n\nकुछ सिंटैक्स त्रुटियां स्वचालित रूप से ठीक की जा सकती हैं:\n\n```shell\n$ npm run lint:fix\n```\n\nस्थापित परियोजना शैली के साथ चिपके रहना आमतौर पर बेहतर होता है, लेकिन [कभी-कभी](https://github.com/processing/p5.js/search?utf8=%E2%9C%93\\&q=prettier-ignore\\&type=) एक वैकल्पिक वाक्यविन्यास का उपयोग कर सकते हैं। अपने कोड को समझना आसान बनाएं। इन मामलों के लिए, Prettier [एक एस्केप हैच प्रदान करता है](https://prettier.io/docs/en/ignore.html), `// prettier-ignore` टिप्पणी, जिसका उपयोग आप ग्रैनुलर अपवाद बनाने के लिए कर सकते हैं। यदि आप कर सकते हैं तो इसका उपयोग करने से बचने की कोशिश करें, क्योंकि लाइनिंग द्वारा लागू अधिकांश शैली वरीयताओं के लिए अच्छे कारण हैं।\n\nयहाँ कोड शैली नियमों का एक त्वरित सारांश है। कृपया ध्यान दें कि यह सूची अधूरी हो सकती है, और [.prettierrc](https://github.com/processing/p5.js/blob/main/.prettierrc) और [.esintintrc](https://github.com/processing/p5.js/blob/main/.eslintrc) को संदर्भित करना सबसे अच्छा है।\n\n* ES6 कोड सिंटैक्स का उपयोग किया जाता है\n* सिंगल कोट्स (डबल कोट्स के बजाय) का उपयोग करें\n* इंडेंटेशन दो स्थानों के साथ किया जाता है\n* कोड में परिभाषित सभी चर का उपयोग कम से कम एक बार किया जाना चाहिए, या पूरी तरह से हटा दिया जाना चाहिए\n* X == सत्य या x == असत्य की तुलना न करें। इसके बजाय (x) या (!x) का उपयोग करें। x == सच, निश्चित रूप से अगर (x) से अलग है! यदि भ्रम की संभावना है, तो ऑब्जेक्ट्स को शून्य, संख्याओं से 0 या स्ट्रिंग्स की तुलना करें।\n* जब भी आप लिख रहे हैं, तो कार्य में अस्पष्टता या जटिलता होने पर अपना कोड कमेंट करें।\n* देखें [मोज़िला JS प्रथाओं](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style#JavaScript_practices) अधिक स्टाइलिंग टिप्स के लिए एक उपयोगी मार्गदर्शिका के रूप में।\n\n## इकाई परीक्षण\n\nइकाई परीक्षण कोड के छोटे टुकड़े होते हैं जो प्राथमिक तर्क के पूरक के रूप में बनाए जाते हैं और सत्यापन करते हैं। यदि आप p5.js के लिए एक प्रमुख नई सुविधा विकसित कर रहे हैं, तो आपको शायद परीक्षण शामिल करना चाहिए। पुल अनुरोध सबमिट न करें जिसमें परीक्षण पास नहीं होते हैं, क्योंकि इसका मतलब है कि कुछ टूट गया है।\n\nइकाई परीक्षण चलाने के लिए, आपको पहले परियोजना की निर्भरताएँ स्थापित करनी होंगी।\n\n```shell\n$ npm ci\n```\n\nयह p5.js के लिए *सभी* निर्भरताएं स्थापित करेगा; संक्षेप में, यूनिट परीक्षण के लिए सबसे महत्वपूर्ण निर्भरताएं शामिल हैं:\n\n* [मोचा](https://mochajs.org/), एक शक्तिशाली परीक्षण ढाँचा जो व्यक्तिगत परीक्षण फ़ाइलों को निष्पादित करता है जो p5.js के लिए विशिष्ट हैं\n* [मोचा-क्रोम](https://github.com/shellscape/mocha-chrome/), एक मोचा प्लगइन जो बिना सिर के गूगल क्रोम का उपयोग करके मोचा परीक्षण चलाता है\n\nएक बार निर्भरताएं स्थापित हो जाने के बाद, यूनिट परीक्षणों को चलाने के लिए ग्रंट का उपयोग करें।\n\n```shell\n$ grunt\n```\n\nकभी-कभी कमांड लाइन पर के बजाय ब्राउज़र में परीक्षण चलाना उपयोगी होता है। ऐसा करने के लिए, पहले [कनेक्ट](https://github.com/gruntjs/grunt-contrib-connect/) सर्वर शुरू करें:\n\n```shell\n$ npm run dev\n```\n\nसर्वर के चलने के साथ, आपको एक ब्राउज़र में `test/test.html` खोलने में सक्षम होना चाहिए।\n\nइकाई परीक्षण के लिए एक पूर्ण मार्गदर्शिका p5.js प्रलेखन के दायरे से परे है, लेकिन संक्षिप्त संस्करण यह है कि `src/` निर्देशिका में निहित स्रोत कोड में लागू किए गए किसी भी बड़े बदलाव या नई सुविधाओं को भी `test/` फ़ाइलों के साथ होना चाहिए लाइब्रेरी के सभी भविष्य के संस्करणों में लगातार व्यवहार को सत्यापित करने के लिए मोचा द्वारा निष्पादित किया जा सकता है। इकाई परीक्षण लिखते समय, अपने दावे संदेशों को फिर से प्रकाशित करने के लिए एक गाइड के रूप में [Chai.js संदर्भ](http://www.chaijs.com/api/assert/) का उपयोग करें ताकि भविष्य में आपके परीक्षणों द्वारा पकड़ी गई कोई भी त्रुटि लगातार और परिणामस्वरूप दूसरों को समझने के लिए आसान होगी।\n\n# विविध\n\n* [योगदानकर्ता डॉक्स](https://github.com/processing/p5.js/tree/main/contributor_docs/) फ़ोल्डर में अन्य फाइलें हैं जिन्हें आप देख सकते हैं। वे इस परियोजना के विशिष्ट क्षेत्रों, दोनों तकनीकी और गैर-तकनीकी में योगदान करने से संबंधित हैं।\n* [लुकिंग इनसाइड p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/) p5.js डेवलपमेंट वर्कफ़्लो में इस्तेमाल होने वाले टूल्स और फाइल्स का वीडियो टूर है।\n* [द कोडिंग ट्रेन का यह वीडियो](https://youtu.be/Rr3vLyP1Ods/) :train::rainbow: तकनीकी योगदान के साथ शुरू करने का अवलोकन देता है।\n* p5.js [डॉकर छवि](https://github.com/toolness/p5.js-docker/) [डॉकर](https://www.docker.com/) में आरोहित किया जा सकता है और इसका उपयोग p5 विकसित करने के लिए किया जाता है [नोड](https://nodejs.org/) जैसी आवश्यकताओं की मैन्युअल स्थापना की आवश्यकता के बिना .js या अन्यथा डॉकर की स्थापना से अलग किसी भी तरह से मेजबान ऑपरेटिंग सिस्टम को प्रभावित करना।\n* p5.js लाइब्रेरी के लिए निर्माण प्रक्रिया एक [json डेटा फ़ाइल](https://p5js.org/reference/data.json) उत्पन्न करती है, जिसमें p5.js की सार्वजनिक API होती है और इसका उपयोग स्वचालित टूलिंग में किया जा सकता है, जैसे एक संपादक में स्वतः पूर्ण p5.js विधियों के रूप में। यह फ़ाइल p5.js वेबसाइट पर होस्ट की गई है, लेकिन यह रिपॉजिटरी के हिस्से के रूप में शामिल नहीं है।\n* p5.js ने हाल ही में [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015) पर माइग्रेट किया है। यह देखने के लिए कि यह संक्रमण आपके योगदान को कैसे प्रभावित कर सकता है कृपया [es6-adoption.md](../es6-adoption/) फ़ाइल पर जाएँ।\n"},"पहुँच पर हमारा ध्यान\n":{"relativeUrl":"/contribute/access","description":"{/* लाइब्रेरी के योगदानकर्ताओं और उपयोगकर्ताओं के लिए पहुंच के प्रति हमारी प्रतिबद्धता का क्या मतलब है। */}\n\n\n\n[2019 योगदानकर्ता सम्मेलन](https://p5js.org/community/contributors-conference-2019.html) में, p5.js ने केवल नई सुविधाओं को जोड़ने की प्रतिबद्धता जताई जो पहुंच (समावेशन और पहुंच) को बढ़ाती हैं। हम उन सुविधा अनुरोधों को स्वीकार नहीं करेंगे जो इन प्रयासों का समर्थन नहीं करते हैं। हम बाधाओं को स्वीकार करने, ख़त्म करने और रोकने के कार्य के लिए प्रतिबद्ध हैं। इसका मतलब विविधता के अनुभवों को जोड़ने पर विचार करना है जो पहुंच और भागीदारी को प्रभावित कर सकते हैं। इनमें लिंग, नस्ल, जातीयता, कामुकता, भाषा, स्थान आदि का संरेखण शामिल है। हम p5.js समुदाय के भीतर विशेषाधिकार प्राप्त लोगों की निरंतर सुविधा पर हाशिए पर रहने वाले समूहों की जरूरतों को केंद्रित करते हैं। हम सामूहिक रूप से पहुंच का अर्थ तलाश रहे हैं। हम सीख रहे हैं कि कैसे अभ्यास करें और पहुंच कैसे सिखाएं। हम व्यापक, अंतर्संबंधीय और गठबंधनवादी ढांचे के माध्यम से पहुंच के बारे में सोचना चुनते हैं। यह प्रतिबद्धता हमारे [सामुदायिक वक्तव्य](https://p5js.org/about/#community-statement) में उल्लिखित p5.js के मूल मूल्यों का हिस्सा है।\n\n## पहुंच के प्रकार\n\nपहुंच बढ़ाना p5.js समुदाय में लोगों की संख्या का विस्तार करने पर केंद्रित नहीं है। यह उन लोगों के लिए p5.js को उपलब्ध कराने और उन तक पहुंच योग्य बनाने की एक निरंतर प्रतिबद्धता है, जिन्हें संरचनात्मक उत्पीड़न के परिणामस्वरूप p5.js समुदाय से बाहर रखा गया है। यह प्रतिबद्धता p5.js द्वारा प्रदान किए जाने वाले टूल और प्लेटफ़ॉर्म तक फैली हुई है। इसमें p5.js नेतृत्व की संरचना, निर्णय लेना और कार्य भी शामिल हैं। हम गति, विकास और प्रतिस्पर्धा की तकनीकी संस्कृति का विरोध करते हैं। हम सामूहिक देखभाल के कार्यों के रूप में जानबूझकर, धीमेपन, समायोजन और जवाबदेही को प्राथमिकता देते हैं।\n\nयहां पहुंच का अर्थ है p5.js को इनके लिए न्यायसंगत बनाना:\n\n* जो लोग अंग्रेजी के अलावा अन्य भाषाएं बोलते हैं\n - काले लोग, स्वदेशी लोग और रंग के लोग\n* समलैंगिक, उभयलिंगी, पैनसेक्सुअल और अलैंगिक लोग\n* ट्रांस, जेंडरफ्लुइड, एजेंडर, इंटरसेक्स, महिलाएं, और हाशिए पर अन्य लिंग वाले लोग\n* जो लोग अंधे हैं, डी/बधिर हैं[^2] या सुनने में कठिन हैं, विकलांग हैं/विकलांगता से ग्रस्त हैं, न्यूरोडायवर्जेंट हैं, और लंबे समय से बीमार हैं[^3]\n* जिन लोगों की आय कम है, या जिनके पास वित्तीय या सांस्कृतिक पूंजी तक पहुंच नहीं है\n* ओपन सोर्स और क्रिएटिव कोडिंग में बहुत कम या कोई पूर्व अनुभव नहीं रखने वाले लोग\n* विविध शैक्षिक पृष्ठभूमि के लोग\n* बच्चों और बुजुर्गों सहित सभी आयु वर्ग के लोग\n* विभिन्न तकनीकी कौशल, उपकरण और इंटरनेट पहुंच वाले लोग\n* विविध धार्मिक पृष्ठभूमि के लोग\n* अन्य लोग जिन्हें व्यवस्थित रूप से बहिष्कृत किया गया है और ऐतिहासिक रूप से कम प्रतिनिधित्व दिया गया है\n* और उसके सभी चौराहे\n\nहम अपनी-अपनी पहचान का वर्णन करने के लिए उपयोग किए जाने वाले शब्दों की जटिलता को पहचानते हैं। भाषा सूक्ष्म है, विकसित हो रही है और विवादित है। यह एक विस्तृत सूची नहीं है। हम अपनी प्रतिबद्धताओं और p5.js समुदाय की विविध आवश्यकताओं के प्रति जवाबदेह होने का प्रयास करते हैं।\n\n### उदाहरण\n\nये उन प्रयासों के उदाहरण हैं जिनके बारे में हमारा मानना है कि पहुंच में वृद्धि होगी:\n\n* दस्तावेज़ीकरण और अन्य सामग्रियों का अधिक भाषाओं में अनुवाद करना, भाषाई साम्राज्यवाद को विकेंद्रीकृत करना[^4] (उदाहरण के लिए, रोलैंडो वर्गास' [कुना भाषा में प्रसंस्करण](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in/) -कुना-लैंग्वेज-विथ-रोलैंडो-वर्गास-एंड-एडिन्सन-इज़क्विएर्डो-8079एफ14851एफ7), फेलिप सैंटोस गोम्स, जूलिया ब्रासिल, कैथरीन फिन ज़ेंडर, और मार्सेला मैनसिनो की \\[पी सिन्को: पुर्तगाली बोलने वालों के लिए अंतर्राष्ट्रीयकरण और लोकप्रियकरण]\\(https\\:// मीडियम.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/))\n* सहायक तकनीकों के लिए हमारे समर्थन में सुधार करना, जैसे कि स्क्रीन रीडर (उदाहरण के लिए, केटी लियू का [p5.js में Alt टेक्स्ट जोड़ना](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), क्लेयर किर्नी -वोल्पे का [पी5 एक्सेसिबिलिटी प्रोजेक्ट](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/))\n* हमारे टूल में \\[वेब कंटेंट एक्सेसिबिलिटी दिशानिर्देशों] ([https://www.w3.org/TR/WCAG21/](https://www.w3.org/TR/WCAG21/)) का पालन करना और उपयोगकर्ताओं के लिए अपने प्रोजेक्ट में उनका पालन करना आसान बनाने की दिशा में काम करना\n* टूल का उपयोग करने वाले लोगों के लिए p5.js त्रुटि संदेशों को अधिक उपयोगी और सहायक बनाना (उदाहरण के लिए, [p5.js फ्रेंडली एरर सिस्टम (FES)](https://github.com/processing/p5.js/blob/main/) योगदानकर्ता\\_docs/friendly\\_error\\_system.md))\n* उन समुदायों के भीतर p5.js के शिक्षार्थियों को सलाह देना और समर्थन करना, जिन्हें ऐतिहासिक रूप से रचनात्मक कोडिंग और डिजिटल कलाओं से बाहर रखा गया है और हाशिए पर रखा गया है।\n* सामुदायिक कार्यक्रमों की मेजबानी (उदाहरण के लिए, [p5.js Access Day 2022](https://p5js.org/community/p5js-access-day-2022.html), [द वेब वी वांट: p5.js x W3C TPAC 2020 )](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) एक्सेस-केंद्रित आयोजन रणनीति (उदाहरण के लिए, एएसएल व्याख्या, लाइव कैप्शनिंग, सुलभ स्थान) के साथ\n* शैक्षिक संसाधनों के निर्माण का समर्थन करना (उदाहरण के लिए, अडेकेमी सिजुवाडे-उकाडिके का [ए11वाई पाठ्यक्रम](http://a11ysyllabus.site/))\n* हमारे काम के दस्तावेज़ और रिपोर्ट प्रकाशित करना जो WCAG दिशानिर्देशों का पालन करते हैं, सरल भाषा का उपयोग करते हैं, और विविध अनुभवों से शुरुआती लोगों पर ध्यान केंद्रित करते हैं (उदाहरण के लिए, \\[OSACC p5.js एक्सेस रिपोर्ट] ([https://github.com/processing/OSACC-p5)।](https://github.com/processing/OSACC-p5\\)।) जेएस-एक्सेस-रिपोर्ट))\n\n## रखरखाव\n\nहम उन सुविधा अनुरोधों को स्वीकार नहीं कर रहे हैं जो पहुंच बढ़ाने के हमारे प्रयास का समर्थन नहीं करते हैं। आप इस मानदंड को हमारे अंक में प्रतिबिंबित देखेंगे और अनुरोध टेम्पलेट खींचेंगे। हम p5.js के मौजूदा फीचर सेट को बनाए रखने के अपने इरादे की भी पुष्टि करते हैं। हम बग्स को ठीक करना चाहेंगे, भले ही वे कोडबेस के किसी भी क्षेत्र में हों। हमारा मानना है कि टूल की स्थिरता इसे शुरुआती लोगों के लिए अधिक सुलभ बनाती है। पहुंच में सुधार करने वाले सुविधा अनुरोधों के उदाहरणों में शामिल हैं:\nकम शक्तिशाली हार्डवेयर का उपयोग करने वाले लोगों के लिए प्रदर्शन बढ़ता है (उदाहरण के लिए, फ़्रेमबफ़र्स से ड्राइंग/पढ़ने के लिए समर्थन)\nएपीआई में संगति (उदाहरण के लिए, शुरुआती आकार ()/एंडशेप () के साथ आर्क बनाने के लिए आर्क वर्टेक्स () जोड़ें)\n\n***\n\nकृपया इसे एक 'जीवित दस्तावेज़' मानें। हम इस बारे में बातचीत जारी रखेंगे कि पहुंच को प्राथमिकता देने का क्या मतलब है। हम अपने समुदाय को इस दस्तावेज़ और इसमें वर्णित मूल्यों से जुड़ने के लिए आमंत्रित करते हैं। यदि आपके पास विचार या सुझाव हैं, तो हम आपको उन्हें Github पर एक मुद्दे के रूप में या [hello@p5js.org](mailto:hello@p5js.org) पर ईमेल करके साझा करने के लिए आमंत्रित करते हैं।\n\nपी5.जेएस एक्सेस स्टेटमेंट के इस संस्करण को एवलिन मासो, नेट डेकर, बॉबी जो स्मिथ III, सैमी वीलर, सोनिया (सुह्युन) चोई, शिन शिन, केट होलेनबैक, लॉरेन ली मैक्कार्थी, कैरोलीन सिंडर्स, कियानकियान ये के सहयोग से संशोधित किया गया था। 2023 ओपन सोर्स आर्ट्स कंट्रीब्यूटर्स कॉन्फ्रेंस में ट्रिस्टन जोवानी मैग्नो एस्पिनोज़ा, तन्वी शर्मा, त्सिज टैफेस और सारा सिस्टन। इसे प्रोसेसिंग फाउंडेशन फ़ेलोशिप के सहयोग से बॉबी जो स्मिथ III और नेट डेकर द्वारा अंतिम रूप दिया गया और प्रकाशित किया गया।\n\n[^1]: क्रेंशॉ, किम्बर्ले (1989)। \"जाति और लिंग के प्रतिच्छेदन को सीमाबद्ध करना: भेदभाव विरोधी सिद्धांत, नारीवादी सिद्धांत और नस्लवाद विरोधी राजनीति की एक काली नारीवादी आलोचना\"। शिकागो विश्वविद्यालय कानूनी फोरम। 1989 (1): 139-167। आईएसएसएन 0892-5593। पूरा पाठ Archive.org पर।\n\n[^2]: कैपिटल 'डी' डेफ उन लोगों को संदर्भित करता है जो सांस्कृतिक रूप से बधिर हैं या बधिर समुदाय का हिस्सा हैं, जबकि लोअर केस 'डी' डेफ एक ऑडियोलॉजिकल शब्द है जो बधिर पहचान से जुड़े लोगों का वर्णन नहीं कर सकता है।\n\n[^3]: विकलांगता समुदाय के भीतर 'व्यक्ति-प्रथम' बनाम 'पहचान-प्रथम' भाषा के बीच अलग-अलग प्राथमिकताएँ हैं। पढ़ें \\[ऑटिज़्म समुदाय में व्यक्ति-प्रथम बनाम पहचान-प्रथम भाषा पर बहस को खोलना]\\([https://news.northeaster.edu/2018/07/12/unpacking-the-debate-over-person-first-vs](https://news.northeaster.edu/2018/07/12/unpacking-the-debate-over-person-first-vs) -पहचान-प्रथम-भाषा-में-ऑटिज्म-समुदाय/) और \\[मैं विकलांग हूं: पहचान-प्रथम बनाम लोग-प्रथम भाषा पर]\\([https://thebodyisnotanapology.com/magazine/i-am-disabled-on](https://thebodyisnotanapology.com/magazine/i-am-disabled-on) -पहचान-प्रथम-बनाम-लोग-प्रथम-भाषा/)।\n\n[^4]: भाषाई साम्राज्यवाद, या भाषा साम्राज्यवाद, शाही विस्तार और वैश्वीकरण के कारण मूल भाषाओं की कीमत पर अंग्रेजी जैसी कुछ भाषाओं के चल रहे वर्चस्व/प्राथमिकता/थोपे जाने को संदर्भित करता है।\n"},"p5.js संदर्भ में योगदान\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* सही प्रारूप का उपयोग करके p5.js संदर्भ लिखें और संपादित करें। */}\n\n\n\np5.js में, हम p5.js वेबसाइट पर [संदर्भ](https://p5js.org/reference/) पृष्ठ पर दिखाई देने वाले कोड संदर्भ का योगदान करते हैं जिन्हें लाइब्रेरी के स्रोत कोड के साथ शामिल किया गया है विशेषज्ञ टिप्पणियों के रूप में। ये संदर्भ टिप्पणियाँ विवरण, समारोह की हस्ताक्षर (इसके पैरामीटर और वापसी मान), और उपयोग उदाहरणों को सम्मिलित करती हैं। अन्य शब्दों में, प्रत्येक p5.js फ़ंक्शन/चर के संदर्भ पृष्ठ पर का सामग्री स्रोत कोड में संदर्भ टिप्पणियों से निर्मित होता है।\n\nइस दस्तावेज़ का उद्देश्य आपको संदर्भ टिप्पणियों को कैसे लिखें और स्वरूपित करें ताकि वे अंत में वेबसाइट पर सही ढंग से प्रस्तुत किए जा सकें, यह दिखाना है। जब भी आप किसी p5.js फ़ंक्शन या चर के लिए संदर्भ संपादित या लिखते हैं, तो आपको इस गाइड का पालन करना चाहिए।\n\n## संदर्भ टिप्पणी काम कैसे करते हैं का एक त्वरित परिचय\n\np5.js के स्रोत कोड को देखने पर, आपको लाइब्रेरी में कई पंक्तियों में संदर्भ टिप्पणियाँ दिखाई देंगी; वे इस तरह से दिखती हैं:\n\n```\n/**\n * एक कोण का साइन कैलकुलेट करता है। sin() बहुत से रचनात्मक कोडिंग में ज्यामिति कार्यों के लिए उपयोगी होता है।\n * इनपुट कोण बढ़ने पर वापसी की गई मान बीच -1 और 1 के बीच ओसिलेट करती है।\n * sin() में वर्तमान को संज्ञान में लेता है।\n * <a href=\"#/p5/angleMode\">angleMode</a>.\n *\n * @method sin\n * @param {Number} angle the angle.\n * @return {Number} sine of the angle.\n *\n * @example\n * <div>\n * <code>\n * function draw() {\n * background(200);\n *\n * let t = frameCount;\n * let x = 50;\n * let y = 30 * sin(t * 0.05) + 50;\n * line(x, 50, x, y);\n * circle(x, y, 20);\n *\n * describe('A white ball on a string oscillates up and down.');\n * }\n * </code>\n * </div>\n *\n * <div>\n * <code>\n * function draw() {\n * let x = frameCount;\n * let y = 30 * sin(x * 0.1) + 50;\n * point(x, y);\n *\n * describe('A series of black dots form a wave pattern.');\n * }\n * </code>\n * </div>\n *\n * <div>\n * <code>\n * function draw() {\n * let t = frameCount;\n * let x = 30 * cos(t * 0.1) + 50;\n * let y = 10 * sin(t * 0.2) + 50;\n * point(x, y);\n *\n * describe('A series of black dots form an infinity symbol.');\n * }\n * </code>\n * </div>\n */\n```\n\nउन्हें आमतौर पर वास्तविक जावास्क्रिप्ट कोड के साथ अनुसरण किया जाता है जो फ़ंक्शन को परिभाषित करता है। संदर्भ टिप्पणियाँ हमेशा `/**` से शुरू होती हैं और `*/` से समाप्त होती हैं, जिसमें दोनों के बीच की प्रत्येक पंक्ति `*` से शुरू होती है।\n\nइस तरह के ब्लॉक में कोई भी चीज संदर्भ दस्तावेज़ के रूप में निर्वाचित की जाएगी। आप इस कोड टिप्पणियों के इस स्टाइल के माध्यम से परिचित हो सकते हैं [JSDoc](https://jsdoc.app/) के माध्यम से। p5.js ,JSDoc का उपयोग नहीं करता है, बल्कि यह बहुत ही समान उपकरण का उपयोग करता है जिसे [YUIDoc](https://yui.github.io/yuidoc/) कहा जाता है, जिसमें एक बहुत ही समान संदर्भ वाक्य संरचना है। इस स्टाइल के संदर्भ टिप्पणियों में, प्रत्येक टिप्पणी ब्लॉक को और अधिक व्यक्तिगत तत्वों में विभाजित किया गया है, जिस पर हम अगले में एक नज़र डालेंगे। \n\n## संदर्भ टिप्पणी ब्लॉक\n\nऊपर दिए गए `sin()` फ़ंक्शन के लिए संदर्भ टिप्पणियों ब्लॉक को विश्लेषित करें और देखें कि प्रत्येक खंड का क्या काम है। आप यहाँ टिप्पणियों में दिखने वाली जानकारी और `sin()` के संदर्भ पृष्ठ पर जो दिखता है, उनकी तुलना कर सकते हैं। ([`sin()`](https://p5js.org/reference/p5/sin/))\n\n```\n/**\n * एक कोण का साइन कैलकुलेट करता है। sin() बहुत से रचनात्मक कोडिंग में ज्यामिति कार्यों के लिए उपयोगी होता है।\n * इनपुट कोण बढ़ने पर वापसी की गई मान बीच -1 और 1 के बीच ओसिलेट करती है। \n * `sin()` में वर्तमान को संज्ञान में लेता है।\n * <a href=\"#/p5/angleMode\">angleMode</a>.\n```\n\nटिप्पणी के बहुत ऊपर, फ़ंक्शन का पाठित वर्णन होता है। यह वर्णन मार्कडाउन सिंटेक्स और HTML दोनों को समाविष्ट कर सकता है। विवरण संक्षिप्त होना चाहिए और फ़ंक्शन के क्या काम करता है और, यदि आवश्यक हो, उसकी कुछ विशेषताओं या व्यवहार के बारे में कुछ विवरण करना चाहिए।\n\n```\n * @method sin\n * @param {Number} angle the angle.\n * @return {Number} sine of the angle.\n```\n\nएक फ़ंक्शन के आमतौर पर ऊपर वर्णित तीन खंड होते हैं, प्रत्येक एक `@` प्रतीक से शुरू होता है और इनमें से एक निम्नलिखित कीवर्डों में से एक के साथ आता है:\n\n* `@method` को फ़ंक्शन का नाम परिभाषित करने के लिए प्रयोग किया जाता है, इस मामले में `sin` (ध्यान दें कि फ़ंक्शन का नाम ब्रैकेट `()` को समाविष्ट नहीं करता है)।\n* `@param` को फ़ंक्शन द्वारा स्वीकार किए जाने वाले पैरामीटर या तर्क को परिभाषित करने के लिए प्रयोग किया जाता है।\n * `@param` के पीछे, मध्यम कोष्ठक `{}` में संग्रहित, पैरामीटर का प्रकार होता है।\n * प्रकार के बाद, अगला शब्द (कोण) पैरामीटर का नाम होता है।\n * नाम के बाद, पंक्ति का शेष भाग पैरामीटर का विवरण होता है।\n* `@return` को फ़ंक्शन की वापसी मान को परिभाषित करने के लिए प्रयोग किया जाता है।\n * `@return` के पीछे, मध्यम कोष्ठक `{}` में संग्रहित, वापसी मान का प्रकार होता है।\n * प्रकार के बाद, पंक्ति का शेष भाग वापसी मान का विवरण होता है।\n\nपैरामीटरों के लिए अधिक सामान्य रूप में, आपको इस प्रारूप का पालन करना चाहिए:\n\n```\n@param {type} name Description here.\n```\n\nयदि पैरामीटर वैकल्पिक है, तो नाम के आसपास वर्गाकार ब्रैकेट जोड़ें:\n\n```\n@param {type} [name] Description here.\n```\n\n### अतिरिक्त जानकारी: स्थिरांक\n\nयदि पैरामीटर [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js) में परिभाषित एक या एक से अधिक मानों को लेता है, तो प्रकार को `{Constant}` के रूप में निर्दिष्ट किया जाना चाहिए और मान्य मानों को `either` की प्रतिलिपि के बाद की टिप्पणी में व्यवस्थित किया जाना चाहिए, जैसे:\n\n```\n@param {Constant} horizAlign horizontal alignment, either LEFT, CENTER, or RIGHT\n```\n\nवापसी प्रकारों के लिए, आपको इस प्रारूप का पालन करना चाहिए:\n\n```\n@return {type} Description of the data returned.\n```\n\nयदि फ़ंक्शन कोई मान नहीं वापस भेजता है, तो `@return` टैग छोड़ दिया जा सकता है।\n\n### अतिरिक्त जानकारी: चेनिंग\n\nयदि विधि मात्र अभिभावक ऑब्जेक्ट को वापस करती है, तो आप `@return` टैग को छोड़ सकते हैं और इस बजाय इस पंक्ति को जोड़ सकते हैं:\n\n```\n@chainable\n```\n\n## अतिरिक्त चिन्ह\n\nयदि किसी फ़ंक्शन के पास कई संभावित पैरामीटर विकल्प हैं, तो आप प्रत्येक को व्यक्तिगत रूप से निर्दिष्ट कर सकते हैं। उदाहरण के लिए, [`background()`](https://p5js.org/reference/#p5/background/) फ़ंक्शन कई विभिन्न पैरामीटर विकल्प लेता है (संदर्भ पृष्ठ पर \"सिंटैक्स\" खण्ड देखें)। पहले हस्ताक्षर के रूप में एक संस्करण को चुनें और उसे पहले संदर्भ टिप्पणी ब्लॉक के अंत में जोड़ें, निम्नलिखित उदाहरण का पालन करें। पहले संदर्भ टिप्पणी ब्लॉक के अंत में, आप अतिरिक्त हस्ताक्षर जोड़ सकते हैं, प्रत्येक अपने ब्लॉक में, केवल `@method` और `@param` टैग का पालन करते हुए, निम्नलिखित उदाहरण का पालन करें।\n\n```\n/**\n * @method background\n * @param {String} colorstring color string, possible formats include: integer\n * rgb() or rgba(), percentage rgb() or rgba(),\n * 3-digit hex, 6-digit hex\n * @param {Number} [a] alpha value\n */\n\n/**\n * @method background\n * @param {Number} gray specifies a value between white and black\n * @param {Number} [a]\n */\n```\n\n### अतिरिक्त जानकारी: विभिन्न चिन्ह\n\nअगर दो चिन्हों के बीच एक ही अंतर केवल एक वैकल्पिक पैरामीटर के जोड़ने का है, तो एक अलग चिन्ह बनाना आवश्यक नहीं है। इस सुविधा का उपयोग संभव होते हुए सीमित करें क्योंकि यह संदर्भ में अनावश्यक शोर उत्पन्न कर सकता है।\n\n## p5.js चरों के लिए संदर्भ\n\nअब तक, हमने फ़ंक्शन और स्थिरांकों के लिए संदर्भ कैसे लिखें इसे देखा है। चर भी एक ही संरचना का पालन करते हैं, लेकिन विभिन्न टैग का प्रयोग करते हैं।\n\n```\n/**\n * सिस्टम चर mouseX हमेशा माउस के वर्तमान केंद्रीय स्थान को संदर्भित करता है,\n * कैनवास के (0, 0) के प्रति। शीर्ष-बाएं कोने में मान (0, 0) होता है\n * 2-डी के लिए और WebGL के लिए (-चौड़ाई/2, -ऊचाई/2)।\n * यदि माउस इनपुट की जगह स्पर्श का उपयोग किया जाता है, तो mouseX एक्स वैल्यू को धारण करेगा\n * सबसे हाल के स्पर्श बिंदु की।\n *\n * @property {Number} mouseX\n * @readOnly\n *\n * @example\n * <div>\n * <code>\n * // Move the mouse across the canvas\n * function draw() {\n * background(244, 248, 252);\n * line(mouseX, 0, mouseX, 100);\n * describe('horizontal black line moves left and right with mouse x-position');\n * }\n * </code>\n * </div>\n */\n```\n\nब्लॉक की शुरुआत में चर का वर्णन होता है (`mouseX` इस मामले में)। चर का नाम परिभाषित करने के लिए, हम `@method` के बजाय `@property` का प्रयोग करते हैं। `@property` पैरामीटर के लिए वही नियमावली का पालन करता है जो `@param` के लिए होता है, उसके प्रकार और उसके नाम को परिभाषित करने के लिए। `@readonly` टैग अधिकांश p5.js चरों पर मौजूद होता है और इसका उपयोग आंतरिक रूप से किया जाता है ताकि इस मान को एक पुस्तकालय उपयोगकर्ता द्वारा सीधे अधिलेखित न किया जाए।\n\n## उदाहरण जोड़ना\n\nजिस टैग की हमने अभी तक चर्चा नहीं की है, वह है `@example` टैग, जो `sin()` और `mouseX` के संदर्भ टिप्पणियों में मौजूद है। यह टैग उस स्थान को परिभाषित करता है जहाँ आप संदर्भ पृष्ठ पर जाते समय चलाया जाने वाला कोड उदाहरण(ओं) को परिभाषित करता है।\n\n\n\nउपरोक्त चित्र को बनाने के लिए उपयुक्त `@example` टैग निम्नलिखित है:\n\n```\n * @example\n * <div>\n * <code>\n * const c = color(255, 204, 0);\n * fill(c);\n * rect(15, 20, 35, 60);\n * // Sets 'redValue' to 255.\n * const redValue = red(c);\n * fill(redValue, 0, 0);\n * rect(50, 20, 35, 60);\n * describe(\n * 'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'\n * );\n * </code>\n * </div>\n```\n\n`@example` टैग के बाद, आपको एक HTML `<div>` टैग शुरू करना चाहिए जिसके बाद एक `<code>` टैग आता है। खुलने और बंद होने वाले `<code>` टैग के बीच, आप संबंधित उदाहरण कोड डालेंगे। संदर्भ के लिए अच्छे उदाहरण कोड लिखने का मूल सिद्धांत चीजों को सरल और न्यूनतम रखना है। उदाहरण का मायने होना चाहिए और यह बिना जटिल होने के साथ यह समझाना चाहिए कि विशेषता कैसे काम करती है। उदाहरण के कैनवास का आकार 100x100 पिक्सेल होना चाहिए और यदि `setup()` फ़ंक्शन शामिल नहीं किया गया है, जैसा कि ऊपर के उदाहरण में, तो कोड को स्वचालित रूप से एक डिफ़ॉल्ट 100x100 पिक्सेल के ग्रे बैकग्राउंड कैनवास के साथ `setup()` फ़ंक्शन में लपेट दिया जाएगा। हम यहां उदाहरण कोड के लिए श्रेष्ठ प्रथाओं और कोड शैली के विवरण में नहीं जाएंगे; कृपया बजाय में संदर्भ शैली गाइड देखें।\n\nआप एक विशेषता के लिए एक से अधिक उदाहरण रख सकते हैं। इसके लिए, पहले बंद `<div>` के बाद एक अतिरिक्त `<div>` और `<code>` HTML ब्लॉक जोड़ें, जो एक खाली पंक्ति से अलग हो।\n\n```\n* @example\n* <div>\n* <code>\n* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n* describe('An ellipse created using an arc with its top right open.');\n* </code>\n* </div>\n* \n* <div>\n* <code>\n* arc(50, 50, 80, 80, 0, PI, OPEN);\n* describe('The bottom half of an ellipse created using arc.');\n* </code>\n* </div>\n```\n\nयदि आप चाहते हैं कि संदर्भ पृष्ठ आपके उदाहरण कोड को नहीं चलाए (अर्थात, आप चाहते हैं कि केवल कोड प्रदर्शित हो), तो `<div>` में \"norender\" वर्ग शामिल करें:\n\n```\n* @example\n* <div class=\"norender\">\n* <code>\n* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n* describe('ellipse created using arc with its top right open');\n* </code>\n* </div>\n```\n\nयदि आप चाहते हैं कि उदाहरण को ऑटोमेटेड टेस्ट का हिस्सा के रूप में नहीं चलाया जाए (उदाहरण के लिए, यदि उदाहरण में उपयोगकर्ता संवाद की आवश्यकता हो), तो `<div>` में \"notest\" वर्ग शामिल करें:\n\n```\n* @example\n* <div class='norender notest'><code>\n* function setup() {\n* let c = createCanvas(100, 100);\n* saveCanvas(c, 'myCanvas', 'jpg');\n* }\n* </code></div>\n```\n\nयदि आपका उदाहरण बाहरी संसाधन फ़ाइलों का उपयोग करता है, तो उन्हें [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) फ़ोल्डर में रखें (या पहले से वहां मौजूद कोई उपयोग करें) फिर उन्हें कोड में \"assets/filename.ext\" के साथ लिंक करें। उदाहरण के लिए [tint()](https://p5js.org/reference/p5/tint/) संदर्भ देखें।\n\n### `describe()` का उपयोग करके कैनवास का विवरण जोड़ें\n\nअंतिम रूप में, आपको हर उदाहरण के लिए p5.js फ़ंक्शन `describe()` का उपयोग करना आवश्यक है ताकि कैनवास के लिए एक स्क्रीन-रीडर एक्सेसिबल विवरण बनाया जा सके। केवल एक पैरामीटर शामिल करें: एक स्ट्रिंग जिसमें कैनवास पर क्या हो रहा है, इसका संक्षिप्त विवरण हो।\n\n```\n* @example\n* <div>\n* <code>\n* let xoff = 0.0;\n* function draw() {\n* background(204);\n* xoff = xoff + 0.01;\n* let n = noise(xoff) * width;\n* line(n, 0, n, height);\n* describe('A vertical line moves randomly from left to right.');\n* }\n* </code>\n* </div>\n* \n* <div>\n* <code>\n* let noiseScale = 0.02;\n* function draw() {\n* background(0);\n* for (let x = 0; x < width; x += 1) {\n* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);\n* stroke(noiseVal*255);\n* line(x, mouseY + noiseVal * 80, x, height);\n* }\n* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');\n* }\n* </code>\n* </div>\n```\n\n`describe()` पर अधिक जानकारी के लिए [web accessibility contributor documentation](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions) पर जाएं।\n\nऊपर दिए गए सभी तत्वों के साथ, आपके पास p5.js संदर्भ टिप्पणियों को लिखने और संपादित करने के लिए अधिकांश उपकरण होने चाहिए। हालांकि, p5.js में आपके सामने कुछ और विशेष उपयोग होते हैं जो JSDoc शैली की संदर्भ टिप्पणियों के विशेष प्रयोग होते हैं। ये परिस्थितिकी रूप से उपयोगी होते हैं और अक्सर जरूरी नहीं होते।\n\n### `@private` टैग\n\nआप `@private` टैग का उपयोग कर सकते हैं अगर कोई गुप्त फ़ंक्शन या चर है। यदि किसी विशेषता को `@private` के रूप में चिह्नित किया जाता है तो यह वेबसाइट पर रेंडर किए गए संदर्भ का हिस्सा नहीं होगा। `@private` टैग का उपयोग एक संदर्भ टिप्पणियों ब्लॉक को निजी रूप में चिह्नित करने के लिए किया जाता है जब आप पुस्तकालय के लिए आंतरिक विशेषताओं का विवरण करते हैं। उदाहरण के लिए, नीचे `_start` के संदर्भ टिप्पणियों को देखें:\n\n```\n/**\n * _start calls preload() setup() and draw()\n * \n * @method _start\n * @private\n */\np5.prototype._start = function () {\n```\n\n### `@module` और संबंधित टैग\n\nप्रत्येक स्रोत कोड फ़ाइल के शीर्ष पर एक `@module` टैग होगा। मॉड्यूल p5.js में एक समूह का प्रतिनिधित्व करते हैं जो वेबसाइट पर रेंडर किए गए संदर्भ पृष्ठ पर उपयोगकर्ता द्वारा उपयोग की जाने वाली विशेषताओं में विभाजित होता है। प्रत्येक मॉड्यूल में, `@submodule` टैग के साथ अतिरिक्त उपमॉड्यूल परिभाषित होते हैं।\n\n`@for` टैग इस मॉड्यूल और कुल `p5` क्लास के बीच संबंध को परिभाषित करता है, यहां कहना प्रभावी रूप से कि यह मॉड्यूल `p5` क्लास का हिस्सा है।\n\n`@requires` टैग वर्तमान मॉड्यूल के लिए आवश्यक आयातित मॉड्यूल को परिभाषित करता है जिस पर वर्तमान मॉड्यूल का निर्भर करता है।\n\n```\n/**\n * @module Color\n * @submodule Creating & Reading\n * @for p5\n * @requires core\n * @requires constants\n */\n```\n\np5.js का अनुसरण किया जाने वाला शैली यह है कि `src/` फ़ोल्डर में प्रत्येक सबफ़ोल्डर एक `@module` होगा जबकि सबफ़ोल्डर में शामिल हर फ़ाइल अपने उपयुक्त सबफ़ोल्डर के `@module` के तहत अपना खुद का `@submodule` होगा। p5.js स्रोत कोड में नए सबफ़ोल्डर/फ़ाइल नहीं जोड़ रहे हैं तो आपको इस संदर्भ टिप्पणियों ब्लॉक को संपादित करने की आवश्यकता नहीं होनी चाहिए।\n\n### `@class` टैग\n\nक्लास निर्माताओं को `@class` टैग और `@constructor` टैग के साथ परिभाषित किया जाता है। इस ब्लॉक के लिए प्रारूप एक समूची फ़ंक्शन के प्रारूप के समान होता है, क्लास का नाम `@class` टैग के साथ परिभाषित किया जाना चाहिए और `@constructor` टैग इस बात को सूचित करेगा कि क्लास में एक कंस्ट्रक्टर फ़ंक्शन है। `p5.Color` क्लास के लिए नीचे उदाहरण देखें:\n\n```\n/**\n * एक वर्ण को वर्णन करने के लिए एक क्लास। प्रत्येक `p5.Color` ऑब्जेक्ट रंग मोड\n * और स्तर की अधिकतम जो कि उसके निर्माण के दौरान सक्रिय थे। ये मान हैं\n * ऑब्जेक्ट के निर्माण में पारित विशेषताओं का व्याख्या करने के लिए उपयोग किए जाते हैं। वे\n * आउटपुट प्रारूपिकरण की भी निर्धारित करते हैं जैसे कि जब\n * <a href=\"#/p5/saturation\">saturation()</a> is called.\n *\n * रंग को आंतरिक रूप से एक आदर्श RGBA मानों की एक सरणी के रूप में संग्रहीत किया जाता है, जो 0 से 1 तक नॉर्मलाइज़ किया गया है। ये मान उपयोग किए जाते हैं\n * सबसे निकटतम स्क्रीन रंगों की गणना करने के लिए, जो 0 से 255 तक के RGBA स्तर होते हैं। स्क्रीन रंग\n * प्रेषित किए जाते हैं रेंडरर को।\n *\n * जब विभिन्न रंग प्रतिनिधित्वों की गणना की जाती है, तो परिणाम को प्रदर्शन के लिए कैश किया जाता है\n * प्रदर्शन। ये मान नॉर्मलाइज़ किए गए, फ़्लोटिंग-पॉइंट संख्याएँ हैं।\n *\n * <a href=\"#/p5/color\">color()</a> is the recommended way to create an instance\n * of this class.\n *\n * @class p5.Color\n * @constructor\n * @param {p5} [pInst] pointer to p5 instance.\n *\n * @param {Number[]|String} vals an array containing the color values\n * for red, green, blue and alpha channel\n * or CSS color.\n */\n```\n\n## संदर्भ उत्पन्न करना और पूर्वावलोकन करना\n\np5.js रिपॉजिटरी इस तरह से सेट अप किया गया है कि आपको p5.js वेबसाइट को बिल्ड और चलाने की आवश्यकता न होने पर भी संदर्भ को उत्पन्न और पूर्वावलोकन कर सकते हैं।\n\n* स्रोत कोड में संदर्भ टिप्पणियों से संदर्भ उत्पन्न करने का मुख्य आदेश निम्नलिखित कमांड को चलाना है। \n\n```\nnpm run docs\n```\n\nयह आवश्यक पूर्वावलोकन फ़ाइलें और मुख्य `docs/reference/data.json` फ़ाइल को उत्पन्न करेगा, जो समान फ़ाइल (संक्षेपन के बाद) है जो वेबसाइट पर संदर्भ पृष्ठ को प्रस्तुत करने के लिए उपयोग किया जाएगा।\n\n* संदर्भ पर निरंतर कार्य के लिए आप निम्न कमांड चला सकते हैं।\n\n```\nnpm run docs:dev\n```\n\nयह प्रस्तुत किए गए संदर्भ का एक लाइव पूर्वावलोकन लॉन्च करेगा जो हर बार आपके द्वारा परिवर्तन करने पर अपडेट हो जाएगा (आपको परिवर्तन करने के बाद उन्हें प्रदर्शित होते देखने के लिए पृष्ठ को ताज़ा करना होगा)। यह उपयोगी है, विशेष रूप से ब्राउज़र में चल रहे उदाहरण कोड का पूर्वावलोकन करने के लिए।\n\n* मुख्य टेम्पलेट फ़ाइलें `docs/` फ़ोल्डर में संग्रहित हैं और अधिकांश मामलों में, आपको इस फ़ोल्डर में फ़ाइलों में सीधे परिवर्तन नहीं करने चाहिए, केवल नए संपत्ति फ़ाइलों को `docs/yuidoc-p5-theme/assets` फ़ोल्डर में जोड़ने के लिए।\n\n## अगले कदम\n\nसंदर्भ प्रणाली के अतिरिक्त विवरण के लिए, आप [JSDoc](https://jsdoc.app/) और [YUIDoc](https://yui.github.io/yuidoc/) के दस्तावेज़ को देख सकते हैं।\n\nसंदर्भ से संबंधित मुद्दों के उदाहरण के लिए, [#6519](https://github.com/processing/p5.js/issues/6519/) और [#6045](https://github.com/processing/p5.js/issues/6045/) पर नज़र डालें। [योगदानकर्ता दिशानिर्देश](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md) दस्तावेज़ भी एक अच्छा स्थान है शुरू करने के लिए।\n"},"स्टीवर्ड दिशानिर्देश\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* p5.js में योगदान को प्रबंधित और समीक्षा करने के तरीके के बारे में जानें। */}\n\n\n\nचाहे आप हाल ही में हमारे साथ स्टीवर्ड के रूप में शामिल हुए हों, p5.js के अनुभवी रखरखावकर्ता हों, या कहीं बीच में हों, यह गाइड जानकारी के साथ-साथ उन सुझावों और ट्रिक्स को शामिल करता है जो आपको p5.js में प्रभावी योगदान देने में मदद करेगा। यहां लिखा गया अधिकांश दिशानिर्देश हैं, अगर कुछ और नहीं बताया गया है, तो इसका अर्थ है कि आप यहां दिखाए गए अभ्यासों को अपने काम के लिए अनुकूल बना सकते हैं।\n\n## विषय सूची\n\n* [समस्याएँ](../steward_guidelines.md#समस्याएँ/)\n\n * [बग रिपोर्ट](../steward_guidelines.md#बग-रिपोर्ट/)\n * [सुविधा अनुरोध](../steward_guidelines.md#सुविधा-अनुरोध/)\n * [सुविधा विस्तार](../steward_guidelines.md#सुविधा-विस्तार/)\n * [चर्चा](../steward_guidelines.md#चर्चा/)\n\n* [पुल-रिक्वेस्ट](../steward_guidelines.md#पुल-रिक्वेस्ट/)\n\n * [सरल सुधार](../steward_guidelines.md#सरल-सुधार/)\n * [बग फ़िक्स](../steward_guidelines.md#बग-फ़िक्स/)\n * [नई सुविधा/सुविधा वृद्धि](../steward_guidelines.md#नई-सुविधासुविधा-वृद्धि/)\n * [डिपेंडेबॉट](../steward_guidelines.md#डिपेंडेबॉट/)\n\n* [निर्माण प्रक्रिया](../steward_guidelines.md#निर्माण-प्रक्रिया/)\n\n * [मुख्य निर्माण कार्य](../steward_guidelines.md#मुख्य-निर्माण-कार्य/)\n * [विविध कार्य](../steward_guidelines.md#विविध-कार्य/)\n\n* [युक्तियाँ और ट्रिक्स](../steward_guidelines.md#युक्तियाँ-और-ट्रिक्स/)\n\n * [उत्तर टेम्पलेट](../steward_guidelines.md#उत्तर-टेम्पलेट/)\n * [गिटहब सीएलआई](../steward_guidelines.md#गिटहब-सीएलआई/)\n * [सूचनाओं का प्रबंधन](../steward_guidelines.md#सूचनाओं-का-प्रबंधन/)\n\n***\n\n## समस्याएँ\n\nहम अधिकांश स्रोत कोड योगदानों को एक समस्या के साथ शुरू करने की प्रोत्साहना करते हैं, क्योंकि समस्या वह स्थान हैं जहां अधिकांश चर्चाएं होंगी। किसी मुद्दे की समीक्षा करते समय उठाए जाने वाले कदम इस बात पर निर्भर करेंगे कि यह किस प्रकार का मुद्दा है। रेपो विभिन्न प्रकार की समस्याओं को बेहतर ढंग से व्यवस्थित करने और समस्या लेखकों को अपनी समस्याओं के बारे में सभी प्रासंगिक जानकारी प्रदान करने के लिए [गिटहब समस्या टेम्पलेट](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) का उपयोग करती है। समस्या की समीक्षा का पहला कदम अक्सर भरे गए टेम्पलेट को देखना होगा और यह तय करना होगा कि क्या आपको अतिरिक्त जानकारी की आवश्यकता है (जैसे कि कुछ क्षेत्र भरे नहीं गए हों या गलत टेम्पलेट का प्रयोग किया गया हो)।\n\n### बग रिपोर्ट\n\nबग रिपोर्ट समस्याओं को \"बग मिला\" (`Found a bug`) समस्या टेम्पलेट का प्रयोग करना चाहिए। बग रिपोर्ट का समाधान करने के लिए निम्नलिखित कार्यक्रम सामान्य होता है:\n\n1. बग को अनुकृत करें\n * टेम्प्लेट का लक्ष्य समीक्षक को संबंधित बग को दोहराने का प्रयास करने के लिए पर्याप्त जानकारी प्रदान करना है।\n * यदि रिपोर्ट किया गया बग वर्तमान रेपो के लिए प्रासंगिक नहीं है (p5.js, p5.js-वेबसाइट, या अन्यत्र):\n * यदि आपके पास संबंधित रेपो तक पहुंच है, तो इसे स्थानांतरित करें।\n * अन्यथा, एक टिप्पणी छोड़ें जिसमें बग रिपोर्ट को कहां फाइल किया जाना चाहिए (सीधा लिंक सहित) और समस्या को बंद करें।\n * बग रिपोर्ट की समीक्षा करने में पहला कदम यह देखना है कि बग प्रतिकृति के लिए पर्याप्त जानकारी प्रदान की गई है या नहीं, और यदि हां, तो वर्णित अनुसार बग को दोहराने का प्रयास करें।\n2. अगर बग प्रतिरूपित किया जा सकता है:\n * किसी विशेष बग को सही करने का सबसे अच्छा तरीका निर्धारित करने के लिए कुछ चर्चा की जा सकती है। कभी-कभी, यह सीधा हो सकता है; कभी-कभी, यह कठिन हो सकता है। कृपया इस निर्णय को एक मामला-दर-मामला आधार पर लेते समय [p5.js' डिज़ाइन सिद्धांतों](../design_principles/) का उल्लेख करें।\n * यदि समस्या लेखक ने समस्या में इस संकेत किया है कि वे एक सुधार योगदान देने के लिए तत्पर हैं:\n * कॉमेंट छोड़कर समस्या को सुधारने के लिए समस्या लेखक को स्वीकृत करें और उन्हें समस्या के लिए असाइन करें। \"असाइनी (`Assignee`)\" के बगल में \"टोलिया (`cog button`)\" का उपयोग करें।\n * यदि समस्या लेखक कोई सुधार नहीं करना चाहते हैं:\n * बग प्रतिरूपित होने का स्वीकृति छोड़ें।\n * बग को स्वयं ठीक करने का प्रयास करें या बग को ठीक करने की आवश्यकता होने पर मदद की जरूरत के लिए `मदद चाहिए (help wanted)` लेबल जोड़ें।\n3. यदि बग प्रतिरूपित नहीं हो सकता है:\n * अअतिरिक्त जानकारी के लिए पूछें जो पहले से ही टेम्पलेट में प्रदान नहीं की गई है (p5.js संस्करण, ब्राउज़र संस्करण, ओएस संस्करण आदि)।\n * यदि आपका परीक्षण पर्याप्त नहीं है जो समस्या में रिपोर्ट किया गया है (उदाहरण के लिए, एक अलग ब्राउज़र या ओएस):\n * एक टिप्पणी छोड़ें कि आप अपने विशिष्ट पर्यावरण में प्रतिरूपित नहीं कर सकते हैं।\n * बग को प्रतिरूपित करने के लिए `मदद चाहिए (help wanted)` लेबल जोड़ें और समस्या को जिन निर्दिष्ट सेटअप के साथ प्रतिरूपित किया गया है, उनसे बग को प्रतिरूपित करने के लिए कहें।\n * कभी-कभी, बग केवल वेब संपादक के उपयोग करते समय ही होते हैं और स्थानीय टेस्ट करते समय नहीं। इस मामले में, समस्या को [वेब संपादक रेपो](https://github.com/processing/p5.js-web-editor/) की ओर पुनर्निर्देशित किया जाना चाहिए।\n * यदि प्रतिरूपण बाद में संभव है, तो कदम 2 पर वापस जाएं।\n4. यदि बग उपयोगकर्ता द्वारा प्रदान किए गए कोड से आता है और p5.js के व्यवहार से नहीं:\n * यह निर्धारित करें कि क्या p5.js दस्तावेज़ीकरण, कोड कार्यान्वयन, या मित्रसंपर्क त्रुटि प्रणाली को सुधारा जा सकता है ताकि वही गलती फिर से न हो।\n * कृपया आगे किसी भी परिवर्तन के लिए [मंच](https://discourse.processing.org/) या [डिस्कॉर्ड](https://discord.com/invite/SHQ8dH25r9/) पर और अधिक प्रश्न अद्यतन करें और यदि p5.js में कोई अधिक परिवर्तन नहीं करना है, तो समस्या को बंद करें।\n\n### सुविधा अनुरोध\n\nसुविधा अनुरोध \"नई सुविधा अनुरोध\" समस्या टेम्पलेट का उपयोग करनी चाहिए। सुविधा अनुरोध को सम्बोधित करने के लिए निम्नलिखित वर्कफ़्लो सामान्य है:\n\n1. पहुंच बढ़ाने के लिए p5.js की प्रतिबद्धता के हिस्से के रूप में, एक सुविधा अनुरोध को यह मामला बनाना चाहिए कि यह उन समुदायों तक p5.js की पहुंच कैसे बढ़ाता है जो ऐतिहासिक रूप से क्षेत्र में हाशिए पर हैं। अधिक विवरण [यहां](../access/) उपलब्ध हैं।\n * यदि कोई सुविधा अनुरोध \"पहुंच बढ़ाने\" क्षेत्र को पर्याप्त रूप से भरा नहीं है, तो आप समस्या लेखक से सुविधा कैसे पहुंच बढ़ाती है, इसके बारे में पूछ सकते हैं।\n * सुविधा की पहुंच का बयान किसी अलग समुदाय सदस्य, समस्या समीक्षकों सहित, द्वारा प्रदान किया जा सकता है।\n2. नई सुविधा अनुरोध को निम्नलिखित मानकों के आधार पर समाविष्टि के लिए मूल्यांकन किया जा सकता है।\n * क्या सुविधा परियोजना के धारा और [डिज़ाइन सिद्धांतों](../design_principles/) में फिट है?\n * उदाहरण के लिए, एक नई आकृति जोड़ने का अनुरोध किया जा सकता है, लेकिन ब्राउज़र-आधारित आईओटी प्रोटोकॉल को ग्रहण करने का अनुरोध असंगत होगा।\n * सम्पूर्ण रूप से, p5.js का धारा संक्षिप्त होना चाहिए ताकि अनियमित उपयोग की सुविधाओं से बचा जा सके।\n * यदि कोई सुविधा p5.js के धारा में फिट नहीं होती है, तो सुझाव दें कि समस्या लेखक सुविधा को एक ऐड-ऑन पुस्तकालय के रूप में अमल करें।\n * यदि स्पष्ट नहीं है कि यह फिट है या नहीं, तो एक प्रमाण-प्रतिसाद के रूप में एक ऐड-ऑन पुस्तकालय बनाने का सुझाव देना एक अच्छा विचार हो सकता है। यह प्रयोक्ताओं को सुविधा का उपयोग करने का एक तरीका देता है, इसका उपयोग और महत्ता का एक अधिक स्पष्ट उदाहरण प्रदान करता है, और पूरी तरह से एक स्थायी समाधान की तरह पूरा नहीं होना चाहिए। यह परियोजना की मूल धारा में बाद में शामिल किया जा सकता है।\n * क्या इस सुविधा के कारण ब्रेकिंग परिवर्तन होने की संभावना है?\n * क्या यह मौजूदा p5.js फ़ंक्शंस और वेरिएबल्स के साथ विरोध करेगा?\n * क्या यह p5.js के लिए पहले से लिखे गए विशिष्ट रेखाचित्रों के साथ टकराव करेगा?\n * निम्नलिखित सुविधाएं जो संघर्ष पैदा कर सकती हैं जैसा कि उपरोक्त किए गए वे ब्रेकिंग बदलाव के रूप में गिना जाता है। [प्रमुख संस्करण रिलीज](https://docs.npmjs.com/about-semantic-versioning/) के बिना, हमें p5.js में ब्रेकिंग बदलाव नहीं करने चाहिए।\n * क्या प्रस्तावित नई सुविधा को पहले से p5.js में मौजूद सुविधाओं का उपयोग करके, एक्सिस्टिंग साधारित जावास्क्रिप्ट कोड या मौजूदा सरल उपयोगिता वाली पुस्तकालयों का उपयोग करके प्राप्त किया जा सकता है?\n * उदाहरण के लिए, `join([\"हैलो\", \"वर्ल्ड!\"])` जैसी स्ट्रिंग्स की एक सरणी में शामिल होने के लिए एक p5.js फ़ंक्शन प्रदान करने के बजाय, मूल जावास्क्रिप्ट `[\"हैलो\", \"वर्ल्ड!\"].join()` को प्राथमिकता दी जानी चाहिए।\n3. यदि पहुंच की आवश्यकता और अन्य विचार पूरे हो गए हैं, तो पुल रिक्वेस्ट की दिशा में काम शुरू करने से पहले कम से कम दो प्रबंधकों या अनुरक्षकों को नई सुविधा के अनुरोध को मंजूरी देनी होगी। नई सुविधाओं के पुल रिक्वेस्ट की समीक्षा प्रक्रिया नीचे विवरणित है।\n\n### सुविधा विस्तार\n\nसुविधा विस्तार समस्याओं को \"मौजूदा सुविधा विस्तार\" समस्या टेम्प्लेट का उपयोग करना चाहिए। प्रक्रिया नई सुविधा अनुरोधों के साथ बहुत समान है। नई सुविधा अनुरोध और सुविधा विस्तार के बीच का अंतर कभी-कभी कम हो सकता है। सुविधा विस्तार मुख्य रूप से p5.js के मौजूदा कार्यों के साथ संबंधित होता है जबकि नई सुविधा अनुरोध पूरी तरह से नए कार्यों को जोड़ने का अनुरोध कर सकता है।\n\n1. नई सुविधा अनुरोधों की तरह, सुविधा विस्तार को केवल उन्हें स्वीकार किया जाना चाहिए अगर वे p5.js के पहुँच को बढ़ाते हैं। कृपया [ऊपर दिए गए खंड](../steward_guidelines.md#सुविधा-अनुरोध/) का बिंदु 1 देखें।\n\n2. सुविधा विस्तार के लिए समावेशन मानदंड सुविधा अनुरोधों के समान हैं, लेकिन संभावित ब्रेकिंग परिवर्तनों पर विशेष ध्यान दिया जाना चाहिए।\n\n * मौजूदा कार्यों को संशोधित करते समय, सभी पिछले मान्य और दस्तावेजित कार्य साकार तरीके से बर्ताव करने चाहिए।\n\n3. पुल रिक्वेस्ट की ओर काम शुरू करने से पहले फीचर संवर्द्धन को कम से कम एक प्रबंधक या अनुरक्षक द्वारा अनुमोदित किया जाना चाहिए। सुविधा विस्तार के लिए पुल रिक्वेस्ट समीक्षा प्रक्रिया नीचे विवरणित है।\n\n### चर्चा\n\nइस प्रकार की समस्या के पास एक न्यूनतम टेम्प्लेट (\"चर्चा\" (discussion)) होता है और इसका उपयोग विषय के चारों ओर संवाद जमा करने के लिए किया जाना चाहिए, जो बाद में किसी विशेष मुद्दे में एकत्रित किया जाता है, जैसे कि एक सुविधा अनुरोध। इन प्रकार की चर्चा समस्याओं को समाप्त होने पर बंद किया जा सकता है और परिणामी अधिक विशिष्ट समस्याएं बना दी गई हैं:\n\n* यदि कोई समस्या चर्चा के रूप में खोला गया है, उदाहरण के लिए, एक बग रिपोर्ट होना चाहिए, तो सही लेबल लागू किया जाना चाहिए और \"चर्चा\" लेबल हटा दिया जाना चाहिए। यदि पहले से शामिल नहीं है तो बग के बारे में अतिरिक्त जानकारी भी लेखक से मांगी जानी चाहिए।\n* यदि कोई समस्या चर्चा के रूप में खोला गया है, लेकिन स्रोत कोड योगदान के लिए प्रासंगिक नहीं है या अन्यथा गिटहब रिपॉजिटरी/योगदान प्रक्रिया/योगदान समुदाय के लिए प्रासंगिक नहीं है, तो उन्हें फ़ोरम या डिस्कॉर्ड पर पुनर्निर्देशित किया जाना चाहिए और मुद्दा बंद कर दिया जाना चाहिए।\n* यदि लागू हो, तो चर्चा के लिए अतिरिक्त लेबल जोड़े जा सकते हैं ताकि एक नजर में यह देखा जा सके कि यह किस प्रकार की चर्चा है।\n\n***\n\n## पुल रिक्वेस्ट\n\nप्राय: p5.js रिपॉजिट्रीज में कोड योगदानों का अधिकांश पुल रिक्वेस्ट के माध्यम से होता है। प्रबंधकों और अनुरक्षकों के पास रिपॉजिटरी तक पहुंच हो सकती है, लेकिन फिर भी उन्हें कोड का योगदान करते समय उसी मुद्दे> पुल रिक्वेस्ट> समीक्षा प्रक्रिया का पालन करने के लिए प्रोत्साहित किया जाता है। यहां पुल रिक्वेस्ट की समीक्षा के चरण दिए गए हैं:\n\n* पुल रिक्वेस्ट टेम्पलेट [यहाँ मिलेगा](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md)।\n* लगभग सभी पुल रिक्वेस्टों में संबंधित समस्याएं को पहले खोला और चर्चा की जानी चाहिए, जिसका अर्थ है कि किसी भी प्रबंधक या अनुरक्षक द्वारा पुल रिक्वेस्ट की समीक्षा करने से पहले प्रासंगिक [इश्यू वर्कफ़्लो](../steward_guidelines.md#समस्याएँ/) का पहले पालन किया जाना चाहिए।\n * एकमात्र उदाहरण जहां यह लागू नहीं होता है, वे बहुत मामूली टाइपो फिक्स होते हैं, जिनके लिए एक खुली समस्या की आवश्यकता नहीं होती है और रेपो तक मर्ज पहुंच वाले किसी भी व्यक्ति द्वारा विलय किया जा सकता है, भले ही वे किसी विशेष क्षेत्र के प्रबंधक न हों।\n * हालांकि यह अपवाद मौजूद है, हम इसे व्यवहार में तभी लागू करेंगे जब योगदानकर्ताओं को पहले नए समस्याएं खोलने के लिए प्रोत्साहित किया जाएगा। दूसरे शब्दों में, यदि इस बारे में संदेह है कि यह अपवाद लागू होता है या नहीं, तो फिर भी एक समस्या खोलें।\n* यदि कोई पुल रिक्वेस्ट संदर्भित समस्या को पूरी तरह से हल नहीं करता है, तो आप मूल पोस्ट को संपादित कर सकते हैं और `Resolves #OOOO` को `Addresses #OOOO` में बदल सकते हैं ताकि पुल रिक्वेस्ट विलय होने पर यह स्वचालित रूप से मूल समस्या को बंद न करे।\n\n### सरल सुधार\n\nसरल सुधार, जैसे कि छोटी टाइपो फिक्स, को मर्ज एक्सेस वाले किसी भी व्यक्ति द्वारा सीधे मर्ज किया जा सकता है। यह सुनिश्चित करने के लिए कि स्वचालित सीआई परीक्षण पास हो गया है, पुल रिक्वेस्ट \"फ़ाइलें परिवर्तित (files changed)\" टैब पर जांचें।\n\n\n\n\n\n### बग फ़िक्स\n\n1. बग फ़िक्स का समीक्षा उस संबंधित क्षेत्र के स्टीवर्ड द्वारा किया जाना चाहिए, आदर्शतः उसी जिसने संदर्भित मुद्दे को फ़िक्स के लिए स्वीकृति दी थी।\n\n2. पुल रिक्वेस्ट \"फ़ाइलें बदली गईं\" टैब का उपयोग प्रारंभ में यह समीक्षा करने के लिए किया जा सकता है कि समस्या चर्चा में बताए अनुसार समाधान लागू किया गया है या नहीं।\n\n3. पुल रिक्वेस्ट को संभावनापूर्वक और संबंधित होने पर स्थानीय रूप से परीक्षण किया जाना चाहिए। यदि संभव हो, तो गिटहब CLI कुछ प्रक्रिया को सुव्यवस्थित करने में मदद कर सकता है। (यहाँ [टिप्स और ट्रिक्स](../steward_guidelines.md#युक्तियाँ-और-ट्रिक्स/) में अधिक देखें).\n * [ ] फ़िक्स को मूल समस्या को पर्याप्त रूप से संबोधित करना चाहिए।\n * [ ] फ़िक्स को किसी भी मौजूदा व्यवहार में परिवर्तन नहीं करना चाहिए जब तक मूल समस्या में सहमति न हो।\n * [ ] फ़िक्स पर p5.js पर कोई महत्वपूर्ण प्रभाव नहीं होना चाहिए।\n * [ ] फ़िक्स पर p5.js की पहुँच कोई प्रभाव नहीं होना चाहिए।\n * [ ] फ़िक्स को जावास्क्रिप्ट कोडिंग के आधुनिक मानक का उपयोग करना चाहिए।\n * [ ] फ़िक्स को सभी स्वचालित परीक्षणों को पार करना चाहिए और यदि योग्य हो, तो नए परीक्षण शामिल करना चाहिए।\n\n4. यदि कोई अतिरिक्त परिवर्तन आवश्यक हो, तो पंक्ति टिप्पणियाँ यहाँ जोड़ी [जानी चाहिए](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request)।\n\n * एक सुझाव ब्लॉक का उपयोग किया जा सकता है विशिष्ट परिवर्तनों का सुझाव देने के लिए:\n \\\n \\\n \n\n * यदि कई परिवर्तन की आवश्यकता है, तो एकाधिक बार एकल-लाइन टिप्पणियाँ न जोड़ें। बजाय इसके, कई-लाइन टिप्पणियाँ और एक ही परिवर्तन के लिए एक मांग करने के लिए यहाँ दस्तावेज़ की प्रक्रिया का [पालन करें](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/)।\n\n * यदि लाइन टिप्पणियाँ स्पष्टीकरण या चर्चा के लिए हैं, तो \"अनुरोध परिवर्तन\" की बजाय \"टिप्पणी\" का चयन करें:\\\n \n\n5. एक बार जब पुल रिक्वेस्ट की समीक्षा हो जाती है और किसी अतिरिक्त बदलाव की आवश्यकता नहीं होती है, तो एक प्रबंधक पिछले चरण में \"स्वीकृत\" विकल्प चुनकर, अतिरिक्त टिप्पणियों के साथ या उसके बिना, पुल रिक्वेस्ट को \"स्वीकृत\" के रूप में चिह्नित कर सकता है। यदि वांछित हो तो प्रबंधक या तो किसी अन्य प्रबंधक या अनुरक्षक द्वारा अतिरिक्त समीक्षा का अनुरोध कर सकता है, यदि उनके पास मर्ज की पहुंच है तो पुल रिक्वेस्ट का विलय कर सकता है, या अनुरक्षक से विलय का अनुरोध कर सकता है।\n\n6. @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) बॉट को बुलाया जाना चाहिए ताकि `README.md` फ़ाइल में नए योगदानकर्ताओं को योगदानकर्ताओं की सूची में जोड़ा जा सके। `[योगदान के प्रकार]` के स्थान पर हर प्रकार का योगदान निर्दिष्ट किया जा सकता है, योगदान के उपलब्ध प्रकार की पूरी सूची ऊपर दी गई लिंक में मिलेगी।\n\n`@all-contributors` `please` `add` `@[गिटहब हैंडल]` `for` `[योगदान के प्रकार]`\n\n### नई सुविधा/सुविधा वृद्धि\n\nनई सुविधा या सुविधा वृद्धि पुल रिक्वेस्ट के लिए परिक्रिया बग निवारण के साथ मिलती जुलती है, केवल एक विशेष अंतर है:\n\n* एक नई सुविधा/सुविधा वृद्धि पुल रिक्वेस्ट को मर्ज करने से पहले कम से कम दो स्टीवर्ड या रक्षक द्वारा समीक्षित और मंजूर किया जाना चाहिए।\n\n### डिपेंडेबॉट\n\nडिपेंडेबॉट पुल रिक्वेस्ट आमतौर पर केवल रिपो व्यवस्थापकों को ही दिखाई जाती हैं, इसलिए यदि यह आपके लिए लागू नहीं होता है, तो कृपया इस खंड को छोड़ें।\n\n* यदि संस्करण अद्यतन एक [सीमवर](https://semver.org/) पैच संस्करण है और स्वचालित सीआई परीक्षण पास हो गया है, तो डिपेंडेबॉट पुल रिक्वेस्ट को सीधे मर्ज किया जा सकता है।\n* स्वचालित सीआई परीक्षण पास होने पर मामूली सेमेस्टर संस्करण परिवर्तनों वाले डिपेंडाबोट पुल रिक्वेस्ट को आमतौर पर सीधे मर्ज किया जा सकता है। अद्यतन निर्भरता के चेंजलॉग पर त्वरित जांच की अनुशंसा की जाती है।\n* प्रमुख सेमेस्टर संस्करण परिवर्तनों के साथ डिपेंडाबॉट पुल रिक्वेस्ट संभवतः निर्माण प्रक्रिया या p5.js कार्यक्षमता को प्रभावित करेंगे। इस मामले में, यदि संभव हो तो समीक्षक को वर्तमान संस्करण से लक्ष्य संस्करण तक चेंजलॉग की समीक्षा करने के लिए प्रोत्साहित किया जाता है। उनसे यह भी अपेक्षा की जाती है कि वे स्थानीय स्तर पर पुल रिक्वेस्ट का परीक्षण करें ताकि यह सुनिश्चित किया जा सके कि सभी प्रक्रियाएं कार्य कर रही हैं, और निर्भरता में संभावित ब्रेकिंग परिवर्तनों के कारण कोई भी आवश्यक परिवर्तन करें।\n * कई निर्भरताओं ने मुख्य संस्करण संख्याओं को केवल इसलिए बढ़ाया है क्योंकि वे बहुत पुराने संस्करणों के लिए आधिकारिक समर्थन को हटा देते हैं। बहुत से मामलों में, मुख्य संस्करण परिवर्तन निर्भरता एपीआई परिवर्तन से होने वाले तोड़फोड़ को नहीं अवश्य मतलब है।\n\n***\n\n## निर्माण प्रक्रिया\n\nयह खंड सामान्य निर्माण सेटअप या आदेश का विवरण नहीं करेगा, बल्कि विवरणों के पीछे क्या हो रहा है उसके बारे में जानकारी देगा। कृपया अधिक विस्तृत निर्माण जानकारी के लिए [योगदानकर्ता दिशानिर्देश](../contributing_documentation.md#🗯-संदर्भ-के-लिए-योगदान-करें/) देखें।\n\n`Gruntfile.js` फ़ाइल p5.js के मुख्य निर्माण परिभाषणों को संबोधित करती है। पुस्तकालय और दस्तावेज़ीकरण निर्माण के लिए उपयोग किए जाने वाले विभिन्न उपकरणों में `Grunt`, `Browserify`, `YUIDoc`, `ESLint`, `Babel`, `Uglify`, और `Mocha` शामिल हैं। यह हमारे लिए `default (डिफ़ॉल्ट)` टास्क के साथ शुरू करने और वहां से पिछले काम करने में मददगार हो सकता है। इस विवरण के दौरान `Gruntfile.js` दस्तावेज़ को खोलना भी उपयोगी हो सकता है।\n\n### मुख्य निर्माण कार्य\n\n```\ngrunt.registerTask('default', ['lint', 'test']);\n```\n\nजब हम `grunt` या `npm` स्क्रिप्ट npm `test` चलाते हैं, तो हम लिंट फिर परीक्षण के रूप में डिफ़ॉल्ट टास्क चलाते हैं।\n\n#### `lint` कार्य\n\n```\ngrunt.registerTask('lint', ['lint:source', 'lint:samples']);\n```\n\nलिंट कार्य में दो उप-कार्य होते हैं: `lint:source` और `lint:samples`। `lint:source` को तीन और उप-कार्यों में विभाजित किया गया है `eslint:build`, `eslint:source`, और `eslint:test`, जो ESLint का उपयोग निर्माण स्क्रिप्ट, सोर्स कोड, और परीक्षण स्क्रिप्ट की जाँच करने के लिए करता है।\n\n`lint:samples` कार्य पहले `yui` कार्य को चलाएगा जिसमें स्वयं `yuidoc: prod`, `clean:reference`, और `minjson` शामिल हैं, जो स्रोत कोड से दस्तावेज़ को JSON दस्तावेज़ में परिवर्तित करते हैं, पिछले चरण से अप्रयुक्त फ़ाइलें हटाते हैं, और उत्पन्न JSON फ़ाइल को क्रमशः `data.min.json` में छोटा करते हैं।\n\n`lint:samples` में अगला है `eslint-samples:source`, जो एक कस्टम लिखित कार्य है जिसकी परिभाषा [tasks/build/eslint-samples.js](../tasks/build/eslint-samples.js) में है; यह दस्तावेज़ीकरण उदाहरण कोड की जांच करने के लिए ESLint चलाएगा ताकि यह सुनिश्चित किया जा सके कि वे बाकी p5.js के समान कोडिंग कन्वेंशन का पालन करते हैं (`yui` यहां पहले चलाया गया है क्योंकि हमें उदाहरणों को लिंट करने से पहले JSON फ़ाइल बनाने की आवश्यकता है)।\n\n#### `test` कार्य\n\n```js\ngrunt.registerTask(\"test\", [\"build\", \"connect:server\", \"mochaChrome\", \"mochaTest\", \"nyc:report\"]);\n```\n\nसबसे पहले `test` तहत `build` कार्य को देखते हैं।\n\n```js\ngrunt.registerTask(\"build\", [\"browserify\", \"browserify:min\", \"uglify\", \"browserify:test\"]);\n```\n\n`browserify` से शुरू होने वाले कार्य [tasks/build/browserify.js](../tasks/build/browserify.js) में परिभाषित होते हैं। इनमें सभी मुख्य कदम होते हैं जो बहुत से उपयोगकर्ता कोड फ़ाइलों को संग्रहीत और एक में बनाने के लिए हैं:\n\n* `browserify` p5.js का निर्माण कार्य है जबकि `browserify:min` अगले कदम में संक्षिप्त किए जाने वाले एक बीच की फ़ाइल को बनाता है। `browserify` और `browserify:min` के बीच अंतर यह है कि `browserify:min` FES के लिए कार्यात्मक नहीं होने वाले डेटा को नहीं समाहित करता।\n* `uglify` `browserify:min` की उत्पादित फ़ाइल को छोटा करता है और अंतिम `p5.min.js` बनाता है (इस कदम की विन्यासिकता मुख्य `Gruntfile.js` में है)।\n* `browserify:test` का उपयोग पूर्ण p5.js के समान संस्करण बनाने के लिए किया जाता है, सिवाय परीक्षण कोड कवरेज रिपोर्टिंग के लिए जोड़े गए कोड को छोड़कर ([Istanbul](https://istanbul.js.org/) का उपयोग करके) को बाहर रखा गया है।\n\nसबसे पहले, `node.js` के `fs.readFileSync()` का उपयोग करके पढ़े गए कोड को `brfs-babel` का उपयोग करके फ़ाइल की वास्तविक सामग्री से बदल दिया जाता है। इसका उपयोग मुख्य रूप से WebGL कोड द्वारा अलग-अलग फ़ाइलों के रूप में लिखे गए स्रोत कोड से इनलाइन शेडर कोड के लिए किया जाता है।\n\nइसके बाद, `package.json` में परिभाषित \\[ब्राउजर्सलिस्ट] ([https://browsersl.ist/](https://browsersl.ist/)) आवश्यकता से मेल खाने के लिए `node_modules` से स्रोत कोड और सभी निर्भरताओं को `Babel` का उपयोग करके ट्रांसपाइल्ड किया जाता है। यह यह भी सुनिश्चित करता है कि सभी ES6 `import` विवरण CommonJS `require()` कथनों में परिवर्तित हो जाते हैं जिन्हें ब्राउज़र समझता है। यह हमें ब्राउज़र संगतता के बारे में चिंता किए बिना ES6 और उससे आगे उपलब्ध नए सिंटैक्स का उपयोग करने में भी सक्षम बनाता है।\n\nबंडलिंग के बाद, लेकिन बंडल कोड को फ़ाइल में लिखे जाने से पहले, कोड को `pretty-fast` के माध्यम से पारित किया जाता है (यदि कोड को छोटा नहीं किया जाना है, तो इसे साफ किया जाना चाहिए ताकि अंतिम स्वरूपण थोड़ा अधिक सुसंगत हो)। ऐसा इसलिए किया जाता है क्योंकि हम आशा करते हैं कि यदि वांछित हो तो p5.js स्रोत कोड को पढ़ा और निरीक्षण किया जा सकता है।\n\nयहां कुछ छोटे विस्तृत कदम छोड़े गए हैं; आप नीचे दिए गए ब्राउज़रीफ़ाई निर्माण परिभाषण फ़ाइल की जांच करने के लिए सब कुछ को और करीब से देख सकते हैं।\n\n```\nconnect:server\n```\n\nयह कदम स्थानीय सर्वर को शुरू करता है जो परीक्षण फ़ाइलों और निर्मित स्रोत कोड फ़ाइलों को होस्ट करता है ताकि क्रोम में स्वचालित परीक्षण चलाया जा सके।\n\n```\nmochaChrome\n```\n\nयह कदम [tasks/test/mocha-chrome.js](../tasks/test/mocha-chrome.js) में परिभाषित है। यह `Puppeteer` का उपयोग करता है जो `Chrome` का एक हेडलेस संस्करण शुरू करता है जिसे रिमोट नियंत्रित किया जा सकता है, और `./test` फ़ोल्डर में `HTML` फ़ाइलों के साथ जुड़े परीक्षणों को चलाता है, जिसमें लाइब्रेरी के अनमिनिफ़ाइड और मिनिफ़ाइड संस्करणों को यूनिट परीक्षण सुइटों और सभी संदर्भ उदाहरणों के साथ परीक्षण किया जाता है।\n\n```\nmochaTest\n```\n\nयह चरण `mochaChrome` से भिन्न है क्योंकि यह `Chrome` के बजाय `Node.js` में चलाया जाता है और लाइब्रेरी में केवल सुविधाओं के एक छोटे उपसमूह का परीक्षण करता है। p5.js में अधिकांश सुविधाओं के लिए ब्राउज़र वातावरण की आवश्यकता होगी, इसलिए परीक्षणों के इस सेट का विस्तार केवल तभी किया जाना चाहिए जब नए परीक्षणों को वास्तव में ब्राउज़र वातावरण की आवश्यकता न हो।\n\n```\nnyc:report\n```\n\nअंत में, सभी निर्माण और परीक्षण पूरे होने के बाद, यह चरण परीक्षण कवरेज रिपोर्ट एकत्र करेगा। तुलना के लिए, `mochaChrome` लाइब्रेरी के पूर्ण संस्करण का परीक्षण कर रहा था और परीक्षण कवरेज डेटा को कंसोल पर प्रिंट कर रहा था। p5.js के लिए परीक्षण कवरेज मुख्य रूप से निगरानी और कुछ अतिरिक्त डेटा बिंदुओं के लिए है; 100% परीक्षण कवरेज प्राप्त करना कोई लक्ष्य नहीं है।\n\nऔर यही `Gruntfile.js` कॉन्फ़िगरेशन में डिफ़ॉल्ट कार्य को कवर करता है!\n\n### विविध कार्य\n\nसभी कदमों को `npx grunt [कदम]` के साथ सीधे चलाया जा सकता है। ऊपर नहीं चित्रित कुछ कार्य हैं जो ऊपर नहीं शामिल हैं लेकिन कुछ विशेष प्रकार के मामलों में उपयोगी हो सकते हैं।\n\n```\ngrunt yui:dev\n```\n\nयह कार्य ऊपर बताए अनुसार दस्तावेज़ीकरण और लाइब्रेरी बिल्ड चलाएगा, और फिर एक वेब सर्वर शुरू करेगा जो वेबसाइट पर [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/) पर पाए गए संदर्भ पृष्ठ के समान संस्करण पेश करेगा। इसके बाद यह परिवर्तनों के लिए स्रोत कोड की निगरानी भी करेगा और दस्तावेज़ीकरण और लाइब्रेरी का पुनर्निर्माण भी करेगा।\n\n`grunt` `yui:dev` तब उपयोगी होता है जब आप इनलाइन दस्तावेज़ में संदर्भ पर काम कर रहे होते हैं। इस कमांड का उपयोग करने के बाद, आपको निर्मित फ़ाइलों को p5.js रिपॉजिटरी से स्थानीय p5.js-वेबसाइट रिपॉजिटरी में स्थानांतरित करने और हर बार बदलाव करने पर वेबसाइट को फिर से बनाने की ज़रूरत नहीं है; आप अपने ब्राउज़र में संदर्भ के इस थोड़े सरलीकृत संस्करण के साथ अपने परिवर्तनों का पूर्वावलोकन कर सकते हैं। इस तरह, आप अधिक आश्वस्त हो सकते हैं कि आपके परिवर्तन संभवतः वेबसाइट पर सही ढंग से दिखाई देंगे। ध्यान दें कि यह केवल इनलाइन दस्तावेज़ीकरण में संशोधन के लिए है; स्टाइलिंग और लेआउट सहित, संदर्भ पृष्ठ में परिवर्तन किए जाने चाहिए और वेबसाइट रिपॉजिटरी पर परीक्षण किया जाना चाहिए।\n\n```\ngrunt watch\ngrunt watch:main\ngrunt watch:quick\n```\n\n`watch` कार्य विभिन्न फ़ाइलों के लिए बदलावों की निगरानी करेंगे और कौन से फ़ाइलों में क्या परिवर्तन हुआ है, उस अनुसार संबंधित कार्यों को चलाएगे। ये सभी कार्य एक ही चीज़ करते हैं, जिसका दायरा अलग है।\n\n`watch` कार्य स्रोत कोड में परिवर्तनों का पता लगाने पर पूर्ण डिफ़ॉल्ट कार्य चलाने के समान सभी बिल्ड और परीक्षण चलाएगा।\n\n`watch:main` कार्य लाइब्रेरी निर्माण और परीक्षण चलाएगा लेकिन स्रोत कोड में परिवर्तनों का पता लगाने पर संदर्भ का पुनर्निर्माण नहीं करेगा।\n\n`watch:quick` कार्य केवल स्रोत कोड में परिवर्तनों का पता लगाने पर लाइब्रेरी बिल्ड चलाएगा।\n\nआप जिस पर काम कर रहे हैं उसके आधार पर, यहां सबसे न्यूनतम घड़ी कार्य चुनने से आप जब भी कुछ बदलाव करना चाहें तो मैन्युअल रूप से पुनर्निर्माण चलाने से बच सकते हैं।\n\n***\n\n## रिहाई प्रक्रिया\n\nकृपया रिलीज [`release_process.md`](../release_process/) देखें।\n\n***\n\n## युक्तियाँ और ट्रिक्स\n\nकभी-कभी, समीक्षा के लिए जितने भी जटिल पुल रिक्वेस्ट हैं, उन्हें स्थानीय रूप से परीक्षण करने के लिए गिट के जटिल कमांड की आवश्यकता हो सकती है। भाग्य से, गिटहब सीएलआई टूल इस प्रक्रिया और अधिक के साथ बहुत मदद कर सकता है।\n\n### उत्तर टेम्पलेट\n\nएक आसान गिटहब सुविधा जिसका आप उपयोग कर सकते हैं वह है [उत्तर टेम्पलेट](https://docs.github.com/en/get-started/writing-on-github/working-with-saveled-replies/about-saveled-replies/), जो समस्या\nया पुल रिक्वेस्टों का उत्तर लिखते समय उपयोग के लिए उपलब्ध है। ऊपर वर्णित कुछ वर्कफ़्लो में समान या बहुत समान उत्तरों के साथ समस्याएं या पुल रिक्वेस्ट का जवाब देने की आवश्यकता हो सकती है (प्रश्नों को फ़ोरम पर पुनर्निर्देशित करना, फिक्सिंग के लिए किसी समस्या को स्वीकार करना, आदि), और सहेजे गए उत्तरों का उपयोग करना इसे थोड़ा और अधिक कुशल बना सकता है।\n\nनीचे कुछ सहेजे गए उत्तर दिए गए हैं जिनका उपयोग p5.js अनुरक्षकों द्वारा किया जा रहा है। आप उन्हें स्वयं उपयोग कर सकते हैं या अपना खुद का बना सकते हैं!\n\n##### समापन: पुनरुत्पादन नहीं किया जा सकता\n\n> हम इसे पुन: पेश करने में सक्षम नहीं हैं, लेकिन यदि आप कोई कोड नमूना प्रदान कर सकते हैं जो समस्या को दर्शाता है तो कृपया बेझिझक इसे दोबारा खोलें। धन्यवाद!\n\n##### समापन: स्निपेट की आवश्यकता है\n\n> मैं इसे संगठनात्मक उद्देश्यों के लिए बंद कर रहा हूं। यदि आप एक कोड स्निपेट प्रदान कर सकते हैं जो समस्या को दर्शाता है तो कृपया फिर से खोलें। धन्यवाद!\n\n##### समापन: फोरम का उपयोग करें\n\n> यहां गिटहब समस्या p5.js लाइब्रेरी के बग और समस्याएं के लिए एक अच्छी जगह हैं। अपना स्वयं का कोड लिखने, परीक्षण करने या ट्यूटोरियल का अनुसरण करने के बारे में प्रश्नों के लिए, [फोरम](https://discourse.processing.org/) पोस्ट करने के लिए सबसे अच्छी जगह है। धन्यवाद!\n\n##### समापन: जीएसओसी\n\n> धन्यवाद! जीएसओसी प्रस्तावों पर चर्चा करने के लिए सबसे अच्छी जगह हमारा [फोरम](https://discourse.processing.org/c/summer-of-code/) है।\n\n##### समापन: पहुंच\n\n> मुझे इस सुविधा में बहुत अधिक रुचि नहीं दिख रही है, और हमारे पास इसकी स्पष्ट व्याख्या नहीं है कि यह कैसे [पहुंच का विस्तार करता है](../access/), इसलिए मैं इसे अभी बंद कर दूंगा। यदि समस्या अनुरोध में एक एक्सेस स्टेटमेंट जोड़ा जा सकता है, तो कृपया पुनः खोलने का स्वागत करें।\n\n> हमें इस बारे में कोई और स्पष्टीकरण नहीं दिख रहा है कि यह मुद्दा कैसे [पहुंच का विस्तार करता है](../access/), इसलिए मैं इस समस्या को अभी के लिए बंद कर दूंगा। यदि फीचर अनुरोध में अधिक विस्तृत एक्सेस स्टेटमेंट जोड़ा जा सकता है, तो कृपया इसे फिर से खोलने का स्वागत करें। धन्यवाद!\n\n##### समापन: ऐडऑन\n\n> मुझे लगता है कि यह फ़ंक्शन p5.js एपीआई के दायरे से परे है (हम इसे यथासंभव न्यूनतम रखने की कोशिश करते हैं), लेकिन यह एक ऐडऑन लाइब्रेरी के लिए एक बेहतरीन शुरुआती बिंदु हो सकता है। ऐडऑन बनाने के तरीके के लिए यहां दस्तावेज़ देखें: [https://github.com/processing/p5.js/blob/main/contributor\\_docs/creating\\_libraries.md](../creating_libraries/)\n\n##### समापन पुल रिक्वेस्ट: पहले समस्या की आवश्यकता है\n\n> धन्यवाद. एक अनुस्मारक के रूप में, पुल रिक्वेस्टों को खोलने और समस्या के साथ टैग करने से पहले समस्याएं को खोला जाना चाहिए। विकास पर नज़र रखने और चर्चा को स्पष्ट रखने के लिए यह आवश्यक है। धन्यवाद!\n\n##### समस्या को ठीक करने के लिए स्वीकृति दें\n\n> आप सुधार के साथ आगे बढ़ सकते हैं। धन्यवाद।\n\n##### मर्ज किया गया पुल रिक्वेस्ट\n\n> किये गये परिवर्तन मुझे अच्छे लग रहे हैं। धन्यवाद!\n\n### गिटहब सीएलआई\n\nआपके परीक्षण के लिए स्थानीय स्तर पर कोड का पुल रिक्वेस्ट संस्करण प्राप्त करने के लिए आवश्यक जटिल गिट कमांड के साथ एक जटिल पुल रिक्वेस्ट की समीक्षा करना मुश्किल हो सकता है। सौभाग्य से, [गिटहब CLI](https://cli.github.com/) टूल इस प्रक्रिया और बहुत कुछ में काफी मदद कर सकता है।\n\nCLI को स्थानीय रूप से लिंक करने के लिए इस आईडी का कमांड `gh pr checkout [पुल रिक्वेस्ट आईडी]` चलाने से पुल रिक्वेस्ट की संस्करण कोड को आपके लिए स्थानीय रूप से प्राप्त करना संभव है, और रिमोट फोर्क को प्राप्त करने, एक ब्रांच बनाने और ब्रांच को चेकआउट करने की प्रक्रिया सभी आपके लिए स्वचालित रूप से की जाती है। मुख्य शाखा पर वापस जाना एक ब्रांच को स्विच करने के लिए उसी तरह होगा जैसे `git checkout main`। आप एक टिप्पणी भी छोड़ सकते हैं बिना वेबपेज पर जाने की आवश्यकता के साथ पुल रिक्वेस्ट में से!\n\nगिटहब एसईएलआई में बहुत सारे अन्य कमांड भी उपलब्ध हैं जो आपको उपयोगी हो सकते हैं या नहीं मिल सकते हैं, लेकिन यह एक अच्छा उपकरण है जिसका आपके आसपास होना है किसी भी मामले में।\n\n### सूचनाओं का प्रबंधन\n\nनए समस्याएं या पुल रिक्वेस्ट के लिए \"समस्याएं\" या \"पुल रिक्वेस्ट\" टैबों का मैन्युअल निगरानी करने की बजाय, आप रिपो को देखकर \"नजर रखना (watch)\" कर सकते हैं जिसमें रेपो के नाम के साथ एक आई आइकन है जो रेपो के नाम के विपरीत है।\n\n\n\nरेपो को देखकर, नई समस्याएं, नई पुल रिक्वेस्ट्स, आपके उपयोगकर्ता हैंडल का उल्लेख, और अन्य गतिविधियां, जिनकी आपने रेपो में सब्सक्राइब की हैं, इन घटनाओं को आपके [सूचना पृष्ठ](https://github.com/notifications/) पर सूचनाएं के रूप में भेजी जाती हैं, जिन्हें आप स्वीकार कर सकते हैं या उन्हें ईमेल इनबॉक्स की तरह पढ़कर या खारिज कर सकते हैं।\n\nकई मामलों में, आपको GitHub से रेपो में हो रही घटनाओं के बारे में ईमेल भी मिल सकते हैं, और आप इन्हें अपनी [सूचना सेटिंग्स पेज](https://github.com/settings/notifications/) से कस्टमाइज़ कर सकते हैं (पूरी तरह से उनका अनसब्सक्राइब करके समेत)।\n\nआपके काम करने के तरीके को ध्यान में रखते हुए इन्हें सेट करना, समस्याओं/पुल रिक्वेस्ट समीक्षा को मैन्युअली से खोजने की आवश्यकता न हो और GitHub से अंतहीन सूचनाओं से अधिक भरी होने से बचाने में अंतर हो सकता है। यहां एक अच्छा संतुलन आवश्यक है। एक शुरुआती सुझाव के रूप में, स्टीवर्ड्स को इस रेपो के लिए \"समस्याएँ\" और \"पुल रिक्वेस्ट्स\" के लिए देखना चाहिए और इसे \"भाग लेना, @मेंशन्स और कस्टम (Participating, @mentions and custom)\" पर सेट करना चाहिए।\n"},"इकाई परीक्षण\n":{"relativeUrl":"/contribute/unit_testing","description":"\n\nहम यह सुनिश्चित करने के लिए इकाई परीक्षण का उपयोग करते हैं कि कोडबेस के अलग-अलग घटक काम करते हैं जैसा कि हम उनसे उम्मीद करते हैं।\n\n### संदर्भ\n\nयहां एक समान तकनीक स्टैक के साथ [यूनिट परीक्षण](https://codeburst.io/javascript-unit-testing-using-mocha-and-chai-1d97d9f18e71/) के लिए एक अच्छा, त्वरित परिचय है, और यहां गहराई से [व्याख्या](https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d/) दी गयी है।\n\n### सभी यूनिट टेस्ट को चलाना\n\nरेपो रूट में, अपने टर्मिनल में निम्न कमांड का उपयोग करें\n\n```shell\n$ npm test\n```\n\n### परीक्षण कवरेज\n\nजब भी परीक्षण चलाए जाते हैं, एक कवरेज रिपोर्ट तैयार की जाती है। यह कवरेज रिपोर्ट बताती है कि परीक्षण सूट द्वारा किस स्रोत कोड फ़ाइलों का उपयोग किया गया था, प्रभावी रूप से हमें बता रहा था कि कोडबेस का कितना परीक्षण किया गया था।\n\nपरीक्षण चलाने के बाद एक सारांश मुद्रित किया जाता है, और आप किसी भी वेब ब्राउज़र में `coverage/index.html` पर विस्तृत रिपोर्ट देख सकते हैं। आप अपने डिफॉल्ट वेब ब्राउज़र में पेज खोलने के लिए Mac पर कमांड लाइन से `open coverage/index.html` चला सकते हैं। आप कमांड का उपयोग करके टर्मिनल में परीक्षण चलाने के बाद कवरेज रिपोर्ट भी देख सकते हैं `npx nyc report --reporter=text`.\n\n### एक सुइट चला कर देखें\n\nएकल परीक्षण या परीक्षणों के समूह को चलाने के लिए,`.only` सुइट में या तो `.js` फ़ाइल में परीक्षण करें और उपरोक्त आदेश का उपयोग करके परीक्षण चलाएं। सावधान रहो, हालांकि आप प्रतिबद्ध नहीं हैं। `.only` (हम हमेशा चाहते हैं कि हमारा CI सभी यूनिट टेस्ट चलाए।)\n\n### एक उदाहरण\n\nकेवल \"p5.ColorConversion\" परीक्षणों का सूट चलाने के लिए, आप पढ़ने के लिए `test/unit/color/color_conversion.js` की पहली पंक्ति को बदल देंगे-\n\n```js\nsuite.only('color/p5.ColorConversion', function() {\n```\n\nअब जब आप `npm test` का उपयोग करते हैं, तो केवल उस `function()` बॉडी के भीतर परीक्षण चलाए जाएंगे।\n\n### एक परीक्षण सूट लंघन\n\nयह सुविधा .only () का विलोम है। .Skip () को जोड़कर, आप मोचा को इन सुइट्स और टेस्ट केस (मामलों) को अनदेखा करने के लिए कह सकते हैं। कुछ भी छोड़ दिया जाना लंबित के रूप में चिह्नित किया जाएगा, और इस तरह की रिपोर्ट की जाएगी।\n\n## आधारिक संरचना\n\n### ढांचा\n\nहम अपने यूनिट परीक्षणों को संरचित करने और चलाने के लिए [Mocha](https://mochajs.org/) का उपयोग करते हैं हम कोड का व्यवहार कैसे करना चाहिए, इसके बारे में अलग-अलग कथन लिखने के लिए हम \\[chai assert (और except)]\\([https://www.chaijs.com](https://www.chaijs.com) api/assert/) का उपयोग करते हैं।\n\n### वातावरण\n\nहमारे पास `test/unit` फ़ोल्डर के तहत परीक्षण का एक संग्रह है जो ब्राउज़र में चलता है और `test/node` के तहत परीक्षणों का एक संग्रह है जो नोड्स .js. में चलता है।\n\nब्राउज़र परीक्षण [हेडलेस क्रोम](https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai/) में चलते हैं। यही कारण है कि जब आप परीक्षण चलाते हैं तो आपको ब्राउज़र विंडो पॉप-अप नहीं दिखाई देती है।\n\n### सेटअप और सहायक\n\nये वर्तमान में केवल ब्राउज़र परीक्षणों के लिए उपलब्ध हैं (जहाँ हमारे अधिकांश परीक्षण चलते हैं)-\n\n* test/js/mocha\\_setup.js मोचा के लिए कुछ विकल्प कॉन्फ़िगर करता है।\n* test/js/chai\\_helpers.js chai.assert में चाई स्थापित करता है और कुछ उपयोगी कार्यों को जोड़ता है।\n* test/js/p5\\_helpers.js p5 स्केच के परीक्षण के लिए कुछ सहायकों को जोड़ता है।\n\nNode.js परीक्षणों के लिए सेटअप सभी `test/mocha.opts` में किया जाता है।\n\n### निरंतर एकीकरण परीक्षण\n\nजब आप p5.js रेपो में एक पुल अनुरोध भेजते हैं, तो यह स्वचालित रूप से [परीक्षण चलाएगा](https://github.com/processing/p5.js/actions/)। इससे हमें यह जांचने में मदद मिलती है कि परीक्षण प्रत्येक पुल अनुरोध के लिए गुजरता है, व्यक्तिगत योगदानकर्ताओं से कोई अतिरिक्त काम नहीं है। यह स्वतः ही [कोडेकोव](https://codecov.io/github/processing/p5.js) रिपोर्ट को कवरेज रिपोर्ट भी अपलोड कर देता है।\n\n### इकाई परीक्षण जोड़ना\n\nयदि आप अधिक इकाई परीक्षण जोड़ना चाहते हैं, तो देखें और देखें कि क्या उस घटक के लिए पहले से ही एक परीक्षण फ़ाइल है जिसके लिए आप परीक्षण जोड़ना चाहते हैं। आम तौर पर, src में दिए गए फ़ाइल के लिए `test/unit` के तहत एक ही रास्ते पर होते हैं। (उदाहरण के लिए `src/color/p5.Color.js` के लिए परीक्षण `test/unit/color/p5.Color.js`\nमें हैं।)\n\nयदि आपको एक नहीं मिल रहा है, तो शायद इसलिए कि उस फ़ाइल के लिए कोई परीक्षण नहीं हुआ है (अभी तक पलक), इसलिए ऊपर दिए गए सम्मेलनों के अनुसार एक नई फ़ाइल बनाएं। यदि आप जिस मॉड्यूल का परीक्षण कर रहे हैं, उसे काम करने के लिए ब्राउज़र की आवश्यकता होती है, तो आप इसे test/unit में रखना चाहते हैं, लेकिन यदि ऐसा नहीं है, तो आप इसे test/node के तहत जोड़ना चाह सकते हैं। जब संदेह हो, तो test/unit में एक ब्राउज़र टेस्ट जोड़ने के लिए डिफ़ॉल्ट! (यदि हमें ज़रूरत है तो बाद में स्थानांतरित करना बहुत आसान है।)\n\nयदि आपको test/unit के लिए मॉड्यूल के लिए एक परीक्षण फ़ाइल को जोड़ना है, तो आपको test/unit/spec.js में युक्ति के लिए परीक्षण के तहत मॉड्यूल की भी आवश्यकता होगी। यह सुनिश्चित करेगा कि आपके परीक्षण को चलाने के लिए आवश्यक मॉड्यूल लोड किए गए हैं। आप इन परीक्षणों को ब्राउज़र में test/test.html फ़ाइल देखकर देख सकते हैं।\n\n### इकाई परीक्षण लिखना\n\nएक इकाई चुनें, यह परीक्षण करने के लिए एक विधि या एक चर हो सकता है। एक उदाहरण के रूप में `p5.prototype.isKeyPressed` का उपयोग करें। परीक्षण लिखने की शुरुआत करने से पहले, हमें इस पद्धति के अपेक्षित व्यवहार को समझने की आवश्यकता है। **अपेक्षित व्यवहार**: बूलियन सिस्टम वैरिएबल सही होना चाहिए यदि कोई कुंजी दबाया जाता है और गलत है यदि कोई कुंजी दबाया नहीं जाता है। अब आप इस अपेक्षित व्यवहार के खिलाफ विभिन्न परीक्षणों के बारे में सोच सकते हैं। संभावित परीक्षण मामले हो सकते हैं-\n\n* वेरिएबल एक बूलियन है।\n* यह सच होना चाहिए अगर एक कुंजी को दबाया जाता है।\n* यह सच होना चाहिए अगर एक कुंजी को दबाया जाता है - वर्णमाला कुंजी, संख्या कुंजी, विशेष कुंजी आदि।\n* यदि कई कुंजियों को दबाया जाए तो यह सही होना चाहिए।\n* यह गलत होना चाहिए अगर कोई कुंजी दबाया नहीं जाता है।\n* यदि आप अधिक के बारे में सोच सकते हैं, तो आगे बढ़ें और उनके लिए परीक्षण जोड़ें।\n\nहम `p5.prototype.isKeyPressed` के लिए एक परीक्षण सूट बना सकते हैं और इसके लिए परीक्षण बनाना शुरू कर सकते हैं। हम अपने यूनिट परीक्षणों की संरचना के लिए Mocha का उपयोग करेंगे।\n\n```js\nsuite('p5.prototype.keyIsPressed', function() {\n test('keyIsPressed is a boolean', function() {\n //परीक्षण यहाँ लिखें\n });\n\n test('keyIsPressed is true on key press', function() {\n //परीक्षण यहाँ लिखें\n });\n\n test('keyIsPressed is false when no keys are pressed', function() {\n //परीक्षण यहाँ लिखें\n });\n});\n```\n\nहमने परीक्षणों की संरचना की है, लेकिन हमने अभी तक परीक्षण नहीं लिखे हैं। हम इसके लिए ची के दावे का उपयोग करेंगे। निम्नलिखित को धयान मे रखते हुए-\n\n```js\ntest('keyIsPressed is a boolean', function() {\n assert.isBoolean(myp5.keyIsPressed); //दावा करता है कि मूल्य एक बूलियन है।\n});\n```\n\nइसी प्रकार हम `assert.strictEqual(myp5.keyIsPressed, true)` का उपयोग कर सकते हैं यदि मान सत्य है। आप यहां चाय के दावे के बारे में अधिक पढ़ सकते हैं। अब जब आप परीक्षण लिख चुके हैं, तो उन्हें चलाएं और देखें कि क्या विधि अपेक्षित रूप से व्यवहार करती है। यदि नहीं, तो उसी के लिए एक मुद्दा बनाएं और यदि आप चाहें, तो आप इसे ठीक करने पर भी काम कर सकते हैं।\n"},"वेबजीएल योगदान गाइड\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* p5.js WebGL मोड सोर्स कोड पर काम कैसे शुरू करें। */}\n\n\n\nनमस्ते, यदि आप इस पृष्ठ को पढ़ रहे हैं, तो आप शायद वेबजीएल मोड पर काम करने में मदद करने के इच्छुक हैं। आपकी मदद के लिए धन्यवाद, हम आपकी सहायता के लिए आभारी हैं! इस पृष्ठ का उद्देश्य वेबजीएल योगदानों को संरचित करने का तरीका समझाना और परिवर्तन करते समय कुछ सुझाव प्रदान करना है।\n\n## संसाधन\n\n* हमारे [p5.js वेबजीएल मोड की संरचना अवलोकन](https://github.com/processing/p5.js/blob/main/contributor_docs/webgl_mode_architecture.md) पढ़ें ताकि समझा जा सके कि 2डी मोड से वेबजीएल मोड कैसे भिन्न है। इससे शेडर, स्ट्रोक और अन्य के लिए कुछ कार्यान्वयन विशेषताओं को समझने में मदद मिलेगी।\n* हमारे [योगदानकर्ता दिशानिर्देश](https://p5js.org/contributor-docs/#/./contributor_guidelines/) पढ़ें जिससे यह पता चलेगा कि समस्या को कैसे बनाया जाए, कोडबेस को कैसे सेट किया जाए और परिवर्तनों को कैसे परीक्षित किया जाए।\n* यह जानना भी उपयोगी हो सकता है कि ब्राउज़र के वेबजीएल एपीआई के बारे में थोड़ा जानना, जिस पर p5.js का वेबजीएल मोड बनाया गया है:\n * [वेबजीएल मूलभूत बातें](https://webglfundamentals.org/) कई कोर रेंडरिंग अवधारणाओं पर जाती है\n * [शेडर की किताब](https://thebookofshaders.com/) वेबजीएल शेडर में उपयोग की जाने वाली कई तकनीकों को समझाती है\n\n## योजना बनाना\n\nहम खुली समस्यों को [एक गिटहब प्रोजेक्ट में](https://github.com/orgs/processing/projects/5/) व्यवस्थित करते हैं, जहां हम उन्हें कुछ प्रकारों में विभाजित करते हैं:\n\n* **प्रणाली-स्तरीय परिवर्तन** लंबी अवधि के लक्ष्य हैं जिनके कोड में व्यापक निहितार्थ हैं। इन्हें कार्यान्वयन में कूटनीति और योजनाबद्धता की सबसे अधिक चर्चा और योजना की आवश्यकता होती है।।\n* **कोई समाधान नहीं वाले बग** ऐसे बग रिपोर्ट हैं जिनमें कारण को संकीर्ण करने के लिए डीबगिंग की आवश्यकता होती है। ये अभी तक ठीक करने के लिए तैयार नहीं हैं: एकबार कारण मिल जाता है, तो हम इसे कैसे ठीक करना है, इस पर चर्चा कर सकते हैं।\n* **समाधान वाले बग लेकिन कोई पीआर नहीं वाले बग** वे हैं जहां हमने इसे कैसे ठीक करना है तय कर लिया है और किसी को भी कोड लिखने के लिए स्वतंत्र हैं।\n* **छोटे विस्तार** वे समस्या हैं जिनमें नई सुविधाएं हैं जिनके लिए वर्तमान संरचना के भीतर एक स्पष्ट स्थान है और इसे फिट करने की तरीके पर चर्चा करने की आवश्यकता नहीं है। एक बार यह तय हो जाता है कि इन्हें करना लायक है, तो आप कोड लिखने के लिए स्वतंत्र हैं।\n* **2डी सुविधाएं** वे हैं जो पहले से ही p5.js में मौजूद हैं लेकिन वेबजीएल मोड में नहीं। इस सुविधा को लागू करने के बाद, उम्मीद है कि इसका व्यवहार 2डी मोड से मेल खाएगा। हमें शायद इसके सर्वोत्तम कार्यान्वयन पर चर्चा करनी पड़ सकती है, लेकिन इनके लिए उपयोगकर्ता आवश्यकताएं स्पष्ट हैं।\n* **सभी संदर्भों में काम नहीं करने वाली सुविधाएं** वे हैं जो वेबजीएल मोड में मौजूद हैं लेकिन वेबजीएल मोड का उपयोग करने के सभी तरीकों में काम नहीं करती हैं। उदाहरण के लिए, कुछ p5.js विधियां 2डी निर्देशांकों और 3डी निर्देशांकों दोनों के साथ काम करती हैं, लेकिन अन्य 3डी निर्देशांकों का उपयोग करने पर टूट जाती हैं। आमतौर पर इन पर काम शुरू करने के लिए स्वतंत्र हैं।\n* **विशेषता अनुरोध** सभी अन्य कोड परिवर्तन अनुरोध हैं। इन पर यह सुनिश्चित करने के लिए थोड़ी चर्चा करने की आवश्यकता होती है कि वे वेबजीएल मोड की रोडमैप में फिट बैठते हैं या नहीं।\n* **दस्तावेजीकरण समस्या** वे हैं जिनके लिए कोड परिवर्तन की आवश्यकता नहीं होती है, बल्कि इसके बजाय p5.js के व्यवहार की बेहतर दस्तावेजीकरण की आवश्यकता होती है।\n\n## कोड कहाँ रखना है\n\nयहां वेबजीएल से संबंधित सभी चीजें src/webgl सबडायरेक्टरी में हैं। इस डायरेक्टरी के भीतर, शीर्ष-स्तरीय p5.js फ़ंक्शन विषय क्षेत्र के आधार पर फाइलों में विभाजित हैं: प्रकाश सेट करने के आदेश lighting.js में जाते हैं; सामग्रियां सेट करने के आदेश materials.js में जाते हैं।\n\nजब उपयोगकर्ता-अभिमुख वर्गों को लागू किया जाता है, तो हम आमतौर पर एक फ़ाइल प्रति वर्ग रखने की कोशिश करते हैं। इन फ़ाइलों में कभी-कभी कुछ अन्य आंतरिक उपयोगिता वर्ग हो सकते हैं। उदाहरण के लिए, `p5.Framebuffer.js` में `p5.Framebuffer` वर्ग शामिल है, और इसमें अन्य मुख्य वर्गों की कुछ फ्रेमबफर-विशिष्ट उपवर्ग भी शामिल हैं। अन्य फ्रेमबफर-विशिष्ट उपवर्ग भी इस फ़ाइल में जा सकते हैं।\n\n`p5.RendererGL` एक बड़ा वर्ग है जो बहुत सारे व्यवहार को संभालता है। इस कारण से, एक बड़ी वर्ग फ़ाइल होने के बजाय, इसकी कार्यक्षमता कई फ़ाइलों में विभाजित है, जो इस बात पर निर्भर करती है कि यह किस विषय क्षेत्र से संबंधित है। यहां एक विवरण है कि हम `p5.RendererGL` को किन फाइलों में विभाजित करते हैं, और प्रत्येक में क्या डालना है:\n\n#### `p5.RendererGL.js`\n\nआरंभीकरण और मूल कार्यक्षमता।\n\n#### `p5.RendererGL.Immediate.js`\n\n**तत्काल मोड** आरेखण से संबंधित कार्यक्षमता (आकृतियां जो संग्रहीत और पुन: उपयोग नहीं की जाएंगी, जैसे `beginShape()` और `endShape()`)\n\n#### `p5.RendererGL.Retained.js`\n\n**रिटेन्ड मोड** आरेखण से संबंधित कार्यक्षमता (आकृतियां जो पुन: उपयोग के लिए संग्रहीत की गई हैं, जैसे `sphere()`)\n\n#### `material.js`\n\nमिश्रण मोड का प्रबंधन\n\n#### `3d_primitives.js`\n\nउपयोगकर्ता-अभिमुख फ़ंक्शन जो आकृतियां आरेखित करते हैं, जैसे `triangle()`। ये आकृतियों की ज्यामिति परिभाषित करते हैं। उन आकृतियों का रेंडरिंग फिर `p5.RendererGL.Retained.js` या `p5.RendererGL.Immediate.js` में होता है, ज्यामिति इनपुट को एक सामान्य आकृति के रूप में मानते हुए।\n\n#### `Text.js`\n\nलेखन रेंडरिंग के लिए कार्यक्षमता और उपयोगिता वर्ग।\n\n## वेबजीएल परिवर्तनों का परीक्षण करना\n\n### सुसंगतता का परीक्षण\n\np5.js में फ़ंक्शन का उपयोग करने के बहुत से तरीके हैं। इसकी मैन्युअल रूप से जांच करना मुश्किल है, इसलिए हम जहां भी संभव हो युनिट टेस्ट जोड़ते हैं। इस तरह, जब हम नए परिवर्तन करते हैं, तो हम अधिक आश्वस्त हो सकते हैं कि हमने किसी चीज को नहीं तोड़ा है यदि सभी युनिट टेस्ट अभी भी पास हो रहे हैं।\n\nजब एक नया टेस्ट जोड़ा जाता है, तो यदि विशेषता कुछ ऐसा है जो 2डी मोड में भी काम करता है, तो सुसंगतता की जांच करने का सबसे अच्छा तरीका यह है कि आप देखें कि दोनों मोड में परिणामी पिक्सेल समान हैं। एक युनिट टेस्ट में इसका एक उदाहरण यहां दिया गया है:\n\n```js\ntest('coplanar strokes match 2D', function() {\n const getColors = function(mode) {\n myp5.createCanvas(20, 20, mode);\n myp5.pixelDensity(1);\n myp5.background(255);\n myp5.strokeCap(myp5.SQUARE);\n myp5.strokeJoin(myp5.MITER);\n if (mode === myp5.WEBGL) {\n myp5.translate(-myp5.width/2, -myp5.height/2);\n }\n myp5.stroke('black');\n myp5.strokeWeight(4);\n myp5.fill('red');\n myp5.rect(10, 10, 15, 15);\n myp5.fill('blue');\n myp5.rect(0, 0, 15, 15);\n myp5.loadPixels();\n return [...myp5.pixels];\n };\n assert.deepEqual(getColors(myp5.P2D), getColors(myp5.WEBGL));\n});\n```\n\nयह हमेशा काम नहीं करता क्योंकि आप 2डी मोड में एंटीएलियासिंग को बंद नहीं कर सकते, और वेबजीएल मोड में एंटीएलियासिंग अक्सर थोड़ा अलग होगा। हालांकि, ये x और y अक्षों में सीधी रेखाओं के लिए काम कर सकता है!\n\nयदि कोई सुविधा केवल वेबजीएल के लिए है, तो 2डी मोड के साथ पिक्सेल की तुलना करने के बजाय, हम अक्सर कुछ पिक्सेल की जांच करते हैं ताकि यह सुनिश्चित किया जा सके कि उनका रंग वह है जिसकी हम उम्मीद करते हैं। एक दिन, हम इसे हमारे अपेक्षित परिणामों की पूरी छवि स्नैपशॉट की तुलना करने के लिए एक अधिक मजबूत प्रणाली में बदल सकते हैं, बजाय कुछ पिक्सेल की तुलना करने के, लेकिन अभी के लिए, यहां एक पिक्सेल रंग जांच का उदाहरण है:\n\n```js\ntest('color interpolation', function() {\n const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);\n // upper color: (200, 0, 0, 255);\n // lower color: (0, 0, 200, 255);\n // expected center color: (100, 0, 100, 255);\n myp5.beginShape();\n myp5.fill(200, 0, 0);\n myp5.vertex(-128, -128);\n myp5.fill(200, 0, 0);\n myp5.vertex(128, -128);\n myp5.fill(0, 0, 200);\n myp5.vertex(128, 128);\n myp5.fill(0, 0, 200);\n myp5.vertex(-128, 128);\n myp5.endShape(myp5.CLOSE);\n assert.equal(renderer._useVertexColor, true);\n assert.deepEqual(myp5.get(128, 128), [100, 0, 100, 255]);\n});\n```\n\n### परफॉर्मेंस परीक्षण\n\nजबकि यह p5.js का # 1 समस्या नहीं है, हम सुनिश्चित करने की कोशिश करते हैं कि परिवर्तन परफॉर्मेंस पर बहुत अधिक प्रभाव नहीं डालते हैं। आमतौर पर, यह दो परीक्षण स्केच बनाकर किया जाता है: एक आपके बदलाव के साथ और एक बिना बदलाव के। फिर हम दोनों के फ्रेम रेट की तुलना करते हैं।\n\nपरफॉर्मेंस को मापने के बारे में कुछ सलाह:\n\n* अपने स्केच के शीर्ष पर `p5.disableFriendlyErrors = true` के साथ अनुकूल त्रुटियों को अक्षम करें (या बस `p5.min.js` का परीक्षण करें, जिसमें अनुकूल त्रुटि प्रणाली शामिल नहीं है)\n* स्थिर स्टेट फ्रेम दर का स्पष्ट अनुभव प्राप्त करने के लिए औसत फ्रेम दर प्रदर्शित करें:\n\n```js\nlet frameRateP;\nlet avgFrameRates = [];\nlet frameRateSum = 0;\nconst numSamples = 30;\nfunction setup() {\n // ...\n frameRateP = createP();\n frameRateP.position(0, 0);\n}\nfunction draw() {\n // ...\n const rate = frameRate() / numSamples;\n avgFrameRates.push(rate);\n frameRateSum += rate;\n if (avgFrameRates.length > numSamples) {\n frameRateSum -= avgFrameRates.shift();\n }\n \n frameRateP.html(round(frameRateSum) + ' avg fps');\n}\n```\n\nहम निम्नलिखित मामलों का परीक्षण करने की कोशिश करते हैं क्योंकि वे रेंडरिंग पाइपलाइन के विभिन्न हिस्सों पर दबाव डालते हैं:\n\n* कुछ बहुत ही जटिल आकृतियां (उदाहरण के लिए, एक बड़ा 3डी मॉडल या एक लंबी वक्र रेखा)\n* कई सरल आकृतियां (उदाहरण के लिए, एक फॉर लूप में कई बार `line()` फ़ंक्शन का उपयोग)\n"}},"examples":{"आदिम आकार":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"\nयह प्रोग्राम\n<a href=\"https://p5js.org/reference/p5/square\" target=\"_blank\">square()</a>,\n<a href=\"https://p5js.org/reference/p5/rect\" target=\"_blank\">rect()</a>,\n<a href=\"https://p5js.org/reference/p5/ellipse\" target=\"_blank\">ellipse()</a>,\n<a href=\"https://p5js.org/reference/p5/circle\" target=\"_blank\">circle()</a>,\n<a href=\"https://p5js.org/reference/p5/arc\" target=\"_blank\">arc()</a>,\n<a href=\"https://p5js.org/reference/p5/line\" target=\"_blank\">line()</a>,\n<a href=\"https://p5js.org/reference/p5/triangle\" target=\"_blank\">triangle()</a>,\nऔर <a href=\"https://p5js.org/reference/p5/quad\" target=\"_blank\">quad()</a> जैसे मूल आकार के आदिम कार्यों के उपयोग को प्रदर्शित करता है।"},"रंग":{"relativeUrl":"/examples/shapes-and-color-color","description":"\r\nयह रंग जोड़कर आकार आदिम उदाहरण पर विस्तार करता है।\r\n<a href='https://p5js.org/reference/p5/background' target='_blank'>background()</a> कैनवास को एक रंग से भरता है, <a href=\"https:// p5js.org/reference/p5/stroke\" target='_blank'>stroke()</a> रेखाएं खींचने के लिए रंग सेट करता है, और <a href=\"https://p5js.org/reference/p5/fill\" target=\"_blank\">fill()</a> आकृतियों के अंदर का रंग सेट करता है। <a href='https://p5js.org/reference/p5/noStroke' target='_blank'>noStroke()</a> और <a href='https://p5js.org/reference/ #/p5/noFill' target='_blank'>noFill()</a> क्रमशः लाइन रंग और आंतरिक रंग बंद करते है।\r\n\r\nरंगों को कई अलग-अलग तरीकों से दर्शाया जा सकता है। यह उदाहरण कई विकल्प प्रदर्शित करता ह।"},"रेखाएँ खींचना":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"\r\nएक रेखा खींचने के लिए माउस को क्लिक करें और खींचें।\r\n\r\nयह उदाहरण कई बिल्ट-इन वेरिएबल के उपयोग को प्रदर्शित करता है।\r\n<a href='https://p5js.org/reference/p5/mouseX'>mouseX</a> और <a href='https://p5js.org/reference/p5/mouseY'> mouseY</a> वर्तमान माउस स्थिति को संग्रहीत करता है, जबकि पिछली माउस स्थिति को <a href=\"https://p5js.org/reference/p5/pmouseX\">pmouseX</a> और <a href=\"https://p5js.org/reference/p5/pmouseY\">pmouseY</a> द्वारा दर्शाया जाता है।\r\n\r\n *\r\n\r\nयह उदाहरण HSB (रंग-संतृप्ति-चमक) के साथ <a href=\"https://p5js.org/reference/p5/colorMode\">colorMode</a> का उपयोग भी दिखाता है, ताकि पहला वेरिएबल रंग सेट कर पाये।"},"घटनाओं के साथ एनीमेशन":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"\r\nयह उदाहरण <a href='https://p5js.org/reference/p5/loop'>loop()</a> और <a href='https://p5js.org/reference/p5/noLoop'>noLoop()</a> के उपयोग को एनीमेशन को रोकने और फिर से शुरू करने के लिए दर्शाता है।\r\n\r\nमाउस पर क्लिक करने से एनीमेशन लूप चालू हो जाता है। यदि एनीमेशन लूप बंद हो जाता है, तो उपयोगकर्ता एक फ्रेम को आगे बढ़ाने के लिए कोई भी कुंजी दबा सकता है। ध्यान दें: कुंजी दबाने को पंजीकृत करने के लिए उपयोगकर्ता को कैनवास पर फोकस सेट करने के लिए क्लिक करना होगा।\r\n\r\nएकल फ़्रेम को आगे बढ़ाने का काम <a href='https://p5js.org/reference/p5/redraw'>redraw()</a> फ़ंक्शन को कॉल करके पूरा किया जाता है, जो आंतरिक रूप से draw() कॉल करता है।"},"मोबाइल डिवाइस मूवमेंट":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"\r\n<a href='https://p5js.org/reference/p5/deviceMoved' target='_blank'>deviceMoved()</a>\r\nफ़ंक्शन तब चलता है जब स्केच प्रदर्शित करने वाला मोबाइल उपकरण चलता है।\r\n\r\nइस उदाहरण में, <a href='https://p5js.org/reference/p5/accelerationX' target='_blank'>accelerationX</a>, <a href='https://p5js.org/reference/p5/accelerationY' target='_blank'>accelerationY</a>, और <a href='https://p5js.org/reference/p5/accelerationZ' target='_blank'>accelerationZ </a> मान वृत्त की स्थिति और आकार निर्धारित करते हैं। यह केवल मोबाइल उपकरणों के लिए काम करता है।"},"स्थितियाँ":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"\r\n<code>if</code> और <code>else</code> कथन <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block' target='_blank'>कोड के ब्लॉक</a> केवल तभी चलाते हैं जब कोई निश्चित शर्त सत्य हो। यह उदाहरण केवल तभी एनिमेट होता है जब माउस को नीचे दबाया जाता है। ऐसा लाइन 59 पर मौजूद <code>if</code> स्टेटमेंट के कारण है। आप <code>if</code> और <code>else</code> स्टेटमेंट्स के बारे में अधिक पढ़ सकते हैं <a href='https://p5js.org/reference/p5/if-else'>p5 रेफरेंस में</ a> या <a href='https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals' target='_blank'>MDN पर</a>।\r\n\r\nतुलना ऑपरेटर दो मानों की तुलना करके स्थितियाँ बनाने में मदद करते हैं। इस उदाहरण में, पंक्ति 69 पर <code>if</code> कथन के कारण रंग कम से कम 360 होने पर वृत्त का रंग शून्य पर रीसेट हो जाता है। आप तुलना ऑपरेटरों के बारे में अधिक पढ़ सकते हैं <a href='https://developer.mozilla.org/ en-US/docs/Web/JavaScript/Reference/Operators#relational_operators' target='_blank'>MDN</a> पर।\r\n\r\n\r\nतार्किक संचालक शर्तों को संयोजित करने की अनुमति देते हैं। <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operator/Logical_AND' target='_blank'>&&</a> जांचता है कि दोनों स्थितियां सच हैं। इस उदाहरण में वृत्त जब कैनवास के क्षैतिज केंद्र की ओर होता है तो उसमें काला भराव होता है, और जब ऐसा नहीं होता है तो उसमें सफेद भराव होता है। ऐसा पंक्ति 45 पर दिए गए <code>if</code> कथन के कारण है, जो जाँचता है कि वृत्त की x स्थिति कम से कम 100 है और 300 से अधिक नहीं है।\r\n<a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operator/Logical_OR' target='_blank'>||</a> जांचता है कि इनमें से कम से कम एक स्थितियाँ सत्य हैं। जब वृत्त पंक्ति 75 पर दिए गए <code>if</code> कथन के कारण कैनवास के बाएँ या दाएँ किनारे तक पहुँचता है तो वह क्षैतिज गति को उलट देता है।\r\n"},"शब्द":{"relativeUrl":"/examples/imported-media-words","description":"\r\n<a href='https://p5js.org/reference/p5/text' target='_blank'>text()</a> फ़ंक्शन का उपयोग कैनवास में टेक्स्ट डालने के लिए किया जाता है।\r\n\r\nआप <a href='https://p5js.org/reference/p5/loadFont' target='_blank'>loadFont()</a> और <a href=\"https://p5js.org/reference/p5/fontSize\" target=\"_blank\">fontSize()</a> फ़ंक्शन का उपयोग करके फ़ॉन्ट और टेक्स्ट का आकार बदल सकते हैं।\r\n\r\nटेक्स्ट को <a href='https://p5js.org/reference/p5/textAlign' target='_blank'>textAlign()</a> फ़ंक्शन के साथ बाएं, केंद्र या दाएं संरेखित किया जा सकता है, और, आकृतियों की तरह, टेक्स्ट को <a href='https://p5js.org/reference/p5/fill' target='_blank'>fill()</a> से रंगीन किया जा सकता है।\r\n"},"छवि डेटा कॉपी करें":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"\r\n<a href='https://p5js.org/reference/p5/copy' target='_blank'>copy()</a> विधि का उपयोग करके, आप किसी छवि को रंगने की प्रक्रिया का अनुकरण कर सकते हैं। यह काले और सफेद छवि के शीर्ष पर जहां भी कर्सर खींचा जाता है, रंगीन छवि की एक छवि की प्रतिलिपि बनाकर किया जाता है।"},"अल्फा मास्क":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"\r\n<a href='https://p5js.org/reference/p5/mask' target='_blank'>mask()</a> विधि का उपयोग करके, आप एक छवि के लिए एक मास्क बना सकते हैं, और इसका उपयोग कर सकते हैं विभिन्न भागों में पारदर्शिता निर्दिष्ट करने के लिए। इस उदाहरण को स्थानीय रूप से चलाने के लिए, आपको दो छवि फ़ाइलों और एक चालू <a href=\"https://github.com/processing/p5.js/wiki/Local-server\">स्थानीय सर्वर</a> की आवश्यकता होगी।"},"छवि पारदर्शिता":{"relativeUrl":"/examples/imported-media-image-transparency","description":"\r\nयह प्रोग्राम <a href='https://p5js.org/reference/p5/tint' target='_blank'>tint()</a> फ़ंक्शन के साथ छवि के अल्फा मान को संशोधित करके एक छवि को दूसरी छवि पर ओवरले करता है। छवि की स्थिति बदलने के लिए कर्सर को कैनवास पर बाएँ और दाएँ घुमाएँ। इस उदाहरण को स्थानीय रूप से चलाने के लिए, आपको एक छवि फ़ाइल और एक चालू <a href=\"https://github.com/processing/p5.js/wiki/Local-server\">स्थानीय सर्वर</a> की आवश्यकता होगी।"},"ऑडियो प्लेयर":{"relativeUrl":"/examples/imported-media-create-audio","description":"\r\n<a href='https://p5js.org/reference/p5/createAudio' target='_blank'>createAudio()</a> एक ऑडियो प्लेयर बनाता है। यह उदाहरण ऑडियो प्लेयर के नियंत्रण को प्रदर्शित करता है और उसकी गति को समायोजित करता है। जब माउस विंडो के बाएँ किनारे पर होता है तो प्लेबैक गति सामान्य होती है, और जैसे ही माउस दाईं ओर जाता है यह तेज़ हो जाती है। ऑडियो प्लेयर जैसे मीडिया तत्वों का उपयोग करने के बारे में अधिक जानकारी <a href='https://p5js.org/reference/p5.MediaElement' target='_blank'>p5.MediaElement</a> संदर्भ पृष्ठ पर है। ऑडियो फ़ाइल एक <a href='https://freesound.org/people/josefpres/sounds/711156/' target='_blank'> सार्वजनिक डोमेन में जोसेफ़ प्रेस द्वारा बनाया गया पियानो लूप</a> है।"},"वीडियो प्लेयर":{"relativeUrl":"/examples/imported-media-video","description":"\r\n<a href='https://p5js.org/reference/p5/noCanvas' target='_blank'>noCanvas()</a> और <a href='https://p5js.org/reference/p5/createVideo' target='_blank'>createVideo()</a> फ़ंक्शन का उपयोग करके आप <a href='https://developer.mozilla.org/en-US/docs/Glossary/DOM' target=\"_blank\">DOM</a> में एक वीडियो अपलोड कर सकते हैं, वीडियो को कैनवास में एम्बेड किए बिना। कैनवास तत्व के भीतर एम्बेडेड वीडियो बनाने के लिए, <a href='https://p5js.org/examples/imported-media-video-canvas/' target='_blank'>वीडियो कैनवास</a> उदाहरण पर जाएं।"},"वीडियो कैनवास":{"relativeUrl":"/examples/imported-media-video-canvas","description":"\r\n<a href='https://p5js.org/reference/p5/createVideo' target='_blank'>createVideo()</a> और <a href='https://p5js.org/reference/p5/image' target=\"_blank\">image()</a> फ़ंक्शंस का उपयोग करके आप कैनवास में एक वीडियो अपलोड कर सकते हैं।\r\nचूँकि वीडियो कैप्चर <a href='https://p5js.org/reference/p5/image' target='_blank'>image()</a> कंस्ट्रक्टर से होकर गुजरता है, आप इसमें फ़िल्टर जोड़ सकते हैं <a href='https://p5js.org/reference/p5/filter' target='_blank'>filter()</a> विधि का उपयोग करके।\r\nइस उदाहरण को स्थानीय रूप से चलाने के लिए, आपको एक चालू <a href=\"https://github.com/processing/p5.js/wiki/Local-server\">स्थानीय सर्वर</a> की आवश्यकता होगी।\r\nकैनवास में एम्बेड किए बिना वीडियो बनाने के लिए, <a href='https://p5js.org/examples/imported-media-video/'>वीडियो</a> उदाहरण पर जाएं।"},"विडियो रिकॉर्ड":{"relativeUrl":"/examples/imported-media-video-capture","description":"\r\n<a href='https://p5js.org/reference/p5/createCapture' target='_blank'>createCapture()</a> \r\nऔर <a href='https://p5js.org/reference/p5/image' target='_blank'>image()</a> फ़ंक्शन का उपयोग करके आप किसी डिवाइस का वीडियो कैप्चर ले सकते हैं और उसे कैनवास में बना सकते हैं।\r\nचूँकि वीडियो कैप्चर <a href='https://p5js.org/reference/p5/image' target='_blank'>image()</a> कंस्ट्रक्टर से होकर गुजरता है, आप इसमें <a href='https://p5js.org/reference/p5/filter' target='_blank'>filter()</a> विधि से फ़िल्टर जोड़ सकते हैं।\r\nवीडियो अपलोड करने, प्रस्तुत करने या स्टाइल करने की विभिन्न रणनीतियों के लिए, <a href='https://p5js.org/examples/imported-media-video/' target='_blank'>वीडियो</a> और <a href='https://p5js.org/examples/imported-media-video-canvas/' target='_blank'>वीडियो कैनवस</a> उदाहरण पर जाएं।"},"छवि ड्रॉप":{"relativeUrl":"/examples/input-elements-image-drop","description":"\r\n<a href='https://p5js.org/reference/p5.Element/drop' target='_blank'>drop()</a> एक p5.js तत्व विधि है जो हर बार कॉलबैक फ़ंक्शन को कॉल करती है जब एक फ़ाइल तत्व में लोड करना पूरा करती है। \r\nअपलोड की गई फ़ाइल एक <a href='https://p5js.org/reference/p5.File' target='_blank'>p5.File</a> क्लास में बनाई गई है।\r\nआप फ़ाइल प्रकार की जांच करने के लिए <a href='https://p5js.org/reference/p5.Element/drop' target='_blank'>drop()</a> कॉलबैक का उपयोग कर सकते हैं, और फिर विभिन्न फ़ाइल प्रकारों पर अलग-अलग प्रतिक्रिया देने के लिए सशर्त विवरण लिख सकते हैं।"},"इनपुट और बटन":{"relativeUrl":"/examples/input-elements-input-button","description":"\r\n<a href='https://p5js.org/reference/p5.Element/createElement' target='_blank'>createElement()</a>, <a href='https://p5js का उपयोग करना। org/reference/p5/createInput' target='_blank'>createInput()</a>, और <a href='https://p5js.org/reference/p5.Element/createButton' target= \"_blank\">createButton()</a> फ़ंक्शंस के साथ, आप टेक्स्ट इनपुट के माध्यम से सबमिट किए गए एक टेक्स्ट स्ट्रिंग ले सकते हैं और इसे अपने कैनवास पर प्रदर्शित कर सकते हैं।"},"फॉर्म तत्व":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"\r\n<a href='https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model' target='_blank'>डॉक्यूमेंट ऑब्जेक्ट मॉडल</a>, या DOM, वेब पेज की परिणामी संरचना का प्रतिनिधित्व करता है। \r\np5.js के फॉर्म तत्वों का उपयोग करके, जैसे <a href='https://p5js.org/reference/p5/createInput' target='_blank'>createInput()</a>, <a href='https://p5js.org/reference/p5/createSelect' target='_blank'>createSelect()</a>, और <a href='https://p5js.org/reference/p5/createRadio' target='_blank'>createRadio()</a>, आप <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select' target='_blank'>select</a>, <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input' target='_blank'>input</a>, या <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio\" target=\"_blank\">radio button</ a> के माध्यम से सबमिट की गई जानकारी लेने के विभिन्न तरीके बना सकते हैं और जानकारी के आधार पर DOM को अपडेट कर सकते हैं।\r\n "},"ट्रांसलेट":{"relativeUrl":"/examples/transformation-translate","description":"\r\n<a href='https://p5js.org/reference/p5/translate'>translate()</a> फ़ंक्शन कोऑर्डनिट सिस्टम के ऑरिजिन को निर्दिष्ट स्थान पर ले जाता है।\r\n<a href='https://p5js.org/reference/p5/push'>push()</a> और <a href='https://p5js.org/reference/p5/ pop'>पॉप()</a> फ़ंक्शन कोऑर्डनिट सिस्टम और विभिन्न अन्य ड्राइंग सेटिंग्स, जैसे भरण रंग, को सहेजते और पुनर्स्थापित करते हैं।\r\nध्यान दें कि इस उदाहरण में, हम हर बार एक अलग कोऑर्डनिट सिस्टम में आकृतियाँ (आयत और वृत्त) बनाते हैं।\r\n"},"रोटेट":{"relativeUrl":"/examples/transformation-rotate","description":"\r\n<a href='https://p5js.org/reference/p5/rotate'>rotate()</a> फ़ंक्शन वर्तमान समन्वय प्रणाली को वर्तमान मूल के चारों ओर घुमाता है।\r\nध्यान दें कि डिफ़ॉल्ट रूप से मूल कैनवास का ऊपरी बाएँ कोना है।\r\nकैनवास के केंद्र के चारों ओर घूमने के लिए, हमें पहले समन्वय प्रणाली का अनुवाद करना होगा, और फिर नए मूल के चारों ओर घूमना होगा।\r\n<a href='https://p5js.org/reference/p5/push'>push()</a> और <a href='https://p5js.org/reference/p5/ pop'>pop()</a> फ़ंक्शन क्रमशः समन्वय प्रणाली को सहेजते और पुनर्स्थापित करते हैं।\r\n"},"स्केल":{"relativeUrl":"/examples/transformation-scale","description":"\r\n<a href='https://p5js.org/reference/p5/scale'>scale()</a> फ़ंक्शन निर्दिष्ट स्केल द्वारा वर्तमान समन्वय प्रणाली को बधा देता है।\r\n<a href='https://p5js.org/reference/p5/push'>push()</a> और <a href='https://p5js.org/reference/p5/ pop'>pop()</a> फ़ंक्शन क्रमशः समन्वय प्रणाली को सहेजते और पुनर्स्थापित करते हैं।\r\nइस उदाहरण में, तीन अलग-अलग स्केलिंग फैक्टर के साथ, 200 आकार के वर्ग बनाये गये हैं।"},"रेखिक आंतरिक":{"relativeUrl":"/examples/calculating-values-interpolate","description":"\r\n<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Interpolation\" target=\"_blank\">Interpolation</a>\r\nदो अन्य मानों के बीच मान की गणना करता है। उदाहरण के लिए, संख्या 5 है\r\n0 और 10 के मध्य। विभिन्न प्रकार के प्रक्षेप उपयोग\r\nमूल्यों के बीच परिवर्तन की विभिन्न दरें। रेखिक आंतरिक,\r\nजिसे संक्षेप में एलआरपी कहा जाता है, परिवर्तन की निरंतर दर का उपयोग करता है।\r\n<a href='https://p5js.org/reference/p5/lerp' target='_blank'>lerp()</a>\r\nफ़ंक्शन दो संख्याओं के बीच रैखिक रूप से अंतरण करता है।\r\n\r\nमाउस को स्क्रीन पर ले जाएँ और प्रतीक अनुसरण करेगा।\r\nएनीमेशन के प्रत्येक फ्रेम को चित्रित करने के बीच, दीर्घवृत्त भाग चलता है\r\nकर्सर की ओर इसकी वर्तमान स्थिति से दूरी की।"},"नक्शा":{"relativeUrl":"/examples/calculating-values-map","description":"\r\nThe\r\n<a href=\"https://p5js.org/reference/p5/map\" target=\"_blank\">map()</a>\r\nफ़ंक्शन किसी मान को एक श्रेणी से दूसरी श्रेणी में परिवर्तित करता है। इस उदाहरण में, मानचित्र\r\nकर्सर की क्षैतिज स्थिति को 0-720 से 0-360 की सीमा में परिवर्तित करता है।\r\nपरिणामी मान वृत्त का रंग बन जाता है। मानचित्र कर्सर को भी परिवर्तित करता है\r\nऊर्ध्वाधर स्थिति 0-400 से 20-300 की सीमा तक। परिणामी मूल्य\r\nवृत्त का व्यास बन जाता है।"},"यादृच्छिक":{"relativeUrl":"/examples/calculating-values-random","description":"\r\nयह उदाहरण इस फंक्शन के उपयोग को \r\n<a href='https://p5js.org/reference/p5/random'>random()</a>\r\nदर्शाता है।\r\n\r\nजब उपयोगकर्ता माउस बटन दबाता है, तो स्थिति और रंग\r\nवृत्त का अनियमित रूप से परिवर्तन होता है।"},"विवश":{"relativeUrl":"/examples/calculating-values-constrain","description":"\r\nयह उदाहरण कर्सर की स्थिति के अनुसार एक वृत्त खींचता है\r\nवृत्त को एक आयत के भीतर रखता है। यह पारित करके ऐसा करता है\r\nमाउस के निर्देशांक में\r\n<a href='https://p5js.org/reference/p5/constrain' target='_blank'>constrain()</a>\r\nफंक्शन।\r\n"},"घड़ी":{"relativeUrl":"/examples/calculating-values-clock","description":"\r\nइन फंक्शन से वर्तमान समय पढ़ा जा सकता है\r\n<a href=\"https://p5js.org/reference/p5/second\" target=\"_blank\">second()</a>,\r\n<a href=\"https://p5js.org/reference/p5/minute\" target=\"_blank\">minute()</a>,\r\nand <a href=\"https://p5js.org/reference/p5/minute\" target=\"_blank\">hour()</a>\r\nयह उदाहरण उपयोग करता है\r\n<a href=\"https://p5js.org/reference/p5/map\" target=\"_blank\">map()</a>\r\nहाथों के कोण की गणना करने के लिए. इसके बाद उपयोग होता है\r\n<a href=\"https://p5js.org/reference/#group-Transform\" target=\"_blank\">transformations</a>\r\nउनकी स्थिति निर्धारित करने के लिए."},"रंग अंतर्वेशन":{"relativeUrl":"/examples/repetition-color-interpolation","description":"\r\n<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Interpolation\" target=\"_blank\">Interpolation</a>\r\nदो अन्य मानों के बीच मान की गणना करता है। उदाहरण के लिए, संख्या 5 है\r\n0 और 10 के मध्य। विभिन्न प्रकार के प्रक्षेप उपयोग\r\nमूल्यों के बीच परिवर्तन की विभिन्न दरें। रेखिक आंतरिक,\r\nजिसे संक्षेप में एलआरपी कहा जाता है, परिवर्तन की निरंतर दर का उपयोग करता है।\r\n<a href='https://p5js.org/reference/p5/lerp' target='_blank'>lerp()</a>\r\nफ़ंक्शन दो संख्याओं के बीच रैखिक रूप से अंतरण करता है।\r\n<a href='https://p5js.org/reference/p5/lerpColor' target='_blank'>lerpColor()</a>\r\nफ़ंक्शन, यहां प्रदर्शित किया गया है, दो रंगों के बीच रैखिक रूप से अंतरण करता है।\r\nइस उदाहरण में, स्ट्राइपकाउंट वैरिएबल कितने क्षैतिज को समायोजित करता है\r\nधारियाँ दिखाई देती हैं. मान को अधिक संख्या पर सेट करने से वह कम दिखाई देगी\r\nअलग-अलग धारियों की तरह और एक ढाल की तरह।"},"रंग पहिया":{"relativeUrl":"/examples/repetition-color-wheel","description":"\r\nयह उदाहरण भिन्न-भिन्न रंग की उपस्थिति को दर्शाता है\r\nयह एक का उपयोग करता है\r\n<a href='https://p5js.org/reference/p5/for' target='_blank'>for loop</a>\r\nपरिवर्तनों को दोहराने के लिए. लूप प्रारंभ होता है\r\nएक चर जिसे कोण कहा जाता है, जो वृत्त के घूर्णन को इस प्रकार बदलता है\r\nसाथ ही उसका रंग भी. हर बार जब लूप दोहराया जाता है, तो एक वृत्त खींचा जाता है\r\nकैनवास के केंद्र के सापेक्ष.\r\n<a href='https://p5js.org/reference/p5/push' target='_blank'>push()</a>\r\nऔर <a href='https://p5js.org/reference/p5/pop' target='_blank'>pop()</a>\r\nफ़ंक्शंस इन परिवर्तनों को केवल व्यक्तिगत सर्कल को प्रभावित करते हैं।\r\n"},"बेज़ियर":{"relativeUrl":"/examples/repetition-bezier","description":"\r\n<a href=\"https://p5js.org/reference/p5/bezier\" target='_blank'>bezier()</a> \r\nनियंत्रण और एंकर बिंदुओं का उपयोग करके वक्र बनाए जाते हैं।\r\nके लिए पहले दो पैरामीटर\r\n<a href='https://p5js.org/reference/p5/bezier' target='_blank'>bezier()</a>\r\nफ़ंक्शन वक्र में पहला बिंदु और अंतिम दो पैरामीटर निर्दिष्ट करता है\r\nअंतिम बिंदु निर्दिष्ट करें. मध्य पैरामीटर नियंत्रण बिंदु निर्धारित करते हैं\r\nवक्र के आकार को परिभाषित करें."},"बहुरूपदर्शक":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"\r\nबहुरूपदर्शक दो या दो से अधिक वाला एक ऑप्टिकल उपकरण है\r\nपरावर्तक सतहें एक दूसरे से एक कोण पर झुकी हुई होती हैं। का उपयोग\r\n<a href='https://p5js.org/reference/p5/translate' target='_blank'>translate()</a>,\r\n<a href='https://p5js.org/reference/p5/rotate' target='_blank'>rotate()</a>,\r\nऔर <a href='https://p5js.org/reference/p5/scale' target='_blank'>scale()</a> फ़ंक्शन, आप परिणामी दृश्य को दोहरा सकते हैं\r\nएक कैनवास में बहुरूपदर्शक का."},"शोर":{"relativeUrl":"/examples/repetition-noise","description":"\r\n<a href=\"https://en.wikipedia.org/wiki/Perlin_noise\" target=\"_blank\">Perlin noise</a>\r\nकेन पेरलिन द्वारा लिखित एक एल्गोरिदम है जो दोनों प्रकार के अनुक्रम उत्पन्न करता है\r\nयादृच्छिक और जैविक.\r\n<a href='https://p5js.org/reference/p5/noise' target='_blank'>शोर()</a>\r\np5 में फ़ंक्शन पर्लिन शोर उत्पन्न करता है।\r\n\r\nइस उदाहरण में बिंदुओं का आकार शोर मानों के आधार पर किया गया है। स्लाइडर पर\r\nबाएँ बिंदुओं के बीच की दूरी निर्धारित करता है। दाईं ओर का स्लाइडर ऑफसेट सेट करता है\r\nशोर गणना में."},"पुनरावर्ती वृक्ष":{"relativeUrl":"/examples/repetition-recursive-tree","description":"\r\nयह रिकर्सन के माध्यम से एक सरल पेड़ जैसी संरचना प्रस्तुत करने का एक उदाहरण है।\r\nशाखा कोण की गणना क्षैतिज माउस के फ़ंक्शन के रूप में की जाती है\r\nजगह। कोण बदलने के लिए माउस को बाएँ और दाएँ घुमाएँ।\r\nप्रोसेसिंग के लिए डैनियल शिफमैन के <a href=\"https://processing.org/examples/tree.html\">Recursive tree example</a> पर आधारित।\r\n"},"यादृच्छिक कविता":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"\r\n<a href='https://p5js.org/reference/p5/floor' target='_blank'>floor()</a>\r\nऔर\r\n<a href='https://p5js.org/reference/p5/random' target='_blank'>random()</a>\r\nफ़ंक्शंस, का उपयोग\r\nआप किसी सरणी से यादृच्छिक रूप से आइटमों की एक श्रृंखला का चयन कर सकते हैं\r\nऔर उन्हें कैनवास पर विभिन्न आकारों और स्थानों पर बनाएं।"},"साइन और कोसाइन":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"\r\nयह उदाहरण दर्शाता है\r\n<a href='https://en.wikipedia.org/wiki/Sine_and_cosine'>sine and cosine</a>\r\nगणितीय कार्य.\r\n\r\nएनीमेशन यूनिट सर्कल के चारों ओर एक समान गोलाकार गति दिखाता है\r\n(त्रिज्या 1 वाला वृत्त)। x-अक्ष से मापा गया कोई भी कोण\r\nवृत्त पर एक बिंदु निर्धारित करता है। कोण की कोज्या और ज्या\r\nको क्रमशः x और y निर्देशांक के रूप में परिभाषित किया गया है\r\nबिंदु।"},"उद्देश्य":{"relativeUrl":"/examples/angles-and-motion-aim","description":"\r\n<a href='https://p5js.org/reference/p5/atan2' target='_blank'>atan2()</a>\r\nफ़ंक्शन दो स्थितियों के बीच के कोण की गणना करता है। यह कोण\r\nगणना का उपयोग किसी आकृति को किसी चीज़ की ओर घुमाने के लिए किया जा सकता है। इस में\r\nउदाहरण के लिए, आंखें कर्सर को देखने के लिए घूमती हैं।"},"त्रिकोण पट्टी":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"\r\nयह उदाहरण दर्शाता है कि आकृति कैसे बनाई जाती है\r\nका उपयोग करके, इसके शीर्षों को TRIANGLE_STRIP मोड में निर्दिष्ट करके\r\n<a href='https://p5js.org/reference/p5/beginShape'>beginShape()</a>,\r\n<a href='https://p5js.org/reference/p5/endShape'>endShape()</a>,\r\nऔर\r\n<a href='https://p5js.org/reference/p5/vertex'>vertex()</a>\r\nकार्य."},"सर्कल क्लिकर":{"relativeUrl":"/examples/games-circle-clicker","description":"\r\nयह उदाहरण एक खेल को समय सीमा और स्कोर के साथ प्रदर्शित करता है। ब्राउज़र का\r\n<a href='https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage' target='_blank'>local storage</a>\r\nउच्च स्कोर को संग्रहीत करता है ताकि जब गेम उसी ब्राउज़र का उपयोग करके दोबारा खेला जाए,\r\nउच्च स्कोर बना हुआ है. ब्राउज़र डेटा साफ़ करने से उच्च स्कोर भी साफ़ हो जाता है।"},"पिंग पोंग":{"relativeUrl":"/examples/games-ping-pong","description":"\r\nयह सबसे पुराने आर्केड वीडियो में से एक से प्रेरित गेम है\r\nखेल: अटारी\r\n<a href='https://en.wikipedia.org/wiki/Pong' target='_blank'>pong</a>।\r\nइस दो-खिलाड़ियों के खेल में, प्रत्येक खिलाड़ी एक पैडल को नियंत्रित करता है, जिसे a द्वारा दर्शाया जाता है\r\nसफ़ेद आयत. W और S कुंजियाँ बाईं ओर के पैडल को ऊपर और नीचे घुमाती हैं,\r\nऔर ऊपर और नीचे तीर कुंजियाँ पैडल को दाईं ओर ऊपर और नीचे घुमाती हैं।\r\nखिलाड़ी गेंद को उछालकर अंक अर्जित करते हैं, जिसे एक सफेद वर्ग द्वारा दर्शाया जाता है,\r\nकैनवास के प्रतिद्वंद्वी पक्ष के किनारे से आगे निकलें।`"},"साँप":{"relativeUrl":"/examples/games-snake","description":"\r\nयह एक प्रकार के आर्केड गेम का पुनरुत्पादन है जिसे कहा जाता है\r\n<a href='https://en.wikipedia.org/wiki/Snake_(video_game_genre)' target='_blank'>snake</a>।\r\nपहला स्नेक गेम नाकाबंदी था, जो 1976 में जारी किया गया था, और कई\r\nगेम समान संरचना का उपयोग करते हैं. स्नेक गेम्स में, खिलाड़ी नियंत्रण करता है\r\nइस उदाहरण में साँप की गतिविधियों को हरे रंग से दर्शाया गया है\r\nरेखा। खिलाड़ी का लक्ष्य साँप को एक फल से टकराना है,\r\nएक लाल बिंदु द्वारा दर्शाया गया। हर बार सांप किसी फल से टकराता है,\r\nसाँप लम्बा हो जाता है। खिलाड़ी का लक्ष्य साँप को उतना बड़ा करना है\r\nजितना संभव हो सांप को अपने आप से या किनारों से टकराए बिना\r\nखेल क्षेत्र का.\r\n\r\nयह उदाहरण एक सारणी का उपयोग करता है\r\n<a href='https://p5js.org/reference/p5.Vector' target='_blank'>vector</a>\r\nसाँप के प्रत्येक खंड की स्थिति को संग्रहीत करने के लिए। तीर\r\nचाबियाँ साँप की गति को नियंत्रित करती हैं।"},"ज्योमेट्री":{"relativeUrl":"/examples/3d-geometries","description":"\r\np5 के <a href=\"https://p5js.org/reference/p5/WEBGL\" target=\"_blank\">WEBGL</a> \r\nमोड में 7 आदिम आकार शामिल हैं। वे आकृतियाँ समतल, बॉक्स, बेलन, शंकु, टोरस, गोला और दीर्घवृत्ताभ हैं। इसके अतिरिक्त, \r\n<a href='https://p5js.org/reference/p5/model' target=\"_blank\">model()</a> के माध्यम से लोड की गई एक कस्टम ज्यामिति प्रदर्शित करता है\r\n<a href='https://p5js.org/reference/p5/loadModel' target=\"_blank\">loadModel()</a>। \r\nइस उदाहरण में प्रत्येक आदिम आकृतियाँ शामिल हैं। इसमें <a href='https://nasa3d.arc.nasa.gov/models' \r\ntarget=\"_blank\">NASA के संग्रह</a> से एक मॉडल भी शामिल है।"},"कस्टम ज्यामिति":{"relativeUrl":"/examples/3d-custom-geometry","description":"\r\n<a href='https://p5js.org/reference/p5/buildGeometry' target=\"_blank\">buildGeometry()</a> \r\nफ़ंक्शन आकृतियों को एक 3D मॉडल में संग्रहीत करता है जिसे कुशलतापूर्वक उपयोग और पुन: उपयोग किया जा सकता है।"},"सामग्री":{"relativeUrl":"/examples/3d-materials","description":"\r\n3डी रेंडरिंग में, एक सामग्री यह निर्धारित करती है कि कोई सतह प्रकाश के प्रति कैसी प्रतिक्रिया करती है। p5 का <a href='https://p5js.org/reference/p5/WEBGL' target='_blank'>WEBGL</a> मोड सपोर्ट करता है\r\n<a href=\"https://p5js.org/reference/p5/ambientMaterial\" target=\"_blank\">परिवेश</a>,\r\n<a href=\"https://p5js.org/reference/p5/emissiveMaterial\" target=\"_blank\">उत्सर्जक</a>,\r\n<a href=\"https://p5js.org/reference/p5/normalMaterial\" target=\"_blank\">सामान्य</a>, और\r\n<a href=\"https://p5js.org/reference/p5/specularMaterial\" target=\"_blank\">स्पेक्युलर</a>\r\nसामग्री.\r\n\r\nएक परिवेशीय सामग्री केवल परिवेशी प्रकाश के प्रति प्रतिक्रिया करती है। एक स्पेक्युलर\r\nसामग्री किसी भी प्रकाश स्रोत पर प्रतिक्रिया करती है। पी5 में, एक उत्सर्जक पदार्थ\r\nप्रकाश स्रोत की परवाह किए बिना अपना रंग प्रदर्शित करता है। अन्य सन्दर्भों में,\r\nआमतौर पर एक उत्सर्जक पदार्थ प्रकाश उत्सर्जित करता है। एक सामान्य सामग्री\r\nसतह के प्रत्येक भाग की दिशा की कल्पना करता है। एक सामान्य\r\nसामग्री प्रकाश के प्रति प्रतिक्रिया नहीं करती।\r\n\r\nपरिवेशी और उत्सर्जक सामग्रियों को एक दूसरे के साथ जोड़ा जा सकता है।\r\nइन्हें फिल और स्ट्रोक के साथ भी जोड़ा जा सकता है। भरण एक आधार सेट करता है\r\nसतह के लिए रंग, और स्ट्रोक वस्तु के लिए रंग निर्धारित करता है\r\nशिखर.\r\n\r\nइसके अतिरिक्त,\r\n<a href=\"https://p5js.org/reference/p5/texture\" target=\"_blank\">texture()</a>\r\nकिसी वस्तु को छवि के साथ लपेटता है। इस उदाहरण में मॉडल और छवि बनावट हैं <a href=\"https://nasa3d.arc.nasa.gov\" target=\"_blank\">NASA</a> के संग्रह से।."},"कक्षा नियंत्रण":{"relativeUrl":"/examples/3d-orbit-control","description":"\r\n<a href='https://p5js.org/reference/p5/orbitControl' target=\"_blank\">कक्षा नियंत्रण</a>\r\n3D में कैमरा ओरिएंटेशन को समायोजित करने के लिए माउस या टच इनपुट का उपयोग करता है\r\nस्केच. कैमरा घुमाने के लिए, माउस पर बायाँ-क्लिक करें और खींचें या स्वाइप करें\r\nएक टच स्क्रीन पर. कैमरे को पैन करने के लिए, राइट क्लिक करें और माउस खींचें\r\nया टच स्क्रीन पर एकाधिक अंगुलियों से स्वाइप करें। कैमरा हिलाने के लिए\r\nस्केच के केंद्र के करीब या आगे, स्क्रॉल व्हील का उपयोग करें\r\nमाउस पर या टच स्क्रीन पर पिंच इन/आउट करें।"},"फ़िल्टर शेडर":{"relativeUrl":"/examples/3d-filter-shader","description":"\r\nफ़िल्टर शेडर्स किसी भी चीज़ पर प्रभाव लागू करने का एक तरीका है\r\nकैनवास पर है. इस उदाहरण में, प्रभाव एक वीडियो पर लागू किया जाता है।"},"शेडर के साथ स्थितियों को समायोजित करना":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"\r\nशेडर्स आकृतियों के शीर्षों की स्थिति को समायोजित कर सकते हैं।\r\nयह आपको 3D मॉडल को विकृत और चेतन करने देता है।"},"फ़्रेमबफ़र धुंधला":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"\r\nइस उदाहरण में <a href='https://www.khronos.org/opengl/wiki/Shader' target=\"_blank\">shader</a> ब्लर लगाने के लिए \r\n<a href=\"https://p5js.org/reference/p5.Framebuffer\" target=\"_blank\">p5.Framebuffer</a> से गहराई से जानकारी का उपयोग करता है। वास्तविक कैमरे पर, वस्तुएँ धुंधली दिखाई देती हैं यदि वे लेंस के फोकस से अधिक निकट या दूर हों। यह उस प्रभाव का अनुकरण करता है. सबसे पहले, स्केच फ़्रेमबफ़र को पांच गोले प्रदान करता है। फिर, \r\nयह ब्लर शेडर का उपयोग करके फ़्रेमबफ़र को कैनवास पर प्रस्तुत करता है।"},"ग्राफ़िक्स बनाएं":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"\r\n<a href=\"https://p5js.org/reference/p5/createGraphics\" target=\"_blank\">createGraphics()</a>\r\nफ़ंक्शन का उपयोग एक नया p5.Graphics ऑब्जेक्ट बनाने के लिए किया जा सकता है, जो कैनवास के भीतर एक ऑफ-स्क्रीन ग्राफिक्स बफर के रूप में काम कर सकता है। \r\nऑफ-स्क्रीन बफ़र्स के आयाम और गुण उनकी वर्तमान डिस्प्ले सतह से भिन्न हो सकते हैं, भले ही वे एक ही स्थान पर मौजूद प्रतीत होते हों।"},"एकाधिक कैनवस":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"\r\nडिफ़ॉल्ट रूप से, p5 ग्लोबल मोड में चलता है, जिसका अर्थ है\r\nसभी p5 फ़ंक्शंस वैश्विक दायरे में हैं, और सभी कैनवास-संबंधित फ़ंक्शंस\r\nएक ही कैनवास पर लागू करें. p5 इंस्टेंस मोड में भी चल सकता है, जिसमें वे\r\nसमान फ़ंक्शन p5 वर्ग के उदाहरण की विधियाँ हैं। प्रत्येक उदाहरण\r\np5 का अपना कैनवास हो सकता है.\r\n\r\nइंस्टेंस मोड का उपयोग करने के लिए, एक फ़ंक्शन को प्रतिनिधित्व करने वाले पैरामीटर के साथ परिभाषित किया जाना चाहिए\r\np5 उदाहरण (इस उदाहरण में p लेबल किया गया है)। सभी p5 फ़ंक्शंस और वेरिएबल्स\r\nजो आम तौर पर वैश्विक हैं वे इस फ़ंक्शन के भीतर इस पैरामीटर से संबंधित होंगे\r\nदायरा। फ़ंक्शन को p5 कंस्ट्रक्टर में पास करके, उसे चलाता है।"},"एक बनावट के रूप में शेडर":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"\r\nशेडर्स को टेक्सचर के रूप में 2D/3D आकृतियों पर लागू किया जा सकता है।\r\n\r\nP5.js में शेडर्स का उपयोग करने के बारे में अधिक जानने के लिए:\r\n<a href='https://itp-xstory.github.io/p5js-shaders/'>p5.js Shaders</a>"},"बर्फ के टुकड़े":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"\r\nयह उदाहरण कण प्रणाली के उपयोग को प्रदर्शित करता है\r\nगिरते बर्फ के टुकड़ों की गति का अनुकरण करने के लिए। यह प्रोग्राम एक को परिभाषित करता है\r\nस्नोफ्लेक <a href='https://p5js.org/reference/p5/class'>class</a>\r\nऔर बर्फ के टुकड़े वाली वस्तुओं को रखने के लिए एक सरणी का उपयोग करता है।"},"शेक बॉल बाउंस":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"\r\n<a href='https://p5js.org/reference/p5/class' target=\"_blank\">class</a> का उपयोग करके, आप उन वृत्तों का एक संग्रह\r\nबना सकते हैं जो कैनवास के भीतर चलते हैं मोबाइल डिवाइस का झुकाव. स्केच प्रदर्शित करने के लिए आपको यह पृष्ठ मोबाइल डिवाइस पर खोलना होगा।"},"जुड़े हुए कण":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"\r\nयह उदाहरण दो कस्टम <a href='https://p5js.org/reference/p5/class' target='_blank'>Classes</a> का उपयोग करता है।\r\nकण वर्ग स्थिति, वेग और रंग को संग्रहीत करता है। यह प्रस्तुत करता है\r\nवर्तमान स्थिति और रंग का उपयोग करके एक वृत्त, और यह अद्यतन करता है\r\nवर्तमान वेग का उपयोग कर स्थिति. पथ वर्ग एक सरणी संग्रहीत करता है\r\nकण वर्ग से निर्मित वस्तुओं की। यह पंक्तियाँ प्रस्तुत करता है\r\nप्रत्येक कण को जोड़ना। जब उपयोगकर्ता माउस पर क्लिक करता है\r\nस्केच पथ वर्ग का एक नया उदाहरण बनाता है। जब उपयोगकर्ता खींचता है\r\nमाउस, स्केच कण वर्ग का एक नया उदाहरण जोड़ता है\r\nवर्तमान पथ."},"झुंड बनाना":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"\r\nझुंड के व्यवहार का प्रदर्शन. कार्यान्वयन की पूरी चर्चा डेनियल शिफ़मैन की <a href=\"https://natureofcode.com/book/chapter-6-autonomous-agents/\">Nature of Code</a> पुस्तक में पाई जा सकती है। सिमुलेशन <a href=\"http://www.red3d.com/cwr/\">क्रेग रेनॉल्ड्स</a> \r\nके शोध पर आधारित है, जिन्होंने पक्षी जैसी वस्तु का प्रतिनिधित्व करने के लिए 'बॉइड' शब्द का इस्तेमाल किया था।"},"स्थानीय भंडारण":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"\nब्राउज़र वेबसाइटों को विज़िटर का डेटा संग्रहीत करने की अनुमति देते हैं\nउपकरण। यह कहा जाता है\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">local storage</a>.\n<a href=\"https://p5js.org/reference/p5/getItem\" target=\"_blank\">getItem()</a>,\n<a href=\"https://p5js.org/reference/p5/storeItem\" target=\"_blank\">storeItem()</a>,\n<a href=\"https://p5js.org/reference/p5/clearStorage\" target=\"_blank\">clearStorage()</a>,\nand <a href=\"https://p5js.org/reference/p5/removeItem\" target=\"_blank\">removeItem()</a>\nफ़ंक्शन इसे नियंत्रित करते हैं.\n\nयह उदाहरण जावा में लिखे डैनियल शिफमैन के लोडिंग JSON डेटा और प्रोसेसिंग के लिए सारणीबद्ध डेटा उदाहरणों को लोड करने से प्रेरित है। \nयह बबल के लिए डेटा व्यवस्थित करने के लिए <a href=\"https://p5js.org/reference/p5/class\" target=\"_blank\">class</a>\nका उपयोग करता है। विज़िटर नए बबल जोड़ सकते हैं, और उनका डेटा स्थानीय संग्रहण में सहेजा जाएगा। यदि आगंतुक स्केच को दोबारा देखता है, तो वह उसी बुलबुले को फिर से लोड करेगा।"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"\n<a href='https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON' target='_blank'>जावास्क्रिप्ट ऑब्जेक्ट नोटेशन, या JSON</a>,\n एक प्रारूप है किसी फ़ाइल में डेटा लिखना. जबकि सिंटैक्स जावास्क्रिप्ट से आता है, JSON का उपयोग कई अन्य संदर्भों में किया जाता है। \n यह उदाहरण जावा में लिखे डैनियल शिफमैन के लोडिंग JSON डेटा उदाहरण फॉर प्रोसेसिंग पर आधारित है। यह एक \n <a href='https://p5js.org/reference/p5/class' target='_blank'>class</a> का उपयोग करता है\nएक बुलबुले के लिए डेटा व्यवस्थित करने के लिए। जब स्केच शुरू होता है, तो यह JSON फ़ाइल से दो बबल के लिए डेटा लोड करता है। \nविज़िटर नए बबल जोड़ सकता है, एक अद्यतन JSON फ़ाइल डाउनलोड कर सकता है और JSON फ़ाइल में लोड कर सकता है।"},"तालिका":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"\nकॉमा-सेपरेटेड वैल्यूज़, या सीएसवी, फ़ाइल में डेटा लिखने का एक प्रारूप है। p5 \n<a href='https://p5js.org/reference/p5.Table' target='_blank'>p5.Table</a> \nका उपयोग करके इस प्रारूप के साथ काम कर सकता है। यह उदाहरण प्रोसेसिंग के लिए डेनियल शिफमैन के \n<a href=\"https://processing.org/examples/loadsavetable.html\" target=\"_blank\">Loading Tabular Data</a> \nउदाहरण पर आधारित है। यह बुलबुले का प्रतिनिधित्व करने वाले डेटा को व्यवस्थित करने के लिए एक वर्ग का उपयोग करता है। जब स्केच शुरू होता है, \nतो यह CSV फ़ाइल से चार बबल के लिए डेटा लोड करता है। विज़िटर नए बबल जोड़ सकता है, अद्यतन CSV फ़ाइल डाउनलोड कर सकता है और CSV फ़ाइल में लोड कर सकता है।"},"गैर-ऑर्थोगोनल प्रतिबिंब":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"\nयह उदाहरण एक गेंद को तिरछी दिशा में उछलते हुए दर्शाता है\nसतह, प्रतिबिंब के लिए वेक्टर गणनाओं का उपयोग करके कार्यान्वित की गई।\n\nकोड का व्यापक उपयोग होता है\n<a href='https://p5js.org/reference/p5.Vector'>p5.Vector</a>\nवर्ग, सहित\n<a href='https://p5js.org/reference/p5/createVector'>createVector()</a> नए वेक्टर बनाने के लिए फ़ंक्शन,\nऔर वेक्टर विधियाँ\n<a href='https://p5js.org/reference/p5.Vector/add'>add()</a>\nऔर\n<a href='https://p5js.org/reference/p5.Vector/dot'>dot()</a>\nवेक्टर गणना के लिए."},"नरम शरीर":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"\nनरम शरीर के अनुभव का भौतिकी अनुकरण\nमाउस की स्थिति की ओर त्वरण। आकृति निर्मित होती है\n<a href='https://p5js.org/reference/p5/curveVertex'>curveVertex()</a> का उपयोग करके वक्रों के साथ\nऔर <a href='https://p5js.org/reference/p5/curveTightness'>curveTightness()</a>।"},"ताकतों":{"relativeUrl":"/examples/math-and-physics-forces","description":"\nपिंडों पर कार्य करने वाली अनेक शक्तियों का प्रदर्शन।\nपिंड लगातार गुरुत्वाकर्षण का अनुभव करते हैं। शरीर में तरल पदार्थ का अनुभव होता है\n\"पानी\" में होने पर प्रतिरोध।\n(<a href=\"http://natureofcode.com\">natureofcode.com</a>)\n\nबल की गणना का उपयोग करके की जाती है\n<a href='https://p5js.org/reference/p5.Vector'>p5.Vector</a>\nक्लास, जिसमें वेक्टर बनाने के लिए <a href='https://p5js.org/reference/p5/createVector'>createVector()</a> फ़ंक्शन शामिल है।"},"धुएँ के कण":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"\n\nस्मोक पार्टिकल सिस्टम डेमो, प्रसंस्करण के लिए डैन शिफमैन के मूल <a href=\"https://natureofcode.com/book/chapter-4-particle-systems/\">उदाहरण</a> पर आधारित है। कोड का उपयोग करता है\n<a href='https://p5js.org/reference/p5.Vector'>p5.Vector</a>\nक्लास, जिसमें <a href='https://p5js.org/reference/p5/createVector'>createVector()</a> फ़ंक्शन शामिल है। कणों को अद्यतन करने के लिए विभिन्न गणनाएँ'\nस्थिति और वेग p5.वेक्टर विधियों से निष्पादित किए जाते हैं। कण प्रणाली को एक <a href='https://p5js.org/reference/p5/class'>वर्ग</a> के रूप में कार्यान्वित किया जाता है, जिसमें वस्तुओं की एक सरणी होती है (वर्ग कण की)।"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"\nद गेम ऑफ लाइफ गणितज्ञ जॉन कॉनवे द्वारा बनाया गया एक सेलुलर ऑटोमेटन है। सेल्युलर ऑटोमेटन एक प्रकार का अनुकरण है। \nजीवन के खेल में, कोशिकाओं का एक ग्रिड होता है जिसमें प्रत्येक कोशिका या तो मृत होती है या जीवित होती है। इस उदाहरण में, \nकाले वर्ग जीवित कोशिकाओं का प्रतिनिधित्व करते हैं और सफेद वर्ग मृत कोशिकाओं का प्रतिनिधित्व करते हैं। जैसे-जैसे सिमुलेशन चलता है, \nकोशिकाएं नियमों के एक सेट के आधार पर मृत और जीवित होने के बीच स्विच करती हैं:\n<ol>\n <li>दो से कम जीवित पड़ोसियों वाली कोई भी जीवित कोशिका मर जाती है।</li>\n <li>तीन से अधिक जीवित पड़ोसियों वाली कोई भी जीवित कोशिका मर जाती है।</li>\n <li>दो या तीन जीवित पड़ोसियों के साथ कोई भी जीवित कोशिका अपरिवर्तित रहती है,\nअगली पीढ़ी के लिए.</li>\n <li>ठीक तीन जीवित पड़ोसियों वाली कोई भी मृत कोशिका जीवित हो जाएगी।</li>\n</ol>\nये नियम जटिल अंतःक्रियाएँ उत्पन्न करते हैं। आरंभ करने के लिए कैनवास पर क्लिक करें\nयादृच्छिक कोशिकाओं के साथ अनुकरण। कैनवास पर फिर से क्लिक करना होगा\nइसे पुनः आरंभ करें."},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"\nडैनियल शिफ़मैन के आधार पर मैंडेलब्रॉट सेट का रंगीन प्रतिपादन प्रसंस्करण के लिए <a ref='https://processing.org/examples/mandelbrot.html'> मैंडेलब्रॉट उदाहरण</a>।"}},"reference":{"Array":{"relativeUrl":"/reference/p5/Array"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour":{"relativeUrl":"/reference/p5/beginContour"},"beginGeometry":{"relativeUrl":"/reference/p5/beginGeometry"},"beginShape":{"relativeUrl":"/reference/p5/beginShape"},"bezier":{"relativeUrl":"/reference/p5/bezier"},"bezierDetail":{"relativeUrl":"/reference/p5/bezierDetail"},"bezierPoint":{"relativeUrl":"/reference/p5/bezierPoint"},"bezierTangent":{"relativeUrl":"/reference/p5/bezierTangent"},"bezierVertex":{"relativeUrl":"/reference/p5/bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box":{"relativeUrl":"/reference/p5/box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry":{"relativeUrl":"/reference/p5/buildGeometry"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone":{"relativeUrl":"/reference/p5/cone"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA":{"relativeUrl":"/reference/p5/createA"},"createAudio":{"relativeUrl":"/reference/p5/createAudio"},"createButton":{"relativeUrl":"/reference/p5/createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCapture":{"relativeUrl":"/reference/p5/createCapture"},"createCheckbox":{"relativeUrl":"/reference/p5/createCheckbox"},"createColorPicker":{"relativeUrl":"/reference/p5/createColorPicker"},"createDiv":{"relativeUrl":"/reference/p5/createDiv"},"createElement":{"relativeUrl":"/reference/p5/createElement"},"createFileInput":{"relativeUrl":"/reference/p5/createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg":{"relativeUrl":"/reference/p5/createImg"},"createInput":{"relativeUrl":"/reference/p5/createInput"},"createP":{"relativeUrl":"/reference/p5/createP"},"createRadio":{"relativeUrl":"/reference/p5/createRadio"},"createSelect":{"relativeUrl":"/reference/p5/createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider":{"relativeUrl":"/reference/p5/createSlider"},"createSpan":{"relativeUrl":"/reference/p5/createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo":{"relativeUrl":"/reference/p5/createVideo"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve":{"relativeUrl":"/reference/p5/curve"},"curveDetail":{"relativeUrl":"/reference/p5/curveDetail"},"curvePoint":{"relativeUrl":"/reference/p5/curvePoint"},"curveTangent":{"relativeUrl":"/reference/p5/curveTangent"},"curveTightness":{"relativeUrl":"/reference/p5/curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder":{"relativeUrl":"/reference/p5/cylinder"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid":{"relativeUrl":"/reference/p5/ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour":{"relativeUrl":"/reference/p5/endContour"},"endGeometry":{"relativeUrl":"/reference/p5/endGeometry"},"endShape":{"relativeUrl":"/reference/p5/endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry":{"relativeUrl":"/reference/p5/freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadModel":{"relativeUrl":"/reference/p5/loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"model":{"relativeUrl":"/reference/p5/model"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal":{"relativeUrl":"/reference/p5/normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"Number":{"relativeUrl":"/reference/p5/number"},"Object":{"relativeUrl":"/reference/p5/object"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane":{"relativeUrl":"/reference/p5/plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex":{"relativeUrl":"/reference/p5/quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"removeElements":{"relativeUrl":"/reference/p5/removeElements"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"select":{"relativeUrl":"/reference/p5/select"},"selectAll":{"relativeUrl":"/reference/p5/selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere":{"relativeUrl":"/reference/p5/sphere"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"String":{"relativeUrl":"/reference/p5/string"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus":{"relativeUrl":"/reference/p5/torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex":{"relativeUrl":"/reference/p5/vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"}},"contributor-docs-fallback":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure success volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increase groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](https://p5js.org/reference/p5.sound), [class page](https://p5js.org/reference/p5/p5.Vector), [method page](https://p5js.org/reference/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (https://p5js.org/reference/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (https://p5js.org/reference/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (https://p5js.org/reference/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (https://p5js.org/reference/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```javascript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (https://p5js.org/reference/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (https://p5js.org/reference/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"JSDoc Best Practices\n":{"relativeUrl":"/contribute/jsdoc","description":"Documentation website built comments p5js repo things mind order documentation parsed correctly ## * top file add comment `@module` tag optionally `@submodule` reference category subcategory names contents ```js /** @module Rendering */ ``` Data @submodule LocalStorage classes Create *outside* addon function assign `p5` *inside* class MyClass { // } export default myAddonp5 fn p5MyClass = Document methods directly members *without* `@method` Description myMethod return spot added definition include `@class` including prefix parameters constructor description exist constructorn thisn @class @param {Number} number pass properties `@for` referencing `@property` naming property myProperty @property @for global functions Add listing @method myFunction p5myFunction dynamically generated usual `@for p5` const key ['nameA' nameB'] fn[key] `Hello ${key}` nameA p5 nameB Mark showing `@private` automatically start `_` @private privateMethodA _privateMethodB"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed requires temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve *Both 1x include system diffing algorithm robust system* operating systems browsers render graphics subtle variations differences normal fail Common acceptable Single-pixel shifts line positions Slight anti-aliasing Text font weight kerning Minor curve smoothness text rendered macOS slightly Linux applies thin lines curves graphical elements image earlier caused environments [Example]src/content/contributor-docs/images/pixelmatch2png sophisticated distinguish Initial Compares pixels moderate threshold identify [pixelmatch](https://github.com/mapbox/pixelmatch/) pixel Cluster identification Groups connected difference Breadth-First Search BFS Pattern recognition specifically identifies Line shift clusters represent element shifted 1px Isolated noise Smart failure criteria Applies thresholds Ignores smaller total significant Permits minor typical platforms [Example]src/content/contributor-docs/images/pixelmatchpng balances sensitivity real tolerating platform-specific parameters const MIN_CLUSTER_SIZE Minimum cluster MAX_TOTAL_DIFF_PIXELS Maximum allowed analyzing neighborhood 80% ≤2 neighbors classified structural intelligent ensures due catching important note improved pass failed detecting showing visually meaningful makes reliable reduces failures require manual investigation ### efficient sizes dimensions close 50x50 resizes images canvases result faster Focus visible details intricate hard Design demonstrate reduced cramming variants call times visualTest'stroke variations' stroke p5stroke0 p5strokeWeight1 p5line10 Screenshot thick p5strokeWeight5"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples-fallback":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries-fallback":{"AnimatorJs":{"relativeUrl":"/libraries/","description":"A javascript animation viewer based on a custom animation API primarily designed for p5.js and allows for dynamic, lightweight, real-time rendered browser animations controlled purely by code."},"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Pixyp5js":{"relativeUrl":"/libraries/","description":"A library for easily more easily dealing with pixels in images during runtime"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"TurtleGraphics":{"relativeUrl":"/libraries/","description":"Watch images being drawn using turtle graphics."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"Zoomp5js":{"relativeUrl":"/libraries/","description":"A simple library for adding the zooming functionality to your p5.js project."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.5":{"relativeUrl":"/libraries/","description":"Add UI to p5.js and other goodies"},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Modbuttons":{"relativeUrl":"/libraries/","description":"a simple and modular button system for p5js"},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Sprite":{"relativeUrl":"/libraries/","description":"A basic sprite library that supports both animated and static sprites for p5.js"},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.colorGenerator":{"relativeUrl":"/libraries/","description":"p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point."},"p5.comfyui-helper":{"relativeUrl":"/libraries/","description":"A library for interfacing with ComfyUI"},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."},"XYscope.js":{"relativeUrl":"/libraries/","description":"p5.js library to render graphics on analog vector displays"}},"events-fallback":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro VimeoEmbed ///components/VimeoEmbed/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg Introduction Casey Reas Johanna Hedva Stephanie Pi Phoenix Perry Taeyoon Choi Sara Hendren Epic Jefferson Chandler McWilliams Q&A ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people-fallback":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aarati Akkapeddi ":{"relativeUrl":"/people/#aarati-akkapeddi-"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aaron Welles":{"relativeUrl":"/people/#aaron-welles"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abdiel Lopez":{"relativeUrl":"/people/#abdiel-lopez"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Animesh Sinha":{"relativeUrl":"/people/#animesh-sinha"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antoinette Bumatay-Chan":{"relativeUrl":"/people/#antoinette-bumatay-chan"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashish Karn":{"relativeUrl":"/people/#ashish-karn"},"ashish singh":{"relativeUrl":"/people/#ashish-singh"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"Ashwani Dey":{"relativeUrl":"/people/#ashwani-dey"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"beau-muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"benpalevsky":{"relativeUrl":"/people/#benpalevsky"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"blackboxlogic":{"relativeUrl":"/people/#blackboxlogic"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Bojidar Marinov":{"relativeUrl":"/people/#bojidar-marinov"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"c-dacanay":{"relativeUrl":"/people/#c-dacanay"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Callie":{"relativeUrl":"/people/#callie"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Carrie Wang":{"relativeUrl":"/people/#carrie-wang"},"Casey Conchinha":{"relativeUrl":"/people/#casey-conchinha"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chloe Yan":{"relativeUrl":"/people/#chloe-yan"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"cog25":{"relativeUrl":"/people/#cog25"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"computational mama":{"relativeUrl":"/people/#computational-mama"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"crh82":{"relativeUrl":"/people/#crh82"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Darren Kessner":{"relativeUrl":"/people/#darren-kessner"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"davidblitz":{"relativeUrl":"/people/#davidblitz"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"dhanush":{"relativeUrl":"/people/#dhanush"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"FORCHA PEARL":{"relativeUrl":"/people/#forcha-pearl"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Franolich Design":{"relativeUrl":"/people/#franolich-design"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gabriel Sroka":{"relativeUrl":"/people/#gabriel-sroka"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Albers":{"relativeUrl":"/people/#greg-albers"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Greg Stanton":{"relativeUrl":"/people/#greg-stanton"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Kholiya":{"relativeUrl":"/people/#himanshu-kholiya"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"Ilona Brand":{"relativeUrl":"/people/#ilona-brand"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jackie Liu":{"relativeUrl":"/people/#jackie-liu"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Berghold":{"relativeUrl":"/people/#jared-berghold"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"jeanette":{"relativeUrl":"/people/#jeanette"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Philyaw":{"relativeUrl":"/people/#jordan-philyaw"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Kathryn Lichlyter":{"relativeUrl":"/people/#kathryn-lichlyter"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Gupta":{"relativeUrl":"/people/#keshav-gupta"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"Kit Kuksenok":{"relativeUrl":"/people/#kit-kuksenok"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"Kristian Hamilton":{"relativeUrl":"/people/#kristian-hamilton"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Berrios":{"relativeUrl":"/people/#lauren-berrios"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"Luke Plowden":{"relativeUrl":"/people/#luke-plowden"},"M":{"relativeUrl":"/people/#m"},"ma haidong":{"relativeUrl":"/people/#ma-haidong"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marco Macarena":{"relativeUrl":"/people/#marco-macarena"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Martin Leopold Groedl":{"relativeUrl":"/people/#martin-leopold-groedl"},"Martin Lorentzon":{"relativeUrl":"/people/#martin-lorentzon"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"mathewpan2":{"relativeUrl":"/people/#mathewpan2"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Arguelles":{"relativeUrl":"/people/#maya-arguelles"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"Mayank Verma":{"relativeUrl":"/people/#mayank-verma"},"mclark414":{"relativeUrl":"/people/#mclark414"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"Melody Sharp":{"relativeUrl":"/people/#melody-sharp"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"Mx. Ramsey":{"relativeUrl":"/people/#mx--ramsey"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"oliver thurley":{"relativeUrl":"/people/#oliver-thurley"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"Pim Tournaye":{"relativeUrl":"/people/#pim-tournaye"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Qingfeng Huang":{"relativeUrl":"/people/#qingfeng-huang"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajas Samse":{"relativeUrl":"/people/#rajas-samse"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"Renjie Li":{"relativeUrl":"/people/#renjie-li"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishab Kumar Jha":{"relativeUrl":"/people/#rishab-kumar-jha"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Rishi":{"relativeUrl":"/people/#rishi"},"Ritesh Patil":{"relativeUrl":"/people/#ritesh-patil"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"roxi09":{"relativeUrl":"/people/#roxi09"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"Seyko":{"relativeUrl":"/people/#seyko"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shoury Singh":{"relativeUrl":"/people/#shoury-singh"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Tibor Udvari":{"relativeUrl":"/people/#tibor-udvari"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Vaivaswat Dubey":{"relativeUrl":"/people/#vaivaswat-dubey"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"Vik":{"relativeUrl":"/people/#vik"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishesh Rawal":{"relativeUrl":"/people/#vishesh-rawal"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"willallstet":{"relativeUrl":"/people/#willallstet"},"William Hazard":{"relativeUrl":"/people/#william-hazard"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"Xevi H. Aqeel":{"relativeUrl":"/people/#xevi-h--aqeel"},"Xin Xin":{"relativeUrl":"/people/#xin-xin"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"ℤ":{"relativeUrl":"/people/#ℤ"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference-fallback":{"HSB":{"relativeUrl":"/reference/p5/HSB"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"addElement()":{"relativeUrl":"/reference/p5/addElement","alias":"addElement"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"baseColorShader()":{"relativeUrl":"/reference/p5/baseColorShader","alias":"baseColorShader"},"baseFilterShader()":{"relativeUrl":"/reference/p5/baseFilterShader","alias":"baseFilterShader"},"baseMaterialShader()":{"relativeUrl":"/reference/p5/baseMaterialShader","alias":"baseMaterialShader"},"baseNormalShader()":{"relativeUrl":"/reference/p5/baseNormalShader","alias":"baseNormalShader"},"baseStrokeShader()":{"relativeUrl":"/reference/p5/baseStrokeShader","alias":"baseStrokeShader"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierOrder()":{"relativeUrl":"/reference/p5/bezierOrder","alias":"bezierOrder"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"close()":{"relativeUrl":"/reference/p5/close","alias":"close"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEG_TO_RAD":{"relativeUrl":"/reference/p5/DEG_TO_RAD"},"EXCLUDE":{"relativeUrl":"/reference/p5/EXCLUDE"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"INCLUDE":{"relativeUrl":"/reference/p5/INCLUDE"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createModel()":{"relativeUrl":"/reference/p5/createModel","alias":"createModel"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"fontAscent()":{"relativeUrl":"/reference/p5/fontAscent","alias":"fontAscent"},"fontBounds()":{"relativeUrl":"/reference/p5/fontBounds","alias":"fontBounds"},"fontDescent()":{"relativeUrl":"/reference/p5/fontDescent","alias":"fontDescent"},"fontWidth()":{"relativeUrl":"/reference/p5/fontWidth","alias":"fontWidth"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"imageShader()":{"relativeUrl":"/reference/p5/imageShader","alias":"imageShader"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBlob()":{"relativeUrl":"/reference/p5/loadBlob","alias":"loadBlob"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFilterShader()":{"relativeUrl":"/reference/p5/loadFilterShader","alias":"loadFilterShader"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"paletteLerp()":{"relativeUrl":"/reference/p5/paletteLerp","alias":"paletteLerp"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveObj()":{"relativeUrl":"/reference/p5/saveObj","alias":"saveObj"},"saveStl()":{"relativeUrl":"/reference/p5/saveStl","alias":"saveStl"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"screenToWorld()":{"relativeUrl":"/reference/p5/screenToWorld","alias":"screenToWorld"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spline()":{"relativeUrl":"/reference/p5/spline","alias":"spline"},"splinePoint()":{"relativeUrl":"/reference/p5/splinePoint","alias":"splinePoint"},"splineProperties()":{"relativeUrl":"/reference/p5/splineProperties","alias":"splineProperties"},"splineProperty()":{"relativeUrl":"/reference/p5/splineProperty","alias":"splineProperty"},"splineTangent()":{"relativeUrl":"/reference/p5/splineTangent","alias":"splineTangent"},"splineVertex()":{"relativeUrl":"/reference/p5/splineVertex","alias":"splineVertex"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeMode()":{"relativeUrl":"/reference/p5/strokeMode","alias":"strokeMode"},"strokeShader()":{"relativeUrl":"/reference/p5/strokeShader","alias":"strokeShader"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textBounds()":{"relativeUrl":"/reference/p5/textBounds","alias":"textBounds"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textDirection()":{"relativeUrl":"/reference/p5/textDirection","alias":"textDirection"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textProperties()":{"relativeUrl":"/reference/p5/textProperties","alias":"textProperties"},"textProperty()":{"relativeUrl":"/reference/p5/textProperty","alias":"textProperty"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWeight()":{"relativeUrl":"/reference/p5/textWeight","alias":"textWeight"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"vertexProperty()":{"relativeUrl":"/reference/p5/vertexProperty","alias":"vertexProperty"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"worldToScreen()":{"relativeUrl":"/reference/p5/worldToScreen","alias":"worldToScreen"},"write()":{"relativeUrl":"/reference/p5/write","alias":"write"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.Biquad.freq()":{"relativeUrl":"/reference/p5.Biquad/freq","alias":"freq"},"p5.Biquad.gain()":{"relativeUrl":"/reference/p5.Biquad/gain","alias":"gain"},"p5.Biquad.res()":{"relativeUrl":"/reference/p5.Biquad/res","alias":"res"},"p5.Biquad.setType()":{"relativeUrl":"/reference/p5.Biquad/setType","alias":"setType"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.changed()":{"relativeUrl":"/reference/p5.Element/changed","alias":"changed"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.input()":{"relativeUrl":"/reference/p5.Element/input","alias":"input"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.attackTime()":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.releaseTime()":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Font.textToContours()":{"relativeUrl":"/reference/p5.Font/textToContours","alias":"textToContours"},"p5.Font.textToModel()":{"relativeUrl":"/reference/p5.Font/textToModel","alias":"textToModel"},"p5.Font.textToPaths()":{"relativeUrl":"/reference/p5.Font/textToPaths","alias":"textToPaths"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertexProperty()":{"relativeUrl":"/reference/p5.Geometry/vertexProperty","alias":"vertexProperty"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.Noise.amp()":{"relativeUrl":"/reference/p5.Noise/amp","alias":"amp"},"p5.Noise.start()":{"relativeUrl":"/reference/p5.Noise/start","alias":"start"},"p5.Noise.stop()":{"relativeUrl":"/reference/p5.Noise/stop","alias":"stop"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner.pan()":{"relativeUrl":"/reference/p5.Panner/pan","alias":"pan"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rolloff()":{"relativeUrl":"/reference/p5.Panner3D/rolloff","alias":"rolloff"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.PitchShifter.shift()":{"relativeUrl":"/reference/p5.PitchShifter/shift","alias":"shift"},"p5.Reverb.drywet()":{"relativeUrl":"/reference/p5.Reverb/drywet","alias":"drywet"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.inspectHooks()":{"relativeUrl":"/reference/p5.Shader/inspectHooks","alias":"inspectHooks"},"p5.Shader.modify()":{"relativeUrl":"/reference/p5.Shader/modify","alias":"modify"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.Shader.version()":{"relativeUrl":"/reference/p5.Shader/version","alias":"version"},"p5.SoundFile.amp()":{"relativeUrl":"/reference/p5.SoundFile/amp","alias":"amp"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.start()":{"relativeUrl":"/reference/p5.SoundFile/start","alias":"start"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.getValue()":{"relativeUrl":"/reference/p5.Vector/getValue","alias":"getValue"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.setValue()":{"relativeUrl":"/reference/p5.Vector/setValue","alias":"setValue"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.sound.getAudioContext()":{"relativeUrl":"/reference/p5.sound/getAudioContext","alias":"getAudioContext"},"p5.sound.loadSound()":{"relativeUrl":"/reference/p5.sound/loadSound","alias":"loadSound"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.BandPass":{"relativeUrl":"/reference/p5.sound/p5.BandPass"},"p5.Biquad":{"relativeUrl":"/reference/p5.sound/p5.Biquad"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.HighPass":{"relativeUrl":"/reference/p5.sound/p5.HighPass"},"p5.LowPass":{"relativeUrl":"/reference/p5.sound/p5.LowPass"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner":{"relativeUrl":"/reference/p5.sound/p5.Panner"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.PitchShifter":{"relativeUrl":"/reference/p5.sound/p5.PitchShifter"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"},"p5.sound.setAudioContext()":{"relativeUrl":"/reference/p5.sound/setAudioContext","alias":"setAudioContext"},"p5.sound.userStartAudio()":{"relativeUrl":"/reference/p5.sound/userStartAudio","alias":"userStartAudio"},"p5.sound.userStopAudio()":{"relativeUrl":"/reference/p5.sound/userStopAudio","alias":"userStopAudio"}},"tutorials-fallback":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Chatting with/about Code":{"relativeUrl":"/tutorials/criticalAI1-chatting-with-about-code","description":"Using generative AI to code with p5.js"},"Critical AI Prompt Battle":{"relativeUrl":"/tutorials/criticalAI2-prompt-battle","description":"Build a tool to compare generative AI prompts"},"Critical AI Sentiment Dataset Explorer":{"relativeUrl":"/tutorials/criticalAI3-sentiment-dataset-explorer","description":"Examine the datasets that run AI tools"},"Critical AI No-AI Chatbot":{"relativeUrl":"/tutorials/criticalAI4-no-ai-chatbot","description":"Make an interactive chatbot without using any AI"},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to GLSL":{"relativeUrl":"/tutorials/intro-to-glsl","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU using GLSL."},"p5.strands: Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-p5-strands","description":"An introduction to shaders using p5.strands"},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
diff --git a/public/search-indices/ko.json b/public/search-indices/ko.json
index 6a7cf146c6..3364898301 100644
--- a/public/search-indices/ko.json
+++ b/public/search-indices/ko.json
@@ -1 +1 @@
-{"contributor-docs":{"🌸 환영합니다! 🌺\n":{"relativeUrl":"/contribute/README","description":"p5js에 기여하는데에 관심을 가져주셔서 감사합니다 커뮤니티는 모든 형태의 기여를 소중하게 생각하며 컨트리뷰터의 의미를 최대한 넓은 범위로 확장하고자 합니다 이는 문서화 강의 코드 작성 창작 활동 글쓰기 디자인 운동 조직화 큐레이팅 여러분이 상상할 수 있는 걸 포괄합니다 [우리의 커뮤니티 페이지](https://p5js.org/community/#contribute)에는 커뮤니티에 참여하고 기여할 여러가지 방법들에 대한 개요가 제시되어 있습니다 기술적인 하고자 하신다면 시작하기에 앞서 글을 더 읽어주시기 바랍니다 프로젝트는 [올-컨트리뷰터스(all-contributors)](https://github.com/kentcdodds/all-contributors/) 사양을 따릅니다 [안내 사항](https://github.com/processing/p5.js/issues/2309/)을 [리드미(readme)](https://github.com/processing/p5.js/blob/main/README.md#contributors)에 본인을 추가하세요 [깃허브 이슈](https://github.com/processing/p5.js/issues/)에 여러분의 컨트리뷰션을 댓글로 달아주시면 저희가 추가해드리겠습니다 보관 위치 p5js 프로젝트의 핵심적인 저장소들은 아래와 같습니다 * [p5.js](https://github.com/processing/p5.js): 본 저장소에는 라이브러리의 소스 코드가 보관되어 [유저들이 보게 되는 p5js의 레퍼런스 매뉴얼](https://p5js.org/reference/) 코드에 포함되어 [JSDoc](http://usejsdoc.org/) 각주에서 생성됩니다 저장소는 [로렌 리 맥카시Lauren Lee McCarthy)](https://github.com/lmccart/)가 관리합니다 [p5.js-website](https://github.com/processing/p5.js-website/): 매뉴얼을 제외한 [p5js 웹사이트](https://p5js.org)의 [p5.js-sound](https://github.com/processing/p5.js-sound/): p5soundjs 라이브러리가 [제이슨 시갈Jason Sigal)](https://github.com/therewasaguy/)이 [p5.js-web-editor](https://github.com/processing/p5.js-web-editor/): 웹 에디터](https://editor.p5js.org)의 [캐시 타라케지언Cassie Tarakajian)](https://github.com/catarak/)이 예전의 에디터](https://github.com/processing/p5.js-editor/)는 이제 사용되지 않다는 점을 참고하십시오 [p5.accessibility](https://github.com/processing/p5.accessibility): 맹인 장애인들이 쉽게 p5 캔버스를 사용할 있도록 하는 라이브러리입니다 저장소 파일 구조 프로젝트엔 많은 파일들이 여기에 간략한 헷갈릴 수도 있지만 기여하기 저장소의 파일을 이해할 필요까지는 없습니다 우리는 한 영역인라인 도큐멘테이션을 고치는 것이 예가 될 있겠습니다에서 시작해서 차근차근 영역으로 나아가는 권장합니다 루이사 페레이라Luisa Pereira의 [Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/)에 작업 흐름에 사용되는 도구와 파일들에 소개를 동영상으로 확인하실 `contributor_docs/`에는 컨트리뷰터들을 위한 관례와 원칙을 설명하는 문서가 들어 `docs/`에는 사실 문서들이 대신 [온라인 매뉴얼](https://p5js.org/reference/)을 생성하기 담겨 `lib/`에는 비어 예시 파일과 [p5js-sound 저장소](https://github.com/processing/p5.js-sound/)에서 풀 리퀘스트를 통해 정기적으로 업데이트 p5sound 애드온이 이곳은 빌드 된 [Grunt](https://gruntjs.com/)를 이용해 하나의 파일로 컴파일 후에 위치하게 곳이기도 할 깃허브 저장소로 따로 이동시킬 필요가 없는 것입니다 `src/` 에는 라이브러리를 있는데 이들은 분리된 모듈의 형태로 주제별로 정리되어 p5js를 수정하고자 작업을 하면 됩니다 대부분의 폴더 안에는 각각의 리드미 파일readmemd이 있으니 이를 참고해 해주시기 `tasks/`에는 새로운 버전의 배포 릴리스 하는데에 관련된 자동화 작업들을 수행하는 스크립트들이 `tests/`는 내용 수정이 있어도 제대로 작동하도록 보장해주는 유닛 테스트들을 담고 `utils/`는 저장소에 유용할 추가적인 파일들을 디렉토리는 무시해도 괜찮습니다 문서화는 가장 중요한 부분입니다 낮은 품질의 이용자와 컨트리뷰터들의 진입 장벽을 높여 프로젝트 참여도를 저하시킵니다 [contributing\\_documentationmd]/contributing_documentation/ 페이지는 문서화를 시작하는 데에 깊이 개요를 제시합니다 같은 곳들에서 주로 찾아볼 [p5js.org/reference](https://p5js.org/reference/)는 코드의 [인라인 도큐멘테이션]/inline_documentation/으로부터 텍스트 설명 파라미터 스니펫 등을 포함합니다 코드와 인라인 긴밀히 연결시키고 문서화에 기여하는 게 만큼이나 중요하다는 생각을 강화하기 위해 활용하는 되면 라이브러리와 작동하는 방식 사이에 문제가 없음을 확실히 하기 도큐멘테이션과 예시를 확인합니다 이에 위해선 [inline\\_documentationmd]/inline_documentation/ 페이지를 살펴보는 걸로 시작하시기 [p5js.org/examples](https://p5js.org/examples/)페이지는 학습하는 길이가 긴 예시들을 위해서는 [adding\\_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) 살펴보시기 [p5js.org/tutorials](https://p5js.org/tutorials/)페이지는 p5js와 프로그래밍의 개념을 배울 도와주는 튜토리얼들을 웹사이트의 튜토리얼에 튜토리얼](https://p5js.org/learn/tutorial-guide.html)을 웹사이트는 현재 가지 언어들을 지원하고 있음을 국제화혹은 줄여서 i18n라고 불립니다 문서는 [i18n\\_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contribution.md) 페이지에서 자세히 보실 이슈 흐름 알려진 버그와 추가되었으면 기능들은 이슈](https://github.com/processing/p5.js/issues/)들을 추적됩니다 [레이블]/issue_labels/들은 이슈들을 카테고리별로 분류하는 사용되는데 예를 들면 [초보자에게 적합한 이슈들](https://github.com/processing/p5.js/labels/level%3Abeginner/)을 레이블링 식입니다 이미 제기된 중에 시작하고 싶은 있다면 컨트리뷰터들이 진행 사항을 파악하고 도움을 줄 해당 이슈에 댓글을 달아주시기 이슈를 해결했다면 마스터 브랜치에 [풀 리퀘스트PR를 제출]/preparing_a_pull_request/하십시오 PR의 칸에 resolves #XXXX#XXXX를 해결함라고 써서 해결한 태그해주시기 PR이 다루기는 완전히 해결하지는 못하는 거라면즉 merge 되고 나서도 이슈가 열려 있어야 addresses 다룸이라고 써주시기 버그를 발견했거나 새롭게 더하고 기능에 아이디어가 먼저 제출해주시기 제출하지 않고 수정 사항이나 기능을 제출해버리는 경우 수락하기 어려울 가능성이 높습니다 피드백을 받고 다뤄도 괜찮다는 확인했다면 위의 절차를 고치거나 추가하는 시작할 버그 리포트를 재현하거나 버전 번호 재현 안내서와 주요 정보들을 요청하는 선별하는 작업할 용이한 방법 중 하나는 [코드 트리아지CodeTriage에서 구독](https://www.codetriage.com/processing/p5.js)하는 겁니다 [[Open Source Helpers](https://www.codetriage.com/processing/p5.js/badges/users.svg)](https://www.codetriage.com/processing/p5.js) [organization.md](https://github.com/processing/p5.js/blob/main/contributor_docs/organization.md) 파일은 이슈들이 체계화 있는지 그에 의사결정 과정은 이루어지는지에 대략적인 관심이 기여해주시기 개발 과정 프로세스라는 처음에는 까다로울 그렇게 느끼는 건 뿐만이 아니라 처음엔 모두가 혼란을 겪곤 밑을 보시면 셋업 과정을 차례 질문이 [포럼](https://discourse.processing.org/c/p5js/)에 물어보거나 막힌 부분을 [이슈](https://github.com/processing/p5.js/issues/)를 제출하면 최대한의 드리도록 하겠습니다 아래 절차는 [코딩 트레인The Coding Train의 비디오 강의](https://youtu.be/Rr3vLyP1Ods/)에서도 다루고 있습니다🚋🌈 [node.js](http://nodejs.org/)를 설치하세요 nodejs를 설치하면 자동적으로 [npm](https://www.npmjs.org) 패키지 매니저도 설치됩니다 본인의 계정에 저장소](https://github.com/processing/p5.js)를 [포크](https://help.github.com/articles/fork-a-repo/) 하십시오 포크 저장소를 로컬 컴퓨터에 [클론](https://help.github.com/articles/cloning-a-repository/) ```shell $ git clone https://github.com/YOUR_USERNAME/p5.js.git ``` 폴더로 들어가 npm에 필요한 디펜던시를 설치하십시오 cd npm ci [Grunt](https://gruntjs.com/)가 설치되었을텐데 코드로부터 빌드하기 이용할 run grunt 계속해서 변경해야 사전에 수동으로 일일이 명령어를 입력하지 않아도 변경 다시 빌드해줄 `npm dev`를 실행 나을 로컬에서 베이스를 변경하고 깃Git으로 [커밋](https://help.github.com/articles/github-glossary/#commit) add -u commit -m YOUR COMMIT MESSAGE 문법 오류가 확인하고 고장 문제들에 테스트를 grunt`를 번 실행하십시오 포크에 [푸시](https://help.github.com/articles/github-glossary/#push) push 준비되었다면 리퀘스트](https://help.github.com/articles/creating-a-pull-request/)로 제출하십시오 커밋이 거절 당하는 베이스에 개발자 툴들은 것들에 대해 일부러 매우 엄격한 기준을 적용하도록 만들어져 이건 좋은 일관성 있게 만들고 규율이 지켜지도록 도울 뭔가를 변경하고자 만들었던 당할 의미하기는 낙담하지는 말아주세요 경험 개발자들의 커밋도 종종 당하곤 보통은 테스트가 문제인 경우가 많습니다 ## p5js는 깔끔하고 스타일의 문법을 요구하기에 [Prettier](https://prettier.io/)와 [ESlint](https://eslint.org/)라는 툴의 사용이 필수입니다 커밋을 전에 특정 스타일 규칙을 점검하게 되는데 사용하는 에디터에 [ESlint 플러그인](https://eslint.org/docs/user-guide/integrations#editors)을 타이핑 함과 오류를 하이라이트 해줍니다 스타일에 관해서 유연성과 내는데 참여와 기여의 낮추기 위함입니다 에러를 포착하기 터미널에서 실행하세요`$` 프롬프트는 마십시오 lint 오류는 고쳐질 lintfix 기존 스타일을 고수하는 선호되는게 보통이지만 [가끔은](https://github.com/processing/p5.js/search?utf8=%E2%9C%93\\&q=prettier-ignore\\&type=) 코드를 이해하기 만들기도 경우에는 Prettier의 `// prettier-ignore` 주석을 [예외적인 경우를 처리](https://prettier.io/docs/en/ignore.html)할 요구되는 선호 사항들은 그럴만한 이유가 있기 가능하다면 예외적인 만들지 말아주시길 규칙에 요약본이 목록이 전부가 아니기 [.prettierrc](https://github.com/processing/p5.js/blob/main/.prettierrc)와 [.eslintrc](https://github.com/processing/p5.js/blob/main/.eslintrc) 파일의 전체 목록을 참고 하시기 ES6 사용합니다 큰 따옴표 보다는 작은 따옴표를 들여쓰기는 스페이스 두 개로 처리합니다 정의되어 변수들은 적어도 번은 사용되던가 없애야 x == true false로 비교문을 작성하지 x를 사용하십시오 true는 분명히 if 와는 다릅니다 여지가 객체를 널null과 비교하고 숫자를 0에 문자열string을 비교하십시오 작성하는 함수가 모호하거나 복잡한 답니다 스타일링 팁을 참고하기 [모질라 자바스크립트 연습Mozilla JS practice)](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style#JavaScript_practices)을 보십시오 테스트 테스트란 주논리와 성능 검증을 보완하기 만들어진 규모의 코드들입니다 [unit\\_testingmd]/unit_testing/ 페이지에 테스트에 정보가 개발한다면 아마도 포함해야 통과하지 못한다면 그건 어딘가에 있다는 뜻이므로 돌리기 디펜던시들을 설치해야 이것이 *모든* 설치할 간단하게는 테스팅에 디펜던시들은 다음을 [Mocha](https://mochajs.org/): 개별적인 실행하는 강력한 테스팅 프레임워크 [mocha-chrome](https://github.com/shellscape/mocha-chrome/): 구글 크롬을 Mocha 돌리는 모차 플러그인 디펜던시들이 설치되면 Grunt를 돌리십시오 때론 커맨드 라인 브라우저에서 것도 유용합니다 서버 [연결](https://github.com/gruntjs/grunt-contrib-connect/)을 시작하십시오 dev 서버가 돌아가면 `test/testhtml`을 열 있을 완전한 설명은 문서의 범위를 벗어나는 것이지만 간략하게만 src/ 디렉토리에 가해진 중대한 새로 구현된 기능은 Mocha가 실행할 파일이 test/ 동반되어야 하는데 향후 나올 라이브러리에서도 작동할 것임을 검증하기 작성할 [Chaijs 레퍼런스](http://www.chaijs.com/api/assert/)를 어서션assertion 메세지를 구성함으로써 미래에 테스트로 잡아낼 오류들이 있고 결과적으로 개발자들이 만들어주시기를 [contributor\\_docs/](https://github.com/processing/p5.js/tree/main/contributor_docs/) 폴더에는 살펴볼만한 파일들도 비기술적인 영역과 관계된 것들입니다 흐름에서 영상 p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/)에서 트레인의 동영상](https://youtu.be/Rr3vLyP1Ods/)🚋🌈에서는 기술적 것에 제공합니다 [도커Docker 이미지](https://github.com/toolness/p5.js-docker/)는 [도커](https://www.docker.com/)에 마운트 [Node](https://nodejs.org/) 필수 요소들을 필요 없이 도커 설치를 제외하고는 방식으로든지 호스트 운영 체제에 영향을 주지 않고도 개발하는데에 사용될 [json 데이터 파일](https://p5js.org/reference/data.json)을 생성하는데 공개 API를 있으며 에디터에서 메서드를 자동으로 완성하는 등의 자동화된 툴링에 웹사이트에서 되지만 일부로 있지는 않습니다 최근에 [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015)로 마이그레이션 됐습니다 변화가 기여에 미칠지를 보기 [ES6 채택]/es6-adoption/을 방문해주십시오"},"접근성에 대한 초점\n":{"relativeUrl":"/contribute/access","description":"{/* 라이브러리의 기여자와 사용자에게 접근성에 대한 우리의 약속이 무엇을 의미하는가 */} [2019 기여자 회의](https://p5js.org/community/contributors-conference-2019.html)에서, p5js는 접근성포용과 접근성을 향상시키는 새로운 기능만 추가하기로 약속했습니다 노력을 지지하지 않는 기능 요청은 수용되지 않을 것입니다 우리는 장벽을 인식하고 없애고 예방하는 약속합니다 이는 접근성과 참여에 영향을 미칠 수 있는 다양성의 교차[^1] 경험을 고려한다는 것을 의미합니다 이같은 교차 경험은 젠더 인종 민족 성성 언어 위치 등으로 구성됩니다 p5js 커뮤니티 내에서 특권을 가진 사람들의 지속적인 편안함보다 소외된 집단의 요구에 초점을 맞추고 있습니다 모두가 접근성의 의미를 탐색하고 실천하고 가르치는 방법을 배우고 확장적 교차적 연대적 프레임워크를 통해 생각하기로 선택합니다 약속은 p5js의 핵심 가치 중 하나로 [커뮤니티 성명서](https://p5js.org/about/#community-statement)에 기재되어 ## 종류 접근성 향상은 단순히 커뮤니티의 인원을 늘리는 데 맞추지 않습니다 구조적 차별으로 인해 커뮤니티에서 사람들에게 p5js를 접근하기 쉽게 만들려는 약속입니다 p5js가 제공하는 도구와 플랫폼에도 적용되며 리더십의 구성 결정 행동을 포함합니다 속도 성장 경쟁을 중시하는 기술 문화에 저항합니다 집단적 관심의 행위로서 지향성 느림 수용성 책임감을 우선시합니다 여기서의 접근성은 다음과 같은 사람들을 위해 공평하게 만드는 * 영어 이외의 언어를 사용하는 사람들 흑인 원주민 유색인종 민족의 레즈비언 게이 바이섹슈얼 퀴어 성 정체성을 탐색 중인 팬섹슈얼 무성애자 트랜스 젠더플루이드 에이젠더 간성 두 영혼의 여성 외 성적 소수자들 시각장애인 청각장애인deaf 또는 농인Deaf[^2] 장애인/장애를 신경다양인 만성 질병을 사람들[^3] 소득이 낮거나 금융 문화 자본에 접근성이 부족한 오픈 소스와 크리에이티브 코딩에 경험이 없거나 전혀 없는 다양한 교육적 배경을 어린이와 노인을 포함한 모든 연령대의 종류의 기술적 스킬 도구 접근 권한을 종교적 제도적으로 배제되고 역사적으로 과소대표되는 이들의 교차점들 각자의 설명하는 용어의 복잡성을 인식합니다 언어는 미묘하고 진화하며 논쟁의 여지가 목록이 경우를 다루지는 약속과 요구 사항을 명명하고 책임질 있도록 시도하고 ### 예시 다음은 향상을 위한 노력의 예시입니다 문서 자료를 더 많은 언어로 번역하여 제국주의[^4]에서 벗어나는 Rolando Vargas의 [프로세싱Processing 쿠나어 번역](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancino의 [Pê Cinco 포르투갈어 사용자를 국제화 보급화](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) 스크린 리더 보조 기술에 지원 개선 Katie Liu의 [p5js에 대체 텍스트alt text 추가](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpe의 [P5 향상 프로젝트](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) 도구가 [웹 콘텐츠 지침(WCAG)](https://www.w3.org/TR/WCAG21/)을 준수하도록 하고 사용자들이 프로젝트에서 이를 따를 노력하기 오류 메시지를 유용한 도움 제공하기 [p5js 친절한 메세지 시스템(FES)](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)) 코딩 디지털 아트 영역에서 차별을 받은 공동체들 속 학습자를 멘토링 지원하기 중심의 조직 전략예 ASL 통역 실시간 자막 쉬운 장소으로 이벤트 개최 Access Day 2022](https://p5js.org/community/p5js-access-day-2022.html), [The Web We Want x W3C TPAC 2020](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/)) 교육 자료 생성 Adekemi Sijuwade-Ukadike의 [A11y Syllabus](http://a11ysyllabus.site/)) WCAG 지침을 따르고 평이한 사용하며 초심자에 맞춘 작업 보고서 게시 [OSACC 보고서](https://github.com/processing/OSACC-p5.js-Access-Report/)) 유지보수 요청을 받지 기준은 이슈 풀 리퀘스트 템플릿에 반영됩니다 기존 세트를 유지겠다는 의사를 단언합니다 코드베이스의 부분에 속하는 버그든지 상관없이 수정하고 싶습니다 도구의 일관성이 초심자의 향상한다고 믿습니다 요청의 예시는 같습니다 하드웨어 성능이 낮은 성능 프레임 버퍼에 그리기/읽기 API의 일관성 beginShape와 endShape로 호를 만들기 arcVertex 추가 *** 문서를 살아있는 문서'로 생각해 주시기 바랍니다 우선순위를 정하는 것이 의미하는지에 대화를 이어갈 문서가 가치에 대해 이야기를 나눌 커뮤니티에 초대합니다 아이디어나 제안할 있다면 Github에서 이슈로 공유하거나 [hello@p5jsorg]mailtohello@p5jsorg로 이메일을 보내주시기 버전의 성명서는 2023년 소스 컨퍼런스에서 Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston의 협업을 수정되었습니다 프로세싱 재단 펠로우십의 지원을 III와 Decker가 최종 확정 발표했습니다 [^1] Crenshaw Kimberlé Demarginalizing the intersection of race and sex a black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 전문은 Archiveorg에서 확인 가능합니다 [^2] 대문자 Deaf는 문화적으로 청각 장애인이거나 장애인 공동체의 일원을 의미하는 반면 소문자 deaf는 앞서 설명된 Deaf 정체성과는 무관히 쓰이는 청각학적 용어입니다 [^3] 장애 내에는 사람 vs 정체성 사이의 선호가 [Unpacking debate over person-first identity-first language in autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/)와 [I am Disabled On Identity-First Versus People-First Language](https://thebodyisnotanapology.com/magazine/i-am-disabled-on-identity-first-versus-people-first-language/)를 읽어보세요 [^4] 제국주의는 제국주의의 확장과 세계화로 모국어를 희생해가며 영어와 특정 지속적으로 지배 강요하는 말합니다"},"p5.js 레퍼런스에 기여하기\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* 올바른 형식을 사용하여 p5js 레퍼런스 문서를 작성하고 편집하세요 */} p5js에서는 소스 코드에 특별한 형태의 주석을 작성하는 방법을 통해 공식 웹사이트 [레퍼런스](https://p5js.org/reference/) 페이지에서 확인할 수 있는 코드 레퍼런스를 생성합니다 주석reference comments에는 설명 함수의 시그니처매개변수와 반환 값 사용 예제가 포함됩니다 다시 말해 함수 변수의 보여지는 모든 내용은 소스코드와 작성된 만들어집니다 문서에서 우리는 웹사이트에서 레퍼런스가 올바르게 렌더링될 있도록 지정하는 법을 알아보겠습니다 수정하거나 작성할 가이드를 준수해 주시기 바랍니다 ## comments 작동 방식에 대한 간단한 소개 코드를 보면 많은 라인이 주석으로 작성되어 것을 있습니다 다음과 같은 모습입니다 ``` /** * Calculates the sine of an angle `sin` is useful for many geometric tasks in creative coding The values returned oscillate between -1 and as input increases takes into account current angleMode @method sin @param {Number} @return @example function draw { background200 let t = frameCount x y sint + linex circlex describe'A white ball on a string oscillates up down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ 주석 뒤에는 함수를 정의하는 실제 자바스크립트 코드가 뒤따릅니다 주석은 항상 `/**`로 시작하고 `*/`로 끝나며 시작과 끝 사이의 라인은 `*`로 시작합니다 방식으로 블록 안에 문서로 해석될 것입니다 여러분이 [JSDoc](https://jsdoc.app/)을 접해본 적이 있다면 스타일의 주석이 익숙하게 느껴질 p5js는 JSDoc을 사용하는 것은 아니지만 JSDoc과 매우 유사한 문법을 가진 [YUIDoc](https://yui.github.io/yuidoc/)을 사용하고 주석에서는 블록이 더 작은 개별 요소로 나뉘어 집니다 이제부터 요소들을 자세히 앞서 보았던 블록을 살펴보고 섹션이 역할을 하는지 알아봅시다 작성한 내용이 [`sin()`](https://p5js.org/reference/p5/sin/) 페이지에서는 보여지는지 비교해보세요 주석의 맨 위에는 설명이 텍스트로 설명에는 마크다운 구문과 HTML이 포함될 있어요 설명은 간결하게 작성되어야 하며 필요하다면 특이사항이나 세부 내용을 추가하여 함수가 일을 최대한 잘 설명해야 합니다 함수에 위 세 개의 섹션을 포함하는데 `@` 기호 뒤에 중 하나의 키워드가 따라옵니다 `@method`는 이름을 정의할 사용합니다 예시에서 이름은 `sin`입니다함수 이름에는 괄호 ``가 포함되지 않는다는 점을 주의하세요 `@param`은 받는 매개변수나 인자argument를 `@param` 키워드 중괄호 `{}`가 감싸고 부분은 매개변수의 타입을 의미합니다 타입 나오는 단어는이 예시의 이름 나머지 매개변수를 설명하는 부분입니다 `@return`은 값을 `@return` 값의 매개변수는 따라야 {type} name Description here 매개변수가 선택 사항optional parameter인 경우에는 대괄호로 감싸주세요 [name] ### 알아보기 상수constants 취하는 값이 [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js)에 정의된 값들 하나라면 타입은 `{Constant}`로 지정되어야 `either` 키워드와 유효한 값들을 나열해야 예를 들면 같습니다 {Constant} horizAlign horizontal alignment either LEFT CENTER or RIGHT 값은 아래 data 없는 함수라면 태그를 생략해도 됩니다 체이닝chaining 부모 객체를 반환하는 경우라면 생략하고 대신 줄을 추가할 @chainable 추가 시그니처 여러 매개변수 옵션을 가지고 각각을 개별적으로 명시할 들어 [`background()`](https://p5js.org/reference/#p5/background/) 함수는 다양한 지원하고 있습니다background 문법 확인해 보세요 먼저 옵션 하나를 선택하여 살펴본 형식에 첫 번째 시그니처에 작성합니다 끝나면 시그니처를 각각의 시그니처는 @method와 태그만 있으며 각자의 범위 내에 예시를 참고해 주세요 background {String} colorstring color possible formats include integer rgb rgba percentage 3-digit hex 6-digit [a] alpha value gray specifies 다중 두 간의 유일한 차이점이 선택적 추가뿐이라면 별도의 만들 필요는 없습니다 가능한 기능의 사용을 제한해주세요 필요 이상으로 복잡하게 있기 때문입니다 변수 지금까지 함수와 상수에 방법에 대해 알아보았습니다 레퍼런스도 비슷한 구조를 따르지만 사용되는 태그가 다릅니다 system variable mouseX always contains position mouse relative to canvas at top-left corner 2-D -width/2 -height/2 WebGL If touch used instead will hold most recent point @property @readOnly // Move across background244 linemouseX describe'horizontal line moves left right with x-position' 블록의 시작 부분에는 있습니다이 예시에서는 `mouseX` 정의하기 위해 `@method` `@property`를 `@property`는 `@params`와 타입과 `@readonly` 태그는 대부분의 변수에 설정되어 사용자에 덮어씌워지지 않아야 함을 내부적으로 나타내기 사용됩니다 예제 추가하기 `sin`과 주석에서 찾아볼 있지만 아직 다루지 않은 `@example` 태그입니다 페이지를 방문할 실행될 곳입니다 [Screenshot reference page red showing only example code section]src/content/contributor-docs/images/reference-screenshotpng 위의 예제를 만들어내는 const c color255 fillc rect15 Sets redValue redc fillredValue rect50 describe Two rectangles edges rectangle yellow one 태그 다음에는 HTML `` 시작되고 뒤따라옵니다 열린 태그와 닫힌 사이에 작성하면 좋은 작성하기 위한 기본 원칙은 단순하고 작게 겁니다 예제는 의미가 있어야 하고 기능이 작동하는지 너무 복잡하지 않게 설명할 예제의 캔버스는 100x100 픽셀의 크기를 가져야 예제와 `setup` 작성되지 픽셀 크기의 회색 배경 캔버스를 만드는 자동으로 래핑wrapping됩니다 모범 사례 스타일에 자세한 여기서 않습니다 스타일 기능에 후에 한 구분해서 비워두고 arc50 PI QUARTER_PI OPEN describe'An ellipse created using arc its top open' describe'The bottom half arc' 실행되길 원하지 않는다면단지 보여주고 싶을 뿐이라면 ``에 `norender` 클래스를 추가해주세요 describe'ellipse 자동화된 테스트 과정에서 않는다면예를 사용자 상호작용이 필요한 경우 `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' 외부 애셋 파일을 사용해야 파일들을 [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) 폴더에 넣어두세요이미 해당 존재하는 재사용해도 코드에서 assets/filenameext 경로로 불러와 사용하면 [tint()](https://p5js.org/reference/p5/tint/) 참고하세요 `describe`로 캔버스 마지막으로 추가한 예제에 스크린 리더가 읽어낼 설명을 추가해야 `describe`를 사용해서요 매개 변수는 하나입니다 캔버스에서 일이 벌어지고 있는지 간략하게 문자열 하나면 xoff background204 n noisexoff width linen height vertical randomly from right' noiseScale background0 `describe`에 [web accessibility contributor documentation](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions)를 지금까지의 설명으로 편집하는 작업에 준비를 마쳤습니다 p5js에는 JSDoc 전문적으로 활용하는 방법이 가지 남아있습니다 방법들은 상황에 유용할 자주 아닙니다 `@private` 속성이나 변수가 비공개private 함수이거나 비공개 변수라면 쓸 기능은 웹사이트의 레퍼런스로 렌더링되지 비공개private로 이유는 라이브러리 자체에 내부 기능을 문서화하기 위해서입니다 아래에 `_start`의 그런 사례입니다 _start calls preload @private p5prototype_start `@module` 관련 태그들 파일 최상단에는 모듈은 p5js에서 다루는 기능들을 그룹화한 것으로 섹션으로 보여집니다 모듈 내부에는 `@submodule` 태그로 추가적인 하위 모듈이 `@for` 모듈과 `p5` 전체 클래스 관계를 정의하여 클래스의 일부라는 효과적으로 나타냅니다 `@requires` 현재 의존하고 있어 임포트되는imported 필수 모듈들을 정의합니다 @module Color @submodule Creating Reading @for p5 @requires core constants 따르는 규칙은 `src/` 폴더 내의 서브폴더가 `@module`이 되며 서브폴더 파일이 `@module`에 속한 `@submodule`이 된다는 새로운 서브폴더나 추가하지 않는 편집할 필요가 `@class` 생성자는 `@constructor` 정의됩니다 형식은 블록으로 방식과 유사하며 정의되어야 클래스에 생성자 있음을 `p5Color` A class Each object stores mode level maxes that were active during construction These are interpret arguments passed object's constructor They also determine output formatting such when saturation called stored internally array ideal RGBA floating normalized calculate closest screen colors which levels Screen sent renderer When different representations calculated results cached performance floating-point numbers recommended way create instance this @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals containing green blue channel CSS 생성과 미리보기 리포지토리는 웹사이트를 빌드하고 실행하지 않아도 생성하고 미리 볼 코드의 주석으로부터 생성하기 명령어는 npm run docs 과정을 파일들과 주요 `docs/reference/datajson` 생성됩니다 파일은 웹 사이트에서 렌더링하는데 것과 동일한 경량화 후의 파일입니다 작업을 연속적으로 수행하기 명령어를 실행할 docsdev 변경사항이 생길때마다 렌더링을 업데이트하는 실시간 미리보기live preview 시작합니다변경 후에는 새로고침해야 변경 사항이 나타납니다 이는 특히 브라우저에서 실행 중인 보는데 유용합니다 템플릿 파일들은 `docs/` 저장되어 직접 변경해서는 안됩니다 단 `docs/yuidoc-p5-theme/assets` 추가하는 예외입니다 단계로 시스템에 사항을 알고 싶다면 [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/) 레퍼런스와 관련된 이슈issues를 [#6519](https://github.com/processing/p5.js/issues/6519/)와 [#6045](https://github.com/processing/p5.js/issues/6045/)를 [기여자 가이드라인](https://docs.google.com/document/d/1roBu-7s9xspuie3M6EhEokYWc82DZhDNYO2SQiY4k68/edit?tab=t.0#heading=h.627q50vo09fb) 문서도 시작하기에 자료입니다"},"기여자 가이드라인\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* GitHub에서 p5js에 기여하는 데 필수적인 정보 */} 기여자 가이드라인에 오신 것을 환영합니다 문서는 코드를 기여하고자 하는 신규 가지 기술적 단계를 다시 기억하고자 또는 p5js 코드 기여와 관련된 모든 사람을 위한 문서입니다 리포지토리repository 외부에서 기여하려는 경우튜토리얼 작성 수업 계획 이벤트 조직 페이지를 살펴보세요 스튜어드 유지 관리자maintainers는 이슈 풀 리퀘스트를 검토하는 더 유용한 [스튜어드 가이드라인](https://github.com/processing/p5.js/blob/main/contributor_docs/steward_guidelines.md)을 찾을 수 있습니다 긴 종합적인 문서이지만 가능한 단계와 항목을 명확하게 지시하도록 할 것입니다 목차를 활용하여 자신에게 섹션을 찾아보세요 계획된 관련이 없는 경우 건너 뛰어도 괜찮습니다 **새로운 기여자인 첫 번째 섹션 이슈Issue에 대해 알아보기로 시작하는 것이 좋습니다 개발 프로세스의 단계별 설정만 필요한 개발자를 빠른 시작 참조하세요** 목차 * [이슈Issue에 알아보기]/all-about-issues/ [이슈Issue란 무엇인가요]/what-are-issues/ [이슈 템플릿Issue Templates]/issue-templates/ [버그 발견]/found-a-bug/ [기존 기능 향상]/existing-feature-enhancement/ [새로운 요청]/new-feature-request/ [토론Discussion]/discussion/ [p5js 코드베이스 작업]/working-on-the-p5js-codebase/ [개발자를 시작]/quick-get-started-for-developers/ [Github 편집 사용하기]/using-the-github-edit-functionality/ [p5js를 포크하고 포크에서 작업하기]/forking-p5js-and-working-from-your-fork/ Desktop 사용하기]/using-github-desktop/ [git 명령줄command line 인터페이스 사용하기]/using-the-git-command-line-interface/ [코드베이스code base 분석]/codebase-breakdown/ [빌드 설정]/build-setup/ [Git 워크플로우]/git-workflow/ [소스 코드]/source-code/ [단위 테스트]/unit-tests/ [인라인 문서화]/inline-documentation/ [국제화](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#internationalization) [접근성]/accessibility/ [코드 표준]/code-standard/ [소프트웨어 디자인 원칙]/software-design-principles/ [풀 리퀘스트]/pull-requests/ 리퀘스트 생성]/creating-a-pull-request/ 정보]/pull-request-information/ [제목]/title/ [해결]/resolves/ [변경 사항]/changes/ 사항의 스크린샷]/screenshots-of-the-change/ 체크리스트]/pr-checklist/ [리베이스 충돌 해결]/rebase-and-resolve-conflicts/ [논의 고치기amend]/discuss-and-amend/ *** 이슈에 알아보기 p5js의 GitHub 리포지토리줄여서 repo에서 활동의 대부분이 이슈에서 발생하며 이는 여러분이 기여를 여정을 하기 좋은 장소입니다 ## 이슈란 무엇인가 [A cropped screenshot of the library repository only showing contents top right corner A red box is drawn on surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng 이슈는 깃허브 포스트post를 일컫는 보편적인 용어이며 문제에 잘 설명하기 버그 보고 새로운 추가 요청 의견 라이브러리 개발과 될 봇을 포함한 계정을 가진 사람이 코멘트주석를 달 기여자들끼리 리포지토리 내에서 프로젝트 주제에 논의하는 공간입니다 다양한 이유로 이슈가 오픈될 있지만 우리는 보통 소스 코드에 대한 개발에 논의를 위해 이슈를 사용합니다 당신의 디버그 협업자 초대 관련없는 주제는 [포럼 (forum)](https://discourse.processing.com/) 이나 [디스코드 (Discord)](https://discord.gg/SHQ8dH25r9/) 같은 플랫폼에서 상의되어야합니다 이슈인지 곳에 포스트 되어야 하는지 결정할 있도록 쉽게 사용할 있는 템플릿을 만들었습니다 템플릿 템플릿은 스튜어드와 관리자가 이해하고 검토하기 만들어줍니다 해당 제출하고 빠르게 답변을 받을 도와줍니다 [Screenshot an example what issue looks like The title in Warning being logged Safari when using a filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng 제기하려면 저장소의 탭으로 이동하고 오른쪽에 New 버튼을 클릭하기만 하면 됩니다 여러 옵션이 제시되며 각각은 템플릿에 해당하거나 질문을 제출할 적절한 위치로 리디렉션됩니다 제대로 된 관심을 가장 연관성있는 옵션을 선택하는 권장합니다 [Cropped repository's page with green button highlighted it]src/content/contributor-docs/images/new-issuepng ### 발견\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) p5js에서 잘못된 동작이 발생하거나 문서에 설명된 대로 동작하지 않는 경우[이 템플릿](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml)을 사용하세요 스케치sketch 디버깅 중 발생한 문제는 먼저 [Discourse 포럼](https://discourse.processing.org) 질문하세요 채워야 필드가 *가장 적합한 하위 영역은 무엇인가요* - 문제를 식별하고 응답하기 자동으로 \\[라벨label]태그를 지정하여 도와줍니다.([https://github.com/processing/p5.js/blob/main/contributor\\_docs/issue\\_labels.md](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)). *p5js 버전* 버전 번호는`` 태그 링크 p5js/p5minjs 파일의 줄에서 이것은 `142` 점으로 구분된 세 개의 숫자로 이루어져 있을 *웹 브라우저 간의 동작을 분리하는 도움이 번호를 찾으려면 사용 중인 브라우저에 아래 표의 지침을 따르세요 Chrome Firefox In address bar navigate to `chrome//version` `aboutsupport` Under menu item choose About *운영 체제* 가능하면 운영 체제 포함해야 합니다 `macOS 125` 일부 버그는 체제의 동작에서 비롯될 *이것을 재현하는 단계* 공유해야 중요한 정보입니다 버그를 재현하기 세부 나열해야 보여주는 기본적인 예제 공유하는 것은 당신이 겪고 재현하고 해결책을 만들기 큰 **재현이 핵심입니다** 템플릿의 많은 필드는 복제하는 목표로 여러분의 스케치 환경과 발견한 재현시킬 방법에 정보를 제공할수록 누구든지 찾기에 쉬워질 입니다 **가능한 한 자세히 설명하고 추상적인 문장을 피하세요** 예를 들어 image function이 작동하지 않습니다이라고 하지 말고 로드된 GIF 이미지를 올바른 크기로 표시하지 않습니다 설명하세요 마주치고 설명하는 방법은 두 가지를 공유한 샘플 코드가 무엇을 기대하는지 예상되는 동작 실제로 작동하는지 실제 방금 보고한 수정하고 싶다면 설명란에 그렇게 표시할 후 설명한 수정할 것인지 간단한 제안을 제공할 이렇게 지원이 필요한지를 알 **이슈가 승인되지 않거나 승인이 이루어지기 전에 이슈와 제출하거나 변경 작업을 시작해서는 안됩니다** 제안된 수정이 수락되지 않을 완전히 접근 방식이 필요할 있거나 문제가 있기 때문입니다 수정 나기 제출된 리퀘스트는 날 때까지 닫혀있을 것입니다closed 수정을 승인된 이슈에는 적어도 명의 [영역 관리자](https://github.com/processing/p5.js#stewards)의 승인을 받아야 시작할 향상\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) 기존 기능함수 상수 렌더링 등에 사항 제안 추가를 `color` 함수 색상을 받아들이는 함수에 색상 정의 방법을 추가하는 경우에는 사용해야 템플릿에는 필드를 입력해야 *접근성향상* -이 필수 향상을 통해 p5js가 창작 예술이나 기술 분야에서 역사적으로 소외된 사람들에게 \\[접근성 향상] ([https://github.com/processing/p5.js/blob/main/contributor\\_docs/access.md](https://github.com/processing/p5.js/blob/main/contributor_docs/access.md) 시킬 설명을 넣는 곳입니다 **이것없이는 제안도 않습니다** 확실하지 않음을 기입하고 그들이 접근성을 다루는지에 아이디어가 있다면 커뮤니티의 구성원들이 논점을 제안할 우리가 해결하는데 [라벨](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)을 지정할 *기능 향상 사항* 제안에 작성하는 제안에는 종종 향상이 필요한지에 명확한 사례가 포함됩니다 제안이 승인되기 위해서는 1명의 필요합니다 **이슈에 제안과 수락될 것임을 보장할 없기 주어질 닫힙니다closed 요청\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) 기능을 제안하려는 경우에 `createTable`함수를 사용하여 HTML `` 요소를 그리는 제안은 기존의 중복될 있으며 적합하다고 생각되는 선택하면 양식 향상의 필드와 동일합니다 채워 넣어야 하는지에 자세한 내용은[이전 섹션]#existing-feature-enchancement을 참조해주세요 최소 2명의 관리자](https://github.com/processing/p5.js#stewards) **제안이 모든풀 [\"토론(Discussion)\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) 제출 위의 것에도 맞지 사용됩니다 실제로는 템플릿에도 드물어야 특정 웹 API 채택할지에 토론은 요청](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#new-feature-request); 제출해야 추가적인 모드를 것에 토론은[기존 향상](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#existing-feature-enchancement); 주최하는 지역 크리에이티브 코딩creative coding 이벤트에 발표는 포럼에 게시하고 지원이나 홍보를 원한다면 Processing Foundation에 연락해야 토론 오픈할 측면 패널의 라벨 패널을 관련 라벨을 추가하여 영역으로 알릴 자체는 최소한의 텍스트 필드만 예시 보려면 [이 링크](https://github.com/processing/p5.js/issues/6517/)를 확인하세요 [**⬆ back top**]#contributor-guidelines 작업 사전 요구 계속 진행 하려면 명령줄 git nodejsv18 최소한으로 숙지하고 로컬 환경을 설정해야 소개 이제 논의되었고 구현이 승인되었으며 변경을 준비가 되었습니다 기반 마찬가지로 발견했거나 토론에 참여했으며 스튜어드에 승인되었지만 원래 문제 작성자나 구성원 작업할 의사가 없음을 표시한 자발적으로 여기에 스튜어드가 할당하도록 **다른 사람의 차례를 어기면 안 됩니다** 의향을 표시하거나 이미 사람에게 할당되어 리퀘스트을 제출하여 대기열을 넘어서는 안됩니다 항상 선착순 우선시할 누군가가 아직 동일한 PR을 제출하면 닫힐 할당된 개인의 마지막 활동이 없었다면 공손한 코멘트를 남겨 상황을 묻고 구현에 필요한지 물어볼 대부분 사람들이 작업하는 시간이 소요되기에 이바지함에 \u001d긴 시간을 허용합니다 당신은 자신의 속도로 일하고 오래 작업에 할애할 있는지에 엄격한 제한이 없다는 자신감을 가질 필요가 기여의 측면에서든 발생하면 도움을 요청하는 주저하지 마십시오 관리자뿐만 아니라 커뮤니티 회원들도 최선을 다해 안내할 가이드 p5js의🌸 코드베이스code base에 작업/기여를 원하는 p5js를 직접 개선하거나 [친숙한 오류 메세지 시스템](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)과 프로젝트를 개선하기 수행할 [p5js의 포크를 생성합니다.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [생성한 컴퓨터에 복제합니다.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [다음 명령을 업스트림upstream을 추가합니다.](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote add upstream https://github.com/processing/p5.js [NodeJs](https://nodejs.org/en/download/) 설치되어 있는지 확인하십시오 명령어를 확인할 node -v 입력하여 라이브러리를 설치하세요 npm ci 다음과 설명적인 브랜치 이름을 `main` 브랜치에서 브랜치를 만들어 주세요 checkout -b [branch_name] 코드베이스를 변경하기 시작하면 자주 테스트를 실행하세요 작업은 걸리지만 손상되지 않는지 확인합니다 test 추가하거나 단위 추가합니다 작업이 완료되면 사항을 커밋하고 리퀘스트](https://p5js.org/contributor-docs/#/./contributor_guidelines?id=pull-requests)를 생성할 인터페이스상 파일 내용 상단에 연필 아이콘 버튼이 버튼은 제공하는 기능으로 파일을 빠르고 간편하게 편집할 file view src/color/color\\_conversionjs arrow pointing pencil icon side image]src/content/contributor-docs/images/edit-filepng 매우 단순한 외에는 사용하는 권장되지 이에 주요 이유 하나는 코드의 보다 복잡한 리퀘스트로 제출되기 로컬에서 구축하고 테스트해야 기능에서 환경보다 유연하게 경우가 많기 포크fork에서 작업하기 단계는 리포지토리repository를 포크하는 포크fork는 오픈 소스에서 특정한 의미를 가지고 여기서는 리포지토리의 사본을 생성하여 계정에 저장하는 의미합니다 리포지토리를 포크하려면 페이지 상단 근처에 포크fork GitHub가 복사본을 만듭니다 main labeled fork and Fork 593k outlined dark orange]src/content/contributor-docs/images/forkpng 리포지토리에 쓰기 액세스 권한이 없을 가능성이 높기 작업해야 하며 작업하면 변경한 나중에 공식 Desktop은 터미널에 입력하는 대신에 그래픽 사용자 인터페이스를 git을 프로그램입니다 git에 익숙하지 않은 옵션이며 때마다 Desktop과 terminal 사이를 자유롭게 전환할 [GitHub Desktop을 다운로드하고 설치](https://desktop.github.com/)합니다. 설치가 응용 프로그램을 엽니다 계정으로 로그인하라는 메시지가 나타납니다 로그인한 후에는 포크한 포함하여 목록이 표시됩니다 포크인 `yourUsername/p5js`를 선택하고 파란색 Clone 클릭합니다 저장할 위치에 요청할 이를 변경하거나 기본 설정을 유지한 채로 계속할 [The user interface after signing On half screen it lists your projects bottom right]src/content/contributor-docs/images/github-desktop-initpng 복제가 되면 사용할지에 상위 프로젝트에 기여할 계속Continue을 cloning It asks if you are planning contribute parent project or use for own purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` 사용하기 포크가 생성되면 포크 페이지로 이동하여 초록색 Code 클릭해서 URL을 복사하세요 `https://github.com/limzykenneth/p5.js.git` 모양이어야 list files landing orange outline]src/content/contributor-docs/images/code-buttonpng 환경에서 명령줄로 저장소를 클론하세요 클론Clone은 단순히 저장소와 장치로 다운로드하는 폴더를 저장하고 싶은 폴더에서 clone [git_url] 위에서 복사한 `[git_url]`자리에 작성하세요 과정은 인터넷 연결 속도에 분 정도 걸릴 있으니 커피 잔을 내리면서 기다리는 것도 좋을 같아요 과정이 선호하는 에디터에서 다운로드한 `p5js` 열고 내용을 살펴볼 분석 폴더 안에 파일과 폴더는 같습니다 `src` 최종적으로 p5js와 p5minjs 파일로 결합되어 위치하는 [`test`](https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md) 테스트와 문서 예제를 테스트하기 `tasks` 세밀하게 맞춤화된 빌드 위치한 `Gruntfilejs` 구성 파일입니다 `contributor_docs` 기여자들이 작성한 문서를 비롯한 파일이 폴더들은 파일이나 종류의 지원 파일일 뿐입니다 대부분의 없습니다 설정 시작하기 빌드하고 테스트할 odejs가 있다는 가정하에 다음을 npm이 의존성dependency을 다운로드해야 그게 다입니다 설정이 완료되었습니다 꽤 간단하죠 Git 워크플로우 부분과 내용은 아래의 참고해보세요 처음부터 실행해보세요 에러없이 완료되어야 테스트 없이 라이브러리만 run build 명령어 사용하더라도 `lib/`폴더 `p5js`와 `p5minjs`로 라이브러리가 빌드됩니다 빌드된 파일들을 테스트에 만드는 git에서 브랜치는 이름에서 있듯이 `main`이나 브랜치에 영향을 주지 않고 커밋을 추가할 분기된 버전입니다 있게 해줍니다 독립된 식으로요 망쳐도 Desktop에서 현재 커밋하려면 완료한 앱을 열어야 왼쪽 사이드바에 표시되고 내의 구체적인 사항이 창 하단 모서리에 옆의 입력란에는 간략하고 개괄적인 이것이 커밋의 제목이 설명 입력란은 커밋에 작성하거나 그냥 비워둘 Commit 눌러 확정하세요 branch selection After entering new name that does not yet exist Create Branch appears]src/content/contributor-docs/images/github-desktop-create-branchpng 터미널에서 `git branch_name`을 실행하고 `branch_name`을 설명할 이름으로 바꾸면 별도의 진행하면서 특히 `npm test`를 실행하는 데는 해치지 아래에 커밋하기 실행해야 코드베이스codebase에 완료했다면 커밋해야 커밋은 저장된 모음으로 커밋 시점의 내 상태를 기록합니다 궁금하시죠 모으기보다는 커밋하는 문장으로 완료할 입력란에 고급 입력합니다 기술하거나 having made change area where need write circled lower left window]src/content/contributor-docs/images/github-desktop-commitpng 확인하려면 status 변경하지 뜬다면 상태로 [복원](https://git-scm.com/docs/git-restore/)해야 하거나 의도한 사항인지 확인해야 입력하세요 diff 리퀘스트PR Pull request에 포함시키지 않으려는 사항은 커밋해서는 명령어로 사항에 스테이징커밋으로 저장하다하세요 commit -m [your_commit_message] `[your_commit_message]`는 메세지로 대체해야 일반적인 문구는 피해주세요 `Documentation fix 1` 대신 `Add documentation circle function`와 적어주세요 Add function 위 반복하면서 주기적으로 실행하여 Source code 계획을 하고 알고 방법 문서Documentation를 방문하는 문서의 하단에는 링크가 reference website containing sentence Notice any errors typos Please let us know feel free edit src/core/shape/2d\\_primitivesjs pull request Part above says underline it]src/content/contributor-docs/images/reference-code-linkpng Unit tests 계획이라면 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md)를 참조하세요 개선 수정에 대해서는 구현implementation을 커버하는 테스트가 리퀘스트에 포함되어야 한다는 점을 유의하세요 인라인 Inline 계획하고 [여기](https://p5js.org/contribute/contributing_to_the_p5js_reference/)를 접근성 Accessibility 기능에 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/web_accessibility.md)를 친절한 에러 시스템에 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)를 표준 스타일은 [ESLint](https://eslint.org/)에 시행됩니다 커밋commit과 리퀘스트pull request는 linting프로그래밍 오류를 찾아내는 과정을 통과해야만 받아들여집니다 코딩 표준을 따르는 쉬운 에디터용 ESLint 플러그인을 사용하고 리팅linting 하이라이팅대부분 에디터용으로 제공됨을 활성화하는 소프트웨어 원칙 원칙을 염두에 두는 중요합니다 우리의 우선순위는 프로젝트의 우선순위와 다를 잇으므로 프로젝트에서 오는 원칙에 익숙해지는 **접근성** 무엇보다 우선시하며 내리는 결정은 그룹에 늘릴지 고려해야 선언문에서 읽을 **초보자 친화적** API는 초보자에게 친화적을 최신 HTML5/Canvas/DOM API를 인터랙티브하고 시각적인 콘텐츠를 낮은 장벽을 제공합니다 **교육적** p5js는 교육적 사용을 지원하는 API와 커리큘럼에 중점을 두고 API에 완전한 참조와 지원하고 창의적 명확하고 몰입도 순서를 소개하는 튜토리얼과 커리큘럼을 포함합니다 **자바스크립트와 커뮤니티** 자바스크립트 패턴과 사용법을 모델링하면서 곳에서는 추상화함으로써 관행을 접근하기 라이브러리로서 문서화 전파 과정의 넓은 커뮤니티를 **프로세싱과 프로세싱 언어와 커뮤니티에 영감을 받았으며 자바에서 자바스크립트로의 전환을 쉽고 위로 올라가기**]#contributor-guidelines requests PR 변경사항을 테스트까지 마친 후해당할 test` 오류가 발생하지 커밋했다면 저장소로 새 병합하기 준비할 공식적으로 저장소예를 저장소에 저장소로부터의 히스토리로 병합하거나 당겨오도록 생성 푸시하는 포크로 업로드하는 것으로 생각하세요 갓허브 데스크탑GitHub Desktop애서는 변경하는 버튼 깃허브에 클릭하여 푸시하세요[A committing changes push online red]src/content/contributor-docs/images/publish-branchpng 업로드되면 생성하라는 번 클릭하면 미리보기와 요청을 생성하는 Request 시작합니다 Github pushing sidebar changed items pane below No local header blue Review has been marked up circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin 푸시가 열 표시될 브라우저에서 이동할 없다면 목록 상단의 드롭다운 버튼으로 브랜치로 전환한 Contribute를 클릭하고 Open request를 클릭하세요 command response includes link open request]src/content/contributor-docs/images/new-branchpng 방문할 버튼도 볼 수도 web section near yellow call action text Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated p5js's template]src/content/contributor-docs/images/new-prpng 제출하기 작성해야 제목 제목은 간략하게 설명해야 여기서 지양해야 해결 템블릿에는 `Resolves #[Add number here]`라는 문구가 있는데 `[Add here]` 부분을 수정하려는 [above](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#all-about-issues) eg #1234` 번호로 변경해야 리퀘스트가 병합된 닫히게 닫고 싶지 않다면아마도 리퀘스트에서 변경사항으로 올 것이기 `Resolves` `Addresses`로 변경하세요 진행한 구현 사항과 결정 검토review할 추가하세요 스크린샷 상황에 선택적이며 캔버스에 시각적 렌더링하는 방식과 편집기의 스크린샷이 스케치의 스크린샷임을 유의해주세요 체크리스트 변경사항과 항목이 해당하는 `[ ]`를 `[x]`로 변경해주세요 request을 리베이스 Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng 오픈된 검토하고 사항들을 주의해주세요 수는 작업한 수와 일치해야 Commits 탭에는 단 커밋만 표시되어야 Files 탭은 비교하여 변경사항만을 보여주어야 부근에 This no conflicts branch라고 must be resolved라고 표시되어서는 사실이 아니라면예상했던 것보다 커밋이 충돌이 [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/)를 진행하거나 충돌을 해결해야 충돌이란 최근에 변경사항이 적용된 파일에 진행하였으나 깃git에서 변경사항 묶음을 유지할지 제외할지 확정하지 못한 해결하는 어려움이 저희에게 알려주시면 안내해 드리겠습니다 지침은 가끔 깃허브는 Resolve Conflicts 보여주면서 해결할 합니다[A merge conflicting filenames listed there highlighted]src/content/contributor-docs/images/resolve-conflictspng `>>>>>>` 사이에 표시되며 `=======`으로 구분됩니다 부분은 보여주고 쪽 부분에는 메인 변경된 보여줍니다 GitHub's conflict resolution contains markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng 표시를 제거하고 포함될 최종 코드만 남겨둡니다 해결되었을 Mark as resolved를 클릭할 editing remove mark resolved upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng 해결되면 커밋할 all have enabled]src/content/contributor-docs/images/commit-mergepng 깃허브의 인터페이스에서 표시하기에는 너무 수동 방식을 선호한다면 https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` 발생했을 lib/p5js와 lib/p5minjs 파일에서만 발생했다면 해결하기 쉽습니다 빌드하기만 파일에서 발생했고 확실히 모르겠다면 요청하세요 --continue push` 체크 리스트는 단계들을 거친 후에 해결될 않다면 논의 고치기amend 열리면 스튜어드나 검토할 답변할 있기까지 며칠이 조금만 기다려주세요 그동안 이슈들을 확인해 보는 어떨까요 검토한 하나가 발생할 승인되어 병합됩니다 축하합니다 후자의 경우라도 당황하지 마세요 정상적인 과정이며 스튜어드는 완성할 돕기 리퀘스트의 요청되었고 진행할 [이전과 과정](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#git-workflow)를 따르되 복사본 계속해서 진행하고 커밋한 포크된 원격 푸시하세요 푸시하면 검토자에게 요청된 진행했다는 알리기 댓글을 남기세요 필요하지 PR은 병합merge될"},"새로운 라이브러리 생성하기\n":{"relativeUrl":"/contribute/creating_libraries","description":"p5js 라이브러리는 p5js의 핵심 기능을 확장하거나 추가하는 모든 자바스크립트 코드가 될 수 있습니다 라이브러리에는 두 가지 범주가 코어 라이브러리DOM Sound는 배포의 일부이며 기여된 커뮤니티의 구성원이 개발 소유 유지 관리합니다 여러분이 라이브러리 하나를 만들고 있고 [p5js.org/libraries](https://p5js.org/libraries/) 페이지에 포함하고 싶다면 [이 폼](https://docs.google.com/forms/d/e/1FAIpQLSdWWb95cfvosaIFI7msA7XC5zOEVsNruaA5klN1jH95ESJVcw/viewform/)을 제출해 주세요 자바스크립트를 작성하고 사용하는 방법에는 여러 가지가 있으므로 저희는 작업을 여러분에게 맡기도록 하겠습니다 다음은 라이브러리가 잘 동작하도록 하기 위한 참고 사항입니다 ## 코드 ### p5prototype에 메소드를 추가하여 p5 확장 할 예를 들어 domjs의 코드는 DOM에 [HTMLImageElement](https://developer.Mozilla.org/en-US/docs/Web/API/HTMLImageElement/)를 `createImg`메소드를 추가하기 위해 p5를 확장하는 것입니다 ```js p5prototypecreateImg = function src { const elt documentcreateElement'img' //const new Image // 위에 1행보다 더 짧게 대체 eltsrc return addElementelt this } ``` DOM 프로젝트에 포함되면 `createImg`는 `createCanvas` 또는 `background`와 호출 내부 helpers를 private 함수 사용하기 사용자에 호출되지 않을 목적의 함수를 의미합니다 위의 예제의 `addElement`는 [dom.js](https://GitHub.com/processing/p5.js/blob/main/src/dom/dom.js)에서 입니다 `p5prototype`에는 공개적으로 바운드 되지 않았습니다 프로토타입에 클래스를 아래 예제에서 `p5Elementprototype`은 `html` 메소드와 확장되어 엘리먼트의 html을 설정합니다 p5Elementprototypehtml html thiseltinnerHTML //thiselttextContent //innerHTML보다 안전한 대안 preload에서 있도록 p5에 메소드 이름을 등록하려면 registerPreloadMethod를 이용하세요 소리 이미지 외부 파일 로딩과 같은 일부 비동기 기능에는 동기 옵션이 제공됩니다 `loadStringspath [callback]` 은 두번째 매개변수로 선택적으로 콜백 허용합니다이 함수는 loadStrings 함수가 완료된 후 호출됩니다 사용자는 콜백함수 없이 `preload`에서 loadStrings를 있으며 p5js는 `preload`의 작업이 완료 때까지 기다렸다가 `setup`으로 이동합니다 등록하고 등록하고자 하는 메소드명과 `registerPreloadMethod`를 호출하고 프로토타입 객체를 ~~기본값은 p5prototype~~ 포함하여 메소드에 전달합니다 예제는 soundfilejsp5sound 라이브러리에 `loadSound`를 등록하는 행 보여줍니다 p5prototyperegisterPreloadMethod'loadSound' p5prototype *callback* **preload** 대한 함수의 예제 preload 콜백과 p5prototypegetData callback 함수에서 데이터를 복제하고 반환할 만듭니다 덮어쓰거나 재할당하지 않고 업데이트해야 합니다 preload가 원래 포인터/레퍼런스를 유지하는 것이 중요합니다 const로 변수를 선언하면 실수로 재할당하는 경우를 방지해 줍니다 ret {} 작업할 일부입니다 loadDataFromSpacefunction data 데이터의 프로퍼티들을 반복합니다 for let prop in ret의 프로퍼티들로 설정복제합니다 전달받은 빈 업데이트합니다 객체로 ret을 재할당할 수는 없습니다 콘텐츠를 데이터로 ret[prop] data[prop] 콜백이 함수인지 아닌지 확인합니다 if typeof == function' callbackdata 실행 채워진 반환합니다 ***p5*** 여러번 호출되는 **registerMethod** 사용하세요 p5prototypedoRemoveStuff 제거하는 p5prototyperegisterMethod'remove' 등록 수있는 이름은 다음과 같습니다 등록하기 전에 먼저 정의해야 * **pre** — `draw` 시작 시 드로잉에 영향을 줄 **post** 끝에 **remove** `remove`가 호출되면 **init** 스케치가 처음 초기화 스케치 함수`p5` 생성자로 전달 된 것가 실행되기 전역 모드 설정 호출되기 여러분의 스케치에 무엇이든 추가 모드가 활성화되어 있으면 자동으로 `window `에 복사됩니다 목록을 대략적으로 정리하면 [https://GitHub.com/processing/processing/wiki/Library-Basics#library-methods](https://GitHub.com/processing/processing/wiki/Library-Basics#library-methods) 여러분만의 생성 전혀 확장하지 대신에 인스턴스화하고 라이브러리와 연계하여 사용할 있는 제공할 다 혼합 작명 **p5 덮어 쓰지 않아야 합니다** p5prototype을 때는 기존 프로퍼티 함수명을 사용하지 않도록 주의해야 [hasOwnProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty/) 사용하여 확인해 볼 들면 맨 위에서 행을 추가하면 이미 `rect` 메소드가 존재하기 true 출력할 consolelogp5prototypehasOwnProperty'rect' **위와 유사하게 클래스 않아야합니다** p5Image p5Vector p5Element 등을 경우 위와 동일한 프로토콜을 따라야 **p5js는 모드와 인스턴스 이렇게 있습니다** 모드에서 속성과 메서드는 window 객체에 바인딩되므로 접두사 `background` 메서드를 기본 콘솔에 빠르게 Google 검색으로 JS 이름들이 존재하는지 테스트 해 **일반적으로 클래스는 대문자로 표시되며 메서드와 프로퍼티들은 소문자로 시작합니다** p5의 클래스들은 앞에 p5가 붙습니다 네임스페이스를 클래스에만 붙이려고 직접 만들 **클래스명에 접두사로 포함하지 고유한 접두사나 접두사가 없는 이름으로 생성해 **p5js 이름에도 붙지만 단어는 소문자**로 클래스와 구별됩니다 p5soundjs가 지정하려면 형식을 따라주세요 패키징하기 **라이브러리가 포함 단일 파일을 만듭니다** 사용자가 쉽게 라이브러리를 연결할 빠른 로딩을 일반 파일과 [최소화된](http://jscompress.com/) 버전 모두에 옵션에 대해 고려 **기여된 제작자가 호스팅 문서화 관리합니다** 라이브러리들은 GitHub 별도의 웹 사이트 어딘가에 있을 **문서가 핵심입니다** 문서는 찾아보고 다운로드 하여 곳에 있어야 레퍼런스에 포함되지 않지만 유사한 따르고 싶을 수도 [라이브러리 개요 페이지](https://p5js.org/reference/libraries/p5.sound), [클래스 페이지](https://p5js.org/reference/p5.Vector) [메소드 페이지](https://p5js.org/reference/p5/arc/) 예제를 참조하세요 **예제가 좋습니다** 사람들에게 일을 보여주세요 자바스크립트이므로 사람들은 다운로드하기 전 온라인에서 되는 것을 예제들을 호스팅하기 쉬운 [jsfiddle](http://jsfiddle.net/) [codepen](http://codepen.io)이라는 두가지 좋은 **알려주세요** 배포 준비가 되면 [hello@p5jsorg]mailtohello@p5jsorg로 링크와 정보와 보내주세요 페이지](https://p5js.org/libraries/)에"},"p5.js 친절한 에러 시스템(Friendly Error System, FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"## 개요 FES는 학습을 시작할 일반적인 사용자 오류를 겪는 새로운 프로그래머를 돕도록 설계되었습니다 시스템은 시작 잡아내고 사용자가 해결하도록 명확한 표현과 링크를 제공합니다 막 마주칠 수 있는 함수에만 적용됩니다 서버를 실행하지 않고 파일을 로드한다거나 URL로 loadImage 함수를 호출하는 등의 특히 문제는 예외입니다 FES의 목표는 종종 암호화된 콘솔 보완하기 위해 이해하기 쉬운 오류 메시지를 생성하는 것입니다 예를 들어 자바스크립트는 기본적으로 파라미터의 타입 검사를 지원하지 않기 경험이 없는 자바스크립트 개발자는 파라미터 입력 시 발생하는 에러를 발견하기가 더욱 어렵습니다 FES 메시지는 우리가 이해할 보통의 언어로 되어 있고 문서로도 연결되며 초보자 수준으로 작성되었습니다 오류들은 p5js를 통해 여러 파일에서 발생하지만 대부분의 작업과 작성은 `src/core/friendly_errors`에서 일어납니다 `p5js`에서는 FES가 활성 상태이고 `p5minjs`에서는 비활성 상태입니다 FES를 비활성화 하려면 `p5disableFriendlyErrors = true` 설정하면 됩니다 종류의 감지하고 출력할 있습니다 `validateParameters`는 인라인 문서 기반으로 함수의 파라미터를 점검합니다 `friendlyFileLoadError`는 파일 로딩 잡아냅니다 두 검사는 기존의 선택된 p5 함수에 통합되었지만 `p5_validateParameters` 호출하여 더 많은 함수나 자체 라이브러리를 추가할 유용한 얻기 함수에서나 `friendlyError`를 호출할 `helpForMisusedAtTopLevelCode`는 윈도우 로드 호출되며 setup이나 draw 외부에서 p5js 사용할 있는지 확인합니다 자세한 기술 정보는 [src/core/friendly\\_errors/fes\\_core.js](https://github.com/processing/p5.js/blob/main/src/core/friendly_errors/fes_core.js)에서 메모를 참고하세요 ### `core/friendly_errors/file_errors/friendlyFileLoadError` * 함수는 파일이 올바로 로드되지 않으면 친절한 생성하고 표시합니다 로드하기에는 너무 큰지 확인해서 경고를 생성하기도 합니다 이것은 다음과 `p5_friendlyFileLoadErrorERROR_TYPE FILE_PATH` 예시 ```javascript /// 폰트 누락 let myFont function preload { loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' {} 콘솔에 다음의 메시지가 생성됩니다 > 폰트를 로드하는 데 문제가 같습니다 경로 [assets / OpenSans-Regularttf]가 올바른지 온라인 호스팅하는지 또는 로컬 서버가 실행 중인지 확인하십시오 ``` 현재 버전에는 `image` `XML` `table` `text` `json` `font`에 대한 템플릿이 포함되어 `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes`에 구현되었습니다 크기가 커서 중 생기는 오류는 loadX 메소드에 `core/friendly_errors/validate_params/validateParameters` `docs/reference/datajson`에 정보와 일치하는지 검증을 실행합니다 함수 호출이 올바른 개수와 파라미터형을 가지고 arc1 ptjs arc 4번째 자리인덱스는 0부터 시작에 빈 값이 들어온 의도한 것이 범위의 문제입니다 [https://p5js.org/examples/data-variable-scope.html]. [https://p5js.org/reference/#p5/arc] 5번째 자료형 arc'1' MathPI pie' p5jsarc 0번째 자리에는인덱스는 시작에는 숫자가 들어와야 하는데 문자열이 들어왔습니다 `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME 는 검증이 필요한 내부에서 씁니다 목적으로는 사용하는 좋습니다 은 주로 디버깅이나 단위 테스트 목적으로 사용합니다 `color/creating_reading` `core/2d_primitives` `core/curves` `utilities/string_functions` 함수로 구현되어 추가 기능 p5와 디버거로 개발자들을 환영합니다 IDE와 웹 에디터에서 동작합니다 개발자 유의사항 객체를 생성할 파라미터로 사용될 모든 객체는 클래스 선언부에서 `name` 파라미터오브젝트의 이름 값을 지정해야 들면 p5newObject functionparameter thisparameter 파라미터' thisname p5newObject' 허용되는 타입은 `Boolean` `Number` `String` 객체의 이름위의 주요 항목 참고입니다 유형에 배열 파라미터에는 `Array` 쓰세요 경우 특정 타입의 파라미터가 허용되는지예시 `Number[]` `String[]` 설명 섹션에 적습니다 지원되는 이렇습니다 가집니다 `p5Color` `p5Element` `p5Graphics` `p5Renderer` `p5Renderer2D` `p5Image` `p5Table` `p5TableRow` `p5XML` `p5Vector` `p5Font` `p5Geometry` `p5Matrix` `p5RendererGL` p5js에서 p5minjs에서는 기능이 프로세스 속도를 저하시키지 않도록 비활성화되어 검사 코드를 상당히 느리게 할 있습니다일부 최대 배 성능 테스트를 참조하십시오 [friendly error performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). 아래 한 줄의 코드로 p5disableFriendlyErrors true // 설정 작업 이렇게 하면 FES에서 저하를 일으키는 부분인자 확인 같은이 비활성화됩니다 성능에 영향을 주지 않는 부분파일 실패 오류나 전역에서 오버라이드 경고 등은 그대로 유지됩니다 알려진 제한사항 프로그램 늦춥니다 옵션에서 true`를 설정하여 축소 버전`p5minjs`에서는 기본 설정이 비활성입니다 FES에서는 오류가 정상으로 처리되는 상황이 발생할 경우는 보통 함수가 설계된 형태와 실제 방식이 일치하지 않을 생깁니다예시 그리기 원래 2D와 3D 설정에서 서로 바꿔 있도록 라인을 그리면 FES에 잡히지 않습니다 `line` 2D 문서에는 패턴이 허용되기 때문입니다 버전의 `_rendererisP3D` 같은 환경 변수를 확인하지 않는다는 의미이기도 const x3 undefined line0 `const` `var` 사용해 선언할 덮어 쓴 전역 변수만 감지할 `let`을 사용했다면 감지되지 `let`이 인스턴스화하는 방식 현재는 해결이 진행 보다 유형을 식별하고 일반화합니다 `bezierVertex` `quadraticVertex` - 필수 초기화하지 않음 `nf` `nfc` `nfp` `nfs` 숫자형 양수 체크 향후 색상 재도입합니다 직관적인 출력합니다 `validateParameters`에 스페인어 번역도 완료합니다 색맹 친화적이 되도록 색상을 정교한 아스키 코드는 언제나 환영입니다 잡습니다 브라우저가 콘솔로 던지는 잡아내면 매우 도움이 될 그것과 일치하는 주석을 볼 코드 조각은 windowconsole 메소드를 기능을 수정하는 새 감싼다 있지 않지만 잘 형식을 갖춘 제공할 있을 것이다 original original_functions log originallog warn originalwarn originalerror [log error]forEachfunctionfunc{ windowconsole[func] functionmsg 래퍼 함수에서 잡아낸 msg'로 무엇인가 처리한 호출하라 original_functions[func]applyoriginal arguments"},"배포 프로세스\n":{"relativeUrl":"/contribute/release_process","description":"## 접근법 * 우리는 `주부수` 버전 패턴을 따르는 유의적 관리 따릅니다 요구사항 Git nodejs NPM이 여러분의 시스템에 설치되어 있어야 합니다 NPM CLI에 로그인 되어 `npm whoami`에 로그인되어 있는지 확인합니다 높은 대역폭 다운로드/풀/푸쉬 할것이 많습니다 총 \\~190MB 예상 사용법 ```shell $ npm run release ``` 빌드 단계가 실행되며 프로세스를 마치려면 `np`에서 제공하는 프롬프트를 따라야합니다 단계에서는 grunt 태스크를 실행해 라이브러리의 zip 버전을 생성하고 bower에서 릴리즈 하고 웹사이트에 해당 레퍼런스를 실제로 일어나는 release`는 [`np`](https://www.npmjs.com/package/np/)를 실행하여 먼저 하위 만들어내는 `grunt release-p5`의 별칭입니다 `np`는 로컬 저장소를 체크하고 릴리즈를 생성하기 위해 설정을 준비하므로써 시작합니다 계속 진행하기 저장소에 커밋이 안된 변경사항이 있으면 안됩니다 `node_modules`를 재설치하고 test`로 테스트를 실행합니다 처음에 선택한 항목에 범프합니다 이전 실패하면 저장소는 release`를 실행하기 전 초기 단계로 돌아갑니다 업데이트된 넘버로 문서와 라이브러리를 빌드하기 `packagejson`안에 `prepublishOnly`에 언급된 태스크가 실행`grunt prerelease` 됩니다 패키지가 게시됩니다 NPM에 출시 `packagejson`에 `files`에 파일들만 태그들과 커밋들을 git remote에 푸쉬됩니다 초안 릴리즈는 수정할 수 있는 변경로그들과 githubcom에 생성됩니다 `lib` 폴더 안에현재 빈 예제가 포함되어 있음 Zip 파일 `p5zip`을 생성하며 위에서 생성한 GitHub Release 초안에 업로드 되어야 프로세스가 완료되면 `release/` 가리키는 창이 열리고 창에는 Github Release의 일부로 업로드해야 하는 모든 파일을 포함하고 있습니다 새로 된 Bower용 [p5.js-release](https://github.com/processing/p5.js-release/) 푸시합니다 참조를 [p5.js-website](https://github.com/processing/p5.js-website/)에 테스팅 대한 푸시 액세스 권한이 경우 release---preview`를 릴리스 간단하게 실행 할 단계를 실행하더라도 추적 파일이 변경되지 않으며 리모트에 푸시되지 않습니다 없는 `packagejson`의 `name` 필드를 네임스페이스 버전으로 편집해야합니다 예를 들면 평소처럼 전에 `@username/p5`을 입력하고 번경사항을 git에 커밋합니다 패키지된 네임스페이스에 패키지를 게시하지 않도록 선택하라는 메시지가 표시되면 온라인에는 아무 것도 게시되지 편집 한 release`로 릴리스의 전체 실행할 잇습니다 Bower 릴리스와 웹 사이트에 복제하고 푸시할 위치를 선택하려며 다음과 추가 인수를 지정 -- --bowerReleaser=username` **참고** `np` `620`에는 현재 패키지 이름으로 릴리스를 막는 [bug](https://github.com/sindresorhus/np/issues/508/)가 존재하며 이것을 테스트해야하는 `521`로 되돌릴 않으면 단계에서 실패합니다"},"스튜어드(Steward) 지침\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* p5js에 대한 기여를 관리하고 검토하는 방법에 대해 알아보세요 */} 방금 스튜어드steward로 참여하셨거나 p5js의 숙련된 유지관리자maintainer거나 사이 어딘가에 있으시거나 안내서에는 효과적으로 기여하는 데 도움이 되는 정보는 팁과 요령이 포함되어 있습니다 여기에 작성된 대부분의 내용은 달리 명시되지 않는 한 지침에 불과하므 여기서 보여지는 절차들은 여러분의 작업 흐름에 맞게 조정할 수 ## 목차 * [이슈Issues]/steward_guidelinesmd#issues [버그 보고]/steward_guidelinesmd#bug-report [기능 요청]/steward_guidelinesmd#feature-request 향상]/steward_guidelinesmd#feature-enhancement [토론Discussion]/steward_guidelinesmd#discussion [풀 리퀘스트Pull Requests]/steward_guidelinesmd#pull-requests [간단한 수정]/steward_guidelinesmd#simple-fix 수정]/steward_guidelinesmd#bug-fix [새로운 기능/기능 향상]/steward_guidelinesmd#new-feature-feature-enhancement [디펜다봇Dependabot]/steward_guidelinesmd#dependabot [빌드 과정]/steward_guidelinesmd#build-process [주요 빌드 작업]/steward_guidelinesmd#main-build-task [기타 작업]/steward_guidelinesmd#miscellaneous-tasks [배포 과정]/steward_guidelinesmd#release-process [팁과 요령]/steward_guidelinesmd#tips--tricks [회신 템플릿 Reply templates]/steward_guidelinesmd#reply-templates [깃허브 CLI]/steward_guidelinesmd#github-cli [알림 관리]/steward_guidelinesmd#managing-notifications *** 이슈Issues 우리는 소스 코드 기여가 이슈Issue에서 시작하는 것을 권장하며 이슈는 논의가 이루어지는 곳입니다 문제를 검토할 취해야 할 단계는 문제의 종류에 달라집니다 리포지토리repo는 다양한 유형의 더 잘 정리하고 문제 작성자가 문제에 정보를 제공하도록 권장하기 위해 이슈 템플릿(templates)](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/)을 사용합니다 첫 번째 종종 입력된 템플릿을 살펴보고 추가 정보가 필요한지 여부를 결정하는 것입니다 일부 필드가 입력되지 않았거나 잘못된 템플릿이 사용되었을 경우 ### 버그 보고 보고는 Found a bug 템플릿template을 사용해야 합니다 보고를 하기 위해서는 다음과 같은 과정이 일반적입니다 재현 템플릿의 목표는 검토자가 버그를 재현할 있도록 충분한 제공하는 보고된 버그가 리포지토리repo와 관련이 없는 p5js 웹사이트 접근 권한이 있다면 연관 리포지토리로 전송합니다 않으면 보고서가 위치할 곳에 답변을 직접 연결되는 링크와 남기고 이슈를 닫습니다 제공되는지 확인하고 제공되는 경우에 설명된 대로 재현을 시도하는 있는 특정 고치는 최선의 방법을 찾기 약간의 필요할 때로는 간단할 수도 있고 까다로울 사례별로 결정을 내릴 때는 [p5js 디자인 원칙]/design_principles/를 참조하세요 수정에 기여할 의향이 코멘트를 남기 이슈에 할당하여 수정을 승인합니다 담당자Assignee 우측에 톱니바퀴 버튼을 사용하세요 기여하기 원하지 가능한지 알아볼 댓글을 남깁니다 해결하려고 시도하거나 해결이 필요한 문제임을 나타내기 `help wanted` 라벨을 추가하여 수정이 표시합니다 템플릿template에 부족하다면 요청합니다 버전 브라우저 OS 테스트 환경이 환경과 또는 환경에서 없다는 의견을 추가하고 설정을 가진 사람에게 버그는 웹 에디터를 사용할 때만 발생하고 로컬에서 테스트할 발생하지 않습니다 [웹 에디터 리포지토리(repo)](https://github.com/processing/p5.js-web-editor/)로 리디렉션해야 나중에 재현이 가능해 2번로 다시 이동합니다 동작이 아니라 사용자가 보고서에 제공한 코드에서 발생한 문서화 구현 친근한 오류 시스템friendly error system을 개선하여 동일한 오류가 않도록 있는지 판단합니다 질문이 있으면 [포럼(forum)](https://discourse.processing.org/) [디스코드(Discord)](https://discord.com/invite/SHQ8dH25r9/) 리디렉션하고 변경사항이 없다면 종결close하세요 기능 요청 요청은 새로운 요청New Feature Request 기능을 요청하기 접근성 향상을 위한 노력의 일환으로 해당 분야에서 역사적으로 소외된 커뮤니티에서 접근성을 높이는 사례가 되어야 자세한 [이 곳]/access/에서 볼 요청에 향상Increasing Access 충분히 않은 작성자에게 기능이 높이는지 질문할 기능의 설명은 검토자를 포함한 커뮤니티의 구성원이 제공할 기준에 포함 평가할 프로젝트 범위와 [디자인 원칙]/design_principles/에 적합한가요 예를 들어 기본 도형을 추가하는 고려될 있지만 기반 IOT 프로토콜 고려 범위에서 벗어날 가능성이 높습니다 전반적으로 범위는 드물게 사용되는 기능으로 인한 과도한 팽창을 피하기 상대적으로 범위가 좁아야 범위에 맞지 애드온 라이브러리addon library로 만들도록 제안합니다 맞는지 불분명한 개념 증명 차원에서 library를 제안하는 것도 좋은 방법입니다 이는 사용자에게 제공하고 쓰임새와 중요성에 구체적인 예시를 제공하며 완전히 통합된 기능처럼 해결책이 완벽할 필요는 없습니다 적합하다고 판단될 내에 통합될 이전 버전과 호환성이 변경breaking changes의 원인이 될 있나요 기존 함수 변수와 충돌이 발생하나요 기존에 p5js로 일반적인 스케치와 충돌하요 위와 충돌을 일으킬 기능들은 변경으로 간주됩니다 배포](https://docs.npmjs.com/about-semantic-versioning/)가 변경을 만들지는 제안된 이미 간단한 순수 자바스크립트 코드나 기존의 사용하기 쉬운 라이브러리를 사용하여 만들어질 문자열 배열을 연결하기 `join[Hello world]`보다는 문법인 `[Hello world]join`가 우선시됩니다 요구 사항과 나머지 사항이 충족된 PR을 시작하기 전에 최소 2명의 스튜어드 유지관리자가 요청을 승인해야 기능에 PR 검토 과정은 아래에 설명되어 향상 향상Existing Enhancement 요청과 매우 비슷합니다 가끔 향상의 차이가 명확하지 않을 향상은 주로 다루지만 추가하도록 요청할 마찬가지로 경우에만 허용됩니다 [위 섹션](http://guidelines.md#feature-request)의 1번 항목을 참고해주세요 향상에 기준은 요청의 경우와 비슷하지만 잠재적으로 changes을 특히 주의해야 함수를 수정하는 모든 이전의 유효하고 문서화된 시그니처function signature 함수의 원형에 명시되는 매개변수 리스트가 방식으로 동작해야 PR이 시작되기 적어도 명의 유지관리자의 승인을 받아야 문서화되어 토론Discussion 토론Discussion을 가지고 있으며 것으로 통합하기 주제에 피드백을 모으는 데에 사용되어야 종류의 토론 대화가 끝나고 문제가 생성되면 종료될 이슈가 토론으로 열려 것들은 올바른 적용하고 없애야 버그에 포함되지 않았다면 요청해야 이가 열렸지만 기여와 없거나 깃허브 리포지토리repository/기여 과정/기여 커뮤니티와 포럼forum 디스코드Discord로 리디렉션하고고 닫아야 경우에는 눈에 토론인지 알 있게 표시하기 추가해야 풀 Requests 리포지토리repository에 기여는 리퀘스트pull request를 통해 이루어집니다 스튜어드와 유지관리자는 리포지토리에 푸시push 기여 시 똑같이 > 과정을 거치도록 권장합니다 같습니다 리퀘스트 템플릿은 곳](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md)에서 확인할 리퀘스트는 먼저 관련 열고 논의해야 [이슈 절차workflow]/steward_guidelinesmd#issues를 따른 뒤에 스튜어드나 검토해야 절차가 적용되지 유일한 경우는 오타 수정 뿐이며 열 필요가 없고 분야의 스튜어드가 아니더라도 병합merge 사람이 병합할 예외가 존재하지만 기여자들이 열도록 적용될지 모르겠다면 어쨌든 열어보세요 제시된 리퀘스트를 해결되지 원본 게시물post의 Resolves #OOOO를 Addresses #OOOO로 수정하여 병합 시에 자동으로 닫히지 않게끔 수정은 누구나 PR의 변경된 파일Files Changed 탭에서 자동 지속적 통합Continuous Integration CI 테스트를 통과하는지 확인하세요 [The files changed tab when viewing pull request on GitHub]src/content/contributor-docs/images/files-changedpng All checks have passed indicator GitHub highlighted above the merge button]src/content/contributor-docs/images/all-checks-passedpng 스튜어드에 검토되어야 하며 이상적으로는 이슈의 승인한 이를 수행해야 탭을 토론discussion에 되었는지 최초로 PR은 가능하고 적절하다면 테스트해야 CLI는 간소화하는 많은 아래의 요령]/steward_guidelinesmd#tips-tricks에 [ ] 원래의 해결해야 이슈에서 합의되지 동작을 변경해서는 안됩니다 성능에 큰 영향을 주지 않아야 접근성에 영향도 최신 표준 코딩을 수정사항은 자동화된 통과해야 하고 새 포함해야 변경 곳](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request)에 행에 줄별 주석line comments을 제안 블록suggestion block으로 사항을 제안할 있습니다\\ Suggest Change button while writing comment code in request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested change appearing within fences with suggestion tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed as diff]src/content/contributor-docs/images/suggestion-previewpng 여러 번 변경이 줄 주석single-line 추가하지 마세요 대신 곳](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/)에 절차에 주석multiple-line comments과 번의 요청으로 변경하세요 comments이 설명이나 토론을 것이라면 요청Request changes 답글Comment을 선택해 주세요\\ option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng 검토되고 필요하지 스튜어드는 댓글이 있든 없든 단계에서 승인Approve 옵션을 선택하여 승인Approved으로 표시할 그런 원한다면 유지관리자에게 검토를 병합하거나 병합을 기여자를 [README.md](http://readme.md/) 파일의 기여자 목록에 추가하려면 @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) 봇을 호출해야 각각의 유형은 `[contribution` `type]`에 전체 목록은 위 링크에서 [images/suggest-changepng]src/content/contributor-docs/images/suggest-changepng [images/suggested-value-changepng]src/content/contributor-docs/images/suggested-value-changepng [images/suggestion-previewpng]src/content/contributor-docs/images/suggestion-previewpng `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` `type]` 수정과 가지 주목해야 차이점이 병합merge되기 두 검토와 디펜다봇Dependabot 보통 리포지토리의 관리자admins에게만 표시되므로 여러분에게 해당하지 않는다면 섹션을 건너뛰어 주세요 [유의적 버전(semver)](https://semver.org/) 패치patch 업데이트면서 통과한 Dependabot 병합merge될 디펜다봇 유의적 버전의 경미한 다루는 테스트만 통과하면 병합될 빠르게 업데이트된 종속성dependency의 기록changelog을 확인하는 것이 좋습니다 주요 과정이나 검토자reviewer는 가능하면 버전부터 대상 버전까지의 기록을 검토하고 로컬 테스트하여 정상적으로 작동하는지 확인합니다 종속성의 호환성 대비에 제출합니다 Nodejs는 오래된 버전에 공식 지원을 중단하기 꽤나 종속성이 충돌합니다 종속성 API 것은 아닙니다 과정 섹션에서는 설정이나 명령어는 다루지 않고 뒤에서 일이 일어나고 자세히 설명합니다 Gruntfilejs 파일에는 정의들이 라이브러리와 문서를 구축하는 사용된 도구 중에는 Grunt Browserify YUIDoc ESLint Babel Uglify Mocha가 이게 다는 `default` 작업으로 거기서부터 거꾸로 작업하는 우리에게 도움될 시점에는 설명을 따라가며 Gruntfilejs를 열어보는 ``` gruntregisterTask'default' ['lint' test'] `grunt` npm 스크립트 `npm test`를 열었을 `lint`와 `test`로 구성된 작업이 실행됩니다 #### `lint` gruntregisterTask'lint' ['lintsource' lintsamples'] 작업은 하위 구성됩니다 `lintsource` `lintsamples` 는 ESLint를 스크립트를 `eslintbuild` `eslintsource` `eslinttest`의 세 나뉩니다 `yuidocprod` `cleanreference` `minjson`로 `yui` 작업을 실행합니다 코드로부터 추출하여 JSON 문서로 변환합니다 사용되지 파일을 제거하며 생성된 `dataminjson` 최소화합니다 다음은 `eslint-samplessource`로 [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs에 정의되어 사용자 작성 작업입니다 문서 예제 코드가 부분와 코딩 규칙을 따르는지 확인하기 실행할 예제를 린트lint하기 빌드해야 `yui`는 `test` ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` 살펴보겠습니다 gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest `browserify`로 작업들은 [/tasks/build/browserifyjs]/tasks/build/browserifyjs에 비슷한 단계로 되어 파일에서 하나로 빌드하는 단계입니다 `browserify`는 p5js를 반면 `browserifymin`는 최소화할 중간 파일들을 빌드합니다 `browserify`와 `browserifymin`의 차이점은 `browserifymin`에는 FES가 작동하는 데이터가 있지 않다는 `uglify`는 `browserifymin` 출력 가져와 최종적으로 p5minjs로 단계의 구성은 메인 Gruntfilejs에 `browserifytest`는 [Istanbul](https://istanbul.js.org/)을 p5js와 버전으로 빌드됩니다 단 커버리지test coverage 추가된 코드를 `fsreadFileSync` nodejs 전용 코드의 사용은 `brfs-babel`을 실제 내용으로 대체됩니다 WebGL 별도의 파일로 셰이더shader 삽입inline하기 사용됩니다 node\\_modules의 종속성dependency을 Babel을 packagejson에서 정의된 Browserslist 사항에 맞춰 트랜스파일transpile하고 ES6 import문import statement을 browserify가 이해하는 CommonJS require로 호환성에 걱정 없이 이상에서 구문syntax을 됩니다 번들링bundling 후 번들링된 파일에 기록되기 전까지 코드는 `pretty-fast`를 전달됩니다 최종 포맷이 일관되도록 정리되어야 원하는 읽고 검사할 있을 예상됩니다 세부 단계가 나와 위에 링크된 browserify 정의 확인하여 내용을 connectserver 단계에서는 파일과 빌드된 호스팅하는 서버를 가동하여 크롬Chrome에서 mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs에 Puppeteer를 사용해 원격 제어가 가능한 크롬의 헤드리스 버전을 가동하고 `/test` 폴더에 HTML 관련된 여기에는 라이브러리의 축소되지 축소된 단위 테스트unit test 모음에 테스트하는 레퍼런스 mochaTest 크롬 nodejs에서 실행되고 중 일부만 테스트한다는 점에서 `mochaChrome`과 기능은 필요하므로 세트는 테스트에 확장해야 마지막으로 빌드와 테스트가 완료되면 `mochaChrome`이 라이브러리 커버리지 보고서를 수집하고 범위 데이터를 콘솔에 출력합니다 커버리지는 추가적인 데이터 포인트를 모니터링하고 확보하는 100%를 목표로 하지는 여기까지 기본적인 환경 구성configuration 다루어 보았습니다 `npx grunt [step]`으로 위에서 다루지는 않았지만 상황에서 유용할 작업도 yuidev 빌드를 실행한 가동합니다 서버는 [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/)와 기능적으로 유사한 페이지를 제공합니다 변경점을 문서와 `yuidev`는 인라인 문서의 유용한데 저장소repository에서 저장소로 이동할 필요도 생길 때마다 웹사이트를 빌드할 없기 때문입니다 브라우저에서 단순화된 변경사항을 미리 보면 이렇게 하면 웹사이트에 올바르게 표시되는지 해당된다는 알아두세요 스타일 레이아웃 페이지 자체에 변경사항은 저장소에서 생성 watch watchmain watchquick 워치Watch 감시하고 실행하여 레퍼런스나 범위의 차이를 제외하면 수행합니다 `watch` 감지할 실행하는 것처럼 보일 거예요 `watchmain` 실행하지만 감지해도 레퍼런스를 빌드하지는 `watchquick` 감지된 중인 내용에 가장 효율적인 워치watch 방식을 선택한다면 변경사항마다 수동으로 빌드하지 않아도 배포 [release\\_processmd]/release_process/를 요령 때때로 검토가 이슈와 수가 너무 많아질 보다 용이한 가지를 알려드립니다 회신 양식 Template 리퀘스트에 작성을 돕는 깃허브GitHub 기능인 [저장된 회신Saved Replies)](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/)이 흐름workflow 일부는 동일하거나 답변포럼으로 질문을 리디렉션하거나 승인 등으로 PR에 응답해야 있는데 **저장된 회신**을 사용하면 작업의 효율이 올라갈 유지관리자maintainer가 사용하는 회신**의 일부입니다 사용하거나 만들어 보세요 ##### 종결Closing 없음 We're not able to reproduce this but please feel free reopen if you can provide sample that demonstrates issue Thanks 이것을 수는 없지만 보여줄 샘플 열어주세요 감사합니다 스니펫 필요 I'm closing for organizational purposes Please snippet illustrates 조직 운영 관리 종결합니다 설명하는 스니펫을 포럼 사용 The issues here are good place bugs and library itself For questions about your own tests or following tutorials [forum](https://discourse.processing.org/) is best post 자체의 버그나 올리는 튜토리얼에 것에 싶다면 [포럼](https://discourse.processing.org/)만한 곳이 없을 거에요 GSOC discuss proposals our [forum](https://discourse.processing.org/c/summer-of-code/). 제안을 논의하고 우리의 [포럼](https://discourse.processing.org/c/summer-of-code/)만한 없답니다 seeing lot of interest feature we don't clear explanation how it [expands access]/access/ so I will close now If an access statement be added welcome 기능으로부터 이점을 찾을 [접근성을 확장]/access/하는지에 명확한 설명이 없으므로 종결하겠습니다 추가할 되면 언제든지 We do see further more detailed Thank 이슈로 인해 [접근성이 확장]/access/되는지에 애드온Addon 부가 think function beyond scope try keep minimal possible could great starting point addon See docs create [https://github.com/processing/p5.js/blob/main/contributor\\_docs/creating\\_libraries.md](../creating_libraries/) 범위를 벗어나는 같지만 최소한의 크기를 유지하고 싶어요 만드는 시작점이 애드온을 생성하는 알고 확인해 필요함 As reminder need opened before requests tagged This necessary tracking development keeping discussion 참고로 게시하고 태그를 지정하기 게시해야 개발을 추적하고 명확하게 유지하는 필요해요 해결 You go ahead fix 계속 해결해도 Looks 괜찮아 보이는데요 CLI 복잡한 여러분이 git 명령어로 가져오면 어려울 다행히도 CLI](https://cli.github.com/)가 과정에서 도움을 있겠군요 CLI를 설치하고 로그인하고 `gh pr checkout [pull_request_id]` 명령어를 실행하면 가능하며 포크 가져오기 브랜치 체크아웃 수행됩니다 main 브랜치로 돌아가는 `git main`으로 브랜치를 전환하는 것과 방문하지 않고도 CLI에서 남길 CLI에는 수많은 명령어가 사용하기에 도구입니다 알림 이슈나 **이슈** **풀 리퀘스트** 저장소 이름 반대편 상단에 눈 아이콘이 **보기Watch** 클릭하여 저장소를 [Cropped screenshot top right corner repository page showing series buttons center from left Sponsor Watch Fork Starred]src/content/contributor-docs/images/github-repo-metricspng 보기를 활성화하면 핸들에 언급 구독한 활동과 이벤트가 페이지](https://github.com/notifications/)에 알림으로 전송되며 이메일의 받은 편지함과 비슷하게 *읽음* *삭제됨* 표시될 보기가 활성화된 저장소에 이메일을 GitHub로부터 수신할 설정 페이지](https://github.com/settings/notifications/)에서 아예 구독 취소하는 방식에 맞는 선택하는 여러분은 사안을 찾아내야 하는 귀찮음과 깃허브의 끝없는 압박 사이의 선택지에 서 균형 잡힌 선택이 필요한데 처음이라면 **이슈**와 리퀘스트**에 **보기**를 활성화하고 참여 @멘션 정의에 이메일만 수신하도록 설정하는 추천합니다"},"단위 테스팅\n":{"relativeUrl":"/contribute/unit_testing","description":"단위 테스트를 사용하여 코드베이스의 개별 컴포넌트가 예상대로 작동하는지 확인합니다 ## 참조 비슷한 기술 스택과 [빠르고 좋은 테스팅 소개](https://codeburst.io/javascript-unit-testing-using-mocha-and-chai-1d97d9f18e71/)가 있고 [좀 더 깊이 살펴 볼수 있는 자료](https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d/)가 있습니다 모든 테스트 실행하기 루트 레파지토리에서 커맨드를 터미널에서 사용해주세요 ```shellsession npm test ``` 커버리지 테스가 실행될때 마다 보고서가 생성됩니다 보고서에는 스위트가 소스 코드 파일을 테스트해 보았는지 자세히 설명하여 많은 코드베이스를 테스트했는지 효과적으로 알려줍니다 요약본은 실행하고 난 뒤에 출력되며 상세한 보고서는 웹브라우저에나 `coverage/indexhtml`에서 볼 수 맥 커맨드라인에서 `open coverage/indexhtml`를 실행하면 디폴트 브라우저에 해당 페이지가 열립니다 커맨드 `npx nyc report --reporter=text`를 사용하고 후 리포트를 ### 단윌 스위트 실행 단일 테스트나 그룹 위해 `js` 파일에 `suite` `test`에 `only`를 붙이고 위에 명령어를 사용해 실행합니다 **`only`를 커밋하지 않도록 주의해주세요**저희는 항상 CI가 *모든* 실행하기를 원합니다 #### 예제 p5ColorConversion 스위트를 `test/unit/color/color_lightjs`의 첫 행을 다음과 변경합니다 ```js suiteonly'color/p5ColorConversion' function { 이제 `npm test`를 사용하면 `function`내에서만 테스트가 실행됩니다 건너뛰기 기능은 `only` 반대입니다 `skip`을 추가하면서 Mocha가 케이스들을 무시하도록 할 있으며 건너뛴 항목은 보류 중으로 표시되고 이대로 보고됩니다 인프라 프레임워크 구조화하고 [mocha](https://mochajs.org)를 사용합니다 [chai의 `assert` `expect`)](https://www.chaijs.com/api/assert/)를 코드의 작동 방식에 대한 문장을 작성합니다 환경 브라우저에서 실행되는 `test/unit` 폴더 아래 모음과 Nodejs에서 `test/node` 컬렉션이 브라우저 테스트는 [headless Chrome](https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai/)에서 실행할 창이 나타나지 않습니다 설정 헬퍼 함수 현재 테스트에서만 사용할 있습니다대부분의 위치 * `test/js/mocha_setupjs` mocha의 몇가지 옵션을 `test/js/chai_helpersjs` chai `chaiassert` 도움되는 추가 `test/js/p5_helpersjs` p5 스케치의 도와주는 Nodejs를 위한 설정은 `test/mochaopts`에서 수행됩니다 지속적인 통합 p5js 풀리퀘스트를 오픈하면 자동으로 [테스트가 실행]/ttps//githubcom/processing/p5js/actions/ 됩니다 이를 통해 기여자의 추가적인 작업 없이 풀 리퀘스트 대해 통과했는지 재확인할 [Codecov](https://codecov.io/github/processing/p5.js)에 리포트가 업로드 단위테스트를 추가하고 싶다면 컴포넌트에 파일이 이미 존재하는지 확인해 보세요 `src/`에서 주어진 `test/unit`과 같은 경로에 있습니다예를 들면 `src/color/p5Colorjs`의 `test/unit/color/p5Colorjs`안에 찾을 없다면 아마 없기 때문일 것이기에 아직 😉 컨벤션에 새로운 생성합니다 작성하고 모듈이 동작하기위해 브라우저가 필요하다면 `test/unit`안에 넣고 싶지만 않다면 아래에 추가할 **의심이 든다면 `test/unit`에 추가하면 됩니다추후 필요한 경우 이동하는 편이 매우 쉽습니다** 모듈을 추가해야 `test/unit/specjs`안 `spec`배열의 두어야 합니다 부분은 실행에 로드되어 있는지 `test/testhtml` 보면서 테스트들을 확인 작성 단위를 선택하세요 메소드 또는 변수 예제로 `p5prototypeisKeyPressed`를 봅시다 작성하기 전에 메소드의 예상되는 동작을 이해할 필요가 **예상되는 동작** boolean 시스템 변수는 키를 누르는 참이고 누르지 않으면 거짓입니다 동작에 다양한 생각할 잇습니다 가능한 케이스는 같습니다 변수가 boolean이다 누르면 참이어야 한다 키알파벳 키 숫자 특수문자 등를 누르더라도 여러 거짓이어야 생각나는 것이 있다면 계속해서 추가하세요 생성하고 작성할 구성하기 mocha를 것입니다 suite'p5prototypekeyIsPressed' test'keyIsPressed is a boolean' //이곳에서 } true on key press' false when no keys are pressed' 구성했지만 작성하지 않았습니다 chai의 assert를 다음을 고려해 assertisBooleanmyp5keyIsPressed //해당 값이 boolean인지 유사하게 참인지 확인하기 `assertstrictEqualmyp5keyIsPressed true` 사용 assert에 [여기](https://www.chaijs.com/api/assert/)에서 좀더 했으므로 메소드가 확인해보세요 동일한 이슈를 원한다면 문제를 해결"},"WebGL 기여 안내\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* p5js WebGL 모드에서 소스 코드 작업을 시작하는 방법 */} 여러분이 페이지를 읽고 있다면 아마도 모드에서의 작업에 도움을 주고 싶으신 것이겠죠 여러분의 기여에 다시 한 번 감사의 말씀을 드립니다 페이지에서는 기여가 구성되었는지를 설명하고 변경사항을 만들기 위한 가지 팁을 제공합니다 ## 참고 자료 * p5js의 모드가 기반으로 하고 있는 2D 모드와 다른지 이해하려면 [p5js 모드 아키텍쳐]/webgl_mode_architecture/를 읽어보세요 셰이더 선 등에 대한 구현 세부 사항에 가치 자료가 됩니다 문제 생성 코드베이스codebase 원천 모음 설정 변경 사항 테스트에 정보가 필요하다면 [기여자 가이드라인](https://p5js.org/contributor-docs/#/./contributor_guidelines/)을 브라우저의 API에 대해 알아두면 도움이 될 수 있는데 [WebGL fundamentals](https://webglfundamentals.org/)에서 많은 핵심 렌더링 개념에 검토할 있습니다 [The Book of Shaders](https://thebookofshaders.com/)에 셰이더에서 사용되는 기술들이 설명되어 계획 [깃허브GitHub 프로젝트](https://github.com/orgs/processing/projects/5/)에 게시된 이슈issue를 정리하고 다음과 같은 유형으로 나누었습니다 **시스템 차원 변경사항 System-level changes** 란 코드에 광범위한 영향을 미치는 장기적 목표입니다 이것은 실행에 옮기기 전 수많은 논의와 계획을 필요로 합니다 **아직 해결책이 없는 버그 Bugs with no solution yet** 원인을 줄이기 약간의 디버깅이 필요한 신고입니다 아직 해결될 준비가 되어 있지 않으며 원인이 발견되면 이를 고치기 최고의 해결책을 논의할 있게 **해결책이 있지만 PR이 solutions but PR** 는 해결할 지 결정되었으며 누구나 자유롭게 코드를 작성할 **경미한 개선 Minor enhancements** 이란 현재의 아키텍쳐 내에서 확실한 위치를 가지는 새로운 기능에 이슈이며 맞출 것인지에 논의를 하지 않아도 기능이 가치가 있다고 동의하면 **2D 기능 features** p5js에는 모드에는 기능입니다 기능은 모드의 동작과 일치하는 결과물이 구현될 것으로 예상됩니다 최적의 구현에 필요가 이에 사용자 요구 사항은 명확합니다 **모든 환경에서 작동하지 않는 Features that don't work in all contexts ** 모드에 존재하지만 모드를 사용할 모든 방식으로 작동하지는 예를 들어 일부 메소드는 좌표계와 3D 좌표계에서 작동하지만 사용하면 중단될 수도 보통은 시작할 **기능 요청 Feature requests** 요청을 말합니다 요청이 지침에 맞는 것인지 확인하기 위해서는 논의가 필요합니다 **문서화 Documentation** 이슈는 변경이 필요하지 않지만 대신 동작을 위해 더 잘 문서화하는 것이 이슈입니다 어디에 넣어야 하나요 WebGL과 관련된 것은 `src/webgl` 하위 디렉토리에 해당 디렉토리 최상위 조명을 설정하는 명령어는 `lightingjs`로 재질을 `materialsjs`로 주제 영역에 여러 파일로 나뉘었습니다 지향 클래스를 구현할 클래스당 만드려고 노력하고 파일들은 때때로 개의 내부 보조 기능utility 가질 `p5Framebufferjs`는 `p5Framebuffer` 포함하고 추가로 메인 클래스의 프레임버퍼 관련 클래스로 구성됩니다 파일에는 추가적인 클래스도 들어갈 `p5RendererGL`은 처리하는 대형 클래스입니다 하나의 클래스 파일이 아닌 영역인지에 `p5RendererGL`을 분할한 파일과 파일에 무엇이 있는지는 같습니다 #### `p5RendererGLjs` 초기화 `p5RendererGLImmediatejs` **즉시 immediate mode** 드로잉`beginShape`나 `endShape`와 보관 재사용되지 않을 모양과 `p5RendererGLRetainedjs` **보류 retained 드로잉`sphere`와 재사용을 저장된 `materialjs` 혼합 관리 `3d_primitivesjs` `triangle`과 도형을 그리는 함수 함수들은 도형의 기하학적 구조를 정의합니다 그런 렌더링은 또는 `p5RendererGLImmediatejs`에서 발생하며 형상 입력을 일반 모양으로 취급합니다 `Textjs` 글자 렌더링을 테스트 ### 일관성 함수를 방법은 가지가 것을 수동으로 확인하는 어려우므로 가능한 곳에 단위 테스트unit test를 추가합니다 그래야 변경점이 생겨도 테스트를 통과한다면 아무 문제가 발생되지 않았다고 확신할 있기 때문입니다 새 추가할 모드에서도 작동하는 경우 일관성을 중 하나는 픽셀 두 동일한지를 것입니다 다음은 테스트의 예시 하나입니다 ```js test'coplanar strokes match 2D' function { const getColors = functionmode myp5createCanvas20 mode myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER if === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` 안티앨리어싱계단 현상 방지 기술 antialiasing을 끌 없고 안티앨리어싱은 종종 다르기 항상 코드가 않습니다 x축 y축 상의 직선에 대해서는 작동합니다 전용이라면 결과물을 비교하기보다는 픽셀을 확인해서 색상이 예상한 색상인지 경우가 많습니다 언젠가는 픽셀이 예상 결과물의 전체 이미지 스냅샷을 비교하는 보다 강력한 시스템으로 전환할 있겠지만 현재로서는 색상을 예시가 test'color interpolation' renderer myp5createCanvas256 // upper color lower expected center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] 성능 p5js가 가장 걱정하는 부분은 아니지만 성능을 크게 저하하지 않도록 보통 변경사항이 적용된 것과 적용되지 않은 스케치를 생성해서 이루어지고 프레임 속도를 비교합니다 측정에 조언을 드리자면 스케치 상단에서 `p5disableFriendlyErrors true`로 친절한 오류를 비활성화해 보세요 오류 메시지가 `p5minjs`를 테스트해보세요 안정적인 명확하게 파악하기 평균 표시해 let frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 draw rate frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' 파이프라인의 부분에 스트레스를 주기 해야 하는 가지의 매우 복잡한 모양 대용량의 모델이나 긴 곡선 수의 단순한 for 반복문에서 호출되는 `line`"},"p5.js WEBGL 모드 아키텍쳐\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"문서는 p5js 기여자 메인테이너 이해 관계자를 위한 p5js의 WEBGL 모드의 구조를 설명합니다 스케치에서 3D 그래픽을 사용하는 데 관심이 있다면 대신에 [튜토리얼 보기](https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5/)를 참조해주세요 ## 구조 객체에 대한 개요 아키텍처의 핵심 객체는 p5RendererGL p5Shader p5Texture p5Geometry입니다 p5RendererGL의 단일 인스턴스는 자체 p5Shaders p5Textures p5Geometry를 관리하며 p5Geometry—a 목표는 WebGL을 사용하여 오프스크린 렌더링을 허용하는 것이지만 아직 테스트되지 않았습니다 쉐이더와 텍스쳐는 렌더러를 통한 특정 GL 컨텍스트와 관련이 있습니다 ### WEBGL/3D 모드 용 렌더러입니다 p5Renderer에서 파생되었으며 2D 모드에서 사용할 수 없는 추가 기능 예를 들명 `box` `cone` 쉐이더의 사용 가속 텍스처 렌더링 조명에 기능을 제공합니다 * 쉐이더p5Shader 객체 텍스처p5Texture 객체를 관리 생성 캐쉬합니다 쉐이더에서 속성 배열로 도형의 좌표를 준비합니다 획 채우기 텍스쳐 다양한 조명 메서드가 호출 될 올바른 쉐이더를 선택한 해당 적절한 정형을 데이터 유지 사용되는 유형의 조명과 파라미터의 개수입니다 begin/endShape로 생성된 모양은 고정 에서3D 기본 지오메트리를 캐시하며 그릴 때마다 동적으로 생성되어 즉시모드에서 GL에 푸시됩니다 렌더러는 현재 그리기 조건에 적합한 p5Shader를 선택하는 것을 관리합니다 p5Shader클래스는 프로그램의 정형과 속성에 액세스를 vertex 프래그먼트 쉐이더 컴포넌트를 컴파일하고 연결합니다 정형에 액세스하고 설정하기위한 API를 쉐이더가 모양을 하기 전에 필요한 텍스처를 바인딩합니다 렌더링에 bindShader 메서드를 제공하고 그린 후에는 unbindShader 섹션에서 설명 된 것처럼 4개의 `p5Image``p5MediaElement``p5Element` 또는 `ImageData`를 바탕으로 텍스처의 상태를 유형에 이미지 처리를 내부적으로 처리하기때문에 p5Renderer 구현은 다룰때 메서드에서 특별한 예외를 만들 필요가 없습니다 데이터가 변경되었는지 여부를 잘 추측하면서 모든 프레임을 조건부로 업데이트합니다 성능을 높이기 위해 변경 사항이 경우 업로드하지 않습니다 p5Geometry 객체의 캐시에 객체로 저장됩니다 그려진 모양과 매개 변수를 기반으로 문자열을 매핑합니다 `box70 20`로 만든 상자의 지오메트리는 `'box|70|80|90|10|20'` 첫번째 단계에서 보유하고 있는 함수를 호출해 만들고 앞서 언급 한 문자열 ID를 지오메트리 해시에 저장합니다 추후 해시안에서 찾아 호출하고 찾았을 새 만드는 대신 기존 참조하여 사용합니다 요소에 꼭지점 법선 면 선 세트에 법선을 계산하는 방법을 모드로 속성은 렌더러의 저장되고 드로잉 컨텍스트에 그리는데 후 폐기됩니다 고정된 원형에 반면 모드는 모양에 사용됩니다 | 함수 ------------ ----------------- plane bezier box curve sphere line cylinder beginShape cone ellipsoid endShape torus point triangle curveVertex arc bezierVertex quadraticVertex ellipse rect quad text 필요에 배열을 텍스처는 `texture` 메서드와 비디오용으로 생성되거나 커스텀 쉐이더에 제공되는 정형으로 생성됩니다 렌더러에 텍스쳐가 먼저 주어진 이미지/비디오에 텍스처가 생성되었는지 확인한 텍스쳐를 찾을 경우에만 새로운 유형 #### 색상 색상에 평평한 음영을 쉐이더조명 텍스처용 다음을 `ambientLight` `directionalLight` `pointLight` `spotLight` `specularColor`에 설정된 변수 `ambientMaterial` `emissiveMaterial` `specularMaterial`에 재질 `texture`로 설정 일반 쉐이더는 `normalMaterial`이 중일 설정됩니다 표면의 정규 벡터를 색상을 결정합니다 매개변수 표준 모델 뷰 카메라 정형 Parameter Line Shader TexLight Color Normal Point --------------------------------- ----------- --------------- ------------- `uniform mat4 uModelViewMatrix` x uProjectionMatrix` vec4 uViewPort` uPerspective` ------------------------------ `attribute vec3 aPosition` aNormal` vec2 aTexCoord` mat3 uNormalMatrix` aDirection` float uStrokeWeight` uMaterialColor` aVertexColor` --------------------------------------------- int uAmbientLightCount` uDirectionalLightCount` uPointLightCount` uSpotLightCount` uAmbientColor[8]` uLightingDirection[8]` uDirectionalDiffuseColors[8]` uDirectionalSpecularColors[8]` uPointLightLocation[8]` uPointLightDiffuseColors[8]` uPointLightSpecularColors[8]` uSpotLightAngle[8]` uSpotLightConc[8]` uSpotLightDiffuseColors[8]` uSpotLightSpecularColors[8]` uSpotLightLocation[8]` uSpotLightDirection[8]` bool uSpecular` uEmissive` uShininess` uUseLighting` uConstantAttenuation` uLinearAttenuation` uQuadraticAttenuation` ----------------------------- sampler2D uSampler` isTexture` ---------------------------- uResolution` uPointSize` ----------------------------------- `varying vVertexNormal` vVertTexCoord` vLightWeighting` highp vColor` vStrokeWeight` 단계 커밍 쑨"}},"examples":{"기본 조형":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"프로그램은 기본 도형의 함수인 square rect ellipse circle arc line triangle and quad 사용을 보여주고 있습니다"},"색상":{"relativeUrl":"/examples/shapes-and-color-color","description":"색상을 추가하여 기본 조형 예제를 확장해 봅시다 background는 캔버스를 하나의 색상으로 채우고 stroke는 그려지는 윤곽선의 정하며 fill은 도형 내부의 정합니다 noStroke와 noFill은 색상과 채우기 없앨 수 있습니다 색상은 다양한 방법으로 표현될 있으며 예제는 가지의 옵션을 보여주고"},"윤곽선 그리기":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"마우스를 클릭하고 드래그하여 윤곽선을 그려봅시다 예제는 가지 내장된 변수의 사용을 보여줍니다 mouseX와 mouseY는 현재 마우스 위치 정보를 가지며 이전 위치는 pmouseX와 pmouseY를 이용해 가져올 수 있습니다 * colorMode에서 HSB색조-채도-밝기 방식을 사용하여 첫번째 변수가 색조를 설정하는 것도"},"이벤트가 있는 애니메이션":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"예제는 loop와 noLoop를 사용하여 애니메이션을 일시정지하고 재개하는 방법을 보여줍니다 마우스를 클릭하면 애니메이션 반복이 전환됩니다 정지되면 사용자는 아무 키나 눌러 한 프레임을 넘길 수 있습니다 참고 키를 누르는 이벤트가 제대로 전달되기 위해 캔버스에 포커스를 두려면 캔버스를 클릭해야 합니다 하나의 넘기기 위해서는 redraw를 호출할 있는데 draw 함수가 번 호출됩니다"},"모바일 기기의 움직임":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved 함수는 스케치를 표시하는 모바일 기기가 움직일 실행됩니다 예제에서 accelerationX accelerationY accelerationZ 값은 원의 위치와 크기를 정하고 있습니다 이것은 기기에서만 작동합니다"},"조건식":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"if와 else문은 특정 조건이 참일 때만 코드 블록이 실행되도록 합니다 예제는 마우스를 누른 상태에서만 애니메이션이 59번 줄의 if문 이렇게 동작할 수 있습니다 else문에 대한 자세한 내용은 p5 레퍼런스나 MDN에서 읽을 비교 연산자는 두 값을 비교하여 조건식을 형성하는 데 도움을 줍니다 예제에서는 69번 if문에 원의 색조가 이상일 0으로 재설정됩니다 연산자에 논리 결합할 있게 &&는 모든 조건식이 참인지를 확인합니다 예제에서 원은 캔버스의 수평 중심으로 향할 검은색으로 채워지고 않으면 흰색으로 채워집니다 이것은 45번 때문인데 명령문은 \bx좌표가 이하인지를 확인하고 ||는 적어도 하나의 75번 원이 왼쪽이나 오른쪽 가장자리에 도달할 속도를 만듭니다"},"단어":{"relativeUrl":"/examples/imported-media-words","description":"text 함수는 캔버스에 글자를 삽입하는 데 사용됩니다 loadFont fontSize 함수를 사용하여 글꼴 글자 크기를 변경할 수 있습니다 textAlign 왼쪽 가운데 또는 오른쪽으로 정렬할 있으며 도형에서와 fill을 글자에 색상을 입힐"},"이미지 데이터 복사":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy 메서드를 사용하면 커서가 드래그되는 곳마다 흑백 이미지 위에 색상이 있는 이미지를 복사하여 이미지에 색상을 입히는 것처럼 보이게 할 수 있습니다"},"알파 마스크":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask 메서드를 사용하면 이미지의 마스크를 만들어 부분에서 투명도를 지정할 수 있습니다 예제를 로컬에서 실행하려면 두 개의 이미지 파일과 실행 중인 로컬 서버가 필요합니다"},"이미지 투명도":{"relativeUrl":"/examples/imported-media-image-transparency","description":"프로그램은 tint 함수로 이미지의 알파 값을 수정하여 한 이미지를 이미지 위에 덮어씌웁니다 위치를 변경하려면 캔버스를 가로질러 커서를 좌우로 이동합니다 예제를 로컬에서 실행하려면 파일과 실행 중인 로컬 서버가 필요합니다"},"오디오 플레이어":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio는 오디오 플레이어를 생성합니다 예제는 플레이어의 컨트롤을 표시하고 속도를 조정합니다 재생 속도는 마우스가 창의 왼쪽 가장자리에 있을 보통이고 오른쪽으로 움직일수록 더 빨라집니다 플레이어와 같은 미디어 요소 사용에 대한 자세한 정보는 p5MediaElement 레퍼런스 페이지를 확인하세요 파일은 Josef Pres의 피아노 루프로 자유 이용 저작물입니다"},"비디오 플레이어":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas와 createVideo 함수를 사용하면 캔버스에 비디오를 내장하지 않고도 DOM에 업로드할 수 있습니다 캔버스 요소에 내장하려는 경우 Video Canvas 예제를 확인해 보세요"},"캔버스에서의 비디오":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo와 image 함수를 사용하면 비디오를 캔버스에 업로드할 수 있습니다 비디오 캡처는 생성자를 통해 전달될 있으므로 filter 메서드를 사용하여 캡처에 필터를 추가할 예제를 로컬에서 실행하려면 실행 중인 로컬 서버가 필요합니다 캔버스 내에 내장하지 않고 구축하려면 Video 확인해 보세요"},"비디오 캡처":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture와 image 함수를 사용하면 장치의 비디오 캡처를 가져와 캔버스에 그릴 수 있습니다 캡처는 생성자를 통해 전달될 있으므로 filter 메서드를 사용하여 캡처에 필터를 추가할 비디오를 업로드하거나 발표하거나 스타일을 지정하기 위한 다양한 전략을 보려면 Video와 Video Canvas를 확인해 보세요"},"이미지 드롭":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop은 p5js 요소 메서드로 파일이 요소에 로드될 때마다 콜백을 등록합니다 업로드된 파일은 p5File로 만들어집니다 drop 사용하여 파일 유형을 확인한 유형에 대응하는 조건문을 작성할 수 있습니다"},"입력칸과 버튼":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton 함수를 사용하여 글자 입력칸을 통해 제출된 글자를 가져와 캔버스에 표시할 수 있습니다"},"폼 요소":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"문서 객체 모델 DOM은 웹 페이지의 결과로 나오는 구조를 나타냅니다 createInput createSelect createRadio와 같은 p5js의 폼 요소를 사용하여 [드롭다운] 메뉴 선택 입력칸 또는 라디오 버튼을 통해 제출된 정보를 갖는 다양한 방법을 구축하고 기반으로 DOM을 업데이트할 수 있습니다"},"이동(Translate)":{"relativeUrl":"/examples/transformation-translate","description":"translate 함수는 좌표계의 원점을 지정된 위치로 이동합니다 push와 pop 좌표계나 채우기 색상과 같은 드로잉 설정을 저장 복원합니다 예제에서는 도형직사각형이나 원을 좌표계에서 있습니다"},"회전(Rotate)":{"relativeUrl":"/examples/transformation-rotate","description":"rotate 함수는 현재 원점을 중심으로 좌표계를 회전합니다 기본적으로 원점은 캔버스의 왼쪽 위 모서리라는 사실을 알아두세요 가운데를 회전하려면 먼저 이동한 새 회전해야 합니다 push와 pop 저장 복원합니다"},"크기(Scale)":{"relativeUrl":"/examples/transformation-scale","description":"scale 함수는 지정된 인수만큼 현재 좌표계의 크기를 조정Scaling합니다 push와 pop 좌표계를 저장 복원합니다 예제에서는 세 가지의 서로 크기 조정 인수를 사용해 크기가 200인 정사각형을 원점에 있습니다"},"선형 보간법":{"relativeUrl":"/examples/calculating-values-interpolate","description":"보간법 두 개의 값 사이의 값을 계산합니다 예를 들어 숫자 5는 0과 중간 지점입니다 다양한 유형의 보간법은 사이에서 변화율을 사용합니다 선형 줄여서 lerp는 일정한 lerp 함수는 사이를 선형으로 보간합니다 화면을 가로질러 마우스를 움직이면 기호가 따라옵니다 애니메이션의 프레임을 그리는 타원은 현재 위치에서 커서의 위치를 향해 거리의 일부만큼 이동합니다"},"매핑(Map)":{"relativeUrl":"/examples/calculating-values-map","description":"map 함수는 값을 하나의 범위에서 범위로 변환합니다 예제에서 매핑은 커서의 수평 위치를 0-720의 0-360 결과값은 원의 색상이 됩니다 수직 0-400의 20-300의 지름이"},"랜덤":{"relativeUrl":"/examples/calculating-values-random","description":"예제는 random 함수의 사용법을 보여줍니다 사용자가 마우스 버튼을 누를 원의 위치와 색상이 무작위로 변경됩니다"},"제한(Constrain)":{"relativeUrl":"/examples/calculating-values-constrain","description":"예제는 커서의 위치에 원을 그리지만 원이 직사각형 내에 유지되도록 합니다 이는 마우스의 좌표를 constrain 함수에 전달함으로써 수행합니다"},"시계":{"relativeUrl":"/examples/calculating-values-clock","description":"현재 시각은 second minute hour 함수를 사용하여 읽을 수 있습니다 예제는 map 시계 바늘의 각도를 계산합니다 그런 좌표계 변환을 위치를 설정합니다"},"색상 보간":{"relativeUrl":"/examples/repetition-color-interpolation","description":"보간법은 두 값 사이의 값을 계산합니다 예를 들어 숫자 5는 0과 중간 지점입니다 다양한 유형의 사이에서 변화율을 사용합니다 선형 보간법 줄여서 lerp는 일정한 lerp 함수는 사이를 선형으로 보간합니다 여기에서 보여지는 lerpColor 색상 예제에서 stripeCount 변수는 수평 줄무늬가 개 나타나는지 조정합니다 값이 더 높은 숫자로 설정되면 개별 줄무늬처럼 보이는 것이 아니라 그라데이션처럼 보입니다"},"색상환(Color Wheel)":{"relativeUrl":"/examples/repetition-color-wheel","description":"예제는 다양한 색상의 모습을 보여줍니다 for 반복문을 사용하여 변환을 반복합니다 반복문은 angle이라는 변수를 초기화하며 변수는 원의 회전과 색상을 변경합니다 반복문이 반복될 때마다 원은 캔버스 중심에 상대적으로 그려집니다 push와 pop함수는 개별 원에만 영향을 줄 수 있도록 합니다"},"베지어 곡선":{"relativeUrl":"/examples/repetition-bezier","description":"bezier 곡선은 제어점과 고정점을 생성됩니다 함수의 첫 두 매개변수는 곡선의 번째 점을 지정하고 마지막 지정합니다 중간 곡선 모양을 정의하는 제어점입니다"},"만화경":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"만화경은 두 개 이상의 반사면이 서로를 향해 비스듬히 기울어진 광학 기기입니다 translate rotate scale 함수를 사용하면 캔버스에서 만화경을 통해 만든 비주얼을 복제할 수 있습니다"},"노이즈":{"relativeUrl":"/examples/repetition-noise","description":"펄린 노이즈 는 켄 펄린Ken Perlin이 작성한 알고리즘으로 무작위성과 유기성을 지닌 시퀀스입니다 p5의 noise함수는 노이즈를 만듭니다 예제에서 점들은 값에 기반하여 크기가 결정됩니다 왼쪽의 슬라이더를 이용해 점들 사이의 거리를 설정합니다 오른쪽 계산에서의 오프셋offset 값을"},"재귀 트리":{"relativeUrl":"/examples/repetition-recursive-tree","description":"이것은 재귀를 통해 간단한 트리같은 구조를 렌더링하는 예제입니다 분기 각도는 마우스의 수평 위치에 대한 함수로 계산됩니다 마우스를 왼쪽과 오른쪽으로 움직여 각도를 변경하세요 다니엘 쉬프먼의 Processing에서 작성된 재귀 트리 예제를 바탕으로 합니다"},"랜덤 시":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor와 random 함수를 사용하여 배열에서 일련의 항목을 무작위로 선택하고 캔버스의 다양한 크기와 위치에 그릴 수 있습니다"},"사인과 코사인":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"예제는 사인과 코사인 수학 함수를 보여줍니다 애니메이션은 단위 원 반지름이 1인 주위에서 일정한 원형 운동을 x축으로부터 측정된 각도는 위의 점을 결정합니다 각도의 코사인과 사인은 점의 x좌표 y좌표로 정의합니다"},"조준":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 함수는 두 위치 사이의 각도를 계산합니다 함수가 계산하는 각도는 것을 향해 도형을 회전시키는 데 사용할 수 있습니다 예제에서는 눈이 커서를 바라보도록 회전합니다"},"삼각형 스트립":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"예제는 beginShape endShape vertex 함수를 사용하여 TRIANGLE_STRIP 모드에서 그것의 꼭짓점들을 지정함으로써 도형을 생성하는 방법을 보여줍니다"},"써클 클리커":{"relativeUrl":"/examples/games-circle-clicker","description":"예제는 제한과 점수가 있는 게임입니다 브라우저의 로컬 스토리지가 최고 점수를 저장하므로 같은 브라우저를 사용해서 게임을 다시 플레이할 점수 기록이 유지됩니다 브라우저 데이터를 지우면 기록도 지워집니다"},"핑퐁":{"relativeUrl":"/examples/games-ping-pong","description":"이것은 가장 오래된 아케이드 비디오 게임 중 하나인 아타리의 Pong에서 영감을 받은 게임입니다 2인용 게임이며 플레이어는 하얀 사각형으로 표현된 패들을 제어합니다 W와 S키는 왼쪽의 위아래로 움직이고 위쪽과 아래쪽 화살표 키는 오른쪽의 움직입니다 플레이어들은 공을 상대방 쪽 캔버스 가장자리 너머로 튕겨내어 점수를 얻습니다"},"스네이크 게임":{"relativeUrl":"/examples/games-snake","description":"이것은 스네이크라고 불리는 아케이드 게임 유형의 복제판입니다 첫 번째 스네이크 게임은 1976년에 출시된 블록케이드였으며 많은 게임들이 같은 구조를 사용합니다 게임에서 플레이어는 예제에서 녹색 선으로 표현된 뱀의 움직임을 제어합니다 플레이어의 목표는 뱀을 빨간 점으로 과일과 충돌시키는 것입니다 뱀이 충돌할 때마다 뱀은 더 길어집니다 자신이나 플레이 영역의 가장자리와 충돌하지 않으면서 가능한 한 길게 성장시키는 예제는 부분의 위치를 저장하기 위해 벡터 배열을 화살표 키는"},"지오메트리":{"relativeUrl":"/examples/3d-geometries","description":"p5의 WEBGL 모드에는 7개의 기본 도형이 포함되어 있습니다 도형들은 평면 상자 원기둥 원뿔 도넛형 타원체입니다 추가적으로 model은 loadModel을 통해 불러온 사용자 정의 지오메트리를 보여줍니다 예제에는 도형들이 있으며 NASA's collection에서 가져온 모델도"},"사용자 정의 지오메트리":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry 함수는 도형을 3D 모델에 저장하여 모델을 효율적으로 사용 재사용합니다"},"재질(Materials)":{"relativeUrl":"/examples/3d-materials","description":"3D 렌더링에서 재질은 표면이 빛에 반응하는지를 결정합니다 p5의 WEBGL 모드는 ambient emissive normal specular 재질을 지원합니다 Ambient 주변광ambient light에만 반응합니다 Specular 모든 광원에 p5에서 Emissive 광원과 상관없이 본인의 색을 나타냅니다 맥락에서 보면 빛을 방출합니다 Normal 표면의 부분이 방향을 향하고 있는지를 시각화합니다 반응하지 않습니다 재질과 서로 조합될 수 있습니다 두 채우기fill와 윤곽선stroke과도 채우기는 기본 색상을 설정하고 윤곽선은 객체의 정점 설정합니다 추가적으로 texture는 이미지로 물체를 감쌉니다 예제의 모델과 이미지 텍스처는 NASA's collection에서 가져온 것입니다"},"궤도 컨트롤(Orbit Control)":{"relativeUrl":"/examples/3d-orbit-control","description":"궤도 컨트롤Orbit control은 마우스나 터치 입력을 3D 스케치에서 카메라 방향을 조정합니다 카메라를 회전하려면 마우스를 왼쪽 클릭하고 드래그하거나 터치스크린에서 스와이프하세요 이동하려면 오른쪽 두 손가락으로 스케치의 중심으로 더 가까이하거나 멀리하려면 마우스의 스크롤 휠을 사용하거나 핀치 인/아웃하세요"},"필터 셰이더(Filter Shader)":{"relativeUrl":"/examples/3d-filter-shader","description":"필터 셰이더는 캔버스에 있는 것에도 효과를 적용할 수 방법입니다 예제에서는 비디오에 효과가 적용됩니다"},"셰이더로 위치 조정하기":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"셰이더는 도형의 정점 위치를 조정할 수 있습니다 이를 통해 3D 모델을 왜곡하고 애니메이션화할"},"프레임버퍼 흐림(Framebuffer Blur)":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"예제에서 사용하는 셰이더는 p5Framebuffer로부터의 깊이 정보를 사용하여 흐림 효과를 적용합니다 실제 카메라에서 렌즈의 초점보다 가깝거나 멀리있는 물체는 흐릿하게 보입니다 이는 모방합니다 먼저 스케치는 프레임버퍼에 개의 구체를 렌더링합니다 셰이더를 프레임버퍼를 캔버스에"},"그래픽 생성하기":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics 함수는 새로운 p5Graphics 객체를 생성하는 데 사용됩니다 객체는 캔버스 내에서 오프-스크린 그래픽 버퍼off-screen graphic buffer로 사용될 수 있습니다 buffer는 현재 디스플레이 표면과 차원과 속성을 가질 있음에도 같은 공간에 존재하는 것처럼 보입니다"},"다중 캔버스":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"기본적으로 p5는 전역 모드Global Mode에서 실행되며 이는 모든 p5 함수가 범위 안에 있고 캔버스 관련 하나의 캔버스에 적용된다는 것을 의미합니다 인스턴스 모드Instance Mode에서도 실행할 수 있으며 모드에서는 같은 함수들이 클래스의 인스턴스의 메서드가 됩니다 p5의 인스턴스는 각자의 캔버스를 가질 있습니다 모드를 사용하려면 인스턴스를 나타내는 매개변수이 예제에서는 p로 표시됨를 가진 함수를 정의해야 합니다 평소에 범위에 있던 함수와 변수들이 함수의 내에서 매개변수에 속하게 생성자에 전달하면 실행됩니다"},"셰이더를 텍스처로 사용하기":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"셰이더는 2D/3D 도형에 텍스처로 적용될 수 있습니다 p5js에서 셰이더 사용에 대해 더 알아보기 p5js"},"눈송이(Snowflakes)":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"예제는 입자 시스템을 사용하여 떨어지는 눈송이의 움직임을 시뮬레이션하는 방법을 보여줍니다 프로그램은 눈송이 클래스를 정의하고 배열을 객체들을 보관합니다"},"흔들어서 공 튀기기":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"클래스를 사용하여 모바일 기기의 기울기에 반응하여 캔버스 내에서 움직이는 원들의 집합을 생성할 수 있습니다 스케치를 표시하려면 기기에서 페이지를 열어야 합니다"},"연결된 입자들":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"예제는 두 개의 사용자 정의 클래스를 사용합니다 Particle 클래스는 위치 속도 색조를 저장합니다 현재 위치와 사용하여 원을 렌더링하고 속도를 위치를 업데이트합니다 Path 클래스에서 생성된 객체들의 배열을 이는 입자를 연결하는 선을 렌더링합니다 사용자가 마우스를 클릭하면 스케치는 클래스의 새 인스턴스를 만듭니다 드래그하면 경로에 추가합니다"},"무리지어 움직이기(Flocking)":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"무리의 움직임을 시뮬레이션 합니다 구현에 대한 자세한 논의는 다니엘 쉬프만Daniel Shiffman의 Nature of Code 책에서 살펴볼 수 있습니다 시뮬레이션은 새와 비슷한 객체를 나타내는 boid'라는 용어를 사용한 크레이그 레이놀즈Craig Reynolds의 연구에 기반하고"},"로컬 스토리지(Local Storage)":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"브라우저는 웹사이트가 방문자의 기기에 데이터를 저장할 수 있도록 허용하고 있습니다 이를 로컬 스토리지Local Storage라고 합니다 getItem storeItem clearStorage removeItem 함수들이 제어합니다 예제는 다니엘 쉬프만Daniel Shiffman의 Java로 작성된 JSON 데이터 가져오기Loading Data와 테이블 Tabular Data 예제를 참고하여 만들어졌습니다 이는 버블에 대한 구성하기 위해 클래스를 사용합니다 방문자는 새로운 버블을 추가할 있으며 그들의 데이터는 스토리지에 저장됩니다 방문자가 스케치를 다시 방문하면 동일한 버블이 로드됩니다"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation 또는 JSON은 파일에 데이터를 작성하는 형식입니다 구문은 JavaScript에서 가져왔지만 맥락에서도 많이 사용됩니다 예제는 다니엘 쉬프만Daniel Shiffman의 Java로 작성된 Processing용 JSON 데이터 로드 예제를 기반으로 합니다 이는 버블에 대한 구성하기 위해 클래스를 사용합니다 스케치가 시작될 두 개의 파일에서 로드합니다 방문자는 새로운 버블을 추가할 수 있고 업데이트된 파일을 다운로드하고 로드할 있습니다"},"테이블":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"쉼표로 구분된 값CSV은 파일에 데이터를 작성하는 형식입니다 p5는 p5Table을 사용하여 형식을 작업할 수 있습니다 예제는 다니엘 쉬프만Daniel Shiffman의 Processing에서 작성된 테이블 데이터 가져오기Loading Tabular Data 예제를 기반으로 합니다 이는 버블을 나타내는 구성하기 위해 클래스를 사용합니다 스케치가 시작될 개의 버블에 대한 CSV 파일에서 로드합니다 방문자는 새로운 추가할 있고 업데이트된 파일을 다운로드하고 로드할"},"비직각 반사":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"예제는 반사를 위한 벡터 계산을 사용하여 경사진 표면에서 튕기는 공을 시뮬레이션합니다 코드는 새로운 벡터를 만들기 위해 createVector 함수를 포함한 p5Vector 클래스를 광범위하게 사용합니다 add와 dot 메서드를"},"소프트 바디(Soft Body)":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"마우스 위치로 가속되는 부드러운 물체의 물리 시뮬레이션을 통해 소프트 바디를 구현합니다 모양은 curveVertex와 curveTightness를 사용하여 곡선으로 생성됩니다"},"힘":{"relativeUrl":"/examples/math-and-physics-forces","description":"다수의 힘이 물체에 작용하는 시뮬레이션입니다 물체에는 지속적으로 중력이 적용됩니다 물체가 물에 있을 때는 유체 저항이 작용합니다 natureofcodecom 힘 계산은 p5Vector 클래스를 사용되며 수행되며 이는 벡터를 생성하기 위한 createVector 함수를 포함합니다"},"연기 입자(Smoke Particles)":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"다니엘 쉬프만Dan Shiffman의 원본 Processing 예제를 기반으로 한 연기 입자 시스템 데모입니다 코드는 p5Vector 클래스를 활용하며 이는 createVector 함수를 포함합니다 입자의 위치와 속도를 업데이트하는 다양한 계산은 메서드를 사용하여 수행됩니다 시스템은 클래스로 구현되어 있으며 Particle 클래스의 객체 배열을"},"라이프 게임(Game of Life)":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"라이프 게임Life Game은 수학자 존 콘웨이John Conway가 만든 세포 자동자입니다 자동자는 시뮬레이션의 한 유형입니다 게임에서는 셀이 죽거나 살아 있는지에 그리드가 있습니다 예제에서 검은색 정사각형은 생존하는 셀을 나타내고 흰색 죽은 나타냅니다 시뮬레이션이 실행되는 셀은 규칙에 살아납니다 주변에 살아있는 이웃이 두 개 미만인 모든 죽습니다 세 이상인 또는 개인 변경 없이 세대로 넘어갑니다 정확히 규칙은 복잡한 상호 작용을 생성합니다 캔버스를 클릭하여 무작위로 생성된 셀로 시뮬레이션을 시작할 수 다시 클릭하면 시작됩니다"},"망델브로 집합(Mandelbrot Set)":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"다니엘 쉬프만Daniel Shiffman의 Processing 망델브로 예제를 기반으로 한 집합의 다채로운 렌더링을 제공합니다"}},"reference":{"Array":{"relativeUrl":"/reference/p5/Array"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"알파":{"relativeUrl":"/reference/p5/alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"밝기값":{"relativeUrl":"/reference/p5/brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"색상 함수":{"relativeUrl":"/reference/p5/color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused()":{"relativeUrl":"/reference/p5/focused","alias":"focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"초록(green)()":{"relativeUrl":"/reference/p5/green","alias":"초록(green)"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"색조":{"relativeUrl":"/reference/p5/hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"Number":{"relativeUrl":"/reference/p5/number"},"Object":{"relativeUrl":"/reference/p5/object"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"String":{"relativeUrl":"/reference/p5/string"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"}},"contributor-docs-fallback":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure success volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increase groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](https://p5js.org/reference/p5.sound), [class page](https://p5js.org/reference/p5/p5.Vector), [method page](https://p5js.org/reference/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this instruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (https://p5js.org/reference/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (https://p5js.org/reference/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (https://p5js.org/reference/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (https://p5js.org/reference/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```javascript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (https://p5js.org/reference/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (https://p5js.org/reference/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed requires temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve *Both 1x include system diffing algorithm robust system* operating systems browsers render graphics subtle variations differences normal fail Common acceptable Single-pixel shifts line positions Slight anti-aliasing Text font weight kerning Minor curve smoothness text rendered macOS slightly Linux applies thin lines curves graphical elements image earlier caused environments [Example]src/content/contributor-docs/images/pixelmatch2png sophisticated distinguish Initial Compares pixels moderate threshold identify [pixelmatch](https://github.com/mapbox/pixelmatch/) pixel Cluster identification Groups connected difference Breadth-First Search BFS Pattern recognition specifically identifies Line shift clusters represent element shifted 1px Isolated noise Smart failure criteria Applies thresholds Ignores smaller total significant Permits minor typical platforms [Example]src/content/contributor-docs/images/pixelmatchpng balances sensitivity real tolerating platform-specific parameters const MIN_CLUSTER_SIZE Minimum cluster MAX_TOTAL_DIFF_PIXELS Maximum allowed analyzing neighborhood 80% ≤2 neighbors classified structural intelligent ensures due catching important note improved pass failed detecting showing visually meaningful makes reliable reduces failures require manual investigation ### efficient sizes dimensions close 50x50 resizes images canvases result faster Focus visible details intricate hard Design demonstrate reduced cramming variants call times visualTest'stroke variations' stroke p5stroke0 p5strokeWeight1 p5line10 Screenshot thick p5strokeWeight5"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples-fallback":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries-fallback":{"AnimatorJs":{"relativeUrl":"/libraries/","description":"A javascript animation viewer based on a custom animation API primarily designed for p5.js and allows for dynamic, lightweight, real-time rendered browser animations controlled purely by code."},"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Pixyp5js":{"relativeUrl":"/libraries/","description":"A library for easily more easily dealing with pixels in images during runtime"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"TurtleGraphics":{"relativeUrl":"/libraries/","description":"Watch images being drawn using turtle graphics."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"Zoomp5js":{"relativeUrl":"/libraries/","description":"A simple library for adding the zooming functionality to your p5.js project."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.5":{"relativeUrl":"/libraries/","description":"Add UI to p5.js and other goodies"},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Modbuttons":{"relativeUrl":"/libraries/","description":"a simple and modular button system for p5js"},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Sprite":{"relativeUrl":"/libraries/","description":"A basic sprite library that supports both animated and static sprites for p5.js"},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.colorGenerator":{"relativeUrl":"/libraries/","description":"p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point."},"p5.comfyui-helper":{"relativeUrl":"/libraries/","description":"A library for interfacing with ComfyUI"},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."},"XYscope.js":{"relativeUrl":"/libraries/","description":"p5.js library to render graphics on analog vector displays"}},"events-fallback":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro VimeoEmbed ///components/VimeoEmbed/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg Introduction Casey Reas Johanna Hedva Stephanie Pi Phoenix Perry Taeyoon Choi Sara Hendren Epic Jefferson Chandler McWilliams Q&A ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people-fallback":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aarati Akkapeddi ":{"relativeUrl":"/people/#aarati-akkapeddi-"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aaron Welles":{"relativeUrl":"/people/#aaron-welles"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abdiel Lopez":{"relativeUrl":"/people/#abdiel-lopez"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Animesh Sinha":{"relativeUrl":"/people/#animesh-sinha"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antoinette Bumatay-Chan":{"relativeUrl":"/people/#antoinette-bumatay-chan"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashish Karn":{"relativeUrl":"/people/#ashish-karn"},"ashish singh":{"relativeUrl":"/people/#ashish-singh"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"Ashwani Dey":{"relativeUrl":"/people/#ashwani-dey"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"beau-muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"benpalevsky":{"relativeUrl":"/people/#benpalevsky"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"blackboxlogic":{"relativeUrl":"/people/#blackboxlogic"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Bojidar Marinov":{"relativeUrl":"/people/#bojidar-marinov"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"c-dacanay":{"relativeUrl":"/people/#c-dacanay"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Callie":{"relativeUrl":"/people/#callie"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Carrie Wang":{"relativeUrl":"/people/#carrie-wang"},"Casey Conchinha":{"relativeUrl":"/people/#casey-conchinha"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chloe Yan":{"relativeUrl":"/people/#chloe-yan"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"cog25":{"relativeUrl":"/people/#cog25"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"computational mama":{"relativeUrl":"/people/#computational-mama"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"crh82":{"relativeUrl":"/people/#crh82"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Darren Kessner":{"relativeUrl":"/people/#darren-kessner"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"davidblitz":{"relativeUrl":"/people/#davidblitz"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"dhanush":{"relativeUrl":"/people/#dhanush"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"FORCHA PEARL":{"relativeUrl":"/people/#forcha-pearl"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Franolich Design":{"relativeUrl":"/people/#franolich-design"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gabriel Sroka":{"relativeUrl":"/people/#gabriel-sroka"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Albers":{"relativeUrl":"/people/#greg-albers"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Greg Stanton":{"relativeUrl":"/people/#greg-stanton"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Kholiya":{"relativeUrl":"/people/#himanshu-kholiya"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"Ilona Brand":{"relativeUrl":"/people/#ilona-brand"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jackie Liu":{"relativeUrl":"/people/#jackie-liu"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Berghold":{"relativeUrl":"/people/#jared-berghold"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"jeanette":{"relativeUrl":"/people/#jeanette"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Philyaw":{"relativeUrl":"/people/#jordan-philyaw"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Kathryn Lichlyter":{"relativeUrl":"/people/#kathryn-lichlyter"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Gupta":{"relativeUrl":"/people/#keshav-gupta"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"Kit Kuksenok":{"relativeUrl":"/people/#kit-kuksenok"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"Kristian Hamilton":{"relativeUrl":"/people/#kristian-hamilton"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Berrios":{"relativeUrl":"/people/#lauren-berrios"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"Luke Plowden":{"relativeUrl":"/people/#luke-plowden"},"M":{"relativeUrl":"/people/#m"},"ma haidong":{"relativeUrl":"/people/#ma-haidong"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marco Macarena":{"relativeUrl":"/people/#marco-macarena"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Martin Leopold Groedl":{"relativeUrl":"/people/#martin-leopold-groedl"},"Martin Lorentzon":{"relativeUrl":"/people/#martin-lorentzon"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"mathewpan2":{"relativeUrl":"/people/#mathewpan2"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Arguelles":{"relativeUrl":"/people/#maya-arguelles"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"Mayank Verma":{"relativeUrl":"/people/#mayank-verma"},"mclark414":{"relativeUrl":"/people/#mclark414"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"Melody Sharp":{"relativeUrl":"/people/#melody-sharp"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"Mx. Ramsey":{"relativeUrl":"/people/#mx--ramsey"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"oliver thurley":{"relativeUrl":"/people/#oliver-thurley"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"Pim Tournaye":{"relativeUrl":"/people/#pim-tournaye"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Qingfeng Huang":{"relativeUrl":"/people/#qingfeng-huang"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajas Samse":{"relativeUrl":"/people/#rajas-samse"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"Renjie Li":{"relativeUrl":"/people/#renjie-li"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishab Kumar Jha":{"relativeUrl":"/people/#rishab-kumar-jha"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Rishi":{"relativeUrl":"/people/#rishi"},"Ritesh Patil":{"relativeUrl":"/people/#ritesh-patil"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"roxi09":{"relativeUrl":"/people/#roxi09"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"Seyko":{"relativeUrl":"/people/#seyko"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shoury Singh":{"relativeUrl":"/people/#shoury-singh"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Tibor Udvari":{"relativeUrl":"/people/#tibor-udvari"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Vaivaswat Dubey":{"relativeUrl":"/people/#vaivaswat-dubey"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"Vik":{"relativeUrl":"/people/#vik"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishesh Rawal":{"relativeUrl":"/people/#vishesh-rawal"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"willallstet":{"relativeUrl":"/people/#willallstet"},"William Hazard":{"relativeUrl":"/people/#william-hazard"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"Xevi H. Aqeel":{"relativeUrl":"/people/#xevi-h--aqeel"},"Xin Xin":{"relativeUrl":"/people/#xin-xin"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"ℤ":{"relativeUrl":"/people/#ℤ"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference-fallback":{"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"append()":{"relativeUrl":"/reference/p5/append","alias":"append"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"arrayCopy()":{"relativeUrl":"/reference/p5/arrayCopy","alias":"arrayCopy"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"baseColorShader()":{"relativeUrl":"/reference/p5/baseColorShader","alias":"baseColorShader"},"baseMaterialShader()":{"relativeUrl":"/reference/p5/baseMaterialShader","alias":"baseMaterialShader"},"baseNormalShader()":{"relativeUrl":"/reference/p5/baseNormalShader","alias":"baseNormalShader"},"baseStrokeShader()":{"relativeUrl":"/reference/p5/baseStrokeShader","alias":"baseStrokeShader"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"concat()":{"relativeUrl":"/reference/p5/concat","alias":"concat"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"HSB":{"relativeUrl":"/reference/p5/HSB"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createConvolver()":{"relativeUrl":"/reference/p5/createConvolver","alias":"createConvolver"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createModel()":{"relativeUrl":"/reference/p5/createModel","alias":"createModel"},"createNumberDict()":{"relativeUrl":"/reference/p5/createNumberDict","alias":"createNumberDict"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createStringDict()":{"relativeUrl":"/reference/p5/createStringDict","alias":"createStringDict"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"freqToMidi()":{"relativeUrl":"/reference/p5/freqToMidi","alias":"freqToMidi"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getAudioContext()":{"relativeUrl":"/reference/p5/getAudioContext","alias":"getAudioContext"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getOutputVolume()":{"relativeUrl":"/reference/p5/getOutputVolume","alias":"getOutputVolume"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"join()":{"relativeUrl":"/reference/p5/join","alias":"join"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadSound()":{"relativeUrl":"/reference/p5/loadSound","alias":"loadSound"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"match()":{"relativeUrl":"/reference/p5/match","alias":"match"},"matchAll()":{"relativeUrl":"/reference/p5/matchAll","alias":"matchAll"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"midiToFreq()":{"relativeUrl":"/reference/p5/midiToFreq","alias":"midiToFreq"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"outputVolume()":{"relativeUrl":"/reference/p5/outputVolume","alias":"outputVolume"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.NumberDict":{"relativeUrl":"/reference/p5/p5.NumberDict"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Renderer":{"relativeUrl":"/reference/p5/p5.Renderer"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.StringDict":{"relativeUrl":"/reference/p5/p5.StringDict"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.TypedDict":{"relativeUrl":"/reference/p5/p5.TypedDict"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"paletteLerp()":{"relativeUrl":"/reference/p5/paletteLerp","alias":"paletteLerp"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"preload()":{"relativeUrl":"/reference/p5/preload","alias":"preload"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"reverse()":{"relativeUrl":"/reference/p5/reverse","alias":"reverse"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"sampleRate()":{"relativeUrl":"/reference/p5/sampleRate","alias":"sampleRate"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveSound()":{"relativeUrl":"/reference/p5/saveSound","alias":"saveSound"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setBPM()":{"relativeUrl":"/reference/p5/setBPM","alias":"setBPM"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shorten()":{"relativeUrl":"/reference/p5/shorten","alias":"shorten"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"sort()":{"relativeUrl":"/reference/p5/sort","alias":"sort"},"soundFormats()":{"relativeUrl":"/reference/p5/soundFormats","alias":"soundFormats"},"soundOut":{"relativeUrl":"/reference/p5/soundOut"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"splice()":{"relativeUrl":"/reference/p5/splice","alias":"splice"},"split()":{"relativeUrl":"/reference/p5/split","alias":"split"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"subset()":{"relativeUrl":"/reference/p5/subset","alias":"subset"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"trim()":{"relativeUrl":"/reference/p5/trim","alias":"trim"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"userStartAudio()":{"relativeUrl":"/reference/p5/userStartAudio","alias":"userStartAudio"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.Amplitude.toggleNormalize()":{"relativeUrl":"/reference/p5.Amplitude/toggleNormalize","alias":"toggleNormalize"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.amplitude":{"relativeUrl":"/reference/p5.AudioIn/amplitude","alias":"amplitude"},"p5.AudioIn.connect()":{"relativeUrl":"/reference/p5.AudioIn/connect","alias":"connect"},"p5.AudioIn.disconnect()":{"relativeUrl":"/reference/p5.AudioIn/disconnect","alias":"disconnect"},"p5.AudioIn.enabled":{"relativeUrl":"/reference/p5.AudioIn/enabled","alias":"enabled"},"p5.AudioIn.getLevel()":{"relativeUrl":"/reference/p5.AudioIn/getLevel","alias":"getLevel"},"p5.AudioIn.getSources()":{"relativeUrl":"/reference/p5.AudioIn/getSources","alias":"getSources"},"p5.AudioIn.setSource()":{"relativeUrl":"/reference/p5.AudioIn/setSource","alias":"setSource"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.AudioVoice.connect()":{"relativeUrl":"/reference/p5.AudioVoice/connect","alias":"connect"},"p5.AudioVoice.disconnect()":{"relativeUrl":"/reference/p5.AudioVoice/disconnect","alias":"disconnect"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.roll()":{"relativeUrl":"/reference/p5.Camera/roll","alias":"roll"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Compressor.attack()":{"relativeUrl":"/reference/p5.Compressor/attack","alias":"attack"},"p5.Compressor.compressor":{"relativeUrl":"/reference/p5.Compressor/compressor","alias":"compressor"},"p5.Compressor.knee()":{"relativeUrl":"/reference/p5.Compressor/knee","alias":"knee"},"p5.Compressor.process()":{"relativeUrl":"/reference/p5.Compressor/process","alias":"process"},"p5.Compressor.ratio()":{"relativeUrl":"/reference/p5.Compressor/ratio","alias":"ratio"},"p5.Compressor.reduction()":{"relativeUrl":"/reference/p5.Compressor/reduction","alias":"reduction"},"p5.Compressor.release()":{"relativeUrl":"/reference/p5.Compressor/release","alias":"release"},"p5.Compressor.set()":{"relativeUrl":"/reference/p5.Compressor/set","alias":"set"},"p5.Compressor.threshold()":{"relativeUrl":"/reference/p5.Compressor/threshold","alias":"threshold"},"p5.Convolver.addImpulse()":{"relativeUrl":"/reference/p5.Convolver/addImpulse","alias":"addImpulse"},"p5.Convolver.convolverNode":{"relativeUrl":"/reference/p5.Convolver/convolverNode","alias":"convolverNode"},"p5.Convolver.impulses":{"relativeUrl":"/reference/p5.Convolver/impulses","alias":"impulses"},"p5.Convolver.process()":{"relativeUrl":"/reference/p5.Convolver/process","alias":"process"},"p5.Convolver.resetImpulse()":{"relativeUrl":"/reference/p5.Convolver/resetImpulse","alias":"resetImpulse"},"p5.Convolver.toggleImpulse()":{"relativeUrl":"/reference/p5.Convolver/toggleImpulse","alias":"toggleImpulse"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.connect()":{"relativeUrl":"/reference/p5.Delay/connect","alias":"connect"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.disconnect()":{"relativeUrl":"/reference/p5.Delay/disconnect","alias":"disconnect"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.filter()":{"relativeUrl":"/reference/p5.Delay/filter","alias":"filter"},"p5.Delay.leftDelay":{"relativeUrl":"/reference/p5.Delay/leftDelay","alias":"leftDelay"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Delay.rightDelay":{"relativeUrl":"/reference/p5.Delay/rightDelay","alias":"rightDelay"},"p5.Delay.setType()":{"relativeUrl":"/reference/p5.Delay/setType","alias":"setType"},"p5.Distortion.WaveShaperNode":{"relativeUrl":"/reference/p5.Distortion/WaveShaperNode","alias":"WaveShaperNode"},"p5.Distortion.getAmount()":{"relativeUrl":"/reference/p5.Distortion/getAmount","alias":"getAmount"},"p5.Distortion.getOversample()":{"relativeUrl":"/reference/p5.Distortion/getOversample","alias":"getOversample"},"p5.Distortion.process()":{"relativeUrl":"/reference/p5.Distortion/process","alias":"process"},"p5.Distortion.set()":{"relativeUrl":"/reference/p5.Distortion/set","alias":"set"},"p5.EQ.bands":{"relativeUrl":"/reference/p5.EQ/bands","alias":"bands"},"p5.EQ.process()":{"relativeUrl":"/reference/p5.EQ/process","alias":"process"},"p5.Effect.amp()":{"relativeUrl":"/reference/p5.Effect/amp","alias":"amp"},"p5.Effect.chain()":{"relativeUrl":"/reference/p5.Effect/chain","alias":"chain"},"p5.Effect.connect()":{"relativeUrl":"/reference/p5.Effect/connect","alias":"connect"},"p5.Effect.disconnect()":{"relativeUrl":"/reference/p5.Effect/disconnect","alias":"disconnect"},"p5.Effect.drywet()":{"relativeUrl":"/reference/p5.Effect/drywet","alias":"drywet"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.touchEnded()":{"relativeUrl":"/reference/p5.Element/touchEnded","alias":"touchEnded"},"p5.Element.touchMoved()":{"relativeUrl":"/reference/p5.Element/touchMoved","alias":"touchMoved"},"p5.Element.touchStarted()":{"relativeUrl":"/reference/p5.Element/touchStarted","alias":"touchStarted"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.add()":{"relativeUrl":"/reference/p5.Envelope/add","alias":"add"},"p5.Envelope.attackLevel":{"relativeUrl":"/reference/p5.Envelope/attackLevel","alias":"attackLevel"},"p5.Envelope.attackTime":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.decayLevel":{"relativeUrl":"/reference/p5.Envelope/decayLevel","alias":"decayLevel"},"p5.Envelope.decayTime":{"relativeUrl":"/reference/p5.Envelope/decayTime","alias":"decayTime"},"p5.Envelope.mult()":{"relativeUrl":"/reference/p5.Envelope/mult","alias":"mult"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.ramp()":{"relativeUrl":"/reference/p5.Envelope/ramp","alias":"ramp"},"p5.Envelope.releaseLevel":{"relativeUrl":"/reference/p5.Envelope/releaseLevel","alias":"releaseLevel"},"p5.Envelope.releaseTime":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.scale()":{"relativeUrl":"/reference/p5.Envelope/scale","alias":"scale"},"p5.Envelope.set()":{"relativeUrl":"/reference/p5.Envelope/set","alias":"set"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.setExp()":{"relativeUrl":"/reference/p5.Envelope/setExp","alias":"setExp"},"p5.Envelope.setInput()":{"relativeUrl":"/reference/p5.Envelope/setInput","alias":"setInput"},"p5.Envelope.setRange()":{"relativeUrl":"/reference/p5.Envelope/setRange","alias":"setRange"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.getCentroid()":{"relativeUrl":"/reference/p5.FFT/getCentroid","alias":"getCentroid"},"p5.FFT.getEnergy()":{"relativeUrl":"/reference/p5.FFT/getEnergy","alias":"getEnergy"},"p5.FFT.getOctaveBands()":{"relativeUrl":"/reference/p5.FFT/getOctaveBands","alias":"getOctaveBands"},"p5.FFT.linAverages()":{"relativeUrl":"/reference/p5.FFT/linAverages","alias":"linAverages"},"p5.FFT.logAverages()":{"relativeUrl":"/reference/p5.FFT/logAverages","alias":"logAverages"},"p5.FFT.setInput()":{"relativeUrl":"/reference/p5.FFT/setInput","alias":"setInput"},"p5.FFT.smooth()":{"relativeUrl":"/reference/p5.FFT/smooth","alias":"smooth"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Filter.biquadFilter":{"relativeUrl":"/reference/p5.Filter/biquadFilter","alias":"biquadFilter"},"p5.Filter.freq()":{"relativeUrl":"/reference/p5.Filter/freq","alias":"freq"},"p5.Filter.gain()":{"relativeUrl":"/reference/p5.Filter/gain","alias":"gain"},"p5.Filter.process()":{"relativeUrl":"/reference/p5.Filter/process","alias":"process"},"p5.Filter.res()":{"relativeUrl":"/reference/p5.Filter/res","alias":"res"},"p5.Filter.set()":{"relativeUrl":"/reference/p5.Filter/set","alias":"set"},"p5.Filter.setType()":{"relativeUrl":"/reference/p5.Filter/setType","alias":"setType"},"p5.Filter.toggle()":{"relativeUrl":"/reference/p5.Filter/toggle","alias":"toggle"},"p5.Font.font":{"relativeUrl":"/reference/p5.Font/font","alias":"font"},"p5.Font.textBounds()":{"relativeUrl":"/reference/p5.Font/textBounds","alias":"textBounds"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.loadPixels()":{"relativeUrl":"/reference/p5.Framebuffer/loadPixels","alias":"loadPixels"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Framebuffer.updatePixels()":{"relativeUrl":"/reference/p5.Framebuffer/updatePixels","alias":"updatePixels"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Gain.connect()":{"relativeUrl":"/reference/p5.Gain/connect","alias":"connect"},"p5.Gain.disconnect()":{"relativeUrl":"/reference/p5.Gain/disconnect","alias":"disconnect"},"p5.Gain.setInput()":{"relativeUrl":"/reference/p5.Gain/setInput","alias":"setInput"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.saveObj()":{"relativeUrl":"/reference/p5.Geometry/saveObj","alias":"saveObj"},"p5.Geometry.saveStl()":{"relativeUrl":"/reference/p5.Geometry/saveStl","alias":"saveStl"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.MonoSynth.amp()":{"relativeUrl":"/reference/p5.MonoSynth/amp","alias":"amp"},"p5.MonoSynth.attack":{"relativeUrl":"/reference/p5.MonoSynth/attack","alias":"attack"},"p5.MonoSynth.connect()":{"relativeUrl":"/reference/p5.MonoSynth/connect","alias":"connect"},"p5.MonoSynth.disconnect()":{"relativeUrl":"/reference/p5.MonoSynth/disconnect","alias":"disconnect"},"p5.MonoSynth.dispose()":{"relativeUrl":"/reference/p5.MonoSynth/dispose","alias":"dispose"},"p5.MonoSynth.play()":{"relativeUrl":"/reference/p5.MonoSynth/play","alias":"play"},"p5.MonoSynth.setADSR()":{"relativeUrl":"/reference/p5.MonoSynth/setADSR","alias":"setADSR"},"p5.MonoSynth.triggerAttack()":{"relativeUrl":"/reference/p5.MonoSynth/triggerAttack","alias":"triggerAttack"},"p5.MonoSynth.triggerRelease()":{"relativeUrl":"/reference/p5.MonoSynth/triggerRelease","alias":"triggerRelease"},"p5.Noise.setType()":{"relativeUrl":"/reference/p5.Noise/setType","alias":"setType"},"p5.NumberDict.add()":{"relativeUrl":"/reference/p5.NumberDict/add","alias":"add"},"p5.NumberDict.div()":{"relativeUrl":"/reference/p5.NumberDict/div","alias":"div"},"p5.NumberDict.maxKey()":{"relativeUrl":"/reference/p5.NumberDict/maxKey","alias":"maxKey"},"p5.NumberDict.maxValue()":{"relativeUrl":"/reference/p5.NumberDict/maxValue","alias":"maxValue"},"p5.NumberDict.minKey()":{"relativeUrl":"/reference/p5.NumberDict/minKey","alias":"minKey"},"p5.NumberDict.minValue()":{"relativeUrl":"/reference/p5.NumberDict/minValue","alias":"minValue"},"p5.NumberDict.mult()":{"relativeUrl":"/reference/p5.NumberDict/mult","alias":"mult"},"p5.NumberDict.sub()":{"relativeUrl":"/reference/p5.NumberDict/sub","alias":"sub"},"p5.Oscillator.add()":{"relativeUrl":"/reference/p5.Oscillator/add","alias":"add"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.connect()":{"relativeUrl":"/reference/p5.Oscillator/connect","alias":"connect"},"p5.Oscillator.disconnect()":{"relativeUrl":"/reference/p5.Oscillator/disconnect","alias":"disconnect"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.getAmp()":{"relativeUrl":"/reference/p5.Oscillator/getAmp","alias":"getAmp"},"p5.Oscillator.getFreq()":{"relativeUrl":"/reference/p5.Oscillator/getFreq","alias":"getFreq"},"p5.Oscillator.getPan()":{"relativeUrl":"/reference/p5.Oscillator/getPan","alias":"getPan"},"p5.Oscillator.getType()":{"relativeUrl":"/reference/p5.Oscillator/getType","alias":"getType"},"p5.Oscillator.mult()":{"relativeUrl":"/reference/p5.Oscillator/mult","alias":"mult"},"p5.Oscillator.pan()":{"relativeUrl":"/reference/p5.Oscillator/pan","alias":"pan"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.scale()":{"relativeUrl":"/reference/p5.Oscillator/scale","alias":"scale"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.orient()":{"relativeUrl":"/reference/p5.Panner3D/orient","alias":"orient"},"p5.Panner3D.orientX()":{"relativeUrl":"/reference/p5.Panner3D/orientX","alias":"orientX"},"p5.Panner3D.orientY()":{"relativeUrl":"/reference/p5.Panner3D/orientY","alias":"orientY"},"p5.Panner3D.orientZ()":{"relativeUrl":"/reference/p5.Panner3D/orientZ","alias":"orientZ"},"p5.Panner3D.panner":{"relativeUrl":"/reference/p5.Panner3D/panner","alias":"panner"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rollof()":{"relativeUrl":"/reference/p5.Panner3D/rollof","alias":"rollof"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.Part.addPhrase()":{"relativeUrl":"/reference/p5.Part/addPhrase","alias":"addPhrase"},"p5.Part.getBPM()":{"relativeUrl":"/reference/p5.Part/getBPM","alias":"getBPM"},"p5.Part.getPhrase()":{"relativeUrl":"/reference/p5.Part/getPhrase","alias":"getPhrase"},"p5.Part.loop()":{"relativeUrl":"/reference/p5.Part/loop","alias":"loop"},"p5.Part.noLoop()":{"relativeUrl":"/reference/p5.Part/noLoop","alias":"noLoop"},"p5.Part.onStep()":{"relativeUrl":"/reference/p5.Part/onStep","alias":"onStep"},"p5.Part.pause()":{"relativeUrl":"/reference/p5.Part/pause","alias":"pause"},"p5.Part.removePhrase()":{"relativeUrl":"/reference/p5.Part/removePhrase","alias":"removePhrase"},"p5.Part.replaceSequence()":{"relativeUrl":"/reference/p5.Part/replaceSequence","alias":"replaceSequence"},"p5.Part.setBPM()":{"relativeUrl":"/reference/p5.Part/setBPM","alias":"setBPM"},"p5.Part.start()":{"relativeUrl":"/reference/p5.Part/start","alias":"start"},"p5.Part.stop()":{"relativeUrl":"/reference/p5.Part/stop","alias":"stop"},"isDetected":{"relativeUrl":"/reference/p5.PeakDetect/isDetected"},"p5.PeakDetect.onPeak()":{"relativeUrl":"/reference/p5.PeakDetect/onPeak","alias":"onPeak"},"p5.PeakDetect.update()":{"relativeUrl":"/reference/p5.PeakDetect/update","alias":"update"},"p5.Phrase.sequence":{"relativeUrl":"/reference/p5.Phrase/sequence","alias":"sequence"},"p5.PolySynth.AudioVoice":{"relativeUrl":"/reference/p5.PolySynth/AudioVoice","alias":"AudioVoice"},"p5.PolySynth.connect()":{"relativeUrl":"/reference/p5.PolySynth/connect","alias":"connect"},"p5.PolySynth.disconnect()":{"relativeUrl":"/reference/p5.PolySynth/disconnect","alias":"disconnect"},"p5.PolySynth.dispose()":{"relativeUrl":"/reference/p5.PolySynth/dispose","alias":"dispose"},"p5.PolySynth.noteADSR()":{"relativeUrl":"/reference/p5.PolySynth/noteADSR","alias":"noteADSR"},"p5.PolySynth.noteAttack()":{"relativeUrl":"/reference/p5.PolySynth/noteAttack","alias":"noteAttack"},"p5.PolySynth.noteRelease()":{"relativeUrl":"/reference/p5.PolySynth/noteRelease","alias":"noteRelease"},"p5.PolySynth.notes":{"relativeUrl":"/reference/p5.PolySynth/notes","alias":"notes"},"p5.PolySynth.play()":{"relativeUrl":"/reference/p5.PolySynth/play","alias":"play"},"p5.PolySynth.polyvalue":{"relativeUrl":"/reference/p5.PolySynth/polyvalue","alias":"polyvalue"},"p5.PolySynth.setADSR()":{"relativeUrl":"/reference/p5.PolySynth/setADSR","alias":"setADSR"},"p5.PrintWriter.clear()":{"relativeUrl":"/reference/p5.PrintWriter/clear","alias":"clear"},"p5.PrintWriter.close()":{"relativeUrl":"/reference/p5.PrintWriter/close","alias":"close"},"p5.PrintWriter.print()":{"relativeUrl":"/reference/p5.PrintWriter/print","alias":"print"},"p5.PrintWriter.write()":{"relativeUrl":"/reference/p5.PrintWriter/write","alias":"write"},"p5.Pulse.width()":{"relativeUrl":"/reference/p5.Pulse/width","alias":"width"},"p5.Reverb.amp()":{"relativeUrl":"/reference/p5.Reverb/amp","alias":"amp"},"p5.Reverb.connect()":{"relativeUrl":"/reference/p5.Reverb/connect","alias":"connect"},"p5.Reverb.disconnect()":{"relativeUrl":"/reference/p5.Reverb/disconnect","alias":"disconnect"},"p5.Reverb.process()":{"relativeUrl":"/reference/p5.Reverb/process","alias":"process"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Score.loop()":{"relativeUrl":"/reference/p5.Score/loop","alias":"loop"},"p5.Score.noLoop()":{"relativeUrl":"/reference/p5.Score/noLoop","alias":"noLoop"},"p5.Score.pause()":{"relativeUrl":"/reference/p5.Score/pause","alias":"pause"},"p5.Score.setBPM()":{"relativeUrl":"/reference/p5.Score/setBPM","alias":"setBPM"},"p5.Score.start()":{"relativeUrl":"/reference/p5.Score/start","alias":"start"},"p5.Score.stop()":{"relativeUrl":"/reference/p5.Score/stop","alias":"stop"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.inspectHooks()":{"relativeUrl":"/reference/p5.Shader/inspectHooks","alias":"inspectHooks"},"p5.Shader.modify()":{"relativeUrl":"/reference/p5.Shader/modify","alias":"modify"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.SoundFile.addCue()":{"relativeUrl":"/reference/p5.SoundFile/addCue","alias":"addCue"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.clearCues()":{"relativeUrl":"/reference/p5.SoundFile/clearCues","alias":"clearCues"},"p5.SoundFile.connect()":{"relativeUrl":"/reference/p5.SoundFile/connect","alias":"connect"},"p5.SoundFile.currentTime()":{"relativeUrl":"/reference/p5.SoundFile/currentTime","alias":"currentTime"},"p5.SoundFile.disconnect()":{"relativeUrl":"/reference/p5.SoundFile/disconnect","alias":"disconnect"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.getBlob()":{"relativeUrl":"/reference/p5.SoundFile/getBlob","alias":"getBlob"},"p5.SoundFile.getPan()":{"relativeUrl":"/reference/p5.SoundFile/getPan","alias":"getPan"},"p5.SoundFile.getPeaks()":{"relativeUrl":"/reference/p5.SoundFile/getPeaks","alias":"getPeaks"},"p5.SoundFile.isLoaded()":{"relativeUrl":"/reference/p5.SoundFile/isLoaded","alias":"isLoaded"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPaused()":{"relativeUrl":"/reference/p5.SoundFile/isPaused","alias":"isPaused"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pan()":{"relativeUrl":"/reference/p5.SoundFile/pan","alias":"pan"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.playMode()":{"relativeUrl":"/reference/p5.SoundFile/playMode","alias":"playMode"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.removeCue()":{"relativeUrl":"/reference/p5.SoundFile/removeCue","alias":"removeCue"},"p5.SoundFile.reverseBuffer()":{"relativeUrl":"/reference/p5.SoundFile/reverseBuffer","alias":"reverseBuffer"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.save()":{"relativeUrl":"/reference/p5.SoundFile/save","alias":"save"},"p5.SoundFile.setBuffer()":{"relativeUrl":"/reference/p5.SoundFile/setBuffer","alias":"setBuffer"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.setVolume()":{"relativeUrl":"/reference/p5.SoundFile/setVolume","alias":"setVolume"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.SoundLoop.bpm":{"relativeUrl":"/reference/p5.SoundLoop/bpm","alias":"bpm"},"p5.SoundLoop.interval":{"relativeUrl":"/reference/p5.SoundLoop/interval","alias":"interval"},"p5.SoundLoop.iterations":{"relativeUrl":"/reference/p5.SoundLoop/iterations","alias":"iterations"},"p5.SoundLoop.maxIterations":{"relativeUrl":"/reference/p5.SoundLoop/maxIterations","alias":"maxIterations"},"p5.SoundLoop.musicalTimeMode":{"relativeUrl":"/reference/p5.SoundLoop/musicalTimeMode","alias":"musicalTimeMode"},"p5.SoundLoop.pause()":{"relativeUrl":"/reference/p5.SoundLoop/pause","alias":"pause"},"p5.SoundLoop.start()":{"relativeUrl":"/reference/p5.SoundLoop/start","alias":"start"},"p5.SoundLoop.stop()":{"relativeUrl":"/reference/p5.SoundLoop/stop","alias":"stop"},"p5.SoundLoop.syncedStart()":{"relativeUrl":"/reference/p5.SoundLoop/syncedStart","alias":"syncedStart"},"p5.SoundLoop.timeSignature":{"relativeUrl":"/reference/p5.SoundLoop/timeSignature","alias":"timeSignature"},"p5.SoundRecorder.record()":{"relativeUrl":"/reference/p5.SoundRecorder/record","alias":"record"},"p5.SoundRecorder.setInput()":{"relativeUrl":"/reference/p5.SoundRecorder/setInput","alias":"setInput"},"p5.SoundRecorder.stop()":{"relativeUrl":"/reference/p5.SoundRecorder/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.TypedDict.clear()":{"relativeUrl":"/reference/p5.TypedDict/clear","alias":"clear"},"p5.TypedDict.create()":{"relativeUrl":"/reference/p5.TypedDict/create","alias":"create"},"p5.TypedDict.get()":{"relativeUrl":"/reference/p5.TypedDict/get","alias":"get"},"p5.TypedDict.hasKey()":{"relativeUrl":"/reference/p5.TypedDict/hasKey","alias":"hasKey"},"p5.TypedDict.print()":{"relativeUrl":"/reference/p5.TypedDict/print","alias":"print"},"p5.TypedDict.remove()":{"relativeUrl":"/reference/p5.TypedDict/remove","alias":"remove"},"p5.TypedDict.saveJSON()":{"relativeUrl":"/reference/p5.TypedDict/saveJSON","alias":"saveJSON"},"p5.TypedDict.saveTable()":{"relativeUrl":"/reference/p5.TypedDict/saveTable","alias":"saveTable"},"p5.TypedDict.set()":{"relativeUrl":"/reference/p5.TypedDict/set","alias":"set"},"p5.TypedDict.size()":{"relativeUrl":"/reference/p5.TypedDict/size","alias":"size"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.clampToZero()":{"relativeUrl":"/reference/p5.Vector/clampToZero","alias":"clampToZero"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setContent()":{"relativeUrl":"/reference/p5.XML/setContent","alias":"setContent"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.AudioVoice":{"relativeUrl":"/reference/p5.sound/p5.AudioVoice"},"p5.BandPass":{"relativeUrl":"/reference/p5.sound/p5.BandPass"},"p5.Compressor":{"relativeUrl":"/reference/p5.sound/p5.Compressor"},"p5.Convolver":{"relativeUrl":"/reference/p5.sound/p5.Convolver"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Distortion":{"relativeUrl":"/reference/p5.sound/p5.Distortion"},"p5.EQ":{"relativeUrl":"/reference/p5.sound/p5.EQ"},"p5.Effect":{"relativeUrl":"/reference/p5.sound/p5.Effect"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Filter":{"relativeUrl":"/reference/p5.sound/p5.Filter"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.HighPass":{"relativeUrl":"/reference/p5.sound/p5.HighPass"},"p5.LowPass":{"relativeUrl":"/reference/p5.sound/p5.LowPass"},"p5.MonoSynth":{"relativeUrl":"/reference/p5.sound/p5.MonoSynth"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.OnsetDetect":{"relativeUrl":"/reference/p5.sound/p5.OnsetDetect"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.Part":{"relativeUrl":"/reference/p5.sound/p5.Part"},"p5.PeakDetect":{"relativeUrl":"/reference/p5.sound/p5.PeakDetect"},"p5.Phrase":{"relativeUrl":"/reference/p5.sound/p5.Phrase"},"p5.PolySynth":{"relativeUrl":"/reference/p5.sound/p5.PolySynth"},"p5.Pulse":{"relativeUrl":"/reference/p5.sound/p5.Pulse"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.Score":{"relativeUrl":"/reference/p5.sound/p5.Score"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SoundLoop":{"relativeUrl":"/reference/p5.sound/p5.SoundLoop"},"p5.SoundRecorder":{"relativeUrl":"/reference/p5.sound/p5.SoundRecorder"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"}},"tutorials-fallback":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Chatting with/about Code":{"relativeUrl":"/tutorials/criticalAI1-chatting-with-about-code","description":"Using generative AI to code with p5.js"},"Critical AI Prompt Battle":{"relativeUrl":"/tutorials/criticalAI2-prompt-battle","description":"Build a tool to compare generative AI prompts"},"Critical AI Sentiment Dataset Explorer":{"relativeUrl":"/tutorials/criticalAI3-sentiment-dataset-explorer","description":"Examine the datasets that run AI tools"},"Critical AI No-AI Chatbot":{"relativeUrl":"/tutorials/criticalAI4-no-ai-chatbot","description":"Make an interactive chatbot without using any AI"},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to GLSL":{"relativeUrl":"/tutorials/intro-to-glsl","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU using GLSL."},"p5.strands: Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-p5-strands","description":"An introduction to shaders using p5.strands"},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
+{"contributor-docs":{"🌸 환영합니다! 🌺\n":{"relativeUrl":"/contribute/README","description":"p5js에 기여하는데에 관심을 가져주셔서 감사합니다 커뮤니티는 모든 형태의 기여를 소중하게 생각하며 컨트리뷰터의 의미를 최대한 넓은 범위로 확장하고자 합니다 이는 문서화 강의 코드 작성 창작 활동 글쓰기 디자인 운동 조직화 큐레이팅 여러분이 상상할 수 있는 걸 포괄합니다 [우리의 커뮤니티 페이지](https://p5js.org/community/#contribute)에는 커뮤니티에 참여하고 기여할 여러가지 방법들에 대한 개요가 제시되어 있습니다 기술적인 하고자 하신다면 시작하기에 앞서 글을 더 읽어주시기 바랍니다 프로젝트는 [올-컨트리뷰터스(all-contributors)](https://github.com/kentcdodds/all-contributors/) 사양을 따릅니다 [안내 사항](https://github.com/processing/p5.js/issues/2309/)을 [리드미(readme)](https://github.com/processing/p5.js/blob/main/README.md#contributors)에 본인을 추가하세요 [깃허브 이슈](https://github.com/processing/p5.js/issues/)에 여러분의 컨트리뷰션을 댓글로 달아주시면 저희가 추가해드리겠습니다 보관 위치 p5js 프로젝트의 핵심적인 저장소들은 아래와 같습니다 * [p5.js](https://github.com/processing/p5.js): 본 저장소에는 라이브러리의 소스 코드가 보관되어 [유저들이 보게 되는 p5js의 레퍼런스 매뉴얼](https://p5js.org/reference/) 코드에 포함되어 [JSDoc](http://usejsdoc.org/) 각주에서 생성됩니다 저장소는 [로렌 리 맥카시Lauren Lee McCarthy)](https://github.com/lmccart/)가 관리합니다 [p5.js-website](https://github.com/processing/p5.js-website/): 매뉴얼을 제외한 [p5js 웹사이트](https://p5js.org)의 [p5.js-sound](https://github.com/processing/p5.js-sound/): p5soundjs 라이브러리가 [제이슨 시갈Jason Sigal)](https://github.com/therewasaguy/)이 [p5.js-web-editor](https://github.com/processing/p5.js-web-editor/): 웹 에디터](https://editor.p5js.org)의 [캐시 타라케지언Cassie Tarakajian)](https://github.com/catarak/)이 예전의 에디터](https://github.com/processing/p5.js-editor/)는 이제 사용되지 않다는 점을 참고하십시오 [p5.accessibility](https://github.com/processing/p5.accessibility): 맹인 장애인들이 쉽게 p5 캔버스를 사용할 있도록 하는 라이브러리입니다 저장소 파일 구조 프로젝트엔 많은 파일들이 여기에 간략한 헷갈릴 수도 있지만 기여하기 저장소의 파일을 이해할 필요까지는 없습니다 우리는 한 영역인라인 도큐멘테이션을 고치는 것이 예가 될 있겠습니다에서 시작해서 차근차근 영역으로 나아가는 권장합니다 루이사 페레이라Luisa Pereira의 [Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/)에 작업 흐름에 사용되는 도구와 파일들에 소개를 동영상으로 확인하실 `contributor_docs/`에는 컨트리뷰터들을 위한 관례와 원칙을 설명하는 문서가 들어 `docs/`에는 사실 문서들이 대신 [온라인 매뉴얼](https://p5js.org/reference/)을 생성하기 담겨 `lib/`에는 비어 예시 파일과 [p5js-sound 저장소](https://github.com/processing/p5.js-sound/)에서 풀 리퀘스트를 통해 정기적으로 업데이트 p5sound 애드온이 이곳은 빌드 된 [Grunt](https://gruntjs.com/)를 이용해 하나의 파일로 컴파일 후에 위치하게 곳이기도 할 깃허브 저장소로 따로 이동시킬 필요가 없는 것입니다 `src/` 에는 라이브러리를 있는데 이들은 분리된 모듈의 형태로 주제별로 정리되어 p5js를 수정하고자 작업을 하면 됩니다 대부분의 폴더 안에는 각각의 리드미 파일readmemd이 있으니 이를 참고해 해주시기 `tasks/`에는 새로운 버전의 배포 릴리스 하는데에 관련된 자동화 작업들을 수행하는 스크립트들이 `tests/`는 내용 수정이 있어도 제대로 작동하도록 보장해주는 유닛 테스트들을 담고 `utils/`는 저장소에 유용할 추가적인 파일들을 디렉토리는 무시해도 괜찮습니다 문서화는 가장 중요한 부분입니다 낮은 품질의 이용자와 컨트리뷰터들의 진입 장벽을 높여 프로젝트 참여도를 저하시킵니다 [contributing\\_documentationmd]/contributing_documentation/ 페이지는 문서화를 시작하는 데에 깊이 개요를 제시합니다 같은 곳들에서 주로 찾아볼 [p5js.org/reference](https://p5js.org/reference/)는 코드의 [인라인 도큐멘테이션]/inline_documentation/으로부터 텍스트 설명 파라미터 스니펫 등을 포함합니다 코드와 인라인 긴밀히 연결시키고 문서화에 기여하는 게 만큼이나 중요하다는 생각을 강화하기 위해 활용하는 되면 라이브러리와 작동하는 방식 사이에 문제가 없음을 확실히 하기 도큐멘테이션과 예시를 확인합니다 이에 위해선 [inline\\_documentationmd]/inline_documentation/ 페이지를 살펴보는 걸로 시작하시기 [p5js.org/examples](https://p5js.org/examples/)페이지는 학습하는 길이가 긴 예시들을 위해서는 [adding\\_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) 살펴보시기 [p5js.org/tutorials](https://p5js.org/tutorials/)페이지는 p5js와 프로그래밍의 개념을 배울 도와주는 튜토리얼들을 웹사이트의 튜토리얼에 튜토리얼](https://p5js.org/learn/tutorial-guide.html)을 웹사이트는 현재 가지 언어들을 지원하고 있음을 국제화혹은 줄여서 i18n라고 불립니다 문서는 [i18n\\_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contribution.md) 페이지에서 자세히 보실 이슈 흐름 알려진 버그와 추가되었으면 기능들은 이슈](https://github.com/processing/p5.js/issues/)들을 추적됩니다 [레이블]/issue_labels/들은 이슈들을 카테고리별로 분류하는 사용되는데 예를 들면 [초보자에게 적합한 이슈들](https://github.com/processing/p5.js/labels/level%3Abeginner/)을 레이블링 식입니다 이미 제기된 중에 시작하고 싶은 있다면 컨트리뷰터들이 진행 사항을 파악하고 도움을 줄 해당 이슈에 댓글을 달아주시기 이슈를 해결했다면 마스터 브랜치에 [풀 리퀘스트PR를 제출]/preparing_a_pull_request/하십시오 PR의 칸에 resolves #XXXX#XXXX를 해결함라고 써서 해결한 태그해주시기 PR이 다루기는 완전히 해결하지는 못하는 거라면즉 merge 되고 나서도 이슈가 열려 있어야 addresses 다룸이라고 써주시기 버그를 발견했거나 새롭게 더하고 기능에 아이디어가 먼저 제출해주시기 제출하지 않고 수정 사항이나 기능을 제출해버리는 경우 수락하기 어려울 가능성이 높습니다 피드백을 받고 다뤄도 괜찮다는 확인했다면 위의 절차를 고치거나 추가하는 시작할 버그 리포트를 재현하거나 버전 번호 재현 안내서와 주요 정보들을 요청하는 선별하는 작업할 용이한 방법 중 하나는 [코드 트리아지CodeTriage에서 구독](https://www.codetriage.com/processing/p5.js)하는 겁니다 [[Open Source Helpers](https://www.codetriage.com/processing/p5.js/badges/users.svg)](https://www.codetriage.com/processing/p5.js) [organization.md](https://github.com/processing/p5.js/blob/main/contributor_docs/organization.md) 파일은 이슈들이 체계화 있는지 그에 의사결정 과정은 이루어지는지에 대략적인 관심이 기여해주시기 개발 과정 프로세스라는 처음에는 까다로울 그렇게 느끼는 건 뿐만이 아니라 처음엔 모두가 혼란을 겪곤 밑을 보시면 셋업 과정을 차례 질문이 [포럼](https://discourse.processing.org/c/p5js/)에 물어보거나 막힌 부분을 [이슈](https://github.com/processing/p5.js/issues/)를 제출하면 최대한의 드리도록 하겠습니다 아래 절차는 [코딩 트레인The Coding Train의 비디오 강의](https://youtu.be/Rr3vLyP1Ods/)에서도 다루고 있습니다🚋🌈 [node.js](http://nodejs.org/)를 설치하세요 nodejs를 설치하면 자동적으로 [npm](https://www.npmjs.org) 패키지 매니저도 설치됩니다 본인의 계정에 저장소](https://github.com/processing/p5.js)를 [포크](https://help.github.com/articles/fork-a-repo/) 하십시오 포크 저장소를 로컬 컴퓨터에 [클론](https://help.github.com/articles/cloning-a-repository/) ```shell $ git clone https://github.com/YOUR_USERNAME/p5.js.git ``` 폴더로 들어가 npm에 필요한 디펜던시를 설치하십시오 cd npm ci [Grunt](https://gruntjs.com/)가 설치되었을텐데 코드로부터 빌드하기 이용할 run grunt 계속해서 변경해야 사전에 수동으로 일일이 명령어를 입력하지 않아도 변경 다시 빌드해줄 `npm dev`를 실행 나을 로컬에서 베이스를 변경하고 깃Git으로 [커밋](https://help.github.com/articles/github-glossary/#commit) add -u commit -m YOUR COMMIT MESSAGE 문법 오류가 확인하고 고장 문제들에 테스트를 grunt`를 번 실행하십시오 포크에 [푸시](https://help.github.com/articles/github-glossary/#push) push 준비되었다면 리퀘스트](https://help.github.com/articles/creating-a-pull-request/)로 제출하십시오 커밋이 거절 당하는 베이스에 개발자 툴들은 것들에 대해 일부러 매우 엄격한 기준을 적용하도록 만들어져 이건 좋은 일관성 있게 만들고 규율이 지켜지도록 도울 뭔가를 변경하고자 만들었던 당할 의미하기는 낙담하지는 말아주세요 경험 개발자들의 커밋도 종종 당하곤 보통은 테스트가 문제인 경우가 많습니다 ## p5js는 깔끔하고 스타일의 문법을 요구하기에 [Prettier](https://prettier.io/)와 [ESlint](https://eslint.org/)라는 툴의 사용이 필수입니다 커밋을 전에 특정 스타일 규칙을 점검하게 되는데 사용하는 에디터에 [ESlint 플러그인](https://eslint.org/docs/user-guide/integrations#editors)을 타이핑 함과 오류를 하이라이트 해줍니다 스타일에 관해서 유연성과 내는데 참여와 기여의 낮추기 위함입니다 에러를 포착하기 터미널에서 실행하세요`$` 프롬프트는 마십시오 lint 오류는 고쳐질 lintfix 기존 스타일을 고수하는 선호되는게 보통이지만 [가끔은](https://github.com/processing/p5.js/search?utf8=%E2%9C%93\\&q=prettier-ignore\\&type=) 코드를 이해하기 만들기도 경우에는 Prettier의 `// prettier-ignore` 주석을 [예외적인 경우를 처리](https://prettier.io/docs/en/ignore.html)할 요구되는 선호 사항들은 그럴만한 이유가 있기 가능하다면 예외적인 만들지 말아주시길 규칙에 요약본이 목록이 전부가 아니기 [.prettierrc](https://github.com/processing/p5.js/blob/main/.prettierrc)와 [.eslintrc](https://github.com/processing/p5.js/blob/main/.eslintrc) 파일의 전체 목록을 참고 하시기 ES6 사용합니다 큰 따옴표 보다는 작은 따옴표를 들여쓰기는 스페이스 두 개로 처리합니다 정의되어 변수들은 적어도 번은 사용되던가 없애야 x == true false로 비교문을 작성하지 x를 사용하십시오 true는 분명히 if 와는 다릅니다 여지가 객체를 널null과 비교하고 숫자를 0에 문자열string을 비교하십시오 작성하는 함수가 모호하거나 복잡한 답니다 스타일링 팁을 참고하기 [모질라 자바스크립트 연습Mozilla JS practice)](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style#JavaScript_practices)을 보십시오 테스트 테스트란 주논리와 성능 검증을 보완하기 만들어진 규모의 코드들입니다 [unit\\_testingmd]/unit_testing/ 페이지에 테스트에 정보가 개발한다면 아마도 포함해야 통과하지 못한다면 그건 어딘가에 있다는 뜻이므로 돌리기 디펜던시들을 설치해야 이것이 *모든* 설치할 간단하게는 테스팅에 디펜던시들은 다음을 [Mocha](https://mochajs.org/): 개별적인 실행하는 강력한 테스팅 프레임워크 [mocha-chrome](https://github.com/shellscape/mocha-chrome/): 구글 크롬을 Mocha 돌리는 모차 플러그인 디펜던시들이 설치되면 Grunt를 돌리십시오 때론 커맨드 라인 브라우저에서 것도 유용합니다 서버 [연결](https://github.com/gruntjs/grunt-contrib-connect/)을 시작하십시오 dev 서버가 돌아가면 `test/testhtml`을 열 있을 완전한 설명은 문서의 범위를 벗어나는 것이지만 간략하게만 src/ 디렉토리에 가해진 중대한 새로 구현된 기능은 Mocha가 실행할 파일이 test/ 동반되어야 하는데 향후 나올 라이브러리에서도 작동할 것임을 검증하기 작성할 [Chaijs 레퍼런스](http://www.chaijs.com/api/assert/)를 어서션assertion 메세지를 구성함으로써 미래에 테스트로 잡아낼 오류들이 있고 결과적으로 개발자들이 만들어주시기를 [contributor\\_docs/](https://github.com/processing/p5.js/tree/main/contributor_docs/) 폴더에는 살펴볼만한 파일들도 비기술적인 영역과 관계된 것들입니다 흐름에서 영상 p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/)에서 트레인의 동영상](https://youtu.be/Rr3vLyP1Ods/)🚋🌈에서는 기술적 것에 제공합니다 [도커Docker 이미지](https://github.com/toolness/p5.js-docker/)는 [도커](https://www.docker.com/)에 마운트 [Node](https://nodejs.org/) 필수 요소들을 필요 없이 도커 설치를 제외하고는 방식으로든지 호스트 운영 체제에 영향을 주지 않고도 개발하는데에 사용될 [json 데이터 파일](https://p5js.org/reference/data.json)을 생성하는데 공개 API를 있으며 에디터에서 메서드를 자동으로 완성하는 등의 자동화된 툴링에 웹사이트에서 되지만 일부로 있지는 않습니다 최근에 [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015)로 마이그레이션 됐습니다 변화가 기여에 미칠지를 보기 [ES6 채택]/es6-adoption/을 방문해주십시오"},"접근성에 대한 초점\n":{"relativeUrl":"/contribute/access","description":"{/* 라이브러리의 기여자와 사용자에게 접근성에 대한 우리의 약속이 무엇을 의미하는가 */} [2019 기여자 회의](https://p5js.org/community/contributors-conference-2019.html)에서, p5js는 접근성포용과 접근성을 향상시키는 새로운 기능만 추가하기로 약속했습니다 노력을 지지하지 않는 기능 요청은 수용되지 않을 것입니다 우리는 장벽을 인식하고 없애고 예방하는 약속합니다 이는 접근성과 참여에 영향을 미칠 수 있는 다양성의 교차[^1] 경험을 고려한다는 것을 의미합니다 이같은 교차 경험은 젠더 인종 민족 성성 언어 위치 등으로 구성됩니다 p5js 커뮤니티 내에서 특권을 가진 사람들의 지속적인 편안함보다 소외된 집단의 요구에 초점을 맞추고 있습니다 모두가 접근성의 의미를 탐색하고 실천하고 가르치는 방법을 배우고 확장적 교차적 연대적 프레임워크를 통해 생각하기로 선택합니다 약속은 p5js의 핵심 가치 중 하나로 [커뮤니티 성명서](https://p5js.org/about/#community-statement)에 기재되어 ## 종류 접근성 향상은 단순히 커뮤니티의 인원을 늘리는 데 맞추지 않습니다 구조적 차별으로 인해 커뮤니티에서 사람들에게 p5js를 접근하기 쉽게 만들려는 약속입니다 p5js가 제공하는 도구와 플랫폼에도 적용되며 리더십의 구성 결정 행동을 포함합니다 속도 성장 경쟁을 중시하는 기술 문화에 저항합니다 집단적 관심의 행위로서 지향성 느림 수용성 책임감을 우선시합니다 여기서의 접근성은 다음과 같은 사람들을 위해 공평하게 만드는 * 영어 이외의 언어를 사용하는 사람들 흑인 원주민 유색인종 민족의 레즈비언 게이 바이섹슈얼 퀴어 성 정체성을 탐색 중인 팬섹슈얼 무성애자 트랜스 젠더플루이드 에이젠더 간성 두 영혼의 여성 외 성적 소수자들 시각장애인 청각장애인deaf 또는 농인Deaf[^2] 장애인/장애를 신경다양인 만성 질병을 사람들[^3] 소득이 낮거나 금융 문화 자본에 접근성이 부족한 오픈 소스와 크리에이티브 코딩에 경험이 없거나 전혀 없는 다양한 교육적 배경을 어린이와 노인을 포함한 모든 연령대의 종류의 기술적 스킬 도구 접근 권한을 종교적 제도적으로 배제되고 역사적으로 과소대표되는 이들의 교차점들 각자의 설명하는 용어의 복잡성을 인식합니다 언어는 미묘하고 진화하며 논쟁의 여지가 목록이 경우를 다루지는 약속과 요구 사항을 명명하고 책임질 있도록 시도하고 ### 예시 다음은 향상을 위한 노력의 예시입니다 문서 자료를 더 많은 언어로 번역하여 제국주의[^4]에서 벗어나는 Rolando Vargas의 [프로세싱Processing 쿠나어 번역](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancino의 [Pê Cinco 포르투갈어 사용자를 국제화 보급화](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) 스크린 리더 보조 기술에 지원 개선 Katie Liu의 [p5js에 대체 텍스트alt text 추가](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpe의 [P5 향상 프로젝트](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) 도구가 [웹 콘텐츠 지침(WCAG)](https://www.w3.org/TR/WCAG21/)을 준수하도록 하고 사용자들이 프로젝트에서 이를 따를 노력하기 오류 메시지를 유용한 도움 제공하기 [p5js 친절한 메세지 시스템(FES)](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)) 코딩 디지털 아트 영역에서 차별을 받은 공동체들 속 학습자를 멘토링 지원하기 중심의 조직 전략예 ASL 통역 실시간 자막 쉬운 장소으로 이벤트 개최 Access Day 2022](https://p5js.org/community/p5js-access-day-2022.html), [The Web We Want x W3C TPAC 2020](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/)) 교육 자료 생성 Adekemi Sijuwade-Ukadike의 [A11y Syllabus](http://a11ysyllabus.site/)) WCAG 지침을 따르고 평이한 사용하며 초심자에 맞춘 작업 보고서 게시 [OSACC 보고서](https://github.com/processing/OSACC-p5.js-Access-Report/)) 유지보수 요청을 받지 기준은 이슈 풀 리퀘스트 템플릿에 반영됩니다 기존 세트를 유지겠다는 의사를 단언합니다 코드베이스의 부분에 속하는 버그든지 상관없이 수정하고 싶습니다 도구의 일관성이 초심자의 향상한다고 믿습니다 요청의 예시는 같습니다 하드웨어 성능이 낮은 성능 프레임 버퍼에 그리기/읽기 API의 일관성 beginShape와 endShape로 호를 만들기 arcVertex 추가 *** 문서를 살아있는 문서'로 생각해 주시기 바랍니다 우선순위를 정하는 것이 의미하는지에 대화를 이어갈 문서가 가치에 대해 이야기를 나눌 커뮤니티에 초대합니다 아이디어나 제안할 있다면 Github에서 이슈로 공유하거나 [hello@p5jsorg]mailtohello@p5jsorg로 이메일을 보내주시기 버전의 성명서는 2023년 소스 컨퍼런스에서 Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston의 협업을 수정되었습니다 프로세싱 재단 펠로우십의 지원을 III와 Decker가 최종 확정 발표했습니다 [^1] Crenshaw Kimberlé Demarginalizing the intersection of race and sex a black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 전문은 Archiveorg에서 확인 가능합니다 [^2] 대문자 Deaf는 문화적으로 청각 장애인이거나 장애인 공동체의 일원을 의미하는 반면 소문자 deaf는 앞서 설명된 Deaf 정체성과는 무관히 쓰이는 청각학적 용어입니다 [^3] 장애 내에는 사람 vs 정체성 사이의 선호가 [Unpacking debate over person-first identity-first language in autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/)와 [I am Disabled On Identity-First Versus People-First Language](https://thebodyisnotanapology.com/magazine/i-am-disabled-on-identity-first-versus-people-first-language/)를 읽어보세요 [^4] 제국주의는 제국주의의 확장과 세계화로 모국어를 희생해가며 영어와 특정 지속적으로 지배 강요하는 말합니다"},"p5.js 레퍼런스에 기여하기\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* 올바른 형식을 사용하여 p5js 레퍼런스 문서를 작성하고 편집하세요 */} p5js에서는 소스 코드에 특별한 형태의 주석을 작성하는 방법을 통해 공식 웹사이트 [레퍼런스](https://p5js.org/reference/) 페이지에서 확인할 수 있는 코드 레퍼런스를 생성합니다 주석reference comments에는 설명 함수의 시그니처매개변수와 반환 값 사용 예제가 포함됩니다 다시 말해 함수 변수의 보여지는 모든 내용은 소스코드와 작성된 만들어집니다 문서에서 우리는 웹사이트에서 레퍼런스가 올바르게 렌더링될 있도록 지정하는 법을 알아보겠습니다 수정하거나 작성할 가이드를 준수해 주시기 바랍니다 ## comments 작동 방식에 대한 간단한 소개 코드를 보면 많은 라인이 주석으로 작성되어 것을 있습니다 다음과 같은 모습입니다 ``` /** * Calculates the sine of an angle `sin` is useful for many geometric tasks in creative coding The values returned oscillate between -1 and as input increases takes into account current angleMode @method sin @param {Number} @return @example function draw { background200 let t = frameCount x y sint + linex circlex describe'A white ball on a string oscillates up down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ 주석 뒤에는 함수를 정의하는 실제 자바스크립트 코드가 뒤따릅니다 주석은 항상 `/**`로 시작하고 `*/`로 끝나며 시작과 끝 사이의 라인은 `*`로 시작합니다 방식으로 블록 안에 문서로 해석될 것입니다 여러분이 [JSDoc](https://jsdoc.app/)을 접해본 적이 있다면 스타일의 주석이 익숙하게 느껴질 p5js는 JSDoc을 사용하는 것은 아니지만 JSDoc과 매우 유사한 문법을 가진 [YUIDoc](https://yui.github.io/yuidoc/)을 사용하고 주석에서는 블록이 더 작은 개별 요소로 나뉘어 집니다 이제부터 요소들을 자세히 앞서 보았던 블록을 살펴보고 섹션이 역할을 하는지 알아봅시다 작성한 내용이 [`sin()`](https://p5js.org/reference/p5/sin/) 페이지에서는 보여지는지 비교해보세요 주석의 맨 위에는 설명이 텍스트로 설명에는 마크다운 구문과 HTML이 포함될 있어요 설명은 간결하게 작성되어야 하며 필요하다면 특이사항이나 세부 내용을 추가하여 함수가 일을 최대한 잘 설명해야 합니다 함수에 위 세 개의 섹션을 포함하는데 `@` 기호 뒤에 중 하나의 키워드가 따라옵니다 `@method`는 이름을 정의할 사용합니다 예시에서 이름은 `sin`입니다함수 이름에는 괄호 ``가 포함되지 않는다는 점을 주의하세요 `@param`은 받는 매개변수나 인자argument를 `@param` 키워드 중괄호 `{}`가 감싸고 부분은 매개변수의 타입을 의미합니다 타입 나오는 단어는이 예시의 이름 나머지 매개변수를 설명하는 부분입니다 `@return`은 값을 `@return` 값의 매개변수는 따라야 {type} name Description here 매개변수가 선택 사항optional parameter인 경우에는 대괄호로 감싸주세요 [name] ### 알아보기 상수constants 취하는 값이 [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js)에 정의된 값들 하나라면 타입은 `{Constant}`로 지정되어야 `either` 키워드와 유효한 값들을 나열해야 예를 들면 같습니다 {Constant} horizAlign horizontal alignment either LEFT CENTER or RIGHT 값은 아래 data 없는 함수라면 태그를 생략해도 됩니다 체이닝chaining 부모 객체를 반환하는 경우라면 생략하고 대신 줄을 추가할 @chainable 추가 시그니처 여러 매개변수 옵션을 가지고 각각을 개별적으로 명시할 들어 [`background()`](https://p5js.org/reference/#p5/background/) 함수는 다양한 지원하고 있습니다background 문법 확인해 보세요 먼저 옵션 하나를 선택하여 살펴본 형식에 첫 번째 시그니처에 작성합니다 끝나면 시그니처를 각각의 시그니처는 @method와 태그만 있으며 각자의 범위 내에 예시를 참고해 주세요 background {String} colorstring color possible formats include integer rgb rgba percentage 3-digit hex 6-digit [a] alpha value gray specifies 다중 두 간의 유일한 차이점이 선택적 추가뿐이라면 별도의 만들 필요는 없습니다 가능한 기능의 사용을 제한해주세요 필요 이상으로 복잡하게 있기 때문입니다 변수 지금까지 함수와 상수에 방법에 대해 알아보았습니다 레퍼런스도 비슷한 구조를 따르지만 사용되는 태그가 다릅니다 system variable mouseX always contains position mouse relative to canvas at top-left corner 2-D -width/2 -height/2 WebGL If touch used instead will hold most recent point @property @readOnly // Move across background244 linemouseX describe'horizontal line moves left right with x-position' 블록의 시작 부분에는 있습니다이 예시에서는 `mouseX` 정의하기 위해 `@method` `@property`를 `@property`는 `@params`와 타입과 `@readonly` 태그는 대부분의 변수에 설정되어 사용자에 덮어씌워지지 않아야 함을 내부적으로 나타내기 사용됩니다 예제 추가하기 `sin`과 주석에서 찾아볼 있지만 아직 다루지 않은 `@example` 태그입니다 페이지를 방문할 실행될 곳입니다 [Screenshot reference page red showing only example code section]src/content/contributor-docs/images/reference-screenshotpng 위의 예제를 만들어내는 const c color255 fillc rect15 Sets redValue redc fillredValue rect50 describe Two rectangles edges rectangle yellow one 태그 다음에는 HTML `` 시작되고 뒤따라옵니다 열린 태그와 닫힌 사이에 작성하면 좋은 작성하기 위한 기본 원칙은 단순하고 작게 겁니다 예제는 의미가 있어야 하고 기능이 작동하는지 너무 복잡하지 않게 설명할 예제의 캔버스는 100x100 픽셀의 크기를 가져야 예제와 `setup` 작성되지 픽셀 크기의 회색 배경 캔버스를 만드는 자동으로 래핑wrapping됩니다 모범 사례 스타일에 자세한 여기서 않습니다 스타일 기능에 후에 한 구분해서 비워두고 arc50 PI QUARTER_PI OPEN describe'An ellipse created using arc its top open' describe'The bottom half arc' 실행되길 원하지 않는다면단지 보여주고 싶을 뿐이라면 ``에 `norender` 클래스를 추가해주세요 describe'ellipse 자동화된 테스트 과정에서 않는다면예를 사용자 상호작용이 필요한 경우 `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' 외부 애셋 파일을 사용해야 파일들을 [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) 폴더에 넣어두세요이미 해당 존재하는 재사용해도 코드에서 assets/filenameext 경로로 불러와 사용하면 [tint()](https://p5js.org/reference/p5/tint/) 참고하세요 `describe`로 캔버스 마지막으로 추가한 예제에 스크린 리더가 읽어낼 설명을 추가해야 `describe`를 사용해서요 매개 변수는 하나입니다 캔버스에서 일이 벌어지고 있는지 간략하게 문자열 하나면 xoff background204 n noisexoff width linen height vertical randomly from right' noiseScale background0 `describe`에 [web accessibility contributor documentation](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions)를 지금까지의 설명으로 편집하는 작업에 준비를 마쳤습니다 p5js에는 JSDoc 전문적으로 활용하는 방법이 가지 남아있습니다 방법들은 상황에 유용할 자주 아닙니다 `@private` 속성이나 변수가 비공개private 함수이거나 비공개 변수라면 쓸 기능은 웹사이트의 레퍼런스로 렌더링되지 비공개private로 이유는 라이브러리 자체에 내부 기능을 문서화하기 위해서입니다 아래에 `_start`의 그런 사례입니다 _start calls preload @private p5prototype_start `@module` 관련 태그들 파일 최상단에는 모듈은 p5js에서 다루는 기능들을 그룹화한 것으로 섹션으로 보여집니다 모듈 내부에는 `@submodule` 태그로 추가적인 하위 모듈이 `@for` 모듈과 `p5` 전체 클래스 관계를 정의하여 클래스의 일부라는 효과적으로 나타냅니다 `@requires` 현재 의존하고 있어 임포트되는imported 필수 모듈들을 정의합니다 @module Color @submodule Creating Reading @for p5 @requires core constants 따르는 규칙은 `src/` 폴더 내의 서브폴더가 `@module`이 되며 서브폴더 파일이 `@module`에 속한 `@submodule`이 된다는 새로운 서브폴더나 추가하지 않는 편집할 필요가 `@class` 생성자는 `@constructor` 정의됩니다 형식은 블록으로 방식과 유사하며 정의되어야 클래스에 생성자 있음을 `p5Color` A class Each object stores mode level maxes that were active during construction These are interpret arguments passed object's constructor They also determine output formatting such when saturation called stored internally array ideal RGBA floating normalized calculate closest screen colors which levels Screen sent renderer When different representations calculated results cached performance floating-point numbers recommended way create instance this @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals containing green blue channel CSS 생성과 미리보기 리포지토리는 웹사이트를 빌드하고 실행하지 않아도 생성하고 미리 볼 코드의 주석으로부터 생성하기 명령어는 npm run docs 과정을 파일들과 주요 `docs/reference/datajson` 생성됩니다 파일은 웹 사이트에서 렌더링하는데 것과 동일한 경량화 후의 파일입니다 작업을 연속적으로 수행하기 명령어를 실행할 docsdev 변경사항이 생길때마다 렌더링을 업데이트하는 실시간 미리보기live preview 시작합니다변경 후에는 새로고침해야 변경 사항이 나타납니다 이는 특히 브라우저에서 실행 중인 보는데 유용합니다 템플릿 파일들은 `docs/` 저장되어 직접 변경해서는 안됩니다 단 `docs/yuidoc-p5-theme/assets` 추가하는 예외입니다 단계로 시스템에 사항을 알고 싶다면 [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/) 레퍼런스와 관련된 이슈issues를 [#6519](https://github.com/processing/p5.js/issues/6519/)와 [#6045](https://github.com/processing/p5.js/issues/6045/)를 [기여자 가이드라인](https://docs.google.com/document/d/1roBu-7s9xspuie3M6EhEokYWc82DZhDNYO2SQiY4k68/edit?tab=t.0#heading=h.627q50vo09fb) 문서도 시작하기에 자료입니다"},"기여자 가이드라인\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* GitHub에서 p5js에 기여하는 데 필수적인 정보 */} 기여자 가이드라인에 오신 것을 환영합니다 문서는 코드를 기여하고자 하는 신규 가지 기술적 단계를 다시 기억하고자 또는 p5js 코드 기여와 관련된 모든 사람을 위한 문서입니다 리포지토리repository 외부에서 기여하려는 경우튜토리얼 작성 수업 계획 이벤트 조직 페이지를 살펴보세요 스튜어드 유지 관리자maintainers는 이슈 풀 리퀘스트를 검토하는 더 유용한 [스튜어드 가이드라인](https://github.com/processing/p5.js/blob/main/contributor_docs/steward_guidelines.md)을 찾을 수 있습니다 긴 종합적인 문서이지만 가능한 단계와 항목을 명확하게 지시하도록 할 것입니다 목차를 활용하여 자신에게 섹션을 찾아보세요 계획된 관련이 없는 경우 건너 뛰어도 괜찮습니다 **새로운 기여자인 첫 번째 섹션 이슈Issue에 대해 알아보기로 시작하는 것이 좋습니다 개발 프로세스의 단계별 설정만 필요한 개발자를 빠른 시작 참조하세요** 목차 * [이슈Issue에 알아보기]/all-about-issues/ [이슈Issue란 무엇인가요]/what-are-issues/ [이슈 템플릿Issue Templates]/issue-templates/ [버그 발견]/found-a-bug/ [기존 기능 향상]/existing-feature-enhancement/ [새로운 요청]/new-feature-request/ [토론Discussion]/discussion/ [p5js 코드베이스 작업]/working-on-the-p5js-codebase/ [개발자를 시작]/quick-get-started-for-developers/ [Github 편집 사용하기]/using-the-github-edit-functionality/ [p5js를 포크하고 포크에서 작업하기]/forking-p5js-and-working-from-your-fork/ Desktop 사용하기]/using-github-desktop/ [git 명령줄command line 인터페이스 사용하기]/using-the-git-command-line-interface/ [코드베이스code base 분석]/codebase-breakdown/ [빌드 설정]/build-setup/ [Git 워크플로우]/git-workflow/ [소스 코드]/source-code/ [단위 테스트]/unit-tests/ [인라인 문서화]/inline-documentation/ [국제화](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#internationalization) [접근성]/accessibility/ [코드 표준]/code-standard/ [소프트웨어 디자인 원칙]/software-design-principles/ [풀 리퀘스트]/pull-requests/ 리퀘스트 생성]/creating-a-pull-request/ 정보]/pull-request-information/ [제목]/title/ [해결]/resolves/ [변경 사항]/changes/ 사항의 스크린샷]/screenshots-of-the-change/ 체크리스트]/pr-checklist/ [리베이스 충돌 해결]/rebase-and-resolve-conflicts/ [논의 고치기amend]/discuss-and-amend/ *** 이슈에 알아보기 p5js의 GitHub 리포지토리줄여서 repo에서 활동의 대부분이 이슈에서 발생하며 이는 여러분이 기여를 여정을 하기 좋은 장소입니다 ## 이슈란 무엇인가 [A cropped screenshot of the library repository only showing contents top right corner A red box is drawn on surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng 이슈는 깃허브 포스트post를 일컫는 보편적인 용어이며 문제에 잘 설명하기 버그 보고 새로운 추가 요청 의견 라이브러리 개발과 될 봇을 포함한 계정을 가진 사람이 코멘트주석를 달 기여자들끼리 리포지토리 내에서 프로젝트 주제에 논의하는 공간입니다 다양한 이유로 이슈가 오픈될 있지만 우리는 보통 소스 코드에 대한 개발에 논의를 위해 이슈를 사용합니다 당신의 디버그 협업자 초대 관련없는 주제는 [포럼 (forum)](https://discourse.processing.com/) 이나 [디스코드 (Discord)](https://discord.gg/SHQ8dH25r9/) 같은 플랫폼에서 상의되어야합니다 이슈인지 곳에 포스트 되어야 하는지 결정할 있도록 쉽게 사용할 있는 템플릿을 만들었습니다 템플릿 템플릿은 스튜어드와 관리자가 이해하고 검토하기 만들어줍니다 해당 제출하고 빠르게 답변을 받을 도와줍니다 [Screenshot an example what issue looks like The title in Warning being logged Safari when using a filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng 제기하려면 저장소의 탭으로 이동하고 오른쪽에 New 버튼을 클릭하기만 하면 됩니다 여러 옵션이 제시되며 각각은 템플릿에 해당하거나 질문을 제출할 적절한 위치로 리디렉션됩니다 제대로 된 관심을 가장 연관성있는 옵션을 선택하는 권장합니다 [Cropped repository's page with green button highlighted it]src/content/contributor-docs/images/new-issuepng ### 발견\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) p5js에서 잘못된 동작이 발생하거나 문서에 설명된 대로 동작하지 않는 경우[이 템플릿](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml)을 사용하세요 스케치sketch 디버깅 중 발생한 문제는 먼저 [Discourse 포럼](https://discourse.processing.org) 질문하세요 채워야 필드가 *가장 적합한 하위 영역은 무엇인가요* - 문제를 식별하고 응답하기 자동으로 \\[라벨label]태그를 지정하여 도와줍니다.([https://github.com/processing/p5.js/blob/main/contributor\\_docs/issue\\_labels.md](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)). *p5js 버전* 버전 번호는`` 태그 링크 p5js/p5minjs 파일의 줄에서 이것은 `142` 점으로 구분된 세 개의 숫자로 이루어져 있을 *웹 브라우저 간의 동작을 분리하는 도움이 번호를 찾으려면 사용 중인 브라우저에 아래 표의 지침을 따르세요 Chrome Firefox In address bar navigate to `chrome//version` `aboutsupport` Under menu item choose About *운영 체제* 가능하면 운영 체제 포함해야 합니다 `macOS 125` 일부 버그는 체제의 동작에서 비롯될 *이것을 재현하는 단계* 공유해야 중요한 정보입니다 버그를 재현하기 세부 나열해야 보여주는 기본적인 예제 공유하는 것은 당신이 겪고 재현하고 해결책을 만들기 큰 **재현이 핵심입니다** 템플릿의 많은 필드는 복제하는 목표로 여러분의 스케치 환경과 발견한 재현시킬 방법에 정보를 제공할수록 누구든지 찾기에 쉬워질 입니다 **가능한 한 자세히 설명하고 추상적인 문장을 피하세요** 예를 들어 image function이 작동하지 않습니다이라고 하지 말고 로드된 GIF 이미지를 올바른 크기로 표시하지 않습니다 설명하세요 마주치고 설명하는 방법은 두 가지를 공유한 샘플 코드가 무엇을 기대하는지 예상되는 동작 실제로 작동하는지 실제 방금 보고한 수정하고 싶다면 설명란에 그렇게 표시할 후 설명한 수정할 것인지 간단한 제안을 제공할 이렇게 지원이 필요한지를 알 **이슈가 승인되지 않거나 승인이 이루어지기 전에 이슈와 제출하거나 변경 작업을 시작해서는 안됩니다** 제안된 수정이 수락되지 않을 완전히 접근 방식이 필요할 있거나 문제가 있기 때문입니다 수정 나기 제출된 리퀘스트는 날 때까지 닫혀있을 것입니다closed 수정을 승인된 이슈에는 적어도 명의 [영역 관리자](https://github.com/processing/p5.js#stewards)의 승인을 받아야 시작할 향상\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) 기존 기능함수 상수 렌더링 등에 사항 제안 추가를 `color` 함수 색상을 받아들이는 함수에 색상 정의 방법을 추가하는 경우에는 사용해야 템플릿에는 필드를 입력해야 *접근성향상* -이 필수 향상을 통해 p5js가 창작 예술이나 기술 분야에서 역사적으로 소외된 사람들에게 \\[접근성 향상] ([https://github.com/processing/p5.js/blob/main/contributor\\_docs/access.md](https://github.com/processing/p5.js/blob/main/contributor_docs/access.md) 시킬 설명을 넣는 곳입니다 **이것없이는 제안도 않습니다** 확실하지 않음을 기입하고 그들이 접근성을 다루는지에 아이디어가 있다면 커뮤니티의 구성원들이 논점을 제안할 우리가 해결하는데 [라벨](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)을 지정할 *기능 향상 사항* 제안에 작성하는 제안에는 종종 향상이 필요한지에 명확한 사례가 포함됩니다 제안이 승인되기 위해서는 1명의 필요합니다 **이슈에 제안과 수락될 것임을 보장할 없기 주어질 닫힙니다closed 요청\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) 기능을 제안하려는 경우에 `createTable`함수를 사용하여 HTML `` 요소를 그리는 제안은 기존의 중복될 있으며 적합하다고 생각되는 선택하면 양식 향상의 필드와 동일합니다 채워 넣어야 하는지에 자세한 내용은[이전 섹션]#existing-feature-enchancement을 참조해주세요 최소 2명의 관리자](https://github.com/processing/p5.js#stewards) **제안이 모든풀 [\"토론(Discussion)\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) 제출 위의 것에도 맞지 사용됩니다 실제로는 템플릿에도 드물어야 특정 웹 API 채택할지에 토론은 요청](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#new-feature-request); 제출해야 추가적인 모드를 것에 토론은[기존 향상](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#existing-feature-enchancement); 주최하는 지역 크리에이티브 코딩creative coding 이벤트에 발표는 포럼에 게시하고 지원이나 홍보를 원한다면 Processing Foundation에 연락해야 토론 오픈할 측면 패널의 라벨 패널을 관련 라벨을 추가하여 영역으로 알릴 자체는 최소한의 텍스트 필드만 예시 보려면 [이 링크](https://github.com/processing/p5.js/issues/6517/)를 확인하세요 [**⬆ back top**]#contributor-guidelines 작업 사전 요구 계속 진행 하려면 명령줄 git nodejsv18 최소한으로 숙지하고 로컬 환경을 설정해야 소개 이제 논의되었고 구현이 승인되었으며 변경을 준비가 되었습니다 기반 마찬가지로 발견했거나 토론에 참여했으며 스튜어드에 승인되었지만 원래 문제 작성자나 구성원 작업할 의사가 없음을 표시한 자발적으로 여기에 스튜어드가 할당하도록 **다른 사람의 차례를 어기면 안 됩니다** 의향을 표시하거나 이미 사람에게 할당되어 리퀘스트을 제출하여 대기열을 넘어서는 안됩니다 항상 선착순 우선시할 누군가가 아직 동일한 PR을 제출하면 닫힐 할당된 개인의 마지막 활동이 없었다면 공손한 코멘트를 남겨 상황을 묻고 구현에 필요한지 물어볼 대부분 사람들이 작업하는 시간이 소요되기에 이바지함에 \u001d긴 시간을 허용합니다 당신은 자신의 속도로 일하고 오래 작업에 할애할 있는지에 엄격한 제한이 없다는 자신감을 가질 필요가 기여의 측면에서든 발생하면 도움을 요청하는 주저하지 마십시오 관리자뿐만 아니라 커뮤니티 회원들도 최선을 다해 안내할 가이드 p5js의🌸 코드베이스code base에 작업/기여를 원하는 p5js를 직접 개선하거나 [친숙한 오류 메세지 시스템](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)과 프로젝트를 개선하기 수행할 [p5js의 포크를 생성합니다.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [생성한 컴퓨터에 복제합니다.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [다음 명령을 업스트림upstream을 추가합니다.](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote add upstream https://github.com/processing/p5.js [NodeJs](https://nodejs.org/en/download/) 설치되어 있는지 확인하십시오 명령어를 확인할 node -v 입력하여 라이브러리를 설치하세요 npm ci 다음과 설명적인 브랜치 이름을 `main` 브랜치에서 브랜치를 만들어 주세요 checkout -b [branch_name] 코드베이스를 변경하기 시작하면 자주 테스트를 실행하세요 작업은 걸리지만 손상되지 않는지 확인합니다 test 추가하거나 단위 추가합니다 작업이 완료되면 사항을 커밋하고 리퀘스트](https://p5js.org/contributor-docs/#/./contributor_guidelines?id=pull-requests)를 생성할 인터페이스상 파일 내용 상단에 연필 아이콘 버튼이 버튼은 제공하는 기능으로 파일을 빠르고 간편하게 편집할 file view src/color/color\\_conversionjs arrow pointing pencil icon side image]src/content/contributor-docs/images/edit-filepng 매우 단순한 외에는 사용하는 권장되지 이에 주요 이유 하나는 코드의 보다 복잡한 리퀘스트로 제출되기 로컬에서 구축하고 테스트해야 기능에서 환경보다 유연하게 경우가 많기 포크fork에서 작업하기 단계는 리포지토리repository를 포크하는 포크fork는 오픈 소스에서 특정한 의미를 가지고 여기서는 리포지토리의 사본을 생성하여 계정에 저장하는 의미합니다 리포지토리를 포크하려면 페이지 상단 근처에 포크fork GitHub가 복사본을 만듭니다 main labeled fork and Fork 593k outlined dark orange]src/content/contributor-docs/images/forkpng 리포지토리에 쓰기 액세스 권한이 없을 가능성이 높기 작업해야 하며 작업하면 변경한 나중에 공식 Desktop은 터미널에 입력하는 대신에 그래픽 사용자 인터페이스를 git을 프로그램입니다 git에 익숙하지 않은 옵션이며 때마다 Desktop과 terminal 사이를 자유롭게 전환할 [GitHub Desktop을 다운로드하고 설치](https://desktop.github.com/)합니다. 설치가 응용 프로그램을 엽니다 계정으로 로그인하라는 메시지가 나타납니다 로그인한 후에는 포크한 포함하여 목록이 표시됩니다 포크인 `yourUsername/p5js`를 선택하고 파란색 Clone 클릭합니다 저장할 위치에 요청할 이를 변경하거나 기본 설정을 유지한 채로 계속할 [The user interface after signing On half screen it lists your projects bottom right]src/content/contributor-docs/images/github-desktop-initpng 복제가 되면 사용할지에 상위 프로젝트에 기여할 계속Continue을 cloning It asks if you are planning contribute parent project or use for own purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` 사용하기 포크가 생성되면 포크 페이지로 이동하여 초록색 Code 클릭해서 URL을 복사하세요 `https://github.com/limzykenneth/p5.js.git` 모양이어야 list files landing orange outline]src/content/contributor-docs/images/code-buttonpng 환경에서 명령줄로 저장소를 클론하세요 클론Clone은 단순히 저장소와 장치로 다운로드하는 폴더를 저장하고 싶은 폴더에서 clone [git_url] 위에서 복사한 `[git_url]`자리에 작성하세요 과정은 인터넷 연결 속도에 분 정도 걸릴 있으니 커피 잔을 내리면서 기다리는 것도 좋을 같아요 과정이 선호하는 에디터에서 다운로드한 `p5js` 열고 내용을 살펴볼 분석 폴더 안에 파일과 폴더는 같습니다 `src` 최종적으로 p5js와 p5minjs 파일로 결합되어 위치하는 [`test`](https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md) 테스트와 문서 예제를 테스트하기 `tasks` 세밀하게 맞춤화된 빌드 위치한 `Gruntfilejs` 구성 파일입니다 `contributor_docs` 기여자들이 작성한 문서를 비롯한 파일이 폴더들은 파일이나 종류의 지원 파일일 뿐입니다 대부분의 없습니다 설정 시작하기 빌드하고 테스트할 odejs가 있다는 가정하에 다음을 npm이 의존성dependency을 다운로드해야 그게 다입니다 설정이 완료되었습니다 꽤 간단하죠 Git 워크플로우 부분과 내용은 아래의 참고해보세요 처음부터 실행해보세요 에러없이 완료되어야 테스트 없이 라이브러리만 run build 명령어 사용하더라도 `lib/`폴더 `p5js`와 `p5minjs`로 라이브러리가 빌드됩니다 빌드된 파일들을 테스트에 만드는 git에서 브랜치는 이름에서 있듯이 `main`이나 브랜치에 영향을 주지 않고 커밋을 추가할 분기된 버전입니다 있게 해줍니다 독립된 식으로요 망쳐도 Desktop에서 현재 커밋하려면 완료한 앱을 열어야 왼쪽 사이드바에 표시되고 내의 구체적인 사항이 창 하단 모서리에 옆의 입력란에는 간략하고 개괄적인 이것이 커밋의 제목이 설명 입력란은 커밋에 작성하거나 그냥 비워둘 Commit 눌러 확정하세요 branch selection After entering new name that does not yet exist Create Branch appears]src/content/contributor-docs/images/github-desktop-create-branchpng 터미널에서 `git branch_name`을 실행하고 `branch_name`을 설명할 이름으로 바꾸면 별도의 진행하면서 특히 `npm test`를 실행하는 데는 해치지 아래에 커밋하기 실행해야 코드베이스codebase에 완료했다면 커밋해야 커밋은 저장된 모음으로 커밋 시점의 내 상태를 기록합니다 궁금하시죠 모으기보다는 커밋하는 문장으로 완료할 입력란에 고급 입력합니다 기술하거나 having made change area where need write circled lower left window]src/content/contributor-docs/images/github-desktop-commitpng 확인하려면 status 변경하지 뜬다면 상태로 [복원](https://git-scm.com/docs/git-restore/)해야 하거나 의도한 사항인지 확인해야 입력하세요 diff 리퀘스트PR Pull request에 포함시키지 않으려는 사항은 커밋해서는 명령어로 사항에 스테이징커밋으로 저장하다하세요 commit -m [your_commit_message] `[your_commit_message]`는 메세지로 대체해야 일반적인 문구는 피해주세요 `Documentation fix 1` 대신 `Add documentation circle function`와 적어주세요 Add function 위 반복하면서 주기적으로 실행하여 Source code 계획을 하고 알고 방법 문서Documentation를 방문하는 문서의 하단에는 링크가 reference website containing sentence Notice any errors typos Please let us know feel free edit src/core/shape/2d\\_primitivesjs pull request Part above says underline it]src/content/contributor-docs/images/reference-code-linkpng Unit tests 계획이라면 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md)를 참조하세요 개선 수정에 대해서는 구현implementation을 커버하는 테스트가 리퀘스트에 포함되어야 한다는 점을 유의하세요 인라인 Inline 계획하고 [여기](https://p5js.org/contribute/contributing_to_the_p5js_reference/)를 접근성 Accessibility 기능에 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/web_accessibility.md)를 친절한 에러 시스템에 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)를 표준 스타일은 [ESLint](https://eslint.org/)에 시행됩니다 커밋commit과 리퀘스트pull request는 linting프로그래밍 오류를 찾아내는 과정을 통과해야만 받아들여집니다 코딩 표준을 따르는 쉬운 에디터용 ESLint 플러그인을 사용하고 리팅linting 하이라이팅대부분 에디터용으로 제공됨을 활성화하는 소프트웨어 원칙 원칙을 염두에 두는 중요합니다 우리의 우선순위는 프로젝트의 우선순위와 다를 잇으므로 프로젝트에서 오는 원칙에 익숙해지는 **접근성** 무엇보다 우선시하며 내리는 결정은 그룹에 늘릴지 고려해야 선언문에서 읽을 **초보자 친화적** API는 초보자에게 친화적을 최신 HTML5/Canvas/DOM API를 인터랙티브하고 시각적인 콘텐츠를 낮은 장벽을 제공합니다 **교육적** p5js는 교육적 사용을 지원하는 API와 커리큘럼에 중점을 두고 API에 완전한 참조와 지원하고 창의적 명확하고 몰입도 순서를 소개하는 튜토리얼과 커리큘럼을 포함합니다 **자바스크립트와 커뮤니티** 자바스크립트 패턴과 사용법을 모델링하면서 곳에서는 추상화함으로써 관행을 접근하기 라이브러리로서 문서화 전파 과정의 넓은 커뮤니티를 **프로세싱과 프로세싱 언어와 커뮤니티에 영감을 받았으며 자바에서 자바스크립트로의 전환을 쉽고 위로 올라가기**]#contributor-guidelines requests PR 변경사항을 테스트까지 마친 후해당할 test` 오류가 발생하지 커밋했다면 저장소로 새 병합하기 준비할 공식적으로 저장소예를 저장소에 저장소로부터의 히스토리로 병합하거나 당겨오도록 생성 푸시하는 포크로 업로드하는 것으로 생각하세요 갓허브 데스크탑GitHub Desktop애서는 변경하는 버튼 깃허브에 클릭하여 푸시하세요[A committing changes push online red]src/content/contributor-docs/images/publish-branchpng 업로드되면 생성하라는 번 클릭하면 미리보기와 요청을 생성하는 Request 시작합니다 Github pushing sidebar changed items pane below No local header blue Review has been marked up circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin 푸시가 열 표시될 브라우저에서 이동할 없다면 목록 상단의 드롭다운 버튼으로 브랜치로 전환한 Contribute를 클릭하고 Open request를 클릭하세요 command response includes link open request]src/content/contributor-docs/images/new-branchpng 방문할 버튼도 볼 수도 web section near yellow call action text Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated p5js's template]src/content/contributor-docs/images/new-prpng 제출하기 작성해야 제목 제목은 간략하게 설명해야 여기서 지양해야 해결 템블릿에는 `Resolves #[Add number here]`라는 문구가 있는데 `[Add here]` 부분을 수정하려는 [above](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#all-about-issues) eg #1234` 번호로 변경해야 리퀘스트가 병합된 닫히게 닫고 싶지 않다면아마도 리퀘스트에서 변경사항으로 올 것이기 `Resolves` `Addresses`로 변경하세요 진행한 구현 사항과 결정 검토review할 추가하세요 스크린샷 상황에 선택적이며 캔버스에 시각적 렌더링하는 방식과 편집기의 스크린샷이 스케치의 스크린샷임을 유의해주세요 체크리스트 변경사항과 항목이 해당하는 `[ ]`를 `[x]`로 변경해주세요 request을 리베이스 Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng 오픈된 검토하고 사항들을 주의해주세요 수는 작업한 수와 일치해야 Commits 탭에는 단 커밋만 표시되어야 Files 탭은 비교하여 변경사항만을 보여주어야 부근에 This no conflicts branch라고 must be resolved라고 표시되어서는 사실이 아니라면예상했던 것보다 커밋이 충돌이 [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/)를 진행하거나 충돌을 해결해야 충돌이란 최근에 변경사항이 적용된 파일에 진행하였으나 깃git에서 변경사항 묶음을 유지할지 제외할지 확정하지 못한 해결하는 어려움이 저희에게 알려주시면 안내해 드리겠습니다 지침은 가끔 깃허브는 Resolve Conflicts 보여주면서 해결할 합니다[A merge conflicting filenames listed there highlighted]src/content/contributor-docs/images/resolve-conflictspng `>>>>>>` 사이에 표시되며 `=======`으로 구분됩니다 부분은 보여주고 쪽 부분에는 메인 변경된 보여줍니다 GitHub's conflict resolution contains markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng 표시를 제거하고 포함될 최종 코드만 남겨둡니다 해결되었을 Mark as resolved를 클릭할 editing remove mark resolved upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng 해결되면 커밋할 all have enabled]src/content/contributor-docs/images/commit-mergepng 깃허브의 인터페이스에서 표시하기에는 너무 수동 방식을 선호한다면 https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` 발생했을 lib/p5js와 lib/p5minjs 파일에서만 발생했다면 해결하기 쉽습니다 빌드하기만 파일에서 발생했고 확실히 모르겠다면 요청하세요 --continue push` 체크 리스트는 단계들을 거친 후에 해결될 않다면 논의 고치기amend 열리면 스튜어드나 검토할 답변할 있기까지 며칠이 조금만 기다려주세요 그동안 이슈들을 확인해 보는 어떨까요 검토한 하나가 발생할 승인되어 병합됩니다 축하합니다 후자의 경우라도 당황하지 마세요 정상적인 과정이며 스튜어드는 완성할 돕기 리퀘스트의 요청되었고 진행할 [이전과 과정](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#git-workflow)를 따르되 복사본 계속해서 진행하고 커밋한 포크된 원격 푸시하세요 푸시하면 검토자에게 요청된 진행했다는 알리기 댓글을 남기세요 필요하지 PR은 병합merge될"},"새로운 라이브러리 생성하기\n":{"relativeUrl":"/contribute/creating_libraries","description":"p5js 라이브러리는 p5js의 핵심 기능을 확장하거나 추가하는 모든 자바스크립트 코드가 될 수 있습니다 라이브러리에는 두 가지 범주가 코어 라이브러리DOM Sound는 배포의 일부이며 기여된 커뮤니티의 구성원이 개발 소유 유지 관리합니다 여러분이 라이브러리 하나를 만들고 있고 [p5js.org/libraries](https://p5js.org/libraries/) 페이지에 포함하고 싶다면 [이 폼](https://docs.google.com/forms/d/e/1FAIpQLSdWWb95cfvosaIFI7msA7XC5zOEVsNruaA5klN1jH95ESJVcw/viewform/)을 제출해 주세요 자바스크립트를 작성하고 사용하는 방법에는 여러 가지가 있으므로 저희는 작업을 여러분에게 맡기도록 하겠습니다 다음은 라이브러리가 잘 동작하도록 하기 위한 참고 사항입니다 ## 코드 ### p5prototype에 메소드를 추가하여 p5 확장 할 예를 들어 domjs의 코드는 DOM에 [HTMLImageElement](https://developer.Mozilla.org/en-US/docs/Web/API/HTMLImageElement/)를 `createImg`메소드를 추가하기 위해 p5를 확장하는 것입니다 ```js p5prototypecreateImg = function src { const elt documentcreateElement'img' //const new Image // 위에 1행보다 더 짧게 대체 eltsrc return addElementelt this } ``` DOM 프로젝트에 포함되면 `createImg`는 `createCanvas` 또는 `background`와 호출 내부 helpers를 private 함수 사용하기 사용자에 호출되지 않을 목적의 함수를 의미합니다 위의 예제의 `addElement`는 [dom.js](https://GitHub.com/processing/p5.js/blob/main/src/dom/dom.js)에서 입니다 `p5prototype`에는 공개적으로 바운드 되지 않았습니다 프로토타입에 클래스를 아래 예제에서 `p5Elementprototype`은 `html` 메소드와 확장되어 엘리먼트의 html을 설정합니다 p5Elementprototypehtml html thiseltinnerHTML //thiselttextContent //innerHTML보다 안전한 대안 preload에서 있도록 p5에 메소드 이름을 등록하려면 registerPreloadMethod를 이용하세요 소리 이미지 외부 파일 로딩과 같은 일부 비동기 기능에는 동기 옵션이 제공됩니다 `loadStringspath [callback]` 은 두번째 매개변수로 선택적으로 콜백 허용합니다이 함수는 loadStrings 함수가 완료된 후 호출됩니다 사용자는 콜백함수 없이 `preload`에서 loadStrings를 있으며 p5js는 `preload`의 작업이 완료 때까지 기다렸다가 `setup`으로 이동합니다 등록하고 등록하고자 하는 메소드명과 `registerPreloadMethod`를 호출하고 프로토타입 객체를 ~~기본값은 p5prototype~~ 포함하여 메소드에 전달합니다 예제는 soundfilejsp5sound 라이브러리에 `loadSound`를 등록하는 행 보여줍니다 p5prototyperegisterPreloadMethod'loadSound' p5prototype *callback* **preload** 대한 함수의 예제 preload 콜백과 p5prototypegetData callback 함수에서 데이터를 복제하고 반환할 만듭니다 덮어쓰거나 재할당하지 않고 업데이트해야 합니다 preload가 원래 포인터/레퍼런스를 유지하는 것이 중요합니다 const로 변수를 선언하면 실수로 재할당하는 경우를 방지해 줍니다 ret {} 작업할 일부입니다 loadDataFromSpacefunction data 데이터의 프로퍼티들을 반복합니다 for let prop in ret의 프로퍼티들로 설정복제합니다 전달받은 빈 업데이트합니다 객체로 ret을 재할당할 수는 없습니다 콘텐츠를 데이터로 ret[prop] data[prop] 콜백이 함수인지 아닌지 확인합니다 if typeof == function' callbackdata 실행 채워진 반환합니다 ***p5*** 여러번 호출되는 **registerMethod** 사용하세요 p5prototypedoRemoveStuff 제거하는 p5prototyperegisterMethod'remove' 등록 수있는 이름은 다음과 같습니다 등록하기 전에 먼저 정의해야 * **pre** — `draw` 시작 시 드로잉에 영향을 줄 **post** 끝에 **remove** `remove`가 호출되면 **init** 스케치가 처음 초기화 스케치 함수`p5` 생성자로 전달 된 것가 실행되기 전역 모드 설정 호출되기 여러분의 스케치에 무엇이든 추가 모드가 활성화되어 있으면 자동으로 `window `에 복사됩니다 목록을 대략적으로 정리하면 [https://GitHub.com/processing/processing/wiki/Library-Basics#library-methods](https://GitHub.com/processing/processing/wiki/Library-Basics#library-methods) 여러분만의 생성 전혀 확장하지 대신에 인스턴스화하고 라이브러리와 연계하여 사용할 있는 제공할 다 혼합 작명 **p5 덮어 쓰지 않아야 합니다** p5prototype을 때는 기존 프로퍼티 함수명을 사용하지 않도록 주의해야 [hasOwnProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty/) 사용하여 확인해 볼 들면 맨 위에서 행을 추가하면 이미 `rect` 메소드가 존재하기 true 출력할 consolelogp5prototypehasOwnProperty'rect' **위와 유사하게 클래스 않아야합니다** p5Image p5Vector p5Element 등을 경우 위와 동일한 프로토콜을 따라야 **p5js는 모드와 인스턴스 이렇게 있습니다** 모드에서 속성과 메서드는 window 객체에 바인딩되므로 접두사 `background` 메서드를 기본 콘솔에 빠르게 Google 검색으로 JS 이름들이 존재하는지 테스트 해 **일반적으로 클래스는 대문자로 표시되며 메서드와 프로퍼티들은 소문자로 시작합니다** p5의 클래스들은 앞에 p5가 붙습니다 네임스페이스를 클래스에만 붙이려고 직접 만들 **클래스명에 접두사로 포함하지 고유한 접두사나 접두사가 없는 이름으로 생성해 **p5js 이름에도 붙지만 단어는 소문자**로 클래스와 구별됩니다 p5soundjs가 지정하려면 형식을 따라주세요 패키징하기 **라이브러리가 포함 단일 파일을 만듭니다** 사용자가 쉽게 라이브러리를 연결할 빠른 로딩을 일반 파일과 [최소화된](http://jscompress.com/) 버전 모두에 옵션에 대해 고려 **기여된 제작자가 호스팅 문서화 관리합니다** 라이브러리들은 GitHub 별도의 웹 사이트 어딘가에 있을 **문서가 핵심입니다** 문서는 찾아보고 다운로드 하여 곳에 있어야 레퍼런스에 포함되지 않지만 유사한 따르고 싶을 수도 [라이브러리 개요 페이지](https://p5js.org/reference/libraries/p5.sound), [클래스 페이지](https://p5js.org/reference/p5.Vector) [메소드 페이지](https://p5js.org/reference/p5/arc/) 예제를 참조하세요 **예제가 좋습니다** 사람들에게 일을 보여주세요 자바스크립트이므로 사람들은 다운로드하기 전 온라인에서 되는 것을 예제들을 호스팅하기 쉬운 [jsfiddle](http://jsfiddle.net/) [codepen](http://codepen.io)이라는 두가지 좋은 **알려주세요** 배포 준비가 되면 [hello@p5jsorg]mailtohello@p5jsorg로 링크와 정보와 보내주세요 페이지](https://p5js.org/libraries/)에"},"p5.js 친절한 에러 시스템(Friendly Error System, FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"## 개요 FES는 학습을 시작할 일반적인 사용자 오류를 겪는 새로운 프로그래머를 돕도록 설계되었습니다 시스템은 시작 잡아내고 사용자가 해결하도록 명확한 표현과 링크를 제공합니다 막 마주칠 수 있는 함수에만 적용됩니다 서버를 실행하지 않고 파일을 로드한다거나 URL로 loadImage 함수를 호출하는 등의 특히 문제는 예외입니다 FES의 목표는 종종 암호화된 콘솔 보완하기 위해 이해하기 쉬운 오류 메시지를 생성하는 것입니다 예를 들어 자바스크립트는 기본적으로 파라미터의 타입 검사를 지원하지 않기 경험이 없는 자바스크립트 개발자는 파라미터 입력 시 발생하는 에러를 발견하기가 더욱 어렵습니다 FES 메시지는 우리가 이해할 보통의 언어로 되어 있고 문서로도 연결되며 초보자 수준으로 작성되었습니다 오류들은 p5js를 통해 여러 파일에서 발생하지만 대부분의 작업과 작성은 `src/core/friendly_errors`에서 일어납니다 `p5js`에서는 FES가 활성 상태이고 `p5minjs`에서는 비활성 상태입니다 FES를 비활성화 하려면 `p5disableFriendlyErrors = true` 설정하면 됩니다 종류의 감지하고 출력할 있습니다 `validateParameters`는 인라인 문서 기반으로 함수의 파라미터를 점검합니다 `friendlyFileLoadError`는 파일 로딩 잡아냅니다 두 검사는 기존의 선택된 p5 함수에 통합되었지만 `p5_validateParameters` 호출하여 더 많은 함수나 자체 라이브러리를 추가할 유용한 얻기 함수에서나 `friendlyError`를 호출할 `helpForMisusedAtTopLevelCode`는 윈도우 로드 호출되며 setup이나 draw 외부에서 p5js 사용할 있는지 확인합니다 자세한 기술 정보는 [src/core/friendly\\_errors/fes\\_core.js](https://github.com/processing/p5.js/blob/main/src/core/friendly_errors/fes_core.js)에서 메모를 참고하세요 ### `core/friendly_errors/file_errors/friendlyFileLoadError` * 함수는 파일이 올바로 로드되지 않으면 친절한 생성하고 표시합니다 로드하기에는 너무 큰지 확인해서 경고를 생성하기도 합니다 이것은 다음과 `p5_friendlyFileLoadErrorERROR_TYPE FILE_PATH` 예시 ```javascript /// 폰트 누락 let myFont function preload { loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' {} 콘솔에 다음의 메시지가 생성됩니다 > 폰트를 로드하는 데 문제가 같습니다 경로 [assets / OpenSans-Regularttf]가 올바른지 온라인 호스팅하는지 또는 로컬 서버가 실행 중인지 확인하십시오 ``` 현재 버전에는 `image` `XML` `table` `text` `json` `font`에 대한 템플릿이 포함되어 `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes`에 구현되었습니다 크기가 커서 중 생기는 오류는 loadX 메소드에 `core/friendly_errors/validate_params/validateParameters` `docs/reference/datajson`에 정보와 일치하는지 검증을 실행합니다 함수 호출이 올바른 개수와 파라미터형을 가지고 arc1 ptjs arc 4번째 자리인덱스는 0부터 시작에 빈 값이 들어온 의도한 것이 범위의 문제입니다 [https://p5js.org/examples/data-variable-scope.html]. [https://p5js.org/reference/#p5/arc] 5번째 자료형 arc'1' MathPI pie' p5jsarc 0번째 자리에는인덱스는 시작에는 숫자가 들어와야 하는데 문자열이 들어왔습니다 `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME 는 검증이 필요한 내부에서 씁니다 목적으로는 사용하는 좋습니다 은 주로 디버깅이나 단위 테스트 목적으로 사용합니다 `color/creating_reading` `core/2d_primitives` `core/curves` `utilities/string_functions` 함수로 구현되어 추가 기능 p5와 디버거로 개발자들을 환영합니다 IDE와 웹 에디터에서 동작합니다 개발자 유의사항 객체를 생성할 파라미터로 사용될 모든 객체는 클래스 선언부에서 `name` 파라미터오브젝트의 이름 값을 지정해야 들면 p5newObject functionparameter thisparameter 파라미터' thisname p5newObject' 허용되는 타입은 `Boolean` `Number` `String` 객체의 이름위의 주요 항목 참고입니다 유형에 배열 파라미터에는 `Array` 쓰세요 경우 특정 타입의 파라미터가 허용되는지예시 `Number[]` `String[]` 설명 섹션에 적습니다 지원되는 이렇습니다 가집니다 `p5Color` `p5Element` `p5Graphics` `p5Renderer` `p5Renderer2D` `p5Image` `p5Table` `p5TableRow` `p5XML` `p5Vector` `p5Font` `p5Geometry` `p5Matrix` `p5RendererGL` p5js에서 p5minjs에서는 기능이 프로세스 속도를 저하시키지 않도록 비활성화되어 검사 코드를 상당히 느리게 할 있습니다일부 최대 배 성능 테스트를 참조하십시오 [friendly error performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). 아래 한 줄의 코드로 p5disableFriendlyErrors true // 설정 작업 이렇게 하면 FES에서 저하를 일으키는 부분인자 확인 같은이 비활성화됩니다 성능에 영향을 주지 않는 부분파일 실패 오류나 전역에서 오버라이드 경고 등은 그대로 유지됩니다 알려진 제한사항 프로그램 늦춥니다 옵션에서 true`를 설정하여 축소 버전`p5minjs`에서는 기본 설정이 비활성입니다 FES에서는 오류가 정상으로 처리되는 상황이 발생할 경우는 보통 함수가 설계된 형태와 실제 방식이 일치하지 않을 생깁니다예시 그리기 원래 2D와 3D 설정에서 서로 바꿔 있도록 라인을 그리면 FES에 잡히지 않습니다 `line` 2D 문서에는 패턴이 허용되기 때문입니다 버전의 `_rendererisP3D` 같은 환경 변수를 확인하지 않는다는 의미이기도 const x3 undefined line0 `const` `var` 사용해 선언할 덮어 쓴 전역 변수만 감지할 `let`을 사용했다면 감지되지 `let`이 인스턴스화하는 방식 현재는 해결이 진행 보다 유형을 식별하고 일반화합니다 `bezierVertex` `quadraticVertex` - 필수 초기화하지 않음 `nf` `nfc` `nfp` `nfs` 숫자형 양수 체크 향후 색상 재도입합니다 직관적인 출력합니다 `validateParameters`에 스페인어 번역도 완료합니다 색맹 친화적이 되도록 색상을 정교한 아스키 코드는 언제나 환영입니다 잡습니다 브라우저가 콘솔로 던지는 잡아내면 매우 도움이 될 그것과 일치하는 주석을 볼 코드 조각은 windowconsole 메소드를 기능을 수정하는 새 감싼다 있지 않지만 잘 형식을 갖춘 제공할 있을 것이다 original original_functions log originallog warn originalwarn originalerror [log error]forEachfunctionfunc{ windowconsole[func] functionmsg 래퍼 함수에서 잡아낸 msg'로 무엇인가 처리한 호출하라 original_functions[func]applyoriginal arguments"},"배포 프로세스\n":{"relativeUrl":"/contribute/release_process","description":"## 접근법 * 우리는 `주부수` 버전 패턴을 따르는 유의적 관리 따릅니다 요구사항 Git nodejs NPM이 여러분의 시스템에 설치되어 있어야 합니다 NPM CLI에 로그인 되어 `npm whoami`에 로그인되어 있는지 확인합니다 높은 대역폭 다운로드/풀/푸쉬 할것이 많습니다 총 \\~190MB 예상 사용법 ```shell $ npm run release ``` 빌드 단계가 실행되며 프로세스를 마치려면 `np`에서 제공하는 프롬프트를 따라야합니다 단계에서는 grunt 태스크를 실행해 라이브러리의 zip 버전을 생성하고 bower에서 릴리즈 하고 웹사이트에 해당 레퍼런스를 실제로 일어나는 release`는 [`np`](https://www.npmjs.com/package/np/)를 실행하여 먼저 하위 만들어내는 `grunt release-p5`의 별칭입니다 `np`는 로컬 저장소를 체크하고 릴리즈를 생성하기 위해 설정을 준비하므로써 시작합니다 계속 진행하기 저장소에 커밋이 안된 변경사항이 있으면 안됩니다 `node_modules`를 재설치하고 test`로 테스트를 실행합니다 처음에 선택한 항목에 범프합니다 이전 실패하면 저장소는 release`를 실행하기 전 초기 단계로 돌아갑니다 업데이트된 넘버로 문서와 라이브러리를 빌드하기 `packagejson`안에 `prepublishOnly`에 언급된 태스크가 실행`grunt prerelease` 됩니다 패키지가 게시됩니다 NPM에 출시 `packagejson`에 `files`에 파일들만 태그들과 커밋들을 git remote에 푸쉬됩니다 초안 릴리즈는 수정할 수 있는 변경로그들과 githubcom에 생성됩니다 `lib` 폴더 안에현재 빈 예제가 포함되어 있음 Zip 파일 `p5zip`을 생성하며 위에서 생성한 GitHub Release 초안에 업로드 되어야 프로세스가 완료되면 `release/` 가리키는 창이 열리고 창에는 Github Release의 일부로 업로드해야 하는 모든 파일을 포함하고 있습니다 새로 된 Bower용 [p5.js-release](https://github.com/processing/p5.js-release/) 푸시합니다 참조를 [p5.js-website](https://github.com/processing/p5.js-website/)에 테스팅 대한 푸시 액세스 권한이 경우 release---preview`를 릴리스 간단하게 실행 할 단계를 실행하더라도 추적 파일이 변경되지 않으며 리모트에 푸시되지 않습니다 없는 `packagejson`의 `name` 필드를 네임스페이스 버전으로 편집해야합니다 예를 들면 평소처럼 전에 `@username/p5`을 입력하고 번경사항을 git에 커밋합니다 패키지된 네임스페이스에 패키지를 게시하지 않도록 선택하라는 메시지가 표시되면 온라인에는 아무 것도 게시되지 편집 한 release`로 릴리스의 전체 실행할 잇습니다 Bower 릴리스와 웹 사이트에 복제하고 푸시할 위치를 선택하려며 다음과 추가 인수를 지정 -- --bowerReleaser=username` **참고** `np` `620`에는 현재 패키지 이름으로 릴리스를 막는 [bug](https://github.com/sindresorhus/np/issues/508/)가 존재하며 이것을 테스트해야하는 `521`로 되돌릴 않으면 단계에서 실패합니다"},"스튜어드(Steward) 지침\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* p5js에 대한 기여를 관리하고 검토하는 방법에 대해 알아보세요 */} 방금 스튜어드steward로 참여하셨거나 p5js의 숙련된 유지관리자maintainer거나 사이 어딘가에 있으시거나 안내서에는 효과적으로 기여하는 데 도움이 되는 정보는 팁과 요령이 포함되어 있습니다 여기에 작성된 대부분의 내용은 달리 명시되지 않는 한 지침에 불과하므 여기서 보여지는 절차들은 여러분의 작업 흐름에 맞게 조정할 수 ## 목차 * [이슈Issues]/steward_guidelinesmd#issues [버그 보고]/steward_guidelinesmd#bug-report [기능 요청]/steward_guidelinesmd#feature-request 향상]/steward_guidelinesmd#feature-enhancement [토론Discussion]/steward_guidelinesmd#discussion [풀 리퀘스트Pull Requests]/steward_guidelinesmd#pull-requests [간단한 수정]/steward_guidelinesmd#simple-fix 수정]/steward_guidelinesmd#bug-fix [새로운 기능/기능 향상]/steward_guidelinesmd#new-feature-feature-enhancement [디펜다봇Dependabot]/steward_guidelinesmd#dependabot [빌드 과정]/steward_guidelinesmd#build-process [주요 빌드 작업]/steward_guidelinesmd#main-build-task [기타 작업]/steward_guidelinesmd#miscellaneous-tasks [배포 과정]/steward_guidelinesmd#release-process [팁과 요령]/steward_guidelinesmd#tips--tricks [회신 템플릿 Reply templates]/steward_guidelinesmd#reply-templates [깃허브 CLI]/steward_guidelinesmd#github-cli [알림 관리]/steward_guidelinesmd#managing-notifications *** 이슈Issues 우리는 소스 코드 기여가 이슈Issue에서 시작하는 것을 권장하며 이슈는 논의가 이루어지는 곳입니다 문제를 검토할 취해야 할 단계는 문제의 종류에 달라집니다 리포지토리repo는 다양한 유형의 더 잘 정리하고 문제 작성자가 문제에 정보를 제공하도록 권장하기 위해 이슈 템플릿(templates)](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/)을 사용합니다 첫 번째 종종 입력된 템플릿을 살펴보고 추가 정보가 필요한지 여부를 결정하는 것입니다 일부 필드가 입력되지 않았거나 잘못된 템플릿이 사용되었을 경우 ### 버그 보고 보고는 Found a bug 템플릿template을 사용해야 합니다 보고를 하기 위해서는 다음과 같은 과정이 일반적입니다 재현 템플릿의 목표는 검토자가 버그를 재현할 있도록 충분한 제공하는 보고된 버그가 리포지토리repo와 관련이 없는 p5js 웹사이트 접근 권한이 있다면 연관 리포지토리로 전송합니다 않으면 보고서가 위치할 곳에 답변을 직접 연결되는 링크와 남기고 이슈를 닫습니다 제공되는지 확인하고 제공되는 경우에 설명된 대로 재현을 시도하는 있는 특정 고치는 최선의 방법을 찾기 약간의 필요할 때로는 간단할 수도 있고 까다로울 사례별로 결정을 내릴 때는 [p5js 디자인 원칙]/design_principles/를 참조하세요 수정에 기여할 의향이 코멘트를 남기 이슈에 할당하여 수정을 승인합니다 담당자Assignee 우측에 톱니바퀴 버튼을 사용하세요 기여하기 원하지 가능한지 알아볼 댓글을 남깁니다 해결하려고 시도하거나 해결이 필요한 문제임을 나타내기 `help wanted` 라벨을 추가하여 수정이 표시합니다 템플릿template에 부족하다면 요청합니다 버전 브라우저 OS 테스트 환경이 환경과 또는 환경에서 없다는 의견을 추가하고 설정을 가진 사람에게 버그는 웹 에디터를 사용할 때만 발생하고 로컬에서 테스트할 발생하지 않습니다 [웹 에디터 리포지토리(repo)](https://github.com/processing/p5.js-web-editor/)로 리디렉션해야 나중에 재현이 가능해 2번로 다시 이동합니다 동작이 아니라 사용자가 보고서에 제공한 코드에서 발생한 문서화 구현 친근한 오류 시스템friendly error system을 개선하여 동일한 오류가 않도록 있는지 판단합니다 질문이 있으면 [포럼(forum)](https://discourse.processing.org/) [디스코드(Discord)](https://discord.com/invite/SHQ8dH25r9/) 리디렉션하고 변경사항이 없다면 종결close하세요 기능 요청 요청은 새로운 요청New Feature Request 기능을 요청하기 접근성 향상을 위한 노력의 일환으로 해당 분야에서 역사적으로 소외된 커뮤니티에서 접근성을 높이는 사례가 되어야 자세한 [이 곳]/access/에서 볼 요청에 향상Increasing Access 충분히 않은 작성자에게 기능이 높이는지 질문할 기능의 설명은 검토자를 포함한 커뮤니티의 구성원이 제공할 기준에 포함 평가할 프로젝트 범위와 [디자인 원칙]/design_principles/에 적합한가요 예를 들어 기본 도형을 추가하는 고려될 있지만 기반 IOT 프로토콜 고려 범위에서 벗어날 가능성이 높습니다 전반적으로 범위는 드물게 사용되는 기능으로 인한 과도한 팽창을 피하기 상대적으로 범위가 좁아야 범위에 맞지 애드온 라이브러리addon library로 만들도록 제안합니다 맞는지 불분명한 개념 증명 차원에서 library를 제안하는 것도 좋은 방법입니다 이는 사용자에게 제공하고 쓰임새와 중요성에 구체적인 예시를 제공하며 완전히 통합된 기능처럼 해결책이 완벽할 필요는 없습니다 적합하다고 판단될 내에 통합될 이전 버전과 호환성이 변경breaking changes의 원인이 될 있나요 기존 함수 변수와 충돌이 발생하나요 기존에 p5js로 일반적인 스케치와 충돌하요 위와 충돌을 일으킬 기능들은 변경으로 간주됩니다 배포](https://docs.npmjs.com/about-semantic-versioning/)가 변경을 만들지는 제안된 이미 간단한 순수 자바스크립트 코드나 기존의 사용하기 쉬운 라이브러리를 사용하여 만들어질 문자열 배열을 연결하기 `join[Hello world]`보다는 문법인 `[Hello world]join`가 우선시됩니다 요구 사항과 나머지 사항이 충족된 PR을 시작하기 전에 최소 2명의 스튜어드 유지관리자가 요청을 승인해야 기능에 PR 검토 과정은 아래에 설명되어 향상 향상Existing Enhancement 요청과 매우 비슷합니다 가끔 향상의 차이가 명확하지 않을 향상은 주로 다루지만 추가하도록 요청할 마찬가지로 경우에만 허용됩니다 [위 섹션](http://guidelines.md#feature-request)의 1번 항목을 참고해주세요 향상에 기준은 요청의 경우와 비슷하지만 잠재적으로 changes을 특히 주의해야 함수를 수정하는 모든 이전의 유효하고 문서화된 시그니처function signature 함수의 원형에 명시되는 매개변수 리스트가 방식으로 동작해야 PR이 시작되기 적어도 명의 유지관리자의 승인을 받아야 문서화되어 토론Discussion 토론Discussion을 가지고 있으며 것으로 통합하기 주제에 피드백을 모으는 데에 사용되어야 종류의 토론 대화가 끝나고 문제가 생성되면 종료될 이슈가 토론으로 열려 것들은 올바른 적용하고 없애야 버그에 포함되지 않았다면 요청해야 이가 열렸지만 기여와 없거나 깃허브 리포지토리repository/기여 과정/기여 커뮤니티와 포럼forum 디스코드Discord로 리디렉션하고고 닫아야 경우에는 눈에 토론인지 알 있게 표시하기 추가해야 풀 Requests 리포지토리repository에 기여는 리퀘스트pull request를 통해 이루어집니다 스튜어드와 유지관리자는 리포지토리에 푸시push 기여 시 똑같이 > 과정을 거치도록 권장합니다 같습니다 리퀘스트 템플릿은 곳](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md)에서 확인할 리퀘스트는 먼저 관련 열고 논의해야 [이슈 절차workflow]/steward_guidelinesmd#issues를 따른 뒤에 스튜어드나 검토해야 절차가 적용되지 유일한 경우는 오타 수정 뿐이며 열 필요가 없고 분야의 스튜어드가 아니더라도 병합merge 사람이 병합할 예외가 존재하지만 기여자들이 열도록 적용될지 모르겠다면 어쨌든 열어보세요 제시된 리퀘스트를 해결되지 원본 게시물post의 Resolves #OOOO를 Addresses #OOOO로 수정하여 병합 시에 자동으로 닫히지 않게끔 수정은 누구나 PR의 변경된 파일Files Changed 탭에서 자동 지속적 통합Continuous Integration CI 테스트를 통과하는지 확인하세요 [The files changed tab when viewing pull request on GitHub]src/content/contributor-docs/images/files-changedpng All checks have passed indicator GitHub highlighted above the merge button]src/content/contributor-docs/images/all-checks-passedpng 스튜어드에 검토되어야 하며 이상적으로는 이슈의 승인한 이를 수행해야 탭을 토론discussion에 되었는지 최초로 PR은 가능하고 적절하다면 테스트해야 CLI는 간소화하는 많은 아래의 요령]/steward_guidelinesmd#tips-tricks에 [ ] 원래의 해결해야 이슈에서 합의되지 동작을 변경해서는 안됩니다 성능에 큰 영향을 주지 않아야 접근성에 영향도 최신 표준 코딩을 수정사항은 자동화된 통과해야 하고 새 포함해야 변경 곳](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request)에 행에 줄별 주석line comments을 제안 블록suggestion block으로 사항을 제안할 있습니다\\ Suggest Change button while writing comment code in request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested change appearing within fences with suggestion tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed as diff]src/content/contributor-docs/images/suggestion-previewpng 여러 번 변경이 줄 주석single-line 추가하지 마세요 대신 곳](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/)에 절차에 주석multiple-line comments과 번의 요청으로 변경하세요 comments이 설명이나 토론을 것이라면 요청Request changes 답글Comment을 선택해 주세요\\ option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng 검토되고 필요하지 스튜어드는 댓글이 있든 없든 단계에서 승인Approve 옵션을 선택하여 승인Approved으로 표시할 그런 원한다면 유지관리자에게 검토를 병합하거나 병합을 기여자를 [README.md](http://readme.md/) 파일의 기여자 목록에 추가하려면 @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) 봇을 호출해야 각각의 유형은 `[contribution` `type]`에 전체 목록은 위 링크에서 [images/suggest-changepng]src/content/contributor-docs/images/suggest-changepng [images/suggested-value-changepng]src/content/contributor-docs/images/suggested-value-changepng [images/suggestion-previewpng]src/content/contributor-docs/images/suggestion-previewpng `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` `type]` 수정과 가지 주목해야 차이점이 병합merge되기 두 검토와 디펜다봇Dependabot 보통 리포지토리의 관리자admins에게만 표시되므로 여러분에게 해당하지 않는다면 섹션을 건너뛰어 주세요 [유의적 버전(semver)](https://semver.org/) 패치patch 업데이트면서 통과한 Dependabot 병합merge될 디펜다봇 유의적 버전의 경미한 다루는 테스트만 통과하면 병합될 빠르게 업데이트된 종속성dependency의 기록changelog을 확인하는 것이 좋습니다 주요 과정이나 검토자reviewer는 가능하면 버전부터 대상 버전까지의 기록을 검토하고 로컬 테스트하여 정상적으로 작동하는지 확인합니다 종속성의 호환성 대비에 제출합니다 Nodejs는 오래된 버전에 공식 지원을 중단하기 꽤나 종속성이 충돌합니다 종속성 API 것은 아닙니다 과정 섹션에서는 설정이나 명령어는 다루지 않고 뒤에서 일이 일어나고 자세히 설명합니다 Gruntfilejs 파일에는 정의들이 라이브러리와 문서를 구축하는 사용된 도구 중에는 Grunt Browserify YUIDoc ESLint Babel Uglify Mocha가 이게 다는 `default` 작업으로 거기서부터 거꾸로 작업하는 우리에게 도움될 시점에는 설명을 따라가며 Gruntfilejs를 열어보는 ``` gruntregisterTask'default' ['lint' test'] `grunt` npm 스크립트 `npm test`를 열었을 `lint`와 `test`로 구성된 작업이 실행됩니다 #### `lint` gruntregisterTask'lint' ['lintsource' lintsamples'] 작업은 하위 구성됩니다 `lintsource` `lintsamples` 는 ESLint를 스크립트를 `eslintbuild` `eslintsource` `eslinttest`의 세 나뉩니다 `yuidocprod` `cleanreference` `minjson`로 `yui` 작업을 실행합니다 코드로부터 추출하여 JSON 문서로 변환합니다 사용되지 파일을 제거하며 생성된 `dataminjson` 최소화합니다 다음은 `eslint-samplessource`로 [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs에 정의되어 사용자 작성 작업입니다 문서 예제 코드가 부분와 코딩 규칙을 따르는지 확인하기 실행할 예제를 린트lint하기 빌드해야 `yui`는 `test` ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` 살펴보겠습니다 gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest `browserify`로 작업들은 [/tasks/build/browserifyjs]/tasks/build/browserifyjs에 비슷한 단계로 되어 파일에서 하나로 빌드하는 단계입니다 `browserify`는 p5js를 반면 `browserifymin`는 최소화할 중간 파일들을 빌드합니다 `browserify`와 `browserifymin`의 차이점은 `browserifymin`에는 FES가 작동하는 데이터가 있지 않다는 `uglify`는 `browserifymin` 출력 가져와 최종적으로 p5minjs로 단계의 구성은 메인 Gruntfilejs에 `browserifytest`는 [Istanbul](https://istanbul.js.org/)을 p5js와 버전으로 빌드됩니다 단 커버리지test coverage 추가된 코드를 `fsreadFileSync` nodejs 전용 코드의 사용은 `brfs-babel`을 실제 내용으로 대체됩니다 WebGL 별도의 파일로 셰이더shader 삽입inline하기 사용됩니다 node\\_modules의 종속성dependency을 Babel을 packagejson에서 정의된 Browserslist 사항에 맞춰 트랜스파일transpile하고 ES6 import문import statement을 browserify가 이해하는 CommonJS require로 호환성에 걱정 없이 이상에서 구문syntax을 됩니다 번들링bundling 후 번들링된 파일에 기록되기 전까지 코드는 `pretty-fast`를 전달됩니다 최종 포맷이 일관되도록 정리되어야 원하는 읽고 검사할 있을 예상됩니다 세부 단계가 나와 위에 링크된 browserify 정의 확인하여 내용을 connectserver 단계에서는 파일과 빌드된 호스팅하는 서버를 가동하여 크롬Chrome에서 mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs에 Puppeteer를 사용해 원격 제어가 가능한 크롬의 헤드리스 버전을 가동하고 `/test` 폴더에 HTML 관련된 여기에는 라이브러리의 축소되지 축소된 단위 테스트unit test 모음에 테스트하는 레퍼런스 mochaTest 크롬 nodejs에서 실행되고 중 일부만 테스트한다는 점에서 `mochaChrome`과 기능은 필요하므로 세트는 테스트에 확장해야 마지막으로 빌드와 테스트가 완료되면 `mochaChrome`이 라이브러리 커버리지 보고서를 수집하고 범위 데이터를 콘솔에 출력합니다 커버리지는 추가적인 데이터 포인트를 모니터링하고 확보하는 100%를 목표로 하지는 여기까지 기본적인 환경 구성configuration 다루어 보았습니다 `npx grunt [step]`으로 위에서 다루지는 않았지만 상황에서 유용할 작업도 yuidev 빌드를 실행한 가동합니다 서버는 [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/)와 기능적으로 유사한 페이지를 제공합니다 변경점을 문서와 `yuidev`는 인라인 문서의 유용한데 저장소repository에서 저장소로 이동할 필요도 생길 때마다 웹사이트를 빌드할 없기 때문입니다 브라우저에서 단순화된 변경사항을 미리 보면 이렇게 하면 웹사이트에 올바르게 표시되는지 해당된다는 알아두세요 스타일 레이아웃 페이지 자체에 변경사항은 저장소에서 생성 watch watchmain watchquick 워치Watch 감시하고 실행하여 레퍼런스나 범위의 차이를 제외하면 수행합니다 `watch` 감지할 실행하는 것처럼 보일 거예요 `watchmain` 실행하지만 감지해도 레퍼런스를 빌드하지는 `watchquick` 감지된 중인 내용에 가장 효율적인 워치watch 방식을 선택한다면 변경사항마다 수동으로 빌드하지 않아도 배포 [release\\_processmd]/release_process/를 요령 때때로 검토가 이슈와 수가 너무 많아질 보다 용이한 가지를 알려드립니다 회신 양식 Template 리퀘스트에 작성을 돕는 깃허브GitHub 기능인 [저장된 회신Saved Replies)](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/)이 흐름workflow 일부는 동일하거나 답변포럼으로 질문을 리디렉션하거나 승인 등으로 PR에 응답해야 있는데 **저장된 회신**을 사용하면 작업의 효율이 올라갈 유지관리자maintainer가 사용하는 회신**의 일부입니다 사용하거나 만들어 보세요 ##### 종결Closing 없음 We're not able to reproduce this but please feel free reopen if you can provide sample that demonstrates issue Thanks 이것을 수는 없지만 보여줄 샘플 열어주세요 감사합니다 스니펫 필요 I'm closing for organizational purposes Please snippet illustrates 조직 운영 관리 종결합니다 설명하는 스니펫을 포럼 사용 The issues here are good place bugs and library itself For questions about your own tests or following tutorials [forum](https://discourse.processing.org/) is best post 자체의 버그나 올리는 튜토리얼에 것에 싶다면 [포럼](https://discourse.processing.org/)만한 곳이 없을 거에요 GSOC discuss proposals our [forum](https://discourse.processing.org/c/summer-of-code/). 제안을 논의하고 우리의 [포럼](https://discourse.processing.org/c/summer-of-code/)만한 없답니다 seeing lot of interest feature we don't clear explanation how it [expands access]/access/ so I will close now If an access statement be added welcome 기능으로부터 이점을 찾을 [접근성을 확장]/access/하는지에 명확한 설명이 없으므로 종결하겠습니다 추가할 되면 언제든지 We do see further more detailed Thank 이슈로 인해 [접근성이 확장]/access/되는지에 애드온Addon 부가 think function beyond scope try keep minimal possible could great starting point addon See docs create [https://github.com/processing/p5.js/blob/main/contributor\\_docs/creating\\_libraries.md](../creating_libraries/) 범위를 벗어나는 같지만 최소한의 크기를 유지하고 싶어요 만드는 시작점이 애드온을 생성하는 알고 확인해 필요함 As reminder need opened before requests tagged This necessary tracking development keeping discussion 참고로 게시하고 태그를 지정하기 게시해야 개발을 추적하고 명확하게 유지하는 필요해요 해결 You go ahead fix 계속 해결해도 Looks 괜찮아 보이는데요 CLI 복잡한 여러분이 git 명령어로 가져오면 어려울 다행히도 CLI](https://cli.github.com/)가 과정에서 도움을 있겠군요 CLI를 설치하고 로그인하고 `gh pr checkout [pull_request_id]` 명령어를 실행하면 가능하며 포크 가져오기 브랜치 체크아웃 수행됩니다 main 브랜치로 돌아가는 `git main`으로 브랜치를 전환하는 것과 방문하지 않고도 CLI에서 남길 CLI에는 수많은 명령어가 사용하기에 도구입니다 알림 이슈나 **이슈** **풀 리퀘스트** 저장소 이름 반대편 상단에 눈 아이콘이 **보기Watch** 클릭하여 저장소를 [Cropped screenshot top right corner repository page showing series buttons center from left Sponsor Watch Fork Starred]src/content/contributor-docs/images/github-repo-metricspng 보기를 활성화하면 핸들에 언급 구독한 활동과 이벤트가 페이지](https://github.com/notifications/)에 알림으로 전송되며 이메일의 받은 편지함과 비슷하게 *읽음* *삭제됨* 표시될 보기가 활성화된 저장소에 이메일을 GitHub로부터 수신할 설정 페이지](https://github.com/settings/notifications/)에서 아예 구독 취소하는 방식에 맞는 선택하는 여러분은 사안을 찾아내야 하는 귀찮음과 깃허브의 끝없는 압박 사이의 선택지에 서 균형 잡힌 선택이 필요한데 처음이라면 **이슈**와 리퀘스트**에 **보기**를 활성화하고 참여 @멘션 정의에 이메일만 수신하도록 설정하는 추천합니다"},"단위 테스팅\n":{"relativeUrl":"/contribute/unit_testing","description":"단위 테스트를 사용하여 코드베이스의 개별 컴포넌트가 예상대로 작동하는지 확인합니다 ## 참조 비슷한 기술 스택과 [빠르고 좋은 테스팅 소개](https://codeburst.io/javascript-unit-testing-using-mocha-and-chai-1d97d9f18e71/)가 있고 [좀 더 깊이 살펴 볼수 있는 자료](https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d/)가 있습니다 모든 테스트 실행하기 루트 레파지토리에서 커맨드를 터미널에서 사용해주세요 ```shellsession npm test ``` 커버리지 테스가 실행될때 마다 보고서가 생성됩니다 보고서에는 스위트가 소스 코드 파일을 테스트해 보았는지 자세히 설명하여 많은 코드베이스를 테스트했는지 효과적으로 알려줍니다 요약본은 실행하고 난 뒤에 출력되며 상세한 보고서는 웹브라우저에나 `coverage/indexhtml`에서 볼 수 맥 커맨드라인에서 `open coverage/indexhtml`를 실행하면 디폴트 브라우저에 해당 페이지가 열립니다 커맨드 `npx nyc report --reporter=text`를 사용하고 후 리포트를 ### 단윌 스위트 실행 단일 테스트나 그룹 위해 `js` 파일에 `suite` `test`에 `only`를 붙이고 위에 명령어를 사용해 실행합니다 **`only`를 커밋하지 않도록 주의해주세요**저희는 항상 CI가 *모든* 실행하기를 원합니다 #### 예제 p5ColorConversion 스위트를 `test/unit/color/color_lightjs`의 첫 행을 다음과 변경합니다 ```js suiteonly'color/p5ColorConversion' function { 이제 `npm test`를 사용하면 `function`내에서만 테스트가 실행됩니다 건너뛰기 기능은 `only` 반대입니다 `skip`을 추가하면서 Mocha가 케이스들을 무시하도록 할 있으며 건너뛴 항목은 보류 중으로 표시되고 이대로 보고됩니다 인프라 프레임워크 구조화하고 [mocha](https://mochajs.org)를 사용합니다 [chai의 `assert` `expect`)](https://www.chaijs.com/api/assert/)를 코드의 작동 방식에 대한 문장을 작성합니다 환경 브라우저에서 실행되는 `test/unit` 폴더 아래 모음과 Nodejs에서 `test/node` 컬렉션이 브라우저 테스트는 [headless Chrome](https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai/)에서 실행할 창이 나타나지 않습니다 설정 헬퍼 함수 현재 테스트에서만 사용할 있습니다대부분의 위치 * `test/js/mocha_setupjs` mocha의 몇가지 옵션을 `test/js/chai_helpersjs` chai `chaiassert` 도움되는 추가 `test/js/p5_helpersjs` p5 스케치의 도와주는 Nodejs를 위한 설정은 `test/mochaopts`에서 수행됩니다 지속적인 통합 p5js 풀리퀘스트를 오픈하면 자동으로 [테스트가 실행]/ttps//githubcom/processing/p5js/actions/ 됩니다 이를 통해 기여자의 추가적인 작업 없이 풀 리퀘스트 대해 통과했는지 재확인할 [Codecov](https://codecov.io/github/processing/p5.js)에 리포트가 업로드 단위테스트를 추가하고 싶다면 컴포넌트에 파일이 이미 존재하는지 확인해 보세요 `src/`에서 주어진 `test/unit`과 같은 경로에 있습니다예를 들면 `src/color/p5Colorjs`의 `test/unit/color/p5Colorjs`안에 찾을 없다면 아마 없기 때문일 것이기에 아직 😉 컨벤션에 새로운 생성합니다 작성하고 모듈이 동작하기위해 브라우저가 필요하다면 `test/unit`안에 넣고 싶지만 않다면 아래에 추가할 **의심이 든다면 `test/unit`에 추가하면 됩니다추후 필요한 경우 이동하는 편이 매우 쉽습니다** 모듈을 추가해야 `test/unit/specjs`안 `spec`배열의 두어야 합니다 부분은 실행에 로드되어 있는지 `test/testhtml` 보면서 테스트들을 확인 작성 단위를 선택하세요 메소드 또는 변수 예제로 `p5prototypeisKeyPressed`를 봅시다 작성하기 전에 메소드의 예상되는 동작을 이해할 필요가 **예상되는 동작** boolean 시스템 변수는 키를 누르는 참이고 누르지 않으면 거짓입니다 동작에 다양한 생각할 잇습니다 가능한 케이스는 같습니다 변수가 boolean이다 누르면 참이어야 한다 키알파벳 키 숫자 특수문자 등를 누르더라도 여러 거짓이어야 생각나는 것이 있다면 계속해서 추가하세요 생성하고 작성할 구성하기 mocha를 것입니다 suite'p5prototypekeyIsPressed' test'keyIsPressed is a boolean' //이곳에서 } true on key press' false when no keys are pressed' 구성했지만 작성하지 않았습니다 chai의 assert를 다음을 고려해 assertisBooleanmyp5keyIsPressed //해당 값이 boolean인지 유사하게 참인지 확인하기 `assertstrictEqualmyp5keyIsPressed true` 사용 assert에 [여기](https://www.chaijs.com/api/assert/)에서 좀더 했으므로 메소드가 확인해보세요 동일한 이슈를 원한다면 문제를 해결"},"WebGL 기여 안내\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* p5js WebGL 모드에서 소스 코드 작업을 시작하는 방법 */} 여러분이 페이지를 읽고 있다면 아마도 모드에서의 작업에 도움을 주고 싶으신 것이겠죠 여러분의 기여에 다시 한 번 감사의 말씀을 드립니다 페이지에서는 기여가 구성되었는지를 설명하고 변경사항을 만들기 위한 가지 팁을 제공합니다 ## 참고 자료 * p5js의 모드가 기반으로 하고 있는 2D 모드와 다른지 이해하려면 [p5js 모드 아키텍쳐]/webgl_mode_architecture/를 읽어보세요 셰이더 선 등에 대한 구현 세부 사항에 가치 자료가 됩니다 문제 생성 코드베이스codebase 원천 모음 설정 변경 사항 테스트에 정보가 필요하다면 [기여자 가이드라인](https://p5js.org/contributor-docs/#/./contributor_guidelines/)을 브라우저의 API에 대해 알아두면 도움이 될 수 있는데 [WebGL fundamentals](https://webglfundamentals.org/)에서 많은 핵심 렌더링 개념에 검토할 있습니다 [The Book of Shaders](https://thebookofshaders.com/)에 셰이더에서 사용되는 기술들이 설명되어 계획 [깃허브GitHub 프로젝트](https://github.com/orgs/processing/projects/5/)에 게시된 이슈issue를 정리하고 다음과 같은 유형으로 나누었습니다 **시스템 차원 변경사항 System-level changes** 란 코드에 광범위한 영향을 미치는 장기적 목표입니다 이것은 실행에 옮기기 전 수많은 논의와 계획을 필요로 합니다 **아직 해결책이 없는 버그 Bugs with no solution yet** 원인을 줄이기 약간의 디버깅이 필요한 신고입니다 아직 해결될 준비가 되어 있지 않으며 원인이 발견되면 이를 고치기 최고의 해결책을 논의할 있게 **해결책이 있지만 PR이 solutions but PR** 는 해결할 지 결정되었으며 누구나 자유롭게 코드를 작성할 **경미한 개선 Minor enhancements** 이란 현재의 아키텍쳐 내에서 확실한 위치를 가지는 새로운 기능에 이슈이며 맞출 것인지에 논의를 하지 않아도 기능이 가치가 있다고 동의하면 **2D 기능 features** p5js에는 모드에는 기능입니다 기능은 모드의 동작과 일치하는 결과물이 구현될 것으로 예상됩니다 최적의 구현에 필요가 이에 사용자 요구 사항은 명확합니다 **모든 환경에서 작동하지 않는 Features that don't work in all contexts ** 모드에 존재하지만 모드를 사용할 모든 방식으로 작동하지는 예를 들어 일부 메소드는 좌표계와 3D 좌표계에서 작동하지만 사용하면 중단될 수도 보통은 시작할 **기능 요청 Feature requests** 요청을 말합니다 요청이 지침에 맞는 것인지 확인하기 위해서는 논의가 필요합니다 **문서화 Documentation** 이슈는 변경이 필요하지 않지만 대신 동작을 위해 더 잘 문서화하는 것이 이슈입니다 어디에 넣어야 하나요 WebGL과 관련된 것은 `src/webgl` 하위 디렉토리에 해당 디렉토리 최상위 조명을 설정하는 명령어는 `lightingjs`로 재질을 `materialsjs`로 주제 영역에 여러 파일로 나뉘었습니다 지향 클래스를 구현할 클래스당 만드려고 노력하고 파일들은 때때로 개의 내부 보조 기능utility 가질 `p5Framebufferjs`는 `p5Framebuffer` 포함하고 추가로 메인 클래스의 프레임버퍼 관련 클래스로 구성됩니다 파일에는 추가적인 클래스도 들어갈 `p5RendererGL`은 처리하는 대형 클래스입니다 하나의 클래스 파일이 아닌 영역인지에 `p5RendererGL`을 분할한 파일과 파일에 무엇이 있는지는 같습니다 #### `p5RendererGLjs` 초기화 `p5RendererGLImmediatejs` **즉시 immediate mode** 드로잉`beginShape`나 `endShape`와 보관 재사용되지 않을 모양과 `p5RendererGLRetainedjs` **보류 retained 드로잉`sphere`와 재사용을 저장된 `materialjs` 혼합 관리 `3d_primitivesjs` `triangle`과 도형을 그리는 함수 함수들은 도형의 기하학적 구조를 정의합니다 그런 렌더링은 또는 `p5RendererGLImmediatejs`에서 발생하며 형상 입력을 일반 모양으로 취급합니다 `Textjs` 글자 렌더링을 테스트 ### 일관성 함수를 방법은 가지가 것을 수동으로 확인하는 어려우므로 가능한 곳에 단위 테스트unit test를 추가합니다 그래야 변경점이 생겨도 테스트를 통과한다면 아무 문제가 발생되지 않았다고 확신할 있기 때문입니다 새 추가할 모드에서도 작동하는 경우 일관성을 중 하나는 픽셀 두 동일한지를 것입니다 다음은 테스트의 예시 하나입니다 ```js test'coplanar strokes match 2D' function { const getColors = functionmode myp5createCanvas20 mode myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER if === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` 안티앨리어싱계단 현상 방지 기술 antialiasing을 끌 없고 안티앨리어싱은 종종 다르기 항상 코드가 않습니다 x축 y축 상의 직선에 대해서는 작동합니다 전용이라면 결과물을 비교하기보다는 픽셀을 확인해서 색상이 예상한 색상인지 경우가 많습니다 언젠가는 픽셀이 예상 결과물의 전체 이미지 스냅샷을 비교하는 보다 강력한 시스템으로 전환할 있겠지만 현재로서는 색상을 예시가 test'color interpolation' renderer myp5createCanvas256 // upper color lower expected center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] 성능 p5js가 가장 걱정하는 부분은 아니지만 성능을 크게 저하하지 않도록 보통 변경사항이 적용된 것과 적용되지 않은 스케치를 생성해서 이루어지고 프레임 속도를 비교합니다 측정에 조언을 드리자면 스케치 상단에서 `p5disableFriendlyErrors true`로 친절한 오류를 비활성화해 보세요 오류 메시지가 `p5minjs`를 테스트해보세요 안정적인 명확하게 파악하기 평균 표시해 let frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 draw rate frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' 파이프라인의 부분에 스트레스를 주기 해야 하는 가지의 매우 복잡한 모양 대용량의 모델이나 긴 곡선 수의 단순한 for 반복문에서 호출되는 `line`"},"p5.js WEBGL 모드 아키텍쳐\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"문서는 p5js 기여자 메인테이너 이해 관계자를 위한 p5js의 WEBGL 모드의 구조를 설명합니다 스케치에서 3D 그래픽을 사용하는 데 관심이 있다면 대신에 [튜토리얼 보기](https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5/)를 참조해주세요 ## 구조 객체에 대한 개요 아키텍처의 핵심 객체는 p5RendererGL p5Shader p5Texture p5Geometry입니다 p5RendererGL의 단일 인스턴스는 자체 p5Shaders p5Textures p5Geometry를 관리하며 p5Geometry—a 목표는 WebGL을 사용하여 오프스크린 렌더링을 허용하는 것이지만 아직 테스트되지 않았습니다 쉐이더와 텍스쳐는 렌더러를 통한 특정 GL 컨텍스트와 관련이 있습니다 ### WEBGL/3D 모드 용 렌더러입니다 p5Renderer에서 파생되었으며 2D 모드에서 사용할 수 없는 추가 기능 예를 들명 `box` `cone` 쉐이더의 사용 가속 텍스처 렌더링 조명에 기능을 제공합니다 * 쉐이더p5Shader 객체 텍스처p5Texture 객체를 관리 생성 캐쉬합니다 쉐이더에서 속성 배열로 도형의 좌표를 준비합니다 획 채우기 텍스쳐 다양한 조명 메서드가 호출 될 올바른 쉐이더를 선택한 해당 적절한 정형을 데이터 유지 사용되는 유형의 조명과 파라미터의 개수입니다 begin/endShape로 생성된 모양은 고정 에서3D 기본 지오메트리를 캐시하며 그릴 때마다 동적으로 생성되어 즉시모드에서 GL에 푸시됩니다 렌더러는 현재 그리기 조건에 적합한 p5Shader를 선택하는 것을 관리합니다 p5Shader클래스는 프로그램의 정형과 속성에 액세스를 vertex 프래그먼트 쉐이더 컴포넌트를 컴파일하고 연결합니다 정형에 액세스하고 설정하기위한 API를 쉐이더가 모양을 하기 전에 필요한 텍스처를 바인딩합니다 렌더링에 bindShader 메서드를 제공하고 그린 후에는 unbindShader 섹션에서 설명 된 것처럼 4개의 `p5Image``p5MediaElement``p5Element` 또는 `ImageData`를 바탕으로 텍스처의 상태를 유형에 이미지 처리를 내부적으로 처리하기때문에 p5Renderer 구현은 다룰때 메서드에서 특별한 예외를 만들 필요가 없습니다 데이터가 변경되었는지 여부를 잘 추측하면서 모든 프레임을 조건부로 업데이트합니다 성능을 높이기 위해 변경 사항이 경우 업로드하지 않습니다 p5Geometry 객체의 캐시에 객체로 저장됩니다 그려진 모양과 매개 변수를 기반으로 문자열을 매핑합니다 `box70 20`로 만든 상자의 지오메트리는 `'box|70|80|90|10|20'` 첫번째 단계에서 보유하고 있는 함수를 호출해 만들고 앞서 언급 한 문자열 ID를 지오메트리 해시에 저장합니다 추후 해시안에서 찾아 호출하고 찾았을 새 만드는 대신 기존 참조하여 사용합니다 요소에 꼭지점 법선 면 선 세트에 법선을 계산하는 방법을 모드로 속성은 렌더러의 저장되고 드로잉 컨텍스트에 그리는데 후 폐기됩니다 고정된 원형에 반면 모드는 모양에 사용됩니다 | 함수 ------------ ----------------- plane bezier box curve sphere line cylinder beginShape cone ellipsoid endShape torus point triangle curveVertex arc bezierVertex quadraticVertex ellipse rect quad text 필요에 배열을 텍스처는 `texture` 메서드와 비디오용으로 생성되거나 커스텀 쉐이더에 제공되는 정형으로 생성됩니다 렌더러에 텍스쳐가 먼저 주어진 이미지/비디오에 텍스처가 생성되었는지 확인한 텍스쳐를 찾을 경우에만 새로운 유형 #### 색상 색상에 평평한 음영을 쉐이더조명 텍스처용 다음을 `ambientLight` `directionalLight` `pointLight` `spotLight` `specularColor`에 설정된 변수 `ambientMaterial` `emissiveMaterial` `specularMaterial`에 재질 `texture`로 설정 일반 쉐이더는 `normalMaterial`이 중일 설정됩니다 표면의 정규 벡터를 색상을 결정합니다 매개변수 표준 모델 뷰 카메라 정형 Parameter Line Shader TexLight Color Normal Point --------------------------------- ----------- --------------- ------------- `uniform mat4 uModelViewMatrix` x uProjectionMatrix` vec4 uViewPort` uPerspective` ------------------------------ `attribute vec3 aPosition` aNormal` vec2 aTexCoord` mat3 uNormalMatrix` aDirection` float uStrokeWeight` uMaterialColor` aVertexColor` --------------------------------------------- int uAmbientLightCount` uDirectionalLightCount` uPointLightCount` uSpotLightCount` uAmbientColor[8]` uLightingDirection[8]` uDirectionalDiffuseColors[8]` uDirectionalSpecularColors[8]` uPointLightLocation[8]` uPointLightDiffuseColors[8]` uPointLightSpecularColors[8]` uSpotLightAngle[8]` uSpotLightConc[8]` uSpotLightDiffuseColors[8]` uSpotLightSpecularColors[8]` uSpotLightLocation[8]` uSpotLightDirection[8]` bool uSpecular` uEmissive` uShininess` uUseLighting` uConstantAttenuation` uLinearAttenuation` uQuadraticAttenuation` ----------------------------- sampler2D uSampler` isTexture` ---------------------------- uResolution` uPointSize` ----------------------------------- `varying vVertexNormal` vVertTexCoord` vLightWeighting` highp vColor` vStrokeWeight` 단계 커밍 쑨"}},"examples":{"기본 조형":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"프로그램은 기본 도형의 함수인 square rect ellipse circle arc line triangle and quad 사용을 보여주고 있습니다"},"색상":{"relativeUrl":"/examples/shapes-and-color-color","description":"색상을 추가하여 기본 조형 예제를 확장해 봅시다 background는 캔버스를 하나의 색상으로 채우고 stroke는 그려지는 윤곽선의 정하며 fill은 도형 내부의 정합니다 noStroke와 noFill은 색상과 채우기 없앨 수 있습니다 색상은 다양한 방법으로 표현될 있으며 예제는 가지의 옵션을 보여주고"},"윤곽선 그리기":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"마우스를 클릭하고 드래그하여 윤곽선을 그려봅시다 예제는 가지 내장된 변수의 사용을 보여줍니다 mouseX와 mouseY는 현재 마우스 위치 정보를 가지며 이전 위치는 pmouseX와 pmouseY를 이용해 가져올 수 있습니다 * colorMode에서 HSB색조-채도-밝기 방식을 사용하여 첫번째 변수가 색조를 설정하는 것도"},"이벤트가 있는 애니메이션":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"예제는 loop와 noLoop를 사용하여 애니메이션을 일시정지하고 재개하는 방법을 보여줍니다 마우스를 클릭하면 애니메이션 반복이 전환됩니다 정지되면 사용자는 아무 키나 눌러 한 프레임을 넘길 수 있습니다 참고 키를 누르는 이벤트가 제대로 전달되기 위해 캔버스에 포커스를 두려면 캔버스를 클릭해야 합니다 하나의 넘기기 위해서는 redraw를 호출할 있는데 draw 함수가 번 호출됩니다"},"모바일 기기의 움직임":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved 함수는 스케치를 표시하는 모바일 기기가 움직일 실행됩니다 예제에서 accelerationX accelerationY accelerationZ 값은 원의 위치와 크기를 정하고 있습니다 이것은 기기에서만 작동합니다"},"조건식":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"if와 else문은 특정 조건이 참일 때만 코드 블록이 실행되도록 합니다 예제는 마우스를 누른 상태에서만 애니메이션이 59번 줄의 if문 이렇게 동작할 수 있습니다 else문에 대한 자세한 내용은 p5 레퍼런스나 MDN에서 읽을 비교 연산자는 두 값을 비교하여 조건식을 형성하는 데 도움을 줍니다 예제에서는 69번 if문에 원의 색조가 이상일 0으로 재설정됩니다 연산자에 논리 결합할 있게 &&는 모든 조건식이 참인지를 확인합니다 예제에서 원은 캔버스의 수평 중심으로 향할 검은색으로 채워지고 않으면 흰색으로 채워집니다 이것은 45번 때문인데 명령문은 \bx좌표가 이하인지를 확인하고 ||는 적어도 하나의 75번 원이 왼쪽이나 오른쪽 가장자리에 도달할 속도를 만듭니다"},"단어":{"relativeUrl":"/examples/imported-media-words","description":"text 함수는 캔버스에 글자를 삽입하는 데 사용됩니다 loadFont fontSize 함수를 사용하여 글꼴 글자 크기를 변경할 수 있습니다 textAlign 왼쪽 가운데 또는 오른쪽으로 정렬할 있으며 도형에서와 fill을 글자에 색상을 입힐"},"이미지 데이터 복사":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy 메서드를 사용하면 커서가 드래그되는 곳마다 흑백 이미지 위에 색상이 있는 이미지를 복사하여 이미지에 색상을 입히는 것처럼 보이게 할 수 있습니다"},"알파 마스크":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask 메서드를 사용하면 이미지의 마스크를 만들어 부분에서 투명도를 지정할 수 있습니다 예제를 로컬에서 실행하려면 두 개의 이미지 파일과 실행 중인 로컬 서버가 필요합니다"},"이미지 투명도":{"relativeUrl":"/examples/imported-media-image-transparency","description":"프로그램은 tint 함수로 이미지의 알파 값을 수정하여 한 이미지를 이미지 위에 덮어씌웁니다 위치를 변경하려면 캔버스를 가로질러 커서를 좌우로 이동합니다 예제를 로컬에서 실행하려면 파일과 실행 중인 로컬 서버가 필요합니다"},"오디오 플레이어":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio는 오디오 플레이어를 생성합니다 예제는 플레이어의 컨트롤을 표시하고 속도를 조정합니다 재생 속도는 마우스가 창의 왼쪽 가장자리에 있을 보통이고 오른쪽으로 움직일수록 더 빨라집니다 플레이어와 같은 미디어 요소 사용에 대한 자세한 정보는 p5MediaElement 레퍼런스 페이지를 확인하세요 파일은 Josef Pres의 피아노 루프로 자유 이용 저작물입니다"},"비디오 플레이어":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas와 createVideo 함수를 사용하면 캔버스에 비디오를 내장하지 않고도 DOM에 업로드할 수 있습니다 캔버스 요소에 내장하려는 경우 Video Canvas 예제를 확인해 보세요"},"캔버스에서의 비디오":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo와 image 함수를 사용하면 비디오를 캔버스에 업로드할 수 있습니다 비디오 캡처는 생성자를 통해 전달될 있으므로 filter 메서드를 사용하여 캡처에 필터를 추가할 예제를 로컬에서 실행하려면 실행 중인 로컬 서버가 필요합니다 캔버스 내에 내장하지 않고 구축하려면 Video 확인해 보세요"},"비디오 캡처":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture와 image 함수를 사용하면 장치의 비디오 캡처를 가져와 캔버스에 그릴 수 있습니다 캡처는 생성자를 통해 전달될 있으므로 filter 메서드를 사용하여 캡처에 필터를 추가할 비디오를 업로드하거나 발표하거나 스타일을 지정하기 위한 다양한 전략을 보려면 Video와 Video Canvas를 확인해 보세요"},"이미지 드롭":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop은 p5js 요소 메서드로 파일이 요소에 로드될 때마다 콜백을 등록합니다 업로드된 파일은 p5File로 만들어집니다 drop 사용하여 파일 유형을 확인한 유형에 대응하는 조건문을 작성할 수 있습니다"},"입력칸과 버튼":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton 함수를 사용하여 글자 입력칸을 통해 제출된 글자를 가져와 캔버스에 표시할 수 있습니다"},"폼 요소":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"문서 객체 모델 DOM은 웹 페이지의 결과로 나오는 구조를 나타냅니다 createInput createSelect createRadio와 같은 p5js의 폼 요소를 사용하여 [드롭다운] 메뉴 선택 입력칸 또는 라디오 버튼을 통해 제출된 정보를 갖는 다양한 방법을 구축하고 기반으로 DOM을 업데이트할 수 있습니다"},"이동(Translate)":{"relativeUrl":"/examples/transformation-translate","description":"translate 함수는 좌표계의 원점을 지정된 위치로 이동합니다 push와 pop 좌표계나 채우기 색상과 같은 드로잉 설정을 저장 복원합니다 예제에서는 도형직사각형이나 원을 좌표계에서 있습니다"},"회전(Rotate)":{"relativeUrl":"/examples/transformation-rotate","description":"rotate 함수는 현재 원점을 중심으로 좌표계를 회전합니다 기본적으로 원점은 캔버스의 왼쪽 위 모서리라는 사실을 알아두세요 가운데를 회전하려면 먼저 이동한 새 회전해야 합니다 push와 pop 저장 복원합니다"},"크기(Scale)":{"relativeUrl":"/examples/transformation-scale","description":"scale 함수는 지정된 인수만큼 현재 좌표계의 크기를 조정Scaling합니다 push와 pop 좌표계를 저장 복원합니다 예제에서는 세 가지의 서로 크기 조정 인수를 사용해 크기가 200인 정사각형을 원점에 있습니다"},"선형 보간법":{"relativeUrl":"/examples/calculating-values-interpolate","description":"보간법 두 개의 값 사이의 값을 계산합니다 예를 들어 숫자 5는 0과 중간 지점입니다 다양한 유형의 보간법은 사이에서 변화율을 사용합니다 선형 줄여서 lerp는 일정한 lerp 함수는 사이를 선형으로 보간합니다 화면을 가로질러 마우스를 움직이면 기호가 따라옵니다 애니메이션의 프레임을 그리는 타원은 현재 위치에서 커서의 위치를 향해 거리의 일부만큼 이동합니다"},"매핑(Map)":{"relativeUrl":"/examples/calculating-values-map","description":"map 함수는 값을 하나의 범위에서 범위로 변환합니다 예제에서 매핑은 커서의 수평 위치를 0-720의 0-360 결과값은 원의 색상이 됩니다 수직 0-400의 20-300의 지름이"},"랜덤":{"relativeUrl":"/examples/calculating-values-random","description":"예제는 random 함수의 사용법을 보여줍니다 사용자가 마우스 버튼을 누를 원의 위치와 색상이 무작위로 변경됩니다"},"제한(Constrain)":{"relativeUrl":"/examples/calculating-values-constrain","description":"예제는 커서의 위치에 원을 그리지만 원이 직사각형 내에 유지되도록 합니다 이는 마우스의 좌표를 constrain 함수에 전달함으로써 수행합니다"},"시계":{"relativeUrl":"/examples/calculating-values-clock","description":"현재 시각은 second minute hour 함수를 사용하여 읽을 수 있습니다 예제는 map 시계 바늘의 각도를 계산합니다 그런 좌표계 변환을 위치를 설정합니다"},"색상 보간":{"relativeUrl":"/examples/repetition-color-interpolation","description":"보간법은 두 값 사이의 값을 계산합니다 예를 들어 숫자 5는 0과 중간 지점입니다 다양한 유형의 사이에서 변화율을 사용합니다 선형 보간법 줄여서 lerp는 일정한 lerp 함수는 사이를 선형으로 보간합니다 여기에서 보여지는 lerpColor 색상 예제에서 stripeCount 변수는 수평 줄무늬가 개 나타나는지 조정합니다 값이 더 높은 숫자로 설정되면 개별 줄무늬처럼 보이는 것이 아니라 그라데이션처럼 보입니다"},"색상환(Color Wheel)":{"relativeUrl":"/examples/repetition-color-wheel","description":"예제는 다양한 색상의 모습을 보여줍니다 for 반복문을 사용하여 변환을 반복합니다 반복문은 angle이라는 변수를 초기화하며 변수는 원의 회전과 색상을 변경합니다 반복문이 반복될 때마다 원은 캔버스 중심에 상대적으로 그려집니다 push와 pop함수는 개별 원에만 영향을 줄 수 있도록 합니다"},"베지어 곡선":{"relativeUrl":"/examples/repetition-bezier","description":"bezier 곡선은 제어점과 고정점을 생성됩니다 함수의 첫 두 매개변수는 곡선의 번째 점을 지정하고 마지막 지정합니다 중간 곡선 모양을 정의하는 제어점입니다"},"만화경":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"만화경은 두 개 이상의 반사면이 서로를 향해 비스듬히 기울어진 광학 기기입니다 translate rotate scale 함수를 사용하면 캔버스에서 만화경을 통해 만든 비주얼을 복제할 수 있습니다"},"노이즈":{"relativeUrl":"/examples/repetition-noise","description":"펄린 노이즈 는 켄 펄린Ken Perlin이 작성한 알고리즘으로 무작위성과 유기성을 지닌 시퀀스입니다 p5의 noise함수는 노이즈를 만듭니다 예제에서 점들은 값에 기반하여 크기가 결정됩니다 왼쪽의 슬라이더를 이용해 점들 사이의 거리를 설정합니다 오른쪽 계산에서의 오프셋offset 값을"},"재귀 트리":{"relativeUrl":"/examples/repetition-recursive-tree","description":"이것은 재귀를 통해 간단한 트리같은 구조를 렌더링하는 예제입니다 분기 각도는 마우스의 수평 위치에 대한 함수로 계산됩니다 마우스를 왼쪽과 오른쪽으로 움직여 각도를 변경하세요 다니엘 쉬프먼의 Processing에서 작성된 재귀 트리 예제를 바탕으로 합니다"},"랜덤 시":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor와 random 함수를 사용하여 배열에서 일련의 항목을 무작위로 선택하고 캔버스의 다양한 크기와 위치에 그릴 수 있습니다"},"사인과 코사인":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"예제는 사인과 코사인 수학 함수를 보여줍니다 애니메이션은 단위 원 반지름이 1인 주위에서 일정한 원형 운동을 x축으로부터 측정된 각도는 위의 점을 결정합니다 각도의 코사인과 사인은 점의 x좌표 y좌표로 정의합니다"},"조준":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 함수는 두 위치 사이의 각도를 계산합니다 함수가 계산하는 각도는 것을 향해 도형을 회전시키는 데 사용할 수 있습니다 예제에서는 눈이 커서를 바라보도록 회전합니다"},"삼각형 스트립":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"예제는 beginShape endShape vertex 함수를 사용하여 TRIANGLE_STRIP 모드에서 그것의 꼭짓점들을 지정함으로써 도형을 생성하는 방법을 보여줍니다"},"써클 클리커":{"relativeUrl":"/examples/games-circle-clicker","description":"예제는 제한과 점수가 있는 게임입니다 브라우저의 로컬 스토리지가 최고 점수를 저장하므로 같은 브라우저를 사용해서 게임을 다시 플레이할 점수 기록이 유지됩니다 브라우저 데이터를 지우면 기록도 지워집니다"},"핑퐁":{"relativeUrl":"/examples/games-ping-pong","description":"이것은 가장 오래된 아케이드 비디오 게임 중 하나인 아타리의 Pong에서 영감을 받은 게임입니다 2인용 게임이며 플레이어는 하얀 사각형으로 표현된 패들을 제어합니다 W와 S키는 왼쪽의 위아래로 움직이고 위쪽과 아래쪽 화살표 키는 오른쪽의 움직입니다 플레이어들은 공을 상대방 쪽 캔버스 가장자리 너머로 튕겨내어 점수를 얻습니다"},"스네이크 게임":{"relativeUrl":"/examples/games-snake","description":"이것은 스네이크라고 불리는 아케이드 게임 유형의 복제판입니다 첫 번째 스네이크 게임은 1976년에 출시된 블록케이드였으며 많은 게임들이 같은 구조를 사용합니다 게임에서 플레이어는 예제에서 녹색 선으로 표현된 뱀의 움직임을 제어합니다 플레이어의 목표는 뱀을 빨간 점으로 과일과 충돌시키는 것입니다 뱀이 충돌할 때마다 뱀은 더 길어집니다 자신이나 플레이 영역의 가장자리와 충돌하지 않으면서 가능한 한 길게 성장시키는 예제는 부분의 위치를 저장하기 위해 벡터 배열을 화살표 키는"},"지오메트리":{"relativeUrl":"/examples/3d-geometries","description":"p5의 WEBGL 모드에는 7개의 기본 도형이 포함되어 있습니다 도형들은 평면 상자 원기둥 원뿔 도넛형 타원체입니다 추가적으로 model은 loadModel을 통해 불러온 사용자 정의 지오메트리를 보여줍니다 예제에는 도형들이 있으며 NASA's collection에서 가져온 모델도"},"사용자 정의 지오메트리":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry 함수는 도형을 3D 모델에 저장하여 모델을 효율적으로 사용 재사용합니다"},"재질(Materials)":{"relativeUrl":"/examples/3d-materials","description":"3D 렌더링에서 재질은 표면이 빛에 반응하는지를 결정합니다 p5의 WEBGL 모드는 ambient emissive normal specular 재질을 지원합니다 Ambient 주변광ambient light에만 반응합니다 Specular 모든 광원에 p5에서 Emissive 광원과 상관없이 본인의 색을 나타냅니다 맥락에서 보면 빛을 방출합니다 Normal 표면의 부분이 방향을 향하고 있는지를 시각화합니다 반응하지 않습니다 재질과 서로 조합될 수 있습니다 두 채우기fill와 윤곽선stroke과도 채우기는 기본 색상을 설정하고 윤곽선은 객체의 정점 설정합니다 추가적으로 texture는 이미지로 물체를 감쌉니다 예제의 모델과 이미지 텍스처는 NASA's collection에서 가져온 것입니다"},"궤도 컨트롤(Orbit Control)":{"relativeUrl":"/examples/3d-orbit-control","description":"궤도 컨트롤Orbit control은 마우스나 터치 입력을 3D 스케치에서 카메라 방향을 조정합니다 카메라를 회전하려면 마우스를 왼쪽 클릭하고 드래그하거나 터치스크린에서 스와이프하세요 이동하려면 오른쪽 두 손가락으로 스케치의 중심으로 더 가까이하거나 멀리하려면 마우스의 스크롤 휠을 사용하거나 핀치 인/아웃하세요"},"필터 셰이더(Filter Shader)":{"relativeUrl":"/examples/3d-filter-shader","description":"필터 셰이더는 캔버스에 있는 것에도 효과를 적용할 수 방법입니다 예제에서는 비디오에 효과가 적용됩니다"},"셰이더로 위치 조정하기":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"셰이더는 도형의 정점 위치를 조정할 수 있습니다 이를 통해 3D 모델을 왜곡하고 애니메이션화할"},"프레임버퍼 흐림(Framebuffer Blur)":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"예제에서 사용하는 셰이더는 p5Framebuffer로부터의 깊이 정보를 사용하여 흐림 효과를 적용합니다 실제 카메라에서 렌즈의 초점보다 가깝거나 멀리있는 물체는 흐릿하게 보입니다 이는 모방합니다 먼저 스케치는 프레임버퍼에 개의 구체를 렌더링합니다 셰이더를 프레임버퍼를 캔버스에"},"그래픽 생성하기":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics 함수는 새로운 p5Graphics 객체를 생성하는 데 사용됩니다 객체는 캔버스 내에서 오프-스크린 그래픽 버퍼off-screen graphic buffer로 사용될 수 있습니다 buffer는 현재 디스플레이 표면과 차원과 속성을 가질 있음에도 같은 공간에 존재하는 것처럼 보입니다"},"다중 캔버스":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"기본적으로 p5는 전역 모드Global Mode에서 실행되며 이는 모든 p5 함수가 범위 안에 있고 캔버스 관련 하나의 캔버스에 적용된다는 것을 의미합니다 인스턴스 모드Instance Mode에서도 실행할 수 있으며 모드에서는 같은 함수들이 클래스의 인스턴스의 메서드가 됩니다 p5의 인스턴스는 각자의 캔버스를 가질 있습니다 모드를 사용하려면 인스턴스를 나타내는 매개변수이 예제에서는 p로 표시됨를 가진 함수를 정의해야 합니다 평소에 범위에 있던 함수와 변수들이 함수의 내에서 매개변수에 속하게 생성자에 전달하면 실행됩니다"},"셰이더를 텍스처로 사용하기":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"셰이더는 2D/3D 도형에 텍스처로 적용될 수 있습니다 p5js에서 셰이더 사용에 대해 더 알아보기 p5js"},"눈송이(Snowflakes)":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"예제는 입자 시스템을 사용하여 떨어지는 눈송이의 움직임을 시뮬레이션하는 방법을 보여줍니다 프로그램은 눈송이 클래스를 정의하고 배열을 객체들을 보관합니다"},"흔들어서 공 튀기기":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"클래스를 사용하여 모바일 기기의 기울기에 반응하여 캔버스 내에서 움직이는 원들의 집합을 생성할 수 있습니다 스케치를 표시하려면 기기에서 페이지를 열어야 합니다"},"연결된 입자들":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"예제는 두 개의 사용자 정의 클래스를 사용합니다 Particle 클래스는 위치 속도 색조를 저장합니다 현재 위치와 사용하여 원을 렌더링하고 속도를 위치를 업데이트합니다 Path 클래스에서 생성된 객체들의 배열을 이는 입자를 연결하는 선을 렌더링합니다 사용자가 마우스를 클릭하면 스케치는 클래스의 새 인스턴스를 만듭니다 드래그하면 경로에 추가합니다"},"무리지어 움직이기(Flocking)":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"무리의 움직임을 시뮬레이션 합니다 구현에 대한 자세한 논의는 다니엘 쉬프만Daniel Shiffman의 Nature of Code 책에서 살펴볼 수 있습니다 시뮬레이션은 새와 비슷한 객체를 나타내는 boid'라는 용어를 사용한 크레이그 레이놀즈Craig Reynolds의 연구에 기반하고"},"로컬 스토리지(Local Storage)":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"브라우저는 웹사이트가 방문자의 기기에 데이터를 저장할 수 있도록 허용하고 있습니다 이를 로컬 스토리지Local Storage라고 합니다 getItem storeItem clearStorage removeItem 함수들이 제어합니다 예제는 다니엘 쉬프만Daniel Shiffman의 Java로 작성된 JSON 데이터 가져오기Loading Data와 테이블 Tabular Data 예제를 참고하여 만들어졌습니다 이는 버블에 대한 구성하기 위해 클래스를 사용합니다 방문자는 새로운 버블을 추가할 있으며 그들의 데이터는 스토리지에 저장됩니다 방문자가 스케치를 다시 방문하면 동일한 버블이 로드됩니다"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation 또는 JSON은 파일에 데이터를 작성하는 형식입니다 구문은 JavaScript에서 가져왔지만 맥락에서도 많이 사용됩니다 예제는 다니엘 쉬프만Daniel Shiffman의 Java로 작성된 Processing용 JSON 데이터 로드 예제를 기반으로 합니다 이는 버블에 대한 구성하기 위해 클래스를 사용합니다 스케치가 시작될 두 개의 파일에서 로드합니다 방문자는 새로운 버블을 추가할 수 있고 업데이트된 파일을 다운로드하고 로드할 있습니다"},"테이블":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"쉼표로 구분된 값CSV은 파일에 데이터를 작성하는 형식입니다 p5는 p5Table을 사용하여 형식을 작업할 수 있습니다 예제는 다니엘 쉬프만Daniel Shiffman의 Processing에서 작성된 테이블 데이터 가져오기Loading Tabular Data 예제를 기반으로 합니다 이는 버블을 나타내는 구성하기 위해 클래스를 사용합니다 스케치가 시작될 개의 버블에 대한 CSV 파일에서 로드합니다 방문자는 새로운 추가할 있고 업데이트된 파일을 다운로드하고 로드할"},"비직각 반사":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"예제는 반사를 위한 벡터 계산을 사용하여 경사진 표면에서 튕기는 공을 시뮬레이션합니다 코드는 새로운 벡터를 만들기 위해 createVector 함수를 포함한 p5Vector 클래스를 광범위하게 사용합니다 add와 dot 메서드를"},"소프트 바디(Soft Body)":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"마우스 위치로 가속되는 부드러운 물체의 물리 시뮬레이션을 통해 소프트 바디를 구현합니다 모양은 curveVertex와 curveTightness를 사용하여 곡선으로 생성됩니다"},"힘":{"relativeUrl":"/examples/math-and-physics-forces","description":"다수의 힘이 물체에 작용하는 시뮬레이션입니다 물체에는 지속적으로 중력이 적용됩니다 물체가 물에 있을 때는 유체 저항이 작용합니다 natureofcodecom 힘 계산은 p5Vector 클래스를 사용되며 수행되며 이는 벡터를 생성하기 위한 createVector 함수를 포함합니다"},"연기 입자(Smoke Particles)":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"다니엘 쉬프만Dan Shiffman의 원본 Processing 예제를 기반으로 한 연기 입자 시스템 데모입니다 코드는 p5Vector 클래스를 활용하며 이는 createVector 함수를 포함합니다 입자의 위치와 속도를 업데이트하는 다양한 계산은 메서드를 사용하여 수행됩니다 시스템은 클래스로 구현되어 있으며 Particle 클래스의 객체 배열을"},"라이프 게임(Game of Life)":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"라이프 게임Life Game은 수학자 존 콘웨이John Conway가 만든 세포 자동자입니다 자동자는 시뮬레이션의 한 유형입니다 게임에서는 셀이 죽거나 살아 있는지에 그리드가 있습니다 예제에서 검은색 정사각형은 생존하는 셀을 나타내고 흰색 죽은 나타냅니다 시뮬레이션이 실행되는 셀은 규칙에 살아납니다 주변에 살아있는 이웃이 두 개 미만인 모든 죽습니다 세 이상인 또는 개인 변경 없이 세대로 넘어갑니다 정확히 규칙은 복잡한 상호 작용을 생성합니다 캔버스를 클릭하여 무작위로 생성된 셀로 시뮬레이션을 시작할 수 다시 클릭하면 시작됩니다"},"망델브로 집합(Mandelbrot Set)":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"다니엘 쉬프만Daniel Shiffman의 Processing 망델브로 예제를 기반으로 한 집합의 다채로운 렌더링을 제공합니다"}},"reference":{"Array":{"relativeUrl":"/reference/p5/Array"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"알파":{"relativeUrl":"/reference/p5/alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"밝기값":{"relativeUrl":"/reference/p5/brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"색상 함수":{"relativeUrl":"/reference/p5/color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused()":{"relativeUrl":"/reference/p5/focused","alias":"focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"초록(green)()":{"relativeUrl":"/reference/p5/green","alias":"초록(green)"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"색조":{"relativeUrl":"/reference/p5/hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"Number":{"relativeUrl":"/reference/p5/number"},"Object":{"relativeUrl":"/reference/p5/object"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"String":{"relativeUrl":"/reference/p5/string"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"}},"contributor-docs-fallback":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure success volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increase groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](https://p5js.org/reference/p5.sound), [class page](https://p5js.org/reference/p5/p5.Vector), [method page](https://p5js.org/reference/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (https://p5js.org/reference/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (https://p5js.org/reference/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (https://p5js.org/reference/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (https://p5js.org/reference/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```javascript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (https://p5js.org/reference/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (https://p5js.org/reference/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"JSDoc Best Practices\n":{"relativeUrl":"/contribute/jsdoc","description":"Documentation website built comments p5js repo things mind order documentation parsed correctly ## * top file add comment `@module` tag optionally `@submodule` reference category subcategory names contents ```js /** @module Rendering */ ``` Data @submodule LocalStorage classes Create *outside* addon function assign `p5` *inside* class MyClass { // } export default myAddonp5 fn p5MyClass = Document methods directly members *without* `@method` Description myMethod return spot added definition include `@class` including prefix parameters constructor description exist constructorn thisn @class @param {Number} number pass properties `@for` referencing `@property` naming property myProperty @property @for global functions Add listing @method myFunction p5myFunction dynamically generated usual `@for p5` const key ['nameA' nameB'] fn[key] `Hello ${key}` nameA p5 nameB Mark showing `@private` automatically start `_` @private privateMethodA _privateMethodB"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed requires temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve *Both 1x include system diffing algorithm robust system* operating systems browsers render graphics subtle variations differences normal fail Common acceptable Single-pixel shifts line positions Slight anti-aliasing Text font weight kerning Minor curve smoothness text rendered macOS slightly Linux applies thin lines curves graphical elements image earlier caused environments [Example]src/content/contributor-docs/images/pixelmatch2png sophisticated distinguish Initial Compares pixels moderate threshold identify [pixelmatch](https://github.com/mapbox/pixelmatch/) pixel Cluster identification Groups connected difference Breadth-First Search BFS Pattern recognition specifically identifies Line shift clusters represent element shifted 1px Isolated noise Smart failure criteria Applies thresholds Ignores smaller total significant Permits minor typical platforms [Example]src/content/contributor-docs/images/pixelmatchpng balances sensitivity real tolerating platform-specific parameters const MIN_CLUSTER_SIZE Minimum cluster MAX_TOTAL_DIFF_PIXELS Maximum allowed analyzing neighborhood 80% ≤2 neighbors classified structural intelligent ensures due catching important note improved pass failed detecting showing visually meaningful makes reliable reduces failures require manual investigation ### efficient sizes dimensions close 50x50 resizes images canvases result faster Focus visible details intricate hard Design demonstrate reduced cramming variants call times visualTest'stroke variations' stroke p5stroke0 p5strokeWeight1 p5line10 Screenshot thick p5strokeWeight5"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples-fallback":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries-fallback":{"AnimatorJs":{"relativeUrl":"/libraries/","description":"A javascript animation viewer based on a custom animation API primarily designed for p5.js and allows for dynamic, lightweight, real-time rendered browser animations controlled purely by code."},"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Pixyp5js":{"relativeUrl":"/libraries/","description":"A library for easily more easily dealing with pixels in images during runtime"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"TurtleGraphics":{"relativeUrl":"/libraries/","description":"Watch images being drawn using turtle graphics."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"Zoomp5js":{"relativeUrl":"/libraries/","description":"A simple library for adding the zooming functionality to your p5.js project."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.5":{"relativeUrl":"/libraries/","description":"Add UI to p5.js and other goodies"},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Modbuttons":{"relativeUrl":"/libraries/","description":"a simple and modular button system for p5js"},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Sprite":{"relativeUrl":"/libraries/","description":"A basic sprite library that supports both animated and static sprites for p5.js"},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.colorGenerator":{"relativeUrl":"/libraries/","description":"p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point."},"p5.comfyui-helper":{"relativeUrl":"/libraries/","description":"A library for interfacing with ComfyUI"},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."},"XYscope.js":{"relativeUrl":"/libraries/","description":"p5.js library to render graphics on analog vector displays"}},"events-fallback":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro VimeoEmbed ///components/VimeoEmbed/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg Introduction Casey Reas Johanna Hedva Stephanie Pi Phoenix Perry Taeyoon Choi Sara Hendren Epic Jefferson Chandler McWilliams Q&A ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people-fallback":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aarati Akkapeddi ":{"relativeUrl":"/people/#aarati-akkapeddi-"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aaron Welles":{"relativeUrl":"/people/#aaron-welles"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abdiel Lopez":{"relativeUrl":"/people/#abdiel-lopez"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Animesh Sinha":{"relativeUrl":"/people/#animesh-sinha"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antoinette Bumatay-Chan":{"relativeUrl":"/people/#antoinette-bumatay-chan"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashish Karn":{"relativeUrl":"/people/#ashish-karn"},"ashish singh":{"relativeUrl":"/people/#ashish-singh"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"Ashwani Dey":{"relativeUrl":"/people/#ashwani-dey"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"beau-muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"benpalevsky":{"relativeUrl":"/people/#benpalevsky"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"blackboxlogic":{"relativeUrl":"/people/#blackboxlogic"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Bojidar Marinov":{"relativeUrl":"/people/#bojidar-marinov"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"c-dacanay":{"relativeUrl":"/people/#c-dacanay"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Callie":{"relativeUrl":"/people/#callie"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Carrie Wang":{"relativeUrl":"/people/#carrie-wang"},"Casey Conchinha":{"relativeUrl":"/people/#casey-conchinha"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chloe Yan":{"relativeUrl":"/people/#chloe-yan"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"cog25":{"relativeUrl":"/people/#cog25"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"computational mama":{"relativeUrl":"/people/#computational-mama"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"crh82":{"relativeUrl":"/people/#crh82"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Darren Kessner":{"relativeUrl":"/people/#darren-kessner"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"davidblitz":{"relativeUrl":"/people/#davidblitz"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"dhanush":{"relativeUrl":"/people/#dhanush"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"FORCHA PEARL":{"relativeUrl":"/people/#forcha-pearl"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Franolich Design":{"relativeUrl":"/people/#franolich-design"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gabriel Sroka":{"relativeUrl":"/people/#gabriel-sroka"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Albers":{"relativeUrl":"/people/#greg-albers"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Greg Stanton":{"relativeUrl":"/people/#greg-stanton"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Kholiya":{"relativeUrl":"/people/#himanshu-kholiya"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"Ilona Brand":{"relativeUrl":"/people/#ilona-brand"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jackie Liu":{"relativeUrl":"/people/#jackie-liu"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Berghold":{"relativeUrl":"/people/#jared-berghold"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"jeanette":{"relativeUrl":"/people/#jeanette"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Philyaw":{"relativeUrl":"/people/#jordan-philyaw"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Kathryn Lichlyter":{"relativeUrl":"/people/#kathryn-lichlyter"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Gupta":{"relativeUrl":"/people/#keshav-gupta"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"Kit Kuksenok":{"relativeUrl":"/people/#kit-kuksenok"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"Kristian Hamilton":{"relativeUrl":"/people/#kristian-hamilton"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Berrios":{"relativeUrl":"/people/#lauren-berrios"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"Luke Plowden":{"relativeUrl":"/people/#luke-plowden"},"M":{"relativeUrl":"/people/#m"},"ma haidong":{"relativeUrl":"/people/#ma-haidong"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marco Macarena":{"relativeUrl":"/people/#marco-macarena"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Martin Leopold Groedl":{"relativeUrl":"/people/#martin-leopold-groedl"},"Martin Lorentzon":{"relativeUrl":"/people/#martin-lorentzon"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"mathewpan2":{"relativeUrl":"/people/#mathewpan2"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Arguelles":{"relativeUrl":"/people/#maya-arguelles"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"Mayank Verma":{"relativeUrl":"/people/#mayank-verma"},"mclark414":{"relativeUrl":"/people/#mclark414"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"Melody Sharp":{"relativeUrl":"/people/#melody-sharp"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"Mx. Ramsey":{"relativeUrl":"/people/#mx--ramsey"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"oliver thurley":{"relativeUrl":"/people/#oliver-thurley"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"Pim Tournaye":{"relativeUrl":"/people/#pim-tournaye"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Qingfeng Huang":{"relativeUrl":"/people/#qingfeng-huang"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajas Samse":{"relativeUrl":"/people/#rajas-samse"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"Renjie Li":{"relativeUrl":"/people/#renjie-li"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishab Kumar Jha":{"relativeUrl":"/people/#rishab-kumar-jha"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Rishi":{"relativeUrl":"/people/#rishi"},"Ritesh Patil":{"relativeUrl":"/people/#ritesh-patil"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"roxi09":{"relativeUrl":"/people/#roxi09"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"Seyko":{"relativeUrl":"/people/#seyko"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shoury Singh":{"relativeUrl":"/people/#shoury-singh"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Tibor Udvari":{"relativeUrl":"/people/#tibor-udvari"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Vaivaswat Dubey":{"relativeUrl":"/people/#vaivaswat-dubey"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"Vik":{"relativeUrl":"/people/#vik"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishesh Rawal":{"relativeUrl":"/people/#vishesh-rawal"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"willallstet":{"relativeUrl":"/people/#willallstet"},"William Hazard":{"relativeUrl":"/people/#william-hazard"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"Xevi H. Aqeel":{"relativeUrl":"/people/#xevi-h--aqeel"},"Xin Xin":{"relativeUrl":"/people/#xin-xin"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"ℤ":{"relativeUrl":"/people/#ℤ"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference-fallback":{"HSB":{"relativeUrl":"/reference/p5/HSB"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"addElement()":{"relativeUrl":"/reference/p5/addElement","alias":"addElement"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"baseColorShader()":{"relativeUrl":"/reference/p5/baseColorShader","alias":"baseColorShader"},"baseFilterShader()":{"relativeUrl":"/reference/p5/baseFilterShader","alias":"baseFilterShader"},"baseMaterialShader()":{"relativeUrl":"/reference/p5/baseMaterialShader","alias":"baseMaterialShader"},"baseNormalShader()":{"relativeUrl":"/reference/p5/baseNormalShader","alias":"baseNormalShader"},"baseStrokeShader()":{"relativeUrl":"/reference/p5/baseStrokeShader","alias":"baseStrokeShader"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierOrder()":{"relativeUrl":"/reference/p5/bezierOrder","alias":"bezierOrder"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"close()":{"relativeUrl":"/reference/p5/close","alias":"close"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEG_TO_RAD":{"relativeUrl":"/reference/p5/DEG_TO_RAD"},"EXCLUDE":{"relativeUrl":"/reference/p5/EXCLUDE"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"INCLUDE":{"relativeUrl":"/reference/p5/INCLUDE"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createModel()":{"relativeUrl":"/reference/p5/createModel","alias":"createModel"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"fontAscent()":{"relativeUrl":"/reference/p5/fontAscent","alias":"fontAscent"},"fontBounds()":{"relativeUrl":"/reference/p5/fontBounds","alias":"fontBounds"},"fontDescent()":{"relativeUrl":"/reference/p5/fontDescent","alias":"fontDescent"},"fontWidth()":{"relativeUrl":"/reference/p5/fontWidth","alias":"fontWidth"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"imageShader()":{"relativeUrl":"/reference/p5/imageShader","alias":"imageShader"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBlob()":{"relativeUrl":"/reference/p5/loadBlob","alias":"loadBlob"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFilterShader()":{"relativeUrl":"/reference/p5/loadFilterShader","alias":"loadFilterShader"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"paletteLerp()":{"relativeUrl":"/reference/p5/paletteLerp","alias":"paletteLerp"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveObj()":{"relativeUrl":"/reference/p5/saveObj","alias":"saveObj"},"saveStl()":{"relativeUrl":"/reference/p5/saveStl","alias":"saveStl"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"screenToWorld()":{"relativeUrl":"/reference/p5/screenToWorld","alias":"screenToWorld"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spline()":{"relativeUrl":"/reference/p5/spline","alias":"spline"},"splinePoint()":{"relativeUrl":"/reference/p5/splinePoint","alias":"splinePoint"},"splineProperties()":{"relativeUrl":"/reference/p5/splineProperties","alias":"splineProperties"},"splineProperty()":{"relativeUrl":"/reference/p5/splineProperty","alias":"splineProperty"},"splineTangent()":{"relativeUrl":"/reference/p5/splineTangent","alias":"splineTangent"},"splineVertex()":{"relativeUrl":"/reference/p5/splineVertex","alias":"splineVertex"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeMode()":{"relativeUrl":"/reference/p5/strokeMode","alias":"strokeMode"},"strokeShader()":{"relativeUrl":"/reference/p5/strokeShader","alias":"strokeShader"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textBounds()":{"relativeUrl":"/reference/p5/textBounds","alias":"textBounds"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textDirection()":{"relativeUrl":"/reference/p5/textDirection","alias":"textDirection"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textProperties()":{"relativeUrl":"/reference/p5/textProperties","alias":"textProperties"},"textProperty()":{"relativeUrl":"/reference/p5/textProperty","alias":"textProperty"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWeight()":{"relativeUrl":"/reference/p5/textWeight","alias":"textWeight"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"vertexProperty()":{"relativeUrl":"/reference/p5/vertexProperty","alias":"vertexProperty"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"worldToScreen()":{"relativeUrl":"/reference/p5/worldToScreen","alias":"worldToScreen"},"write()":{"relativeUrl":"/reference/p5/write","alias":"write"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.Biquad.freq()":{"relativeUrl":"/reference/p5.Biquad/freq","alias":"freq"},"p5.Biquad.gain()":{"relativeUrl":"/reference/p5.Biquad/gain","alias":"gain"},"p5.Biquad.res()":{"relativeUrl":"/reference/p5.Biquad/res","alias":"res"},"p5.Biquad.setType()":{"relativeUrl":"/reference/p5.Biquad/setType","alias":"setType"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.changed()":{"relativeUrl":"/reference/p5.Element/changed","alias":"changed"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.input()":{"relativeUrl":"/reference/p5.Element/input","alias":"input"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.attackTime()":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.releaseTime()":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Font.textToContours()":{"relativeUrl":"/reference/p5.Font/textToContours","alias":"textToContours"},"p5.Font.textToModel()":{"relativeUrl":"/reference/p5.Font/textToModel","alias":"textToModel"},"p5.Font.textToPaths()":{"relativeUrl":"/reference/p5.Font/textToPaths","alias":"textToPaths"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertexProperty()":{"relativeUrl":"/reference/p5.Geometry/vertexProperty","alias":"vertexProperty"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.Noise.amp()":{"relativeUrl":"/reference/p5.Noise/amp","alias":"amp"},"p5.Noise.start()":{"relativeUrl":"/reference/p5.Noise/start","alias":"start"},"p5.Noise.stop()":{"relativeUrl":"/reference/p5.Noise/stop","alias":"stop"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner.pan()":{"relativeUrl":"/reference/p5.Panner/pan","alias":"pan"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rolloff()":{"relativeUrl":"/reference/p5.Panner3D/rolloff","alias":"rolloff"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.PitchShifter.shift()":{"relativeUrl":"/reference/p5.PitchShifter/shift","alias":"shift"},"p5.Reverb.drywet()":{"relativeUrl":"/reference/p5.Reverb/drywet","alias":"drywet"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.inspectHooks()":{"relativeUrl":"/reference/p5.Shader/inspectHooks","alias":"inspectHooks"},"p5.Shader.modify()":{"relativeUrl":"/reference/p5.Shader/modify","alias":"modify"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.Shader.version()":{"relativeUrl":"/reference/p5.Shader/version","alias":"version"},"p5.SoundFile.amp()":{"relativeUrl":"/reference/p5.SoundFile/amp","alias":"amp"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.start()":{"relativeUrl":"/reference/p5.SoundFile/start","alias":"start"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.getValue()":{"relativeUrl":"/reference/p5.Vector/getValue","alias":"getValue"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.setValue()":{"relativeUrl":"/reference/p5.Vector/setValue","alias":"setValue"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.sound.getAudioContext()":{"relativeUrl":"/reference/p5.sound/getAudioContext","alias":"getAudioContext"},"p5.sound.loadSound()":{"relativeUrl":"/reference/p5.sound/loadSound","alias":"loadSound"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.BandPass":{"relativeUrl":"/reference/p5.sound/p5.BandPass"},"p5.Biquad":{"relativeUrl":"/reference/p5.sound/p5.Biquad"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.HighPass":{"relativeUrl":"/reference/p5.sound/p5.HighPass"},"p5.LowPass":{"relativeUrl":"/reference/p5.sound/p5.LowPass"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner":{"relativeUrl":"/reference/p5.sound/p5.Panner"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.PitchShifter":{"relativeUrl":"/reference/p5.sound/p5.PitchShifter"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"},"p5.sound.setAudioContext()":{"relativeUrl":"/reference/p5.sound/setAudioContext","alias":"setAudioContext"},"p5.sound.userStartAudio()":{"relativeUrl":"/reference/p5.sound/userStartAudio","alias":"userStartAudio"},"p5.sound.userStopAudio()":{"relativeUrl":"/reference/p5.sound/userStopAudio","alias":"userStopAudio"}},"tutorials-fallback":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Chatting with/about Code":{"relativeUrl":"/tutorials/criticalAI1-chatting-with-about-code","description":"Using generative AI to code with p5.js"},"Critical AI Prompt Battle":{"relativeUrl":"/tutorials/criticalAI2-prompt-battle","description":"Build a tool to compare generative AI prompts"},"Critical AI Sentiment Dataset Explorer":{"relativeUrl":"/tutorials/criticalAI3-sentiment-dataset-explorer","description":"Examine the datasets that run AI tools"},"Critical AI No-AI Chatbot":{"relativeUrl":"/tutorials/criticalAI4-no-ai-chatbot","description":"Make an interactive chatbot without using any AI"},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to GLSL":{"relativeUrl":"/tutorials/intro-to-glsl","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU using GLSL."},"p5.strands: Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-p5-strands","description":"An introduction to shaders using p5.strands"},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
diff --git a/public/search-indices/zh-Hans.json b/public/search-indices/zh-Hans.json
index e74fbc667e..a0137ab9dc 100644
--- a/public/search-indices/zh-Hans.json
+++ b/public/search-indices/zh-Hans.json
@@ -1 +1 @@
-{"contributor-docs":{"🌸欢迎！🌺\n":{"relativeUrl":"/contribute/README","description":"\n\n感谢你有兴趣为 p5.js 做出贡献！我们的团队重视每一种形式的帮助，并且正在尽可能的扩大你能帮助的范围，这包括了参考文献、教学、编写程序、创作艺术、写作、设计、活动、组织、展策或者任何你能想象到的东西。[我们的社群网页](https://p5js.org/community/#contribute)提供了一些贡献与参与项目的方法。如果你要提供技术性的帮助，请接着往下读。\n\n本项目遵循[贡献者名单](https://github.com/kentcdodds/all-contributors/)规格。你可遵循[指示](https://github.com/processing/p5.js/issues/2309/)把你和你的贡献添加到 [readme](https://github.com/processing/p5.js/blob/main/README.md#contributors)，或者是在 [GitHub issue](https://github.com/processing/p5.js/issues/) 中评论你的贡献，我们就会把你加入到贡献者名单中。\n\n# 源代码\n\np5.js 项目除了这个代码库外还包括了以下几个其他的代码库：\n\n* [p5.js](https://github.com/processing/p5.js)：包括了 p5.js 源代码。[面向用户的 p5.js 参考文献](https://p5js.org/reference/)也是由包含在此源代码中的 [JSDoc](http://usejsdoc.org/) 注解生成的。[Lauren Lee McCarthy](https://github.com/lmccart/) 为维持者。\n* [p5.js-website](https://github.com/processing/p5.js-website/)：此源代码包含了 \\[p5.js website]\\([https://p5js.org](https://p5js.org) /)的大多数代码（除参考文献外）。[Lauren Lee McCarthy](https://github.com/lmccart/) 为维持者。\n* [p5.js-sound](https://github.com/processing/p5.js-sound/)：包括了 p5.sound.js 程式库。[Jason Sigal](https://github.com/therewasaguy/) 为维持者。\n* [p5.js-web-editor](https://github.com/processing/p5.js-web-editor/)：包含了 [p5.js web editor](https://editor.p5js.org) 的源代码。[Cassie Tarakajian](https://github.com/catarak/) 为维持者。请注意，旧版 [p5.js editor](https://github.com/processing/p5.js-editor/) 已不再受支持。\n* [p5.accessibility](https://github.com/processing/p5.accessibility)：使 p5.js 更适合盲人和视障人士使用的程式库。\n\n# 文件结构\n\n这个代码库有很多文件，所以这里提供了文件总览。有些文件可能很难懂——不过你并不需要每一个都看懂才能开始。我们建议你先从一个特定区域入手（例如说，修复某些内联参考文献），并逐渐地探索更多领域。Luisa Pereira 的 [Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/) 也给出了 p5.js 工具与文件的视频总览。\n\n* `contributor_docs/` 包含了贡献者所需遵循的原则；\n* `docs/` 并不包含参考文献！它包含了 **生成** [线上参考文献](https://p5js.org/reference/)的代码；\n* `lib/` 包含一个空白示例和 p5.sound 扩展程式库，并且会周期性地通过 [p5.js-sound 代码库](https://github.com/processing/p5.js-sound/) 更新。这里也是当用 [Grunt](https://gruntjs.com/) 把 p5.js 编译到单个文件后 p5.js 程式库的位置。发出 Pull request 时，无需将其检入 GitHub 代码库。\n* `src/` 包含所有的源代码，这些源代码通常组织成多个单独的模块。 如果要更改 p5.js，这就是你需要参考的地方。大多数文件夹内部都有独自的 README.md 文件，以帮助您浏览该文件夹。\n* `tasks/` 包含创建 p5.js 与新版本 p5.js 的构建、部署和发行有关的自动化任务的脚本。\n* `tests/` 包含单元测试，这些单元测试可确保库随着更改仍继续正常运行。\n* `utils/` 可能包含对存储库有用的其他文件，但是通常您可以忽略此目录。\n\n# 参考文献\n\n我们意识到参考文献是这个项目中最重要的部分。不好的参考文献是新用户与新贡献者的最大屏障，让项目不具有包容性。[contributing\\_documentation.md](../contributing_documentation/) 页面为开始修改参考文献给出了一个深入的导览。p5.js 的参考文献可以在以下几个地方找到：\n\n* [p5js.org/reference](https://p5js.org/reference/)：由 [inline documentation](../inline_documentation/) 的源代码生成。它包括了文本描述和参数以及随附的代码片段示例。我们将所有这些内联文献和代码放在一起，以使代码和参考文献保持紧密的联系，并强化这样的思想，贡献参考文献与贡献代码至少同等重要。构建库后，它将检查内联参考文献和示例，以确保它们与代码的行为方式匹配。 要做出贡献，您可以先查看 [inline\\_documentation.md](../inline_documentation/) 页面。\n* [p5js.org/examples](https://p5js.org/examples/) 页面包含更长的示例，这些示例对于学习 p5.js 可能有用。要做出贡献，您可以先查看 [adding\\_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md)。\n* [p5js.org/tutorials](https://p5js.org/tutorials/) 页面包含可帮助您学习 p5.js 和编程概念的教程。 要做出贡献，您可以先查看 [p5.js guide to contributing to tutorials](https://p5js.org/learn/tutorial-guide.html)。\n* 您可能会注意到 p5.js 网站目前支持几种不同的语言。这称为国际化（i18n）。您可以在 [i18n\\_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contribution.md)页面了解更多。\n\n# GitHub Issue 流程\n\n* 我们使用 [GitHub issue](https://github.com/processing/p5.js/issues/) 跟踪已知的错误和预期的新功能。[Issue lables](../issue_labels/) 用于将问题分类，例如[适合初学者](https://github.com/processing/p5.js/labels/level%3Abeginner/)的问题。\n\n* 如果您想开始处理现有问题，请对你打算探查的问题发表评论，以便其他贡献者知道该问题正在处理中并可以提供帮助。\n\n* 完成有关此问题的工作后，请针对 p5.js main 分支[提交 Pull request](../preparing_a_pull_request/) 。在PR的描述字段中，包括 “resolves #XXXX” 标记，以解决您要解决的问题。如果 PR 并不能完全解决该问题（即，在PR合并后该问题应保持打开状态），请输入 “addresses #XXXX”。\n\n* 如果发现错误或有想要添加新功能的主意，请先提交问题。请不要直接地提交包含修复程序或新功能的 Pull Request，而不先发出问题，否则我们将无法接受该 Pull Request。在有关该问题获得反馈并得到同意解决该问题后，您可以按照上述过程以提供修复或功能。\n\n* 您可以对问题进行分类，其中可能包括复制错误报告或要求提供重要信息，例如版本号或复制说明。 如果您想开始分类问题，一种简单的入门方法是[在 CodeTriage 上订阅 p5.js](https://www.codetriage.com/processing/p5.js)。[](https://www.codetriage.com/processing/p5.js)\n\n* [organization.md](https://github.com/processing/p5.js/blob/main/contributor_docs/organization.md) 文件提供了有关如何组织问题以及决策过程的高级概述。如果您有兴趣，欢迎您参与。\n\n# 开发过程\n\n我们知道开发过程可能会有点难——不只是你一个人，所有人一开始都会这么觉得。你可以遵循下面的步骤来设置；如果遇到了问题，你可以在[论坛](https://discourse.processing.org/c/p5js/)上讨论或发布一个关于你的问题的 [issue](https://github.com/processing/p5.js/issues/)，我们会尽力帮助你的。\n\n1. 下载 [node.js](http://nodejs.org/)（同时将会自动下载 [npm](https://www.npmjs.org) 程式包管理器）\n\n2. 将 [p5.js 代码库](https://github.com/processing/p5.js) [fork](https://help.github.com/articles/fork-a-repo/) 到你的 GitHub 账号\n\n3. [复制](https://help.github.com/articles/cloning-a-repository/) 此代码库的新 fork 到本地电脑：\n\n ```shell\n $ git clone https://github.com/您的用户名/p5.js.git\n ```\n\n4. 导航到项目文件夹，并使用 npm 安装其所有所需的程式包。\n\n ```shell\n $ cd p5.js\n $ npm ci\n ```\n\n5. [Grunt](https://gruntjs.com/) 需要被安装，您可以使用它从源代码构建程式库。\n\n ```shell\n $ npm run grunt\n ```\n\n 如果您要不断更改库中的文件，您可以运行 `npm run dev` 以便在源文件发生任何更改时自动为您重建程式库，而无需手动键入命令。\n\n6. 在本地源代码更改然后用 Git [commit](https://help.github.com/articles/github-glossary/#commit) 它们。\n\n ```shell\n $ git add -u\n $ git commit -m \"YOUR COMMIT MESSAGE\"\n ```\n\n7. 再次运行 `npm run grunt` 确保没有语法错误，测试失败或其他问题。\n\n8. 将您对 GitHub 上的 fork 上载（[Push](https://help.github.com/articles/github-glossary/#push)）新更改。\n\n ```shell\n $ git push\n ```\n\n9. 一切准备就绪后，使用 [pull request](https://help.github.com/articles/creating-a-pull-request/) 发布。\n\n# 注意事项\n\np5.js 代码库附带的开发人员工具在某些方面特意非常严格。这是一件好事！它使所有内容保持一致，并勉励您在编写代码时保持一致性。这意味着您可能尝试更改某些东西——但您的提交可能会被项目拒绝，但不要灰心，即使是经验丰富的 p5.js 开发人员也方会犯同样的错误。通常，问题将出在以下两个方面之一：代码语法或单元测试。\n\n## 代码语法\n\np5.js 要求整齐且在风格上一致的代码语法，它使用 [ESlint](https://eslint.org/) 帮助检查代码。提交前这些工具会检查某些样式规则，但是您也可以为代码编辑器安装 [ESlint 插件](https://eslint.org/docs/user-guide/integrations#editors)，以在键入代码后立即显示错误。总的来说，在代码风格方面我们会趋向选择灵活性，以减少参与和贡献的阻碍。\n\n要检查错误，在命令行输入以下指令（不要键入 `$` 提示符）：\n\n```shell\n$ npm run lint\n```\n\n一些语法错误可以自动修复：\n\n```shell\n$ npm run lint:fix\n```\n\n坚持使用已建立的项目样式通常是更可取的，但是[偶尔](https://github.com/processing/p5.js/search?utf8=%E2%9C%93\\&q=prettier-ignore\\&type=)可能使用不同的语法会使您的代码更易于理解。 这些情况下，Prettier [提供了一个解决方式](https://prettier.io/docs/en/ignore.html)，`// prettier-ignore`注释，您可以使用它来指定个别例外代码。不过如果可以的话，尽量避免使用它，因为 linter 实施的大多数代码格式都有好的理由。\n\n这是代码样式规则的快速摘要。请注意，此列表可能不完整，最好参考 [.prettierrc](https://github.com/processing/p5.js/blob/main/.prettierrc) 和 [.eslintrc](https://github.com/processing/p5.js/blob/main/.eslintrc) 文件以获取完整列表。\n\n* 使用 ES6 语法\n\n* 优先使用单引号\n\n* 缩排使用两个空格\n\n* 所有变量至少要使用一次，否则彻底删除\n\n* 不要使用 `x == true` 或 `x == false`，请使用 `(x)` 或 `(x)!`。如果可能导致误解，请将物件与 `null` 对比、字符串与 `\"\"` 对比、数字与 `0` 对比。\n\n* 在复杂或模棱两可的地方使用注释\n\n* 参考 [Mozilla JS practices](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style#JavaScript_practices) 以了解一些有用的代码格式技巧。\n\n## 单元测试\n\n单元测试是一小段代码，它们是对主逻辑的补充，并执行验证。[unit\\_testing.md](../unit_testing/)页面提供了有关使用单元测试的更多信息。如果您正在开发 p5.js 的主要新功能，尽可能应该包含测试。不要提交没有通过测试的 pull request，因为这意味着某些代码中有错误。\n\n以运行单元测试，您需要确保已安装项目的依赖项。\n\n```shell\n$ npm ci\n```\n\n这将安装*所有* p5.js 的依赖项； 简要地说，特定于单元测试的最重要依赖项包括：\n\n-[Mocha](https://mochajs.org/)，一个功能强大的测试框架，可以执行特定于 p5.js 的各个测试文件\n-[mocha-chrome](https://github.com/shellscape/mocha-chrome/)，一个可使用无头 Google Chrome 浏览器运行 mocha 测试的 mocha 插件\n\n一旦安装了依赖项，请使用Grunt运行单元测试。\n\n```shell\n$ grunt\n```\n\n在浏览器而不是命令行中运行测试有时很有用。 为此，请首先启动 [connect](https://github.com/gruntjs/grunt-contrib-connect/) 服务器：\n\n```shell\n$ npm run dev\n```\n\n在服务器运行的情况下，您应该能够在浏览器中打开 `test/test.html`。\n\n完整的单元测试指南超出了 p5.js 文档的范围，但是简短的版本是 `src/` 目录中包含的源代码中若有任何重大更改或新功能，它应随附有在 `test/` 目录中的测试记录，以验证该库的所有将来版本中的行为一致。在编写单元测试时，请使用 [Chai.js 参考文献](http://www.chaijs.com/api/assert/)作为分阶段声明消息的指南，以便将来在测试中捕获的任何错误都会是一致地，并使其他开发人员更容易理解问题在哪里。\n\n# 其他\n\n* 您可以浏览 [contributor\\_docs /](https://github.com/processing/p5.js/tree/main/contributor_docs/) 文件夹中的其他文件。它们涉及贡献于此项目的技术和非技术方面的特定领域。\n* [深入p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/) 是 p5.js 开发工作流程中使用的工具和文件的视频教程。\n* [来自 The Coding Train 的视频](https://youtu.be/Rr3vLyP1Ods/) :train::rainbow: 概述了对 p5.js 的技术贡献入门。\n* p5.js [Docker 映像](https://github.com/toolness/p5.js-docker/)可以安装在 [Docker](https://www.docker.com/) 中，并用于开发p5 .js，无需手动安装诸如 [Node](https://nodejs.org/) 之类的要求，也无需以其他方式影响主机操作系统（除了安装 Docker 外）。\n* p5.js 库的构建过程会生成一个 [json 数据文件](https://p5js.org/reference/data.json)，其中包含了 p5.js 的公共 API，可用于自动化工具中，例如在编辑器中自动完成 p5.js 语法。该文件托管在 p5.js 网站上，但不包含在代码库中。\n* p5.js 的语言最近已改版到 [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-__ECMAScript_2015)。要查看此举措如何影响您的贡献，请参考 [ES6 adoption](../es6-adoption/) 。\n"},"我们关注的重点是可及性\n":{"relativeUrl":"/contribute/access","description":"{/* 我们对可及性的承诺对贡献者和库的用户意味着什么。 */}\n\n\n\n在[ 2019 年贡献者大会](https://p5js.org/community/contributors-conference-2019.html)上，我们承诺只向 p5.js 添加提高可及性（包括包容性和无障碍性）的功能。我们不会接受那些不支持这些努力的功能请求。我们致力于识别、消除和预防与可及性相关的障碍。这意味着要考虑在交叉[^1]体验中可能影响可及性和参与度的多样性方向。这包括了性别、种族、族裔、性别倾向、语言、地理位置等因素的考虑。我们会优先考虑边缘群体的需求，而不是仅维护在 p5.js 社区中特权群体的长期舒适体验。我们正共同探索和研究可及性的含义，并积极学习该如何实践和传授可及性相关的知识。我们选择通过广泛、交叉和联合的框架来思考可及性。这一承诺是我们在[社区声明](https://p5js.org/about/#community-statement)中概述的 p5.js 核心价值观的一部分。\n\n## 可及性的种类\n\n增加可及性并不专注于扩大 p5.js 社区的人数。它是一种持续的承诺，旨在使 p5.js 对因结构性压迫而被排除在 p5.js 社区外的人们更加可用和易于接触。这一承诺扩展到 p5.js 提供的工具和平台。它还包括 p5.js 领导层的组成、决策和行动。我们反对技术文化中对速度、增长和竞争的追求。我们将致力于推行以下互相关照的集体行为：深思熟虑、放慢步调、互相照应和积极负责。\n\n这里的可及性意味着为以下人群改进 p5.js：\n\n* 非英语母语的人\n* 黑人、原住民、有色人种以及边缘化民族的人\n* 同性恋、双性恋、酷儿、探索中、泛性恋和无性恋的人\n* 跨性别、流动性别、无性别、间性人、双精神身份人士、女性以及以及其他性别边缘化的人\n* 盲人、聋人[^2]或重听、残疾/有残疾、神经多样性和慢性病[^3]患者\n* 收入较低或缺乏经济或文化基础的人\n* 几乎没有或很少开源和创意编码经验的人\n* 来自多样教育背景的人\n* 包括儿童和老年人在内的所有年龄段的人\n* 拥有各种技术技能、工具和互联网访问的人\n* 来自多样宗教背景的人\n* 其他被系统性排除和历史上代表性不足的人\n* 及以上所有的交叉复合的人\n\n我们意识到用来描述我们各自身份的术语的复杂性。语言是微妙的、不断发展的，且常常存在争议。这并不是一个详尽的列表。我们努力给予命名，并对我们的承诺及 p5.js 社区的多样需求承担责任。\n\n### 示例\n\n我们认为以下举措有助于增加可及性：\n\n* 将文档和其他资料翻译成更多的语言，从而解构语言帝国主义[^4]（例如，Rolando Vargas 的[用库纳语编程](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/)，Felipe Santos Gomes, Julia Brasil, Katherine Finn Zander, 和 Marcela Mancino 的[为葡萄牙语用户的 Pê Cinco：国际化与普及](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)）\n* 改进对辅助技术的支持，比如屏幕阅读器（例如，Katie Liu 的[在 p5.js 中添加 Alt 文本](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/)，Claire Kearney-Volpe 的[ p5 可及性项目](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)）\n* 遵循我们工具中的[网络内容无障碍指南](https://www.w3.org/TR/WCAG21/)，并致力于让用户在其项目中更轻松地遵守这些准则\n* 让 p5.js 的错误信息对使用该工具的人士更为友好和获取更多支持。（例如，[ p5.js 友好错误系统(FES)](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)）\n* 在创意编程和数字艺术领域历史上被排除和边缘化的社区内指导和支持 p5.js 的学习者\n* 举办社区活动（例如，[ p5.js 无障碍日 2022](https://p5js.org/community/p5js-access-day-2022.html)，[我们想要的网络：p5.js x W3C TPAC 2020](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/)），采用以可及为中心的组织策略（例如，美国手语翻译，实时字幕，无障碍场地）\n* 支持创建教育资源（例如，Adekemi Sijuwade-Ukadike 的[可及性教学大纲](http://a11ysyllabus.site/)）\n* 发布我们的工作文档和报告，遵循 WCAG 指南，使用简明语言，专注于来自多样经历的初学者（例如，[ OSACC p5.js 访问报告](https://github.com/processing/OSACC-p5.js-Access-Report/)）\n\n## 维护\n\n我们不接受那些不支持我们增加可及性努力的功能请求。你将在我们的 issue 和 PR 模板中看到这一标准的体现。我们还确认了保持 p5.js 现有功能集的意图。我们愿意修复代码库中任何区域的错误。我们相信工具的一致性将使其对初学者更加易用。提升易用性的功能请求示例包括：\n为使用性能较低硬件的人提升性能（例如，支持向帧缓冲区绘制/从帧缓冲区读取）\nAPI 的一致性（例如，添加 arcVertex() 函数以通过 beginShape()/endShape() 创建弧线）\n\n***\n\n请将此视为一份“不断发展中的文档”。我们将持续讨论并优先考虑可及性的含义。我们邀请我们的社区参与讨论这份文档及其所描述的价值观。如果你有任何想法或建议，欢迎通过在 Github 上提交 issue 或通过发送电子邮件至 [hello@p5js.org](mailto:hello@p5js.org) 与我们分享。\n\n这个版本的 p5.js 可及性声明是在2023年开源艺术贡献者大会上，与 Evelyn Masso、Nat Decker、Bobby Joe Smith III、Sammie Veeler、Sonia (Suhyun) Choi、Xin Xin、Kate Hollenbach、Lauren Lee McCarthy、Caroline Sinders、Qianqian Ye、Tristan Jovani Magno Espinoza、Tanvi Sharma、Tsige Tafesse 和 Sarah Ciston 的合作下修订的。它在 Bobby Joe Smith III 和 Nat Decker 的 Processing Foundation 研究奖金支持下完成并发布。\n\n[^1]: Crenshaw, Kimberlé (1989)。\"Demarginalizing the intersection of race and sex: a black feminist critique of antidiscrimination doctrine, feminist theory and antiracist politics\"。芝加哥大学法律论坛。1989 (1): 139–167。ISSN 0892-5593。全文在 Archive.org。\n\n[^2]: 大写的 ‘D’Deaf 指的是文化上属于 Deaf 社区的人，而小写的 ‘d’deaf 是一个听力学术语，可以描述不与 Deaf 身份相关联的人。\n\n[^3]: 在残疾社区内，对于‘以人为本’与‘以身份为先’语言的偏好存在分歧。阅读[在自闭症社区中关于以人为本与以身份为先语言的辩论解包](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/) 和[我是残疾人：关于身份先行与人先行语言的讨论](https://thebodyisnotanapology.com/magazine/i-am-disabled-on-identity-first-versus-people-first-language/)。\n\n[^4]: 语言帝国主义或语言霸权，指的是某些语言（如英语）由于帝国扩张和全球化而持续的统治/优先/强加，以牺牲本土语言为代价的现象。\n"},"为 p5.js 参考文献做贡献\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* 使用正确的格式编写和编辑 p5.js 参考资料。 */}\n\n\n\n在 p5.js 中，我们通过在库的源代码中包含专门的注释，来编写你在 p5.js 网站上看到的[参考文献](https://p5js.org/reference/)页面上的代码参考。这些参考注释包括描述、函数签名（其参数和返回值）和使用示例。换句话说，每个 p5.js 函数/变量的参考页面上的内容都是从源代码中的参考注释构建的。\n\n本文档将向你展示如何编写和格式化参考注释，以便最终能够正确地呈现到网站上。每当你编辑或编写任何 p5.js 函数或变量的参考时，都应遵循此指南。\n\n## 关于参考注释如何工作的简要介绍\n\n当你查看 p5.js 的源代码时，你会看到库中许多行都是参考注释；它们看起来像这样：\n\n```\n/**\n * Calculates the sine of an angle. `sin()` is useful for many geometric tasks\n * in creative coding. The values returned oscillate between -1 and 1 as the\n * input angle increases. `sin()` takes into account the current\n * <a href=\"#/p5/angleMode\">angleMode</a>.\n *\n * @method sin\n * @param {Number} angle the angle.\n * @return {Number} sine of the angle.\n *\n * @example\n * <div>\n * <code>\n * function draw() {\n * background(200);\n *\n * let t = frameCount;\n * let x = 50;\n * let y = 30 * sin(t * 0.05) + 50;\n * line(x, 50, x, y);\n * circle(x, y, 20);\n *\n * describe('A white ball on a string oscillates up and down.');\n * }\n * </code>\n * </div>\n *\n * <div>\n * <code>\n * function draw() {\n * let x = frameCount;\n * let y = 30 * sin(x * 0.1) + 50;\n * point(x, y);\n *\n * describe('A series of black dots form a wave pattern.');\n * }\n * </code>\n * </div>\n *\n * <div>\n * <code>\n * function draw() {\n * let t = frameCount;\n * let x = 30 * cos(t * 0.1) + 50;\n * let y = 10 * sin(t * 0.2) + 50;\n * point(x, y);\n *\n * describe('A series of black dots form an infinity symbol.');\n * }\n * </code>\n * </div>\n */\n```\n\n实际定义函数的 JavaScript 代码往往紧随其后。参考注释始终以 `/**` 开始并以 `*/` 结束，两者之间的每一行都以 `*` 开头。\n\n这种形式的代码块中的任何内容都将被解释为参考文献。你可能通过 [JSDoc](https://jsdoc.app/) 已熟悉这种样式的代码注释。虽然 p5.js 不使用 JSDoc，但它使用了一个非常相似的工具，叫做 [YUIDoc](https://yui.github.io/yuidoc/)，它具有非常相似的参考语法。在这种参考注释样式中，每个注释块进一步分成各个元素，我们将在下面看一下。\n\n## 参考注释块\n\n让我们解析上面 `sin()` 函数的参考注释块，并查看每个部分的作用。你可以将此处的注释与参考页面上的[`sin()`](https://p5js.org/reference/p5/sin/)进行比较。\n\n```\n/**\n * Calculates the sine of an angle. `sin()` is useful for many geometric tasks\n * in creative coding. The values returned oscillate between -1 and 1 as the\n * input angle increases. `sin()` takes into account the current\n * <a href=\"#/p5/angleMode\">angleMode</a>.\n```\n\n在注释的顶部是函数的文本描述。此描述可以包含 markdown 语法和 HTML。描述应该简洁明了，描述函数的功能，并在必要时描述一些有关其性能或反常行为的细节。\n\n```\n * @method sin\n * @param {Number} angle the angle.\n * @return {Number} sine of the angle.\n```\n\n函数通常具有上述三个部分，每个部分以 `@` 符号开始，后跟以下关键字之一：\n\n* `@method` 用于定义函数的名称，在本例中是 `sin`（注意函数名称不包括括号 `()`）。\n* `@param` 用于定义函数接受的参数或参数。\n * 在关键字 `@param` 之后，存储在花括号 `{}` 中的是参数的类型。\n * 在类型之后，下一个单词（angle）是参数的名称。\n * 名称之后，该行的其余部分是参数的描述。\n* `@return` 用于定义函数的返回值。\n * 在关键字 `@return` 之后，存储在花括号 `{}` 中的是返回值的类型。\n * 在类型之后，该行的其余部分是返回值的描述。\n\n对于参数，通常应遵循以下格式：\n\n```\n@param {type} name Description here.\n```\n\n如果参数是可选的，请在名称周围添加方括号：\n\n```\n@param {type} [name] Description here.\n```\n\n### 额外信息：常量\n\n如果参数接受在 [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js) 中定义的一个或多个值，则类型应指定为 `{Constant}`，并在关键字 `either` 后的注释中枚举有效值，例如：\n\n```\n@param {Constant} horizAlign horizontal alignment, either LEFT, CENTER, or RIGHT\n```\n\n对于返回类型，应遵循以下格式：\n\n```\n@return {type} Description of the data returned.\n```\n\n如果函数不返回值，则可以省略 `@return` 标签。\n\n### 额外信息：链式\n\n如果方法返回父对象，则可以跳过 `@return` 标签，并改为添加以下行：\n\n```\n@chainable\n```\n\n## 其他签名\n\n如果一个函数有多个可能的参数选项，则可以分别指定每个参数。例如，[`background()`](https://p5js.org/reference/#p5/background/) 函数有许多不同的参数选项（请参阅参考页面上的“语法”部分）。选择一个版本以使用上面的模板列出作为第一个签名。在第一个参考注释块的末尾，你可以添加额外的签名，每个签名都在自己的块中，仅使用以下示例中的 `@method` 和 `@param` 标签。\n\n```\n/**\n * @method background\n * @param {String} colorstring color string, possible formats include: integer\n * rgb() or rgba(), percentage rgb() or rgba(),\n * 3-digit hex, 6-digit hex\n * @param {Number} [a] alpha value\n */\n\n/**\n * @method background\n * @param {Number} gray specifies a value between white and black\n * @param {Number} [a]\n */\n```\n\n### 额外信息：多个签名\n\n如果两个签名之间唯一的区别是添加了一个可选参数，则不必创建单独的签名。如果可能的话，请限制使用此功能，因为它可能会在参考文献中制造不必要的干扰信息或相似信息。\n\n## p5.js 变量的参考文献\n\n到目前为止，我们已经看过了如何为函数和常量编写参考文献。变量遵循相同的结构，但使用不同的标签。\n\n```\n/**\n * The system variable mouseX always contains the current horizontal\n * position of the mouse, relative to (0, 0) of the canvas. The value at\n * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.\n * If touch is used instead of mouse input, mouseX will hold the x value\n * of the most recent touch point.\n *\n * @property {Number} mouseX\n * @readOnly\n *\n * @example\n * <div>\n * <code>\n * // Move the mouse across the canvas\n * function draw() {\n * background(244, 248, 252);\n * line(mouseX, 0, mouseX, 100);\n * describe('horizontal black line moves left and right with mouse x-position');\n * }\n * </code>\n * </div>\n */\n```\n\n块的开始包含变量的描述（在该例子中是 `mouseX`）。为了定义变量的名称，我们使用 `@property` 而不是 `@method`。`@property` 的语法与 `@param` 类似，用于定义类型及其名称。大多数 p5.js 变量都带有 `@readonly` 标签，用于内部指示该值不应由库用户直接覆盖。\n\n## 添加示例\n\n`sin()` 和 `mouseX` 的参考注释中，都有一个我们还没有讨论过的 `@example` 标签。这个标签是你定义访问参考页面时运行的代码示例的地方。\n\n\n\n创建以上示例的相关 `@example` 标签如下：\n\n```\n * @example\n * <div>\n * <code>\n * const c = color(255, 204, 0);\n * fill(c);\n * rect(15, 20, 35, 60);\n * // Sets 'redValue' to 255.\n * const redValue = red(c);\n * fill(redValue, 0, 0);\n * rect(50, 20, 35, 60);\n * describe(\n * 'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'\n * );\n * </code>\n * </div>\n```\n\n在 `@example` 标签之后，你应该开始一个 HTML `<div>` 标签，后跟一个 `<code>` 标签。在开放和闭合的 `<code>` 标签之间，你将插入相关示例代码。编写参考示例代码的基本原则是保持简单和简洁。示例应该有意义，并解释功能的工作原理，而不会太复杂。示例的画布应该是 100x100 像素，如果没有包含 `setup()` 函数，例如上面的示例，则代码将自动包装在一个默认的 100x100 像素灰色背景画布中创建的 `setup()` 函数中。我们不会在这里详细讨论示例代码的最佳实践和代码风格；请参阅参考样式指南。\n\n你可以为一个功能添加多个示例。为此，添加一个额外的 `<div>` 和 `<code>` HTML 块，直接放在第一个关闭后，中间用一个空行分隔。\n\n```\n* @example\n* <div>\n* <code>\n* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n* describe('An ellipse created using an arc with its top right open.');\n* </code>\n* </div>\n*\n* <div>\n* <code>\n* arc(50, 50, 80, 80, 0, PI, OPEN);\n* describe('The bottom half of an ellipse created using arc.');\n* </code>\n* </div>\n```\n\n如果你不希望参考页面执行示例代码（即，你只希望代码显示出来），请在 `<div>` 中包含 “`norender`” 类：\n\n```\n* @example\n* <div class=\"norender\">\n* <code>\n* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n* describe('ellipse created using arc with its top right open');\n* </code>\n* </div>\n```\n\n如果你不希望示例作为自动化测试的一部分运行（例如，如果示例需要用户交互），请在 `<div>` 中包含 `“notest”` 类：\n\n```\n* @example\n* <div class='norender notest'><code>\n* function setup() {\n* let c = createCanvas(100, 100);\n* saveCanvas(c, 'myCanvas', 'jpg');\n* }\n* </code></div>\n```\n\n如果你的示例使用外部素材文件，请将它们放入 [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) 文件夹中（或者重用其中已有的文件），然后在代码中使用 \"assets/filename.ext\" 链接到它们。请参阅 [tint()](https://p5js.org/reference/p5/tint/) 参考示例。\n\n### 使用 `describe()` 添加画布描述\n\n最后，对于你添加的每个示例，都需要使用 p5.js 函数 `describe()` 来创建一个屏幕阅读器可访问的画布描述。只包括一个参数：一个字符串，其中简要描述了画布上发生的事情。\n\n```\n* @example\n* <div>\n* <code>\n* let xoff = 0.0;\n* function draw() {\n* background(204);\n* xoff = xoff + 0.01;\n* let n = noise(xoff) * width;\n* line(n, 0, n, height);\n* describe('A vertical line moves randomly from left to right.');\n* }\n* </code>\n* </div>\n*\n* <div>\n* <code>\n* let noiseScale = 0.02;\n* function draw() {\n* background(0);\n* for (let x = 0; x < width; x += 1) {\n* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);\n* stroke(noiseVal*255);\n* line(x, mouseY + noiseVal * 80, x, height);\n* }\n* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');\n* }\n* </code>\n* </div>\n```\n\n有关 `describe()` 的更多信息，请访问 [网络无障碍贡献者文档](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions)。\n\n以上就是你编写和编辑 p5.js 参考注释的大多数方法。然而，还有一些 JSDoc 样式参考注释的更多专门用法，你可能会在 p5.js 中遇到。这些在某些情况下很有用，但通常不是你经常需要的东西。\n\n### `@private` 标签\n\n如果属性或变量是私有函数或变量，则可以使用 `@private`。如果将功能标记为 `@private`，则不会将其作为渲染的参考的一部分包含在网站上。使用 `@private` 标签将参考注释块标记为私有的原因是当你记录库本身的内部功能时。例如，参考下面的 `_start` 的参考注释：\n\n```\n/**\n * _start calls preload() setup() and draw()\n *\n * @method _start\n * @private\n */\np5.prototype._start = function () {\n```\n\n### `@module` 和相关标签\n\n每个源代码文件的顶部都将有一个 `@module` 标签。模块对应于 p5.js 中的一组功能，在网站上呈现的渲染的参考页面将这些功能分成相应的部分。在每个模块中，使用 `@submodule` 标签定义额外的子模块。\n\n`@for` 标签定义此模块与整体 `p5` 类之间的关系，有效地表示此模块是 `p5` 类的一部分。\n\n`@requires` 标签定义当前模块依赖的所需导入模块。\n\n```\n/**\n * @module Color\n * @submodule Creating & Reading\n * @for p5\n * @requires core\n * @requires constants\n */\n```\n\np5.js 遵循的约定是 `src/` 文件夹中的每个子文件夹将是一个 `@module`，而子文件夹中的每个文件将是该子文件夹的 `@module` 下的一个 `@submodule`。除非你正在向 p5.js 源代码添加新的子文件夹/文件，否则你不应直接编辑此参考注释块中的文件。\n\n### `@class` 标签\n\n使用 `@class` 标签和 `@constructor` 标签定义类构造函数。此块的格式类似于使用 `@method` 块定义函数的方式，类的名称将需要使用 `@class` 标签定义，而 `@constructor` 标签将指示类具有构造函数。参见下面的示例 `p5.Color` 类：\n\n```\n/**\n * A class to describe a color. Each `p5.Color` object stores the color mode\n * and level maxes that were active during its construction. These values are\n * used to interpret the arguments passed to the object's constructor. They\n * also determine output formatting such as when\n * <a href=\"#/p5/saturation\">saturation()</a> is called.\n *\n * Color is stored internally as an array of ideal RGBA values in floating\n * point form, normalized from 0 to 1. These values are used to calculate the\n * closest screen colors, which are RGBA levels from 0 to 255. Screen colors\n * are sent to the renderer.\n *\n * When different color representations are calculated, the results are cached\n * for performance. These values are normalized, floating-point numbers.\n *\n * <a href=\"#/p5/color\">color()</a> is the recommended way to create an instance\n * of this class.\n *\n * @class p5.Color\n * @constructor\n * @param {p5} [pInst] pointer to p5 instance.\n *\n * @param {Number[]|String} vals an array containing the color values\n * for red, green, blue and alpha channel\n * or CSS color.\n */\n```\n\n## 生成和预览参考文献\n\np5.js 存储库已经设置好，可以生成和预览参考文献，而不需要构建和运行 p5.js 网站。\n\n* 从源代码中的参考注释生成参考文献的主要命令是运行以下命令。\n\n```\nnpm run docs\n```\n\n这将生成必要的预览文件和主 `docs/reference/data.json` 文件，这个文件（在缩小后）将用于在网站上呈现参考页面。\n\n* 为了持续修改完善参考文献，你可以运行以下命令。\n\n```\nnpm run docs:dev\n```\n\n这将启动一个渲染参考文献的实时预览，每次你进行更改时都会更新（你需要在进行更改后刷新页面才能看到它们）。对于在浏览器中预览示例代码来说，这特别有用。\n\n* 主要的模板文件存储在 `docs/` 文件夹中，在大多数情况下，你不应直接更改此文件夹中的文件，除非是要在 `docs/yuidoc-p5-theme/assets` 文件夹中添加新的文件。\n\n## 下一步\n\n有关参考系统的详细信息，你可以查看[JSDoc](https://jsdoc.app/) 和 [YUIDoc](https://yui.github.io/yuidoc/) 的文档。\n\n有关参考资料相关 issue 的示例，请查看[#6519](https://github.com/processing/p5.js/issues/6519/) 和 [#6045](https://github.com/processing/p5.js/issues/6045/)。[贡献者指南](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md) 文档也是一个很好的起点。\n"},"贡献者指南\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* 关于在 GitHub 上为 p5.js 做出贡献的重要信息。 */}\n\n\n\n欢迎来到 p5.js 贡献者指南！本文档适用于有意为 p5.js 贡献代码的新贡献者、希望复习一些技术步骤的贡献者、以及其他与为 p5.js 贡献代码相关的任何事情。\n\n如果你希望在 p5.js 代码库之外做出贡献（例如编写教程、规划教学课程、组织活动等），请查看其他相关页面。管理员或维护人员可以通过[管理员指南](../steward_guidelines/)查阅问题审核与拉取请求相关的内容。\n\n本文档尽管内容较多且覆盖面很广，但我们还是会尽量清晰地注明所有步骤和要点。你可以使用目录查找特定章节。如果文档中的某些章节与你要贡献的内容无关，可以选择跳过。\n\n**如果你是一个新贡献者，你可以从第一章节 “关于 Issues” 开始阅读。如果你想查看关于开发流程的详细指南，可以移步 “开发者快速入门指南” 章节**\n\n# 目录\n\n* [贡献者指南](#贡献者指南/)\n* [目录](#目录/)\n* [关于 Issues](#关于-issues/)\n * [所谓 “Issues” 是指什么？](#所谓-issues-是指什么/)\n * [Issue 模板](#issue-模板/)\n * [抓到个 bug](#抓到个-bug/)\n * [增强现有功能](#增强现有功能/)\n * [新功能开发请求](#新功能开发请求/)\n * [发起讨论](#发起讨论/)\n* [修改 p5.js 代码库](#修改-p5js-代码库/)\n * [必备条件](#必备条件/)\n * [介绍](#介绍/)\n * [开发者快速入门指南](#开发者快速入门指南/)\n * [使用 GitHub 的编辑功能](#使用-github-的编辑功能/)\n * [Fork p5.js 并在你的 Fork 中工作](#fork-p5js-并在你的-fork-中工作/)\n * [使用 GitHub 桌面版](#使用-github-桌面版/)\n * [使用 git 命令行界面](#使用-git-命令行界面/)\n * [代码库拆解](#代码库拆解/)\n * [构建设置](#构建设置/)\n * [Git 工作流程](#git-工作流程/)\n * [源代码](#源代码/)\n * [单元测试](#单元测试/)\n * [内联文档](#内联文档/)\n * [无障碍](#无障碍/)\n * [代码规范](#代码规范/)\n * [设计原则](#设计原则/)\n* [拉取请求](#拉取请求/)\n * [创建拉取请求](#创建拉取请求/)\n * [拉取请求信息](#拉取请求信息/)\n * [标题](#标题/)\n * [解决](#解决/)\n * [更改](#更改/)\n * [更改的截图](#更改的截图/)\n * [PR 检查列表](#pr-检查列表/)\n * [变基和解决冲突](#变基和解决冲突/)\n * [讨论和修改](#讨论和修改/)\n\n***\n\n# 关于 Issues\n\np5.js 的 GitHub 存储库上的大部分活动都发生在 Issues 板块，Issues 很可能也是你开始贡献过程的地方。\n\n## 所谓 “Issues” 是指什么？\n\n\n\n“Issues” 是 GitHub 上描述问题的帖子的通用名称。这个 Issue 可以是一份错误报告，一个添加新功能的请求、一个讨论、或任何与 p5.js 资料库开发有关的帖子。任意 GitHub 账号，乃至于机器人，都可以在每个问题下面评论！这里就是贡献者们讨论与本项目开发相关议题的地方。\n\n尽管提出问题可以有各种各样的理由，但我们通常只使用问题来讨论与 p5.js 源代码开发相关的主题。其他例如调试你个人的代码、邀请合作者加入你个人的项目或其他与上述主题无关的内容应该在[论坛](https://discourse.processing.com)或其他诸如[Discord](https://discord.gg/SHQ8dH25r9/)之类平台上讨论。\n\n我们创建了简单易用的 Issue 模板，助你判定某一主题到底是 GitHub 的问题，还是该在其他地方发布的问题！\n\n## Issue 模板\n\np5.js 的 Issue 模板不仅能助力管理员和维护者更好地理解和审核问题，更能助你更便捷地提出问题并获得答复。\n\n\n\n若要提交新的 Issue，请点进 p5.js 存储库的 ”Issues“ 选项卡，然后点击右侧的 “New issue”按钮。点击后，将显示几个不同的选项，每个选项对应一个相关的 Issue 模板，或者将你重新定向到其他适当的地方提交你的 Issue。建议你选择最贴近需求的选项，以确保你的问题能够迅速得到关注。\n\n\n\n### [抓到个 bug](https://github.com/processing/p5.js/issues/new?assignees=%5C\\&labels=Bug%5C\\&projects=%5C\\&template=found-a-bug.yml)\n\n当你在使用 p5.js 时遇到潜在的错误或某些现象与文档描述不符时，请使用[这个模版](https://github.com/processing/p5.js/issues/new?assignees=%5C\\&labels=Bug%5C\\&projects=%5C\\&template=found-a-bug.yml)。请注意，如果你是在调试代码且认为可能是你自己的代码出了问题，则应该先在[论坛](https://discourse.processing.org)上提问。\n\n该模板有以下字段需要填写：\n\n1. *p5.js 中与之最相关的子领域是？* - 回答该问题将触发自动标记功能，为问题打上相关的[标签](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)，这有助于我们更好地识别和回应你的问题。\n2. *p5.js 版本* - 你可以在`<script>`标签的链接中或者在 p5.js/p5.min.js 文件的第一行找到 p5.js 的版本号。它的格式类似于`1.4.2`（由三个句点分隔的数字）。\n3. *Web 浏览器及版本* - 该信息有助于我们区分代码在不同浏览器中的行为差异。浏览器版本号可以根据下方表格中对应不同浏览器的步骤找到。\n\n<table>\n <tr>\n <td>\n Chrome\n </td>\n\n <td>\n Firefox\n </td>\n\n <td>\n Safari\n </td>\n </tr>\n\n <tr>\n <td>\n 在地址栏中输入 `chrome://version`\n </td>\n\n <td>\n 在地址栏中输入 `about:support`\n </td>\n\n <td>\n 打开顶部 “Safari” 菜单, 选择 “关于 Safari”\n </td>\n </tr>\n</table>\n\n4. *操作系统* - 如可能，请提供操作系统的版本号，例如`macOS 12.5`。某些错误也可能源于操作系统。\n5. *重现错误所需步骤* - 这可能是最重要的信息。请详细列出重现你所遇到的错误的步骤。贴出能够展示问题产生的简单示例代码可以让其他人更容易重现你的错误并制定解决方案。\n\n**重现错误是最关键的**该模板中的许多字段都旨在能够重现 Bug。你提供的关于草图环境的信息越多、重现问题的步骤越丰富，别人也就越容易理解你的问题并探索解决方案。\n\n**请尽可能提供详细的信息，避免使用泛泛的陈述**。例如，不要说 “image()函数不好用了”，而要说得更具体，比如：“image()函数无法以正确的尺寸显示加载的 GIF 图像”。描述以下两个方面可以使你的问题描述更加清晰：\n\n1. 你期望你分享的示例代码执行什么样的行为（预期行为）；\n2. 示例代码实际上做了什么（实际行为）。\n\n如果你希望为你刚刚报告的错误贡献修复代码，你可以在描述中说明。如果你可以提供一个简单的建议来修复你所描述的错误，那对于问题评审者来说将非常有帮助，因为他们需要知道你需要多少支持来贡献修复代码。\n\n**你不应该在没有相应问题或在问题获得实施批准之前提交拉取请求（或开始进行代码更改）**，这是因为无法保证你的建议将被接受，而你所做的工作最终可能不会被合并。\n\nBug 报告只有在至少一名[领域管理员或维护者](https://github.com/processing/p5.js#stewards)核准的情况下才会被接受修复。在此之后，拉取请求的工作才会开始。\n\n### [增强现有功能](https://github.com/processing/p5.js/issues/new?assignees=%5C\\&labels=Enhancement%5C\\&projects=%5C\\&template=existing-feature-enhancement.yml)\n\n如果你想提议修改 p5.js 的现有功能（函数、常量、渲染等）或为现有功能添加新规格，则应使用此模板。比如，如果你想为`color()`函数和其他接受颜色的函数添加一种新的定义颜色的方式，就应该使用本模板。\n\n该模板有以下字段需要填写：\n\n1. *提高无障碍性* - 这是一个必填项目，你需要在此处说明你建议加强的功能将会如何使得 p5.js 对于那些在创意和科技领域长期被边缘化的人群具备[更高的无障碍性](../access/)。通常来讲，**如未填写此项，提案将被拒绝**。但你也可以填写“我不确定”，邀请社区的其他成员集思广益，帮你论证该增强功能可以怎样提高 p5.js 的无障碍性。\n2. *p5.js 中最合适的子领域是什么？* - 这可以帮助我们锁定并回应你的问题。你的答复还将触发自动标记功能，使用相关的[标签](../issue_labels/)标记该问题。\n3. *功能增强详情* - 在这里描述你对功能增强的建议。一个好的功能增强建议通常包括清晰的用例：这个功能增强是什么、何时使用、如何使用以及为什么需要这个功能增强。\n\n要使功能增强建议被接受，必须经过至少一名[领域管理员或维护者](https://github.com/processing/p5.js#stewards)批准，而后才会开始处理拉取请求。\n\n**如果与拉取请求相对应的问题不存在或问题尚未获批，则不应提交拉取请求（或开始更改代码）**，因为提案是不一定会被接受的。提案未被接受时提交的拉取请求在问题获批前都会被关闭。\n\n### [新功能开发请求](https://github.com/processing/p5.js/issues/new?assignees=%5C\\&labels=Feature+Request%5C\\&projects=%5C\\&template=feature-request.yml)\n\n该模板适用于提出为 p5.js 加入新功能的建议。例如，创建一个新的 `createTable` 函数，用于绘制原生的 HTML `<table>` 页面元素。有些提议可能与现有的功能增强建议趋同，在这种情况下，就在两种模版中选择你认为更合适的。\n\n同样，本模板的表单字段与“增强现有功能”部分的字段也几乎一致。有关如何填写每个字段的详情，请参考[上一节](#existing-feature-enchancement)。\n\n新功能的开发请求只有在至少两名[领域管理员或维护者](https://github.com/processing/p5.js#stewards)核准的情况下才会被批准。在此之后，拉取请求的工作才会开始。\n\n**如果与拉取请求相对应的问题不存在或问题尚未获批，则不应提交拉取请求（或开始更改代码）**，因为提案是不一定会被接受的。提案未被接受时提交的拉取请求在问题获批前都会被关闭。\n\n### [发起讨论](https://github.com/processing/p5.js/issues/new?assignees=%5C\\&labels=Discussion%5C\\&projects=%5C\\&template=discussion.yml)\n\n该模板适用于你要提交的问题不适用上述所有其他模版的情况。在现实中，这种情况应该比较少见。如，关于是否在 p5.js 中采用特定的 Web API 功能应该作为一个[新功能开发请求](#new-feature-request)来提交；而在各种颜色函数中添加额外的颜色模式则应作为[增强现有功能](#existing-feature-enchancement)来提交；若要发布一则你组织的本地创意编程活动的公告，应该去论坛上发帖，并通过 Processing Foundation 寻求支持或宣传。\n\n在发启讨论问题时，你可以使用侧面板上的 “Labels（标签）” 选项来添加更多相关标签，以便将你的问题引导到相关领域。此模板本身仅包含一个基本的文本字段。通过[这个链接](https://github.com/processing/p5.js/issues/6517/)可以查看讨论问题的范例。\n\n[**⬆ 回到顶部**](#贡献者指南/)\n\n***\n\n# 修改 p5.js 代码库\n\n## 必备条件\n\n要继续进行，你至少应该对使用命令行、git、node.js（至少 v18 及以上版本）有初步了解，并且已经建立了本地开发环境。\n\n## 介绍\n\n当问题已讨论过，解决方案已经批准，并且你愿意进行代码更改，就可以着手修改代码库了。\n\n同样的，如果你遇到了一个问题、参与讨论了一个问题且管理员已经批准了解决方案，然而问题的原作者和其他社区成员却没有表态乐意处理该问题，你就可以自愿提交一份贡献申请，让管理员将该问题分配给你。\n\n**你不应该“插队”** 提交拉取请求，以期插手一个他人已经有意提交贡献或已经分配给他人的问题。我们永远会根据\"先来先得\"的原则接受一个问题的代码贡献申请。\n\n如果你为一个问题提交了拉取请求，但同时还有其他人在处理同一个问题，你的拉取请求将会被关闭。如果你发现某个已分配给某人的问题已经几个月都没有动静，你可以就该问题礼貌地询问进展如何以及是否需要帮助。我们通常为大家编写贡献留出相当长的时间，因为我们理解大多数人是志愿工作，或者对一些人来说编写功能确实需要很长时间。\n\n同样地，你应该按照自己的节奏工作，并相信我们不会为处理某个问题设定严格的时间限制。话虽如此，如果你在代码贡献的任何方面遇到困难，别犹豫，马上在问题内求助。管理员、维护人员以及其他社区成员都会尽力为你提供指导！\n\n## 开发者快速入门指南\n\n如果你想作为开发者参与 p5.js 代码库的开发工作或提交贡献，无论是直接改进 p5.js 还是改进其诸如 [Friendly Error Systems](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md) 之类的子项目，都可按以下步骤操作：\n\n1. [创建一个 p5.js 的 fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo/)\n\n2. [将你创建的 fork 克隆到你的电脑](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/)\n\n3. [使用以下命令添加 upstream](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/)\n ```\n git remote add upstream https://github.com/processing/p5.js\n ```\n\n4. 确认你的电脑上已经安装了 [NodeJs](https://nodejs.org/en/download/)。可以通过以下命令来确认：\n\n ```\n node -v\n ```\n\n5. 使用以下命令安装依赖项:\n\n ```\n npm ci\n ```\n\n6. 使用以下命令从 `main` 分支创建一个具有描述性分支名称的 git 分支：\n\n ```\n git checkout -b [branch_name]\n ```\n\n7. 当你开始对代码库进行更改时，应频繁进行测试（尽管测试耗时，但能确保现有行为未被改坏）。\n\n ```\n npm test\n ```\n\n8. 如果你正在添加新功能或在增强现有功能，需添加单元测试。\n\n9. 完成后，你可以提交更改并创建[拉取请求](https://p5js.org/contributor-docs/#/./contributor_guidelines?id=pull-requests)。\n\n## 使用 GitHub 的编辑功能\n\n在 GitHub 网页界面上浏览文件时，文件内容顶部附近有一个铅笔图标按钮。该按钮的作用是启动 GitHub 自带的便捷编辑功能，可用于简化以下我们将会介绍的诸多流程。你可以使用它来快捷地编辑当前浏览的文件。\n\n\n\n但是，除非要进行的更改非常简单，否则不建议使用该功能。主要是因为，如要对源代码进行较复杂的更改，则应该先在本地进行构建和测试，然后再提交拉取请求。对于大多数人来说，使用本地开发环境通常比该编辑功能提供的基本编辑环境更为流畅。\n\n## Fork p5.js 并在你的 Fork 中工作\n\n第一步是 Fork p5.js 存储库。在开源项目中，Fork 具有特定的含义，但对于我们的目的来说，它意味着创建存储库的副本并将其存储在你自己的 GitHub 帐户中。要 Fork 一个存储库，只需点击页面顶部附近的\"Fork\"按钮，GitHub 将在你的帐户中创建存储库的副本。\n\n\n\n从你的 p5.js 存储库 Fork 进行工作是必要的，因为你可能没有直接写入官方 p5.js 存储库的权限，而在 Fork 上工作可以让你进行更改，然后将其提交回官方存储库。\n\n### 使用 GitHub 桌面版\n\nGitHub 桌面版是通过图形用户界面来使用 git 的程序，它不需要你在终端输入命令。如果你是 git 新手， GitHub 桌面版会是很好的选择，并且你可以在 GitHub 桌面版和终端之间随意切换。\n\n首先，下载并安装[GitHub 桌面版](https://desktop.github.com/)。安装成功后，打开应用程序。根据提示登录你的 GitHub 账户。登录成功后，你可以看到你的项目，包括你 fork 的 p5.js。选择名为：`你的用户名/p5.js` 的项目，然后点击蓝色 “Clone” 按钮。根据提示选择项目存储位置，你可以更改存储位置也可以保留默认选项并继续。\n\n\n\n克隆成功后，你需要选择使用该 fork 的目的。请选择 “To contribute to the parent project”，然后点击 “Continue”。\n\n\n\n### 使用 git 命令行界面\n\n创建好 fork 之后，去 fork 页面点击绿色 “Code” 按钮复制 git 链接。链接的格式是这样：`https://github.com/limzykenneth/p5.js.git`。\n\n\n\n然后在本地环境中打开命令行，并克隆这个存储库。简单地说，“克隆” 就是将仓库副本下载到本地计算机上。在你想要存储 p5.js 源代码文件夹的文件夹中运行以下命令：\n\n```\ngit clone [git_url]\n```\n\n将 `[git_url]` 替换为你在上一步复制的 git 链接。这可能需要等几分钟，具体多久取决于你的网速，你可以去泡杯咖啡。克隆完成后，用你喜欢的文本编辑器打开名为 `p5.js` 的文件夹，就可以开始查看了。\n\n## 代码库拆解\n\n在 p5.js 文件夹中，你将会遇到一些关键的文件和文件夹，具体如下：\n\n* `src` - 最终生成 `p5.js` 和 `p5.min.js` 文件的所有代码都存放于此。\n* [`test`](../unit_testing/) - 存放单元测试代码和测试所有文档示例代码的位置。\n* `tasks` - 存放详细的自定义构建代码的位置。\n* `Gruntfile.js` - 主要的构建配置文件。\n* `contributor_docs` - 存放文档和其他贡献者文档的位置。\n\n其他文件和文件夹要么是配置文件，要么是其他类型的支持文件，大多数情况下，你不需要对它们做任何修改。\n\n## 构建设置\n\n为了构建和测试运行 p5.js，你需要先创建本地项目文件夹。假设你已经安装了 `Node.js`，请运行如下代码：\n\n```\nnpm ci\n```\n\n这可能需要一些时间，因为 npm 会下载所有需要的依赖项。但是，一旦下载完成，就全部设置好了。非常简单，对吧？\n\n## Git 工作流程\n\n现在，你可以根据自己的需要做更改了。关于存储库其他部分的详情，以及如何做相应修改，请参考接下来的子章节。若要开始，请运行：\n\n```\nnpm test\n```\n\n从头开始构建 p5.js 并运行所有单元测试，这整个过程应该是不会报错的。如果你只是想构建仓库而不运行测试，可以运行：\n\n```\nnpm run build\n```\n\n以上任何一个命令都会在 `lib/` 文件夹中创建 `p5.js` 和 `p5.min.js` 文件。如果需要，你可以用这些构建好的文件来做测试。\n\n接下来，我们建议你开始工作之前在主分支 `main` 上创建一个分支。在 git 中，分支顾名思义就是存储库的一个分支版本，你可以在分支上添加提交而不会影响主分支或其他分支。在分支上，你可以同时处理多个功能（通过使用多个不同的分支），而不用担心搞砸之后会影响到主分支。\n\n如果使用 GitHub 桌面版，可以点击窗口上方的 “Current Branch” 按钮来创建分支。你可以在这里切换分支，或输入分支名创建一个新分支。在这里，我们输入一个分支名描述一下即将做的更改，然后点击 “Create New Branch”。\n\n\n\n如果使用终端，在主分支上运行 `git checkout -b branch_name`，将 `branch_name` 替换为描述性的内容，然后你就在一个新的分支上了。\n\n我们建议你在做更改时经常运行 `npm test`， 尤其是在修改源代码的时候。运行这个命令会花费一些时间，但它能确保你的修改不会破坏当前行为。在参照以下描述提交更改之前，你应该先运行 `npm test`。\n\n一旦你对代码库做了更改，就需要将它提交到 git。一次提交是保存在 git 存储库中的一系列更改，它本质上记录了提交时仓库中文件的当前状态。\n\n可能你会问你应该每隔多久向 git 做一次提交？通常情况下，我们建议你经常提交，而不是将多个更改合并为一次提交。好的做法是，每完成一个可以用一句话描述的子任务就做一次提交。\n\n要从 GitHub 桌面版提交当前所有更改，请在更改完成后打开该应用程序。左侧边栏会显示你更改过的文件，右侧显示每个文件中的更改详情。在窗口左下角，用户图标旁边的区域中输入简要的描述，这就是本次提交的标题。你可以在下面的描述区域中做进一步阐述或留白，点击蓝色的 \"Commit\" 按钮以完成更改。\n\n\n\n要从终端提交当前所有更改，请运行以下命令：\n\n1. 运行以下命令，检查是否只列出了你更改过的文件。\n\n```\ngit status\n```\n\n如果列出了你没有更改过的文件，你需要将它们 [恢复](https://git-scm.com/docs/git-restore/) 到原始状态，或者确保这些更改是你想要的。如需查看每个文件的更改详情，请运行以下命令：\n\n```\ngit diff\n```\n\n不想要的文件更改，不要提交到 PR 中。\n\n2. 运行以下命令，将所有更改添加到 git 暂存区\n\n```\ngit add .\n```\n\n3. 运行以下命令，将所有更改提交到 git\n\n```\ngit commit -m \"[your_commit_message]\"\n```\n\n将 `[your_commit_message]` 替换为描述本次更改相关的信息，避免使用宽泛的陈述。例如：不用 “文档修复 1”，而用 “给 circle() 函数添加文档示例”\n\n```\ngit commit -m \"Add documentation example to circle() function\"\n```\n\n所有提交都重复以上步骤，同时定期运行 `npm test` 以确保一切正常运行。\n\n### 源代码\n\n如果你要处理源代码，并且也清楚你要处理 p5.js 的哪些功能，好的开始是去看文档。因为 p5.js 文档中，每个已记录功能的底部，都有其源代码的链接。\n\n\n\n### 单元测试\n\n如果你要进行单元测试，请参阅[这里](../unit_testing/)。需要注意的是，对于任何功能强化、功能新增和错误修复，都应该在 PR 中添加相关的单元测试。\n\n### 内联文档\n\n如果你要处理内联文档，请参阅[这里](../inline_documentation/)。\n\n### 无障碍\n\n如果你要处理无障碍功能，请参阅[这里](../web_accessibility/)。关于友好的错误系统，请参阅[这里](../friendly_error_system/)。\n\n## 代码规范\n\np5.js 的代码规范或者代码风格由 [ESLlint](https://eslint.org/) 执行。任何 git 提交和拉取请求在被接受之前，都必须通过 ESLint 代码检查。要遵循正确的代码规范，最简单方法是在文本编辑器中使用可用的 ESLint 插件，它可以高亮显示 ESLint 检查到的错误（适用于大多数流行的文本编辑器）。\n\n## 设计原则\n\n开发 p5.js 的功能时，牢记 p5.js 的设计原则是很重要的。我们的优先级可能与其他项目的优先级不同，所以如果你来自其他项目，建议你先熟悉 p5.js 的设计原则。\n\n* **无障碍性**：我们将无障碍性置于首位，在做决定时，必须考虑如何提升历史上被边缘化的群体的无障碍性性。在我们的无障碍报告中可以了解更多相关信息。\n\n* **适合初学者**：p5.js API 适合初学者，它使用前沿的 HTML5/Canvas/DOM API ，为创建交互性视觉内容提供了低门槛。\n\n* **教育性**：p5.js 专注于支持教育用途的 API 和课程，包括 API 的完整参考和支持示例，还有介绍核心创意编程原则的教程和示例课程，思路清晰，井然有序。\n\n* **JavaScript 及其社区**：为了使初学者更容易接触到 Web 开发实践，p5.js 通过对合适的 JavaScript 设计模式和使用进行建模，并在必要时进行提取。作为一个开源库，p5.js 还将更广泛的 JavaScript 社区纳入其创作、文档和传播当中。\n\n* **Processing 及其社区**：p5.js 受到 Processing 语言及其社区的启发，致力于将 Processing Java 到 JavaScript 的转换变得简单而清晰。\n\n[**⬆ 回到顶部**](#贡献者指南/)\n\n# 拉取请求\n\n当你完成了包括单元测试在内的所有更改，运行过 `npm test` 没有报错，并且已经提交了更改，你就可以开始准备拉取请求，将你的新提交合并到 p5.js 官方仓库中。一个拉取请求，更正式地说，是对一个仓库（当前情况是指 p5.js 官方存储库）提出的请求，请求从另一个仓库（当前情况是指 fork 的 p5.js 仓库）拉取或合并更改到其提交历史中。\n\n## 创建拉取请求\n\n首先，将新的提交推送到你 fork 的 p5.js 中，你可以理解为将更改上传到你的 fork。\n\n如果使用 GitHub 桌面版，在窗口顶部用于切换分支的按钮的右侧，有一个按钮可以将你的更改推送到 GitHub，点击这个按钮推送你的更改。\n\n\n\n一旦代码上传完毕，你将会看到一个按钮提示你创建拉取请求。点击一下这个按钮会显示预览，预览中包含另一个按钮，这个按钮才可以真正地创建请求。点击 \"Create Pull Request\" 按钮创建拉取请求。\n\n\n\n如果使用终端，请运行以下代码：\n\n```\ngit push -u origin [分支名称]\n```\n\n推送完成后，你可能会在终端里看到一个链接，可以点击它创建拉取请求。如果没有，你可以在浏览器中导航到你的 fork，通过文件列表顶部的下拉按钮切换到你正在工作的分支，然后点击 “Contribute”，接着点击 \"Open pull request\"。\n\n\n\n当你访问 p5.js 的 Github 仓库时，你可能也会看到一个创建拉取请求的按钮。点击它也可以创建一个新的拉取请求。\n\n\n\n### 拉取请求信息\n\n\n\n在提交拉取请求之前，你需要填写拉取请求模板。\n\n### 标题\n\n拉取请求的标题应简要描述更改的内容，再次提醒要避免宽泛的陈述。\n\n### 解决\n\n在模板中，有这样一行文字：`解决 #[在此添加 issue 编号]`，你需要将 `[在此添加 issue 编号]` 替换为你正在处理/修复的 issue 的 issue 编号 [看上面](#关于issue/)（例如，`解决 #1234`）。这样可以确保 PR 合并后，该 issue 会自动关闭。如果你不希望 PR 合并后自动关闭该 issue（可能因为有更多的更改将在其他 PR 中提交），请将 `解决` 改为 `处理`。\n\n### 更改\n\n清晰地描述你在 PR 中所做的更改，包括任何与审阅者相关的实现细节和决策。\n\n### 更改的截图\n\n是否需要上传截图，视情况而定。当更改涉及到 p5.js 在画布上呈现可视化内容时，就需要上传截图。请注意，不是文本编辑器的截图，而是做过更改后的页面预览截图。\n\n### PR 检查列表\n\n检查列表包含一些相关的选项，将 `[ ]` 替换为 `[x]` 来勾选与你的更改有关的选项。\n\n勾选完成后，点击 “Create pull request”。\n\n### 变基和解决冲突\n\n\n\n现在你应该检查已提交的拉取请求，并注意以下几点：\n\n1. 提交的次数应该与你在这个 PR 上所做的提交次数相匹配，也就是说，如果你在这个 PR 上做了两次提交，\"Commits\" 选项卡中应该只显示两个提交记录。\n2. \"Files changed\" 选项卡只展示你的更改与 p5.js 仓库之间的差异。\n3. 靠近页面底部，应该可以看到 \"This branch has no conflicts with the base branch\"， 而不是 \"This branch has conflicts that must be resolved\"。\n\n如果以上任何一项不正确（提交数量多于预期或存在冲突），你可能需要 [变基](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) 或者帮忙解决冲突。这里的冲突是指：你所更改的文件，近期已经有过更新，git 不确定该保留或者忽略哪组修改。如果你不确定如何解决这些 issues，请联系我们，我们将指导你完成。基本操作步骤如下：\n\n有时，GitHub 会显示 \"Resolve Conflicts\" 按钮，允许你直接在浏览器中解决冲突。\n\n\n\n冲突展示在 `<<<<<<<` 和 `>>>>>>>` 之间， 被 `=======` 隔开。前半部分是你自己写的代码，后半部分是主分支中已经变更过的代码。\n\n\n\n删除冲突标记，在 PR 中保留最终需要保留的代码。所有冲突都解决好之后，点击 \"Mark as resolved\"。\n\n\n\n所有文件的冲突都解决好之后，就可以提交更改了。\n\n\n\n有时候，冲突对于 Github 来说在网页上展示起来太过复杂。在这种情况下，或者如果你更喜欢手动操作，你也可以在本地解决冲突：\n\n1. 运行 `git remote add upstream https://github.com/processing/p5.js`\n2. 运行 `git fetch upstream`\n3. 运行 `git rebase upstream/main`\n4. 可能会有冲突！如果只涉及到 `lib/p5.js` 和 `lib/p5.min.js`，就很容易解决，只需重新构建项目。如果其他文件存在冲突，并且你不确定如何解决，去寻求帮助吧！\n\n```\nnpm test\ngit add -u\ngit rebase --continue\n```\n\n5. 运行 `git push`\n\n上述步骤完成后，上面的检查列表可能会清空，如果没有清空，我们将指导你完成必要的修复。\n\n## 讨论和修改\n\n现在你已经提交了 PR，管理员或维护者将会进行审核。可能需要几天时间，管理员才能给你回复，请耐心等待。在此期间，你可以看看其他尚未解决的 issues。\n\n一旦管理员审核了你的 PR，可能会有两种结果：1. 你的 PR 被批准并合并，太棒了！2. 管理员可能会针对你的 PR 提出一些问题，或者要求你做一些修改。如果是后者，不要惊慌，这是完全正常的，并且管理员们总是愿意帮助你完成你的贡献！\n\n如果你的 PR 需要进一步更改，并且你能够完成这些更改，请按照之前的[相同流程](#git-工作流程/) 进行操作。但务必在本地仓库副本的相关分支进行修改、提交， 并将提交推送到你 fork 的远程仓库。一旦提交成功，新的提交会自动显示在你的 PR 中。然后在 PR 中留言，让审阅者知道你已经按要求做了更改。如果不需要额外的更改，你的 PR 将被合并！\n\n[**⬆ 回到顶部**](#贡献者指南/)\n"},"创建一个新库\n":{"relativeUrl":"/contribute/creating_libraries","description":"p5.js库可以是扩展或添加到p5.js核心功能的任何JavaScript代码。有两种类型的库。核心库（p5.Sound）是p5.js分发的一部分，而贡献库是由p5.js社区的成员开发、拥有和维护的。\n\n如果您创建了一个库并希望将其包含在[p5js.org/libraries](https://p5js.org/libraries/)页面上，请提交[此表单](https://docs.google.com/forms/d/e/1FAIpQLSdWWb95cfvosaIFI7msA7XC5zOEVsNruaA5klN1jH95ESJVcw/viewform/)。\n\n\n\n有许多不同的编写和使用JavaScript的方法，所以我们将此留给您。以下是一些关于使您的库与p5.js良好配合的注意事项。\n\n## 代码\n\n### 您可以通过向p5.prototype添加方法来扩展p5核心功能。\n\n例如，dom.js中的以下代码扩展了p5，添加了一个`createImg()`方法，该方法在DOM中添加了一个[HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/)。\n\n```js\np5.prototype.createImg = function (src) {\n const elt = document.createElement('img');\n //const elt = new Image; // 另一种更短的替代方法。\n\n elt.src = src;\n return addElement(elt, this);\n};\n```\n\n当DOM库包含在项目中时，可以像调用`createCanvas()`或`background()`一样调用`createImg()`。\n\n### 对于内部辅助函数，请使用私有函数。\n\n这些函数不打算由用户调用。在上面的示例中，`addElement()`是[dom.js](https://github.com/processing/p5.js/blob/main/src/dom/dom.js)中的内部函数。但它并未公开绑定到`p5.prototype`。\n\n### 您还可以通过向它们的原型添加方法来扩展p5.js类。\n\n在下面的示例中，`p5.Element.prototype`通过`html()`方法进行扩展，该方法设置元素的内部HTML。\n\n```js\np5.Element.prototype.html = function (html) {\n this.elt.innerHTML = html;\n //this.elt.textContent = html; // 使用textContent作为innerHTML的更安全替代方法。\n};\n```\n\n### 使用registerPreloadMethod()在preload()中注册可以在其中调用的方法的名称。\n\n通常，对于某些异步函数（例如加载声音、图像或其他外部文件），都会提供同步和异步选项。例如，`loadStrings(path, [callback])`接受可选的第二个回调参数 - 在loadStrings函数完成后调用的函数。但是，用户也可以在`preload()`中调用loadStrings而不使用回调，并且p5.js将等待直到`preload()`中的所有内容完成后再继续执行`setup()`。如果您想注册自己的方法，请使用要注册的方法的名称调用`registerPreloadMethod()`，并传递该方法所属的原型对象 ~~（默认为p5.prototype）~~ 。下面的示例显示了“soundfile.js”（p5.sound库）中注册`loadSound()`的一行。\n\n```js\np5.prototype.registerPreloadMethod('loadSound', p5.prototype);\n```\n\n### 异步函数的示例，用于 *callback* 和 **preload()**。\n\n```js\n// 用于在preload()中或与回调一起使用的异步函数示例。\np5.prototype.getData = function (callback) {\n\n // 创建一个对象，该对象将从异步函数克隆数据并返回。\n // 我们将在下面更新该对象，而不是覆盖/重新分配它。\n // 对于preload()来说，保持原始指针/引用非常重要。\n // 使用const声明变量可确保它们不会被错误地重新分配。\n const ret = {};\n\n // 你正在处理的一些异步函数。\n loadDataFromSpace(function (data) {\n\n // 遍历data中的属性。\n for (let prop in data) {\n // 将ret的属性设置为data的属性（克隆）。\n // 也就是说，使用接收到的数据更新空ret对象的属性。\n // 但是，不能使用另一个对象覆盖/重新分配ret。\n // 而是需要更新其内容。\n ret[prop] = data[prop];\n }\n // 检查callback是否确实是一个函数。\n if (typeof callback == 'function') {\n callback(data); // 执行回调。\n }\n });\n // 返回使用上面的数据填充的对象。\n return ret;\n};\n```\n\n### 使用 **registerMethod()** 在不同的时机注册应由 *p5* 调用的函数。\n\n```js\np5.prototype.doRemoveStuff = function () { \n // 库的清理工作\n};\np5.prototype.registerMethod('remove', p5.prototype.doRemoveStuff);\n```\n\n您可以注册的方法名称包括以下列表。请注意，您可能需要在注册之前定义该函数。\n\n* **pre** - 在`draw()`开始时调用。它可以影响绘制。\n* **post** - 在`draw()`结束时调用。\n* **remove** - 在调用`remove()`时调用。\n* **init** - 在首次初始化sketch时调用，正好在执行sketch初始化函数之前（即传递给`p5`构造函数的函数）。这也在任何全局模式设置之前调用，因此您的库可以向sketch添加任何内容，并且如果激活全局模式，则会自动复制到`window`。\n\n即将发布更多信息，大致与此列表相一致：\n[https://github.com/processing/processing/wiki/Library-Basics#library-methods](https://github.com/processing/processing/wiki/Library-Basics#library-methods)\n\n### 您还可以创建自己的类。\n\n您的库可能根本不会扩展p5或p5类，而是只提供额外的类，可以与库一起实例化和使用。或者它可以两者都做。\n\n## 命名\n\n* **不要覆盖p5函数或属性。** 当您扩展p5.prototype时，要小心不要使用现有属性或函数的名称。您可以使用[hasOwnProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty/)来测试名称。例如，将以下行放在库文件的顶部将打印出true，因为`rect()`方法存在：\n\n ```js\n console.log(p5.prototype.hasOwnProperty('rect'));\n ```\n\n* **类似地，不要覆盖p5类的函数或属性。** 如果您正在扩展p5.Image、p5.Vector、p5.Element等，请按照上述协议进行操作。\n\n* **p5.js有两种模式，全局模式和实例模式。** 在全局模式下，所有的p5属性和方法都绑定到window对象，允许用户调用诸如`background()`之类的方法而无需加任何前缀。然而，这意味着您需要小心不要覆盖原生的JavaScript功能。您可以通过在控制台中键入它们或通过快速的Google搜索来测试现有的JS名称。\n\n* **类通常以大写字母开头，方法和属性以小写字母开头。** 在p5中，类以p5为前缀。我们希望将此命名空间保留给p5核心类，因此在创建自己的类时，**不要包含p5.前缀作为类名**。您可以创建自己的前缀，或者只给它们一个非前缀的名称。\n\n* **p5.js库文件名也以p5为前缀，但下一个单词为小写**，以区分它们与类。例如，p5.sound.js。我们鼓励您遵循此格式为文件命名。\n\n## 打包\n\n* **创建一个包含您的库的单个JS文件。** 这样可以方便用户将其链接到其项目中。您还可以考虑提供正常JS文件和[压缩](http://jscompress.com/)版本的选项，以加快加载速度。\n\n* **贡献的库由创建者托管、文档化和维护。** 这可以在GitHub、一个单独的网站或其他地方进行。\n\n* **文档至关重要！** 您的库的文档应该放在某个易于找到的位置，供下载和使用您的库的用户使用。贡献的库的文档将不会包含在主要的p5.js参考文档中，但您可能希望遵循类似的格式。请参阅这些示例：[库概述页面](https://p5js.org/reference/libraries/p5.sound)、[类概述页面](https://p5js.org/reference/p5.Vector)和[方法页面](https://p5js.org/reference/p5/arc/)。\n\n* **示例也很棒！** 它们向人们展示了您的库能做什么。由于这全部是JavaScript，人们可以在下载之前在线运行它们。[jsfiddle](http://jsfiddle.net/)和[codepen](http://codepen.io)是两个很好的简单选项，可以用来托管示例。\n\n* **告诉我们吧！** 一旦您的库准备好发布，发送一封电子邮件至[hello@p5js.org](mailto:hello@p5js.org)，附上链接和一些信息。我们将在[libraries page](https://p5js.org/libraries/)上包含它！\n"},"文档风格指南\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* 一个帮助我们保持文档风格一致的参考指南。 */}\n\n\n\n你好！欢迎来到 p5.js 文档编写指南。本文档是以下资源的混合：\n\n* Ruby on Rails [API 文档指南](https://guides.rubyonrails.org/api_documentation_guidelines.html) (CC BY-SA 4.0)\n* WordPress 关于[可访问性](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/)和[包容性](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/)的文档指南 (CC0)\n* Airbnb [JavaScript 风格指南](https://airbnb.io/javascript/) (MIT)\n\n我们的社区庞大而多样。许多人使用 p5.js 学习编程，其中很大一部分是 K-12 年级的学生。阅读本指南后，你将了解：\n\n* 如何编写有效、包容和易于访问的文档。\n* 如何为文档编写简单的代码示例。\n\n## 目录\n\n### 写作\n\n* [YUIDoc](#yuidoc)\n* [英语](#英语/)\n* [牛津逗号](#牛津逗号/)\n* [措辞](#措辞/)\n* [无偏见的文档](#无偏见的文档/)\n* [可访问性和残障](#可访问性和残障/)\n\n### 代码\n\n* [代码示例](#代码示例/)\n* [注释](#注释/)\n* [空白](#空白/)\n* [分号](#分号/)\n* [命名约定](#命名约定/)\n* [变量](#变量/)\n* [字符串](#字符串/)\n* [布尔运算符](#布尔运算符/)\n* [条件语句](#条件语句/)\n* [迭代](#迭代/)\n* [对象](#对象/)\n* [数组](#数组/)\n* [函数](#函数/)\n* [箭头函数](#箭头函数/)\n* [链式调用](#链式调用/)\n* [类](#类/)\n* [资源](#资源/)\n\n## YUIDoc\n\n我们使用 YUIDoc 来生成 p5.js API 文档。要生成文档，请切换到 p5.js 根目录，运行 `npm install`，然后执行：\n\n```\n$ npm run grunt yui:dev\n```\n\n输出将出现在 docs/reference 目录中。更多信息请参考[内联文档指南](../contributing_to_the_p5js_reference/)。\n\n**[⬆ 返回顶部](#目录/)**\n\n## 英语\n\n请使用美式英语（color、center、modularize 等）。参见[美式和英式英语拼写差异列表](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/)。\n\n**[⬆ 返回顶部](#目录/)**\n\n## 牛津逗号\n\n请使用[牛津逗号](https://en.wikipedia.org/wiki/Serial_comma/)（\"red, white, and blue\"，而不是\"red, white and blue\"）。\n\n**[⬆ 返回顶部](#目录/)**\n\n## 措辞\n\n写简单、陈述性的句子。简洁是加分项：直奔主题。\n\n使用现在时态：\"Returns an object that...\"，而不是\"Returned an object that...\"或\"Will return an object that...\"。\n\n注释以大写字母开头。遵循常规标点规则：\n\n```javascript\n// Draws a fractal from a Julia set.\nfunction drawFractal(c, radius, maxIter) {\n // ...\n}\n```\n\n明确和隐式地传达当前的做事方式。使用本指南中推荐的惯用语。如果需要，重新排序部分以强调首选方法。文档应该是最佳实践的典范，并且对初学者友好。\n\n文档必须简洁但全面。探索并记录边缘情况。每种参数组合会发生什么？初学者的代码中最可能出现哪些错误？\n\n正确拼写名称：p5.js、CSS、HTML、JavaScript、WebGL。如有疑问，请参考官方文档等权威来源。\n\n**[⬆ 返回顶部](#目录/)**\n\n## 无偏见的文档\n\n编写文档时不要对任何类型的人有偏见。在记录特别要求高/敏感的主题时，花时间自己学习一下。确保你的写作不会无意中伤害或冒犯他人。\n\n在编写无偏见的文档时：\n\n* 包容所有性别认同和表达、性取向、种族、民族、语言、神经类型、体型、残障、阶级、宗教、文化、亚文化、政治观点、年龄、技能水平、职业和背景。使示例像我们的社区一样多样化。\n* 避免政治化内容。如果政治内容是必要的，保持中立。\n* 遵循可访问性指南。\n* 避免会侮辱或伤害人们的内容。\n* 不要对人们、国家和文化做任何概括。这包括正面或中立的概括。\n* 不要编写针对少数群体的偏见和歧视性内容。\n* 避免与历史事件相关的术语。\n\n优先使用避免\"you\"和\"your\"的措辞。例如，不要：\n\n```\nIf you need to declare a variable, it is recommended that you use `let`.\n```\n\n而是使用这种风格：\n\n```\nAlways use `let` to declare variables.\n```\n\n**代词**\n\n| 推荐 | 不推荐 |\n| ---------- | ------------------ |\n| they | he or she |\n| them | him or her |\n| their | his or her |\n| theirs | his or hers |\n| themselves | himself or herself |\n\n**[⬆ 返回顶部](#目录/)**\n\n## 可访问性和残障\n\n* 注重读者而不是强调他们的不便。\n* 不要将残障人士称为残疾人。使用[批准的术语](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology)来指代特定残障的人。\n* 在整个 p5.js 文档中保持统一的结构。在风格和视觉上强调重要点。\n* 使用屏幕阅读器测试文档。要测试屏幕阅读器，请参见[屏幕阅读器列表](https://en.wikipedia.org/wiki/List_of_screen_readers/)。\n* 考虑所有类型设备和操作系统的多平台可访问性。\n* 创建使用所有类型输入设备的示例，如基于语音和手势的设备、控制器、鼠标和键盘。\n* 不要使用能力歧视语言。在编写关于可访问性和残障的内容时要包容和无偏见。\n* 对 HTML 语义采取实用方法。不要纯粹为了语义而添加语义。如果有明显匹配内容的 HTML 结构，请使用该元素。例如，一组链接很可能应该使用列表元素。\n* 使用简单的表格和表格格式。避免使用 span 标签（如 rowspan 和 colspan）。表格对屏幕阅读器来说很困难。\n\n**可访问性术语**\n\n以下术语改编自 WordPress 文档指南中的[编写包容性文档](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology)。有关以人为本语言的更多背景，请参见 CDC 的[与残障人士沟通指南](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html)。\n\n| 推荐 | 不推荐 |\n| ------------- | -------------------- |\n| 残障人士 | 残疾人、残障、能力不同、有挑战、不正常 |\n| 非残障人士 | 正常人、健康人、健全人 |\n| 有\\[残障] | 受害者、遭受、受...影响、被...折磨 |\n| 无法说话，使用合成语音 | 哑巴、失语 |\n| 聋人，听力低下 | 听力障碍 |\n| 盲人，视力低下 | 视力障碍，视觉挑战 |\n| 认知或发育障碍 | 智力挑战，学习缓慢 |\n| 行动不便的人，身体残障的人 | 瘸子，残障 |\n\n## 代码示例\n\n选择有意义的代码示例，涵盖基础知识以及容易出错的地方。只有在解释功能工作原理时才使用高级语法。当一个圆就能传达想法时，不要画五个圆来解释。代码示例本身应遵循以下指南。\n\n**[⬆ 返回顶部](#目录/)**\n\n## 注释\n\n* 使用 `//` 进行单行注释。将单行注释放在注释主题上方的新行上。除非是块的第一行，否则在注释前放置一个空行。\n\n```javascript\n// 不好。\nlet magicWord = 'Please'; // 记住这个。\n\n// 好。\n// 记住这个。\nlet magicWord = 'Please';\n\n// 不好。\nif (keyIsPressed === true) {\n thing1();\n // 这是一个重要的注释。\n thing2();\n}\n\n// 好。\nif (keyIsPressed === true) {\n thing1();\n\n // 这是一个重要的注释。\n thing2();\n}\n```\n\n* 所有注释都以空格开头，使其更易于阅读。\n\n```javascript\n// 不好。\n//记住这个。\nlet magicWord = 'Please';\n\n// 好。\n// 记住这个。\nlet magicWord = 'Please';\n```\n\n* 使用 `//` 进行多行注释。\n\n```javascript\n\n// 不好。\n/**\n * 我将使用 // 进行多行注释。\n * 我将使用 // 进行多行注释。\n * 我将使用 // 进行多行注释。\n * 我将使用 // 进行多行注释。\n * 我将使用 // 进行多行注释。\n */\n\n// 不好。\n/*\n 我将使用 // 进行多行注释。\n 我将使用 // 进行多行注释。\n 我将使用 // 进行多行注释。\n 我将使用 // 进行多行注释。\n 我将使用 // 进行多行注释。\n */\n\n// 好。\n// 我将使用 // 进行多行注释。\n// 我将使用 // 进行多行注释。\n// 我将使用 // 进行多行注释。\n// 我将使用 // 进行多行注释。\n// 我将使用 // 进行多行注释。\n\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 空白\n\n* 缩进块 2 个空格。\n\n```javascript\n// 不好。\nfunction setup() {\n∙∙∙∙createCanvas(400, 400);\n}\n\n// 不好。\nfunction setup() {\n∙createCanvas(400, 400);\n}\n\n// 好。\nfunction setup() {\n∙∙createCanvas(400, 400);\n}\n```\n\n* 在左大括号前放置 1 个空格。\n\n```javascript\n// 不好。\nfunction setup(){\n createCanvas(400, 400);\n}\n\n// 好。\nfunction setup() {\n createCanvas(400, 400);\n}\n```\n\n* 在控制语句（如 `if` 和 `for`）中的左括号前放置 1 个空格。在参数列表和函数名之间不要放置空格。\n\n```javascript\n// 不好。\nif(keyIsPressed === true) {\n doStuff ();\n}\n\n// 好。\nif (keyIsPressed === true) {\n doStuff();\n}\n\n// 不好。\nfunction setup () {\n createCanvas (400, 400);\n}\n\n// 好。\nfunction setup() {\n createCanvas(400, 400);\n}\n```\n\n* 在运算符之间放置空格。\n\n```javascript\n// 不好。\nlet y=x+5;\n\n// 好。\nlet y = x + 5;\n```\n\n## 分号\n\n* 使用分号。\n\n> 为什么？JavaScript 的[自动分号插入](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion)可能导致细微的错误。\n\n```javascript\n// 不好。\nlet x = 0\n\n// 好。\nlet x = 0;\n```\n\n## 命名约定\n\n* 避免使用单字母名称。要有描述性。\n\n```javascript\n// 不好。\nfunction f(x, y) {\n // ...\n}\n\n// 好。\nfunction vectorField(x, y) {\n // ...\n}\n```\n\n* 使用驼峰命名法命名对象、函数和实例。\n\n```javascript\n// 不好。\nlet OBJEcttsssss = {};\n\n// 不好。\nlet this_is_my_object = {};\n\n// 好。\nlet thisIsMyObject = {};\n```\n\n* 使用帕斯卡命名法命名类。\n\n```javascript\n// 不好。\nclass player {\n constructor(name) {\n this.name = name;\n }\n}\n\n// 好。\nclass Player {\n constructor(name) {\n this.name = name;\n }\n}\n```\n\n* 不要使用尾随或前导下划线。\n\n> 为什么？JavaScript 没有私有属性或方法。\n\n```javascript\n// 不好。\nclass Spy {\n constructor(secret) {\n this._secret = secret;\n }\n}\n\n// 好。\nclass Spy {\n constructor(secret) {\n this.secret = secret;\n }\n}\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 变量\n\n* 避免使用 `var` 声明变量。\n\n> 为什么？使用 `var` 声明的变量具有令人困惑的作用域规则。这些会导致细微的错误。\n\n```javascript\n// 不好，因为它看起来合理。\ncircle(x, y, 50);\nvar x = 200;\nvar y = 200;\n\n// 好，因为它会抛出 ReferenceError。\ncircle(x, y, 50);\nlet x = 200;\nlet y = 200;\n```\n\n* 始终使用 `let` 声明变量。避免使用 `const`。\n\n> 为什么？使用 `let` 声明的变量比使用 `var` 声明的变量更容易理解。变量在草图中经常被重新赋值，所以默认使用 `let` 很有帮助。\n\n```javascript\n// 不好。\nflower = '🌸';\nvar flower = '🌸';\nconst flower = '🌸';\n\n// 好。\nlet flower = '🌸';\n```\n\n* 每个变量或赋值使用一个 `let` 声明。\n\n> 为什么？这样更容易阅读和添加新的变量声明。\n\n```javascript\n// 不好。\nlet positions = getPositions(),\n startSearch = true,\n dragonball = 'z';\n\n// 好。\nlet positions = getPositions();\nlet startSearch = true;\nlet dragonball = 'z';\n```\n\n* 在需要的地方分配变量，并将它们放在合理的位置。\n\n> 为什么？`let` 是块作用域而不是函数作用域。\n\n```javascript\n// 不好 - 不必要的搜索。\nfunction getCharacter(name = 'default') {\n let character = characters.find((c) => c.name === name);\n\n if (name === 'default') {\n return false;\n }\n\n if (character) {\n return character;\n }\n \n return false;\n}\n\n// 好。\nfunction getCharacter(name = 'default') {\n if (name === 'default') {\n return false;\n }\n\n let character = characters.find((c) => c.name === name);\n\n if (character) {\n return character;\n }\n \n return false;\n}\n```\n\n* 避免使用一元递增和递减（`++`，`--`）。\n\n> 为什么？一元递增和递减语句受[自动分号插入](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion)的影响。这可能导致递增或递减值的静默错误。使用像 `num += 1` 这样的语句更新变量也比 `num++` 更具表现力。\n\n```javascript\n// 不好。\nlet num = 1;\nnum++;\n--num;\n\n// 好。\nlet num = 1;\nnum += 1;\nnum -= 1;\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 字符串\n\n* 使用单引号 `''` 表示字符串。\n\n```javascript\n// 不好。\nlet name = \"Hilma af Klint\";\n\n// 不好 - 模板字面量应包含插值或换行。\nlet name = `Hilma af Klint`;\n\n// 好。\nlet name = 'Hilma af Klint';\n```\n\n* 不要连接导致行超过 80 个字符的字符串。\n\n> 为什么？断开的字符串难以阅读，使代码不易搜索。\n\n```javascript\n// 不好。\nlet essay = 'You see us as you want to see us: \\\nin the simplest terms, in the most convenient definitions.';\n\n// 不好。\nlet essay = 'You see us as you want to see us: ' +\n 'in the simplest terms, in the most convenient definitions.';\n\n// 好。\nlet essay = 'You see us as you want to see us: in the simplest terms, in the most convenient definitions.';\n```\n\n* 需要时使用模板字符串而不是连接。\n\n> 为什么？模板字符串具有简洁的语法。它们还提供适当的换行和字符串插值功能。\n\n```javascript\nlet name = 'Dave';\n\n// 不好。\ntext(name + ', this conversation can serve no purpose anymore. Goodbye.' + name, 0, 0);\n\n// 好。\ntext(`${name}, this conversation can serve no purpose anymore. Goodbye.`, 0, 0);\n```\n\n* 不要在字符串中不必要地转义字符。\n\n> 为什么？反斜杠会损害可读性。\n\n```javascript\n// 不好。\nlet bad = '\\'this\\' \\i\\s \\\"quoted\\\"';\n\n// 好。\nlet good = 'Air quotes make you look \"cool\".';\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 布尔运算符\n\n* 使用 `===` 和 `!==` 而不是 `==` 和 `!=`。\n\n* 不要使用布尔值的快捷方式。\n\n> 为什么？对初学者来说更容易理解。\n\n```javascript\n// 不好。\nif (mouseIsPressed) {\n // ...\n}\n\n// 好。\nif (mouseIsPressed === true) {\n // ...\n}\n\n// 不好。\nif (name) {\n // ...\n}\n\n// 好。\nif (name !== '') {\n // ...\n}\n\n// 不好。\nif (collection.length) {\n // ...\n}\n\n// 好。\nif (collection.length > 0) {\n // ...\n}\n```\n\n* 除非必要，否则不要使用 `switch` 语句。\n\n* 混合运算符时使用括号。唯一的例外是算术运算符 `+`、`-` 和 `**`。\n\n> 为什么？这样更容易阅读并避免细微的错误。\n\n```javascript\n// 不好。\nlet huh = a && b < 0 || c > 0 || d + 1 === 0;\n\n// 好。\nlet huh = (a && b < 0) || c > 0 || (d + 1 === 0);\n\n// 不好。\nif (a || b && c) {\n return d;\n}\n\n// 好。\nif (a || (b && c)) {\n return d;\n}\n\n// 不好。\nlet what = a + b / c * d;\n\n// 好。\nlet what = a + (b / c) * d;\n```\n\n## 条件语句\n\n* 对所有多行块使用大括号。\n\n```javascript\n// 不好。\nif (mouseIsPressed === true)\n circle(mouseX, mouseY, 50);\n\n// 更好。\nif (mouseIsPressed === true) circle(mouseX, mouseY, 50);\n\n// 最好。\nif (mouseIsPressed === true) {\n circle(mouseX, mouseY, 50);\n}\n```\n\n* 将 `else` 放在前一个 `if` 块的右大括号的同一行。\n\n```javascript\n// 不好。\nif (mouseIsPressed === true) {\n thing1();\n thing2();\n}\nelse {\n thing3();\n}\n\n// 好。\nif (mouseIsPressed === true) {\n thing1();\n thing2();\n} else {\n thing3();\n}\n```\n\n* 在总是执行 `return` 语句的 `if` 块后不要使用 `else` 块。\n\n```javascript\n// 不好。\nfunction mouseIsOnLeft() {\n if (mouseX < width * 0.5) {\n return true;\n } else {\n return false;\n }\n}\n\n// 好。\nfunction mouseIsOnLeft() {\n if (mouseX < width * 0.5) {\n return true;\n }\n\n return false;\n}\n```\n\n* 如果条件太长，将每个（分组的）条件放在新行上。逻辑运算符应该开始行。\n\n> 为什么？这样更容易阅读。\n\n```javascript\n// 不好。\nif ((number === 123 || letters === 'abc') && mouseIsPressed === true && keyIsPressed === true) {\n doStuff();\n}\n\n// 好。\nif (\n (number === 123 || letters === 'abc')\n && mouseIsPressed === true\n && keyIsPressed === true\n) {\n doStuff();\n}\n```\n\n* 不要使用选择运算符代替条件语句。\n\n```javascript\n// 不好。\nrefrigeratorIsRunning && goCatchIt();\n\n// 好。\nif (refrigeratorIsRunning === true) {\n goCatchIt();\n}\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 迭代\n\n* 除非必要，否则不要使用 `while` 或 `do-while` 循环。使用 `for` 循环来迭代固定次数。\n\n```javascript\nlet numPetals = 7;\n\n// 不好。\nlet i = 0;\nwhile (i < numPetals) {\n ellipse(0, 0, 20, 80);\n rotate(PI / numPetals);\n i += 1;\n}\n\n// 好。\nfor (let i = 0; i < numPetals; i += 1) {\n ellipse(0, 0, 20, 80);\n rotate(PI / numPetals);\n}\n```\n\n* 不要使用 `for` 循环来迭代数组。\n\n> 为什么？纯函数比副作用更容易推理。\n\n> 使用 `forEach()` / `map()` / `every()` / `filter()` / `find()` / `findIndex()` / `reduce()` / `some()` / `...` 来迭代数组。使用 `Object.keys()` / `Object.values()` / `Object.entries()` 来生成用于迭代对象的数组。\n\n```javascript\nlet diameters = [50, 40, 30, 20, 10];\n\n// 不好。\nfor (let i = 0; i < diameters.length; i += 1) {\n circle(0, 0, diameters[i]);\n}\n\n// 不好。\nfor (let d of diameters) {\n circle(0, 0, d);\n}\n\n// 好。\ndiameters.forEach((d) => circle(0, 0, d));\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 对象\n\n* 使用字面量语法创建对象。\n\n```javascript\n// 不好。\nlet ball = new Object();\n\n// 好。\nlet ball = {};\n```\n\n* 只对无效标识符的属性使用引号。\n\n> 为什么？这样更容易阅读并提高语法高亮。JavaScript 引擎也更容易优化性能。\n\n```javascript\n// 不好。\nlet secretObject = {\n 'x': 100,\n 'y': 200,\n 'top-secret': 'classified',\n};\n\n// 好。\nlet secretObject = {\n x: 3,\n y: 4,\n 'top-secret': 'classified',\n};\n```\n\n* 使用点表示法访问属性。\n\n```javascript\nlet turtle = {\n name: 'Leonardo',\n color: 'dodgerblue',\n weapon: '🗡️',\n food: '🍕',\n};\n\n// 不好。\nlet turtleName = turtle['name'];\n\n// 好。\nlet turtleName = turtle.name;\n```\n\n* 使用方括号表示法 `[]` 访问带有变量的属性。\n\n```javascript\nlet turtle = {\n name: 'Leonardo',\n color: 'dodgerblue',\n weapon: '🗡️',\n food: '🍕',\n};\n\nfunction getProp(prop) {\n return turtle[prop];\n}\n\nlet turtleName = getProp('name');\n```\n\n* 不要使用前导逗号。\n\n```javascript\n// 不好。\nlet mathematician = {\n firstName: 'Ada'\n , lastName: 'Lovelace'\n};\n\n// 好。\nlet mathematician = {\n firstName: 'Ada',\n lastName: 'Lovelace',\n};\n```\n\n* 添加尾随逗号。\n\n```javascript\n// 不好。\nlet artist = {\n firstName: 'Lauren',\n lastName: 'McCarthy'\n};\n\n// 好。\nlet artist = {\n firstName: 'Lauren',\n lastName: 'McCarthy',\n};\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 数组\n\n* 使用字面量语法创建数组。\n\n```javascript\n// 不好。\nlet images = new Array();\n\n// 好。\nlet images = [];\n```\n\n* 使用 [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) 而不是直接赋值来向数组添加项目。\n\n```javascript\nlet lyrics = [];\n\n// 不好。\nlyrics[lyrics.length] = 'Little rough around the edges, but I keep it smooth';\n\n// 好。\nlyrics.push('Little rough around the edges, but I keep it smooth');\n```\n\n* 使用 `slice()` 方法复制数组。\n\n```javascript\n// 不好。\nlet numbersCopy = [];\n\nfor (let i = 0; i < numbers.length; i += 1) {\n numbersCopy[i] = numbers[i];\n}\n\n// 好。\nlet numbersCopy = numbers.slice();\n```\n\n* 当提高可读性时，在多行上编写数组。在左括号后和右括号前使用换行。添加尾随逗号。\n\n```javascript\n// 不好。\nlet matrix = [[1, 0, 0],\n [0, 1, 0],\n [0, 0, 1]];\n\n// 好。\nlet matrix = [\n [1, 0, 0],\n [0, 1, 0],\n [0, 0, 1],\n];\n\n// 也好。\nlet matrix = [[1, 0, 0], [0, 1, 0], [0, 0, 1]];\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 函数\n\n* 使用函数声明而不是命名函数表达式。\n\n> 为什么？函数声明有一些陷阱，但对初学者来说更容易理解。\n\n```javascript\n// 不好。\nlet foo = function () {\n // ...\n};\n\n// 不好。\nlet foo = () => {\n // ...\n};\n\n// 好。\nfunction foo() {\n // ...\n}\n```\n\n* 使用默认参数语法。不要改变函数参数。\n\n```javascript\n// 不好。\nfunction createBall(diameter) {\n diameter = diameter || 50;\n // ...\n}\n\n// 好。\nfunction createBall(diameter = 50) {\n // ...\n}\n```\n\n* 始终将默认参数放在最后。\n\n```javascript\n// 不好。\nfunction drawSpiral(angle = 90, length) {\n // ...\n}\n\n// 好。\nfunction drawSpiral(length, angle = 90) {\n // ...\n}\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 箭头函数\n\n* 对匿名函数使用箭头函数表示法。回调是这种语法的常见用例。\n\n> 为什么？语法更简洁。它还创建了一个在 `this` 上下文中执行的函数版本，这通常很有帮助。\n\n> 为什么不？如果匿名函数很复杂，将其重写为声明的函数。\n\n```javascript\n// 不好。\nfunction setup() {\n loadImage('assets/moonwalk.jpg', function (img) {\n image(img, 0, 0);\n });\n}\n\n// 好。\nfunction setup() {\n loadImage('assets/moonwalk.jpg', (img) => {\n image(img, 0, 0);\n });\n}\n\n// 不好。\nfunction preload() {\n loadImage('assets/moonwalk.jpg', (img) => {\n // 复杂的预处理...\n });\n}\n\n// 好。\nfunction preload() {\n loadImage('assets/moonwalk.jpg', processImage);\n}\n\nfunction processImage(img) {\n // 复杂的预处理...\n}\n```\n\n* 尽可能使用隐式返回。如果函数体返回单个语句且没有副作用，则省略大括号。否则，保留大括号并使用 `return` 语句。\n\n> 为什么？这样更容易阅读。\n\n```javascript\n// 不好。\n[1, 2, 3].map((number) => {\n let squared = number ** 2;\n `${number} squared is ${squared}.`;\n});\n\n// 不好。\n[1, 2, 3].map((number) => {\n let squared = number ** 2;\n return `${number} squared is ${squared}.`;\n});\n\n// 好。\n[1, 2, 3].map((number) => `${number} squared is ${number ** 2}.`);\n```\n\n* 始终在参数周围包含括号。\n\n> 为什么？这样做可以减少更改参数时的错误。\n\n```javascript\n// 不好。\n[1, 2, 3].map(number => number * number);\n\n// 好。\n[1, 2, 3].map((number) => number * number);\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 链式调用\n\n* 使用单独的函数调用而不是函数链式调用。\n\n> 为什么？适应可能不熟悉函数链式调用概念的用户。\n\n```javascript\n// 不好。\nfill(0)\n .strokeWeight(6)\n .textSize(20);\n\n// 不好。\nfill(0).strokeWeight(6).textSize(20);\n\n// 好。\nfill(0);\nstrokeWeight(6);\ntextSize(20);\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 类\n\n* 始终使用 `class`。避免直接操作 `prototype`。唯一的例外是解释如何[创建库](../creating_libraries/)。\n\n> 为什么？`class` 语法更简洁，更容易理解。\n\n```javascript\n// 不好。\nfunction Mover(x, y, radius) {\n this.x = x;\n this.y = y;\n this.radius = radius;\n}\n\nMover.prototype.update = function () {\n this.x += 1;\n this.y += 1;\n};\n\nMover.prototype.render = function () {\n circle(this.x, this.y, 2 * this.radius);\n};\n\n// 好。\nclass Mover {\n constructor(x, y, radius) {\n this.x = x;\n this.y = y;\n this.radius = radius;\n }\n\n update() {\n this.x += 1;\n this.y += 1;\n }\n\n render() {\n circle(this.x, this.y, 2 * this.radius);\n }\n}\n```\n\n* 使用 `extends` 进行继承。\n\n```javascript\nclass RandomMover extends Mover {\n update() {\n this.x += random(-1, 1);\n this.y += random(-1, 1);\n }\n}\n```\n\n* 确保自定义 `toString()` 方法不会引起副作用。\n\n```javascript\n// 不好。\nclass Mover {\n // ...\n\n toString() {\n this.x += 1;\n return `Mover at (${this.x}, ${this.y})`;\n }\n}\n\n// 好。\nclass Mover {\n // ...\n\n toString() {\n return `Mover at (${this.x}, ${this.y})`;\n }\n}\n```\n\n* 不要编写空的构造函数或仅委托给父类的构造函数。\n\n> 为什么？如果未指定，类有默认构造函数。\n\n```javascript\n// 不好。\nclass Dot {\n constructor() {}\n\n render() {\n circle(mouseX, mouseY, 50);\n }\n}\n\n// 好。\nclass Dot {\n render() {\n circle(mouseX, mouseY, 50);\n }\n}\n\n// 不好。\nclass DragonBall extends Ball {\n constructor(x, y, d) {\n super(x, y, d);\n }\n}\n\n// 好。\nclass DragonBall extends Ball {\n constructor(x, y, d, numStars) {\n super(x, y, d);\n this.numStars = numStars;\n }\n}\n```\n\n* 避免重复的类成员。\n\n> 为什么？重复的类成员声明优先选择最后一个。有重复通常意味着有错误。\n\n```javascript\n// 不好。\nclass Mover {\n // ...\n\n update() {\n this.x += this.xspeed;\n this.y += this.yspeed;\n }\n\n update() {\n this.x = 0;\n this.y = 0;\n }\n}\n\n// 好。\nclass Mover {\n // ...\n \n update() {\n this.x += this.xspeed;\n this.y += this.yspeed;\n }\n\n reset() {\n this.x = 0;\n this.y = 0;\n }\n}\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 资源\n\n* 始终从名为\"assets\"的文件夹加载资源。\n\n> 为什么？它模拟了良好的项目组织。这也是在 p5.js 网站上加载资源所必需的。将资源放在以下文件夹中以将其包含在我们的在线文档中：\n\n* 示例：[src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/)\n* 参考页面：[src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/)\n* 学习页面：[src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/)\n\n```javascript\nlet img;\n\n// 不好。\nfunction preload() {\n img = loadImage('moonwalk.jpg');\n}\n\n// 好。\nfunction preload() {\n img = loadImage('assets/moonwalk.jpg');\n}\n```\n\n**[⬆ 返回顶部](#目录/)**\n"},"友好错误系统贡献指南\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* 友好错误系统代码库概述和开发者参考。 */}\n\n\n\n`core/friendly_errors`文件夹包含了p5js的友好错误系统(FES)代码，该系统负责生成友好错误消息或友好错误。您可能已经在控制台中看到以\"`🌸 p5.js says:`\"开头的友好错误消息，这些消息是对默认浏览器生成的错误消息的补充。\n\nFES包含多个负责生成不同类型错误的友好错误消息的函数。这些函数从各种位置收集错误，包括文件加载错误和自动播放错误的错误处理，库内的参数检查，以及p5.js贡献者实现的其他自定义错误处理。\n\n本文档首先概述了FES的主要函数及其位置。在随后的参考部分，您将找到有关这些单独函数的完整信息（描述、语法、参数、位置）。在文档的最后部分，您将找到我们以前的贡献者的笔记（开发笔记），概述了FES的已知限制和可能的未来方向。如果您正在考虑为FES做贡献，请查看[开发笔记](#-开发笔记/)！\n\n## 概述\n\n生成友好错误消息的主要函数是：\n\n* `p5._friendlyError()`：将输入消息格式化并打印（通过`_report()`）为友好错误\n* `p5._validateParameters()`：验证接收到的输入值是否有错误类型或缺少值\n* `p5._friendlyFileLoadError()`：指导用户解决与文件加载函数相关的错误\n* `p5._friendlyAutoplayError()`：指导用户解决与浏览器自动播放策略相关的错误\n\n以下是一个图表，概述了FES中所有函数的位置以及它们如何相互连接：\n\n\n\n各个文件包含以下主要FES函数：\n\n* `fes_core.js`：包含`_report()`、`_friendlyError()`和`_friendlyAutoplayError()`，以及用于格式化和测试友好错误的其他辅助函数。\n* `validate_params.js`：包含`_validateParameters()`以及用于参数验证的其他辅助函数。\n* `file_errors.js`：包含`_friendlyFileLoadError()`和用于文件加载错误的其他辅助函数。\n* `browser_errors.js`：包含将使用FES全局错误类（`fes.globalErrors`）生成的浏览器错误列表。\n* `stacktrace.js`：包含解析错误堆栈的代码（借用自[stacktrace.js](https://github.com/stacktracejs/stacktrace.js)）。\n\n## 📚 参考：FES函数\n\n### `_report()`\n\n#### 描述\n\n`_report()`是直接将错误辅助消息输出到控制台的主要函数。\n\n\\*\\*注意：\\*\\*如果设置了`p5._fesLogger`（即，我们正在运行测试），则将使用它代替`console.log`。这在我们通过Mocha运行测试时非常有用。在这种情况下，`_fesLogger`将让`_report`将错误消息作为字符串传递给Mocha，该字符串将与断言的字符串进行测试。\n\n#### 语法\n\n```js\n_report(message);\n\n_report(message, func);\n\n_report(message, func, color);\n```\n\n#### 参数\n\n```\n@param {String} message 要打印的消息\n@param {String} [func] 函数名称\n@param {Number|String} [color] CSS颜色代码\n```\n\n`[func]`输入用于在错误消息末尾附加参考链接。\n\n`[color]`输入用于设置错误消息的颜色属性。这在当前版本的友好错误消息中未使用。\n\n#### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `_friendlyError()`\n\n#### 描述\n\n`_friendlyError()`创建并打印友好错误消息。任何p5函数都可以调用此函数来提供友好错误消息。\n\n`_friendlyFileLoadError()`位于以下函数内：\n\n* `image/loading_displaying/loadImage()`\n* `io/files/loadFont()`\n* `io/files/loadTable()`\n* `io/files/loadJSON()`\n* `io/files/loadStrings()`\n* `io/files/loadXML()`\n* `io/files/loadBytes()`。\n\n对`_friendlyFileLoadError`的调用序列看起来像这样：\n\n```\n_friendlyFileLoadError\n _report\n```\n\n#### 语法\n\n```js\n_friendlyFileLoadError(errorType, filePath);\n```\n\n#### 参数\n\n```\n@param {Number} errorType 文件加载错误类型的编号\n@param {String} filePath 导致错误的文件路径\n```\n\n`errorType`输入指的是`core/friendly_errors/file_errors.js`中枚举的特定类型的文件加载错误。p5.js中的文件加载错误被分为各种不同的情况。这种分类旨在便于提供与不同错误场景相对应的精确和信息丰富的错误消息。例如，当它无法读取字体文件中的数据时，它可以显示与尝试加载过大无法读取的文件时不同的错误。\n\n#### 示例\n\n文件加载错误示例：\n\n```js\n/// 缺少字体文件\nlet myFont;\nfunction preload() {\n myFont = loadFont('assets/OpenSans-Regular.ttf');\n}\nfunction setup() {\n fill('#ED225D');\n textFont(myFont);\n textSize(36);\n text('p5*js', 10, 50);\n}\nfunction draw() {}\n```\n\n除了浏览器的\"不支持\"错误外，FES还将在控制台中生成以下消息：\n\n```\n🌸 p5.js says: 看起来加载字体时出现了问题。请检查文件路径(assets/OpenSans-Regular.ttf)是否正确，尝试在线托管文件，或运行本地服务器。\n\n+ 更多信息：https://github.com/processing/p5.js/wiki/Local-server\n```\n\n#### 位置\n\n/friendly\\_errors/file\\_errors.js\n\n### `_friendlyAutoplayError()`\n\n#### 描述\n\n如果存在与播放媒体（例如视频）相关的错误，`_friendlyAutoplayError()`会在内部调用，这很可能是由于浏览器的自动播放策略。\n\n它调用`translator()`使用键`fes.autoplay`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。\n\n#### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `_validateParameters()`\n\n#### 描述\n\n`_validateParameters()`通过将输入参数与`docs/reference/data.json`中的信息匹配来运行参数验证，该信息是从函数的内联文档创建的。它检查函数调用是否包含正确数量和正确类型的参数。\n\n它调用`translator()`使用键`fes.friendlyParamError.*`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。\n\n可以通过`p5._validateParameters(FUNCT_NAME, ARGUMENTS)`或`p5.prototype._validateParameters(FUNCT_NAME, ARGUMENTS)`在需要参数验证的函数内部调用此函数。建议将静态版本`p5._validateParameters`用于一般用途。`p5.prototype._validateParameters(FUNCT_NAME, ARGUMENTS)`主要用于调试和单元测试。\n\n`_validateParameters()`函数位于这些函数内：\n\n* `accessibility/outputs`\n* `color/creating_reading`\n* `color/setting`\n* `core/environment`\n* `core/rendering`\n* `core/shape/2d_primitives`\n* `core/shape/attributes`\n* `core/shape/curves`\n* `core/shape/vertex`\n* `core/transform`\n* `data/p5.TypedDict`\n* `dom/dom`\n* `events/acceleration`\n* `events/keyboard`\n* `image/image`\n* `image/loading_displaying`\n* `image/p5.Image`\n* `image/pixel`\n* `io/files`\n* `math/calculation`\n* `math/random`\n* `typography/attributes`\n* `typography/loading_displaying`\n* `utilities/string_functions`\n* `webgl/3d_primitives`\n* `webgl/interaction`\n* `webgl/light`\n* `webgl/loading`\n* `webgl/material`\n* `webgl/p5.Camera`\n\n从`_validateParameters`的调用序列看起来像这样：\n\n```\nvalidateParameters\n buildArgTypeCache\n addType\n lookupParamDoc\n scoreOverload\n testParamTypes\n testParamType\n getOverloadErrors\n _friendlyParamError\n ValidationError\n report\n friendlyWelcome\n```\n\n#### 语法\n\n```js\n_validateParameters(func, args);\n```\n\n#### 参数\n\n```\n@param {String} func 被调用的函数的名称\n@param {Array} args 用户输入参数\n```\n\n#### 示例\n\n缺少参数的示例：\n\n```js\narc(1, 1, 10.5, 10);\n```\n\nFES将在控制台中生成以下消息：\n\n```\n🌸 p5.js says: [sketch.js, line 13] arc()至少需要6个参数，但只收到了4个。 (https://p5js.org/reference/p5/arc)\n```\n\n类型不匹配的示例：\n\n```js\narc(1, ',1', 10.5, 10, 0, Math.PI);\n```\n\nFES将在控制台中生成以下消息：\n\n```\n🌸 p5.js says: [sketch.js, line 14] arc()的第一个参数需要Number类型，但收到了string类型。 (https://p5js.org/reference/p5/arc)\n```\n\n#### 位置\n\ncore/friendly\\_errors/validate\\_params.js\n\n### `fesErrorMonitor()`\n\n#### 描述\n\n`fesErrorMonitor()`监控浏览器错误消息，猜测错误的来源并为用户提供额外的指导。这包括堆栈跟踪，它是程序中直到抛出错误点为止调用的函数的顺序列表。堆栈跟踪对于确定错误是内部的还是由用户直接调用的某些内容引起的非常有用。\n\n它调用`translator()`使用键`fes.globalErrors.*`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。\n\n以下是通过`fesErrorMonitor()`生成的错误消息的综合列表：\n\n* 使用键的友好错误消息：`fes.globalErrors.syntax.*`、`fes.globalErrors.reference.*`、`fes.globalErrors.type.*`。\n* 通过`processStack()`使用键的\"内部库\"错误消息：`fes.wrongPreload`、`fes.libraryError`。\n* 通过`printFriendlyStack()`使用键的堆栈跟踪消息：`fes.globalErrors.stackTop`、`fes.globalErrors.stackSubseq`。\n* 通过`handleMisspelling()`使用键的拼写检查消息（来自引用错误）：`fes.misspelling`。\n\n`_fesErrorMonitor()`由`window`上的`error`事件和未处理的承诺拒绝（`unhandledrejection`事件）自动触发。但是，可以在catch块中手动调用，如下所示：\n\n```js\ntry { someCode(); } catch(err) { p5._fesErrorMonitor(err); }\n```\n\n该函数目前适用于`ReferenceError`、`SyntaxError`和`TypeError`的子集。您可以在`browser_errors.js`中找到支持的错误的完整列表。\n\n`_fesErrorMonitor`的调用序列大致如下：\n\n```\n _fesErrorMonitor\n processStack\n printFriendlyError\n (if type of error is ReferenceError)\n _handleMisspelling\n computeEditDistance\n _report\n _report\n printFriendlyStack\n (if type of error is SyntaxError、TypeError, etc)\n _report\n printFriendlyStack\n```\n\n#### 语法\n\n```js\nfesErrorMonitor(event);\n```\n\n#### 参数\n\n```\n@param {*} e 错误事件\n```\n\n#### 示例\n\n内部错误示例1：\n\n```js\nfunction preload() {\n // 由于在preload中调用background()\n // 导致错误\n background(200);\n}\n```\n\nFES将在控制台中生成以下消息：\n\n```\n🌸 p5.js says: [sketch.js, line 8] 当调用\"background\"时，p5js库内部发生了一个错误，错误信息为\"无法读取未定义的属性（正在读取'background'）\"。如果没有特别说明，这可能是由于从preload调用\"background\"导致的。preload函数中除了加载调用（loadImage、loadJSON、loadFont、loadStrings等）之外，不应该有任何其他内容。 (https://p5js.org/reference/p5/preload)\n```\n\n内部错误示例2：\n\n```js\nfunction setup() {\n cnv = createCanvas(200, 200);\n cnv.mouseClicked();\n}\n```\n\nFES将在控制台中生成以下消息：\n\n```js\n🌸 p5.js says: [sketch.js, line 12] 当调用mouseClicked时，p5js库内部发生了一个错误，错误信息为\"无法读取未定义的属性（正在读取'bind'）\"。如果没有特别说明，这可能是传递给mouseClicked的参数问题。 (https://p5js.org/reference/p5/mouseClicked)\n```\n\n错误示例（作用域）：\n\n```js\nfunction setup() {\n let b = 1;\n}\nfunction draw() {\n b += 1;\n}\n```\n\nFES将在控制台中生成以下消息：\n\n```\n🌸 p5.js says:\n\n[sketch.js, line 5] 当前作用域中未定义\"b\"。如果您已在代码中定义了它，应检查其作用域、拼写和大小写（JavaScript区分大小写）。\n\n+ 更多信息：https://p5js.org/examples/data-variable-scope.html\n```\n\n错误示例（拼写）：\n\n```js\nfunction setup() {\n xolor(1, 2, 3);\n}\n```\n\nFES将在控制台中生成以下消息：\n\n```\n🌸 p5.js says: [sketch.js, line 2] 您可能不小心写了\"xolor\"而不是\"color\"。如果您希望使用p5.js中的函数，请将其更正为color。 (https://p5js.org/reference/p5/color)\n```\n\n#### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `checkForUserDefinedFunctions()`\n\n#### 描述\n\n检查是否有任何用户定义的函数（`setup()`、`draw()`、`mouseMoved()`等）带有大小写错误。\n\n它调用`translator()`使用键`fes.checkUserDefinedFns`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。\n\n#### 语法\n\n```js\ncheckForUserDefinedFunctions(context);\n```\n\n#### 参数\n\n```\n@param {*} context 当前默认上下文。\n 在\"全局模式\"下设置为window，\n 在\"实例模式\"下设置为p5实例\n```\n\n#### 示例\n\n```js\nfunction preload() {\n loadImage('myimage.png');\n}\n```\n\nFES将在控制台中生成以下消息：\n\n```\n🌸 p5.js says: 您可能不小心写了preLoad而不是preload。如果这不是有意的，请更正它。 (https://p5js.org/reference/p5/preload)\n```\n\n#### 位置\n\n/friendly\\_errors/fes\\_core.js\n\n### `helpForMisusedAtTopLevelCode()`\n\n#### 描述\n\n`helpForMisusedAtTopLevelCode()`在窗口加载时由`fes_core.js`调用，以检查在`setup()`或`draw()`之外使用p5.js函数的情况。\n\n它调用`translator()`使用键`fes.misusedTopLevel`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。\n\n#### 参数\n\n```\n@param {*} err 错误事件\n@param {Boolean} log false\n```\n\n#### 位置\n\n/friendly\\_errors/fes\\_core.js\n\n## 💌 开发笔记\n\n### 已知限制\n\n#### 假阳性与假阴性情况\n\n在FES中，您可能会遇到两种类型的错误：假阳性和假阴性。把假阳性想象成虚假警报。当FES警告您有错误，但您的代码实际上是正确的时，就会出现这种情况。另一方面，假阴性就像遗漏了一个错误。当您的代码中有错误，但FES没有提醒您时，就会发生这种情况。\n\n识别和修复这些错误很重要，因为它们可以节省调试时间，减少混淆，并使修复实际问题变得更容易。\n\n在某些不理想的情况下，错误处理的设计可能需要选择消除假阳性或假阴性。如果必须选择，通常最好消除假阳性。这样，您可以避免生成可能分散注意力或误导用户的不正确警告。\n\n#### 与`fes.GlobalErrors`相关的限制\n\nFES只能检测到使用`const`或`var`声明的被覆盖的全局变量。使用let声明的变量不会被检测到。这个限制是由于`let`处理变量实例化的特定方式导致的，目前无法解决。\n\n`fesErrorMonitor()`下描述的功能目前仅在Web编辑器上或在本地服务器上运行时有效。有关更多详情，请参见 pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]。\n\n### FES的性能问题\n\n默认情况下，p5.js启用FES，而在`p5.min.js`中禁用，以防止FES函数减慢进程。错误检查系统可能会显著减慢您的代码（在某些情况下最多慢10倍）。请参见[友好错误性能测试](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/)。\n\n您可以在草图顶部使用一行代码禁用FES：\n\n```js\np5.disableFriendlyErrors = true; // 禁用FES\nfunction setup() {\n // 进行设置操作\n}\nfunction draw() {\n // 进行绘制操作\n}\n```\n\n请注意，此操作将禁用已知会降低性能的FES某些功能，例如参数检查。但是，不影响性能的友好错误消息仍将启用。这包括在文件加载失败时提供详细的错误消息，或者在您尝试覆盖全局空间中的p5.js函数时显示警告。\n\n### 未来工作的想法\n\n* 解耦FES \\[[#5629](https://github.com/processing/p5.js/issues/5629/)]\n* 消除假阳性情况\n* 识别假阴性情况\n* 添加更多单元测试以获得全面的测试覆盖\n* 更直观、清晰且可翻译的消息。关于友好错误国际化的更多讨论，请查看[友好错误i18n手册](https://almchung.github.io/p5-fes-i18n-book/en/)。\n* 识别更多常见错误类型并使用FES进行泛化（例如 `bezierVertex()`、`quadraticVertex()` - 必需对象未初始化；检查 `nf()`、`nfc()`、`nfp()`、`nfs()` 的Number参数是否为正）\n\n## 结论\n\n在本README文档中，我们概述了`core/friendly_errors`文件夹的结构。本节解释了这个文件夹的组织和目的，使其更容易导航和理解。此外，对于此文件夹中的每个函数，我们都提供了参考指南。\n\n在本文档的后半部分，我们包含了以前贡献者的笔记，讨论了FES的当前限制和未来开发中可能的改进领域。\n\n此外，我们很高兴通过2021-2022年进行的FES调查分享来自我们社区的见解。调查结果有两种格式可供查阅：\n\n* [21-22 FES调查报告漫画](https://almchung.github.io/p5jsFESsurvey/)\n* [21-22 FES调查完整报告](https://observablehq.com/@almchung/p5-fes-21-survey/)。\n\n{/* TODO: 当我们发布下面的文章时取消注释 */}\n\n{/* 如果您正在寻找向方法添加友好错误消息的方法，我们建议查看[如何添加友好错误消息](#/)。它将一步步引导您完成向方法添加这些错误消息的过程。 */}\n"},"FES 开发者参考和注释\n":{"relativeUrl":"/contribute/fes_reference_dev_notes","description":"\n\n本文档包含 p5.js 友好错误系统（FES）的参考和开发注释。FES 包含多个函数，负责为不同类型的错误生成友好的错误消息。这些函数从各个位置收集错误，包括浏览器触发的错误事件、扫描用户代码时发现的错误、库内部的参数检查等。\n\n生成友好错误消息的主要函数有：\n\n* `_validateParameters()`\n* `_friendlyFileLoadError()`\n* `_friendlyError()`\n* `helpForMisusedAtTopLevelCode()`\n* `_fesErrorMontitor()`\n\n这些函数位于 `core/friendly_errors/` 文件夹中。\n\n* `fes_core.js` 包含 FES 的核心功能和其他杂项功能。\n* `_validateParameters()` 位于 `validate_params.js` 中，与用于参数验证的其他代码一起。\n* `_friendlyFileLoadError()` 位于 `file_errors.js` 中，与处理文件加载错误的其他代码一起。\n* 此外，还有一个名为 `stacktrace.js` 的文件，其中包含解析错误堆栈的代码，来自于：[https://github.com/stacktracejs/stacktrace.js](https://github.com/stacktracejs/stacktrace.js)\n\n下面的部分介绍了 FES 函数的完整参考。\n\n## FES 函数：参考\n\n### `_report()`\n\n##### 描述\n\n`_report()` 是一个主要函数，直接将错误助手消息的输出打印到控制台。\n如果设置了 `_fesLogger`（即我们正在运行测试），`_report` 将调用 `_fesLogger` 而不是 console.log。\n\n##### 语法\n\n```javascript\n_report(message)\n```\n\n```javascript\n_report(message, func)\n```\n\n```javascript\n_report(message, func, color)\n```\n\n##### 参数\n\n```\n@param {String} message 要打印的消息\n@param {String} [func] 函数名称\n@param {Number|String} [color] CSS 颜色代码\n```\n\n##### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `_friendlyError()`\n\n##### 描述\n\n`_friendlyError()` 创建并打印友好的错误消息。任何p5函数都可以调用此函数以提供友好的错误消息。\n\n已实现的函数：\n\n* `core/friendly_errors/fes_core/fesErrorMonitor()`\n* `core/friendly_errors/fes_core/checkForUserDefinedFunctions()`\n* `core/friendly_errors/fes_core/handleMisspelling()`\n* `core/friendly_errors/fes_core/processStack()`\n* `core/friendly_errors/file_errors`\n* `core/friendly_errors/sketch_reader`\n* `core/friendly_errors/validate_params/_friendlyParamError()`\n* `core/main/_createFriendlyGlobalFunctionBinder()`\n* `core/shape/vertex`\n* `math/p5.Vector`\n\n对`_friendlyError`的调用顺序如下：\n\n```\n_friendlyError\n _report\n```\n\n##### 语法\n\n```javascript\n_friendlyError(message)\n```\n\n```javascript\n_friendlyError(message, func)\n```\n\n```javascript\n_friendlyError(message, func, color)\n```\n\n##### 参数\n\n```\n@param {String} message 要打印的消息\n@param {String} [func] 函数的名称\n@param {Number|String} [color] CSS颜色代码\n```\n\n##### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `_friendlyFileLoadError()`\n\n##### 描述\n\n如果在文件加载过程中发生错误，`_friendlyFileLoadError()` 将被`loadX()`函数调用。\n\n使用键值`fes.fileLoadError.*`生成并打印友好的错误消息。\n\n如果文件加载失败，此函数将生成并显示友好的错误消息。如果文件的大小过大无法加载，它还会进行检查并生成警告。\n\n当前版本中包含用于生成`image`、`XML`、`table`、`text`、`json`和`font`文件的错误消息模板。\n\n已实现的函数：\n\n* `image/loading_displaying/loadImage()`\n* `io/files/loadFont()`\n* `io/files/loadTable()`\n* `io/files/loadJSON()`\n* `io/files/loadStrings()`\n* `io/files/loadXML()`\n* `io/files/loadBytes()`。\n\n对`_friendlyFileLoadError`的调用顺序如下：\n\n```\n_friendlyFileLoadError\n _report\n```\n\n##### 语法\n\n```javascript\n_friendlyFileLoadError(errorType, filePath)\n```\n\n##### 参数\n\n```\n@param {Number} errorType 文件加载错误类型的数字\n@param {String} filePath 引起错误的文件路径\n```\n\n##### 示例\n\n<ins>文件加载错误示例</ins>\n\n```javascript\n/// missing font file\nlet myFont;\nfunction preload() {\n myFont = loadFont('assets/OpenSans-Regular.ttf');\n};\nfunction setup() {\n fill('#ED225D');\n textFont(myFont);\n textSize(36);\n text('p5*js', 10, 50);\n};\nfunction draw() {};\n```\n\nFES会在控制台生成以下消息：\n\n> 🌸 p5.js says: 看起来加载字体文件时出现了问题。请检查文件路径 \\[assets/OpenSans-Regular.ttf] 是否正确，尝试将字体文件托管到在线服务器上，或者运行本地服务器。\\[[https://github.com/processing/p5.js/wiki/Local-server](https://github.com/processing/p5.js/wiki/Local-server)]\n\n##### 位置\n\ncore/friendly\\_errors/file\\_errors.js\n\n### `validateParameters()`\n\n##### 描述\n\n`validateParameters()` 通过将输入参数与从函数的内联文档中创建的 `docs/reference/data.json` 的信息进行匹配，执行参数验证。它检查函数调用是否包含了正确数量和正确类型的参数。\n\n使用键值 `fes.friendlyParamError.*` 生成并打印友好的错误消息。\n\n可以通过以下方式调用该函数：`p5._validateParameters(FUNCT_NAME, ARGUMENTS)` 或者在需要参数验证的函数内部使用 `p5.prototype._validateParameters(FUNCT_NAME, ARGUMENTS)`。建议在一般情况下使用静态版本 `p5._validateParameters`。`p5.prototype._validateParameters(FUNCT_NAME, ARGUMENTS)` 主要用于调试和单元测试。\n\n已在以下函数中实现：\n\n* `accessibility/outputs`\n* `color/creating_reading`\n* `color/setting`\n* `core/environment`\n* `core/rendering`\n* `core/shape/2d_primitives`\n* `core/shape/attributes`\n* `core/shape/curves`\n* `core/shape/vertex`\n* `core/transform`\n* `data/p5.TypedDict`\n* `dom/dom`\n* `events/acceleration`\n* `events/keyboard`\n* `image/image`\n* `image/loading_displaying`\n* `image/p5.Image`\n* `image/pixel`\n* `io/files`\n* `math/calculation`\n* `math/random`\n* `typography/attributes`\n* `typography/loading_displaying`\n* `utilities/string_functions`\n* `webgl/3d_primitives`\n* `webgl/interaction`\n* `webgl/light`\n* `webgl/loading`\n* `webgl/material`\n* `webgl/p5.Camera`\n\n来自 `_validateParameters` 的调用顺序大致如下：\n\n```\nvalidateParameters\n buildArgTypeCache\n addType\n lookupParamDoc\n scoreOverload\n testParamTypes\n testParamType\n getOverloadErrors\n _friendlyParamError\n ValidationError\n report\n friendlyWelcome\n```\n\n##### 语法\n\n```javascript\n_validateParameters(func, args)\n```\n\n##### 参数\n\n```\n@param {String} func 函数名\n@param {Array} args 用户输入的参数\n```\n\n##### 示例\n\n<ins>缺少参数的示例</ins>\n\n```javascript\narc(1, 1, 10.5, 10);\n```\n\nFES将在控制台生成以下消息：\n\n> 🌸 p5.js 说：看起来arc()在位置#4（从零开始的索引）收到了一个空变量。如果不是故意的，这通常是作用域问题：\\[[https://p5js.org/examples/data-variable-scope.html\\]。\\[https://p5js.org/reference/#p5/arc](https://p5js.org/examples/data-variable-scope.html]。\\[https://p5js.org/reference/#p5/arc)]\n\n> 🌸 p5.js 说：看起来arc()在位置#5（从零开始的索引）收到了一个空变量。如果不是故意的，这通常是作用域问题：\\[[https://p5js.org/examples/data-variable-scope.html\\]。\\[https://p5js.org/reference/#p5/arc](https://p5js.org/examples/data-variable-scope.html]。\\[https://p5js.org/reference/#p5/arc)]\n\n<ins>类型不匹配的示例</ins>\n\n```javascript\narc('1', 1, 10.5, 10, 0, Math.PI, 'pie');\n```\n\nFES将在控制台生成以下消息：\n\n> 🌸 p5.js 说：arc()在参数#0（从零开始的索引）处期望接收Number，但收到了字符串。\\[[https://p5js.org/reference/p5/arc](https://p5js.org/reference/p5/arc)]\n\n##### 位置\n\ncore/friendly\\_errors/validate\\_params.js\n\n### `fesErrorMonitor()`\n\n##### 描述\n\n`fesErrorMonitor()`处理浏览器显示的各种错误。该函数生成全局错误消息。\n\n生成并打印...\n\n* ...友好错误消息，使用键：`fes.globalErrors.syntax.*`、`fes.globalErrors.reference.*`、`fes.globalErrors.type.*`。\n* ...通过`processStack()`生成“内部库”错误消息，使用键：`fes.wrongPreload`、`fes.libraryError`。\n* ...通过`printFriendlyStack()`生成堆栈跟踪消息，使用键：`fes.globalErrors.stackTop`、`fes.globalErrors.stackSubseq`。\n* ...通过`handleMisspelling()`生成拼写检查消息（来自引用错误），使用键：`fes.misspelling`。\n\n可以通过错误事件、未处理的拒绝事件调用`_fesErrorMonitor()`，也可以在`catch`块中手动调用它，如下所示：\n\n```\ntry { someCode(); } catch(err) { p5._fesErrorMonitor(err); }\n```\n\n该函数目前可以处理某些类型的ReferenceError、SyntaxError和TypeError。您可以在`browser_errors.js`中找到支持的错误的完整列表。\n\n`_fesErrorMonitor`的调用顺序大致如下：\n\n```\n _fesErrorMonitor\n processStack\n printFriendlyError\n （如果错误类型是ReferenceError）\n _handleMisspelling\n computeEditDistance\n _report\n _report\n printFriendlyStack\n （如果错误类型是SyntaxError、TypeError等）\n _report\n printFriendlyStack\n```\n\n##### 语法\n\n```javascript\nfesErrorMonitor(event)\n```\n\n##### 参数\n\n```\n@param {*} e 错误事件\n```\n\n### 示例\n\n<ins>内部错误示例 1</ins>\n\n```javascript\nfunction preload() {\n // 由于在preload中调用background()而引发\n // 错误\n background(200);\n}\n```\n\nFES将在控制台中生成以下消息：\n\n> 🌸 p5.js说：当调用background时（位于sketch.js的第4行\\[http\\://localhost:8000/lib/empty-example/sketch.js:4:3]），在p5js库内部发生了一个错误，错误消息为“无法读取未定义的属性'background'”。（如果没有另外说明，这可能是由于从preload中调用了background。preload函数中除了load函数（loadImage、loadJSON、loadFont、loadStrings等）之外不应该有其他内容。）（[https://p5js.org/reference/p5/preload）](https://p5js.org/reference/p5/preload）)\n\n<ins>内部错误示例 2</ins>\n\n```javascript\nfunction setup() {\n cnv = createCanvas(200, 200);\n cnv.mouseClicked();\n}\n```\n\nFES将在控制台中生成以下消息：\n\n> 🌸 p5.js说：当调用mouseClicked时（位于sketch.js的第3行\\[http\\://localhost:8000/lib/empty-example/sketch.js:3:7]），在p5js库内部发生了一个错误，错误消息为“无法读取未定义的属性'bind'”。（如果没有另外说明，这可能是由于传递给mouseClicked的参数存在问题。）（[https://p5js.org/reference/p5/mouseClicked）](https://p5js.org/reference/p5/mouseClicked）)\n\n<ins>用户示例中的作用域错误示例</ins>\n\n```javascript\nfunction setup() {\n let b = 1;\n}\nfunction draw() {\n b += 1;\n}\n```\n\nFES将在控制台中生成以下消息：\n\n> 🌸 p5.js说：由于当前范围内未定义“b”，出现了一个错误（位于sketch.js的第5行\\[http\\://localhost:8000/lib/empty-example/sketch.js:5:3]）。如果在代码中定义了它，请检查其作用域、拼写和大小写（JavaScript区分大小写）。更多信息：[https://p5js.org/examples/data-variable-scope.html](https://p5js.org/examples/data-variable-scope.html) [https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not\\_Defined#What\\_went\\_wrong](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_Defined#What_went_wrong)\n\n<ins>用户示例中的拼写错误示例</ins>\n\n```javascript\nfunction setup() {\n colour(1, 2, 3);\n}\n```\n\nFES将在控制台中生成以下消息：\n\n> 🌸 p5.js说：您可能错误地将“colour”写成了“color”（位于sketch.js的第2行\\[http\\://localhost:8000/lib/empty-example/sketch.js:2:3]）。如果希望使用p5.js中的函数，请将其更正为color（[https://p5js.org/reference/p5/color）。](https://p5js.org/reference/p5/color）。)\n\n##### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `fesCodeReader()`\n\n##### 描述\n\n`fesCodeReader()` 函数用于检查以下情况：(1) 是否在 `setup()` 和/或 `draw()` 函数之外使用了任何 p5.js 的常量或函数，以及 (2) 是否重新声明了任何 p5.js 的保留常量或函数。\n\n生成并打印一个友好的错误消息，错误类型为：`fes.sketchReaderErrors.reservedConst`、`fes.sketchReaderErrors.reservedFunc`。\n\n在 `setup()` 和 `draw()` 函数中执行以下操作：\n\n* 提取用户编写的代码\n* 将代码转换为代码行的数组\n* 捕获变量和函数声明\n* 检查声明的函数/变量是否为保留的 p5.js 常量或函数，并进行报告。\n\n该函数在触发 `load` 事件时执行。\n\n##### 示例\n\n<ins>重新定义 p5.js 保留常量的示例</ins>\n\n```javascript\nfunction setup() {\n // PI 是 p5.js 的保留常量\n let PI = 100;\n}\n```\n\nFES 将在控制台生成以下消息：\n\n> 🌸 p5.js 提示：您使用了 p5.js 的保留变量 \"PI\"，请确保将变量名更改为其他名称。([https://p5js.org/reference/p5/PI](https://p5js.org/reference/p5/PI))\n\n<ins>重新定义 p5.js 保留函数的示例</ins>\n\n```javascript\nfunction setup() {\n // text 是 p5.js 的保留函数\n let text = 100;\n}\n```\n\nFES 将在控制台生成以下消息：\n\n> 🌸 p5.js 提示：您使用了 p5.js 的保留函数 \"text\"，请确保将函数名更改为其他名称。\n\n##### 位置\n\ncore/friendly\\_errors/sketch\\_reader.js\n\n### `checkForUserDefinedFunctions()`\n\n##### 描述\n\n`checkForUserDefinedFunctions()` 函数用于检查是否使用了错误的大小写写法来调用任何用户定义的函数（如 `setup()`、`draw()`、`mouseMoved()` 等）。\n\n生成并打印一个友好的错误消息，错误类型为 `fes.checkUserDefinedFns`。\n\n##### 语法\n\n```javascript\ncheckForUserDefinedFunctions(context)\n```\n\n##### 参数\n\n```\n@param {*} context 当前默认上下文。\n 在“全局模式”下设置为 window，在“实例模式”下设置为 p5 实例。\n```\n\n##### 示例\n\n```javascript\nfunction preLoad() {\n loadImage('myimage.png');\n}\n```\n\nFES 将在控制台生成以下消息：\n\n> 🌸 p5.js 提示：似乎您可能误写了 preLoad，应该是 preload。如果这不是您的意图，请进行更正。([https://p5js.org/reference/p5/preload](https://p5js.org/reference/p5/preload))\n\n##### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `_friendlyAutoplayError()`\n\n##### 描述\n\n`_friendlyAutoplayError()` 是在与播放媒体（例如视频）相关的错误发生时内部调用的函数，最常见的原因是浏览器的自动播放策略。\n\n生成并打印一个友好的错误消息，错误类型为 `fes.autoplay`。\n\n##### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `helpForMisusedAtTopLevelCode()`\n\n##### 描述\n\n`helpForMisusedAtTopLevelCode()` 是由 `fes_core.js` 在窗口加载时调用的函数，用于检查是否在 `setup()` 或 `draw()` 之外使用了 p5.js 的函数。\n\n生成并打印一个友好的错误消息，错误类型为 `fes.misusedTopLevel`。\n\n##### 参数\n\n```\n@param {*} err 错误事件\n@param {Boolean} log false\n```\n\n##### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n## 开发者备注：开发者的注释\n\n#### 生成友好错误消息的其他 FES 函数\n\n* `friendlyWelcome()` 直接打印到控制台。（默认情况下隐藏。）\n\n* `stacktrace.js` 包含从 [https://github.com/stacktracejs/stacktrace.js](https://github.com/stacktracejs/stacktrace.js) 借用的代码，用于解析错误堆栈。这是由 `fesErrorMonitor()` 和 `handleMisspelling()` 调用的。\n\n#### 为参数验证准备 p5.js 对象\n\n* 任何将用于参数验证的 p5.js 对象都需要在类声明中为 `name` 参数（对象的名称）分配一个值，例如：\n\n```javascript\np5.newObject = function(parameter) {\n this.parameter = 'some parameter';\n this.name = 'p5.newObject';\n};\n```\n\n* 内联文档：允许的参数类型包括 `Boolean`、`Number`、`String`，以及对象的名称（参见上述项目符号）。对于任何数组参数，请使用 `Array`。如果需要，可以在描述部分解释允许的特定类型的数组参数（例如 `Number[]`、`String[]`）。\n* 目前支持的类类型（具有其 `name` 参数）：`p5.Color`、`p5.Element`、`p5.Graphics`、`p5.Renderer`、`p5.Renderer2D`、`p5.Image`、`p5.Table`、`p5.TableRow`、`p5.XML`、`p5.Vector`、`p5.Font`、`p5.Geometry`、`p5.Matrix`、`p5.RendererGL`。\n\n#### FES 的性能问题\n\n默认情况下，p5.js 启用了 FES，而在 `p5.min.js` 中禁用了 FES，以防止 FES 函数导致进程变慢。错误检查系统可能会显著降低代码的执行速度（在某些情况下高达约 10 倍）。请参阅[友好错误性能测试](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/)。\n\n您可以在代码的顶部添加一行代码来禁用此功能：\n\n```javascript\np5.disableFriendlyErrors = true; // 禁用 FES\n\nfunction setup() {\n // 执行设置操作\n}\n\nfunction draw() {\n // 执行绘图操作\n}\n```\n\n请注意，这将禁用导致性能下降的 FES 部分（例如参数检查）。没有性能成本的友好错误（例如在文件加载失败时给出描述性错误，或者在尝试在全局空间中覆盖 p5.js 函数时发出警告）将保持原样。\n\n## 已知限制\n\n* FES 可能仍然会导致假阴性的情况。这通常是由于设计与实际使用情况之间的不匹配而导致的（例如，绘图函数最初设计用于在 2D 和 3D 设置中可以互换使用），例如：\n\n```javascript\nconst x3; // 未定义\nline(0, 0, 100, 100, x3, Math.PI);\n```\n\n将逃过 FES 的检测，因为 `line()` 的内联文档中有一个可接受的参数模式（`Number`、`Number`、`Number`、`Number`）用于在 2D 设置中绘制。这也意味着当前版本的 FES 不会检查诸如 `_renderer.isP3D` 等环境变量。\n\n* FES 仅能检测到使用 `const` 或 `var` 声明时覆盖的全局变量。如果使用 `let`，则无法检测到。由于 `let` 实例化变量的方式，目前无法解决这个问题。\n\n* 目前，描述为 **`fesErrorMonitor()`** 下的功能仅在 Web 编辑器上或在本地服务器上运行时有效。有关更多详细信息，请参阅请求合并[#4730](https://github.com/processing/p5.js/pull/4730/)。\n\n* `sketch_reader()` 可能会在提取用户代码中的变量/函数名称时遗漏一些情况（例如，当所有代码都写在一行中时）。\n\n## 未来工作的思考\n\n* 为 Web 编辑器重新引入颜色编码。\n\n* 增加更多单元测试以实现全面的测试覆盖。\n\n* 更直观、更精确的输出信息。\n\n* 所使用的所有颜色应对色盲友好。\n\n* 识别更多常见的错误类型，并与 FES 进行概括（例如 `bezierVertex()`、`quadraticVertex()` - 需要初始化的对象未启动；检查 `nf()`、`nfc()`、`nfp()`、`nfs()` 的 Number 参数是否为正数）。\n\n* 扩展全局错误捕获。这意味着捕获浏览器输出到控制台的错误，并与友好的消息进行匹配。`fesErrorMonitor()` 可以处理一些特定类型的错误，但对于更多类型的支持会很有帮助。\n\n* 改进 `sketch_reader.js` 的代码读取和提取变量/函数名的功能（提取用户在代码中声明的函数和变量名）。例如，如果所有代码都写在一行中，`sketch_reader.js` 就无法正确提取变量/函数名。我们欢迎未来的提案，以识别所有这些\"逃逸\"情况，并添加单元测试以捕捉它们。\n\n* `sketch_reader.js` 可以扩展，可以添加新功能（例如：当用户在 `draw()` 函数中声明变量时向用户发出警告）。以更好地帮助用户。\n\n```javascript\n// 这段代码片段使用新函数包装了 window.console 方法，以修改其功能\n// 目前尚未实现，但可以使用它来提供更好格式的错误消息\nconst original = window.console;\nconst original_functions = {\n log: original.log,\n warn: original.warn,\n error: original.error\n}\n[\"log\", \"warn\", \"error\"].forEach(function(func){\n window.console[func] = function(msg) {\n // 在包装函数中处理捕获的消息，然后调用原始函数\n original_functions[func].apply(original, arguments)\n };\n});\n```\n\n* 从内联文档生成 FES 参考文档。这个生成的参考文档可以作为一个单独的系统，与我们主要的[p5.js参考文档]分开，将作为Sketch和控制台的函数分开，以减少可能的混淆。\n\n[p5.js参考文档]: https://p5js.org/reference/\n"},"🌸 p5.js友好错误系统（FES）\n":{"relativeUrl":"/contribute/friendly_error_system","description":"\n\n## 概述\n\n友好错误系统（FES，🌸）旨在通过提供简单友好的错误信息，帮助新手程序员。它通过在错误消息中添加替代描述和有用的参考链接，补充了浏览器控制台的错误消息。\n\nFES将消息打印在控制台窗口中，可以在[p5.js Web Editor]和浏览器的JavaScript控制台中看到。单个压缩文件的p5（p5.min.js）不包含FES。\n\n[p5.js Web Editor]: https://editor.p5js.org/\n\n## 降低调试障碍\n\n工具的设计应该符合将使用它的人的需求。作为旨在降低调试障碍的工具，FES的设计也不例外。\n\n评估我们现有设计的最佳方法是直接听取使用p5.js的人们的意见。我们在2021年进行了社区调查，以收集对友好错误的反馈和未来期望。\n\n我们相信来自社区成员的见解对于我们的贡献者将是有帮助的。您可以通过摘要漫画或完整报告来查看结果：\n\n* [21-22 FES调查报告漫画]\n* [21-22 FES调查完整报告]\n\n[21-22 FES调查报告漫画]: https://almchung.github.io/p5jsFESsurvey/\n\n[21-22 FES调查完整报告]: https://observablehq.com/@almchung/p5-fes-21-survey\n\n## 编写友好错误信息\n\n如何通过编写和翻译错误消息来为p5.js库做出贡献？\n\nFES是p5.js\\[国际化]工作的一部分。我们通过基于[i18next]的`translator()`函数生成所有FES消息的内容。这种动态错误消息生成适用于所有语言，包括p5.js的默认语言英语。\n\n我们欢迎来自世界各地的贡献！🌐\n\n[internationalization]: https://github.com/processing/p5.js/blob/main/contributor_docs/internationalization.md\n\n[i18next]: https://www.i18next.com/\n\n#### 编写最佳实践\n\nFES消息编写者应该优先考虑降低理解错误消息的障碍，增加调试过程的可访问性。\n\n[Friendly Errors i18n Book]讨论了在跨文化i18n环境中编写友好错误消息的挑战和最佳实践。以下是书中的一些要点：\n\n* 了解您的受众：不要对我们的错误消息的受众做出假设。尝试了解谁在使用我们的库以及他们如何使用它。\n* 保持语言包容性。我们努力使错误消息“友好”，这对您来说意味着什么？在您的语言中寻找可能的偏见和伤害。遵守[p5.js行为准则]。\n* 尽量使用简单的句子。考虑将句子分成较小的块，以最大程度地利用i18next的[插值]功能。\n* 优先考虑跨文化沟通，并在不同语言之间提供出色的体验。避免使用成语。\n* 逐步介绍一个技术概念或技术术语。保持技术写作的一致性。尝试链接一个用简明实例编写的面向初学者的外部资源。\n\n[Friendly Errors i18n Book]: https://almchung.github.io/p5-fes-i18n-book/\n\n[插值]: https://www.i18next.com/translation-function/interpolation\n\n[p5.js行为准则]: https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct\n\n[专家的盲点]: https://tilt.colostate.edu/TipsAndGuides/Tip/181\n\n[Friendly Errors i18n Book]是一个公共项目，您可以通过这个单独的[repo]为该书做出贡献。\n\n[repo]: https://github.com/almchung/p5-fes-i18n-book\n\n#### 翻译文件的位置\n\n`translator()`基于i18next，从`src/core/internationalization.js`中导入。它通过从JSON翻译文件中查找文本数据来生成消息：\n\n```\ntranslations/{{检测到的语言代码，默认为en}}/translation.json\n```\n\n示例：\n如果检测到的浏览器语言环境是韩语（语言标识符：`ko`），`translator()`将从`translations/ko/translation.json`中读取翻译的文本块。然后，`translator()`将将文本块组合成最终的消息。\n\n语言标识符还可以包括地区信息，例如`es-PE`（秘鲁的西班牙语）。\n\n#### 翻译文件的结构\n\n`translation.json`具有[i18next使用的格式](https://www.i18next.com/misc/json-format/)。\n\n翻译文件的基本格式是在花括号`{}`中使用双引号`\"\"`括起来的键和值（消息）：\n\n```json\n{ \"key\": \"value\" }\n```\n\n例如，我们有一个以此格式保存的ASCII标志：\n\n```json\n\"logo\": \" _ \\n /\\\\| |/\\\\ \\n \\\\ ` ' / \\n / , . \\\\ \\n \\\\/|_|\\\\/ \\n\\n\"\n```\n\ni18next支持插值，允许我们传递一个变量以动态生成消息。我们使用两个花括号`{{}}`来设置变量的占位符：\n\n```json\n\"greeting\": \"你好，{{who}}！\"\n```\n\n这里，键是`greeting`，变量名是`who`。\n\n为了动态生成该消息，我们需要传递一个值：\n\n```javascript\ntranslator('greeting', { who: 'everyone' } );\n```\n\n由`translator`生成的结果将如下所示：\n\n```\n你好，everyone！\n```\n\n这是`fes`中的一个项`fileLoadError`，演示了插值：\n\n```json\n\"image\": \"看起来加载图像时出现问题。{{suggestion}}\"\n```\n\n为了动态生成最终的消息，FES将使用该键和预先生成的`suggestion`值调用`translator()`。\n\n```javascript\ntranslator('fes.fileLoadError.image', { suggestion });\n```\n\n#### 如何添加或修改翻译\n\n[国际化文档]提供了逐步指南，介绍了如何添加和修改翻译文件。\n\n[国际化文档]: https://github.com/processing/p5.js/blob/main/contributor_docs/internationalization.md\n\n## 理解FES的工作原理\n\n在本节中，我们将概述FES如何生成和显示消息。有关FES函数的更详细信息，请参阅我们的[FES参考+开发笔记]。\n\n[FES参考+开发笔记]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md\n\n#### 概览\n\np5.js从多个位置调用FES，以处理不同的情况，包括：\n\n* 浏览器引发错误。\n* 用户代码调用p5.js API的函数。\n* 其他用户可以从帮助消息中受益的自定义情况。\n\n#### FES代码位置\n\n您可以在以下位置找到FES的核心组件：\n`src/core/friendly_errors`。\n您可以在以下位置找到`translator()`使用的翻译文件：\n`translations/`。\n\n#### FES消息生成器\n\n这些函数主要负责捕获错误并生成FES消息：\n\n* [`_friendlyFileLoadError()`] 捕获文件加载错误。\n* [`_validateParameters()`] 根据内联文档检查p5.js函数的输入参数。\n* [`_fesErrorMontitor()`] 处理全局错误。\n\n如需完整参考，请查阅我们的[开发笔记]。\n\n[`_friendlyFileLoadError()`]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md#_friendlyfileloaderror\n\n[`_validateParameters()`]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md#validateparameters\n\n[`_fesErrorMontitor()`]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md#feserrormonitor\n\n[开发笔记]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md\n\n#### FES消息显示器\n\n`fes_core.js/_friendlyError()` 在控制台中打印生成的友好错误消息。例如：\n\n```javascript\np5._friendlyError(\n translator('fes.globalErrors.type.notfunc', translationObj)\n);\n```\n\n该函数可以在p5的任何地方调用。\n\n## 关闭FES\n\n可能有些情况下您希望[禁用FES以提升性能]。\n\n当`p5.disableFriendlyErrors`设置为`true`时，您可以关闭FES。\n\n示例：\n\n```javascript\np5.disableFriendlyErrors = true;\n\nfunction setup() {\n createCanvas(100, 50);\n}\n```\n\np5的单个压缩文件（即p5.min.js）会自动省略FES。\n\n[禁用FES以提升性能]: https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes\n"},"如何添加友好错误信息\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* 正在寻找一种支持友好错误信息的方法？请按照此步骤指南操作！ */}\n\n\n\n本指南将引导您完成使用友好错误系统（FES，🌸）编写友好错误（FE）信息的步骤。如果您的新方法支持自定义错误处理或为用户输出自定义日志，您可能需要为其编写友好错误信息。所有这些信息都是通过基于[i18next](https://www.i18next.com/)的`translator()`方法动态生成的，这使得p5.js能够提供与用户环境匹配的错误信息翻译。\n\n## ❗️`p5.min.js`中没有翻译\n\n* 我们已将 \\[i18next] 集成到我们的代码库中。但是，它的使用仅限于p5.js的未压缩版本。压缩版本`p5.min.js`仅包含我们国际化代码的基本框架，不包含实际实现。\n* 在Browserify构建任务和`src/core/init.js`中，有特定的逻辑来避免在压缩版本中加载或设置翻译。因此，添加翻译不会影响`p5.min.js`的大小。\n\n## 前提条件\n\n在开始之前，请确定以下哪种情况最符合您的需求：\n\n* 您正在添加一个需要特定数量和类型参数的新方法。\n * 请前往[✅使用FES添加参数验证](#-使用fes添加参数验证/)。\n* 您的方法涉及加载特定类型的文件，并且您需要捕获特定于加载文件的错误。\n * 请前往[📥使用FES添加文件加载错误](#-使用fes处理文件加载错误消息/)。\n* 您已编写代码检测错误何时发生，并希望显示友好错误。\n * 请前往[🐈使用FES添加库错误信息](#-使用fes添加库错误信息/)。\n\n## ✅ 使用FES添加参数验证\n\n### 第1步 – 再次检查您的内联文档\n\n首先，确保您的方法有[内联文档](../contributing_to_the_p5js_reference/)，其中包含完整的参数列表。\n\n例如，`circle()`方法有以下内联文档，以方法描述开始，后面是参数列表，然后是示例代码：\n\n```\n/**\n * 在画布上绘制一个圆。圆是一个圆形形状。\n * 圆边缘上的每个点到其中心的距离相同。\n * 默认情况下，前两个参数设置圆中心的位置。\n * 第三个参数设置形状的宽度和高度（直径）。\n * 可以使用<a href=\"#/p5/ellipseMode\">ellipseMode()</a>函数更改原点。\n *\n * @method circle\n * @param {Number} x 圆中心的x坐标。\n * @param {Number} y 圆中心的y坐标。\n * @param {Number} d 圆的直径。\n * @chainable\n * @example\n * <div>\n * <code>\n * circle(30, 30, 20);\n * describe('灰色画布中央带有黑色轮廓的白色圆圈。');\n * </code>\n * </div>\n *\n */\n```\n\n从上面的例子中，FES将查找参数列表以验证参数：\n\n```\n * @method circle\n * @param {Number} x 圆中心的x坐标。\n * @param {Number} y 圆中心的y坐标。\n * @param {Number} d 圆的直径。\n```\n\n### 第2步 – 调用`p5._validateParameters()`\n\n现在回到您方法的实现，按照以下格式调用`validate_params()`：`p5._validateParameters('[您方法的名称]', arguments);`。\n\n例如，以下代码将验证`circle()`的参数并生成FE信息：\n\n```js\np5._validateParameters('circle', arguments);\n```\n\n通常在方法中首先调用此函数，以避免在提供的参数不符合预期时继续执行。例如，它在`circle()`方法的第一行被调用：\n\n```js\np5.prototype.circle = function() {\n p5._validateParameters('circle', arguments);\n const args = Array.prototype.slice.call(arguments, 0, 2);\n args.push(arguments[2]);\n args.push(arguments[2]);\n return this._renderEllipse(...args);\n};\n```\n\n### 第3步 – 构建并测试您的代码以应对典型情况\n\n要查看参数验证的效果，请使用`npm run build`重新构建`p5.js`。\n\n要测试您的代码，找到`/lib/empty-example/index.html`并将脚本`../p5.min.js`替换为`../p5.js`，如下例所示：\n\n```js\n<script src=\"../p5.js\"></script>\n```\n\n请注意，`lib/p5.min.js`不支持FE信息，因此请使用`lib/p5.js`进行测试。\n\n然后，编辑`/lib/empty-example/sketch.js`来测试典型的参数错误情况：\n\n1. 缺少参数\n2. 参数数量错误\n3. 参数类型错误\n\n以下是测试`circle()`方法表达式的示例：\n\n```js\n// 缺少参数\ncircle(100);\n// 参数数量错误（超过所需数量）\n// 注意这段代码仍然能成功绘制一个圆。\ncircle(100, 100, 100, 1000);\n// 参数类型错误\ncircle(100, 100, 'hello');\n```\n\n上面的代码应该生成以下FE信息：\n\n```\n🌸 p5.js says: [sketch.js, line 9] circle()需要至少3个参数，但只收到了1个。 (https://p5js.org/reference/p5/circle)\n🌸 p5.js says: [sketch.js, line 14] circle()需要不超过3个参数，但收到了4个。 (https://p5js.org/reference/p5/circle)\n🌸 p5.js says: [sketch.js, line 12] circle()的第三个参数需要Number类型，但收到了string类型。 (https://p5js.org/reference/p5/circle)\n```\n\n恭喜🎈！您现在已经完成了为新方法添加参数验证。\n\n## 📥 使用FES处理文件加载错误消息\n\n### 第1步 – 检查文件加载错误情况列表<a id=\"step-1\" />\n\n文件加载错误分为多个不同的情况，以便在错误发生时提供尽可能有帮助的信息。这使p5.js能够在不同情况下显示不同的错误。例如，当它无法读取字体文件中的数据时，它会显示一个与尝试加载过大无法读取的文件时不同的错误。\n\n这些情况都有自己的编号，可以在`core/friendly_errors/file_errors.js`文件的顶部找到。\n\n当您希望添加文件加载错误时，首先查看`core/friendly_errors/file_errors.js`中的`fileLoadErrorCases`，看看是否有适用于您情况的现有案例。\n\n例如，您可能正在加载基于字符串的文件。这对应于`fileLoadErrorCases`中的`case 3`：\n\n```js\ncase 3:\n return {\n message: translator('fes.fileLoadError.strings', {\n suggestion\n }),\n method: 'loadStrings'\n };\n```\n\n如果您正在处理的场景已经有相关的编号，请记住案例编号，并跳至[**第4步**](#step-4)。如果您在`fileLoadErrorCases`中找不到匹配的情况，请转到[**第2步**](#step-2)创建新的情况。\n\n### 第2步 – 在问题面板上讨论添加新的错误情况<a id=\"step-2\" />\n\n接下来，您将提交一个问题工单，讨论创建新的情况或确认您的情况不是现有情况的重复。编写一个简短的段落描述您的新方法以及用户可能遇到这种特定文件加载错误的场景。然后再写一个简短的段落描述您方法中的错误处理以及它加载的文件类型。\n\n转到[问题面板](https://github.com/processing/p5.js/issues/)，按\"New Issue\"按钮，然后选择\"Issue: 💡 Existing Feature Enhancement\"选项。应该出现一个空表单。\n\n添加一个标题，如\"向`fileLoadErrorCases`添加新情况：\\[您的文件加载错误情况的高级描述]\"。对于\"Increasing access\"部分，输入您在此步骤开始时准备的简短段落，描述典型情况。\n\n然后，在\"Most appropriate sub-area of p5.js?\"问题中勾选\"Friendly Errors\"框。最后，在\"Feature enhancement details\"部分，输入详细说明错误处理和加载文件类型的段落。\n\n### 第3步 – 向`fileLoadErrorCases`添加新情况<a id=\"step-3\" />\n\n在与维护者确认后，您可以向`fileLoadErrorCases`添加新情况。在`fileLoadErrorCases`的`switch`语句中，转到情况列表的末尾，并按照以下格式添加新情况：\n\n```\ncase {{next available case number}}:\n return {\n message: translator('fes.fileLoadError.{{tag name}}', {\n suggestion\n }),\n method: '{{name of your method}}'\n };\n```\n\n在上面的例子中，双尖括号（`{{}}`）中的任何内容都是您应该替换的内容。例如，如果前一个情况编号是11，您的代码应该以`case 12:`开始，最终代码中没有双括号。\n\n### 第4步 – 调用`p5._friendlyFileLoadError()`<a id=\"step-4\" />\n\n添加您的情况后，您现在可以在错误处理语句中调用`p5._friendlyFileLoadError([情况编号], [文件路径])`。\n\n例如，请查看`loadStrings()`方法加载基于字符串的文件（对应于`fileLoadErrorCases`中的`case 3`）。`loadStrings()`方法使用[`httpDo.call()`](https://p5js.org/reference/p5/httpDo/)和一个在文件错误情况下执行的自定义回调方法：\n\n```js\np5.prototype.httpDo.call(\n this,\n args[0],\n 'GET',\n 'text',\n data => {\n // [... 省略的代码 ...]\n },\n function(err) {\n // 错误处理\n p5._friendlyFileLoadError(3, args[0]);\n // [... 省略的代码 ...]\n }\n );\n```\n\n我们可以看到错误回调函数如何调用`p5._friendlyFileLoadError(3, [the first argument, which is a file path])`来生成以下FE信息：\n\n```\n🌸 p5.js says: 看起来加载文本文件时出现了问题。请检查文件路径(assets/wrongname.txt)是否正确，尝试在线托管文件，或运行本地服务器。\n+ 更多信息：https://github.com/processing/p5.js/wiki/Local-server\n```\n\n恭喜🎈！您现在已经完成为带有文件加载的方法实现FE。\n\n## 🐈 使用FES添加库错误信息\n\n### 第1步 – 编写代码检测错误何时发生\n\n首先，查找用户在使用您的方法时可能遇到的典型错误情况，并创建逻辑来捕获这些情况。此外，如果适用，请考虑提供故障保护措施，例如为缺少的参数使用默认值。确定对用户有帮助的FE信息的情况。\n\n[MDN Web文档中的这个指南](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/)提供了关于控制流和JavaScript原生错误处理结构的良好概述。\n\n\\\\\n\n### 第2步 – 调用`p5._friendlyError()`\n\n要生成FE信息，您只需要在错误处理语句中按照以下格式调用`p5._friendlyError('[custom message]', '[method name]');`。将方括号内（包括方括号）的所有内容替换为您自己的值。\n\n例如，以下代码将为`bezierVertex()`生成FE信息：\n\n```js\np5._friendlyError(\n '在调用bezierVertex()之前必须先使用vertex()',\n 'bezierVertex'\n);\n```\n\n这应该生成以下FE信息：\n\n```\n🌸 p5.js says: [sketch.js, line 19] 当调用bezierVertex时，p5js库内部发生了一个错误，错误信息为\"在调用bezierVertex()之前必须先使用vertex()\"。如果没有特别说明，可能是传递给bezierVertex的参数有问题。 (https://p5js.org/reference/p5/bezierVertex) \n```\n\n恭喜🎈！您现在已经完成了为您的方法添加库错误信息。\n\n## ✏️ 为国际受众编写友好错误信息\n\nFES信息编写者应优先降低理解错误信息的障碍，提高调试过程的可访问性。以下是一个例子：\n\n```\n🌸 p5.js says: [sketch.js, line 7] circle() was expecting at least 3 arguments, but received only 1. (https://p5js.org/reference/p5/circle) \n```\n\n如果浏览器设置为`ko-KR`（韩语）区域设置，上述参数验证信息将以韩语显示：\n\n```\n🌸 p5.js says: [sketch.js, 줄7] 최소 3개의 인수(argument)를 받는 함수 circle()에 인수가 1개만 입력되었습니다. (https://p5js.org/reference/p5/circle) \n```\n\n[友好错误i18n指南](https://almchung.github.io/p5-fes-i18n-book/)讨论了在跨文化i18n上下文中编写友好错误信息的挑战和最佳实践。以下是该指南的主要观点：\n\n* 了解您的受众：不要对错误信息的受众做出假设。尝试了解谁在使用我们的库以及他们如何使用它。\n* 保持语言包容性。我们努力使错误信息\"友好\"，这对您意味着什么？寻找语言中可能的偏见和伤害。\n* 尽可能使用简单的句子。考虑将句子分解成更小的块，以最好地利用[i18next的插值功能](https://www.i18next.com/translation-function/interpolation/)。\n* 优先考虑跨文化交流，并提供跨语言的良好体验。避免使用比喻手法。\n* 一次只介绍一个技术概念或技术术语。保持技术写作的一致性。尝试链接一个以初学者友好语言编写的外部资源，其中包含大量简短、实用的示例。\n\n[友好错误i18n指南](https://almchung.github.io/p5-fes-i18n-book/)是一个公共项目，您可以通过[这个单独的仓库](https://github.com/almchung/p5-fes-i18n-book/)为该指南做出贡献。\n\n## 🔍 可选：单元测试\n\n请考虑为您的新FE信息添加单元测试，以便尽早发现错误并确保您的代码向用户传递预期的信息。此外，单元测试是确保其他贡献者的新代码不会意外破坏或干扰您的代码功能的好方法。以下是几个关于单元测试的好指南：\n\n* [单元测试和测试驱动开发](https://archive.p5js.org/learn/tdd.html)，作者Andy Timmons\n* [贡献者文档：单元测试](../unit_testing/)\n\n示例：\n\n```js\nsuite('validateParameters: multi-format', function() {\n test('color(): 可选参数，类型不正确', function() {\n assert.validationError(function() {\n p5._validateParameters('color', [0, 0, 0, 'A']);\n });\n });\n}\n```\n\n## 结论\n\n在本指南中，我们提供了为多种不同情况添加FE信息的分步说明，包括：\n\n* 添加参数验证，\n* 处理文件加载错误，以及\n* 为方法添加库错误信息。\n\n此外，我们很高兴通过2021-2022年进行的FES调查分享我们社区的见解。调查结果以两种格式提供：\n\n* [21-22 FES调查报告漫画](https://almchung.github.io/p5jsFESsurvey/)\n* [21-22 FES调查完整报告](https://observablehq.com/@almchung/p5-fes-21-survey/)\n\n有关FES设计和技术方面的更深入信息，请参阅[FES自述文档](../friendly_error_system/)。该文档提供了详细的解释和开发说明，对那些寻求更深入了解FES的人有所帮助。\n"},"发布流程\n":{"relativeUrl":"/contribute/release_process","description":"\n\n## 方法\n\n* 我们遵循 [semver](https://semver.org/) 的版本控制模式，即遵循以下版本控制模式：`主版本号:次版本号:修订号`。\n\n## 要求\n\n* 在您的系统上安装了 Git、node.js 和 NPM\n* 您能够构建库并具有对远程仓库的推送权限\n* 在远程仓库上设置了 `NPM_TOKEN` 密钥\n* 在远程仓库上设置了 `ACCESS_TOKEN` 密钥\n\n## 使用方法\n\n```sh\n$ git checkout main\n$ npm version [major|minor|patch] # 选择适当的版本标签\n$ git push origin main\n$ git push origin v1.4.2 # 用刚刚创建的版本号替换此处的版本号\n```\n\n实际的发布步骤全部在 Github Actions CI 上运行。操作完成后，您可能希望在 Github 上查看发布，并根据需要修改发布说明（例如，将所有-contributor bot 的提交与其他提交分开）。\n\n## 安全令牌\n\n为了完全运行发布步骤，必须设置两个[仓库密钥](https://docs.github.com/cn/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)如下。\n\n* `NPM_TOKEN` 可以按照[此处](https://docs.npmjs.com/creating-and-viewing-access-tokens/)的步骤创建，以创建一个读取和发布令牌。令牌所属的用户必须具有对 NPM 项目的发布访问权限。\n* `ACCESS_TOKEN` 是一个个人访问令牌，用于访问 `p5.js`、`p5.js-website` 和 `p5.js-release` 仓库。可以按照[此处](https://docs.github.com/cn/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/)的步骤生成令牌，对于范围选择只选择 `public_repo`。建议使用组织特定的帐户进行操作（即非个人帐户），并仅将该帐户的写入访问权限限制在所需的仓库上。\n\n## 实际发生的情况\n\nGithub Actions CI 上的[\"New p5.js release\"](../.github/workflows/release.yml)操作是在匹配 `v*.*.*` 格式的标签上触发的，该标签是通过 `npm version ___` 命令创建的。\n\n一旦触发，它将执行以下步骤：\n\n1. 克隆仓库，设置 node.js，提取版本号，使用 `npm` 安装依赖项，并使用 `npm test` 运行测试。\n2. 创建将上传到 Github 发布中的发布文件。\n3. 在 Github 上创建发布并发布最新版本到 NPM。\n4. 更新网站文件\n 1. 克隆网站仓库\n 2. 将 `data.json` 和 `data.min.json` 复制到正确的位置\n 3. 将 `p5.min.js` 和 `p5.sound.min.js` 复制到正确的位置\n 4. 根据最新版本号更新 `data.yml` 文件\n 5. 根据 `data.min.json` 更新 `en.json` 文件\n 6. 提交并推送更改到网站仓库\n5. 更新 Bower 文件\n 1. 克隆 Bower 发布仓库\n 2. 将所有库文件复制到正确的位置\n 3. 提交并推送更改到网站仓库\n\n原则上，我们尽可能将尽可能多的步骤集中在一个地方运行，即在 CI 环境中运行。如果需要在发布时仅运行的新步骤，则应在 CI 工作流程中定义，而不是作为构建配置的一部分。\n\n## 测试\n\n由于发布步骤在 CI 中运行，测试它们可能会有些困难。使用 [act](https://github.com/nektos/act/) 可以在本地测试步骤的运行（在开发过程中就是这样测试的），但需要对工作流定义进行一些临时修改，我们将在此大致记录下来，因为确切的步骤可能随时间而改变。\n\n由于没有安装所有系统要求来运行 mocha Chrome 测试，测试步骤将不会运行。在设置其他环境之前，可能需要使用 `apt` 安装一些系统依赖项。请注意错误消息，它们应该提供有关缺少哪些软件包的一些信息。\n\n为避免意外推送不必要的更改，应将涉及将更改推送到远程仓库的步骤注释掉。\n"},"管理员指南\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* 了解如何管理和审查对 p5.js 的贡献。 */}\n\n\n\n无论你是刚加入我们的管理员，还是 p5.js 经验丰富的维护者，或者介于两者之间，本指南包含了许多信息、技巧和诀窍，将帮助你和其他贡献者有效地为 p5.js 做出贡献。除非另有说明，这里所写的大部分内容都是指南，这意味着你可以根据自己的工作流程来适应这里所指示的做法。\n\n## 目录\n\n* [Issues](#Issues)\n * [Bug 报告](#bug-报告/)\n * [功能请求](#功能请求/)\n * [功能增强](#功能增强/)\n * [讨论](#讨论/)\n* [拉取请求](#拉取请求/)\n * [简单修复](#简单修复/)\n * [Bug 修复](#bug-修复/)\n * [新功能/功能增强](#新功能功能增强/)\n * [Dependabot](#dependabot)\n* [构建过程](#构建过程/)\n * [主要构建任务](#主要构建任务/)\n * [杂项任务](#杂项任务/)\n* [发布过程](#发布过程/)\n* [提示与技巧](#提示与技巧/)\n * [回复模板](#回复模板/)\n * [GitHub CLI](#github-cli)\n * [管理通知](#管理通知/)\n\n***\n\n## Issues\n\n我们鼓励大多数源代码贡献以 issue 为起点，因此 issues 是大多数讨论发生的地方。你在审查 issue 时可以采取的步骤取决于 issue 的类型。该存储库使用 [GitHub issue 模板](../.github/ISSUE_TEMPLATE/)来更好地组织不同类型的 issues，并鼓励 issue 作者提供有关其问题的所有相关信息。审查 issue 的第一步通常是查看填写的模板，确定是否需要额外的信息（可能是因为某些字段未填写或使用了错误的模板）。\n\n### Bug 报告\n\n对于 bug 报告 issues，应使用 “发现了一个 bug” issue 模板。通常使用下面流程来处理 bug 报告：\n\n1. 复现 bug\n * 模板的目标是提供足够的信息，以便评审人员尝试复现所报告的 bug。\n * 如果报告的 bug 与所在存储库无关（p5.js或p5.js-website）。\n * 如果你有权访问相存储库，请将 issue 转移到相存储库。\n * 否则，请在 issue 中留下评论，说明 bug 报告应该提交到哪里（提供直接链接），然后关闭该 issue。\n * 评审 bug 报告的第一步是查看是否提供了足够的信息以复现 bug，并在有必要时尝试按描述复现 bug。\n2. 如果可以复现 bug：\n * 有时需要进行讨论以确定修复特定 bug 的最佳方法。有时这可能很简单，有时可能会比较棘手。在需要根据具体情况做出决定时，请参考 [p5.js 的设计原则](../design_principles/)。\n * 如果 issue 作者在 issue 中表示愿意提供修复方法：\n * 留下评论，批准 issue 作者来提供修复方案。使用 \"Assignee\" 旁边的右侧的齿轮按钮，将 issue 分配给 issue 作者。\n * 如果 issue 作者不愿意提供修复方法：\n * 留下评论确认 bug 是可以复现的。\n * 尝试自行修复或在 issue 上添加“需要帮助”的标签，以表明需要修复的 issue。\n3. 如果无法复现 bug：\n * 如果模板中尚未提供附加信息（如 p5.js 版本、浏览器版本、操作系统版本等），请要求提供附加信息。\n * 如果你的测试环境与 issue 中报告的不同（不同的浏览器或操作系统）：\n * 留下评论说明你无法在自己的特定环境中复现。\n * 在 issue 上添加 `需要帮助` 的标签，并要求其他具有 issue 指定设置的人尝试复现该 bug。\n * 有时候 bug 只在使用 web 编辑器时出现，而在本地测试时没有出现。在这种情况下，issue 应该转到 [web 编辑器存储库](https://github.com/processing/p5.js-web-editor/)。\n * 如果以后可以复现该 bug，则返回步骤2。\n4. 如果 bug 源于用户在 bug 报告中提供的代码，而不是 p5.js 的行为：\n * 确定是否可以通过改进 p5.js 的文档、代码实现或友好的错误系统来防止发生相同的错误。\n * 友好地将任何进一步的问题重定向到[论坛](https://discourse.processing.org/)或 [Discord](https://discord.com/invite/SHQ8dH25r9/)，如果对 p5.js 没有进一步的更改，则关闭 issue。\n\n### 功能请求\n\n对于功能请求 issues，应使用“新功能请求” issue 模板。通常使用下面流程来处理功能请求：\n\n1. 作为 p5.js 提高无障碍性的一部分，所有功能请求都必须说明它如何提高 p5.js 在该领域历史上被边缘化群体社区的可访问性。有关更多详细信息，请参阅[这里](../access/)。\n * 如果功能请求没有充分填写“提高无障碍性”字段，则可以要求 issue 作者说明该功能如何提高可访问性。\n * 功能的访问说明可以由社区中的其他成员（包括 issue 审阅者本人）提供。\n2. 根据以下标准评估所提出的新功能请求是否应包含在内。\n * 它是否符合 p5.js 的项目范围和[设计原则](../design_principles/)？\n * 比如说，可以考虑添加新的绘图原始形状的请求，但是采用基于浏览器的物联网协议的请求可能超出了范围。\n * 总体上，p5.js 的范围应相对较窄，以避免不常用的功能导致代码库过度臃肿。\n * 如果某个功能不符合 p5.js 的范围，则可以由 issue 的作者或社区中的其他成员将该功能实现为附加库。\n * 如果不清楚是否合适，建议制作一个附加程式库作为概念验证也不失为一个好主意。这有助于为用户提供使用该功能的方法，提供一个更具体的例子来说明其用途和重要性，而且不一定需要是完全集成的完整解决方案。如果合适，以后还可以将其集成到 p5.js 的核心中。\n * 它是否可能被视为破坏性变更？\n * 它是否会与现有的 p5.js 函数和变量冲突？\n * 它是否会与已经为 p5.js 编写的典型示例冲突？\n * 可能会导致上述冲突的功能应被视为破坏性变更，如果没有[进行重大版本发布](https://docs.npmjs.com/about-semantic-versioning/)，我们不应对 p5.js 进行破坏性变更。\n\n* 提出的新功能是否可以使用已经存在的 p5.js 功能、相对简单的原生 JavaScript 代码或现有易于使用的库来实现？\n * 例如，不必提供一个用于连接字符串数组的 p5.js 函数，例如 `join([\"Hello\", \"world!\"])`，而应优先使用原生 JavaScript 的 `[\"Hello\", \"world!\"].join()`。\n\n3. 在满足可访问性要求和其他考虑因素的前提下，必须有至少两个主管或维护人员在开始处理 PR 前批准新功能请求。下面介绍了新功能的 PR 审查流程。\n\n### 功能增强\n\n对于功能增强 issues，应使用“现有功能增强” issue 模板。这里的流程与新增功能请求非常相似。新增功能请求与功能增强之间的区别可能有些模糊，但是功能增强主要涉及 p5.js 的现有功能，而新增功能请求可能是请求添加全新的功能。\n\n1. 与新增功能请求类似，功能增强只有在能提高 p5.js 无障碍性时才应被接受。请参阅上面的[部分1](#feature-request)。\n2. 功能增强的包含标准与上面的功能请求类似，但要特别注意潜在的破坏性变更。\n * 如果修改现有功能，则所有先前有效和记录的函数签名必须以相同的方式运行。\n3. 在开始进行 PR 之前，必须至少由一位负责人或维护者批准功能增强。功能增强的 PR 审核过程在下面有详细说明。\n\n### 讨论\n\n此类 issue 有一个简洁的模板（“讨论”），在把主题整合为更具体的内容（如功能请求）之前，用这个模板来收集有关主题的一般性反馈。当这一类的反馈结束并产生更具体的内容后，这类的讨论问题就可以关闭了：\n\n* 如果以讨论的形式提出了一个 issue，但其实应该是一个 bug 报告，应该使用正确的标签并删除“讨论”标签。同时也应向作者索取未包含在 bug 报告中的其他信息。\n* 如果以讨论的形式打开了一个 issue，但与源代码贡献或其他与 GitHub 存储库/贡献过程/贡献社区相关的问题无关(例如，讨论 p5.js 的草图使用的最佳投影仪类型)，应将其重定向到论坛或 Discord，并关闭 issue。\n* 如果适用，应向讨论 issues 添加其他标签，以进一步标识讨论的类型。\n\n***\n\n## 拉取请求\n\n几乎所有对 p5.js 存储库的代码贡献都是通过拉取请求进行的，管理者和维护者可能具有对存储库的推送访问权限，但在贡献代码时仍然鼓励他们遵循相同的 issue > PR > 审查流程。以下是审查 PR 时可以采取的一些步骤：\n\n* 拉取请求模板可以在[此处](../.github/PULL_REQUEST_TEMPLATE/)找到。\n* 几乎所有拉取请求必须先打开并讨论相关的 issues，这意味着在任何管理者或维护者审查 PR 之前，必须首先按照相关[issue 工作流程](#issues)进行操作。\n * 唯一不适用此规则的情况是非常小的拼写错误修正，这不需要打开 issue，任何具有合并访问权限的人都可以合并该修复，即使他们不是特定领域的管理者。\n * 尽管存在这个例外，但在实践中我们只会在通常鼓励贡献者开启新 issues 的情况下应用它。换句话说，如果对于这个例外是否适用存在疑问，只需打开一个 issue 即可。\n* 如果拉取请求不能完全解决引用的 issue，你可以编辑原始帖子，将“解决 #OOOO”改为“处理 #OOOO”，这样当合并此 PR 时，不会自动关闭原始 issue。\n\n### 简单修复\n\n像小的拼写错误修复之类的简单修复可以由具有合并访问权限的任何人直接合并，只需在 PR 的“更改的文件”选项卡中快速检查，并确保自动化 CI 测试通过。\n\n\n\n\n\n### Bug 修复\n\n1. Bug 修复应由相关领域的管理者审查，最好是同意修复相关 issue 的相同人员。\n2. PR 的“更改的文件”选项卡可用于初步审查修复是否与 issue 讨论中描述的一致。\n3. 尽可能在本地进行必要的测试。GitHub CLI 可以帮助简化部分流程。（请参阅下面的 [Tips ＆ Tricks](#tips-tricks) 了解更多详情）。\n * 修复应足够解决原始 issue。\n * 修复不应更改任何现有行为，除非在原始 issue 中已经达成一致。\n * 修复不应对 p5.js 的性能产生重大影响。\n * 修复不应对 p5.js 的可访问性产生任何影响。\n * 修复应使用现代标准的 JavaScript 编码。\n * 修复应通过所有自动化测试，并在相关的情况下包含新测试。\n4. 如果需要进行任何其他更改，应根据[此处](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request)所述，在相关行添加行级注释。\n * 还可以使用建议模块来建议具体的更改:\\\n \\\n \\\n \n * 如果需要进行多个更改，而不是多次添加单行注释，请按照[此处](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/)所述进行多行注释并请求更改。\n * 如果行级注释仅用于澄清或讨论，则在上一步中选择 \"Comment\" 而不是 \"Request changes\":\\\n \n5. 一旦 PR 已经被审查，并且不需要任何其他更改，负责人可以添加或不添加评论，在上一步中选择 \"Approve\" 选项，将 PR 标记为 \"Approved\"。然后，如果需要，他们可以要求另一个负责人或维护者进行进一步审查，或者如果他们具有合并访问权限，可以合并 PR，或者维护者将合并已批准的 PR。\n6. 应该调用 @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) 机器人，将任何新贡献者添加到 README.md 文件的贡献者列表中。每种贡献类型都可以用下面的`[contribution` `type]`代替，可用贡献类型的完整列表可以在上面的链接中找到。\n\n`@all-contributors` `please` `add` `@[GitHub` `handle]` `for` `[contribution` `type]`\n\n### 新功能/功能增强\n\n新功能或功能增强的 PR 的流程与 bug 修复类似，只有一个显着的区别：\n\n* 新功能/功能增强的 PR 在合并之前必须由至少两名主管或维护者进行审查和批准。\n\n### Dependabot\n\nDependabot 的 PR 通常只对存储库管理员可见，如果这与你无关，请跳过此部分。\n\n* 如果版本更新是一个[语义化](https://semver.org/)的补丁版本，并且自动化的 CI 测试通过，可以直接合并 Dependabot PR。\n* 如果 Dependabot PR 带有语义化的次要版本更改，并且自动化的 CI 测试通过，通常可以直接合并，但建议快速检查更新的依赖项的变更日志。\n* 如果 Dependabot PR 带有语义化的主要版本更改，可能会影响构建过程或 p5.js 的功能。在这种情况下，鼓励评审人员尽可能从当前版本到目标版本检查变更日志，并在本地测试 PR，确保所有过程正常运行，并根据依赖项中潜在的重大变更进行任何必要的更改。\n * 许多依赖项之所以增加主要版本号，仅因为它们不再官方支持非常旧的 Node.js 版本，这意味着在许多情况下，主要版本号的增长并不一定意味着有依赖项 API 更改而引起的破坏性变化。\n\n***\n\n## 构建过程\n\n本节不涵盖一般的构建设置和命令，而是关于幕后发生的详细信息。关于构建信息，请参阅[贡献者指南](../contributor_guidelines.md#working-on-p5js-codebase)。\n\nGruntfile.js 文件包含了 p5.js 及其他内容的主要构建定义。构建库和文档所使用的不同工具包括但不限于 Grunt、Browserify、YUIDoc、ESLint、Babel、Uglify 和 Mocha。从`default`任务开始，逆向分析可能会有所帮助。在阅读下面的说明时，参考 Gruntfile.js 文档可能会有所帮助。\n\n### 主要构建任务\n\n```js\ngrunt.registerTask('default', ['lint', 'test']);\n```\n\n当我们运行`grunt`或 npm 脚本`npm test`时，我们运行包含`lint`和`test`的默认任务。\n\n#### `lint` 任务\n\n```js\ngrunt.registerTask('lint', ['lint:source', 'lint:samples']);\n```\n\n`lint`任务包括两个子任务：`lint:source`和`lint:samples`。`lint:source`又进一步分为三个子任务：`eslint:build`、`eslint:source`和`eslint:test`，它们使用 ESLint 检查构建脚本、源代码和测试脚本。\n\n`lint:samples`任务首先运行`yui`任务，该任务本身包括`yuidoc:prod`、`clean:reference`和`minjson`，它们从源代码中提取文档到一个 JSON 文件中，删除上一步骤中未使用的文件，并将生成的 JSON 文件压缩为`data.min.json`。\n\n接下来，在`lint:samples`中有一个名为`eslint-samples:source`的自定义任务，其定义位于[./tasks/build/eslint-samples.js](../tasks/build/eslint-samples.js)中，它将使用 ESLint 检查文档示例代码，以确保其遵循与p5.js的其余部分相同的编码规范（这里首先运行`yui`，因为我们需要先构建 JSON 文件，然后才能对示例进行检查）。\n\n#### `test` 任务\n\n```js\ngrunt.registerTask('test', [\n 'build',\n 'connect:server',\n 'mochaChrome',\n 'mochaTest',\n 'nyc:report'\n]);\n```\n\n首先，让我们看一下`test`中的`build`任务。\n\n```js\ngrunt.registerTask('build', [\n 'browserify',\n 'browserify:min',\n 'uglify',\n 'browserify:test'\n]);\n```\n\n以`browserify`开头的任务在[./tasks/build/browserify.js](../tasks/build/browserify.js)中定义。它们执行相似的步骤，但有一些细微的差异。以下是将众多 p5.js 源代码文件整合为一个完整库的主要步骤：\n\n* `browserify`负责构建 p5.js，而`browserify:min`则构建下一步要进行压缩的中间文件。`browserify`和`browserify:min`之间的区别在于，`browserify:min`不包含 FES 运行所需的数据。\n* `uglify`将`browserify:min`的输出文件压缩，生成最终的 p5.min.js 文件（此步骤的配置在主 Gruntfile.js 中）。\n* `browserify:test`构建的版本与完整的 p5.js 版本相同，只是添加了用于测试代码覆盖率报告的代码（使用 [Istanbul](https://istanbul.js.org/) ）。\n\n在 browserify 步骤中，除了将各种文件合并为一个文件外，还执行了其他几个步骤。首先，使用`brfs-babel`将`fs.readFileSync()` node.js 特定代码的使用替换为文件的实际内容。这主要用于 WebGL 代码，以将作为独立文件编写的着色器代码内联到源代码中。\n\n接下来，使用 Babel 将来自 node\\_modules 的所有依赖项的源代码进行转译，以匹配在 package.json 中定义的 [Browserslist](https://browsersl.ist/) 要求，并将 ES6 导入语句转换为 browserify 能理解的 CommonJS `require()`。这也使我们能够使用 ES6 及更高版本中可用的较新语法，而不必担心浏览器兼容性问题。\n\n在捆绑之后但将捆绑代码写入文件之前，代码会在`pretty-fast`中运行。如果代码不应被缩小，我们则需清理代码，以使最终格式更加一致。 （如果有需要的话， p5.js 源代码应保持可读、可查阅）\n\n这里省略了一些小的详细步骤；你可以查看上面链接的 browserify 构建定义文件，以更详细地了解所有内容。\n\n```\nconnect:server\n```\n\n此步骤启动一个本地服务器，托管测试文件和构建的源代码文件，以便可以在 Chrome 中运行自动化测试。\n\n```\nmochaChrome\n```\n\n此步骤在[./tasks/test/mocha-chrome.js](../tasks/test/mocha-chrome.js)中定义。它使用 Puppeteer 来启动一个无头版本的 Chrome，可以进行远程控制，并运行与`./test`文件夹中的 HTML 文件相关联的测试，包括对未缩小和缩小版本的库进行单元测试，以及测试所有参考示例。\n\n```\nmochaTest\n```\n\n与`mochaChrome`不同，此步骤在 node.js 中运行，而不是在 Chrome 中运行，并且仅测试库中的一小部分功能。p5.js 中的大多数功能都需要浏览器环境，因此只有在新的测试确实不需要浏览器环境时，才应扩展此测试集合。\n\n```\nnyc:report\n```\n\n最后，在完成所有构建和测试之后，此步骤将收集`mochaChrome`对库的完整版本进行的测试覆盖率报告，并将测试覆盖数据打印到控制台。p5.js 的测试覆盖率主要用于监控和提供一些额外的数据点，我们的目标不是达到100%的测试覆盖率。\n\n以上内容涵盖了 Gruntfile.js 配置中的默认任务！\n\n### 杂项任务\n\n如果需要，可以直接使用`npx grunt [step]`运行所有步骤、子步骤和子子步骤，尽管对于某些步骤而言，如果依赖于此链中的较早步骤，可能没有太大意义进行操作。还有一些未在上面提到但在某些情况下可能有用的任务。\n\n```\ngrunt yui:dev\n```\n\n此任务将运行上述描述的文档和库构建，然后启动一个网站，提供与网站上[http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/)的参考页面功能相似的版本。然后，它将监视源代码的更改，并重新构建文档和库。\n\n当你在处理内联文档的参考资料时，使用`grunt` `yui:dev`将非常有用，因为你无需在每次更改后都将 p5.js 存储库中构建好的文件移动至本地的 p5.js-website 存储库并重新构建网站，而是可以直接在浏览器中预览你的更改，这样就可以通过这个略微简化的参考版本来查看更改了。依此方法，你也可以更有信心地认为你所做的更改会在网站上正确显示。请注意，这仅适用于对内联文档的修改；对参考页面本身（包括样式和布局）的更改，应在网站存储库上进行修改和测试。\n\n```\ngrunt watch\ngrunt watch:main\ngrunt watch:quick\n```\n\nwatch 任务将观察一系列文件的更改，并根据所更改的文件运行相关任务以构建参考文档或库。这些任务的作用是相同的，唯一的区别在于范围。\n\n`watch`任务将在检测到源代码更改时运行所有构建和测试，类似于在源代码中运行完整的默认任务。\n\n`watch:main`任务将在检测到源代码更改时运行库构建和测试，但不会重新构建参考文档。\n\n`watch:quick`任务将仅在检测到源代码更改时运行库构建。\n\n根据你的工作内容，选择最简化的 watch 任务可以节省手动重新构建的时间。\n\n***\n\n## 发布过程\n\n请参阅[release\\_process.md](../release_process/)。\n\n***\n\n## 提示与技巧\n\n有时，需要审核的 issues 和 PRs 的数量太多，可能会令人手足无措，尽管我们尽力采取一些简化流程的措施，但以下是你可以利用的一些提示和技巧，以帮助你审核 issues 和 PR。\n\n### 回复模板\n\n你可以使用 GitHub 的 [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) 功能，这是一个方便的功能，可在回复 issues 或 PR 时使用。上面描述的工作流程中的一些步骤可能需要使用相同或非常相似的回复（比如将 issues 重定向到论坛、接受 issues 以进行修复等），使用 Saved Replies 可以稍微提高效率。\n\n以下是 p5.js 维护者使用的一些 Saved Replies，你可以自己使用或创建你自己的 Saved Replies！\n\n##### 关闭：无法重现\n\n> 我们无法重现这个 issue，但如果你能提供一个演示问题的代码示例，请随时重新打开这个 issue。谢谢！\n\n##### 关闭：需要代码片段\n\n> 为了组织的目的，我们关闭了此 issue。如果您能提供一个说明问题的代码片段，请重新打开该 issue。谢谢！\n\n##### 关闭：使用论坛\n\n> 这里的 GitHub issues 是报告 p5.js 库本身的错误和问题的好地方。如果你有关于编写自己的代码、测试或遵循教程的问题，请在[论坛](https://discourse.processing.org/)上发布。谢谢！\n\n##### 关闭：GSOC\n\n> 谢谢！讨论 GSOC 提案的最佳地方是我们的[论坛](https://discourse.processing.org/c/summer-of-code/)。\n\n##### 关闭：访问权限\n\n> 目前看来，这个功能并没有引起太多关注，而且我们还没有一个清晰的解释来说明它是如何扩大[扩大访问权限](../access/)的，因此我们现在将关闭这个 issue。如果能够在 issue 请求中添加一个关于访问权限的声明，请随时重新打开此 issue。\n\n> 我们暂时关闭了此 issue，因为没有看到对此 issue 的较详细解释[扩大访问权限](../access/)。如果可以在 issue 请求中添加更详细的访问权限说明，请随时重新打开。谢谢！\n\n##### 关闭：插件\n\n> 我们认为这个功能超出了 p5.js API 的范围（我们尽量保持最简化），但它可以成为一个很好的插件库的起点。请查看此处的文档，了解如何创建一个插件：\n> [https://github.com/processing/p5.js/blob/main/contributor\\_docs/creating\\_libraries.md](../creating_libraries/)\n\n##### 关闭 PR：先提出 issue\n\n> 谢谢。作为提醒，必须在打开拉取请求之前打开 issues 并使用 issues 标记拉取请求。这对于跟踪开发并保持讨论清晰是必要的。谢谢！\n\n##### 批准 issue 修复。\n\n> 你可以继续进行修复。谢谢。\n\n##### 合并 PR\n\n> 看起来不错。谢谢！\n\n### GitHub CLI\n\n使用看似复杂的 git 命令来获取 PR 版本的代码并在本地进行测试，可能会使复杂的 PR 审查变得更加困难。幸运的是，[GitHub CLI](https://cli.github.com/) 工具可以极大地帮助简化这个过程以及其他操作。\n\n安装完 CLI 并登录后，你只需要运行命令 `gh pr checkout [pull_request_id]` 就可以在本地审查 PR。这个命令会自动为你获取远程 fork，创建一个分支，并切换到该分支。如果要返回到主分支，只需像切换分支一样运行 `git checkout main` 即可。你甚至可以直接从 CLI 在 PR 中留下评论，而无需访问网页页面！\n\nGitHub CLI 还提供了许多其他命令，你可能会发现它们有用。无论如何，这是一个很好的工具。\n\n### 管理通知\n\n不再需要手动监视存储库的\"Issues\"或\"Pull Requests\"选项卡以获取新的 issues 或 PRs。你可以通过在存储库页面顶部与存储库名称相对的地方点击带有眼睛图标的\"Watch\"按钮来“关注”该存储库。\n\n\n\n通过关注存储库，诸如新 issues、新 PRs、提及你的用户名以及其他你在存储库上订阅的活动都会作为通知发送到你的[通知页面](https://github.com/notifications/)，你可以将其标记为已读或忽略，就像处理电子邮件收件箱一样。\n\n在某些情况下，你可能会收到 GitHub 发送的与你关注的存储库中的活动相关的电子邮件，你可以在[通知设置页面](https://github.com/settings/notifications/)上进行自定义设置，包括完全取消订阅。\n\n根据你的工作方式设置这些通知，可以避免手动查找相关 issues /PR 并避免被 GitHub 的无休止的通知淹没。在这里需要保持良好的平衡。作为起始建议，你可以关注该存储库的\"Issues\"和\"Pull Requests\"，并设置仅在“参与、提及和自定义”时接收电子邮件通知。\n"},"单元测试\n":{"relativeUrl":"/contribute/unit_testing","description":"\n\n我们使用单元测试来确保代码库中的各个组件按照我们的期望正常工作。\n\n## 参考资料\n\n这是一个[关于单元测试的好的、快速入门指南](https://codeburst.io/javascript-unit-testing-using-mocha-and-chai-1d97d9f18e71/)，使用了类似的技术栈，还有一个[更详细的指南](https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d/)。\n\n## 运行所有单元测试\n\n在仓库根目录下，在终端中使用以下命令：\n\n```shellsession\n$ npm test\n```\n\n## 测试覆盖率\n\n每次运行测试时，都会生成一个覆盖率报告。该覆盖率报告详细说明了测试套件所覆盖的源代码文件的哪些部分，从而告诉我们代码库的多少被测试到了。\n\n在运行测试后，会打印出一个摘要，并且您可以在任何网络浏览器中查看详细报告，路径为 `coverage/index.html`。在 Mac 终端中，您可以运行 `open coverage/index.html` 命令，在默认的网络浏览器中打开该页面。您还可以在终端中使用命令 `npx nyc report --reporter=text` 运行测试后查看覆盖率报告。\n\n### 运行一个测试套件\n\n要运行单个测试或一组测试，在 `.js` 文件中的 `suite` 或 `test` 后面添加 `.only`，然后使用上述命令运行测试。\n\n**请注意，不要提交包含 `.only` 的代码！**（我们希望我们的 CI 运行 *所有* 的单元测试。）\n\n#### 示例\n\n要仅运行 \"p5.ColorConversion\" 测试套件，您需要更改 `test/unit/color/color_conversion.js` 文件的第一行：\n\n```js\nsuite.only('color/p5.ColorConversion', function() {\n```\n\n现在，当您使用 `npm test` 命令时，只有在该 `function()` 主体内的测试将被运行。\n\n### 跳过一个测试套件\n\n此功能与 `.only()` 相反。通过添加 `.skip()`，您可以告诉 Mocha 忽略这些测试套件和测试用例。被跳过的内容将被标记为待定，并作为待定内容报告。\n\n## 基础设施\n\n### 框架\n\n我们使用 [mocha](https://mochajs.org) 来组织和运行我们的单元测试。\n\n我们使用 [chai 的 `assert`（和 `expect`）](https://www.chaijs.com/api/assert/) 来编写关于代码应该如何运行的单个语句。\n\n### 环境\n\n我们在 `test/unit` 文件夹下有一系列在浏览器中运行的测试，还有在 `test/node` 文件夹下一系列在 Node.js 中运行的测试。\n\n浏览器测试在 [\"无头\" Chrome](https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai/) 中运行。这就是为什么在运行测试时不会弹出浏览器窗口的原因。\n\n### 设置和辅助函数\n\n这些目前仅适用于浏览器测试（大多数测试都在此运行）：\n\n* `test/js/mocha_setup.js` 配置了 mocha 的一些选项。\n* `test/js/chai_helpers.js` 设置了 chai，并向 `chai.assert` 添加了一些有用的函数。\n* `test/js/p5_helpers.js` 添加了一些用于测试 p5 sketches 的辅助函数。\n\nNode.js 测试的设置都在 `test/mocha.opts` 文件中完成。\n\n### 持续集成测试\n\n当您在 p5.js 仓库中发起拉取请求时，它会自动[运行测试](https://github.com/processing/p5.js/actions/)。这有助于我们确保每个拉取请求的测试都通过，而不需要个人贡献者进行额外的工作。它还会自动将覆盖率报告上传到 [Codecov](https://codecov.io/github/processing/p5.js)。\n\n## 添加单元测试\n\n如果您想添加更多的单元测试，请查看是否已经存在用于您要添加测试的组件的测试文件。通常，`src/` 中的文件对应的测试文件在 `test/unit` 目录下具有相同的路径。（例如，`src/color/p5.Color.js` 的测试在 `test/unit/color/p5.Color.js` 中。）\n\n如果找不到对应的文件，那可能是因为该文件尚未有任何测试（尚未 😉），所以按照上述约定创建一个新文件。如果您要测试的模块需要在浏览器中运行，您应该将它放在 `test/unit` 中；如果不需要，在 `test/node` 下添加。**如果不确定，请优先选择将浏览器测试添加到 `test/unit`！（如果需要，稍后可以很容易地将其移到其他地方。）**\n\n如果您必须为一个模块添加一个 `test/unit` 下的测试文件，那么您还需要在 `test/unit/spec.js` 文件的 `spec` 数组中将要测试的模块添加进去。这样可以确保您的测试运行时加载了必要的模块。您可以通过查看 `test/test.html` 文件在浏览器中查看这些测试。\n\n### 编写单元测试\n\n选择一个单元，它可以是一个方法或一个变量进行测试。让我们以 `p5.prototype.keyIsPressed` 作为示例。在开始编写测试之前，我们需要了解该方法的预期行为。\n\\*\\*预期行为：\\*\\*如果按下任意键，则布尔值系统变量应为 true；如果没有按键，则应为 false。\n现在，您可以针对这个预期行为考虑各种测试案例。可能的测试案例包括：\n\n* 变量是布尔值。\n* 如果按下了键，则应为 true。\n* 如果按下任意键（字母键、数字键、特殊键等），则应为 true。\n* 如果按下多个键，则应为 true。\n* 如果没有按键，则应为 false。\n* 如果您可以想到更多的情况，请继续为其编写测试！\n\n我们可以为 `p5.prototype.keyIsPressed` 创建一个测试套件，并开始编写相应的测试。我们将使用 mocha 来组织我们的单元测试。\n\n```js\nsuite('p5.prototype.keyIsPressed', function() {\n test('keyIsPressed is a boolean', function() {\n // 在这里编写测试\n });\n\n test('keyIsPressed is true on key press', function() {\n // 在这里编写测试\n });\n\n test('keyIsPressed is false when no keys are pressed', function() {\n // 在这里编写测试\n });\n});\n```\n\n我们已经构建了测试套件的结构，但还没有编写测试。我们将使用 chai 的 assert 进行编写。\n例如：\n\n```js\ntest('keyIsPressed is a boolean', function() {\n assert.isBoolean(myp5.keyIsPressed); // 断言值为布尔值。\n});\n```\n\n类似地，我们可以使用 `assert.strictEqual(myp5.keyIsPressed, true)` 来断言值是否为 true。您可以在此处阅读有关 chai 的 assert 的更多信息：[chai 文档](https://www.chaijs.com/api/assert/)。\n现在，您已经编写了测试，请运行它们并查看该方法是否按预期运行。如果不是，请为此创建一个问题，如果您愿意，甚至可以尝试修复它！\n"},"p5.js 网页可访问性\n":{"relativeUrl":"/contribute/web_accessibility","description":"\n\n本文档描述了 p5.js 的网页可访问性功能的结构，供贡献者、维护者和其他相关方使用。如果您有兴趣使您的作品对屏幕阅读器可访问，请访问[教程](https://p5js.org/tutorials/)，或者如果您想在屏幕阅读器上使用 p5.js，请访问[使用屏幕阅读器的 p5.js 教程](https://p5js.org/learn/p5-screen-reader.html)。\n\n## 概述\n\n由于画布 HTML 元素是位图，无法提供有关其上绘制形状的屏幕阅读器可访问信息，p5.js 提供了几个函数，使画布对屏幕阅读器更加可访问。\n\n目前，p5.js 支持为画布上的基本形状（使用 `textOutput()` 和 `gridOutput()`）生成屏幕阅读器可访问的输出，以及用户生成的画布内容的屏幕阅读器可访问描述（使用 `describe()` 和 `describeElement()`）。\n\n## 基本形状的库生成的可访问输出\n\n基本形状的支持可访问输出包括文本输出和网格输出。\n\n`textOutput()` 创建一个屏幕阅读器可访问的输出，描述画布上的形状。画布的一般描述包括画布大小、画布颜色和画布中的元素数量（例如：\"您的输出是一个大小为 400x400 像素的蓝色画布，其中包含以下 4 个形状：\"）。这个描述后面是形状的列表，其中描述了每个形状的颜色、位置和面积（例如：\"左上角的橙色椭圆，覆盖画布的 1%\"）。可以选择每个元素以获取更多详细信息。还提供了一个元素表格，在这个表格中，描述了形状、颜色、位置、坐标和面积（例如：\"橙色椭圆，位置：左上角，面积：2\"）。\n\n`gridOutput()` 根据每个形状的空间位置，将画布的内容以网格（HTML表格）的形式布局。在表格输出之前，会提供画布的简要描述。该描述包括背景颜色、画布大小、对象数量和对象类型（例如：\"淡紫蓝色画布尺寸为200x200，包含4个对象 - 3个椭圆和1个矩形\"）。网格以空间方式描述内容，每个元素根据其位置放置在表格的单元格中。在每个单元格中，提供元素的颜色和形状类型（例如：\"橙色椭圆\"）。这些描述可以单独选择以获取更多细节。还提供了一个元素列表，其中描述了形状、颜色、位置和面积（例如：\"橙色椭圆 位置=左上角 面积=1%\"）。\n\n如果用户将 `LABEL` 作为参数传递给上述任何一个函数，将创建一个附加的 div，其中包含与画布相邻的输出。这对于非屏幕阅读器用户来说很有用，他们可能希望将输出显示在画布的子 DOM 之外。然而，对于屏幕阅读器用户，使用 `LABEL` 会造成不必要的冗余。我们建议仅在开发过程中使用 `LABEL`，在发布或与屏幕阅读器用户共享草稿之前将其删除。\n\n### 输出结构\n\n尽管 `textOutput()` 和 `gridOutput()` 位于 [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) 中，但输出是使用库中分布的多个函数创建和更新的。本节详细介绍支持可访问输出的不同函数。\n\n#### outputs.js\n\n[src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) 包含创建可访问输出的核心函数：\n\n* `textOutput()`: 此函数通过将 `this._accessibleOutputs.text` 设置为 `true` 并调用 `_createOutput('textOutput', 'Fallback')` 来激活文本输出。如果作为参数传递了 `LABEL`，函数还会通过将 `this._accessibleOutputs.textLabel` 设置为 `true` 并为标签调用 `_createOutput('textOutput', 'Label')` 来激活文本输出标签。\n* `gridOutput()`: 此函数通过将 `this._accessibleOutputs.grid` 设置为 `true` 并调用 `_createOutput('gridOutput', 'Fallback')` 来激活网格输出。如果作为参数传递了 `LABEL`，函数还会通过将 `this._accessibleOutputs.textLabel` 设置为 `true` 并为标签调用 `_createOutput('gridOutput', 'Label')` 来激活网格输出标签。\n* `_createOutput()`: 此函数为所有可访问输出创建 HTML 结构。根据输出的类型和显示方式，创建的 HTML 结构会有所不同。该函数还会初始化 `this.ingredients`，其中存储了所有输出的数据，包括形状、颜色和 pShapes（其中存储画布先前形状的字符串）。如果 `this.dummyDOM` 不存在，它还会创建 `this.dummyDOM`。`this.dummyDOM` 存储了 `<body>` 内的 DOM 元素的 HTML 集合。\n* `_updateAccsOutput()`: 如果使用 accessibleOutputs，在 `setup()` 和 `draw()` 结束时调用此函数。如果 `this.ingredients` 与当前输出不同，该函数会调用输出的更新函数（`_updateGridOutput` 和 `_updateTextOutput`）。只在 `setup()` 和 `draw()` 结束时调用此函数，并且只在成分不同的情况下调用 `_updateGridOutput` 和 `_updateTextOutput`，有助于避免对屏幕阅读器造成过多负担。\n* `_addAccsOutput()`: 当 accessibleOutputs 为 true 时，此函数返回 true。\n* `_accsBackground()`: 在 `background()` 结束时调用此函数。它重置 `this.ingredients.shapes`，如果背景色与先前不同，则调用 `_rgbColorName()` 获取颜色的名称，并将其存储在 `this.ingredients.colors.background` 中。\n* `_accsCanvasColors()`: 在 `fill()` 和 `stroke()` 结束时调用此函数。此函数通过将填充和描边颜色保存在 `this.ingredients.colors.fill` 和 `this.ingredients.colors.stroke` 中来更新填充和描边颜色。它还调用 `_rgbColorName()` 来获取颜色的名称。\n* `_accsOutput()`: 构建 `this.ingredients.shapes`，其中包括用于创建输出的所有形状。此函数在基本形状函数结束时调用（参见 accessible output beyond src/accessibility）。根据调用它的形状，`_accsOutput()` 可能会调用辅助函数来收集有关将用于创建输出的该形状的所有信息。这些辅助函数不是原型的一部分，包括：\n * `_getMiddle()`: 返回矩形、弧形、椭圆、三角形和四边形的中心点或质心。\n * `_getPos()`: 返回形状在画布上的位置（例如：'左上角'、'右中'）。\n * `_canvasLocator()`: 返回映射到画布的 10\\*10 网格上的形状的位置。\n * `_getArea()`: 返回形状的面积占画布总面积的百分比。\n\n当 `this._accessibleOutputs.text` 或 `this._accessibleOutputs.text` 为 `true` 时，p5.js 库中的多个函数会调用 output.js 中的函数：\n\n* `_accsOutput()` 在以下函数中被调用：\n * `p5.prototype.triangle()`\n * `p5.prototype._renderRect()`\n * `p5.prototype.quad()`\n * `pp5.prototype.point()`\n * `p5.prototype.line()`\n * `p5.prototype._renderEllipse()`\n * `p5.prototype.arc()`\n* `_updateAccsOutput()` 在以下函数中被调用：\n * `p5.prototype.redraw()`\n * `p5.prototype.resizeCanvas()`\n * `this._setup`\n* `_accsCanvasColors()` 在以下函数中被调用：\n * `p5.Renderer2D.prototype.stroke()`\n * `p5.Renderer2D.prototype.fill()`\n* `_accsBackground()` 在以下函数中被调用：\n * `p5.Renderer2D.prototype.background()`\n\n#### textOutput.js\n\n[src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) 包含更新文本输出的所有函数。该文件中的主要函数是 `_updateTextOutput()`，在 [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) 中的 `_updateAccsOutput()` 调用该函数，当 `this._accessibleOutputs.text` 或 `this._accessibleOutputs.textLabel` 为 `true` 时调用。\n\n`_updateTextOutput()` 使用 `this.ingredients` 构建文本输出和文本输出标签的内容，包括摘要、形状列表和形状详情表格。如果这些内容与当前输出不同，它会更新它们。构建输出内容由文件中的几个辅助函数支持，这些函数不是原型的一部分：\n\n* `_textSummary()`: 构建文本输出摘要的内容。\n* `_shapeDetails()`: 构建包含形状详情的文本输出表格。\n* `_shapeList()`: 构建文本输出的形状列表。\n\n#### gridOutput.js\n\n[src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) 包含更新网格输出的所有函数。该文件中的主要函数是 `_updateGridOutput()`，在 [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) 中的 `_updateAccsOutput()` 调用该函数，当 `this._accessibleOutputs.grid` 或 `this._accessibleOutputs.gridLabel` 为 `true` 时调用。\n\n`_updateGridOutput()` 使用 `this.ingredients` 构建网格输出和网格输出标签的内容，包括摘要、映射形状位置的网格和形状列表。如果这些内容与当前输出不同，它会更新它们。构建输出内容由文件中的几个辅助函数支持，这些函数不是原型的一部分：\n\n* `_gridSummary()`: 构建网格输出摘要的内容。\n* `_gridMap()`: 构建映射形状在画布上位置的网格。\n* `_gridShapeDetails()`: 构建网格输出的形状列表，列表的每一行都包含形状的详细信息。\n\n#### color\\_namer.js\n\n在创建屏幕阅读器可访问的输出时，命名画布中使用的颜色很重要。[src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) 包含 `_rgbColorName()` 函数，该函数接收 RGBA 值并返回颜色名称。该函数由 [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) 中的 `_accsBackground()` 和 `_accsCanvasColors` 调用。\n\n`_rgbColorName()` 使用 `color_conversion._rgbaToHSBA()` 获取颜色的 HSV 值，然后使用 `_calculateColor()` 获取颜色名称。此文件中的 `_calculateColor()` 函数来自 [colorNamer.js](https://github.com/MathuraMG/color-namer/)，它是作为 [2018 年 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) 的一部分和与盲人屏幕阅读器专家用户协商开发的。此函数通过将 HSV 值与 `colorLookUp` 数组中存储的值进行比较来返回颜色名称。这个函数应该进行更新，因为某些灰色的阴影没有正确命名。在更新时，还重要的是通过包含解释每行代码的注释来确保贡献者的可读性。\n\n## 用户生成的可访问画布描述\n\n### describe()\n\n`describe()` 函数为画布创建一个供屏幕阅读器访问的描述。第一个参数应为一个描述画布的字符串。第二个参数是可选的。如果指定了该参数，它决定描述的显示方式。所有的描述都成为画布元素的子 DOM 的一部分。如果用户将第二个参数设置为 `LABEL`，则会创建一个相邻于画布的附加描述的 `<div>`。\n\n`describe()` 在 [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js) 中被多个函数支持：\n\n* `_descriptionText()`: 检查文本不是 `LABEL` 或 `FALLBACK`，并确保文本以标点符号结尾。如果文本不以 '.'、','、';'、'?'、'!' 结尾，则该函数在字符串末尾添加一个 '.'。返回文本。\n* `_describeHTML()`: 创建画布的备用 HTML 结构。如果 `describe()` 的第二个参数是 `LABEL`，则该函数创建一个相邻于画布元素的 `<div>` 来显示描述文本。\n\n### describeElement()\n\n`describeElement()` 函数为绘图元素或一组共同产生含义的形状创建一个供屏幕阅读器访问的描述。第一个参数应为元素的名称字符串，第二个参数应为元素的描述字符串。第三个参数是可选的。如果指定了该参数，它决定描述的显示方式。所有元素描述都成为画布元素的子 DOM 的一部分。如果用户将第三个参数设置为 `LABEL`，则会创建一个相邻于画布的附加元素描述的 `<div>`。\n\n`describeElement()` 在 [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js) 中被多个函数支持：\n\n* `_elementName()`: 检查元素名称不是 `LABEL` 或 `FALLBACK`，并确保文本以冒号结尾。返回元素名称。\n* `_descriptionText()`: 检查文本不是 `LABEL` 或 `FALLBACK`，并确保文本以标点符号结尾。如果文本不以 '.'、','、';'、'?'、'!' 结尾，则该函数在字符串末尾添加一个 '.'。返回文本。\n* `_describeElementHTML()`: 创建画布的备用 HTML 结构。当 `describeElement()` 的第二个参数是 `LABEL` 时，该函数创建一个相邻于画布元素的 `<div>` 来显示描述文本。\n"},"WebGL 贡献指南\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* 如何开始着手处理 p5.js WebGL 模式的源代码。 */}\n\n\n\n如果你正在阅读该文档，那么你可能对帮助开发 WebGL 模式感兴趣。感谢你的帮助，我们对此非常感激！本页面旨在解释我们是如何组织 WebGL 贡献的，并提供一些建议从而帮助你进行修改。\n\n## 资源\n\n* 阅读我们的 [p5.js WebGL architecture overview](../webgl_mode_architecture/) 了解 WebGL 模式与 2D 模式的区别。这将是理解着色器、笔触等一些实现细节的宝贵参考。\n* 阅读我们的[contributor guidelines](https://p5js.org/contributor-docs/#/./contributor_guidelines/) 获取如何创建 issues 、设置代码库和测试更改的信息。\n* 了解一些关于浏览器的 WebGL API 的信息会很有帮助，这是 p5.js 的 WebGL 模式建立之上的：\n * [WebGL fundamentals](https://webglfundamentals.org/) 讲解了许多核心渲染概念。\n * [The Book of Shaders](https://thebookofshaders.com/) 讲解了 WebGL 着色器中使用的许多技术。\n\n## 规划\n\n我们通过 [GitHub Project](https://github.com/orgs/processing/projects/5/) 来组织issues，并将它们分为以下几类：\n\n* **系统级修改** 涉及长期目标，并对代码产生深远影响。在开始实施之前，此类变更需要进行充分的讨论和全面的规划。\n* **尚无解决方案的 bugs** 是指那些还需要通过调试来确定具体原因的错误报告。在确定具体原因之前，这些 bugs 还不适合进行修复；一旦原因明确，我们便可以开始讨论最佳的修复方法。\n* **有解决方案但未 PR 的 bugs** 是指已经确定了修复方案，且可以开始进行编写代码的 bugs 。\n* **小幅优化** 涉及到新增功能，这些功能在现有架构中已有明确定位，无需进一步讨论如何将它们融入系统。一旦决定加入这些功能，就可以直接开始编写相关代码。\n* **2D 功能** 指的是那些在 p5.js 中的其他部分已经实现，但在 WebGL 模式下尚不支持的功能。这些功能一旦实现，其预期表现应与 2D 模式保持一致。尽管我们可能需要讨论这些功能的最佳实施方式，但对用户来说，这些功能的要求是清晰明确的。\n* **无法在所有情况下正常运作的功能** 是指在 WebGL 模式下存在但并不适用于所有 WebGL 使用场景的功能。举例来说，某些 p5.js 方法同时支持 2D 和 3D 坐标系统，然而其他的方法可能在使用 3D 坐标时失效。在通常情况下，这些功能是可以着手进行开发的。\n* **功能请求** 是指对其他所有代码的更改请求；这些请求还需要一些讨论，以确保它们符合 WebGL 模式下的发展方向。\n* **文档** 是指那些无需进行代码更改，而是需要更好地记录 p5.js 行为的 issues 。\n\n## 代码放置\n\n所有与 WebGL 相关的内容都会存放在`src/webgl`子目录中。在该目录下，顶级 p5.js 函数根据其主题领域分成不同的文件：设置光源的命令放在`lighting.js`中；设置材质的命令则放在`materials.js`中。\n\n在实现用户界面类时，我们通常采用一类一个文件的方式。这些文件可能会偶尔包含一些其他的内部实用类。例如，`p5.Framebuffer.js` 包括`p5.Framebuffer`类，并且还包含一些特定于帧缓冲的其他主要类的子类。进一步的帧缓冲特定子类也可以放在该文件中。\n\n`p5.RendererGL`是一个处理许多行为的大类。因此，我们不是将所有功能都放在一个大的类文件中，而是根据其所属的主题领域将其功能分成许多文件。以下是我们将`p5.RendererGL`划分至各个文件中的描述，以及每个文件应包含的内容：\n\n#### `p5.RendererGL.js`\n\n初始化和核心功能。\n\n#### `p5.RendererGL.Immediate.js`\n\n与 **即时模式 (immediate mode)** 绘图相关的功能（不会被存储和复用的形状，例如`beginShape()`和`endShape()`）\n\n#### `p5.RendererGL.Retained.js`\n\n与 **保留模式 (retained mode)** 绘制相关的功能（已经存储以供复用的形状，如`sphere()`）\n\n#### `material.js`\n\n混合模式管理\n\n#### `3d_primitives.js`\n\n可以绘制形状的用户界面函数，如`triangle()`。这些函数定义了形状的几何结构。然后在`p5.RendererGL.Retained.js`或`p5.RendererGL.Immediate.js`中渲染这些形状，从而将几何输入视为通用形状。\n\n#### `Text.js`\n\n用于文本渲染的功能和实用类\n\n## 测试 WebGL 的修改\n\n### 测试一致性\n\n在 p5.js 中，函数有多种使用方式。手动验证所有方式是很困难的，因此我们尽可能地添加单元测试。通过这种方式，当我们做出新的修改时，如果所有单元测试通过，我们就可以确信新的修改没有破坏任何已有功能。\n\n在添加新测试时，如果该功能在2D模式下也有效，那么为了确保一致性，最好的方法之一就是检查在两种模式下生成的像素是否相同。以下是一个单元测试的示例：\n\n```js\ntest('coplanar strokes match 2D', function() {\n const getColors = function(mode) {\n myp5.createCanvas(20, 20, mode);\n myp5.pixelDensity(1);\n myp5.background(255);\n myp5.strokeCap(myp5.SQUARE);\n myp5.strokeJoin(myp5.MITER);\n if (mode === myp5.WEBGL) {\n myp5.translate(-myp5.width/2, -myp5.height/2);\n }\n myp5.stroke('black');\n myp5.strokeWeight(4);\n myp5.fill('red');\n myp5.rect(10, 10, 15, 15);\n myp5.fill('blue');\n myp5.rect(0, 0, 15, 15);\n myp5.loadPixels();\n return [...myp5.pixels];\n };\n assert.deepEqual(getColors(myp5.P2D), getColors(myp5.WEBGL));\n});\n```\n\n该方法并不总是适用，因为你无法在 2D 模式中关闭抗锯齿。与此同时，在 WebGL 模式中，抗锯齿通常会略有不同。但对于实现 x 和 y 轴上直线的情况，这种方法是可行的！\n\n如果一个功能只适用于 WebGL ，我们通常会检查其中的几个像素，而不是将像素与 2D 模式的结果进行比较，以确保它们的颜色符合我们的预期。在不久的将来，我们可能会将其改进为一个更加强劲且稳定的系统，并且该系统会与我们期望结果的完整图像快照进行比较，而非其中的几个像素。但在现有情况下，以下是一个像素颜色检查的示例：\n\n```js\ntest('color interpolation', function() {\n const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);\n // upper color: (200, 0, 0, 255);\n // lower color: (0, 0, 200, 255);\n // expected center color: (100, 0, 100, 255);\n myp5.beginShape();\n myp5.fill(200, 0, 0);\n myp5.vertex(-128, -128);\n myp5.fill(200, 0, 0);\n myp5.vertex(128, -128);\n myp5.fill(0, 0, 200);\n myp5.vertex(128, 128);\n myp5.fill(0, 0, 200);\n myp5.vertex(-128, 128);\n myp5.endShape(myp5.CLOSE);\n assert.equal(renderer._useVertexColor, true);\n assert.deepEqual(myp5.get(128, 128), [100, 0, 100, 255]);\n});\n```\n\n### 性能测试\n\n尽管性能不是 p5.js 的首要关注点，但我们仍会尽量确保修改不会对性能造成较大影响。在通常情况下，我们会创建两个测试绘图：一个包含了你的修改，另一个则没有。然后，我们会比较两者的帧率。\n\n关于如何衡量性能的一些建议：\n\n* 在你绘图的顶部使用 `p5.disableFriendlyErrors = true` 来禁用友好错误提示 （friendly errors)（或仅测试 `p5.min.js`，因为该版本不包含友好错误提示系统）\n* 显示平均帧率，从而了解稳定状态下的帧率：\n\n```js\nlet frameRateP;\nlet avgFrameRates = [];\nlet frameRateSum = 0;\nconst numSamples = 30;\nfunction setup() {\n // ...\n frameRateP = createP();\n frameRateP.position(0, 0);\n}\nfunction draw() {\n // ...\n const rate = frameRate() / numSamples;\n avgFrameRates.push(rate);\n frameRateSum += rate;\n if (avgFrameRates.length > numSamples) {\n frameRateSum -= avgFrameRates.shift();\n }\n \n frameRateP.html(round(frameRateSum) + ' avg fps');\n}\n```\n\n以下是我们会进行测试的一些情况，因为它们会对渲染管线的不同部分造成压力：\n\n* 几个非常复杂的形状 （例如，一个大型 3D 模型或一段长曲线）\n* 许多简单的形状 （例如，在for loop中多次调用`line()`）\n"},"p5.js WEBGL模式架构\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"\n\n本文档描述了p5.js WEBGL模式的结构，供p5.js的贡献者、维护者和其他感兴趣的人参考。如果您对在草图中使用3D图形感兴趣，请查看[此教程](https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5/)。\n\n## 结构和对象概述\n\nWEBGL架构中的核心对象包括p5.Renderer.GL、p5.Shader、p5.Texture和p5.Geometry。\np5.Renderer.GL的单个实例管理其自己的p5.Shaders、p5.Textures和p5.Geometry。其中一个目标是允许使用WebGL进行屏幕外渲染，但尚未进行测试。\n着色器和纹理与特定的GL上下文关联在一起，通过渲染器进行管理。\n\n### p5.RendererGL\n\np5.RendererGL对象是p5.js的WEBGL/3D模式渲染器。\n它继承自p5.Renderer，提供了2D模式中不可用的额外功能，例如：`box()`，`cone()`，着色器的使用，加速纹理渲染和光照。\n\n* 管理（创建和缓存）着色器（p5.Shader对象）和纹理（p5.Texture对象）\n* 通过着色器准备形状的坐标，用作属性数组\n* 在调用描边、填充、纹理和各种光照方法时，选择正确的着色器，并向这些着色器提供适当的uniform变量\n* 维护与光照有关的数据：使用各种类型的光源及其参数的计数\n* 缓存三维基元的几何形状（在保留模式下），除了使用begin/endShape创建的形状，这些形状在每次绘制时都会动态生成并推送到GL中（在即时模式下）。\n\n渲染器负责选择适当的p5.Shader来满足当前的绘图条件。\n\n### p5.Shader\n\np5.Shader类提供了对GL程序的uniform变量和attribute变量的访问。\n\n* 编译和链接顶点着色器和片元着色器组件\n* 提供API来访问和设置着色器的属性和uniform变量\n* 在渲染形状之前，绑定着色器所需的纹理\n* 提供bindShader()方法，在绘制形状之前使用，在形状绘制之后解绑着色器。\n\n有四个默认的着色器，如着色器部分所述。\n\n### p5.Texture\n\np5.Texture对象根据`p5.Image`、`p5.MediaElement`、`p5.Element`或`ImageData`管理基于纹理的GL状态。\n\n* 在内部处理基于类型的图像数据处理，这样p5.Renderer的实现在处理纹理时就不需要在自己的方法中做特殊例外。\n* 根据情况每帧进行更新，通过猜测图像数据是否发生了变化。如果没有进行更改，则尽量不上传纹理，以提高性能。\n\n### p5.Geometry\n\n在p5.Renderer对象的缓存中，以p5.Geometry对象的形式存储在保留模式下呈现的形状。\n渲染器根据绘制的形状和其参数（例如使用`box(70, 80, 90, 10, 20)`创建的盒子的几何形状通过`'box|70|80|90|10|20'`进行映射）将字符串映射到p5.Geometry对象。调用使用保留几何形状的函数时，首次通过创建一个p5.Geometry对象，并使用上述字符串ID将其存储在几何哈希中。后续的调用会在哈希中查找该ID，如果找到则使用它引用现有对象，而不是创建一个新对象。\n\n* 为几何形状的顶点、法线、面、线顶点、线法线和纹理坐标存储数据。\n* 提供计算一组顶点的面、法线、线顶点和线法线的方法。\n\n## 即时模式\n\n使用即时模式进行绘制的所有属性都存储在渲染器中的对象中，用于绘制到GL绘图上下文，然后被丢弃。\n\n## 几何形状：保留模式和即时模式\n\n保留几何形状用于3D基本图形，而即时模式用于使用begin/endShape创建的形状。\n\n| 使用保留几何形状的函数 | 使用即时模式几何形状的函数 |\n| ----------- | ----------------- |\n| plane() | bezier() |\n| box() | curve() |\n| sphere() | line() |\n| cylinder() | beginShape() |\n| cone() | vertex() |\n| ellipsoid() | endShape() |\n| torus() | point() |\n| triangle() | curveVertex() |\n| arc() | bezierVertex() |\n| point() | quadraticVertex() |\n| ellipse() | |\n| rect() | |\n| quad() | |\n| text() | |\n\n## 纹理管理\n\np5.Renderer.GL实例按需管理一组p5.Textures对象。\n为使用`texture()`方法或作为自定义着色器提供的uniform的图像和视频创建纹理。\n\n当渲染器需要纹理时，首先检查是否已经为给定的图像/视频创建了纹理，然后将其提供给着色器进行渲染。只有在找不到图像/视频的现有纹理时才会创建新的纹理。\n\n## 着色器\n\n### 着色器的类型\n\n#### Color Shader（颜色着色器）\n\n基于当前填充颜色，为对象提供平面着色。\n\n#### Light Shader（用于光照和纹理）\n\n考虑以下内容：\n\n* 由`ambientLight()`、`directionalLight()`、`pointLight()`、`spotLight()`和`specularColor()`设置的光照参数\n* 由`ambientMaterial()`、`emissiveMaterial()`和`specularMaterial()`设置的材质参数\n* 由`texture()`设置的纹理参数\n\n#### Normal Shader（法线着色器）\n\n在使用`normalMaterial()`时设置法线着色器。它使用表面的法线矢量来确定片段的颜色。\n\n### 着色器参数\n\n#### 标准模型视图和相机uniforms\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| --------------------------------- | ----- | ------- | ----- | ----- | ---- |\n| `uniform mat4 uModelViewMatrix;` | x | x | x | x | x |\n| `uniform mat4 uProjectionMatrix;` | x | x | x | x | x |\n| `uniform vec4 uViewPort;` | x | | | | |\n| `uniform vec4 uPerspective;` | x | | | | |\n\n#### 几何属性和uniforms\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| ------------------------------ | ----- | ------- | ----- | ----- | ---- |\n| `attribute vec3 aPosition;` | x | x | x | x | x |\n| `attribute vec3 aNormal;` | | x | | x | |\n| `attribute vec2 aTexCoord;` | | x | | x | |\n| `uniform mat3 uNormalMatrix;` | | x | | x | |\n| `attribute vec4 aDirection;` | x | | | | |\n| `uniform float uStrokeWeight;` | x | | | | |\n\n#### 材质颜色\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| ------------------------------ | ----- | ------- | ----- | ----- | ---- |\n| `uniform vec4 uMaterialColor;` | x | x | | | x |\n| `attribute vec4 aVertexColor;` | | | x | | |\n\n#### 光照参数\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| --------------------------------------------- | ----- | ------- | ----- | ----- | ---- |\n| `uniform int uAmbientLightCount;` | | x | | | |\n| `uniform int uDirectionalLightCount;` | | x | | | |\n| `uniform int uPointLightCount;` | | x | | | |\n| `uniform int uSpotLightCount;` | | x | | | |\n| `uniform vec3 uAmbientColor[8];` | | x | | | |\n| `uniform vec3 uLightingDirection[8];` | | x | | | |\n| `uniform vec3 uDirectionalDiffuseColors[8];` | | x | | | |\n| `uniform vec3 uDirectionalSpecularColors[8];` | | x | | | |\n| `uniform vec3 uPointLightLocation[8];` | | x | | | |\n| `uniform vec3 uPointLightDiffuseColors[8];` | | x | | | |\n| `uniform vec3 uPointLightSpecularColors[8];` | | x | | | |\n| `uniform float uSpotLightAngle[8];` | | x | | | |\n| `uniform float uSpotLightConc[8];` | | x | | | |\n| `uniform vec3 uSpotLightDiffuseColors[8];` | | x | | | |\n| `uniform vec3 uSpotLightSpecularColors[8];` | | x | | | |\n| `uniform vec3 uSpotLightLocation[8];` | | x | | | |\n| `uniform vec3 uSpotLightDirection[8];` | | x | | | |\n| `uniform bool uSpecular;` | | x | | | |\n| `uniform bool uEmissive;` | | x | | | |\n| `uniform int uShininess;` | | x | | | |\n| `uniform bool uUseLighting;` | | x | | | |\n| `uniform float uConstantAttenuation;` | | x | | | |\n| `uniform float uLinearAttenuation;` | | x | | | |\n| `uniform float uQuadraticAttenuation;` | | x | | | |\n\n#### 纹理参数\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| ----------------------------- | ----- | ------- | ----- | ----- | ---- |\n| `uniform sampler2D uSampler;` | | x | | | |\n| `uniform bool isTexture;` | | x | | | |\n\n#### 通用参数\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| ---------------------------- | ----- | ------- | ----- | ----- | ---- |\n| `uniform float uResolution;` | | | x | | |\n| `uniform float uPointSize;` | | | x | | x |\n\n#### 变量参数\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| ----------------------------------- | ----- | ------- | ----- | ----- | ---- |\n| `varying vec3 vVertexNormal;` | | x | | | |\n| `varying vec2 vVertTexCoord;` | | x | | | |\n| `varying vec3 vLightWeighting;` | | x | | | |\n| `varying highp vec2 vVertTexCoord;` | | | | x | |\n| `varying vec4 vColor;` | | | x | | |\n| `varying float vStrokeWeight` | | | | | x |\n\n## 下一步计划\n\n即将推出！\n"}},"examples":{"基本图形形状":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"\n这个程序展示了基本图形原始函数的使用方法，包括 <a href=\"https://p5js.org/reference/p5/square\" target=\"_blank\">square()</a>、<a href=\"https://p5js.org/reference/p5/rect\" target=\"_blank\">rect()</a>、<a href=\"https://p5js.org/reference/p5/ellipse\" target=\"_blank\">ellipse()</a>、<a href=\"https://p5js.org/reference/p5/circle\" target=\"_blank\">circle()</a>、<a href=\"https://p5js.org/reference/p5/arc\" target=\"_blank\">arc()</a>、<a href=\"https://p5js.org/reference/p5/line\" target=\"_blank\">line()</a>、<a href=\"https://p5js.org/reference/p5/triangle\" target=\"_blank\">triangle()</a> 和 <a href=\"https://p5js.org/reference/p5/quad\" target=\"_blank\">quad()</a>。"},"颜色":{"relativeUrl":"/examples/shapes-and-color-color","description":"\r\n这个例子在“基本图形形状”的示例基础上，加入了颜色的元素。<a href=\"https://p5js.org/reference/p5/background\" target=\"_blank\">background()</a> 会为画布填充单一颜色，<a href=\"https://p5js.org/reference/p5/stroke\" target=\"_blank\">stroke()</a> 会设置描边的颜色，而 <a href=\"https://p5js.org/reference/p5/fill\" target=\"_blank\">fill()</a> 会设置图形内部的颜色。<a href=\"https://p5js.org/reference/p5/noFill\" target=\"_blank\">noStroke()</a> 和 <a href=\"https://p5js.org/reference/p5/noFill\" target=\"_blank\">noFill()</a> 会分别关闭描边颜色和内部填充颜色。颜色可以通过多种方式表达。本示例演示了几种不同的选项。"},"绘制线条":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"\r\n可以通过点击并拖拽鼠标来绘制线条。\r\n\r\n本示例展示了几个内置变量的使用方法。<a href=\"https://p5js.org/reference/p5/mouseX\">mouseX</a> 和 <a href=\"https://p5js.org/reference/p5/mouseY\">mouseY</a>\r\n可以存储当前的鼠标位置，而 <a href=\"https://p5js.org/reference/p5/pmouseX\">pmouseX</a> 和 <a href=\"https://p5js.org/reference/p5/pmouseY\">pmouseY</a>\r\n代表上一次的鼠标位置。\r\n *这个示例也展示了 HSB（色调-饱和度-亮度）颜色模式 <a href=\"https://p5js.org/reference/p5/colorMode\">colorMode</a> 的使用方法，所以第一个变量用来设置色调。"},"事件驱动的动画":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"\r\n这个示例展示了通过 <a href=\"https://p5js.org/reference/p5/loop\">loop()</a> 和 <a href=\"https://p5js.org/reference/p5/noLoop\">noLoop()</a> 来暂停和恢复动画的使用方法。点击鼠标可以切换动画循环的状态。如果动画循环被停止，用户可以按任意键前进一帧。注意：用户需要点击一下，让画布获得焦点，之后键盘按键操作才能被识别。调用 <a href=\"https://p5js.org/reference/p5/redraw\">redraw()</a> 函数可以使动画前进一帧，这将触发 draw() 函数执行一次。"},"移动设备运动":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"\r\n当展示绘图的移动设备发生移动时，<a href=\"https://p5js.org/reference/p5/deviceMoved\" target=\"_blank\">deviceMoved()</a> 函数会被触发。在这个例子中，<a href=\"https://p5js.org/reference/p5/accelerationX\" target=\"_blank\">accelerationX</a>、<a href=\"https://p5js.org/reference/p5/accelerationY\" target=\"_blank\">accelerationY</a> 和 <a href=\"https://p5js.org/reference/p5/accelerationZ\" target=\"_blank\">accelerationZ</a> 的值可以用来设置一个圆的位置和大小。这个功能仅适用于移动设备。"},"条件":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"\r\nif 和 else 语句用于规定一组特定的 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\" target=\"_blank\">块语句</a> 只在指定条件为真时运行。在这个例子中，只有按下鼠标时，动画才会播放。这就是第 59 行的 if 语句的作用。 你可以在 <a href=\"https://p5js.org/reference/p5/if-else\">p5 参考资料</a>和 <a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals\" target=\"_blank\">MDN上</a> 了解更多关于 if 和 else 语句的信息。\r\n\r\n\r\n比较运算符通过比较两个值来形成条件。在这个例子中，当圆形的色相达到360或更大时，根据第69行的 if 语句，色相会重置为零。若要浏览更多比较运算符的信息，请阅读 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#relational_operators\" target=\"_blank\">MDN 上的相关文档</a>。\r\n\r\n通过逻辑运算符，可以将条件进行组合。<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND\" target=\"_blank\">&&</a> 检查两个条件是否同时为真。在这个例子中，当圆位于画布的水平中心附近时，它的填充颜色为黑色；当它不在这个位置时，填充颜色为白色。这是因为第45行的 if 语句会检查圆的 x 坐标，看它是否大于等于 100 且不超过 300。而 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR\" target=\"_blank\">||</a> 检查的则是两个条件中至少有一个为真的情况。根据第75行的 if 语句，当圆到达画布的左边缘或右边缘时，它会保持水平速度并调头。\r\n"},"文本":{"relativeUrl":"/examples/imported-media-words","description":"\r\n<a href=\"https://p5js.org/reference/p5/text\" target=\"_blank\">text()</a> 函数用于将文本插入到画布中。你可以使用 <a href=\"https://p5js.org/reference/p5/loadFont\" target=\"_blank\">loadFont()</a> 和 <a href=\"https://p5js.org/reference/p5/fontSize\" target=\"_blank\">fontSize()</a> 函数来变更字体或改变文字大小。文本可以通过 <a href=\"https://p5js.org/reference/p5/textAlign\" target=\"_blank\">textAlign()</a> 函数设置为左对齐、居中或右对齐。并且，和形状一样，文本的颜色可以通过 <a href=\"https://p5js.org/reference/p5/fill\" target=\"_blank\">fill()</a> 函数来设置。"},"复制图像数据":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"\r\n通过使用 <a href=\"https://p5js.org/reference/p5/copy\" target=\"_blank\">copy()</a> 方法，你可以通过将彩色图像的颜色从黑白图像的顶部开始， 跟随光标拖动的位置进行复制，来模拟给黑白图像上色的效果。"},"透明蒙版":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"\r\n通过使用 \r\n<a href=\"https://p5js.org/reference/p5/mask\" target=\"_blank\">mask()</a> 方法，\r\n你可以为图像创建一个蒙版，\r\n以指定图像不同部分的透明度。若要在本地运行这个示例，\r\n你需要两个图像文件和一个正在运行的\r\n<a href=\"https://github.com/processing/p5.js/wiki/Local-server\">本地服务器</a>。"},"图像透明度":{"relativeUrl":"/examples/imported-media-image-transparency","description":"\r\n本程序通过使用 \r\n<a href=\"https://p5js.org/reference/p5/tint\" target=\"_blank\">tint()</a> 函数\r\n修改图像的 alpha 值，将一张图像覆盖在另一张图像上。\r\n在画布上左右移动光标可以改变图像的位置。\r\n若要在本地运行这个示例，\r\n你需要一个图像文件和一个正在运行的\r\n<a href=\"https://github.com/processing/p5.js/wiki/Local-server\">本地服务器</a>。"},"音频播放器":{"relativeUrl":"/examples/imported-media-create-audio","description":"\r\n<a href=\"https://p5js.org/reference/p5/createAudio\" target=\"_blank\">createAudio()</a> \r\n用于创建一个音频播放器。本示例展示了播放器的控制按钮，并可调整播放速度。当鼠标在窗口的左边缘时，播放速度是正常的，而随着鼠标向右移动，播放速度会变快。 有关使用音频播放器等媒体元素的更多信息，请参见 <a href=\"https://p5js.org/reference/p5.MediaElement\" target=\"_blank\">p5.MediaElement</a> 参考页面。此处使用的音频文件是一段 <a href=\"https://freesound.org/people/josefpres/sounds/711156/\" target=\"_blank\">公共版权的 Josef Pres 钢琴曲循环</a>。"},"视频播放器":{"relativeUrl":"/examples/imported-media-video","description":"\r\n通过使用 <a href=\"https://p5js.org/reference/p5/noCanvas\" target=\"_blank\">noCanvas()</a> 和 <a href=\"https://p5js.org/reference/p5/createVideo\" target=\"_blank\">createVideo()</a> 函数， 你可以将视频上传到 <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/DOM\" target=\"_blank\">DOM</a> 中，而无需将视频嵌入画布。如果你想在画布元素内嵌入视频，请参考 <a href=\"https://p5js.org/examples/imported-media-video-canvas/\" target=\"_blank\">视频画布</a> 实例。"},"画布上的视频":{"relativeUrl":"/examples/imported-media-video-canvas","description":"\r\n通过使用 <a href=\"https://p5js.org/reference/p5/createVideo\" target=\"_blank\">createVideo()</a> 和 <a href=\"https://p5js.org/reference/p5/image\" target=\"_blank\">image()</a> 函数，你可以将视频上传到画布中。由于视频捕捉是通过 <a href=\"https://p5js.org/reference/p5/image\" target=\"_blank\">image()</a> 构造函数传递的，你可以使用 <a href=\"https://p5js.org/reference/p5/filter\" target=\"_blank\">filter()</a> 方法给视频捕捉添加滤镜。要在本地运行这个示例，你需要一个正在运行的 <a href=\"https://github.com/processing/p5.js/wiki/Local-server\">本地服务器</a>。如果想要构建一个不在画布内嵌入的视频，请参见 <a href=\"https://p5js.org/examples/imported-media-video/\">视频</a> 示例。"},"视频捕捉":{"relativeUrl":"/examples/imported-media-video-capture","description":"\r\n通过使用 <a href=\"https://p5js.org/reference/p5/createCapture\" target=\"_blank\">createCapture()</a> 和 <a href=\"https://p5js.org/reference/p5/image\" target=\"_blank\">image()</a> 函数，你可以获取设备的视频捕捉并将其绘制在画布上。由于视频捕捉是通过 <a href=\"https://p5js.org/reference/p5/image\" target=\"_blank\">image()</a> 构造函数传递的，你可以使用 <a href=\"https://p5js.org/reference/p5/filter\" target=\"_blank\">filter()</a> 方法为视频捕捉添加滤镜。关于上传、显示或设计视频样式的不同方法，请参见 <a href=\"https://p5js.org/examples/imported-media-video/\" target=\"_blank\">视频</a> 和 <a href=\"https://p5js.org/examples/imported-media-video-canvas/\" target=\"_blank\">视频画布</a> 示例。"},"图片拖放":{"relativeUrl":"/examples/input-elements-image-drop","description":"\r\n<a href=\"https://p5js.org/reference/p5.Element/drop\" target=\"_blank\">drop()</a> 是一个 p5.js 元素方法，它在每次有文件加载到元素中时注册一个回调。上传的文件会被创建成一个 <a href=\"https://p5js.org/reference/p5.File\" target=\"_blank\">p5.File</a> 类。你可以使用 <a href=\"https://p5js.org/reference/p5.Element/drop\" target=\"_blank\">drop()</a> 回调函数来检查文件类型，然后编写条件语句来处理文件类型。"},"输入框和按钮":{"relativeUrl":"/examples/input-elements-input-button","description":"\r\n通过使用 <a href=\"https://p5js.org/reference/p5.Element/createElement\" target=\"_blank\">createElement()</a>、<a href=\"https://p5js.org/reference/p5/createInput\" target=\"_blank\">createInput()</a> 和 <a href=\"https://p5js.org/reference/p5.Element/createButton\" target=\"_blank\">createButton()</a> 函数，你可以获取通过输入文本提交的字符串，并将其显示在你的画布上。"},"表单元素":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"\r\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\" target=\"_blank\">文档对象模型</a>（DOM）代表了网页最终呈现的结构。使用 p5.js 的表单元素，如 <a href=\"https://p5js.org/reference/p5/createInput\" target=\"_blank\">createInput()</a>、<a href=\"https://p5js.org/reference/p5/createSelect\" target=\"_blank\">createSelect()</a> 和 <a href=\"https://p5js.org/reference/p5/createRadio\" target=\"_blank\">createRadio()</a>，你可以构建不同的方式来获取通过 <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\" target=\"_blank\">下拉菜单</a>、<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" target=\"_blank\">输入框</a> 或 <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio\" target=\"_blank\">单选按钮</a> 提交的信息，并根据这些信息更新 DOM。"},"平移":{"relativeUrl":"/examples/transformation-translate","description":"\r\n<a href=\"https://p5js.org/reference/p5/translate\">translate()</a> 函数将坐标系的原点移动到指定位置。\r\n\r\n<a href=\"https://p5js.org/reference/p5/push\">push()</a> 和 <a href=\"https://p5js.org/reference/p5/pop\">pop()</a> 函数可以保存和恢复坐标系及其他各种绘图设置，比如填充颜色。\r\n\r\n请注意，在这个例子中，我们在不同的坐标系中分别绘制了形状（矩形和圆）。"},"旋转":{"relativeUrl":"/examples/transformation-rotate","description":"\r\n<a href=\"https://p5js.org/reference/p5/rotate\">rotate()</a> 函数可以围绕当前原点旋转当前坐标系。\r\n\r\n请注意，默认的原点是画布的左上角。为了围绕画布的中心旋转，我们必须首先平移坐标系，然后再围绕新的原点进行旋转。\r\n\r\n<a href=\"https://p5js.org/reference/p5/push\">push()</a> 和 <a href=\"https://p5js.org/reference/p5/pop\">pop()</a> 函数分别用于保存和恢复坐标系。"},"缩放":{"relativeUrl":"/examples/transformation-scale","description":"\r\n<a href=\"https://p5js.org/reference/p5/scale\">scale()</a> 函数可以按照指定的因子缩放当前坐标系。\r\n\r\n<a href=\"https://p5js.org/reference/p5/push\">push()</a> 和 <a href=\"https://p5js.org/reference/p5/pop\">pop()</a> 函数分别用于保存和恢复坐标系。\r\n\r\n在这个例子中，我们在原点处绘制了一个边长为 200 的正方形，并展示了三种不同的缩放因子。"},"线性插值":{"relativeUrl":"/examples/calculating-values-interpolate","description":"\r\n<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Interpolation\" target=\"_blank\">插值</a>计算两个值之间的一个值。例如，数字 5 是 0 和 10 之间的中点。不同的插值类型在数值之间采用不同的变化率。线性插值，简称 lerp，使用恒定的变化率。<a href=\"https://p5js.org/reference/p5/lerp\" target=\"_blank\">lerp()</a> 函数在两个数字之间进行线性插值。\r\n\r\n将鼠标移动到屏幕上，符号将跟随。在绘制动画的每一帧之间，椭圆会移动部分距离，从其当前位置向光标移动。\r\n"},"映射":{"relativeUrl":"/examples/calculating-values-map","description":"\r\n<a href=\"https://p5js.org/reference/p5/map\" target=\"_blank\">map()</a> 函数将一个范围内的值转换到另一个范围。在这个例子中，map 将光标的水平位置从 0-720 的范围转换到 0-360。最终结果为圆形的色调。Map 还将光标的垂直位置从 0-400 的范围转换到 20-300。最终结果为圆形的直径。\r\n"},"随机":{"relativeUrl":"/examples/calculating-values-random","description":"\r\n这个例子演示了如何使用 <a href=\"https://p5js.org/reference/p5/random\">random()</a> 函数。\r\n\r\n当用户按下鼠标按钮时，圆的位置和颜色会随机改变。\r\n"},"限制":{"relativeUrl":"/examples/calculating-values-constrain","description":"\r\n这个例子绘制了一个圆，其位置随光标移动，但通过使用 <a href=\"https://p5js.org/reference/p5/constrain\" target=\"_blank\">constrain()</a> 函数，确保圆始终保持在一个矩形内。\r\n"},"时钟":{"relativeUrl":"/examples/calculating-values-clock","description":"\r\n当前时间可以通过 <a href=\"https://p5js.org/reference/p5/second\" target=\"_blank\">second()</a>、<a href=\"https://p5js.org/reference/p5/minute\" target=\"_blank\">minute()</a> 和 <a href=\"https://p5js.org/reference/p5/hour\" target=\"_blank\">hour()</a> 函数读取。这个例子使用 <a href=\"https://p5js.org/reference/p5/map\" target=\"_blank\">map()</a> 来计算时针的角度。然后使用<a href=\"https://p5js.org/reference/#group-Transform\" target=\"_blank\">变换</a>来设置它们的位置。\r\n"},"颜色插值":{"relativeUrl":"/examples/repetition-color-interpolation","description":"\r\n<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Interpolation\" target=\"_blank\">插值</a>计算两个值之间的一个值。例如，数字 5 位于 0 和 10 之间的中点。不同的插值类型在数值之间采用不同的变化率。线性插值，简称为 lerp，使用恒定的变化率。<a href=\"https://p5js.org/reference/p5/lerp\" target=\"_blank\">lerp()</a> 函数在两个数字之间进行线性插值。展示在这里的 <a href=\"https://p5js.org/reference/p5/lerpColor\" target=\"_blank\">lerpColor()</a> 函数在两种颜色之间进行线性插值。在这个例子中，stripeCount 变量调整水平条纹出现的数量。将值设置为更高的数字会看起来不像单独的条纹，更像是一个渐变。\r\n"},"色轮":{"relativeUrl":"/examples/repetition-color-wheel","description":"\r\n这个例子展示了不同色调的外观。它使用 <a href=\"https://p5js.org/reference/p5/for\" target=\"_blank\">for 循环</a>来重复变换。循环初始化一个名为 angle 的变量，它改变圆的旋转以及其色调。每次循环重复时，都会相对于画布的中心绘制一个圆。<a href=\"https://p5js.org/reference/p5/push\" target=\"_blank\">push()</a> 和 <a href=\"https://p5js.org/reference/p5/pop\" target=\"_blank\">pop()</a> 函数使这些变换只影响单独的圆。\r\n"},"贝塞尔":{"relativeUrl":"/examples/repetition-bezier","description":"\r\n<a href=\"https://p5js.org/reference/p5/bezier\" target=\"_blank\">bezier()</a> 曲线是使用控制点和锚点创建的。对于 <a href=\"https://p5js.org/reference/p5/bezier\" target=\"_blank\">bezier()</a> 函数，前两个参数指定曲线的第一个点，最后两个参数指定最后一个点。中间的参数设置控制点，这些控制点定义了曲线的形状。\r\n"},"万花筒":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"\r\n万花筒是一种光学仪器，它有两个或更多反射面，这些反射面彼此以一定角度倾斜。使用 <a href=\"https://p5js.org/reference/p5/translate\" target=\"_blank\">translate()</a>、<a href=\"https://p5js.org/reference/p5/rotate\" target=\"_blank\">rotate()</a>、和 <a href=\"https://p5js.org/reference/p5/scale\" target=\"_blank\">scale()</a> 函数，你可以在画布上复制出万花筒的视觉效果。\r\n"},"噪声":{"relativeUrl":"/examples/repetition-noise","description":"\r\n<a href=\"https://en.wikipedia.org/wiki/Perlin_noise\" target=\"_blank\">Perlin 噪声</a>是由 Ken Perlin 编写的算法，用于产生既随机又有机的序列。p5 中的 <a href=\"https://p5js.org/reference/p5/noise\" target=\"_blank\">noise()</a> 函数产生 Perlin 噪声。\r\n\r\n在这个例子中，点的大小基于噪声值。左边的滑块设置点之间的距离。右边的滑块设置噪声计算中的偏移量。\r\n"},"递归树":{"relativeUrl":"/examples/repetition-recursive-tree","description":"\r\n这是通过递归渲染一个简单的树状结构的示例。分支角度根据水平鼠标位置计算得出。左右移动鼠标来改变角度。基于 Daniel Shiffman 为 Processing 编写的 <a href=\"https://processing.org/examples/tree.html\"> 递归树示例</a>。\r\n"},"随机诗歌":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"\r\n使用 <a href=\"https://p5js.org/reference/p5/floor\" target=\"_blank\">floor()</a> 和 <a href=\"https://p5js.org/reference/p5/random\" target=\"_blank\">random()</a> 函数，你可以从数组中随机选择一系列项目，并在画布上以不同的大小和位置绘制它们。\r\n"},"正弦与余弦":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"\r\n这个示例展示了<a href=\"https://en.wikipedia.org/wiki/Sine_and_cosine\">正弦和余弦</a>数学函数。\r\n\r\n动画展示了单位圆（半径为 1 的圆）周围的匀速圆周运动。从 x 轴测量的任何角度都决定了圆上的一个点。该角度的余弦和正弦分别被定义为该点的 x 坐标和 y 坐标。\r\n"},"瞄准":{"relativeUrl":"/examples/angles-and-motion-aim","description":"\r\n<a href=\"https://p5js.org/reference/p5/atan2\" target=\"_blank\">atan2()</a>\r\n函数计算两个位置之间的角度。它计算的角度可以用来让一个形状朝向某物旋转。在这个示例中，眼睛旋转以便看向光标。\r\n"},"三角带":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"\r\n这个示例演示了如何使用 <a href=\"https://p5js.org/reference/p5/beginShape\">beginShape()</a>、<a href=\"https://p5js.org/reference/p5/endShape\">endShape()</a> 和 <a href=\"https://p5js.org/reference/p5/vertex\">vertex()</a> 函数，并在 TRIANGLE_STRIP 模式下指定其顶点来创建一个形状。\r\n"},"圆圈点击器":{"relativeUrl":"/examples/games-circle-clicker","description":"\r\n这个示例演示了一个有时间限制和得分的游戏。浏览器的<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">本地存储</a>用于存储最高分，因此当使用相同的浏览器再次玩游戏时，最高分仍然保留。清除浏览器数据也会清除最高分。\r\n"},"乒乓球":{"relativeUrl":"/examples/games-ping-pong","description":"\r\n这款游戏的灵感来自于最古老的街机视频游戏之一：Atari 的 <a href=\"https://en.wikipedia.org/wiki/Pong\" target=\"_blank\">Pong</a>。在这个双人游戏中，每个玩家控制一个由白色矩形代表的球拍。W 和 S 键使左边的球拍上下移动，而上下箭头键则控制右边的球拍上下移动。玩家通过将球（由一个白色正方形代表）弹过对手一侧的画布边缘来得分。\r\n"},"贪吃蛇":{"relativeUrl":"/examples/games-snake","description":"\r\n这是一种叫做<a href=\"https://en.wikipedia.org/wiki/Snake_(video_game_genre)\" target=\"_blank\">贪吃蛇</a>的街机游戏类型的再现。第一个贪吃蛇游戏是 1976 年发布的 Blockade，许多游戏使用相同的结构。在贪吃蛇游戏中，玩家控制一条蛇的移动，在这个例子中，蛇由一条绿色线代表。玩家的目标是使蛇与一个由红点代表的果实相撞。每次蛇与果实相撞，蛇就会变长。玩家的目标是尽可能地让蛇变长，而不让蛇撞到自己或者撞到游戏区域的边缘。\r\n\r\n这个示例使用一个<a href=\"https://p5js.org/reference/p5.Vector\" target=\"_blank\">向量</a>数组来存储蛇的每个部分的位置。箭头键控制蛇的移动。\r\n"},"几何":{"relativeUrl":"/examples/3d-geometries","description":"\r\np5 的 \r\n<a href=\"https://p5js.org/reference/p5/WEBGL\" target=\"_blank\">WEBGL</a> \r\n模式包括 7 种基本形状，这些形状是平面、立方形、圆柱形、圆锥形、椭圆形、球形和椭球形。此外， \r\n<a href=\"https://p5js.org/reference/p5/model\" target=\"_blank\">model()</a> \r\n函数显示通过 \r\n<a href=\"https://p5js.org/reference/p5/loadModel\" target=\"_blank\">loadModel()</a>。\r\n加载的自定义几何形状。这个示例包括每种基本形状，并且还包括了 \r\n<a href=\"https://nasa3d.arc.nasa.gov/models\" target=\"_blank\">NASA 收藏的</a> 一个模型。"},"自定义几何":{"relativeUrl":"/examples/3d-custom-geometry","description":"\r\n<a href=\"https://p5js.org/reference/p5/buildGeometry\" target=\"_blank\">buildGeometry()</a> \r\n函数将形状存储到一个可以高效利用和重复使用 3D 模型中。"},"材质":{"relativeUrl":"/examples/3d-materials","description":"\r\n在 3D 渲染中，材质决定了表面对光的反应方式。p5 的 \r\n<a href=\"https://p5js.org/reference/p5/WEBGL\" target=\"_blank\">WEBGL</a> \r\n模式支持 \r\n<a href=\"https://p5js.org/reference/p5/ambientMaterial\" target=\"_blank\">环境</a>、\r\n<a href=\"https://p5js.org/reference/p5/emissiveMaterial\" target=\"_blank\">发射</a>、\r\n<a href=\"https://p5js.org/reference/p5/normalMaterial\" target=\"_blank\">法线</a> 和 \r\n<a href=\"https://p5js.org/reference/p5/specularMaterial\" target=\"_blank\">镜面</a> \r\n材质。\r\n\r\n环境材质仅对环境光作出响应。镜面材质对任何光源都会作出响应。\r\n在 p5 中，无论什么光源，发射材质都会显示其颜色。在其他情境中，通常发射材质会发光。\r\n法线材质可以视化表面各部分面对的方向。法线材质不会对光做出响应。\r\n\r\n环境和发射材质可以相互结合。它们也可以和填充、描边相结合。填充设置表面基础颜色，\r\n描边设置对象顶点的颜色。\r\n\r\n此外，\r\n<a href=\"https://p5js.org/reference/p5/texture\" target=\"_blank\">texture()</a> \r\n函数用图像包裹一个对象。此示例中的模型和图像纹理来自 <a href=\"https://nasa3d.arc.nasa.gov\" target=\"_blank\">NASA 的收藏</a>。"},"轨道控制":{"relativeUrl":"/examples/3d-orbit-control","description":"\r\n<a href=\"https://p5js.org/reference/p5/orbitControl\" target=\"_blank\">轨道控制</a> 是指利用鼠标或触屏输入来调整 3D 绘图中的摄像机方向。要旋转摄像机，请左键点击并拖动鼠标，或在触屏上滑动。要平移摄像机，请右键点击并拖动鼠标，或在触屏上用多个手指滑动。要将摄像机移动到绘图中心更近或更远的位置，请使用鼠标滚轮或在触屏上捏放。"},"滤镜着色器":{"relativeUrl":"/examples/3d-filter-shader","description":"\r\n滤镜着色器是一种将效果应用于画布上任何内容的方法。在这个示例中，滤镜效果被应用到一个视频上。"},"用着色器调整位置":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"\r\n着色器可以调整形状顶点的位置，从而实现对 3D 模型的扭曲和动画处理。"},"帧缓冲区模糊":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"\r\n这个示例中的 \r\n<a href=\"https://www.khronos.org/opengl/wiki/Shader\" target=\"_blank\">着色器</a> 利用来自 \r\n<a href=\"https://p5js.org/reference/p5.Framebuffer\" target=\"_blank\">p5.Framebuffer</a> \r\n的深度信息来应用模糊效果。在真实的摄像头上，如果物体比镜头的焦点更近或更远，它们会显得模糊。这里模拟了这种效果。首先，绘图将五个球体渲染到帧缓冲区内。然后，它使用模糊着色器将帧缓冲区渲染到画布上。"},"创建图形":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"\r\n<a href=\"https://p5js.org/reference/p5/createGraphics\" target=\"_blank\">createGraphics()</a>\r\n函数可用于创建一个新的 p5.Graphics 对象，它可以作为画布内的一个屏幕外图形缓冲区。屏幕外缓冲区可以具有与当前显示表面不同的尺寸和属性，尽管它们似乎存在于同一空间中。\r\n"},"多画布":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"\r\n默认情况下，p5 运行在全局模式下，这意味着所有 p5 函数都在全局作用域中，并且所有与画布相关的函数都应用于单个画布。p5 也可以运行在实例模式下，在这种模式下，这些相同的函数是 p5 类实例的方法。每个 p5 实例可能有自己的画布。\r\n\r\n要使用实例模式，必须定义一个带有参数的函数，该参数代表 p5 实例（在此示例中标记为 p）。在这个函数的范围内，通常是全局的所有 p5 函数和变量都将属于这个参数。将函数传递给 p5 构造函数，运行它。\r\n"},"着色器作为纹理":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"\r\n着色器可以作为纹理应用于 2D/3D 形状。\r\n\r\n要了解更多关于在 p5.js 中使用着色器的信息，请参阅：<a href=\"https://itp-xstory.github.io/p5js-shaders/\">p5.js 着色器</a>\r\n"},"雪花":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"\r\n这个例子演示了使用粒子系统模拟雪花飘落的运动。这个程序定义了一个雪花 \r\n<a href=\"https://p5js.org/reference/p5/class\">类</a>\r\n，并使用数组来保存雪花对象。"},"晃动球弹跳":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"\r\n通过使用 \r\n<a href=\"https://p5js.org/reference/p5/class\" target=\"_blank\">类</a>，在移动设备倾斜时，你可以创建一个圆的集合，在画布内移动。你必须在移动设备上打开此页面才能显示绘图。"},"连接的粒子":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"\r\n这个例子使用了两个自定义 \r\n<a href=\"https://p5js.org/reference/p5/class\" target=\"_blank\">类</a>。\r\nParticle 类存储了位置、速度和色调。它使用当前位置和色调渲染一个圆圈，并使用当前速度更新位置。Path 类存储了从 Particle 类创建的对象数组。它渲染连接每个粒子的连接线。当用户点击鼠标时，绘图会创建 Path 类的一个新实例。当用户拖动鼠标时，绘图会在当前路径添加 Particle 类的一个新实例。"},"群集":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"\r\n群集行为演示。\r\n你可以在 Daniel Shiffman 的 \r\n<a href=\"https://natureofcode.com/book/chapter-6-autonomous-agents/\">Nature of Code</a> \r\n一书中找到实例的全面讨论。这个模拟基于 \r\n<a href=\"http://www.red3d.com/cwr/\">Craig Reynolds</a> 的研究，他使用术语 ‘boid’ 来代表类似鸟类的对象。"},"本地存储":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"\n浏览器允许网站在访问者的设备上存储数据。这被称为 \n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">本地存储</a>。\n<a href=\"https://p5js.org/reference/p5/getItem\" target=\"_blank\">getItem()</a>、\n<a href=\"https://p5js.org/reference/p5/storeItem\" target=\"_blank\">storeItem()</a>、\n<a href=\"https://p5js.org/reference/p5/clearStorage\" target=\"_blank\">clearStorage()</a> 和 <a href=\"https://p5js.org/reference/p5/removeItem\" target=\"_blank\">removeItem()</a> \n函数可以控制它。\n\n这个例子受到了 Daniel Shiffman 用 Java 为 Processing 编写的加载 JSON 数据和加载表格数据例子的启发。它使用一个 \n<a href=\"https://p5js.org/reference/p5/class\" target=\"_blank\">类</a> \n来组织气泡的数据。访问者可以添加新的气泡，它们的数据将被保存在本地存储中。如果访问者重新访问绘图，绘图将重新加载相同的气泡。"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"\n<a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON\" target=\"_blank\">JavaScript Object Notation (JSON)</a> \n是一种在文件中编写数据的格式。尽管语法来自 JavaScript，但 JSON 在许多其他语境中被使用。这个例子是基于 Daniel Shiffman 用 Java 为 Processing 编写的加载 JSON 数据例子。它使用一个 \n<a href=\"https://p5js.org/reference/p5/class\" target=\"_blank\">类</a> \n来组织气泡的数据。当绘图启动时，它从一个 JSON 文件中加载了两个气泡的数据。访问者可以添加新的气泡，下载更新后的 JSON 文件，并加载一个 JSON 文件。"},"表格":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"\nComma-Separated Values (CSV) 是一种在文件中编写数据的格式。p5 可以使用 \n<a href=\"https://p5js.org/reference/p5.Table\" target=\"_blank\">p5.Table</a> 处理这种格式。\n这个例子基于 Daniel Shiffman 为 Processing 创建的 \n<a href=\"https://processing.org/examples/loadsavetable.html\" target=\"_blank\">加载表格数据</a> \n的例子。它使用一个类来组织代表气泡的数据。当绘图启动时，它从一个 CSV 文件中加载了四个气泡的数据。访问者可以添加新的气泡，下载更新后的 CSV 文件，并加载一个 CSV 文件。\n"},"非正交性反射":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"\n这个例子演示了一个球在倾斜表面上弹跳，采用了向量计算来实现反射。\n\n这段代码广泛使用了 \n<a href=\"https://p5js.org/reference/p5.Vector\">p5.Vector</a> 类，包括 \n<a href=\"https://p5js.org/reference/p5/createVector\">createVector()</a> 函数用于创建新的向量，以及用于向量计算的向量方法 \n<a href=\"https://p5js.org/reference/p5.Vector/add\">add()</a> \n和 \n<a href=\"https://p5js.org/reference/p5.Vector/dot\">dot()</a>。"},"软体":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"\n模拟软体朝着鼠标位置加速的物理效果。形状是使用 \n<a href=\"https://p5js.org/reference/p5/curveVertex\">curveVertex()</a> \n和 \n<a href=\"https://p5js.org/reference/p5/curveTightness\">curveTightness()</a> \n创建的曲线。"},"力":{"relativeUrl":"/examples/math-and-physics-forces","description":"\n多种力作用于物体时的演示。\n物体持续受到重力影响。当在“水”中时，物体会经历流体阻力。\n(<a href=\"http://natureofcode.com\">natureofcode.com</a>)\n\n使用 \n<a href=\"https://p5js.org/reference/p5.Vector\">p5.Vector</a> \n类进行力的计算，包括使用 \n<a href=\"https://p5js.org/reference/p5/createVector\">createVector()</a> \n函数创建向量。"},"烟雾粒子":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"\n\n基于 Dan Shiffman 为 Processing 创建的原始 \n<a href=\"https://natureofcode.com/book/chapter-4-particle-systems/\">例子</a>，\n来演示烟雾粒子系统。\n\n这段代码使用了 \n<a href=\"https://p5js.org/reference/p5.Vector\">p5.Vector</a> \n类，包括 \n<a href=\"https://p5js.org/reference/p5/createVector\">createVector()</a> \n函数。使用 p5.Vector 方法执行更新粒子位置和速度的各种计算。\n\n粒子系统被创建为一个 \n<a href=\"https://p5js.org/reference/p5/class\">类</a>，其中包含一个对象数组（属于 Particle 类）。"},"生命游戏":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"\n生命游戏是由数学家 John Conway 创建的细胞自动机（cellular automaton）。细胞自动机是一种模拟类型。在生命游戏中，有一个网格细胞，其中每个细胞或死或活。在这个例子中，黑色方块代表活细胞，白色方块代表死细胞。随着模拟运行，细胞根据一组规则在死和活之间切换：\n<ol>\n <li>如果周围活细胞少于两个，任何活细胞则死亡。</li>\n <li>如果周围活细胞超过三个，任何活细胞则死亡。</li>\n <li>如果周围有两个或三个活细胞，任何活细胞则保持不变，传递到下一代。</li>\n <li>如果周围恰好有三个活细胞，任何死细胞则会复活。</li>\n</ol>\n这些规则会产生复杂的交互作用。单击画布，使用随机细胞开始模拟。再次单击画布将重新启动模拟。"},"Mandelbrot 集":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"\n基于 Daniel Shiffman 为 Processing 创建的 \n<a href=\"https://processing.org/examples/mandelbrot.html\">Mandelbrot 集例子</a>，对 Mandelbrot 集进行了色彩丰富的渲染。"}},"reference":{"Array":{"relativeUrl":"/reference/p5/Array"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"Number":{"relativeUrl":"/reference/p5/number"},"Object":{"relativeUrl":"/reference/p5/object"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"}},"contributor-docs-fallback":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure success volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increase groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](https://p5js.org/reference/p5.sound), [class page](https://p5js.org/reference/p5/p5.Vector), [method page](https://p5js.org/reference/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this instruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (https://p5js.org/reference/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (https://p5js.org/reference/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (https://p5js.org/reference/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (https://p5js.org/reference/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```javascript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (https://p5js.org/reference/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (https://p5js.org/reference/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed requires temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve *Both 1x include system diffing algorithm robust system* operating systems browsers render graphics subtle variations differences normal fail Common acceptable Single-pixel shifts line positions Slight anti-aliasing Text font weight kerning Minor curve smoothness text rendered macOS slightly Linux applies thin lines curves graphical elements image earlier caused environments [Example]src/content/contributor-docs/images/pixelmatch2png sophisticated distinguish Initial Compares pixels moderate threshold identify [pixelmatch](https://github.com/mapbox/pixelmatch/) pixel Cluster identification Groups connected difference Breadth-First Search BFS Pattern recognition specifically identifies Line shift clusters represent element shifted 1px Isolated noise Smart failure criteria Applies thresholds Ignores smaller total significant Permits minor typical platforms [Example]src/content/contributor-docs/images/pixelmatchpng balances sensitivity real tolerating platform-specific parameters const MIN_CLUSTER_SIZE Minimum cluster MAX_TOTAL_DIFF_PIXELS Maximum allowed analyzing neighborhood 80% ≤2 neighbors classified structural intelligent ensures due catching important note improved pass failed detecting showing visually meaningful makes reliable reduces failures require manual investigation ### efficient sizes dimensions close 50x50 resizes images canvases result faster Focus visible details intricate hard Design demonstrate reduced cramming variants call times visualTest'stroke variations' stroke p5stroke0 p5strokeWeight1 p5line10 Screenshot thick p5strokeWeight5"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples-fallback":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries-fallback":{"AnimatorJs":{"relativeUrl":"/libraries/","description":"A javascript animation viewer based on a custom animation API primarily designed for p5.js and allows for dynamic, lightweight, real-time rendered browser animations controlled purely by code."},"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Pixyp5js":{"relativeUrl":"/libraries/","description":"A library for easily more easily dealing with pixels in images during runtime"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"TurtleGraphics":{"relativeUrl":"/libraries/","description":"Watch images being drawn using turtle graphics."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"Zoomp5js":{"relativeUrl":"/libraries/","description":"A simple library for adding the zooming functionality to your p5.js project."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.5":{"relativeUrl":"/libraries/","description":"Add UI to p5.js and other goodies"},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Modbuttons":{"relativeUrl":"/libraries/","description":"a simple and modular button system for p5js"},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Sprite":{"relativeUrl":"/libraries/","description":"A basic sprite library that supports both animated and static sprites for p5.js"},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.colorGenerator":{"relativeUrl":"/libraries/","description":"p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point."},"p5.comfyui-helper":{"relativeUrl":"/libraries/","description":"A library for interfacing with ComfyUI"},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."},"XYscope.js":{"relativeUrl":"/libraries/","description":"p5.js library to render graphics on analog vector displays"}},"events-fallback":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro VimeoEmbed ///components/VimeoEmbed/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg Introduction Casey Reas Johanna Hedva Stephanie Pi Phoenix Perry Taeyoon Choi Sara Hendren Epic Jefferson Chandler McWilliams Q&A ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people-fallback":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aarati Akkapeddi ":{"relativeUrl":"/people/#aarati-akkapeddi-"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aaron Welles":{"relativeUrl":"/people/#aaron-welles"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abdiel Lopez":{"relativeUrl":"/people/#abdiel-lopez"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Animesh Sinha":{"relativeUrl":"/people/#animesh-sinha"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antoinette Bumatay-Chan":{"relativeUrl":"/people/#antoinette-bumatay-chan"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashish Karn":{"relativeUrl":"/people/#ashish-karn"},"ashish singh":{"relativeUrl":"/people/#ashish-singh"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"Ashwani Dey":{"relativeUrl":"/people/#ashwani-dey"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"beau-muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"benpalevsky":{"relativeUrl":"/people/#benpalevsky"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"blackboxlogic":{"relativeUrl":"/people/#blackboxlogic"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Bojidar Marinov":{"relativeUrl":"/people/#bojidar-marinov"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"c-dacanay":{"relativeUrl":"/people/#c-dacanay"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Callie":{"relativeUrl":"/people/#callie"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Carrie Wang":{"relativeUrl":"/people/#carrie-wang"},"Casey Conchinha":{"relativeUrl":"/people/#casey-conchinha"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chloe Yan":{"relativeUrl":"/people/#chloe-yan"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"cog25":{"relativeUrl":"/people/#cog25"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"computational mama":{"relativeUrl":"/people/#computational-mama"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"crh82":{"relativeUrl":"/people/#crh82"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Darren Kessner":{"relativeUrl":"/people/#darren-kessner"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"davidblitz":{"relativeUrl":"/people/#davidblitz"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"dhanush":{"relativeUrl":"/people/#dhanush"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"FORCHA PEARL":{"relativeUrl":"/people/#forcha-pearl"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Franolich Design":{"relativeUrl":"/people/#franolich-design"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gabriel Sroka":{"relativeUrl":"/people/#gabriel-sroka"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Albers":{"relativeUrl":"/people/#greg-albers"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Greg Stanton":{"relativeUrl":"/people/#greg-stanton"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Kholiya":{"relativeUrl":"/people/#himanshu-kholiya"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"Ilona Brand":{"relativeUrl":"/people/#ilona-brand"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jackie Liu":{"relativeUrl":"/people/#jackie-liu"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Berghold":{"relativeUrl":"/people/#jared-berghold"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"jeanette":{"relativeUrl":"/people/#jeanette"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Philyaw":{"relativeUrl":"/people/#jordan-philyaw"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Kathryn Lichlyter":{"relativeUrl":"/people/#kathryn-lichlyter"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Gupta":{"relativeUrl":"/people/#keshav-gupta"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"Kit Kuksenok":{"relativeUrl":"/people/#kit-kuksenok"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"Kristian Hamilton":{"relativeUrl":"/people/#kristian-hamilton"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Berrios":{"relativeUrl":"/people/#lauren-berrios"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"Luke Plowden":{"relativeUrl":"/people/#luke-plowden"},"M":{"relativeUrl":"/people/#m"},"ma haidong":{"relativeUrl":"/people/#ma-haidong"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marco Macarena":{"relativeUrl":"/people/#marco-macarena"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Martin Leopold Groedl":{"relativeUrl":"/people/#martin-leopold-groedl"},"Martin Lorentzon":{"relativeUrl":"/people/#martin-lorentzon"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"mathewpan2":{"relativeUrl":"/people/#mathewpan2"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Arguelles":{"relativeUrl":"/people/#maya-arguelles"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"Mayank Verma":{"relativeUrl":"/people/#mayank-verma"},"mclark414":{"relativeUrl":"/people/#mclark414"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"Melody Sharp":{"relativeUrl":"/people/#melody-sharp"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"Mx. Ramsey":{"relativeUrl":"/people/#mx--ramsey"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"oliver thurley":{"relativeUrl":"/people/#oliver-thurley"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"Pim Tournaye":{"relativeUrl":"/people/#pim-tournaye"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Qingfeng Huang":{"relativeUrl":"/people/#qingfeng-huang"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajas Samse":{"relativeUrl":"/people/#rajas-samse"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"Renjie Li":{"relativeUrl":"/people/#renjie-li"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishab Kumar Jha":{"relativeUrl":"/people/#rishab-kumar-jha"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Rishi":{"relativeUrl":"/people/#rishi"},"Ritesh Patil":{"relativeUrl":"/people/#ritesh-patil"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"roxi09":{"relativeUrl":"/people/#roxi09"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"Seyko":{"relativeUrl":"/people/#seyko"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shoury Singh":{"relativeUrl":"/people/#shoury-singh"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Tibor Udvari":{"relativeUrl":"/people/#tibor-udvari"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Vaivaswat Dubey":{"relativeUrl":"/people/#vaivaswat-dubey"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"Vik":{"relativeUrl":"/people/#vik"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishesh Rawal":{"relativeUrl":"/people/#vishesh-rawal"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"willallstet":{"relativeUrl":"/people/#willallstet"},"William Hazard":{"relativeUrl":"/people/#william-hazard"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"Xevi H. Aqeel":{"relativeUrl":"/people/#xevi-h--aqeel"},"Xin Xin":{"relativeUrl":"/people/#xin-xin"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"ℤ":{"relativeUrl":"/people/#ℤ"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference-fallback":{"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"append()":{"relativeUrl":"/reference/p5/append","alias":"append"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"arrayCopy()":{"relativeUrl":"/reference/p5/arrayCopy","alias":"arrayCopy"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"baseColorShader()":{"relativeUrl":"/reference/p5/baseColorShader","alias":"baseColorShader"},"baseMaterialShader()":{"relativeUrl":"/reference/p5/baseMaterialShader","alias":"baseMaterialShader"},"baseNormalShader()":{"relativeUrl":"/reference/p5/baseNormalShader","alias":"baseNormalShader"},"baseStrokeShader()":{"relativeUrl":"/reference/p5/baseStrokeShader","alias":"baseStrokeShader"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"concat()":{"relativeUrl":"/reference/p5/concat","alias":"concat"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"HSB":{"relativeUrl":"/reference/p5/HSB"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createConvolver()":{"relativeUrl":"/reference/p5/createConvolver","alias":"createConvolver"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createModel()":{"relativeUrl":"/reference/p5/createModel","alias":"createModel"},"createNumberDict()":{"relativeUrl":"/reference/p5/createNumberDict","alias":"createNumberDict"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createStringDict()":{"relativeUrl":"/reference/p5/createStringDict","alias":"createStringDict"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"freqToMidi()":{"relativeUrl":"/reference/p5/freqToMidi","alias":"freqToMidi"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getAudioContext()":{"relativeUrl":"/reference/p5/getAudioContext","alias":"getAudioContext"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getOutputVolume()":{"relativeUrl":"/reference/p5/getOutputVolume","alias":"getOutputVolume"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"join()":{"relativeUrl":"/reference/p5/join","alias":"join"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadSound()":{"relativeUrl":"/reference/p5/loadSound","alias":"loadSound"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"match()":{"relativeUrl":"/reference/p5/match","alias":"match"},"matchAll()":{"relativeUrl":"/reference/p5/matchAll","alias":"matchAll"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"midiToFreq()":{"relativeUrl":"/reference/p5/midiToFreq","alias":"midiToFreq"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"outputVolume()":{"relativeUrl":"/reference/p5/outputVolume","alias":"outputVolume"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.NumberDict":{"relativeUrl":"/reference/p5/p5.NumberDict"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Renderer":{"relativeUrl":"/reference/p5/p5.Renderer"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.StringDict":{"relativeUrl":"/reference/p5/p5.StringDict"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.TypedDict":{"relativeUrl":"/reference/p5/p5.TypedDict"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"paletteLerp()":{"relativeUrl":"/reference/p5/paletteLerp","alias":"paletteLerp"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"preload()":{"relativeUrl":"/reference/p5/preload","alias":"preload"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"reverse()":{"relativeUrl":"/reference/p5/reverse","alias":"reverse"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"sampleRate()":{"relativeUrl":"/reference/p5/sampleRate","alias":"sampleRate"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveSound()":{"relativeUrl":"/reference/p5/saveSound","alias":"saveSound"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setBPM()":{"relativeUrl":"/reference/p5/setBPM","alias":"setBPM"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shorten()":{"relativeUrl":"/reference/p5/shorten","alias":"shorten"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"sort()":{"relativeUrl":"/reference/p5/sort","alias":"sort"},"soundFormats()":{"relativeUrl":"/reference/p5/soundFormats","alias":"soundFormats"},"soundOut":{"relativeUrl":"/reference/p5/soundOut"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"splice()":{"relativeUrl":"/reference/p5/splice","alias":"splice"},"split()":{"relativeUrl":"/reference/p5/split","alias":"split"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"subset()":{"relativeUrl":"/reference/p5/subset","alias":"subset"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"trim()":{"relativeUrl":"/reference/p5/trim","alias":"trim"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"userStartAudio()":{"relativeUrl":"/reference/p5/userStartAudio","alias":"userStartAudio"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.Amplitude.toggleNormalize()":{"relativeUrl":"/reference/p5.Amplitude/toggleNormalize","alias":"toggleNormalize"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.amplitude":{"relativeUrl":"/reference/p5.AudioIn/amplitude","alias":"amplitude"},"p5.AudioIn.connect()":{"relativeUrl":"/reference/p5.AudioIn/connect","alias":"connect"},"p5.AudioIn.disconnect()":{"relativeUrl":"/reference/p5.AudioIn/disconnect","alias":"disconnect"},"p5.AudioIn.enabled":{"relativeUrl":"/reference/p5.AudioIn/enabled","alias":"enabled"},"p5.AudioIn.getLevel()":{"relativeUrl":"/reference/p5.AudioIn/getLevel","alias":"getLevel"},"p5.AudioIn.getSources()":{"relativeUrl":"/reference/p5.AudioIn/getSources","alias":"getSources"},"p5.AudioIn.setSource()":{"relativeUrl":"/reference/p5.AudioIn/setSource","alias":"setSource"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.AudioVoice.connect()":{"relativeUrl":"/reference/p5.AudioVoice/connect","alias":"connect"},"p5.AudioVoice.disconnect()":{"relativeUrl":"/reference/p5.AudioVoice/disconnect","alias":"disconnect"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.roll()":{"relativeUrl":"/reference/p5.Camera/roll","alias":"roll"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Compressor.attack()":{"relativeUrl":"/reference/p5.Compressor/attack","alias":"attack"},"p5.Compressor.compressor":{"relativeUrl":"/reference/p5.Compressor/compressor","alias":"compressor"},"p5.Compressor.knee()":{"relativeUrl":"/reference/p5.Compressor/knee","alias":"knee"},"p5.Compressor.process()":{"relativeUrl":"/reference/p5.Compressor/process","alias":"process"},"p5.Compressor.ratio()":{"relativeUrl":"/reference/p5.Compressor/ratio","alias":"ratio"},"p5.Compressor.reduction()":{"relativeUrl":"/reference/p5.Compressor/reduction","alias":"reduction"},"p5.Compressor.release()":{"relativeUrl":"/reference/p5.Compressor/release","alias":"release"},"p5.Compressor.set()":{"relativeUrl":"/reference/p5.Compressor/set","alias":"set"},"p5.Compressor.threshold()":{"relativeUrl":"/reference/p5.Compressor/threshold","alias":"threshold"},"p5.Convolver.addImpulse()":{"relativeUrl":"/reference/p5.Convolver/addImpulse","alias":"addImpulse"},"p5.Convolver.convolverNode":{"relativeUrl":"/reference/p5.Convolver/convolverNode","alias":"convolverNode"},"p5.Convolver.impulses":{"relativeUrl":"/reference/p5.Convolver/impulses","alias":"impulses"},"p5.Convolver.process()":{"relativeUrl":"/reference/p5.Convolver/process","alias":"process"},"p5.Convolver.resetImpulse()":{"relativeUrl":"/reference/p5.Convolver/resetImpulse","alias":"resetImpulse"},"p5.Convolver.toggleImpulse()":{"relativeUrl":"/reference/p5.Convolver/toggleImpulse","alias":"toggleImpulse"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.connect()":{"relativeUrl":"/reference/p5.Delay/connect","alias":"connect"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.disconnect()":{"relativeUrl":"/reference/p5.Delay/disconnect","alias":"disconnect"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.filter()":{"relativeUrl":"/reference/p5.Delay/filter","alias":"filter"},"p5.Delay.leftDelay":{"relativeUrl":"/reference/p5.Delay/leftDelay","alias":"leftDelay"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Delay.rightDelay":{"relativeUrl":"/reference/p5.Delay/rightDelay","alias":"rightDelay"},"p5.Delay.setType()":{"relativeUrl":"/reference/p5.Delay/setType","alias":"setType"},"p5.Distortion.WaveShaperNode":{"relativeUrl":"/reference/p5.Distortion/WaveShaperNode","alias":"WaveShaperNode"},"p5.Distortion.getAmount()":{"relativeUrl":"/reference/p5.Distortion/getAmount","alias":"getAmount"},"p5.Distortion.getOversample()":{"relativeUrl":"/reference/p5.Distortion/getOversample","alias":"getOversample"},"p5.Distortion.process()":{"relativeUrl":"/reference/p5.Distortion/process","alias":"process"},"p5.Distortion.set()":{"relativeUrl":"/reference/p5.Distortion/set","alias":"set"},"p5.EQ.bands":{"relativeUrl":"/reference/p5.EQ/bands","alias":"bands"},"p5.EQ.process()":{"relativeUrl":"/reference/p5.EQ/process","alias":"process"},"p5.Effect.amp()":{"relativeUrl":"/reference/p5.Effect/amp","alias":"amp"},"p5.Effect.chain()":{"relativeUrl":"/reference/p5.Effect/chain","alias":"chain"},"p5.Effect.connect()":{"relativeUrl":"/reference/p5.Effect/connect","alias":"connect"},"p5.Effect.disconnect()":{"relativeUrl":"/reference/p5.Effect/disconnect","alias":"disconnect"},"p5.Effect.drywet()":{"relativeUrl":"/reference/p5.Effect/drywet","alias":"drywet"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.touchEnded()":{"relativeUrl":"/reference/p5.Element/touchEnded","alias":"touchEnded"},"p5.Element.touchMoved()":{"relativeUrl":"/reference/p5.Element/touchMoved","alias":"touchMoved"},"p5.Element.touchStarted()":{"relativeUrl":"/reference/p5.Element/touchStarted","alias":"touchStarted"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.add()":{"relativeUrl":"/reference/p5.Envelope/add","alias":"add"},"p5.Envelope.attackLevel":{"relativeUrl":"/reference/p5.Envelope/attackLevel","alias":"attackLevel"},"p5.Envelope.attackTime":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.decayLevel":{"relativeUrl":"/reference/p5.Envelope/decayLevel","alias":"decayLevel"},"p5.Envelope.decayTime":{"relativeUrl":"/reference/p5.Envelope/decayTime","alias":"decayTime"},"p5.Envelope.mult()":{"relativeUrl":"/reference/p5.Envelope/mult","alias":"mult"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.ramp()":{"relativeUrl":"/reference/p5.Envelope/ramp","alias":"ramp"},"p5.Envelope.releaseLevel":{"relativeUrl":"/reference/p5.Envelope/releaseLevel","alias":"releaseLevel"},"p5.Envelope.releaseTime":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.scale()":{"relativeUrl":"/reference/p5.Envelope/scale","alias":"scale"},"p5.Envelope.set()":{"relativeUrl":"/reference/p5.Envelope/set","alias":"set"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.setExp()":{"relativeUrl":"/reference/p5.Envelope/setExp","alias":"setExp"},"p5.Envelope.setInput()":{"relativeUrl":"/reference/p5.Envelope/setInput","alias":"setInput"},"p5.Envelope.setRange()":{"relativeUrl":"/reference/p5.Envelope/setRange","alias":"setRange"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.getCentroid()":{"relativeUrl":"/reference/p5.FFT/getCentroid","alias":"getCentroid"},"p5.FFT.getEnergy()":{"relativeUrl":"/reference/p5.FFT/getEnergy","alias":"getEnergy"},"p5.FFT.getOctaveBands()":{"relativeUrl":"/reference/p5.FFT/getOctaveBands","alias":"getOctaveBands"},"p5.FFT.linAverages()":{"relativeUrl":"/reference/p5.FFT/linAverages","alias":"linAverages"},"p5.FFT.logAverages()":{"relativeUrl":"/reference/p5.FFT/logAverages","alias":"logAverages"},"p5.FFT.setInput()":{"relativeUrl":"/reference/p5.FFT/setInput","alias":"setInput"},"p5.FFT.smooth()":{"relativeUrl":"/reference/p5.FFT/smooth","alias":"smooth"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Filter.biquadFilter":{"relativeUrl":"/reference/p5.Filter/biquadFilter","alias":"biquadFilter"},"p5.Filter.freq()":{"relativeUrl":"/reference/p5.Filter/freq","alias":"freq"},"p5.Filter.gain()":{"relativeUrl":"/reference/p5.Filter/gain","alias":"gain"},"p5.Filter.process()":{"relativeUrl":"/reference/p5.Filter/process","alias":"process"},"p5.Filter.res()":{"relativeUrl":"/reference/p5.Filter/res","alias":"res"},"p5.Filter.set()":{"relativeUrl":"/reference/p5.Filter/set","alias":"set"},"p5.Filter.setType()":{"relativeUrl":"/reference/p5.Filter/setType","alias":"setType"},"p5.Filter.toggle()":{"relativeUrl":"/reference/p5.Filter/toggle","alias":"toggle"},"p5.Font.font":{"relativeUrl":"/reference/p5.Font/font","alias":"font"},"p5.Font.textBounds()":{"relativeUrl":"/reference/p5.Font/textBounds","alias":"textBounds"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.loadPixels()":{"relativeUrl":"/reference/p5.Framebuffer/loadPixels","alias":"loadPixels"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Framebuffer.updatePixels()":{"relativeUrl":"/reference/p5.Framebuffer/updatePixels","alias":"updatePixels"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Gain.connect()":{"relativeUrl":"/reference/p5.Gain/connect","alias":"connect"},"p5.Gain.disconnect()":{"relativeUrl":"/reference/p5.Gain/disconnect","alias":"disconnect"},"p5.Gain.setInput()":{"relativeUrl":"/reference/p5.Gain/setInput","alias":"setInput"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.saveObj()":{"relativeUrl":"/reference/p5.Geometry/saveObj","alias":"saveObj"},"p5.Geometry.saveStl()":{"relativeUrl":"/reference/p5.Geometry/saveStl","alias":"saveStl"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.MonoSynth.amp()":{"relativeUrl":"/reference/p5.MonoSynth/amp","alias":"amp"},"p5.MonoSynth.attack":{"relativeUrl":"/reference/p5.MonoSynth/attack","alias":"attack"},"p5.MonoSynth.connect()":{"relativeUrl":"/reference/p5.MonoSynth/connect","alias":"connect"},"p5.MonoSynth.disconnect()":{"relativeUrl":"/reference/p5.MonoSynth/disconnect","alias":"disconnect"},"p5.MonoSynth.dispose()":{"relativeUrl":"/reference/p5.MonoSynth/dispose","alias":"dispose"},"p5.MonoSynth.play()":{"relativeUrl":"/reference/p5.MonoSynth/play","alias":"play"},"p5.MonoSynth.setADSR()":{"relativeUrl":"/reference/p5.MonoSynth/setADSR","alias":"setADSR"},"p5.MonoSynth.triggerAttack()":{"relativeUrl":"/reference/p5.MonoSynth/triggerAttack","alias":"triggerAttack"},"p5.MonoSynth.triggerRelease()":{"relativeUrl":"/reference/p5.MonoSynth/triggerRelease","alias":"triggerRelease"},"p5.Noise.setType()":{"relativeUrl":"/reference/p5.Noise/setType","alias":"setType"},"p5.NumberDict.add()":{"relativeUrl":"/reference/p5.NumberDict/add","alias":"add"},"p5.NumberDict.div()":{"relativeUrl":"/reference/p5.NumberDict/div","alias":"div"},"p5.NumberDict.maxKey()":{"relativeUrl":"/reference/p5.NumberDict/maxKey","alias":"maxKey"},"p5.NumberDict.maxValue()":{"relativeUrl":"/reference/p5.NumberDict/maxValue","alias":"maxValue"},"p5.NumberDict.minKey()":{"relativeUrl":"/reference/p5.NumberDict/minKey","alias":"minKey"},"p5.NumberDict.minValue()":{"relativeUrl":"/reference/p5.NumberDict/minValue","alias":"minValue"},"p5.NumberDict.mult()":{"relativeUrl":"/reference/p5.NumberDict/mult","alias":"mult"},"p5.NumberDict.sub()":{"relativeUrl":"/reference/p5.NumberDict/sub","alias":"sub"},"p5.Oscillator.add()":{"relativeUrl":"/reference/p5.Oscillator/add","alias":"add"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.connect()":{"relativeUrl":"/reference/p5.Oscillator/connect","alias":"connect"},"p5.Oscillator.disconnect()":{"relativeUrl":"/reference/p5.Oscillator/disconnect","alias":"disconnect"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.getAmp()":{"relativeUrl":"/reference/p5.Oscillator/getAmp","alias":"getAmp"},"p5.Oscillator.getFreq()":{"relativeUrl":"/reference/p5.Oscillator/getFreq","alias":"getFreq"},"p5.Oscillator.getPan()":{"relativeUrl":"/reference/p5.Oscillator/getPan","alias":"getPan"},"p5.Oscillator.getType()":{"relativeUrl":"/reference/p5.Oscillator/getType","alias":"getType"},"p5.Oscillator.mult()":{"relativeUrl":"/reference/p5.Oscillator/mult","alias":"mult"},"p5.Oscillator.pan()":{"relativeUrl":"/reference/p5.Oscillator/pan","alias":"pan"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.scale()":{"relativeUrl":"/reference/p5.Oscillator/scale","alias":"scale"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.orient()":{"relativeUrl":"/reference/p5.Panner3D/orient","alias":"orient"},"p5.Panner3D.orientX()":{"relativeUrl":"/reference/p5.Panner3D/orientX","alias":"orientX"},"p5.Panner3D.orientY()":{"relativeUrl":"/reference/p5.Panner3D/orientY","alias":"orientY"},"p5.Panner3D.orientZ()":{"relativeUrl":"/reference/p5.Panner3D/orientZ","alias":"orientZ"},"p5.Panner3D.panner":{"relativeUrl":"/reference/p5.Panner3D/panner","alias":"panner"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rollof()":{"relativeUrl":"/reference/p5.Panner3D/rollof","alias":"rollof"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.Part.addPhrase()":{"relativeUrl":"/reference/p5.Part/addPhrase","alias":"addPhrase"},"p5.Part.getBPM()":{"relativeUrl":"/reference/p5.Part/getBPM","alias":"getBPM"},"p5.Part.getPhrase()":{"relativeUrl":"/reference/p5.Part/getPhrase","alias":"getPhrase"},"p5.Part.loop()":{"relativeUrl":"/reference/p5.Part/loop","alias":"loop"},"p5.Part.noLoop()":{"relativeUrl":"/reference/p5.Part/noLoop","alias":"noLoop"},"p5.Part.onStep()":{"relativeUrl":"/reference/p5.Part/onStep","alias":"onStep"},"p5.Part.pause()":{"relativeUrl":"/reference/p5.Part/pause","alias":"pause"},"p5.Part.removePhrase()":{"relativeUrl":"/reference/p5.Part/removePhrase","alias":"removePhrase"},"p5.Part.replaceSequence()":{"relativeUrl":"/reference/p5.Part/replaceSequence","alias":"replaceSequence"},"p5.Part.setBPM()":{"relativeUrl":"/reference/p5.Part/setBPM","alias":"setBPM"},"p5.Part.start()":{"relativeUrl":"/reference/p5.Part/start","alias":"start"},"p5.Part.stop()":{"relativeUrl":"/reference/p5.Part/stop","alias":"stop"},"isDetected":{"relativeUrl":"/reference/p5.PeakDetect/isDetected"},"p5.PeakDetect.onPeak()":{"relativeUrl":"/reference/p5.PeakDetect/onPeak","alias":"onPeak"},"p5.PeakDetect.update()":{"relativeUrl":"/reference/p5.PeakDetect/update","alias":"update"},"p5.Phrase.sequence":{"relativeUrl":"/reference/p5.Phrase/sequence","alias":"sequence"},"p5.PolySynth.AudioVoice":{"relativeUrl":"/reference/p5.PolySynth/AudioVoice","alias":"AudioVoice"},"p5.PolySynth.connect()":{"relativeUrl":"/reference/p5.PolySynth/connect","alias":"connect"},"p5.PolySynth.disconnect()":{"relativeUrl":"/reference/p5.PolySynth/disconnect","alias":"disconnect"},"p5.PolySynth.dispose()":{"relativeUrl":"/reference/p5.PolySynth/dispose","alias":"dispose"},"p5.PolySynth.noteADSR()":{"relativeUrl":"/reference/p5.PolySynth/noteADSR","alias":"noteADSR"},"p5.PolySynth.noteAttack()":{"relativeUrl":"/reference/p5.PolySynth/noteAttack","alias":"noteAttack"},"p5.PolySynth.noteRelease()":{"relativeUrl":"/reference/p5.PolySynth/noteRelease","alias":"noteRelease"},"p5.PolySynth.notes":{"relativeUrl":"/reference/p5.PolySynth/notes","alias":"notes"},"p5.PolySynth.play()":{"relativeUrl":"/reference/p5.PolySynth/play","alias":"play"},"p5.PolySynth.polyvalue":{"relativeUrl":"/reference/p5.PolySynth/polyvalue","alias":"polyvalue"},"p5.PolySynth.setADSR()":{"relativeUrl":"/reference/p5.PolySynth/setADSR","alias":"setADSR"},"p5.PrintWriter.clear()":{"relativeUrl":"/reference/p5.PrintWriter/clear","alias":"clear"},"p5.PrintWriter.close()":{"relativeUrl":"/reference/p5.PrintWriter/close","alias":"close"},"p5.PrintWriter.print()":{"relativeUrl":"/reference/p5.PrintWriter/print","alias":"print"},"p5.PrintWriter.write()":{"relativeUrl":"/reference/p5.PrintWriter/write","alias":"write"},"p5.Pulse.width()":{"relativeUrl":"/reference/p5.Pulse/width","alias":"width"},"p5.Reverb.amp()":{"relativeUrl":"/reference/p5.Reverb/amp","alias":"amp"},"p5.Reverb.connect()":{"relativeUrl":"/reference/p5.Reverb/connect","alias":"connect"},"p5.Reverb.disconnect()":{"relativeUrl":"/reference/p5.Reverb/disconnect","alias":"disconnect"},"p5.Reverb.process()":{"relativeUrl":"/reference/p5.Reverb/process","alias":"process"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Score.loop()":{"relativeUrl":"/reference/p5.Score/loop","alias":"loop"},"p5.Score.noLoop()":{"relativeUrl":"/reference/p5.Score/noLoop","alias":"noLoop"},"p5.Score.pause()":{"relativeUrl":"/reference/p5.Score/pause","alias":"pause"},"p5.Score.setBPM()":{"relativeUrl":"/reference/p5.Score/setBPM","alias":"setBPM"},"p5.Score.start()":{"relativeUrl":"/reference/p5.Score/start","alias":"start"},"p5.Score.stop()":{"relativeUrl":"/reference/p5.Score/stop","alias":"stop"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.inspectHooks()":{"relativeUrl":"/reference/p5.Shader/inspectHooks","alias":"inspectHooks"},"p5.Shader.modify()":{"relativeUrl":"/reference/p5.Shader/modify","alias":"modify"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.SoundFile.addCue()":{"relativeUrl":"/reference/p5.SoundFile/addCue","alias":"addCue"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.clearCues()":{"relativeUrl":"/reference/p5.SoundFile/clearCues","alias":"clearCues"},"p5.SoundFile.connect()":{"relativeUrl":"/reference/p5.SoundFile/connect","alias":"connect"},"p5.SoundFile.currentTime()":{"relativeUrl":"/reference/p5.SoundFile/currentTime","alias":"currentTime"},"p5.SoundFile.disconnect()":{"relativeUrl":"/reference/p5.SoundFile/disconnect","alias":"disconnect"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.getBlob()":{"relativeUrl":"/reference/p5.SoundFile/getBlob","alias":"getBlob"},"p5.SoundFile.getPan()":{"relativeUrl":"/reference/p5.SoundFile/getPan","alias":"getPan"},"p5.SoundFile.getPeaks()":{"relativeUrl":"/reference/p5.SoundFile/getPeaks","alias":"getPeaks"},"p5.SoundFile.isLoaded()":{"relativeUrl":"/reference/p5.SoundFile/isLoaded","alias":"isLoaded"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPaused()":{"relativeUrl":"/reference/p5.SoundFile/isPaused","alias":"isPaused"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pan()":{"relativeUrl":"/reference/p5.SoundFile/pan","alias":"pan"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.playMode()":{"relativeUrl":"/reference/p5.SoundFile/playMode","alias":"playMode"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.removeCue()":{"relativeUrl":"/reference/p5.SoundFile/removeCue","alias":"removeCue"},"p5.SoundFile.reverseBuffer()":{"relativeUrl":"/reference/p5.SoundFile/reverseBuffer","alias":"reverseBuffer"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.save()":{"relativeUrl":"/reference/p5.SoundFile/save","alias":"save"},"p5.SoundFile.setBuffer()":{"relativeUrl":"/reference/p5.SoundFile/setBuffer","alias":"setBuffer"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.setVolume()":{"relativeUrl":"/reference/p5.SoundFile/setVolume","alias":"setVolume"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.SoundLoop.bpm":{"relativeUrl":"/reference/p5.SoundLoop/bpm","alias":"bpm"},"p5.SoundLoop.interval":{"relativeUrl":"/reference/p5.SoundLoop/interval","alias":"interval"},"p5.SoundLoop.iterations":{"relativeUrl":"/reference/p5.SoundLoop/iterations","alias":"iterations"},"p5.SoundLoop.maxIterations":{"relativeUrl":"/reference/p5.SoundLoop/maxIterations","alias":"maxIterations"},"p5.SoundLoop.musicalTimeMode":{"relativeUrl":"/reference/p5.SoundLoop/musicalTimeMode","alias":"musicalTimeMode"},"p5.SoundLoop.pause()":{"relativeUrl":"/reference/p5.SoundLoop/pause","alias":"pause"},"p5.SoundLoop.start()":{"relativeUrl":"/reference/p5.SoundLoop/start","alias":"start"},"p5.SoundLoop.stop()":{"relativeUrl":"/reference/p5.SoundLoop/stop","alias":"stop"},"p5.SoundLoop.syncedStart()":{"relativeUrl":"/reference/p5.SoundLoop/syncedStart","alias":"syncedStart"},"p5.SoundLoop.timeSignature":{"relativeUrl":"/reference/p5.SoundLoop/timeSignature","alias":"timeSignature"},"p5.SoundRecorder.record()":{"relativeUrl":"/reference/p5.SoundRecorder/record","alias":"record"},"p5.SoundRecorder.setInput()":{"relativeUrl":"/reference/p5.SoundRecorder/setInput","alias":"setInput"},"p5.SoundRecorder.stop()":{"relativeUrl":"/reference/p5.SoundRecorder/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.TypedDict.clear()":{"relativeUrl":"/reference/p5.TypedDict/clear","alias":"clear"},"p5.TypedDict.create()":{"relativeUrl":"/reference/p5.TypedDict/create","alias":"create"},"p5.TypedDict.get()":{"relativeUrl":"/reference/p5.TypedDict/get","alias":"get"},"p5.TypedDict.hasKey()":{"relativeUrl":"/reference/p5.TypedDict/hasKey","alias":"hasKey"},"p5.TypedDict.print()":{"relativeUrl":"/reference/p5.TypedDict/print","alias":"print"},"p5.TypedDict.remove()":{"relativeUrl":"/reference/p5.TypedDict/remove","alias":"remove"},"p5.TypedDict.saveJSON()":{"relativeUrl":"/reference/p5.TypedDict/saveJSON","alias":"saveJSON"},"p5.TypedDict.saveTable()":{"relativeUrl":"/reference/p5.TypedDict/saveTable","alias":"saveTable"},"p5.TypedDict.set()":{"relativeUrl":"/reference/p5.TypedDict/set","alias":"set"},"p5.TypedDict.size()":{"relativeUrl":"/reference/p5.TypedDict/size","alias":"size"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.clampToZero()":{"relativeUrl":"/reference/p5.Vector/clampToZero","alias":"clampToZero"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setContent()":{"relativeUrl":"/reference/p5.XML/setContent","alias":"setContent"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.AudioVoice":{"relativeUrl":"/reference/p5.sound/p5.AudioVoice"},"p5.BandPass":{"relativeUrl":"/reference/p5.sound/p5.BandPass"},"p5.Compressor":{"relativeUrl":"/reference/p5.sound/p5.Compressor"},"p5.Convolver":{"relativeUrl":"/reference/p5.sound/p5.Convolver"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Distortion":{"relativeUrl":"/reference/p5.sound/p5.Distortion"},"p5.EQ":{"relativeUrl":"/reference/p5.sound/p5.EQ"},"p5.Effect":{"relativeUrl":"/reference/p5.sound/p5.Effect"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Filter":{"relativeUrl":"/reference/p5.sound/p5.Filter"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.HighPass":{"relativeUrl":"/reference/p5.sound/p5.HighPass"},"p5.LowPass":{"relativeUrl":"/reference/p5.sound/p5.LowPass"},"p5.MonoSynth":{"relativeUrl":"/reference/p5.sound/p5.MonoSynth"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.OnsetDetect":{"relativeUrl":"/reference/p5.sound/p5.OnsetDetect"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.Part":{"relativeUrl":"/reference/p5.sound/p5.Part"},"p5.PeakDetect":{"relativeUrl":"/reference/p5.sound/p5.PeakDetect"},"p5.Phrase":{"relativeUrl":"/reference/p5.sound/p5.Phrase"},"p5.PolySynth":{"relativeUrl":"/reference/p5.sound/p5.PolySynth"},"p5.Pulse":{"relativeUrl":"/reference/p5.sound/p5.Pulse"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.Score":{"relativeUrl":"/reference/p5.sound/p5.Score"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SoundLoop":{"relativeUrl":"/reference/p5.sound/p5.SoundLoop"},"p5.SoundRecorder":{"relativeUrl":"/reference/p5.sound/p5.SoundRecorder"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"}},"tutorials-fallback":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Chatting with/about Code":{"relativeUrl":"/tutorials/criticalAI1-chatting-with-about-code","description":"Using generative AI to code with p5.js"},"Critical AI Prompt Battle":{"relativeUrl":"/tutorials/criticalAI2-prompt-battle","description":"Build a tool to compare generative AI prompts"},"Critical AI Sentiment Dataset Explorer":{"relativeUrl":"/tutorials/criticalAI3-sentiment-dataset-explorer","description":"Examine the datasets that run AI tools"},"Critical AI No-AI Chatbot":{"relativeUrl":"/tutorials/criticalAI4-no-ai-chatbot","description":"Make an interactive chatbot without using any AI"},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to GLSL":{"relativeUrl":"/tutorials/intro-to-glsl","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU using GLSL."},"p5.strands: Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-p5-strands","description":"An introduction to shaders using p5.strands"},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
+{"contributor-docs":{"🌸欢迎！🌺\n":{"relativeUrl":"/contribute/README","description":"\n\n感谢你有兴趣为 p5.js 做出贡献！我们的团队重视每一种形式的帮助，并且正在尽可能的扩大你能帮助的范围，这包括了参考文献、教学、编写程序、创作艺术、写作、设计、活动、组织、展策或者任何你能想象到的东西。[我们的社群网页](https://p5js.org/community/#contribute)提供了一些贡献与参与项目的方法。如果你要提供技术性的帮助，请接着往下读。\n\n本项目遵循[贡献者名单](https://github.com/kentcdodds/all-contributors/)规格。你可遵循[指示](https://github.com/processing/p5.js/issues/2309/)把你和你的贡献添加到 [readme](https://github.com/processing/p5.js/blob/main/README.md#contributors)，或者是在 [GitHub issue](https://github.com/processing/p5.js/issues/) 中评论你的贡献，我们就会把你加入到贡献者名单中。\n\n# 源代码\n\np5.js 项目除了这个代码库外还包括了以下几个其他的代码库：\n\n* [p5.js](https://github.com/processing/p5.js)：包括了 p5.js 源代码。[面向用户的 p5.js 参考文献](https://p5js.org/reference/)也是由包含在此源代码中的 [JSDoc](http://usejsdoc.org/) 注解生成的。[Lauren Lee McCarthy](https://github.com/lmccart/) 为维持者。\n* [p5.js-website](https://github.com/processing/p5.js-website/)：此源代码包含了 \\[p5.js website]\\([https://p5js.org](https://p5js.org) /)的大多数代码（除参考文献外）。[Lauren Lee McCarthy](https://github.com/lmccart/) 为维持者。\n* [p5.js-sound](https://github.com/processing/p5.js-sound/)：包括了 p5.sound.js 程式库。[Jason Sigal](https://github.com/therewasaguy/) 为维持者。\n* [p5.js-web-editor](https://github.com/processing/p5.js-web-editor/)：包含了 [p5.js web editor](https://editor.p5js.org) 的源代码。[Cassie Tarakajian](https://github.com/catarak/) 为维持者。请注意，旧版 [p5.js editor](https://github.com/processing/p5.js-editor/) 已不再受支持。\n* [p5.accessibility](https://github.com/processing/p5.accessibility)：使 p5.js 更适合盲人和视障人士使用的程式库。\n\n# 文件结构\n\n这个代码库有很多文件，所以这里提供了文件总览。有些文件可能很难懂——不过你并不需要每一个都看懂才能开始。我们建议你先从一个特定区域入手（例如说，修复某些内联参考文献），并逐渐地探索更多领域。Luisa Pereira 的 [Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/) 也给出了 p5.js 工具与文件的视频总览。\n\n* `contributor_docs/` 包含了贡献者所需遵循的原则；\n* `docs/` 并不包含参考文献！它包含了 **生成** [线上参考文献](https://p5js.org/reference/)的代码；\n* `lib/` 包含一个空白示例和 p5.sound 扩展程式库，并且会周期性地通过 [p5.js-sound 代码库](https://github.com/processing/p5.js-sound/) 更新。这里也是当用 [Grunt](https://gruntjs.com/) 把 p5.js 编译到单个文件后 p5.js 程式库的位置。发出 Pull request 时，无需将其检入 GitHub 代码库。\n* `src/` 包含所有的源代码，这些源代码通常组织成多个单独的模块。 如果要更改 p5.js，这就是你需要参考的地方。大多数文件夹内部都有独自的 README.md 文件，以帮助您浏览该文件夹。\n* `tasks/` 包含创建 p5.js 与新版本 p5.js 的构建、部署和发行有关的自动化任务的脚本。\n* `tests/` 包含单元测试，这些单元测试可确保库随着更改仍继续正常运行。\n* `utils/` 可能包含对存储库有用的其他文件，但是通常您可以忽略此目录。\n\n# 参考文献\n\n我们意识到参考文献是这个项目中最重要的部分。不好的参考文献是新用户与新贡献者的最大屏障，让项目不具有包容性。[contributing\\_documentation.md](../contributing_documentation/) 页面为开始修改参考文献给出了一个深入的导览。p5.js 的参考文献可以在以下几个地方找到：\n\n* [p5js.org/reference](https://p5js.org/reference/)：由 [inline documentation](../inline_documentation/) 的源代码生成。它包括了文本描述和参数以及随附的代码片段示例。我们将所有这些内联文献和代码放在一起，以使代码和参考文献保持紧密的联系，并强化这样的思想，贡献参考文献与贡献代码至少同等重要。构建库后，它将检查内联参考文献和示例，以确保它们与代码的行为方式匹配。 要做出贡献，您可以先查看 [inline\\_documentation.md](../inline_documentation/) 页面。\n* [p5js.org/examples](https://p5js.org/examples/) 页面包含更长的示例，这些示例对于学习 p5.js 可能有用。要做出贡献，您可以先查看 [adding\\_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md)。\n* [p5js.org/tutorials](https://p5js.org/tutorials/) 页面包含可帮助您学习 p5.js 和编程概念的教程。 要做出贡献，您可以先查看 [p5.js guide to contributing to tutorials](https://p5js.org/learn/tutorial-guide.html)。\n* 您可能会注意到 p5.js 网站目前支持几种不同的语言。这称为国际化（i18n）。您可以在 [i18n\\_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contribution.md)页面了解更多。\n\n# GitHub Issue 流程\n\n* 我们使用 [GitHub issue](https://github.com/processing/p5.js/issues/) 跟踪已知的错误和预期的新功能。[Issue lables](../issue_labels/) 用于将问题分类，例如[适合初学者](https://github.com/processing/p5.js/labels/level%3Abeginner/)的问题。\n\n* 如果您想开始处理现有问题，请对你打算探查的问题发表评论，以便其他贡献者知道该问题正在处理中并可以提供帮助。\n\n* 完成有关此问题的工作后，请针对 p5.js main 分支[提交 Pull request](../preparing_a_pull_request/) 。在PR的描述字段中，包括 “resolves #XXXX” 标记，以解决您要解决的问题。如果 PR 并不能完全解决该问题（即，在PR合并后该问题应保持打开状态），请输入 “addresses #XXXX”。\n\n* 如果发现错误或有想要添加新功能的主意，请先提交问题。请不要直接地提交包含修复程序或新功能的 Pull Request，而不先发出问题，否则我们将无法接受该 Pull Request。在有关该问题获得反馈并得到同意解决该问题后，您可以按照上述过程以提供修复或功能。\n\n* 您可以对问题进行分类，其中可能包括复制错误报告或要求提供重要信息，例如版本号或复制说明。 如果您想开始分类问题，一种简单的入门方法是[在 CodeTriage 上订阅 p5.js](https://www.codetriage.com/processing/p5.js)。[](https://www.codetriage.com/processing/p5.js)\n\n* [organization.md](https://github.com/processing/p5.js/blob/main/contributor_docs/organization.md) 文件提供了有关如何组织问题以及决策过程的高级概述。如果您有兴趣，欢迎您参与。\n\n# 开发过程\n\n我们知道开发过程可能会有点难——不只是你一个人，所有人一开始都会这么觉得。你可以遵循下面的步骤来设置；如果遇到了问题，你可以在[论坛](https://discourse.processing.org/c/p5js/)上讨论或发布一个关于你的问题的 [issue](https://github.com/processing/p5.js/issues/)，我们会尽力帮助你的。\n\n1. 下载 [node.js](http://nodejs.org/)（同时将会自动下载 [npm](https://www.npmjs.org) 程式包管理器）\n\n2. 将 [p5.js 代码库](https://github.com/processing/p5.js) [fork](https://help.github.com/articles/fork-a-repo/) 到你的 GitHub 账号\n\n3. [复制](https://help.github.com/articles/cloning-a-repository/) 此代码库的新 fork 到本地电脑：\n\n ```shell\n $ git clone https://github.com/您的用户名/p5.js.git\n ```\n\n4. 导航到项目文件夹，并使用 npm 安装其所有所需的程式包。\n\n ```shell\n $ cd p5.js\n $ npm ci\n ```\n\n5. [Grunt](https://gruntjs.com/) 需要被安装，您可以使用它从源代码构建程式库。\n\n ```shell\n $ npm run grunt\n ```\n\n 如果您要不断更改库中的文件，您可以运行 `npm run dev` 以便在源文件发生任何更改时自动为您重建程式库，而无需手动键入命令。\n\n6. 在本地源代码更改然后用 Git [commit](https://help.github.com/articles/github-glossary/#commit) 它们。\n\n ```shell\n $ git add -u\n $ git commit -m \"YOUR COMMIT MESSAGE\"\n ```\n\n7. 再次运行 `npm run grunt` 确保没有语法错误，测试失败或其他问题。\n\n8. 将您对 GitHub 上的 fork 上载（[Push](https://help.github.com/articles/github-glossary/#push)）新更改。\n\n ```shell\n $ git push\n ```\n\n9. 一切准备就绪后，使用 [pull request](https://help.github.com/articles/creating-a-pull-request/) 发布。\n\n# 注意事项\n\np5.js 代码库附带的开发人员工具在某些方面特意非常严格。这是一件好事！它使所有内容保持一致，并勉励您在编写代码时保持一致性。这意味着您可能尝试更改某些东西——但您的提交可能会被项目拒绝，但不要灰心，即使是经验丰富的 p5.js 开发人员也方会犯同样的错误。通常，问题将出在以下两个方面之一：代码语法或单元测试。\n\n## 代码语法\n\np5.js 要求整齐且在风格上一致的代码语法，它使用 [ESlint](https://eslint.org/) 帮助检查代码。提交前这些工具会检查某些样式规则，但是您也可以为代码编辑器安装 [ESlint 插件](https://eslint.org/docs/user-guide/integrations#editors)，以在键入代码后立即显示错误。总的来说，在代码风格方面我们会趋向选择灵活性，以减少参与和贡献的阻碍。\n\n要检查错误，在命令行输入以下指令（不要键入 `$` 提示符）：\n\n```shell\n$ npm run lint\n```\n\n一些语法错误可以自动修复：\n\n```shell\n$ npm run lint:fix\n```\n\n坚持使用已建立的项目样式通常是更可取的，但是[偶尔](https://github.com/processing/p5.js/search?utf8=%E2%9C%93\\&q=prettier-ignore\\&type=)可能使用不同的语法会使您的代码更易于理解。 这些情况下，Prettier [提供了一个解决方式](https://prettier.io/docs/en/ignore.html)，`// prettier-ignore`注释，您可以使用它来指定个别例外代码。不过如果可以的话，尽量避免使用它，因为 linter 实施的大多数代码格式都有好的理由。\n\n这是代码样式规则的快速摘要。请注意，此列表可能不完整，最好参考 [.prettierrc](https://github.com/processing/p5.js/blob/main/.prettierrc) 和 [.eslintrc](https://github.com/processing/p5.js/blob/main/.eslintrc) 文件以获取完整列表。\n\n* 使用 ES6 语法\n\n* 优先使用单引号\n\n* 缩排使用两个空格\n\n* 所有变量至少要使用一次，否则彻底删除\n\n* 不要使用 `x == true` 或 `x == false`，请使用 `(x)` 或 `(x)!`。如果可能导致误解，请将物件与 `null` 对比、字符串与 `\"\"` 对比、数字与 `0` 对比。\n\n* 在复杂或模棱两可的地方使用注释\n\n* 参考 [Mozilla JS practices](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style#JavaScript_practices) 以了解一些有用的代码格式技巧。\n\n## 单元测试\n\n单元测试是一小段代码，它们是对主逻辑的补充，并执行验证。[unit\\_testing.md](../unit_testing/)页面提供了有关使用单元测试的更多信息。如果您正在开发 p5.js 的主要新功能，尽可能应该包含测试。不要提交没有通过测试的 pull request，因为这意味着某些代码中有错误。\n\n以运行单元测试，您需要确保已安装项目的依赖项。\n\n```shell\n$ npm ci\n```\n\n这将安装*所有* p5.js 的依赖项； 简要地说，特定于单元测试的最重要依赖项包括：\n\n-[Mocha](https://mochajs.org/)，一个功能强大的测试框架，可以执行特定于 p5.js 的各个测试文件\n-[mocha-chrome](https://github.com/shellscape/mocha-chrome/)，一个可使用无头 Google Chrome 浏览器运行 mocha 测试的 mocha 插件\n\n一旦安装了依赖项，请使用Grunt运行单元测试。\n\n```shell\n$ grunt\n```\n\n在浏览器而不是命令行中运行测试有时很有用。 为此，请首先启动 [connect](https://github.com/gruntjs/grunt-contrib-connect/) 服务器：\n\n```shell\n$ npm run dev\n```\n\n在服务器运行的情况下，您应该能够在浏览器中打开 `test/test.html`。\n\n完整的单元测试指南超出了 p5.js 文档的范围，但是简短的版本是 `src/` 目录中包含的源代码中若有任何重大更改或新功能，它应随附有在 `test/` 目录中的测试记录，以验证该库的所有将来版本中的行为一致。在编写单元测试时，请使用 [Chai.js 参考文献](http://www.chaijs.com/api/assert/)作为分阶段声明消息的指南，以便将来在测试中捕获的任何错误都会是一致地，并使其他开发人员更容易理解问题在哪里。\n\n# 其他\n\n* 您可以浏览 [contributor\\_docs /](https://github.com/processing/p5.js/tree/main/contributor_docs/) 文件夹中的其他文件。它们涉及贡献于此项目的技术和非技术方面的特定领域。\n* [深入p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/) 是 p5.js 开发工作流程中使用的工具和文件的视频教程。\n* [来自 The Coding Train 的视频](https://youtu.be/Rr3vLyP1Ods/) :train::rainbow: 概述了对 p5.js 的技术贡献入门。\n* p5.js [Docker 映像](https://github.com/toolness/p5.js-docker/)可以安装在 [Docker](https://www.docker.com/) 中，并用于开发p5 .js，无需手动安装诸如 [Node](https://nodejs.org/) 之类的要求，也无需以其他方式影响主机操作系统（除了安装 Docker 外）。\n* p5.js 库的构建过程会生成一个 [json 数据文件](https://p5js.org/reference/data.json)，其中包含了 p5.js 的公共 API，可用于自动化工具中，例如在编辑器中自动完成 p5.js 语法。该文件托管在 p5.js 网站上，但不包含在代码库中。\n* p5.js 的语言最近已改版到 [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-__ECMAScript_2015)。要查看此举措如何影响您的贡献，请参考 [ES6 adoption](../es6-adoption/) 。\n"},"我们关注的重点是可及性\n":{"relativeUrl":"/contribute/access","description":"{/* 我们对可及性的承诺对贡献者和库的用户意味着什么。 */}\n\n\n\n在[ 2019 年贡献者大会](https://p5js.org/community/contributors-conference-2019.html)上，我们承诺只向 p5.js 添加提高可及性（包括包容性和无障碍性）的功能。我们不会接受那些不支持这些努力的功能请求。我们致力于识别、消除和预防与可及性相关的障碍。这意味着要考虑在交叉[^1]体验中可能影响可及性和参与度的多样性方向。这包括了性别、种族、族裔、性别倾向、语言、地理位置等因素的考虑。我们会优先考虑边缘群体的需求，而不是仅维护在 p5.js 社区中特权群体的长期舒适体验。我们正共同探索和研究可及性的含义，并积极学习该如何实践和传授可及性相关的知识。我们选择通过广泛、交叉和联合的框架来思考可及性。这一承诺是我们在[社区声明](https://p5js.org/about/#community-statement)中概述的 p5.js 核心价值观的一部分。\n\n## 可及性的种类\n\n增加可及性并不专注于扩大 p5.js 社区的人数。它是一种持续的承诺，旨在使 p5.js 对因结构性压迫而被排除在 p5.js 社区外的人们更加可用和易于接触。这一承诺扩展到 p5.js 提供的工具和平台。它还包括 p5.js 领导层的组成、决策和行动。我们反对技术文化中对速度、增长和竞争的追求。我们将致力于推行以下互相关照的集体行为：深思熟虑、放慢步调、互相照应和积极负责。\n\n这里的可及性意味着为以下人群改进 p5.js：\n\n* 非英语母语的人\n* 黑人、原住民、有色人种以及边缘化民族的人\n* 同性恋、双性恋、酷儿、探索中、泛性恋和无性恋的人\n* 跨性别、流动性别、无性别、间性人、双精神身份人士、女性以及以及其他性别边缘化的人\n* 盲人、聋人[^2]或重听、残疾/有残疾、神经多样性和慢性病[^3]患者\n* 收入较低或缺乏经济或文化基础的人\n* 几乎没有或很少开源和创意编码经验的人\n* 来自多样教育背景的人\n* 包括儿童和老年人在内的所有年龄段的人\n* 拥有各种技术技能、工具和互联网访问的人\n* 来自多样宗教背景的人\n* 其他被系统性排除和历史上代表性不足的人\n* 及以上所有的交叉复合的人\n\n我们意识到用来描述我们各自身份的术语的复杂性。语言是微妙的、不断发展的，且常常存在争议。这并不是一个详尽的列表。我们努力给予命名，并对我们的承诺及 p5.js 社区的多样需求承担责任。\n\n### 示例\n\n我们认为以下举措有助于增加可及性：\n\n* 将文档和其他资料翻译成更多的语言，从而解构语言帝国主义[^4]（例如，Rolando Vargas 的[用库纳语编程](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/)，Felipe Santos Gomes, Julia Brasil, Katherine Finn Zander, 和 Marcela Mancino 的[为葡萄牙语用户的 Pê Cinco：国际化与普及](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)）\n* 改进对辅助技术的支持，比如屏幕阅读器（例如，Katie Liu 的[在 p5.js 中添加 Alt 文本](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/)，Claire Kearney-Volpe 的[ p5 可及性项目](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)）\n* 遵循我们工具中的[网络内容无障碍指南](https://www.w3.org/TR/WCAG21/)，并致力于让用户在其项目中更轻松地遵守这些准则\n* 让 p5.js 的错误信息对使用该工具的人士更为友好和获取更多支持。（例如，[ p5.js 友好错误系统(FES)](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)）\n* 在创意编程和数字艺术领域历史上被排除和边缘化的社区内指导和支持 p5.js 的学习者\n* 举办社区活动（例如，[ p5.js 无障碍日 2022](https://p5js.org/community/p5js-access-day-2022.html)，[我们想要的网络：p5.js x W3C TPAC 2020](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/)），采用以可及为中心的组织策略（例如，美国手语翻译，实时字幕，无障碍场地）\n* 支持创建教育资源（例如，Adekemi Sijuwade-Ukadike 的[可及性教学大纲](http://a11ysyllabus.site/)）\n* 发布我们的工作文档和报告，遵循 WCAG 指南，使用简明语言，专注于来自多样经历的初学者（例如，[ OSACC p5.js 访问报告](https://github.com/processing/OSACC-p5.js-Access-Report/)）\n\n## 维护\n\n我们不接受那些不支持我们增加可及性努力的功能请求。你将在我们的 issue 和 PR 模板中看到这一标准的体现。我们还确认了保持 p5.js 现有功能集的意图。我们愿意修复代码库中任何区域的错误。我们相信工具的一致性将使其对初学者更加易用。提升易用性的功能请求示例包括：\n为使用性能较低硬件的人提升性能（例如，支持向帧缓冲区绘制/从帧缓冲区读取）\nAPI 的一致性（例如，添加 arcVertex() 函数以通过 beginShape()/endShape() 创建弧线）\n\n***\n\n请将此视为一份“不断发展中的文档”。我们将持续讨论并优先考虑可及性的含义。我们邀请我们的社区参与讨论这份文档及其所描述的价值观。如果你有任何想法或建议，欢迎通过在 Github 上提交 issue 或通过发送电子邮件至 [hello@p5js.org](mailto:hello@p5js.org) 与我们分享。\n\n这个版本的 p5.js 可及性声明是在2023年开源艺术贡献者大会上，与 Evelyn Masso、Nat Decker、Bobby Joe Smith III、Sammie Veeler、Sonia (Suhyun) Choi、Xin Xin、Kate Hollenbach、Lauren Lee McCarthy、Caroline Sinders、Qianqian Ye、Tristan Jovani Magno Espinoza、Tanvi Sharma、Tsige Tafesse 和 Sarah Ciston 的合作下修订的。它在 Bobby Joe Smith III 和 Nat Decker 的 Processing Foundation 研究奖金支持下完成并发布。\n\n[^1]: Crenshaw, Kimberlé (1989)。\"Demarginalizing the intersection of race and sex: a black feminist critique of antidiscrimination doctrine, feminist theory and antiracist politics\"。芝加哥大学法律论坛。1989 (1): 139–167。ISSN 0892-5593。全文在 Archive.org。\n\n[^2]: 大写的 ‘D’Deaf 指的是文化上属于 Deaf 社区的人，而小写的 ‘d’deaf 是一个听力学术语，可以描述不与 Deaf 身份相关联的人。\n\n[^3]: 在残疾社区内，对于‘以人为本’与‘以身份为先’语言的偏好存在分歧。阅读[在自闭症社区中关于以人为本与以身份为先语言的辩论解包](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/) 和[我是残疾人：关于身份先行与人先行语言的讨论](https://thebodyisnotanapology.com/magazine/i-am-disabled-on-identity-first-versus-people-first-language/)。\n\n[^4]: 语言帝国主义或语言霸权，指的是某些语言（如英语）由于帝国扩张和全球化而持续的统治/优先/强加，以牺牲本土语言为代价的现象。\n"},"为 p5.js 参考文献做贡献\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* 使用正确的格式编写和编辑 p5.js 参考资料。 */}\n\n\n\n在 p5.js 中，我们通过在库的源代码中包含专门的注释，来编写你在 p5.js 网站上看到的[参考文献](https://p5js.org/reference/)页面上的代码参考。这些参考注释包括描述、函数签名（其参数和返回值）和使用示例。换句话说，每个 p5.js 函数/变量的参考页面上的内容都是从源代码中的参考注释构建的。\n\n本文档将向你展示如何编写和格式化参考注释，以便最终能够正确地呈现到网站上。每当你编辑或编写任何 p5.js 函数或变量的参考时，都应遵循此指南。\n\n## 关于参考注释如何工作的简要介绍\n\n当你查看 p5.js 的源代码时，你会看到库中许多行都是参考注释；它们看起来像这样：\n\n```\n/**\n * Calculates the sine of an angle. `sin()` is useful for many geometric tasks\n * in creative coding. The values returned oscillate between -1 and 1 as the\n * input angle increases. `sin()` takes into account the current\n * <a href=\"#/p5/angleMode\">angleMode</a>.\n *\n * @method sin\n * @param {Number} angle the angle.\n * @return {Number} sine of the angle.\n *\n * @example\n * <div>\n * <code>\n * function draw() {\n * background(200);\n *\n * let t = frameCount;\n * let x = 50;\n * let y = 30 * sin(t * 0.05) + 50;\n * line(x, 50, x, y);\n * circle(x, y, 20);\n *\n * describe('A white ball on a string oscillates up and down.');\n * }\n * </code>\n * </div>\n *\n * <div>\n * <code>\n * function draw() {\n * let x = frameCount;\n * let y = 30 * sin(x * 0.1) + 50;\n * point(x, y);\n *\n * describe('A series of black dots form a wave pattern.');\n * }\n * </code>\n * </div>\n *\n * <div>\n * <code>\n * function draw() {\n * let t = frameCount;\n * let x = 30 * cos(t * 0.1) + 50;\n * let y = 10 * sin(t * 0.2) + 50;\n * point(x, y);\n *\n * describe('A series of black dots form an infinity symbol.');\n * }\n * </code>\n * </div>\n */\n```\n\n实际定义函数的 JavaScript 代码往往紧随其后。参考注释始终以 `/**` 开始并以 `*/` 结束，两者之间的每一行都以 `*` 开头。\n\n这种形式的代码块中的任何内容都将被解释为参考文献。你可能通过 [JSDoc](https://jsdoc.app/) 已熟悉这种样式的代码注释。虽然 p5.js 不使用 JSDoc，但它使用了一个非常相似的工具，叫做 [YUIDoc](https://yui.github.io/yuidoc/)，它具有非常相似的参考语法。在这种参考注释样式中，每个注释块进一步分成各个元素，我们将在下面看一下。\n\n## 参考注释块\n\n让我们解析上面 `sin()` 函数的参考注释块，并查看每个部分的作用。你可以将此处的注释与参考页面上的[`sin()`](https://p5js.org/reference/p5/sin/)进行比较。\n\n```\n/**\n * Calculates the sine of an angle. `sin()` is useful for many geometric tasks\n * in creative coding. The values returned oscillate between -1 and 1 as the\n * input angle increases. `sin()` takes into account the current\n * <a href=\"#/p5/angleMode\">angleMode</a>.\n```\n\n在注释的顶部是函数的文本描述。此描述可以包含 markdown 语法和 HTML。描述应该简洁明了，描述函数的功能，并在必要时描述一些有关其性能或反常行为的细节。\n\n```\n * @method sin\n * @param {Number} angle the angle.\n * @return {Number} sine of the angle.\n```\n\n函数通常具有上述三个部分，每个部分以 `@` 符号开始，后跟以下关键字之一：\n\n* `@method` 用于定义函数的名称，在本例中是 `sin`（注意函数名称不包括括号 `()`）。\n* `@param` 用于定义函数接受的参数或参数。\n * 在关键字 `@param` 之后，存储在花括号 `{}` 中的是参数的类型。\n * 在类型之后，下一个单词（angle）是参数的名称。\n * 名称之后，该行的其余部分是参数的描述。\n* `@return` 用于定义函数的返回值。\n * 在关键字 `@return` 之后，存储在花括号 `{}` 中的是返回值的类型。\n * 在类型之后，该行的其余部分是返回值的描述。\n\n对于参数，通常应遵循以下格式：\n\n```\n@param {type} name Description here.\n```\n\n如果参数是可选的，请在名称周围添加方括号：\n\n```\n@param {type} [name] Description here.\n```\n\n### 额外信息：常量\n\n如果参数接受在 [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js) 中定义的一个或多个值，则类型应指定为 `{Constant}`，并在关键字 `either` 后的注释中枚举有效值，例如：\n\n```\n@param {Constant} horizAlign horizontal alignment, either LEFT, CENTER, or RIGHT\n```\n\n对于返回类型，应遵循以下格式：\n\n```\n@return {type} Description of the data returned.\n```\n\n如果函数不返回值，则可以省略 `@return` 标签。\n\n### 额外信息：链式\n\n如果方法返回父对象，则可以跳过 `@return` 标签，并改为添加以下行：\n\n```\n@chainable\n```\n\n## 其他签名\n\n如果一个函数有多个可能的参数选项，则可以分别指定每个参数。例如，[`background()`](https://p5js.org/reference/#p5/background/) 函数有许多不同的参数选项（请参阅参考页面上的“语法”部分）。选择一个版本以使用上面的模板列出作为第一个签名。在第一个参考注释块的末尾，你可以添加额外的签名，每个签名都在自己的块中，仅使用以下示例中的 `@method` 和 `@param` 标签。\n\n```\n/**\n * @method background\n * @param {String} colorstring color string, possible formats include: integer\n * rgb() or rgba(), percentage rgb() or rgba(),\n * 3-digit hex, 6-digit hex\n * @param {Number} [a] alpha value\n */\n\n/**\n * @method background\n * @param {Number} gray specifies a value between white and black\n * @param {Number} [a]\n */\n```\n\n### 额外信息：多个签名\n\n如果两个签名之间唯一的区别是添加了一个可选参数，则不必创建单独的签名。如果可能的话，请限制使用此功能，因为它可能会在参考文献中制造不必要的干扰信息或相似信息。\n\n## p5.js 变量的参考文献\n\n到目前为止，我们已经看过了如何为函数和常量编写参考文献。变量遵循相同的结构，但使用不同的标签。\n\n```\n/**\n * The system variable mouseX always contains the current horizontal\n * position of the mouse, relative to (0, 0) of the canvas. The value at\n * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.\n * If touch is used instead of mouse input, mouseX will hold the x value\n * of the most recent touch point.\n *\n * @property {Number} mouseX\n * @readOnly\n *\n * @example\n * <div>\n * <code>\n * // Move the mouse across the canvas\n * function draw() {\n * background(244, 248, 252);\n * line(mouseX, 0, mouseX, 100);\n * describe('horizontal black line moves left and right with mouse x-position');\n * }\n * </code>\n * </div>\n */\n```\n\n块的开始包含变量的描述（在该例子中是 `mouseX`）。为了定义变量的名称，我们使用 `@property` 而不是 `@method`。`@property` 的语法与 `@param` 类似，用于定义类型及其名称。大多数 p5.js 变量都带有 `@readonly` 标签，用于内部指示该值不应由库用户直接覆盖。\n\n## 添加示例\n\n`sin()` 和 `mouseX` 的参考注释中，都有一个我们还没有讨论过的 `@example` 标签。这个标签是你定义访问参考页面时运行的代码示例的地方。\n\n\n\n创建以上示例的相关 `@example` 标签如下：\n\n```\n * @example\n * <div>\n * <code>\n * const c = color(255, 204, 0);\n * fill(c);\n * rect(15, 20, 35, 60);\n * // Sets 'redValue' to 255.\n * const redValue = red(c);\n * fill(redValue, 0, 0);\n * rect(50, 20, 35, 60);\n * describe(\n * 'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'\n * );\n * </code>\n * </div>\n```\n\n在 `@example` 标签之后，你应该开始一个 HTML `<div>` 标签，后跟一个 `<code>` 标签。在开放和闭合的 `<code>` 标签之间，你将插入相关示例代码。编写参考示例代码的基本原则是保持简单和简洁。示例应该有意义，并解释功能的工作原理，而不会太复杂。示例的画布应该是 100x100 像素，如果没有包含 `setup()` 函数，例如上面的示例，则代码将自动包装在一个默认的 100x100 像素灰色背景画布中创建的 `setup()` 函数中。我们不会在这里详细讨论示例代码的最佳实践和代码风格；请参阅参考样式指南。\n\n你可以为一个功能添加多个示例。为此，添加一个额外的 `<div>` 和 `<code>` HTML 块，直接放在第一个关闭后，中间用一个空行分隔。\n\n```\n* @example\n* <div>\n* <code>\n* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n* describe('An ellipse created using an arc with its top right open.');\n* </code>\n* </div>\n*\n* <div>\n* <code>\n* arc(50, 50, 80, 80, 0, PI, OPEN);\n* describe('The bottom half of an ellipse created using arc.');\n* </code>\n* </div>\n```\n\n如果你不希望参考页面执行示例代码（即，你只希望代码显示出来），请在 `<div>` 中包含 “`norender`” 类：\n\n```\n* @example\n* <div class=\"norender\">\n* <code>\n* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n* describe('ellipse created using arc with its top right open');\n* </code>\n* </div>\n```\n\n如果你不希望示例作为自动化测试的一部分运行（例如，如果示例需要用户交互），请在 `<div>` 中包含 `“notest”` 类：\n\n```\n* @example\n* <div class='norender notest'><code>\n* function setup() {\n* let c = createCanvas(100, 100);\n* saveCanvas(c, 'myCanvas', 'jpg');\n* }\n* </code></div>\n```\n\n如果你的示例使用外部素材文件，请将它们放入 [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) 文件夹中（或者重用其中已有的文件），然后在代码中使用 \"assets/filename.ext\" 链接到它们。请参阅 [tint()](https://p5js.org/reference/p5/tint/) 参考示例。\n\n### 使用 `describe()` 添加画布描述\n\n最后，对于你添加的每个示例，都需要使用 p5.js 函数 `describe()` 来创建一个屏幕阅读器可访问的画布描述。只包括一个参数：一个字符串，其中简要描述了画布上发生的事情。\n\n```\n* @example\n* <div>\n* <code>\n* let xoff = 0.0;\n* function draw() {\n* background(204);\n* xoff = xoff + 0.01;\n* let n = noise(xoff) * width;\n* line(n, 0, n, height);\n* describe('A vertical line moves randomly from left to right.');\n* }\n* </code>\n* </div>\n*\n* <div>\n* <code>\n* let noiseScale = 0.02;\n* function draw() {\n* background(0);\n* for (let x = 0; x < width; x += 1) {\n* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);\n* stroke(noiseVal*255);\n* line(x, mouseY + noiseVal * 80, x, height);\n* }\n* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');\n* }\n* </code>\n* </div>\n```\n\n有关 `describe()` 的更多信息，请访问 [网络无障碍贡献者文档](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions)。\n\n以上就是你编写和编辑 p5.js 参考注释的大多数方法。然而，还有一些 JSDoc 样式参考注释的更多专门用法，你可能会在 p5.js 中遇到。这些在某些情况下很有用，但通常不是你经常需要的东西。\n\n### `@private` 标签\n\n如果属性或变量是私有函数或变量，则可以使用 `@private`。如果将功能标记为 `@private`，则不会将其作为渲染的参考的一部分包含在网站上。使用 `@private` 标签将参考注释块标记为私有的原因是当你记录库本身的内部功能时。例如，参考下面的 `_start` 的参考注释：\n\n```\n/**\n * _start calls preload() setup() and draw()\n *\n * @method _start\n * @private\n */\np5.prototype._start = function () {\n```\n\n### `@module` 和相关标签\n\n每个源代码文件的顶部都将有一个 `@module` 标签。模块对应于 p5.js 中的一组功能，在网站上呈现的渲染的参考页面将这些功能分成相应的部分。在每个模块中，使用 `@submodule` 标签定义额外的子模块。\n\n`@for` 标签定义此模块与整体 `p5` 类之间的关系，有效地表示此模块是 `p5` 类的一部分。\n\n`@requires` 标签定义当前模块依赖的所需导入模块。\n\n```\n/**\n * @module Color\n * @submodule Creating & Reading\n * @for p5\n * @requires core\n * @requires constants\n */\n```\n\np5.js 遵循的约定是 `src/` 文件夹中的每个子文件夹将是一个 `@module`，而子文件夹中的每个文件将是该子文件夹的 `@module` 下的一个 `@submodule`。除非你正在向 p5.js 源代码添加新的子文件夹/文件，否则你不应直接编辑此参考注释块中的文件。\n\n### `@class` 标签\n\n使用 `@class` 标签和 `@constructor` 标签定义类构造函数。此块的格式类似于使用 `@method` 块定义函数的方式，类的名称将需要使用 `@class` 标签定义，而 `@constructor` 标签将指示类具有构造函数。参见下面的示例 `p5.Color` 类：\n\n```\n/**\n * A class to describe a color. Each `p5.Color` object stores the color mode\n * and level maxes that were active during its construction. These values are\n * used to interpret the arguments passed to the object's constructor. They\n * also determine output formatting such as when\n * <a href=\"#/p5/saturation\">saturation()</a> is called.\n *\n * Color is stored internally as an array of ideal RGBA values in floating\n * point form, normalized from 0 to 1. These values are used to calculate the\n * closest screen colors, which are RGBA levels from 0 to 255. Screen colors\n * are sent to the renderer.\n *\n * When different color representations are calculated, the results are cached\n * for performance. These values are normalized, floating-point numbers.\n *\n * <a href=\"#/p5/color\">color()</a> is the recommended way to create an instance\n * of this class.\n *\n * @class p5.Color\n * @constructor\n * @param {p5} [pInst] pointer to p5 instance.\n *\n * @param {Number[]|String} vals an array containing the color values\n * for red, green, blue and alpha channel\n * or CSS color.\n */\n```\n\n## 生成和预览参考文献\n\np5.js 存储库已经设置好，可以生成和预览参考文献，而不需要构建和运行 p5.js 网站。\n\n* 从源代码中的参考注释生成参考文献的主要命令是运行以下命令。\n\n```\nnpm run docs\n```\n\n这将生成必要的预览文件和主 `docs/reference/data.json` 文件，这个文件（在缩小后）将用于在网站上呈现参考页面。\n\n* 为了持续修改完善参考文献，你可以运行以下命令。\n\n```\nnpm run docs:dev\n```\n\n这将启动一个渲染参考文献的实时预览，每次你进行更改时都会更新（你需要在进行更改后刷新页面才能看到它们）。对于在浏览器中预览示例代码来说，这特别有用。\n\n* 主要的模板文件存储在 `docs/` 文件夹中，在大多数情况下，你不应直接更改此文件夹中的文件，除非是要在 `docs/yuidoc-p5-theme/assets` 文件夹中添加新的文件。\n\n## 下一步\n\n有关参考系统的详细信息，你可以查看[JSDoc](https://jsdoc.app/) 和 [YUIDoc](https://yui.github.io/yuidoc/) 的文档。\n\n有关参考资料相关 issue 的示例，请查看[#6519](https://github.com/processing/p5.js/issues/6519/) 和 [#6045](https://github.com/processing/p5.js/issues/6045/)。[贡献者指南](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md) 文档也是一个很好的起点。\n"},"贡献者指南\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* 关于在 GitHub 上为 p5.js 做出贡献的重要信息。 */}\n\n\n\n欢迎来到 p5.js 贡献者指南！本文档适用于有意为 p5.js 贡献代码的新贡献者、希望复习一些技术步骤的贡献者、以及其他与为 p5.js 贡献代码相关的任何事情。\n\n如果你希望在 p5.js 代码库之外做出贡献（例如编写教程、规划教学课程、组织活动等），请查看其他相关页面。管理员或维护人员可以通过[管理员指南](../steward_guidelines/)查阅问题审核与拉取请求相关的内容。\n\n本文档尽管内容较多且覆盖面很广，但我们还是会尽量清晰地注明所有步骤和要点。你可以使用目录查找特定章节。如果文档中的某些章节与你要贡献的内容无关，可以选择跳过。\n\n**如果你是一个新贡献者，你可以从第一章节 “关于 Issues” 开始阅读。如果你想查看关于开发流程的详细指南，可以移步 “开发者快速入门指南” 章节**\n\n# 目录\n\n* [贡献者指南](#贡献者指南/)\n* [目录](#目录/)\n* [关于 Issues](#关于-issues/)\n * [所谓 “Issues” 是指什么？](#所谓-issues-是指什么/)\n * [Issue 模板](#issue-模板/)\n * [抓到个 bug](#抓到个-bug/)\n * [增强现有功能](#增强现有功能/)\n * [新功能开发请求](#新功能开发请求/)\n * [发起讨论](#发起讨论/)\n* [修改 p5.js 代码库](#修改-p5js-代码库/)\n * [必备条件](#必备条件/)\n * [介绍](#介绍/)\n * [开发者快速入门指南](#开发者快速入门指南/)\n * [使用 GitHub 的编辑功能](#使用-github-的编辑功能/)\n * [Fork p5.js 并在你的 Fork 中工作](#fork-p5js-并在你的-fork-中工作/)\n * [使用 GitHub 桌面版](#使用-github-桌面版/)\n * [使用 git 命令行界面](#使用-git-命令行界面/)\n * [代码库拆解](#代码库拆解/)\n * [构建设置](#构建设置/)\n * [Git 工作流程](#git-工作流程/)\n * [源代码](#源代码/)\n * [单元测试](#单元测试/)\n * [内联文档](#内联文档/)\n * [无障碍](#无障碍/)\n * [代码规范](#代码规范/)\n * [设计原则](#设计原则/)\n* [拉取请求](#拉取请求/)\n * [创建拉取请求](#创建拉取请求/)\n * [拉取请求信息](#拉取请求信息/)\n * [标题](#标题/)\n * [解决](#解决/)\n * [更改](#更改/)\n * [更改的截图](#更改的截图/)\n * [PR 检查列表](#pr-检查列表/)\n * [变基和解决冲突](#变基和解决冲突/)\n * [讨论和修改](#讨论和修改/)\n\n***\n\n# 关于 Issues\n\np5.js 的 GitHub 存储库上的大部分活动都发生在 Issues 板块，Issues 很可能也是你开始贡献过程的地方。\n\n## 所谓 “Issues” 是指什么？\n\n\n\n“Issues” 是 GitHub 上描述问题的帖子的通用名称。这个 Issue 可以是一份错误报告，一个添加新功能的请求、一个讨论、或任何与 p5.js 资料库开发有关的帖子。任意 GitHub 账号，乃至于机器人，都可以在每个问题下面评论！这里就是贡献者们讨论与本项目开发相关议题的地方。\n\n尽管提出问题可以有各种各样的理由，但我们通常只使用问题来讨论与 p5.js 源代码开发相关的主题。其他例如调试你个人的代码、邀请合作者加入你个人的项目或其他与上述主题无关的内容应该在[论坛](https://discourse.processing.com)或其他诸如[Discord](https://discord.gg/SHQ8dH25r9/)之类平台上讨论。\n\n我们创建了简单易用的 Issue 模板，助你判定某一主题到底是 GitHub 的问题，还是该在其他地方发布的问题！\n\n## Issue 模板\n\np5.js 的 Issue 模板不仅能助力管理员和维护者更好地理解和审核问题，更能助你更便捷地提出问题并获得答复。\n\n\n\n若要提交新的 Issue，请点进 p5.js 存储库的 ”Issues“ 选项卡，然后点击右侧的 “New issue”按钮。点击后，将显示几个不同的选项，每个选项对应一个相关的 Issue 模板，或者将你重新定向到其他适当的地方提交你的 Issue。建议你选择最贴近需求的选项，以确保你的问题能够迅速得到关注。\n\n\n\n### [抓到个 bug](https://github.com/processing/p5.js/issues/new?assignees=%5C\\&labels=Bug%5C\\&projects=%5C\\&template=found-a-bug.yml)\n\n当你在使用 p5.js 时遇到潜在的错误或某些现象与文档描述不符时，请使用[这个模版](https://github.com/processing/p5.js/issues/new?assignees=%5C\\&labels=Bug%5C\\&projects=%5C\\&template=found-a-bug.yml)。请注意，如果你是在调试代码且认为可能是你自己的代码出了问题，则应该先在[论坛](https://discourse.processing.org)上提问。\n\n该模板有以下字段需要填写：\n\n1. *p5.js 中与之最相关的子领域是？* - 回答该问题将触发自动标记功能，为问题打上相关的[标签](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)，这有助于我们更好地识别和回应你的问题。\n2. *p5.js 版本* - 你可以在`<script>`标签的链接中或者在 p5.js/p5.min.js 文件的第一行找到 p5.js 的版本号。它的格式类似于`1.4.2`（由三个句点分隔的数字）。\n3. *Web 浏览器及版本* - 该信息有助于我们区分代码在不同浏览器中的行为差异。浏览器版本号可以根据下方表格中对应不同浏览器的步骤找到。\n\n<table>\n <tr>\n <td>\n Chrome\n </td>\n\n <td>\n Firefox\n </td>\n\n <td>\n Safari\n </td>\n </tr>\n\n <tr>\n <td>\n 在地址栏中输入 `chrome://version`\n </td>\n\n <td>\n 在地址栏中输入 `about:support`\n </td>\n\n <td>\n 打开顶部 “Safari” 菜单, 选择 “关于 Safari”\n </td>\n </tr>\n</table>\n\n4. *操作系统* - 如可能，请提供操作系统的版本号，例如`macOS 12.5`。某些错误也可能源于操作系统。\n5. *重现错误所需步骤* - 这可能是最重要的信息。请详细列出重现你所遇到的错误的步骤。贴出能够展示问题产生的简单示例代码可以让其他人更容易重现你的错误并制定解决方案。\n\n**重现错误是最关键的**该模板中的许多字段都旨在能够重现 Bug。你提供的关于草图环境的信息越多、重现问题的步骤越丰富，别人也就越容易理解你的问题并探索解决方案。\n\n**请尽可能提供详细的信息，避免使用泛泛的陈述**。例如，不要说 “image()函数不好用了”，而要说得更具体，比如：“image()函数无法以正确的尺寸显示加载的 GIF 图像”。描述以下两个方面可以使你的问题描述更加清晰：\n\n1. 你期望你分享的示例代码执行什么样的行为（预期行为）；\n2. 示例代码实际上做了什么（实际行为）。\n\n如果你希望为你刚刚报告的错误贡献修复代码，你可以在描述中说明。如果你可以提供一个简单的建议来修复你所描述的错误，那对于问题评审者来说将非常有帮助，因为他们需要知道你需要多少支持来贡献修复代码。\n\n**你不应该在没有相应问题或在问题获得实施批准之前提交拉取请求（或开始进行代码更改）**，这是因为无法保证你的建议将被接受，而你所做的工作最终可能不会被合并。\n\nBug 报告只有在至少一名[领域管理员或维护者](https://github.com/processing/p5.js#stewards)核准的情况下才会被接受修复。在此之后，拉取请求的工作才会开始。\n\n### [增强现有功能](https://github.com/processing/p5.js/issues/new?assignees=%5C\\&labels=Enhancement%5C\\&projects=%5C\\&template=existing-feature-enhancement.yml)\n\n如果你想提议修改 p5.js 的现有功能（函数、常量、渲染等）或为现有功能添加新规格，则应使用此模板。比如，如果你想为`color()`函数和其他接受颜色的函数添加一种新的定义颜色的方式，就应该使用本模板。\n\n该模板有以下字段需要填写：\n\n1. *提高无障碍性* - 这是一个必填项目，你需要在此处说明你建议加强的功能将会如何使得 p5.js 对于那些在创意和科技领域长期被边缘化的人群具备[更高的无障碍性](../access/)。通常来讲，**如未填写此项，提案将被拒绝**。但你也可以填写“我不确定”，邀请社区的其他成员集思广益，帮你论证该增强功能可以怎样提高 p5.js 的无障碍性。\n2. *p5.js 中最合适的子领域是什么？* - 这可以帮助我们锁定并回应你的问题。你的答复还将触发自动标记功能，使用相关的[标签](../issue_labels/)标记该问题。\n3. *功能增强详情* - 在这里描述你对功能增强的建议。一个好的功能增强建议通常包括清晰的用例：这个功能增强是什么、何时使用、如何使用以及为什么需要这个功能增强。\n\n要使功能增强建议被接受，必须经过至少一名[领域管理员或维护者](https://github.com/processing/p5.js#stewards)批准，而后才会开始处理拉取请求。\n\n**如果与拉取请求相对应的问题不存在或问题尚未获批，则不应提交拉取请求（或开始更改代码）**，因为提案是不一定会被接受的。提案未被接受时提交的拉取请求在问题获批前都会被关闭。\n\n### [新功能开发请求](https://github.com/processing/p5.js/issues/new?assignees=%5C\\&labels=Feature+Request%5C\\&projects=%5C\\&template=feature-request.yml)\n\n该模板适用于提出为 p5.js 加入新功能的建议。例如，创建一个新的 `createTable` 函数，用于绘制原生的 HTML `<table>` 页面元素。有些提议可能与现有的功能增强建议趋同，在这种情况下，就在两种模版中选择你认为更合适的。\n\n同样，本模板的表单字段与“增强现有功能”部分的字段也几乎一致。有关如何填写每个字段的详情，请参考[上一节](#existing-feature-enchancement)。\n\n新功能的开发请求只有在至少两名[领域管理员或维护者](https://github.com/processing/p5.js#stewards)核准的情况下才会被批准。在此之后，拉取请求的工作才会开始。\n\n**如果与拉取请求相对应的问题不存在或问题尚未获批，则不应提交拉取请求（或开始更改代码）**，因为提案是不一定会被接受的。提案未被接受时提交的拉取请求在问题获批前都会被关闭。\n\n### [发起讨论](https://github.com/processing/p5.js/issues/new?assignees=%5C\\&labels=Discussion%5C\\&projects=%5C\\&template=discussion.yml)\n\n该模板适用于你要提交的问题不适用上述所有其他模版的情况。在现实中，这种情况应该比较少见。如，关于是否在 p5.js 中采用特定的 Web API 功能应该作为一个[新功能开发请求](#new-feature-request)来提交；而在各种颜色函数中添加额外的颜色模式则应作为[增强现有功能](#existing-feature-enchancement)来提交；若要发布一则你组织的本地创意编程活动的公告，应该去论坛上发帖，并通过 Processing Foundation 寻求支持或宣传。\n\n在发启讨论问题时，你可以使用侧面板上的 “Labels（标签）” 选项来添加更多相关标签，以便将你的问题引导到相关领域。此模板本身仅包含一个基本的文本字段。通过[这个链接](https://github.com/processing/p5.js/issues/6517/)可以查看讨论问题的范例。\n\n[**⬆ 回到顶部**](#贡献者指南/)\n\n***\n\n# 修改 p5.js 代码库\n\n## 必备条件\n\n要继续进行，你至少应该对使用命令行、git、node.js（至少 v18 及以上版本）有初步了解，并且已经建立了本地开发环境。\n\n## 介绍\n\n当问题已讨论过，解决方案已经批准，并且你愿意进行代码更改，就可以着手修改代码库了。\n\n同样的，如果你遇到了一个问题、参与讨论了一个问题且管理员已经批准了解决方案，然而问题的原作者和其他社区成员却没有表态乐意处理该问题，你就可以自愿提交一份贡献申请，让管理员将该问题分配给你。\n\n**你不应该“插队”** 提交拉取请求，以期插手一个他人已经有意提交贡献或已经分配给他人的问题。我们永远会根据\"先来先得\"的原则接受一个问题的代码贡献申请。\n\n如果你为一个问题提交了拉取请求，但同时还有其他人在处理同一个问题，你的拉取请求将会被关闭。如果你发现某个已分配给某人的问题已经几个月都没有动静，你可以就该问题礼貌地询问进展如何以及是否需要帮助。我们通常为大家编写贡献留出相当长的时间，因为我们理解大多数人是志愿工作，或者对一些人来说编写功能确实需要很长时间。\n\n同样地，你应该按照自己的节奏工作，并相信我们不会为处理某个问题设定严格的时间限制。话虽如此，如果你在代码贡献的任何方面遇到困难，别犹豫，马上在问题内求助。管理员、维护人员以及其他社区成员都会尽力为你提供指导！\n\n## 开发者快速入门指南\n\n如果你想作为开发者参与 p5.js 代码库的开发工作或提交贡献，无论是直接改进 p5.js 还是改进其诸如 [Friendly Error Systems](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md) 之类的子项目，都可按以下步骤操作：\n\n1. [创建一个 p5.js 的 fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo/)\n\n2. [将你创建的 fork 克隆到你的电脑](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/)\n\n3. [使用以下命令添加 upstream](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/)\n ```\n git remote add upstream https://github.com/processing/p5.js\n ```\n\n4. 确认你的电脑上已经安装了 [NodeJs](https://nodejs.org/en/download/)。可以通过以下命令来确认：\n\n ```\n node -v\n ```\n\n5. 使用以下命令安装依赖项:\n\n ```\n npm ci\n ```\n\n6. 使用以下命令从 `main` 分支创建一个具有描述性分支名称的 git 分支：\n\n ```\n git checkout -b [branch_name]\n ```\n\n7. 当你开始对代码库进行更改时，应频繁进行测试（尽管测试耗时，但能确保现有行为未被改坏）。\n\n ```\n npm test\n ```\n\n8. 如果你正在添加新功能或在增强现有功能，需添加单元测试。\n\n9. 完成后，你可以提交更改并创建[拉取请求](https://p5js.org/contributor-docs/#/./contributor_guidelines?id=pull-requests)。\n\n## 使用 GitHub 的编辑功能\n\n在 GitHub 网页界面上浏览文件时，文件内容顶部附近有一个铅笔图标按钮。该按钮的作用是启动 GitHub 自带的便捷编辑功能，可用于简化以下我们将会介绍的诸多流程。你可以使用它来快捷地编辑当前浏览的文件。\n\n\n\n但是，除非要进行的更改非常简单，否则不建议使用该功能。主要是因为，如要对源代码进行较复杂的更改，则应该先在本地进行构建和测试，然后再提交拉取请求。对于大多数人来说，使用本地开发环境通常比该编辑功能提供的基本编辑环境更为流畅。\n\n## Fork p5.js 并在你的 Fork 中工作\n\n第一步是 Fork p5.js 存储库。在开源项目中，Fork 具有特定的含义，但对于我们的目的来说，它意味着创建存储库的副本并将其存储在你自己的 GitHub 帐户中。要 Fork 一个存储库，只需点击页面顶部附近的\"Fork\"按钮，GitHub 将在你的帐户中创建存储库的副本。\n\n\n\n从你的 p5.js 存储库 Fork 进行工作是必要的，因为你可能没有直接写入官方 p5.js 存储库的权限，而在 Fork 上工作可以让你进行更改，然后将其提交回官方存储库。\n\n### 使用 GitHub 桌面版\n\nGitHub 桌面版是通过图形用户界面来使用 git 的程序，它不需要你在终端输入命令。如果你是 git 新手， GitHub 桌面版会是很好的选择，并且你可以在 GitHub 桌面版和终端之间随意切换。\n\n首先，下载并安装[GitHub 桌面版](https://desktop.github.com/)。安装成功后，打开应用程序。根据提示登录你的 GitHub 账户。登录成功后，你可以看到你的项目，包括你 fork 的 p5.js。选择名为：`你的用户名/p5.js` 的项目，然后点击蓝色 “Clone” 按钮。根据提示选择项目存储位置，你可以更改存储位置也可以保留默认选项并继续。\n\n\n\n克隆成功后，你需要选择使用该 fork 的目的。请选择 “To contribute to the parent project”，然后点击 “Continue”。\n\n\n\n### 使用 git 命令行界面\n\n创建好 fork 之后，去 fork 页面点击绿色 “Code” 按钮复制 git 链接。链接的格式是这样：`https://github.com/limzykenneth/p5.js.git`。\n\n\n\n然后在本地环境中打开命令行，并克隆这个存储库。简单地说，“克隆” 就是将仓库副本下载到本地计算机上。在你想要存储 p5.js 源代码文件夹的文件夹中运行以下命令：\n\n```\ngit clone [git_url]\n```\n\n将 `[git_url]` 替换为你在上一步复制的 git 链接。这可能需要等几分钟，具体多久取决于你的网速，你可以去泡杯咖啡。克隆完成后，用你喜欢的文本编辑器打开名为 `p5.js` 的文件夹，就可以开始查看了。\n\n## 代码库拆解\n\n在 p5.js 文件夹中，你将会遇到一些关键的文件和文件夹，具体如下：\n\n* `src` - 最终生成 `p5.js` 和 `p5.min.js` 文件的所有代码都存放于此。\n* [`test`](../unit_testing/) - 存放单元测试代码和测试所有文档示例代码的位置。\n* `tasks` - 存放详细的自定义构建代码的位置。\n* `Gruntfile.js` - 主要的构建配置文件。\n* `contributor_docs` - 存放文档和其他贡献者文档的位置。\n\n其他文件和文件夹要么是配置文件，要么是其他类型的支持文件，大多数情况下，你不需要对它们做任何修改。\n\n## 构建设置\n\n为了构建和测试运行 p5.js，你需要先创建本地项目文件夹。假设你已经安装了 `Node.js`，请运行如下代码：\n\n```\nnpm ci\n```\n\n这可能需要一些时间，因为 npm 会下载所有需要的依赖项。但是，一旦下载完成，就全部设置好了。非常简单，对吧？\n\n## Git 工作流程\n\n现在，你可以根据自己的需要做更改了。关于存储库其他部分的详情，以及如何做相应修改，请参考接下来的子章节。若要开始，请运行：\n\n```\nnpm test\n```\n\n从头开始构建 p5.js 并运行所有单元测试，这整个过程应该是不会报错的。如果你只是想构建仓库而不运行测试，可以运行：\n\n```\nnpm run build\n```\n\n以上任何一个命令都会在 `lib/` 文件夹中创建 `p5.js` 和 `p5.min.js` 文件。如果需要，你可以用这些构建好的文件来做测试。\n\n接下来，我们建议你开始工作之前在主分支 `main` 上创建一个分支。在 git 中，分支顾名思义就是存储库的一个分支版本，你可以在分支上添加提交而不会影响主分支或其他分支。在分支上，你可以同时处理多个功能（通过使用多个不同的分支），而不用担心搞砸之后会影响到主分支。\n\n如果使用 GitHub 桌面版，可以点击窗口上方的 “Current Branch” 按钮来创建分支。你可以在这里切换分支，或输入分支名创建一个新分支。在这里，我们输入一个分支名描述一下即将做的更改，然后点击 “Create New Branch”。\n\n\n\n如果使用终端，在主分支上运行 `git checkout -b branch_name`，将 `branch_name` 替换为描述性的内容，然后你就在一个新的分支上了。\n\n我们建议你在做更改时经常运行 `npm test`， 尤其是在修改源代码的时候。运行这个命令会花费一些时间，但它能确保你的修改不会破坏当前行为。在参照以下描述提交更改之前，你应该先运行 `npm test`。\n\n一旦你对代码库做了更改，就需要将它提交到 git。一次提交是保存在 git 存储库中的一系列更改，它本质上记录了提交时仓库中文件的当前状态。\n\n可能你会问你应该每隔多久向 git 做一次提交？通常情况下，我们建议你经常提交，而不是将多个更改合并为一次提交。好的做法是，每完成一个可以用一句话描述的子任务就做一次提交。\n\n要从 GitHub 桌面版提交当前所有更改，请在更改完成后打开该应用程序。左侧边栏会显示你更改过的文件，右侧显示每个文件中的更改详情。在窗口左下角，用户图标旁边的区域中输入简要的描述，这就是本次提交的标题。你可以在下面的描述区域中做进一步阐述或留白，点击蓝色的 \"Commit\" 按钮以完成更改。\n\n\n\n要从终端提交当前所有更改，请运行以下命令：\n\n1. 运行以下命令，检查是否只列出了你更改过的文件。\n\n```\ngit status\n```\n\n如果列出了你没有更改过的文件，你需要将它们 [恢复](https://git-scm.com/docs/git-restore/) 到原始状态，或者确保这些更改是你想要的。如需查看每个文件的更改详情，请运行以下命令：\n\n```\ngit diff\n```\n\n不想要的文件更改，不要提交到 PR 中。\n\n2. 运行以下命令，将所有更改添加到 git 暂存区\n\n```\ngit add .\n```\n\n3. 运行以下命令，将所有更改提交到 git\n\n```\ngit commit -m \"[your_commit_message]\"\n```\n\n将 `[your_commit_message]` 替换为描述本次更改相关的信息，避免使用宽泛的陈述。例如：不用 “文档修复 1”，而用 “给 circle() 函数添加文档示例”\n\n```\ngit commit -m \"Add documentation example to circle() function\"\n```\n\n所有提交都重复以上步骤，同时定期运行 `npm test` 以确保一切正常运行。\n\n### 源代码\n\n如果你要处理源代码，并且也清楚你要处理 p5.js 的哪些功能，好的开始是去看文档。因为 p5.js 文档中，每个已记录功能的底部，都有其源代码的链接。\n\n\n\n### 单元测试\n\n如果你要进行单元测试，请参阅[这里](../unit_testing/)。需要注意的是，对于任何功能强化、功能新增和错误修复，都应该在 PR 中添加相关的单元测试。\n\n### 内联文档\n\n如果你要处理内联文档，请参阅[这里](../inline_documentation/)。\n\n### 无障碍\n\n如果你要处理无障碍功能，请参阅[这里](../web_accessibility/)。关于友好的错误系统，请参阅[这里](../friendly_error_system/)。\n\n## 代码规范\n\np5.js 的代码规范或者代码风格由 [ESLlint](https://eslint.org/) 执行。任何 git 提交和拉取请求在被接受之前，都必须通过 ESLint 代码检查。要遵循正确的代码规范，最简单方法是在文本编辑器中使用可用的 ESLint 插件，它可以高亮显示 ESLint 检查到的错误（适用于大多数流行的文本编辑器）。\n\n## 设计原则\n\n开发 p5.js 的功能时，牢记 p5.js 的设计原则是很重要的。我们的优先级可能与其他项目的优先级不同，所以如果你来自其他项目，建议你先熟悉 p5.js 的设计原则。\n\n* **无障碍性**：我们将无障碍性置于首位，在做决定时，必须考虑如何提升历史上被边缘化的群体的无障碍性性。在我们的无障碍报告中可以了解更多相关信息。\n\n* **适合初学者**：p5.js API 适合初学者，它使用前沿的 HTML5/Canvas/DOM API ，为创建交互性视觉内容提供了低门槛。\n\n* **教育性**：p5.js 专注于支持教育用途的 API 和课程，包括 API 的完整参考和支持示例，还有介绍核心创意编程原则的教程和示例课程，思路清晰，井然有序。\n\n* **JavaScript 及其社区**：为了使初学者更容易接触到 Web 开发实践，p5.js 通过对合适的 JavaScript 设计模式和使用进行建模，并在必要时进行提取。作为一个开源库，p5.js 还将更广泛的 JavaScript 社区纳入其创作、文档和传播当中。\n\n* **Processing 及其社区**：p5.js 受到 Processing 语言及其社区的启发，致力于将 Processing Java 到 JavaScript 的转换变得简单而清晰。\n\n[**⬆ 回到顶部**](#贡献者指南/)\n\n# 拉取请求\n\n当你完成了包括单元测试在内的所有更改，运行过 `npm test` 没有报错，并且已经提交了更改，你就可以开始准备拉取请求，将你的新提交合并到 p5.js 官方仓库中。一个拉取请求，更正式地说，是对一个仓库（当前情况是指 p5.js 官方存储库）提出的请求，请求从另一个仓库（当前情况是指 fork 的 p5.js 仓库）拉取或合并更改到其提交历史中。\n\n## 创建拉取请求\n\n首先，将新的提交推送到你 fork 的 p5.js 中，你可以理解为将更改上传到你的 fork。\n\n如果使用 GitHub 桌面版，在窗口顶部用于切换分支的按钮的右侧，有一个按钮可以将你的更改推送到 GitHub，点击这个按钮推送你的更改。\n\n\n\n一旦代码上传完毕，你将会看到一个按钮提示你创建拉取请求。点击一下这个按钮会显示预览，预览中包含另一个按钮，这个按钮才可以真正地创建请求。点击 \"Create Pull Request\" 按钮创建拉取请求。\n\n\n\n如果使用终端，请运行以下代码：\n\n```\ngit push -u origin [分支名称]\n```\n\n推送完成后，你可能会在终端里看到一个链接，可以点击它创建拉取请求。如果没有，你可以在浏览器中导航到你的 fork，通过文件列表顶部的下拉按钮切换到你正在工作的分支，然后点击 “Contribute”，接着点击 \"Open pull request\"。\n\n\n\n当你访问 p5.js 的 Github 仓库时，你可能也会看到一个创建拉取请求的按钮。点击它也可以创建一个新的拉取请求。\n\n\n\n### 拉取请求信息\n\n\n\n在提交拉取请求之前，你需要填写拉取请求模板。\n\n### 标题\n\n拉取请求的标题应简要描述更改的内容，再次提醒要避免宽泛的陈述。\n\n### 解决\n\n在模板中，有这样一行文字：`解决 #[在此添加 issue 编号]`，你需要将 `[在此添加 issue 编号]` 替换为你正在处理/修复的 issue 的 issue 编号 [看上面](#关于issue/)（例如，`解决 #1234`）。这样可以确保 PR 合并后，该 issue 会自动关闭。如果你不希望 PR 合并后自动关闭该 issue（可能因为有更多的更改将在其他 PR 中提交），请将 `解决` 改为 `处理`。\n\n### 更改\n\n清晰地描述你在 PR 中所做的更改，包括任何与审阅者相关的实现细节和决策。\n\n### 更改的截图\n\n是否需要上传截图，视情况而定。当更改涉及到 p5.js 在画布上呈现可视化内容时，就需要上传截图。请注意，不是文本编辑器的截图，而是做过更改后的页面预览截图。\n\n### PR 检查列表\n\n检查列表包含一些相关的选项，将 `[ ]` 替换为 `[x]` 来勾选与你的更改有关的选项。\n\n勾选完成后，点击 “Create pull request”。\n\n### 变基和解决冲突\n\n\n\n现在你应该检查已提交的拉取请求，并注意以下几点：\n\n1. 提交的次数应该与你在这个 PR 上所做的提交次数相匹配，也就是说，如果你在这个 PR 上做了两次提交，\"Commits\" 选项卡中应该只显示两个提交记录。\n2. \"Files changed\" 选项卡只展示你的更改与 p5.js 仓库之间的差异。\n3. 靠近页面底部，应该可以看到 \"This branch has no conflicts with the base branch\"， 而不是 \"This branch has conflicts that must be resolved\"。\n\n如果以上任何一项不正确（提交数量多于预期或存在冲突），你可能需要 [变基](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) 或者帮忙解决冲突。这里的冲突是指：你所更改的文件，近期已经有过更新，git 不确定该保留或者忽略哪组修改。如果你不确定如何解决这些 issues，请联系我们，我们将指导你完成。基本操作步骤如下：\n\n有时，GitHub 会显示 \"Resolve Conflicts\" 按钮，允许你直接在浏览器中解决冲突。\n\n\n\n冲突展示在 `<<<<<<<` 和 `>>>>>>>` 之间， 被 `=======` 隔开。前半部分是你自己写的代码，后半部分是主分支中已经变更过的代码。\n\n\n\n删除冲突标记，在 PR 中保留最终需要保留的代码。所有冲突都解决好之后，点击 \"Mark as resolved\"。\n\n\n\n所有文件的冲突都解决好之后，就可以提交更改了。\n\n\n\n有时候，冲突对于 Github 来说在网页上展示起来太过复杂。在这种情况下，或者如果你更喜欢手动操作，你也可以在本地解决冲突：\n\n1. 运行 `git remote add upstream https://github.com/processing/p5.js`\n2. 运行 `git fetch upstream`\n3. 运行 `git rebase upstream/main`\n4. 可能会有冲突！如果只涉及到 `lib/p5.js` 和 `lib/p5.min.js`，就很容易解决，只需重新构建项目。如果其他文件存在冲突，并且你不确定如何解决，去寻求帮助吧！\n\n```\nnpm test\ngit add -u\ngit rebase --continue\n```\n\n5. 运行 `git push`\n\n上述步骤完成后，上面的检查列表可能会清空，如果没有清空，我们将指导你完成必要的修复。\n\n## 讨论和修改\n\n现在你已经提交了 PR，管理员或维护者将会进行审核。可能需要几天时间，管理员才能给你回复，请耐心等待。在此期间，你可以看看其他尚未解决的 issues。\n\n一旦管理员审核了你的 PR，可能会有两种结果：1. 你的 PR 被批准并合并，太棒了！2. 管理员可能会针对你的 PR 提出一些问题，或者要求你做一些修改。如果是后者，不要惊慌，这是完全正常的，并且管理员们总是愿意帮助你完成你的贡献！\n\n如果你的 PR 需要进一步更改，并且你能够完成这些更改，请按照之前的[相同流程](#git-工作流程/) 进行操作。但务必在本地仓库副本的相关分支进行修改、提交， 并将提交推送到你 fork 的远程仓库。一旦提交成功，新的提交会自动显示在你的 PR 中。然后在 PR 中留言，让审阅者知道你已经按要求做了更改。如果不需要额外的更改，你的 PR 将被合并！\n\n[**⬆ 回到顶部**](#贡献者指南/)\n"},"创建一个新库\n":{"relativeUrl":"/contribute/creating_libraries","description":"p5.js库可以是扩展或添加到p5.js核心功能的任何JavaScript代码。有两种类型的库。核心库（p5.Sound）是p5.js分发的一部分，而贡献库是由p5.js社区的成员开发、拥有和维护的。\n\n如果您创建了一个库并希望将其包含在[p5js.org/libraries](https://p5js.org/libraries/)页面上，请提交[此表单](https://docs.google.com/forms/d/e/1FAIpQLSdWWb95cfvosaIFI7msA7XC5zOEVsNruaA5klN1jH95ESJVcw/viewform/)。\n\n\n\n有许多不同的编写和使用JavaScript的方法，所以我们将此留给您。以下是一些关于使您的库与p5.js良好配合的注意事项。\n\n## 代码\n\n### 您可以通过向p5.prototype添加方法来扩展p5核心功能。\n\n例如，dom.js中的以下代码扩展了p5，添加了一个`createImg()`方法，该方法在DOM中添加了一个[HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/)。\n\n```js\np5.prototype.createImg = function (src) {\n const elt = document.createElement('img');\n //const elt = new Image; // 另一种更短的替代方法。\n\n elt.src = src;\n return addElement(elt, this);\n};\n```\n\n当DOM库包含在项目中时，可以像调用`createCanvas()`或`background()`一样调用`createImg()`。\n\n### 对于内部辅助函数，请使用私有函数。\n\n这些函数不打算由用户调用。在上面的示例中，`addElement()`是[dom.js](https://github.com/processing/p5.js/blob/main/src/dom/dom.js)中的内部函数。但它并未公开绑定到`p5.prototype`。\n\n### 您还可以通过向它们的原型添加方法来扩展p5.js类。\n\n在下面的示例中，`p5.Element.prototype`通过`html()`方法进行扩展，该方法设置元素的内部HTML。\n\n```js\np5.Element.prototype.html = function (html) {\n this.elt.innerHTML = html;\n //this.elt.textContent = html; // 使用textContent作为innerHTML的更安全替代方法。\n};\n```\n\n### 使用registerPreloadMethod()在preload()中注册可以在其中调用的方法的名称。\n\n通常，对于某些异步函数（例如加载声音、图像或其他外部文件），都会提供同步和异步选项。例如，`loadStrings(path, [callback])`接受可选的第二个回调参数 - 在loadStrings函数完成后调用的函数。但是，用户也可以在`preload()`中调用loadStrings而不使用回调，并且p5.js将等待直到`preload()`中的所有内容完成后再继续执行`setup()`。如果您想注册自己的方法，请使用要注册的方法的名称调用`registerPreloadMethod()`，并传递该方法所属的原型对象 ~~（默认为p5.prototype）~~ 。下面的示例显示了“soundfile.js”（p5.sound库）中注册`loadSound()`的一行。\n\n```js\np5.prototype.registerPreloadMethod('loadSound', p5.prototype);\n```\n\n### 异步函数的示例，用于 *callback* 和 **preload()**。\n\n```js\n// 用于在preload()中或与回调一起使用的异步函数示例。\np5.prototype.getData = function (callback) {\n\n // 创建一个对象，该对象将从异步函数克隆数据并返回。\n // 我们将在下面更新该对象，而不是覆盖/重新分配它。\n // 对于preload()来说，保持原始指针/引用非常重要。\n // 使用const声明变量可确保它们不会被错误地重新分配。\n const ret = {};\n\n // 你正在处理的一些异步函数。\n loadDataFromSpace(function (data) {\n\n // 遍历data中的属性。\n for (let prop in data) {\n // 将ret的属性设置为data的属性（克隆）。\n // 也就是说，使用接收到的数据更新空ret对象的属性。\n // 但是，不能使用另一个对象覆盖/重新分配ret。\n // 而是需要更新其内容。\n ret[prop] = data[prop];\n }\n // 检查callback是否确实是一个函数。\n if (typeof callback == 'function') {\n callback(data); // 执行回调。\n }\n });\n // 返回使用上面的数据填充的对象。\n return ret;\n};\n```\n\n### 使用 **registerMethod()** 在不同的时机注册应由 *p5* 调用的函数。\n\n```js\np5.prototype.doRemoveStuff = function () { \n // 库的清理工作\n};\np5.prototype.registerMethod('remove', p5.prototype.doRemoveStuff);\n```\n\n您可以注册的方法名称包括以下列表。请注意，您可能需要在注册之前定义该函数。\n\n* **pre** - 在`draw()`开始时调用。它可以影响绘制。\n* **post** - 在`draw()`结束时调用。\n* **remove** - 在调用`remove()`时调用。\n* **init** - 在首次初始化sketch时调用，正好在执行sketch初始化函数之前（即传递给`p5`构造函数的函数）。这也在任何全局模式设置之前调用，因此您的库可以向sketch添加任何内容，并且如果激活全局模式，则会自动复制到`window`。\n\n即将发布更多信息，大致与此列表相一致：\n[https://github.com/processing/processing/wiki/Library-Basics#library-methods](https://github.com/processing/processing/wiki/Library-Basics#library-methods)\n\n### 您还可以创建自己的类。\n\n您的库可能根本不会扩展p5或p5类，而是只提供额外的类，可以与库一起实例化和使用。或者它可以两者都做。\n\n## 命名\n\n* **不要覆盖p5函数或属性。** 当您扩展p5.prototype时，要小心不要使用现有属性或函数的名称。您可以使用[hasOwnProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty/)来测试名称。例如，将以下行放在库文件的顶部将打印出true，因为`rect()`方法存在：\n\n ```js\n console.log(p5.prototype.hasOwnProperty('rect'));\n ```\n\n* **类似地，不要覆盖p5类的函数或属性。** 如果您正在扩展p5.Image、p5.Vector、p5.Element等，请按照上述协议进行操作。\n\n* **p5.js有两种模式，全局模式和实例模式。** 在全局模式下，所有的p5属性和方法都绑定到window对象，允许用户调用诸如`background()`之类的方法而无需加任何前缀。然而，这意味着您需要小心不要覆盖原生的JavaScript功能。您可以通过在控制台中键入它们或通过快速的Google搜索来测试现有的JS名称。\n\n* **类通常以大写字母开头，方法和属性以小写字母开头。** 在p5中，类以p5为前缀。我们希望将此命名空间保留给p5核心类，因此在创建自己的类时，**不要包含p5.前缀作为类名**。您可以创建自己的前缀，或者只给它们一个非前缀的名称。\n\n* **p5.js库文件名也以p5为前缀，但下一个单词为小写**，以区分它们与类。例如，p5.sound.js。我们鼓励您遵循此格式为文件命名。\n\n## 打包\n\n* **创建一个包含您的库的单个JS文件。** 这样可以方便用户将其链接到其项目中。您还可以考虑提供正常JS文件和[压缩](http://jscompress.com/)版本的选项，以加快加载速度。\n\n* **贡献的库由创建者托管、文档化和维护。** 这可以在GitHub、一个单独的网站或其他地方进行。\n\n* **文档至关重要！** 您的库的文档应该放在某个易于找到的位置，供下载和使用您的库的用户使用。贡献的库的文档将不会包含在主要的p5.js参考文档中，但您可能希望遵循类似的格式。请参阅这些示例：[库概述页面](https://p5js.org/reference/libraries/p5.sound)、[类概述页面](https://p5js.org/reference/p5.Vector)和[方法页面](https://p5js.org/reference/p5/arc/)。\n\n* **示例也很棒！** 它们向人们展示了您的库能做什么。由于这全部是JavaScript，人们可以在下载之前在线运行它们。[jsfiddle](http://jsfiddle.net/)和[codepen](http://codepen.io)是两个很好的简单选项，可以用来托管示例。\n\n* **告诉我们吧！** 一旦您的库准备好发布，发送一封电子邮件至[hello@p5js.org](mailto:hello@p5js.org)，附上链接和一些信息。我们将在[libraries page](https://p5js.org/libraries/)上包含它！\n"},"文档风格指南\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* 一个帮助我们保持文档风格一致的参考指南。 */}\n\n\n\n你好！欢迎来到 p5.js 文档编写指南。本文档是以下资源的混合：\n\n* Ruby on Rails [API 文档指南](https://guides.rubyonrails.org/api_documentation_guidelines.html) (CC BY-SA 4.0)\n* WordPress 关于[可访问性](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/)和[包容性](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/)的文档指南 (CC0)\n* Airbnb [JavaScript 风格指南](https://airbnb.io/javascript/) (MIT)\n\n我们的社区庞大而多样。许多人使用 p5.js 学习编程，其中很大一部分是 K-12 年级的学生。阅读本指南后，你将了解：\n\n* 如何编写有效、包容和易于访问的文档。\n* 如何为文档编写简单的代码示例。\n\n## 目录\n\n### 写作\n\n* [YUIDoc](#yuidoc)\n* [英语](#英语/)\n* [牛津逗号](#牛津逗号/)\n* [措辞](#措辞/)\n* [无偏见的文档](#无偏见的文档/)\n* [可访问性和残障](#可访问性和残障/)\n\n### 代码\n\n* [代码示例](#代码示例/)\n* [注释](#注释/)\n* [空白](#空白/)\n* [分号](#分号/)\n* [命名约定](#命名约定/)\n* [变量](#变量/)\n* [字符串](#字符串/)\n* [布尔运算符](#布尔运算符/)\n* [条件语句](#条件语句/)\n* [迭代](#迭代/)\n* [对象](#对象/)\n* [数组](#数组/)\n* [函数](#函数/)\n* [箭头函数](#箭头函数/)\n* [链式调用](#链式调用/)\n* [类](#类/)\n* [资源](#资源/)\n\n## YUIDoc\n\n我们使用 YUIDoc 来生成 p5.js API 文档。要生成文档，请切换到 p5.js 根目录，运行 `npm install`，然后执行：\n\n```\n$ npm run grunt yui:dev\n```\n\n输出将出现在 docs/reference 目录中。更多信息请参考[内联文档指南](../contributing_to_the_p5js_reference/)。\n\n**[⬆ 返回顶部](#目录/)**\n\n## 英语\n\n请使用美式英语（color、center、modularize 等）。参见[美式和英式英语拼写差异列表](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/)。\n\n**[⬆ 返回顶部](#目录/)**\n\n## 牛津逗号\n\n请使用[牛津逗号](https://en.wikipedia.org/wiki/Serial_comma/)（\"red, white, and blue\"，而不是\"red, white and blue\"）。\n\n**[⬆ 返回顶部](#目录/)**\n\n## 措辞\n\n写简单、陈述性的句子。简洁是加分项：直奔主题。\n\n使用现在时态：\"Returns an object that...\"，而不是\"Returned an object that...\"或\"Will return an object that...\"。\n\n注释以大写字母开头。遵循常规标点规则：\n\n```javascript\n// Draws a fractal from a Julia set.\nfunction drawFractal(c, radius, maxIter) {\n // ...\n}\n```\n\n明确和隐式地传达当前的做事方式。使用本指南中推荐的惯用语。如果需要，重新排序部分以强调首选方法。文档应该是最佳实践的典范，并且对初学者友好。\n\n文档必须简洁但全面。探索并记录边缘情况。每种参数组合会发生什么？初学者的代码中最可能出现哪些错误？\n\n正确拼写名称：p5.js、CSS、HTML、JavaScript、WebGL。如有疑问，请参考官方文档等权威来源。\n\n**[⬆ 返回顶部](#目录/)**\n\n## 无偏见的文档\n\n编写文档时不要对任何类型的人有偏见。在记录特别要求高/敏感的主题时，花时间自己学习一下。确保你的写作不会无意中伤害或冒犯他人。\n\n在编写无偏见的文档时：\n\n* 包容所有性别认同和表达、性取向、种族、民族、语言、神经类型、体型、残障、阶级、宗教、文化、亚文化、政治观点、年龄、技能水平、职业和背景。使示例像我们的社区一样多样化。\n* 避免政治化内容。如果政治内容是必要的，保持中立。\n* 遵循可访问性指南。\n* 避免会侮辱或伤害人们的内容。\n* 不要对人们、国家和文化做任何概括。这包括正面或中立的概括。\n* 不要编写针对少数群体的偏见和歧视性内容。\n* 避免与历史事件相关的术语。\n\n优先使用避免\"you\"和\"your\"的措辞。例如，不要：\n\n```\nIf you need to declare a variable, it is recommended that you use `let`.\n```\n\n而是使用这种风格：\n\n```\nAlways use `let` to declare variables.\n```\n\n**代词**\n\n| 推荐 | 不推荐 |\n| ---------- | ------------------ |\n| they | he or she |\n| them | him or her |\n| their | his or her |\n| theirs | his or hers |\n| themselves | himself or herself |\n\n**[⬆ 返回顶部](#目录/)**\n\n## 可访问性和残障\n\n* 注重读者而不是强调他们的不便。\n* 不要将残障人士称为残疾人。使用[批准的术语](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology)来指代特定残障的人。\n* 在整个 p5.js 文档中保持统一的结构。在风格和视觉上强调重要点。\n* 使用屏幕阅读器测试文档。要测试屏幕阅读器，请参见[屏幕阅读器列表](https://en.wikipedia.org/wiki/List_of_screen_readers/)。\n* 考虑所有类型设备和操作系统的多平台可访问性。\n* 创建使用所有类型输入设备的示例，如基于语音和手势的设备、控制器、鼠标和键盘。\n* 不要使用能力歧视语言。在编写关于可访问性和残障的内容时要包容和无偏见。\n* 对 HTML 语义采取实用方法。不要纯粹为了语义而添加语义。如果有明显匹配内容的 HTML 结构，请使用该元素。例如，一组链接很可能应该使用列表元素。\n* 使用简单的表格和表格格式。避免使用 span 标签（如 rowspan 和 colspan）。表格对屏幕阅读器来说很困难。\n\n**可访问性术语**\n\n以下术语改编自 WordPress 文档指南中的[编写包容性文档](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology)。有关以人为本语言的更多背景，请参见 CDC 的[与残障人士沟通指南](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html)。\n\n| 推荐 | 不推荐 |\n| ------------- | -------------------- |\n| 残障人士 | 残疾人、残障、能力不同、有挑战、不正常 |\n| 非残障人士 | 正常人、健康人、健全人 |\n| 有\\[残障] | 受害者、遭受、受...影响、被...折磨 |\n| 无法说话，使用合成语音 | 哑巴、失语 |\n| 聋人，听力低下 | 听力障碍 |\n| 盲人，视力低下 | 视力障碍，视觉挑战 |\n| 认知或发育障碍 | 智力挑战，学习缓慢 |\n| 行动不便的人，身体残障的人 | 瘸子，残障 |\n\n## 代码示例\n\n选择有意义的代码示例，涵盖基础知识以及容易出错的地方。只有在解释功能工作原理时才使用高级语法。当一个圆就能传达想法时，不要画五个圆来解释。代码示例本身应遵循以下指南。\n\n**[⬆ 返回顶部](#目录/)**\n\n## 注释\n\n* 使用 `//` 进行单行注释。将单行注释放在注释主题上方的新行上。除非是块的第一行，否则在注释前放置一个空行。\n\n```javascript\n// 不好。\nlet magicWord = 'Please'; // 记住这个。\n\n// 好。\n// 记住这个。\nlet magicWord = 'Please';\n\n// 不好。\nif (keyIsPressed === true) {\n thing1();\n // 这是一个重要的注释。\n thing2();\n}\n\n// 好。\nif (keyIsPressed === true) {\n thing1();\n\n // 这是一个重要的注释。\n thing2();\n}\n```\n\n* 所有注释都以空格开头，使其更易于阅读。\n\n```javascript\n// 不好。\n//记住这个。\nlet magicWord = 'Please';\n\n// 好。\n// 记住这个。\nlet magicWord = 'Please';\n```\n\n* 使用 `//` 进行多行注释。\n\n```javascript\n\n// 不好。\n/**\n * 我将使用 // 进行多行注释。\n * 我将使用 // 进行多行注释。\n * 我将使用 // 进行多行注释。\n * 我将使用 // 进行多行注释。\n * 我将使用 // 进行多行注释。\n */\n\n// 不好。\n/*\n 我将使用 // 进行多行注释。\n 我将使用 // 进行多行注释。\n 我将使用 // 进行多行注释。\n 我将使用 // 进行多行注释。\n 我将使用 // 进行多行注释。\n */\n\n// 好。\n// 我将使用 // 进行多行注释。\n// 我将使用 // 进行多行注释。\n// 我将使用 // 进行多行注释。\n// 我将使用 // 进行多行注释。\n// 我将使用 // 进行多行注释。\n\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 空白\n\n* 缩进块 2 个空格。\n\n```javascript\n// 不好。\nfunction setup() {\n∙∙∙∙createCanvas(400, 400);\n}\n\n// 不好。\nfunction setup() {\n∙createCanvas(400, 400);\n}\n\n// 好。\nfunction setup() {\n∙∙createCanvas(400, 400);\n}\n```\n\n* 在左大括号前放置 1 个空格。\n\n```javascript\n// 不好。\nfunction setup(){\n createCanvas(400, 400);\n}\n\n// 好。\nfunction setup() {\n createCanvas(400, 400);\n}\n```\n\n* 在控制语句（如 `if` 和 `for`）中的左括号前放置 1 个空格。在参数列表和函数名之间不要放置空格。\n\n```javascript\n// 不好。\nif(keyIsPressed === true) {\n doStuff ();\n}\n\n// 好。\nif (keyIsPressed === true) {\n doStuff();\n}\n\n// 不好。\nfunction setup () {\n createCanvas (400, 400);\n}\n\n// 好。\nfunction setup() {\n createCanvas(400, 400);\n}\n```\n\n* 在运算符之间放置空格。\n\n```javascript\n// 不好。\nlet y=x+5;\n\n// 好。\nlet y = x + 5;\n```\n\n## 分号\n\n* 使用分号。\n\n> 为什么？JavaScript 的[自动分号插入](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion)可能导致细微的错误。\n\n```javascript\n// 不好。\nlet x = 0\n\n// 好。\nlet x = 0;\n```\n\n## 命名约定\n\n* 避免使用单字母名称。要有描述性。\n\n```javascript\n// 不好。\nfunction f(x, y) {\n // ...\n}\n\n// 好。\nfunction vectorField(x, y) {\n // ...\n}\n```\n\n* 使用驼峰命名法命名对象、函数和实例。\n\n```javascript\n// 不好。\nlet OBJEcttsssss = {};\n\n// 不好。\nlet this_is_my_object = {};\n\n// 好。\nlet thisIsMyObject = {};\n```\n\n* 使用帕斯卡命名法命名类。\n\n```javascript\n// 不好。\nclass player {\n constructor(name) {\n this.name = name;\n }\n}\n\n// 好。\nclass Player {\n constructor(name) {\n this.name = name;\n }\n}\n```\n\n* 不要使用尾随或前导下划线。\n\n> 为什么？JavaScript 没有私有属性或方法。\n\n```javascript\n// 不好。\nclass Spy {\n constructor(secret) {\n this._secret = secret;\n }\n}\n\n// 好。\nclass Spy {\n constructor(secret) {\n this.secret = secret;\n }\n}\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 变量\n\n* 避免使用 `var` 声明变量。\n\n> 为什么？使用 `var` 声明的变量具有令人困惑的作用域规则。这些会导致细微的错误。\n\n```javascript\n// 不好，因为它看起来合理。\ncircle(x, y, 50);\nvar x = 200;\nvar y = 200;\n\n// 好，因为它会抛出 ReferenceError。\ncircle(x, y, 50);\nlet x = 200;\nlet y = 200;\n```\n\n* 始终使用 `let` 声明变量。避免使用 `const`。\n\n> 为什么？使用 `let` 声明的变量比使用 `var` 声明的变量更容易理解。变量在草图中经常被重新赋值，所以默认使用 `let` 很有帮助。\n\n```javascript\n// 不好。\nflower = '🌸';\nvar flower = '🌸';\nconst flower = '🌸';\n\n// 好。\nlet flower = '🌸';\n```\n\n* 每个变量或赋值使用一个 `let` 声明。\n\n> 为什么？这样更容易阅读和添加新的变量声明。\n\n```javascript\n// 不好。\nlet positions = getPositions(),\n startSearch = true,\n dragonball = 'z';\n\n// 好。\nlet positions = getPositions();\nlet startSearch = true;\nlet dragonball = 'z';\n```\n\n* 在需要的地方分配变量，并将它们放在合理的位置。\n\n> 为什么？`let` 是块作用域而不是函数作用域。\n\n```javascript\n// 不好 - 不必要的搜索。\nfunction getCharacter(name = 'default') {\n let character = characters.find((c) => c.name === name);\n\n if (name === 'default') {\n return false;\n }\n\n if (character) {\n return character;\n }\n \n return false;\n}\n\n// 好。\nfunction getCharacter(name = 'default') {\n if (name === 'default') {\n return false;\n }\n\n let character = characters.find((c) => c.name === name);\n\n if (character) {\n return character;\n }\n \n return false;\n}\n```\n\n* 避免使用一元递增和递减（`++`，`--`）。\n\n> 为什么？一元递增和递减语句受[自动分号插入](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion)的影响。这可能导致递增或递减值的静默错误。使用像 `num += 1` 这样的语句更新变量也比 `num++` 更具表现力。\n\n```javascript\n// 不好。\nlet num = 1;\nnum++;\n--num;\n\n// 好。\nlet num = 1;\nnum += 1;\nnum -= 1;\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 字符串\n\n* 使用单引号 `''` 表示字符串。\n\n```javascript\n// 不好。\nlet name = \"Hilma af Klint\";\n\n// 不好 - 模板字面量应包含插值或换行。\nlet name = `Hilma af Klint`;\n\n// 好。\nlet name = 'Hilma af Klint';\n```\n\n* 不要连接导致行超过 80 个字符的字符串。\n\n> 为什么？断开的字符串难以阅读，使代码不易搜索。\n\n```javascript\n// 不好。\nlet essay = 'You see us as you want to see us: \\\nin the simplest terms, in the most convenient definitions.';\n\n// 不好。\nlet essay = 'You see us as you want to see us: ' +\n 'in the simplest terms, in the most convenient definitions.';\n\n// 好。\nlet essay = 'You see us as you want to see us: in the simplest terms, in the most convenient definitions.';\n```\n\n* 需要时使用模板字符串而不是连接。\n\n> 为什么？模板字符串具有简洁的语法。它们还提供适当的换行和字符串插值功能。\n\n```javascript\nlet name = 'Dave';\n\n// 不好。\ntext(name + ', this conversation can serve no purpose anymore. Goodbye.' + name, 0, 0);\n\n// 好。\ntext(`${name}, this conversation can serve no purpose anymore. Goodbye.`, 0, 0);\n```\n\n* 不要在字符串中不必要地转义字符。\n\n> 为什么？反斜杠会损害可读性。\n\n```javascript\n// 不好。\nlet bad = '\\'this\\' \\i\\s \\\"quoted\\\"';\n\n// 好。\nlet good = 'Air quotes make you look \"cool\".';\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 布尔运算符\n\n* 使用 `===` 和 `!==` 而不是 `==` 和 `!=`。\n\n* 不要使用布尔值的快捷方式。\n\n> 为什么？对初学者来说更容易理解。\n\n```javascript\n// 不好。\nif (mouseIsPressed) {\n // ...\n}\n\n// 好。\nif (mouseIsPressed === true) {\n // ...\n}\n\n// 不好。\nif (name) {\n // ...\n}\n\n// 好。\nif (name !== '') {\n // ...\n}\n\n// 不好。\nif (collection.length) {\n // ...\n}\n\n// 好。\nif (collection.length > 0) {\n // ...\n}\n```\n\n* 除非必要，否则不要使用 `switch` 语句。\n\n* 混合运算符时使用括号。唯一的例外是算术运算符 `+`、`-` 和 `**`。\n\n> 为什么？这样更容易阅读并避免细微的错误。\n\n```javascript\n// 不好。\nlet huh = a && b < 0 || c > 0 || d + 1 === 0;\n\n// 好。\nlet huh = (a && b < 0) || c > 0 || (d + 1 === 0);\n\n// 不好。\nif (a || b && c) {\n return d;\n}\n\n// 好。\nif (a || (b && c)) {\n return d;\n}\n\n// 不好。\nlet what = a + b / c * d;\n\n// 好。\nlet what = a + (b / c) * d;\n```\n\n## 条件语句\n\n* 对所有多行块使用大括号。\n\n```javascript\n// 不好。\nif (mouseIsPressed === true)\n circle(mouseX, mouseY, 50);\n\n// 更好。\nif (mouseIsPressed === true) circle(mouseX, mouseY, 50);\n\n// 最好。\nif (mouseIsPressed === true) {\n circle(mouseX, mouseY, 50);\n}\n```\n\n* 将 `else` 放在前一个 `if` 块的右大括号的同一行。\n\n```javascript\n// 不好。\nif (mouseIsPressed === true) {\n thing1();\n thing2();\n}\nelse {\n thing3();\n}\n\n// 好。\nif (mouseIsPressed === true) {\n thing1();\n thing2();\n} else {\n thing3();\n}\n```\n\n* 在总是执行 `return` 语句的 `if` 块后不要使用 `else` 块。\n\n```javascript\n// 不好。\nfunction mouseIsOnLeft() {\n if (mouseX < width * 0.5) {\n return true;\n } else {\n return false;\n }\n}\n\n// 好。\nfunction mouseIsOnLeft() {\n if (mouseX < width * 0.5) {\n return true;\n }\n\n return false;\n}\n```\n\n* 如果条件太长，将每个（分组的）条件放在新行上。逻辑运算符应该开始行。\n\n> 为什么？这样更容易阅读。\n\n```javascript\n// 不好。\nif ((number === 123 || letters === 'abc') && mouseIsPressed === true && keyIsPressed === true) {\n doStuff();\n}\n\n// 好。\nif (\n (number === 123 || letters === 'abc')\n && mouseIsPressed === true\n && keyIsPressed === true\n) {\n doStuff();\n}\n```\n\n* 不要使用选择运算符代替条件语句。\n\n```javascript\n// 不好。\nrefrigeratorIsRunning && goCatchIt();\n\n// 好。\nif (refrigeratorIsRunning === true) {\n goCatchIt();\n}\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 迭代\n\n* 除非必要，否则不要使用 `while` 或 `do-while` 循环。使用 `for` 循环来迭代固定次数。\n\n```javascript\nlet numPetals = 7;\n\n// 不好。\nlet i = 0;\nwhile (i < numPetals) {\n ellipse(0, 0, 20, 80);\n rotate(PI / numPetals);\n i += 1;\n}\n\n// 好。\nfor (let i = 0; i < numPetals; i += 1) {\n ellipse(0, 0, 20, 80);\n rotate(PI / numPetals);\n}\n```\n\n* 不要使用 `for` 循环来迭代数组。\n\n> 为什么？纯函数比副作用更容易推理。\n\n> 使用 `forEach()` / `map()` / `every()` / `filter()` / `find()` / `findIndex()` / `reduce()` / `some()` / `...` 来迭代数组。使用 `Object.keys()` / `Object.values()` / `Object.entries()` 来生成用于迭代对象的数组。\n\n```javascript\nlet diameters = [50, 40, 30, 20, 10];\n\n// 不好。\nfor (let i = 0; i < diameters.length; i += 1) {\n circle(0, 0, diameters[i]);\n}\n\n// 不好。\nfor (let d of diameters) {\n circle(0, 0, d);\n}\n\n// 好。\ndiameters.forEach((d) => circle(0, 0, d));\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 对象\n\n* 使用字面量语法创建对象。\n\n```javascript\n// 不好。\nlet ball = new Object();\n\n// 好。\nlet ball = {};\n```\n\n* 只对无效标识符的属性使用引号。\n\n> 为什么？这样更容易阅读并提高语法高亮。JavaScript 引擎也更容易优化性能。\n\n```javascript\n// 不好。\nlet secretObject = {\n 'x': 100,\n 'y': 200,\n 'top-secret': 'classified',\n};\n\n// 好。\nlet secretObject = {\n x: 3,\n y: 4,\n 'top-secret': 'classified',\n};\n```\n\n* 使用点表示法访问属性。\n\n```javascript\nlet turtle = {\n name: 'Leonardo',\n color: 'dodgerblue',\n weapon: '🗡️',\n food: '🍕',\n};\n\n// 不好。\nlet turtleName = turtle['name'];\n\n// 好。\nlet turtleName = turtle.name;\n```\n\n* 使用方括号表示法 `[]` 访问带有变量的属性。\n\n```javascript\nlet turtle = {\n name: 'Leonardo',\n color: 'dodgerblue',\n weapon: '🗡️',\n food: '🍕',\n};\n\nfunction getProp(prop) {\n return turtle[prop];\n}\n\nlet turtleName = getProp('name');\n```\n\n* 不要使用前导逗号。\n\n```javascript\n// 不好。\nlet mathematician = {\n firstName: 'Ada'\n , lastName: 'Lovelace'\n};\n\n// 好。\nlet mathematician = {\n firstName: 'Ada',\n lastName: 'Lovelace',\n};\n```\n\n* 添加尾随逗号。\n\n```javascript\n// 不好。\nlet artist = {\n firstName: 'Lauren',\n lastName: 'McCarthy'\n};\n\n// 好。\nlet artist = {\n firstName: 'Lauren',\n lastName: 'McCarthy',\n};\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 数组\n\n* 使用字面量语法创建数组。\n\n```javascript\n// 不好。\nlet images = new Array();\n\n// 好。\nlet images = [];\n```\n\n* 使用 [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) 而不是直接赋值来向数组添加项目。\n\n```javascript\nlet lyrics = [];\n\n// 不好。\nlyrics[lyrics.length] = 'Little rough around the edges, but I keep it smooth';\n\n// 好。\nlyrics.push('Little rough around the edges, but I keep it smooth');\n```\n\n* 使用 `slice()` 方法复制数组。\n\n```javascript\n// 不好。\nlet numbersCopy = [];\n\nfor (let i = 0; i < numbers.length; i += 1) {\n numbersCopy[i] = numbers[i];\n}\n\n// 好。\nlet numbersCopy = numbers.slice();\n```\n\n* 当提高可读性时，在多行上编写数组。在左括号后和右括号前使用换行。添加尾随逗号。\n\n```javascript\n// 不好。\nlet matrix = [[1, 0, 0],\n [0, 1, 0],\n [0, 0, 1]];\n\n// 好。\nlet matrix = [\n [1, 0, 0],\n [0, 1, 0],\n [0, 0, 1],\n];\n\n// 也好。\nlet matrix = [[1, 0, 0], [0, 1, 0], [0, 0, 1]];\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 函数\n\n* 使用函数声明而不是命名函数表达式。\n\n> 为什么？函数声明有一些陷阱，但对初学者来说更容易理解。\n\n```javascript\n// 不好。\nlet foo = function () {\n // ...\n};\n\n// 不好。\nlet foo = () => {\n // ...\n};\n\n// 好。\nfunction foo() {\n // ...\n}\n```\n\n* 使用默认参数语法。不要改变函数参数。\n\n```javascript\n// 不好。\nfunction createBall(diameter) {\n diameter = diameter || 50;\n // ...\n}\n\n// 好。\nfunction createBall(diameter = 50) {\n // ...\n}\n```\n\n* 始终将默认参数放在最后。\n\n```javascript\n// 不好。\nfunction drawSpiral(angle = 90, length) {\n // ...\n}\n\n// 好。\nfunction drawSpiral(length, angle = 90) {\n // ...\n}\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 箭头函数\n\n* 对匿名函数使用箭头函数表示法。回调是这种语法的常见用例。\n\n> 为什么？语法更简洁。它还创建了一个在 `this` 上下文中执行的函数版本，这通常很有帮助。\n\n> 为什么不？如果匿名函数很复杂，将其重写为声明的函数。\n\n```javascript\n// 不好。\nfunction setup() {\n loadImage('assets/moonwalk.jpg', function (img) {\n image(img, 0, 0);\n });\n}\n\n// 好。\nfunction setup() {\n loadImage('assets/moonwalk.jpg', (img) => {\n image(img, 0, 0);\n });\n}\n\n// 不好。\nfunction preload() {\n loadImage('assets/moonwalk.jpg', (img) => {\n // 复杂的预处理...\n });\n}\n\n// 好。\nfunction preload() {\n loadImage('assets/moonwalk.jpg', processImage);\n}\n\nfunction processImage(img) {\n // 复杂的预处理...\n}\n```\n\n* 尽可能使用隐式返回。如果函数体返回单个语句且没有副作用，则省略大括号。否则，保留大括号并使用 `return` 语句。\n\n> 为什么？这样更容易阅读。\n\n```javascript\n// 不好。\n[1, 2, 3].map((number) => {\n let squared = number ** 2;\n `${number} squared is ${squared}.`;\n});\n\n// 不好。\n[1, 2, 3].map((number) => {\n let squared = number ** 2;\n return `${number} squared is ${squared}.`;\n});\n\n// 好。\n[1, 2, 3].map((number) => `${number} squared is ${number ** 2}.`);\n```\n\n* 始终在参数周围包含括号。\n\n> 为什么？这样做可以减少更改参数时的错误。\n\n```javascript\n// 不好。\n[1, 2, 3].map(number => number * number);\n\n// 好。\n[1, 2, 3].map((number) => number * number);\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 链式调用\n\n* 使用单独的函数调用而不是函数链式调用。\n\n> 为什么？适应可能不熟悉函数链式调用概念的用户。\n\n```javascript\n// 不好。\nfill(0)\n .strokeWeight(6)\n .textSize(20);\n\n// 不好。\nfill(0).strokeWeight(6).textSize(20);\n\n// 好。\nfill(0);\nstrokeWeight(6);\ntextSize(20);\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 类\n\n* 始终使用 `class`。避免直接操作 `prototype`。唯一的例外是解释如何[创建库](../creating_libraries/)。\n\n> 为什么？`class` 语法更简洁，更容易理解。\n\n```javascript\n// 不好。\nfunction Mover(x, y, radius) {\n this.x = x;\n this.y = y;\n this.radius = radius;\n}\n\nMover.prototype.update = function () {\n this.x += 1;\n this.y += 1;\n};\n\nMover.prototype.render = function () {\n circle(this.x, this.y, 2 * this.radius);\n};\n\n// 好。\nclass Mover {\n constructor(x, y, radius) {\n this.x = x;\n this.y = y;\n this.radius = radius;\n }\n\n update() {\n this.x += 1;\n this.y += 1;\n }\n\n render() {\n circle(this.x, this.y, 2 * this.radius);\n }\n}\n```\n\n* 使用 `extends` 进行继承。\n\n```javascript\nclass RandomMover extends Mover {\n update() {\n this.x += random(-1, 1);\n this.y += random(-1, 1);\n }\n}\n```\n\n* 确保自定义 `toString()` 方法不会引起副作用。\n\n```javascript\n// 不好。\nclass Mover {\n // ...\n\n toString() {\n this.x += 1;\n return `Mover at (${this.x}, ${this.y})`;\n }\n}\n\n// 好。\nclass Mover {\n // ...\n\n toString() {\n return `Mover at (${this.x}, ${this.y})`;\n }\n}\n```\n\n* 不要编写空的构造函数或仅委托给父类的构造函数。\n\n> 为什么？如果未指定，类有默认构造函数。\n\n```javascript\n// 不好。\nclass Dot {\n constructor() {}\n\n render() {\n circle(mouseX, mouseY, 50);\n }\n}\n\n// 好。\nclass Dot {\n render() {\n circle(mouseX, mouseY, 50);\n }\n}\n\n// 不好。\nclass DragonBall extends Ball {\n constructor(x, y, d) {\n super(x, y, d);\n }\n}\n\n// 好。\nclass DragonBall extends Ball {\n constructor(x, y, d, numStars) {\n super(x, y, d);\n this.numStars = numStars;\n }\n}\n```\n\n* 避免重复的类成员。\n\n> 为什么？重复的类成员声明优先选择最后一个。有重复通常意味着有错误。\n\n```javascript\n// 不好。\nclass Mover {\n // ...\n\n update() {\n this.x += this.xspeed;\n this.y += this.yspeed;\n }\n\n update() {\n this.x = 0;\n this.y = 0;\n }\n}\n\n// 好。\nclass Mover {\n // ...\n \n update() {\n this.x += this.xspeed;\n this.y += this.yspeed;\n }\n\n reset() {\n this.x = 0;\n this.y = 0;\n }\n}\n```\n\n**[⬆ 返回顶部](#目录/)**\n\n## 资源\n\n* 始终从名为\"assets\"的文件夹加载资源。\n\n> 为什么？它模拟了良好的项目组织。这也是在 p5.js 网站上加载资源所必需的。将资源放在以下文件夹中以将其包含在我们的在线文档中：\n\n* 示例：[src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/)\n* 参考页面：[src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/)\n* 学习页面：[src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/)\n\n```javascript\nlet img;\n\n// 不好。\nfunction preload() {\n img = loadImage('moonwalk.jpg');\n}\n\n// 好。\nfunction preload() {\n img = loadImage('assets/moonwalk.jpg');\n}\n```\n\n**[⬆ 返回顶部](#目录/)**\n"},"友好错误系统贡献指南\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* 友好错误系统代码库概述和开发者参考。 */}\n\n\n\n`core/friendly_errors`文件夹包含了p5js的友好错误系统(FES)代码，该系统负责生成友好错误消息或友好错误。您可能已经在控制台中看到以\"`🌸 p5.js says:`\"开头的友好错误消息，这些消息是对默认浏览器生成的错误消息的补充。\n\nFES包含多个负责生成不同类型错误的友好错误消息的函数。这些函数从各种位置收集错误，包括文件加载错误和自动播放错误的错误处理，库内的参数检查，以及p5.js贡献者实现的其他自定义错误处理。\n\n本文档首先概述了FES的主要函数及其位置。在随后的参考部分，您将找到有关这些单独函数的完整信息（描述、语法、参数、位置）。在文档的最后部分，您将找到我们以前的贡献者的笔记（开发笔记），概述了FES的已知限制和可能的未来方向。如果您正在考虑为FES做贡献，请查看[开发笔记](#-开发笔记/)！\n\n## 概述\n\n生成友好错误消息的主要函数是：\n\n* `p5._friendlyError()`：将输入消息格式化并打印（通过`_report()`）为友好错误\n* `p5._validateParameters()`：验证接收到的输入值是否有错误类型或缺少值\n* `p5._friendlyFileLoadError()`：指导用户解决与文件加载函数相关的错误\n* `p5._friendlyAutoplayError()`：指导用户解决与浏览器自动播放策略相关的错误\n\n以下是一个图表，概述了FES中所有函数的位置以及它们如何相互连接：\n\n\n\n各个文件包含以下主要FES函数：\n\n* `fes_core.js`：包含`_report()`、`_friendlyError()`和`_friendlyAutoplayError()`，以及用于格式化和测试友好错误的其他辅助函数。\n* `validate_params.js`：包含`_validateParameters()`以及用于参数验证的其他辅助函数。\n* `file_errors.js`：包含`_friendlyFileLoadError()`和用于文件加载错误的其他辅助函数。\n* `browser_errors.js`：包含将使用FES全局错误类（`fes.globalErrors`）生成的浏览器错误列表。\n* `stacktrace.js`：包含解析错误堆栈的代码（借用自[stacktrace.js](https://github.com/stacktracejs/stacktrace.js)）。\n\n## 📚 参考：FES函数\n\n### `_report()`\n\n#### 描述\n\n`_report()`是直接将错误辅助消息输出到控制台的主要函数。\n\n\\*\\*注意：\\*\\*如果设置了`p5._fesLogger`（即，我们正在运行测试），则将使用它代替`console.log`。这在我们通过Mocha运行测试时非常有用。在这种情况下，`_fesLogger`将让`_report`将错误消息作为字符串传递给Mocha，该字符串将与断言的字符串进行测试。\n\n#### 语法\n\n```js\n_report(message);\n\n_report(message, func);\n\n_report(message, func, color);\n```\n\n#### 参数\n\n```\n@param {String} message 要打印的消息\n@param {String} [func] 函数名称\n@param {Number|String} [color] CSS颜色代码\n```\n\n`[func]`输入用于在错误消息末尾附加参考链接。\n\n`[color]`输入用于设置错误消息的颜色属性。这在当前版本的友好错误消息中未使用。\n\n#### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `_friendlyError()`\n\n#### 描述\n\n`_friendlyError()`创建并打印友好错误消息。任何p5函数都可以调用此函数来提供友好错误消息。\n\n`_friendlyFileLoadError()`位于以下函数内：\n\n* `image/loading_displaying/loadImage()`\n* `io/files/loadFont()`\n* `io/files/loadTable()`\n* `io/files/loadJSON()`\n* `io/files/loadStrings()`\n* `io/files/loadXML()`\n* `io/files/loadBytes()`。\n\n对`_friendlyFileLoadError`的调用序列看起来像这样：\n\n```\n_friendlyFileLoadError\n _report\n```\n\n#### 语法\n\n```js\n_friendlyFileLoadError(errorType, filePath);\n```\n\n#### 参数\n\n```\n@param {Number} errorType 文件加载错误类型的编号\n@param {String} filePath 导致错误的文件路径\n```\n\n`errorType`输入指的是`core/friendly_errors/file_errors.js`中枚举的特定类型的文件加载错误。p5.js中的文件加载错误被分为各种不同的情况。这种分类旨在便于提供与不同错误场景相对应的精确和信息丰富的错误消息。例如，当它无法读取字体文件中的数据时，它可以显示与尝试加载过大无法读取的文件时不同的错误。\n\n#### 示例\n\n文件加载错误示例：\n\n```js\n/// 缺少字体文件\nlet myFont;\nfunction preload() {\n myFont = loadFont('assets/OpenSans-Regular.ttf');\n}\nfunction setup() {\n fill('#ED225D');\n textFont(myFont);\n textSize(36);\n text('p5*js', 10, 50);\n}\nfunction draw() {}\n```\n\n除了浏览器的\"不支持\"错误外，FES还将在控制台中生成以下消息：\n\n```\n🌸 p5.js says: 看起来加载字体时出现了问题。请检查文件路径(assets/OpenSans-Regular.ttf)是否正确，尝试在线托管文件，或运行本地服务器。\n\n+ 更多信息：https://github.com/processing/p5.js/wiki/Local-server\n```\n\n#### 位置\n\n/friendly\\_errors/file\\_errors.js\n\n### `_friendlyAutoplayError()`\n\n#### 描述\n\n如果存在与播放媒体（例如视频）相关的错误，`_friendlyAutoplayError()`会在内部调用，这很可能是由于浏览器的自动播放策略。\n\n它调用`translator()`使用键`fes.autoplay`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。\n\n#### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `_validateParameters()`\n\n#### 描述\n\n`_validateParameters()`通过将输入参数与`docs/reference/data.json`中的信息匹配来运行参数验证，该信息是从函数的内联文档创建的。它检查函数调用是否包含正确数量和正确类型的参数。\n\n它调用`translator()`使用键`fes.friendlyParamError.*`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。\n\n可以通过`p5._validateParameters(FUNCT_NAME, ARGUMENTS)`或`p5.prototype._validateParameters(FUNCT_NAME, ARGUMENTS)`在需要参数验证的函数内部调用此函数。建议将静态版本`p5._validateParameters`用于一般用途。`p5.prototype._validateParameters(FUNCT_NAME, ARGUMENTS)`主要用于调试和单元测试。\n\n`_validateParameters()`函数位于这些函数内：\n\n* `accessibility/outputs`\n* `color/creating_reading`\n* `color/setting`\n* `core/environment`\n* `core/rendering`\n* `core/shape/2d_primitives`\n* `core/shape/attributes`\n* `core/shape/curves`\n* `core/shape/vertex`\n* `core/transform`\n* `data/p5.TypedDict`\n* `dom/dom`\n* `events/acceleration`\n* `events/keyboard`\n* `image/image`\n* `image/loading_displaying`\n* `image/p5.Image`\n* `image/pixel`\n* `io/files`\n* `math/calculation`\n* `math/random`\n* `typography/attributes`\n* `typography/loading_displaying`\n* `utilities/string_functions`\n* `webgl/3d_primitives`\n* `webgl/interaction`\n* `webgl/light`\n* `webgl/loading`\n* `webgl/material`\n* `webgl/p5.Camera`\n\n从`_validateParameters`的调用序列看起来像这样：\n\n```\nvalidateParameters\n buildArgTypeCache\n addType\n lookupParamDoc\n scoreOverload\n testParamTypes\n testParamType\n getOverloadErrors\n _friendlyParamError\n ValidationError\n report\n friendlyWelcome\n```\n\n#### 语法\n\n```js\n_validateParameters(func, args);\n```\n\n#### 参数\n\n```\n@param {String} func 被调用的函数的名称\n@param {Array} args 用户输入参数\n```\n\n#### 示例\n\n缺少参数的示例：\n\n```js\narc(1, 1, 10.5, 10);\n```\n\nFES将在控制台中生成以下消息：\n\n```\n🌸 p5.js says: [sketch.js, line 13] arc()至少需要6个参数，但只收到了4个。 (https://p5js.org/reference/p5/arc)\n```\n\n类型不匹配的示例：\n\n```js\narc(1, ',1', 10.5, 10, 0, Math.PI);\n```\n\nFES将在控制台中生成以下消息：\n\n```\n🌸 p5.js says: [sketch.js, line 14] arc()的第一个参数需要Number类型，但收到了string类型。 (https://p5js.org/reference/p5/arc)\n```\n\n#### 位置\n\ncore/friendly\\_errors/validate\\_params.js\n\n### `fesErrorMonitor()`\n\n#### 描述\n\n`fesErrorMonitor()`监控浏览器错误消息，猜测错误的来源并为用户提供额外的指导。这包括堆栈跟踪，它是程序中直到抛出错误点为止调用的函数的顺序列表。堆栈跟踪对于确定错误是内部的还是由用户直接调用的某些内容引起的非常有用。\n\n它调用`translator()`使用键`fes.globalErrors.*`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。\n\n以下是通过`fesErrorMonitor()`生成的错误消息的综合列表：\n\n* 使用键的友好错误消息：`fes.globalErrors.syntax.*`、`fes.globalErrors.reference.*`、`fes.globalErrors.type.*`。\n* 通过`processStack()`使用键的\"内部库\"错误消息：`fes.wrongPreload`、`fes.libraryError`。\n* 通过`printFriendlyStack()`使用键的堆栈跟踪消息：`fes.globalErrors.stackTop`、`fes.globalErrors.stackSubseq`。\n* 通过`handleMisspelling()`使用键的拼写检查消息（来自引用错误）：`fes.misspelling`。\n\n`_fesErrorMonitor()`由`window`上的`error`事件和未处理的承诺拒绝（`unhandledrejection`事件）自动触发。但是，可以在catch块中手动调用，如下所示：\n\n```js\ntry { someCode(); } catch(err) { p5._fesErrorMonitor(err); }\n```\n\n该函数目前适用于`ReferenceError`、`SyntaxError`和`TypeError`的子集。您可以在`browser_errors.js`中找到支持的错误的完整列表。\n\n`_fesErrorMonitor`的调用序列大致如下：\n\n```\n _fesErrorMonitor\n processStack\n printFriendlyError\n (if type of error is ReferenceError)\n _handleMisspelling\n computeEditDistance\n _report\n _report\n printFriendlyStack\n (if type of error is SyntaxError、TypeError, etc)\n _report\n printFriendlyStack\n```\n\n#### 语法\n\n```js\nfesErrorMonitor(event);\n```\n\n#### 参数\n\n```\n@param {*} e 错误事件\n```\n\n#### 示例\n\n内部错误示例1：\n\n```js\nfunction preload() {\n // 由于在preload中调用background()\n // 导致错误\n background(200);\n}\n```\n\nFES将在控制台中生成以下消息：\n\n```\n🌸 p5.js says: [sketch.js, line 8] 当调用\"background\"时，p5js库内部发生了一个错误，错误信息为\"无法读取未定义的属性（正在读取'background'）\"。如果没有特别说明，这可能是由于从preload调用\"background\"导致的。preload函数中除了加载调用（loadImage、loadJSON、loadFont、loadStrings等）之外，不应该有任何其他内容。 (https://p5js.org/reference/p5/preload)\n```\n\n内部错误示例2：\n\n```js\nfunction setup() {\n cnv = createCanvas(200, 200);\n cnv.mouseClicked();\n}\n```\n\nFES将在控制台中生成以下消息：\n\n```js\n🌸 p5.js says: [sketch.js, line 12] 当调用mouseClicked时，p5js库内部发生了一个错误，错误信息为\"无法读取未定义的属性（正在读取'bind'）\"。如果没有特别说明，这可能是传递给mouseClicked的参数问题。 (https://p5js.org/reference/p5/mouseClicked)\n```\n\n错误示例（作用域）：\n\n```js\nfunction setup() {\n let b = 1;\n}\nfunction draw() {\n b += 1;\n}\n```\n\nFES将在控制台中生成以下消息：\n\n```\n🌸 p5.js says:\n\n[sketch.js, line 5] 当前作用域中未定义\"b\"。如果您已在代码中定义了它，应检查其作用域、拼写和大小写（JavaScript区分大小写）。\n\n+ 更多信息：https://p5js.org/examples/data-variable-scope.html\n```\n\n错误示例（拼写）：\n\n```js\nfunction setup() {\n xolor(1, 2, 3);\n}\n```\n\nFES将在控制台中生成以下消息：\n\n```\n🌸 p5.js says: [sketch.js, line 2] 您可能不小心写了\"xolor\"而不是\"color\"。如果您希望使用p5.js中的函数，请将其更正为color。 (https://p5js.org/reference/p5/color)\n```\n\n#### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `checkForUserDefinedFunctions()`\n\n#### 描述\n\n检查是否有任何用户定义的函数（`setup()`、`draw()`、`mouseMoved()`等）带有大小写错误。\n\n它调用`translator()`使用键`fes.checkUserDefinedFns`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。\n\n#### 语法\n\n```js\ncheckForUserDefinedFunctions(context);\n```\n\n#### 参数\n\n```\n@param {*} context 当前默认上下文。\n 在\"全局模式\"下设置为window，\n 在\"实例模式\"下设置为p5实例\n```\n\n#### 示例\n\n```js\nfunction preload() {\n loadImage('myimage.png');\n}\n```\n\nFES将在控制台中生成以下消息：\n\n```\n🌸 p5.js says: 您可能不小心写了preLoad而不是preload。如果这不是有意的，请更正它。 (https://p5js.org/reference/p5/preload)\n```\n\n#### 位置\n\n/friendly\\_errors/fes\\_core.js\n\n### `helpForMisusedAtTopLevelCode()`\n\n#### 描述\n\n`helpForMisusedAtTopLevelCode()`在窗口加载时由`fes_core.js`调用，以检查在`setup()`或`draw()`之外使用p5.js函数的情况。\n\n它调用`translator()`使用键`fes.misusedTopLevel`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。\n\n#### 参数\n\n```\n@param {*} err 错误事件\n@param {Boolean} log false\n```\n\n#### 位置\n\n/friendly\\_errors/fes\\_core.js\n\n## 💌 开发笔记\n\n### 已知限制\n\n#### 假阳性与假阴性情况\n\n在FES中，您可能会遇到两种类型的错误：假阳性和假阴性。把假阳性想象成虚假警报。当FES警告您有错误，但您的代码实际上是正确的时，就会出现这种情况。另一方面，假阴性就像遗漏了一个错误。当您的代码中有错误，但FES没有提醒您时，就会发生这种情况。\n\n识别和修复这些错误很重要，因为它们可以节省调试时间，减少混淆，并使修复实际问题变得更容易。\n\n在某些不理想的情况下，错误处理的设计可能需要选择消除假阳性或假阴性。如果必须选择，通常最好消除假阳性。这样，您可以避免生成可能分散注意力或误导用户的不正确警告。\n\n#### 与`fes.GlobalErrors`相关的限制\n\nFES只能检测到使用`const`或`var`声明的被覆盖的全局变量。使用let声明的变量不会被检测到。这个限制是由于`let`处理变量实例化的特定方式导致的，目前无法解决。\n\n`fesErrorMonitor()`下描述的功能目前仅在Web编辑器上或在本地服务器上运行时有效。有关更多详情，请参见 pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]。\n\n### FES的性能问题\n\n默认情况下，p5.js启用FES，而在`p5.min.js`中禁用，以防止FES函数减慢进程。错误检查系统可能会显著减慢您的代码（在某些情况下最多慢10倍）。请参见[友好错误性能测试](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/)。\n\n您可以在草图顶部使用一行代码禁用FES：\n\n```js\np5.disableFriendlyErrors = true; // 禁用FES\nfunction setup() {\n // 进行设置操作\n}\nfunction draw() {\n // 进行绘制操作\n}\n```\n\n请注意，此操作将禁用已知会降低性能的FES某些功能，例如参数检查。但是，不影响性能的友好错误消息仍将启用。这包括在文件加载失败时提供详细的错误消息，或者在您尝试覆盖全局空间中的p5.js函数时显示警告。\n\n### 未来工作的想法\n\n* 解耦FES \\[[#5629](https://github.com/processing/p5.js/issues/5629/)]\n* 消除假阳性情况\n* 识别假阴性情况\n* 添加更多单元测试以获得全面的测试覆盖\n* 更直观、清晰且可翻译的消息。关于友好错误国际化的更多讨论，请查看[友好错误i18n手册](https://almchung.github.io/p5-fes-i18n-book/en/)。\n* 识别更多常见错误类型并使用FES进行泛化（例如 `bezierVertex()`、`quadraticVertex()` - 必需对象未初始化；检查 `nf()`、`nfc()`、`nfp()`、`nfs()` 的Number参数是否为正）\n\n## 结论\n\n在本README文档中，我们概述了`core/friendly_errors`文件夹的结构。本节解释了这个文件夹的组织和目的，使其更容易导航和理解。此外，对于此文件夹中的每个函数，我们都提供了参考指南。\n\n在本文档的后半部分，我们包含了以前贡献者的笔记，讨论了FES的当前限制和未来开发中可能的改进领域。\n\n此外，我们很高兴通过2021-2022年进行的FES调查分享来自我们社区的见解。调查结果有两种格式可供查阅：\n\n* [21-22 FES调查报告漫画](https://almchung.github.io/p5jsFESsurvey/)\n* [21-22 FES调查完整报告](https://observablehq.com/@almchung/p5-fes-21-survey/)。\n\n{/* TODO: 当我们发布下面的文章时取消注释 */}\n\n{/* 如果您正在寻找向方法添加友好错误消息的方法，我们建议查看[如何添加友好错误消息](#/)。它将一步步引导您完成向方法添加这些错误消息的过程。 */}\n"},"FES 开发者参考和注释\n":{"relativeUrl":"/contribute/fes_reference_dev_notes","description":"\n\n本文档包含 p5.js 友好错误系统（FES）的参考和开发注释。FES 包含多个函数，负责为不同类型的错误生成友好的错误消息。这些函数从各个位置收集错误，包括浏览器触发的错误事件、扫描用户代码时发现的错误、库内部的参数检查等。\n\n生成友好错误消息的主要函数有：\n\n* `_validateParameters()`\n* `_friendlyFileLoadError()`\n* `_friendlyError()`\n* `helpForMisusedAtTopLevelCode()`\n* `_fesErrorMontitor()`\n\n这些函数位于 `core/friendly_errors/` 文件夹中。\n\n* `fes_core.js` 包含 FES 的核心功能和其他杂项功能。\n* `_validateParameters()` 位于 `validate_params.js` 中，与用于参数验证的其他代码一起。\n* `_friendlyFileLoadError()` 位于 `file_errors.js` 中，与处理文件加载错误的其他代码一起。\n* 此外，还有一个名为 `stacktrace.js` 的文件，其中包含解析错误堆栈的代码，来自于：[https://github.com/stacktracejs/stacktrace.js](https://github.com/stacktracejs/stacktrace.js)\n\n下面的部分介绍了 FES 函数的完整参考。\n\n## FES 函数：参考\n\n### `_report()`\n\n##### 描述\n\n`_report()` 是一个主要函数，直接将错误助手消息的输出打印到控制台。\n如果设置了 `_fesLogger`（即我们正在运行测试），`_report` 将调用 `_fesLogger` 而不是 console.log。\n\n##### 语法\n\n```javascript\n_report(message)\n```\n\n```javascript\n_report(message, func)\n```\n\n```javascript\n_report(message, func, color)\n```\n\n##### 参数\n\n```\n@param {String} message 要打印的消息\n@param {String} [func] 函数名称\n@param {Number|String} [color] CSS 颜色代码\n```\n\n##### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `_friendlyError()`\n\n##### 描述\n\n`_friendlyError()` 创建并打印友好的错误消息。任何p5函数都可以调用此函数以提供友好的错误消息。\n\n已实现的函数：\n\n* `core/friendly_errors/fes_core/fesErrorMonitor()`\n* `core/friendly_errors/fes_core/checkForUserDefinedFunctions()`\n* `core/friendly_errors/fes_core/handleMisspelling()`\n* `core/friendly_errors/fes_core/processStack()`\n* `core/friendly_errors/file_errors`\n* `core/friendly_errors/sketch_reader`\n* `core/friendly_errors/validate_params/_friendlyParamError()`\n* `core/main/_createFriendlyGlobalFunctionBinder()`\n* `core/shape/vertex`\n* `math/p5.Vector`\n\n对`_friendlyError`的调用顺序如下：\n\n```\n_friendlyError\n _report\n```\n\n##### 语法\n\n```javascript\n_friendlyError(message)\n```\n\n```javascript\n_friendlyError(message, func)\n```\n\n```javascript\n_friendlyError(message, func, color)\n```\n\n##### 参数\n\n```\n@param {String} message 要打印的消息\n@param {String} [func] 函数的名称\n@param {Number|String} [color] CSS颜色代码\n```\n\n##### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `_friendlyFileLoadError()`\n\n##### 描述\n\n如果在文件加载过程中发生错误，`_friendlyFileLoadError()` 将被`loadX()`函数调用。\n\n使用键值`fes.fileLoadError.*`生成并打印友好的错误消息。\n\n如果文件加载失败，此函数将生成并显示友好的错误消息。如果文件的大小过大无法加载，它还会进行检查并生成警告。\n\n当前版本中包含用于生成`image`、`XML`、`table`、`text`、`json`和`font`文件的错误消息模板。\n\n已实现的函数：\n\n* `image/loading_displaying/loadImage()`\n* `io/files/loadFont()`\n* `io/files/loadTable()`\n* `io/files/loadJSON()`\n* `io/files/loadStrings()`\n* `io/files/loadXML()`\n* `io/files/loadBytes()`。\n\n对`_friendlyFileLoadError`的调用顺序如下：\n\n```\n_friendlyFileLoadError\n _report\n```\n\n##### 语法\n\n```javascript\n_friendlyFileLoadError(errorType, filePath)\n```\n\n##### 参数\n\n```\n@param {Number} errorType 文件加载错误类型的数字\n@param {String} filePath 引起错误的文件路径\n```\n\n##### 示例\n\n<ins>文件加载错误示例</ins>\n\n```javascript\n/// missing font file\nlet myFont;\nfunction preload() {\n myFont = loadFont('assets/OpenSans-Regular.ttf');\n};\nfunction setup() {\n fill('#ED225D');\n textFont(myFont);\n textSize(36);\n text('p5*js', 10, 50);\n};\nfunction draw() {};\n```\n\nFES会在控制台生成以下消息：\n\n> 🌸 p5.js says: 看起来加载字体文件时出现了问题。请检查文件路径 \\[assets/OpenSans-Regular.ttf] 是否正确，尝试将字体文件托管到在线服务器上，或者运行本地服务器。\\[[https://github.com/processing/p5.js/wiki/Local-server](https://github.com/processing/p5.js/wiki/Local-server)]\n\n##### 位置\n\ncore/friendly\\_errors/file\\_errors.js\n\n### `validateParameters()`\n\n##### 描述\n\n`validateParameters()` 通过将输入参数与从函数的内联文档中创建的 `docs/reference/data.json` 的信息进行匹配，执行参数验证。它检查函数调用是否包含了正确数量和正确类型的参数。\n\n使用键值 `fes.friendlyParamError.*` 生成并打印友好的错误消息。\n\n可以通过以下方式调用该函数：`p5._validateParameters(FUNCT_NAME, ARGUMENTS)` 或者在需要参数验证的函数内部使用 `p5.prototype._validateParameters(FUNCT_NAME, ARGUMENTS)`。建议在一般情况下使用静态版本 `p5._validateParameters`。`p5.prototype._validateParameters(FUNCT_NAME, ARGUMENTS)` 主要用于调试和单元测试。\n\n已在以下函数中实现：\n\n* `accessibility/outputs`\n* `color/creating_reading`\n* `color/setting`\n* `core/environment`\n* `core/rendering`\n* `core/shape/2d_primitives`\n* `core/shape/attributes`\n* `core/shape/curves`\n* `core/shape/vertex`\n* `core/transform`\n* `data/p5.TypedDict`\n* `dom/dom`\n* `events/acceleration`\n* `events/keyboard`\n* `image/image`\n* `image/loading_displaying`\n* `image/p5.Image`\n* `image/pixel`\n* `io/files`\n* `math/calculation`\n* `math/random`\n* `typography/attributes`\n* `typography/loading_displaying`\n* `utilities/string_functions`\n* `webgl/3d_primitives`\n* `webgl/interaction`\n* `webgl/light`\n* `webgl/loading`\n* `webgl/material`\n* `webgl/p5.Camera`\n\n来自 `_validateParameters` 的调用顺序大致如下：\n\n```\nvalidateParameters\n buildArgTypeCache\n addType\n lookupParamDoc\n scoreOverload\n testParamTypes\n testParamType\n getOverloadErrors\n _friendlyParamError\n ValidationError\n report\n friendlyWelcome\n```\n\n##### 语法\n\n```javascript\n_validateParameters(func, args)\n```\n\n##### 参数\n\n```\n@param {String} func 函数名\n@param {Array} args 用户输入的参数\n```\n\n##### 示例\n\n<ins>缺少参数的示例</ins>\n\n```javascript\narc(1, 1, 10.5, 10);\n```\n\nFES将在控制台生成以下消息：\n\n> 🌸 p5.js 说：看起来arc()在位置#4（从零开始的索引）收到了一个空变量。如果不是故意的，这通常是作用域问题：\\[[https://p5js.org/examples/data-variable-scope.html\\]。\\[https://p5js.org/reference/#p5/arc](https://p5js.org/examples/data-variable-scope.html]。\\[https://p5js.org/reference/#p5/arc)]\n\n> 🌸 p5.js 说：看起来arc()在位置#5（从零开始的索引）收到了一个空变量。如果不是故意的，这通常是作用域问题：\\[[https://p5js.org/examples/data-variable-scope.html\\]。\\[https://p5js.org/reference/#p5/arc](https://p5js.org/examples/data-variable-scope.html]。\\[https://p5js.org/reference/#p5/arc)]\n\n<ins>类型不匹配的示例</ins>\n\n```javascript\narc('1', 1, 10.5, 10, 0, Math.PI, 'pie');\n```\n\nFES将在控制台生成以下消息：\n\n> 🌸 p5.js 说：arc()在参数#0（从零开始的索引）处期望接收Number，但收到了字符串。\\[[https://p5js.org/reference/p5/arc](https://p5js.org/reference/p5/arc)]\n\n##### 位置\n\ncore/friendly\\_errors/validate\\_params.js\n\n### `fesErrorMonitor()`\n\n##### 描述\n\n`fesErrorMonitor()`处理浏览器显示的各种错误。该函数生成全局错误消息。\n\n生成并打印...\n\n* ...友好错误消息，使用键：`fes.globalErrors.syntax.*`、`fes.globalErrors.reference.*`、`fes.globalErrors.type.*`。\n* ...通过`processStack()`生成“内部库”错误消息，使用键：`fes.wrongPreload`、`fes.libraryError`。\n* ...通过`printFriendlyStack()`生成堆栈跟踪消息，使用键：`fes.globalErrors.stackTop`、`fes.globalErrors.stackSubseq`。\n* ...通过`handleMisspelling()`生成拼写检查消息（来自引用错误），使用键：`fes.misspelling`。\n\n可以通过错误事件、未处理的拒绝事件调用`_fesErrorMonitor()`，也可以在`catch`块中手动调用它，如下所示：\n\n```\ntry { someCode(); } catch(err) { p5._fesErrorMonitor(err); }\n```\n\n该函数目前可以处理某些类型的ReferenceError、SyntaxError和TypeError。您可以在`browser_errors.js`中找到支持的错误的完整列表。\n\n`_fesErrorMonitor`的调用顺序大致如下：\n\n```\n _fesErrorMonitor\n processStack\n printFriendlyError\n （如果错误类型是ReferenceError）\n _handleMisspelling\n computeEditDistance\n _report\n _report\n printFriendlyStack\n （如果错误类型是SyntaxError、TypeError等）\n _report\n printFriendlyStack\n```\n\n##### 语法\n\n```javascript\nfesErrorMonitor(event)\n```\n\n##### 参数\n\n```\n@param {*} e 错误事件\n```\n\n### 示例\n\n<ins>内部错误示例 1</ins>\n\n```javascript\nfunction preload() {\n // 由于在preload中调用background()而引发\n // 错误\n background(200);\n}\n```\n\nFES将在控制台中生成以下消息：\n\n> 🌸 p5.js说：当调用background时（位于sketch.js的第4行\\[http\\://localhost:8000/lib/empty-example/sketch.js:4:3]），在p5js库内部发生了一个错误，错误消息为“无法读取未定义的属性'background'”。（如果没有另外说明，这可能是由于从preload中调用了background。preload函数中除了load函数（loadImage、loadJSON、loadFont、loadStrings等）之外不应该有其他内容。）（[https://p5js.org/reference/p5/preload）](https://p5js.org/reference/p5/preload）)\n\n<ins>内部错误示例 2</ins>\n\n```javascript\nfunction setup() {\n cnv = createCanvas(200, 200);\n cnv.mouseClicked();\n}\n```\n\nFES将在控制台中生成以下消息：\n\n> 🌸 p5.js说：当调用mouseClicked时（位于sketch.js的第3行\\[http\\://localhost:8000/lib/empty-example/sketch.js:3:7]），在p5js库内部发生了一个错误，错误消息为“无法读取未定义的属性'bind'”。（如果没有另外说明，这可能是由于传递给mouseClicked的参数存在问题。）（[https://p5js.org/reference/p5/mouseClicked）](https://p5js.org/reference/p5/mouseClicked）)\n\n<ins>用户示例中的作用域错误示例</ins>\n\n```javascript\nfunction setup() {\n let b = 1;\n}\nfunction draw() {\n b += 1;\n}\n```\n\nFES将在控制台中生成以下消息：\n\n> 🌸 p5.js说：由于当前范围内未定义“b”，出现了一个错误（位于sketch.js的第5行\\[http\\://localhost:8000/lib/empty-example/sketch.js:5:3]）。如果在代码中定义了它，请检查其作用域、拼写和大小写（JavaScript区分大小写）。更多信息：[https://p5js.org/examples/data-variable-scope.html](https://p5js.org/examples/data-variable-scope.html) [https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not\\_Defined#What\\_went\\_wrong](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_Defined#What_went_wrong)\n\n<ins>用户示例中的拼写错误示例</ins>\n\n```javascript\nfunction setup() {\n colour(1, 2, 3);\n}\n```\n\nFES将在控制台中生成以下消息：\n\n> 🌸 p5.js说：您可能错误地将“colour”写成了“color”（位于sketch.js的第2行\\[http\\://localhost:8000/lib/empty-example/sketch.js:2:3]）。如果希望使用p5.js中的函数，请将其更正为color（[https://p5js.org/reference/p5/color）。](https://p5js.org/reference/p5/color）。)\n\n##### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `fesCodeReader()`\n\n##### 描述\n\n`fesCodeReader()` 函数用于检查以下情况：(1) 是否在 `setup()` 和/或 `draw()` 函数之外使用了任何 p5.js 的常量或函数，以及 (2) 是否重新声明了任何 p5.js 的保留常量或函数。\n\n生成并打印一个友好的错误消息，错误类型为：`fes.sketchReaderErrors.reservedConst`、`fes.sketchReaderErrors.reservedFunc`。\n\n在 `setup()` 和 `draw()` 函数中执行以下操作：\n\n* 提取用户编写的代码\n* 将代码转换为代码行的数组\n* 捕获变量和函数声明\n* 检查声明的函数/变量是否为保留的 p5.js 常量或函数，并进行报告。\n\n该函数在触发 `load` 事件时执行。\n\n##### 示例\n\n<ins>重新定义 p5.js 保留常量的示例</ins>\n\n```javascript\nfunction setup() {\n // PI 是 p5.js 的保留常量\n let PI = 100;\n}\n```\n\nFES 将在控制台生成以下消息：\n\n> 🌸 p5.js 提示：您使用了 p5.js 的保留变量 \"PI\"，请确保将变量名更改为其他名称。([https://p5js.org/reference/p5/PI](https://p5js.org/reference/p5/PI))\n\n<ins>重新定义 p5.js 保留函数的示例</ins>\n\n```javascript\nfunction setup() {\n // text 是 p5.js 的保留函数\n let text = 100;\n}\n```\n\nFES 将在控制台生成以下消息：\n\n> 🌸 p5.js 提示：您使用了 p5.js 的保留函数 \"text\"，请确保将函数名更改为其他名称。\n\n##### 位置\n\ncore/friendly\\_errors/sketch\\_reader.js\n\n### `checkForUserDefinedFunctions()`\n\n##### 描述\n\n`checkForUserDefinedFunctions()` 函数用于检查是否使用了错误的大小写写法来调用任何用户定义的函数（如 `setup()`、`draw()`、`mouseMoved()` 等）。\n\n生成并打印一个友好的错误消息，错误类型为 `fes.checkUserDefinedFns`。\n\n##### 语法\n\n```javascript\ncheckForUserDefinedFunctions(context)\n```\n\n##### 参数\n\n```\n@param {*} context 当前默认上下文。\n 在“全局模式”下设置为 window，在“实例模式”下设置为 p5 实例。\n```\n\n##### 示例\n\n```javascript\nfunction preLoad() {\n loadImage('myimage.png');\n}\n```\n\nFES 将在控制台生成以下消息：\n\n> 🌸 p5.js 提示：似乎您可能误写了 preLoad，应该是 preload。如果这不是您的意图，请进行更正。([https://p5js.org/reference/p5/preload](https://p5js.org/reference/p5/preload))\n\n##### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `_friendlyAutoplayError()`\n\n##### 描述\n\n`_friendlyAutoplayError()` 是在与播放媒体（例如视频）相关的错误发生时内部调用的函数，最常见的原因是浏览器的自动播放策略。\n\n生成并打印一个友好的错误消息，错误类型为 `fes.autoplay`。\n\n##### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n### `helpForMisusedAtTopLevelCode()`\n\n##### 描述\n\n`helpForMisusedAtTopLevelCode()` 是由 `fes_core.js` 在窗口加载时调用的函数，用于检查是否在 `setup()` 或 `draw()` 之外使用了 p5.js 的函数。\n\n生成并打印一个友好的错误消息，错误类型为 `fes.misusedTopLevel`。\n\n##### 参数\n\n```\n@param {*} err 错误事件\n@param {Boolean} log false\n```\n\n##### 位置\n\ncore/friendly\\_errors/fes\\_core.js\n\n## 开发者备注：开发者的注释\n\n#### 生成友好错误消息的其他 FES 函数\n\n* `friendlyWelcome()` 直接打印到控制台。（默认情况下隐藏。）\n\n* `stacktrace.js` 包含从 [https://github.com/stacktracejs/stacktrace.js](https://github.com/stacktracejs/stacktrace.js) 借用的代码，用于解析错误堆栈。这是由 `fesErrorMonitor()` 和 `handleMisspelling()` 调用的。\n\n#### 为参数验证准备 p5.js 对象\n\n* 任何将用于参数验证的 p5.js 对象都需要在类声明中为 `name` 参数（对象的名称）分配一个值，例如：\n\n```javascript\np5.newObject = function(parameter) {\n this.parameter = 'some parameter';\n this.name = 'p5.newObject';\n};\n```\n\n* 内联文档：允许的参数类型包括 `Boolean`、`Number`、`String`，以及对象的名称（参见上述项目符号）。对于任何数组参数，请使用 `Array`。如果需要，可以在描述部分解释允许的特定类型的数组参数（例如 `Number[]`、`String[]`）。\n* 目前支持的类类型（具有其 `name` 参数）：`p5.Color`、`p5.Element`、`p5.Graphics`、`p5.Renderer`、`p5.Renderer2D`、`p5.Image`、`p5.Table`、`p5.TableRow`、`p5.XML`、`p5.Vector`、`p5.Font`、`p5.Geometry`、`p5.Matrix`、`p5.RendererGL`。\n\n#### FES 的性能问题\n\n默认情况下，p5.js 启用了 FES，而在 `p5.min.js` 中禁用了 FES，以防止 FES 函数导致进程变慢。错误检查系统可能会显著降低代码的执行速度（在某些情况下高达约 10 倍）。请参阅[友好错误性能测试](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/)。\n\n您可以在代码的顶部添加一行代码来禁用此功能：\n\n```javascript\np5.disableFriendlyErrors = true; // 禁用 FES\n\nfunction setup() {\n // 执行设置操作\n}\n\nfunction draw() {\n // 执行绘图操作\n}\n```\n\n请注意，这将禁用导致性能下降的 FES 部分（例如参数检查）。没有性能成本的友好错误（例如在文件加载失败时给出描述性错误，或者在尝试在全局空间中覆盖 p5.js 函数时发出警告）将保持原样。\n\n## 已知限制\n\n* FES 可能仍然会导致假阴性的情况。这通常是由于设计与实际使用情况之间的不匹配而导致的（例如，绘图函数最初设计用于在 2D 和 3D 设置中可以互换使用），例如：\n\n```javascript\nconst x3; // 未定义\nline(0, 0, 100, 100, x3, Math.PI);\n```\n\n将逃过 FES 的检测，因为 `line()` 的内联文档中有一个可接受的参数模式（`Number`、`Number`、`Number`、`Number`）用于在 2D 设置中绘制。这也意味着当前版本的 FES 不会检查诸如 `_renderer.isP3D` 等环境变量。\n\n* FES 仅能检测到使用 `const` 或 `var` 声明时覆盖的全局变量。如果使用 `let`，则无法检测到。由于 `let` 实例化变量的方式，目前无法解决这个问题。\n\n* 目前，描述为 **`fesErrorMonitor()`** 下的功能仅在 Web 编辑器上或在本地服务器上运行时有效。有关更多详细信息，请参阅请求合并[#4730](https://github.com/processing/p5.js/pull/4730/)。\n\n* `sketch_reader()` 可能会在提取用户代码中的变量/函数名称时遗漏一些情况（例如，当所有代码都写在一行中时）。\n\n## 未来工作的思考\n\n* 为 Web 编辑器重新引入颜色编码。\n\n* 增加更多单元测试以实现全面的测试覆盖。\n\n* 更直观、更精确的输出信息。\n\n* 所使用的所有颜色应对色盲友好。\n\n* 识别更多常见的错误类型，并与 FES 进行概括（例如 `bezierVertex()`、`quadraticVertex()` - 需要初始化的对象未启动；检查 `nf()`、`nfc()`、`nfp()`、`nfs()` 的 Number 参数是否为正数）。\n\n* 扩展全局错误捕获。这意味着捕获浏览器输出到控制台的错误，并与友好的消息进行匹配。`fesErrorMonitor()` 可以处理一些特定类型的错误，但对于更多类型的支持会很有帮助。\n\n* 改进 `sketch_reader.js` 的代码读取和提取变量/函数名的功能（提取用户在代码中声明的函数和变量名）。例如，如果所有代码都写在一行中，`sketch_reader.js` 就无法正确提取变量/函数名。我们欢迎未来的提案，以识别所有这些\"逃逸\"情况，并添加单元测试以捕捉它们。\n\n* `sketch_reader.js` 可以扩展，可以添加新功能（例如：当用户在 `draw()` 函数中声明变量时向用户发出警告）。以更好地帮助用户。\n\n```javascript\n// 这段代码片段使用新函数包装了 window.console 方法，以修改其功能\n// 目前尚未实现，但可以使用它来提供更好格式的错误消息\nconst original = window.console;\nconst original_functions = {\n log: original.log,\n warn: original.warn,\n error: original.error\n}\n[\"log\", \"warn\", \"error\"].forEach(function(func){\n window.console[func] = function(msg) {\n // 在包装函数中处理捕获的消息，然后调用原始函数\n original_functions[func].apply(original, arguments)\n };\n});\n```\n\n* 从内联文档生成 FES 参考文档。这个生成的参考文档可以作为一个单独的系统，与我们主要的[p5.js参考文档]分开，将作为Sketch和控制台的函数分开，以减少可能的混淆。\n\n[p5.js参考文档]: https://p5js.org/reference/\n"},"🌸 p5.js友好错误系统（FES）\n":{"relativeUrl":"/contribute/friendly_error_system","description":"\n\n## 概述\n\n友好错误系统（FES，🌸）旨在通过提供简单友好的错误信息，帮助新手程序员。它通过在错误消息中添加替代描述和有用的参考链接，补充了浏览器控制台的错误消息。\n\nFES将消息打印在控制台窗口中，可以在[p5.js Web Editor]和浏览器的JavaScript控制台中看到。单个压缩文件的p5（p5.min.js）不包含FES。\n\n[p5.js Web Editor]: https://editor.p5js.org/\n\n## 降低调试障碍\n\n工具的设计应该符合将使用它的人的需求。作为旨在降低调试障碍的工具，FES的设计也不例外。\n\n评估我们现有设计的最佳方法是直接听取使用p5.js的人们的意见。我们在2021年进行了社区调查，以收集对友好错误的反馈和未来期望。\n\n我们相信来自社区成员的见解对于我们的贡献者将是有帮助的。您可以通过摘要漫画或完整报告来查看结果：\n\n* [21-22 FES调查报告漫画]\n* [21-22 FES调查完整报告]\n\n[21-22 FES调查报告漫画]: https://almchung.github.io/p5jsFESsurvey/\n\n[21-22 FES调查完整报告]: https://observablehq.com/@almchung/p5-fes-21-survey\n\n## 编写友好错误信息\n\n如何通过编写和翻译错误消息来为p5.js库做出贡献？\n\nFES是p5.js\\[国际化]工作的一部分。我们通过基于[i18next]的`translator()`函数生成所有FES消息的内容。这种动态错误消息生成适用于所有语言，包括p5.js的默认语言英语。\n\n我们欢迎来自世界各地的贡献！🌐\n\n[internationalization]: https://github.com/processing/p5.js/blob/main/contributor_docs/internationalization.md\n\n[i18next]: https://www.i18next.com/\n\n#### 编写最佳实践\n\nFES消息编写者应该优先考虑降低理解错误消息的障碍，增加调试过程的可访问性。\n\n[Friendly Errors i18n Book]讨论了在跨文化i18n环境中编写友好错误消息的挑战和最佳实践。以下是书中的一些要点：\n\n* 了解您的受众：不要对我们的错误消息的受众做出假设。尝试了解谁在使用我们的库以及他们如何使用它。\n* 保持语言包容性。我们努力使错误消息“友好”，这对您来说意味着什么？在您的语言中寻找可能的偏见和伤害。遵守[p5.js行为准则]。\n* 尽量使用简单的句子。考虑将句子分成较小的块，以最大程度地利用i18next的[插值]功能。\n* 优先考虑跨文化沟通，并在不同语言之间提供出色的体验。避免使用成语。\n* 逐步介绍一个技术概念或技术术语。保持技术写作的一致性。尝试链接一个用简明实例编写的面向初学者的外部资源。\n\n[Friendly Errors i18n Book]: https://almchung.github.io/p5-fes-i18n-book/\n\n[插值]: https://www.i18next.com/translation-function/interpolation\n\n[p5.js行为准则]: https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct\n\n[专家的盲点]: https://tilt.colostate.edu/TipsAndGuides/Tip/181\n\n[Friendly Errors i18n Book]是一个公共项目，您可以通过这个单独的[repo]为该书做出贡献。\n\n[repo]: https://github.com/almchung/p5-fes-i18n-book\n\n#### 翻译文件的位置\n\n`translator()`基于i18next，从`src/core/internationalization.js`中导入。它通过从JSON翻译文件中查找文本数据来生成消息：\n\n```\ntranslations/{{检测到的语言代码，默认为en}}/translation.json\n```\n\n示例：\n如果检测到的浏览器语言环境是韩语（语言标识符：`ko`），`translator()`将从`translations/ko/translation.json`中读取翻译的文本块。然后，`translator()`将将文本块组合成最终的消息。\n\n语言标识符还可以包括地区信息，例如`es-PE`（秘鲁的西班牙语）。\n\n#### 翻译文件的结构\n\n`translation.json`具有[i18next使用的格式](https://www.i18next.com/misc/json-format/)。\n\n翻译文件的基本格式是在花括号`{}`中使用双引号`\"\"`括起来的键和值（消息）：\n\n```json\n{ \"key\": \"value\" }\n```\n\n例如，我们有一个以此格式保存的ASCII标志：\n\n```json\n\"logo\": \" _ \\n /\\\\| |/\\\\ \\n \\\\ ` ' / \\n / , . \\\\ \\n \\\\/|_|\\\\/ \\n\\n\"\n```\n\ni18next支持插值，允许我们传递一个变量以动态生成消息。我们使用两个花括号`{{}}`来设置变量的占位符：\n\n```json\n\"greeting\": \"你好，{{who}}！\"\n```\n\n这里，键是`greeting`，变量名是`who`。\n\n为了动态生成该消息，我们需要传递一个值：\n\n```javascript\ntranslator('greeting', { who: 'everyone' } );\n```\n\n由`translator`生成的结果将如下所示：\n\n```\n你好，everyone！\n```\n\n这是`fes`中的一个项`fileLoadError`，演示了插值：\n\n```json\n\"image\": \"看起来加载图像时出现问题。{{suggestion}}\"\n```\n\n为了动态生成最终的消息，FES将使用该键和预先生成的`suggestion`值调用`translator()`。\n\n```javascript\ntranslator('fes.fileLoadError.image', { suggestion });\n```\n\n#### 如何添加或修改翻译\n\n[国际化文档]提供了逐步指南，介绍了如何添加和修改翻译文件。\n\n[国际化文档]: https://github.com/processing/p5.js/blob/main/contributor_docs/internationalization.md\n\n## 理解FES的工作原理\n\n在本节中，我们将概述FES如何生成和显示消息。有关FES函数的更详细信息，请参阅我们的[FES参考+开发笔记]。\n\n[FES参考+开发笔记]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md\n\n#### 概览\n\np5.js从多个位置调用FES，以处理不同的情况，包括：\n\n* 浏览器引发错误。\n* 用户代码调用p5.js API的函数。\n* 其他用户可以从帮助消息中受益的自定义情况。\n\n#### FES代码位置\n\n您可以在以下位置找到FES的核心组件：\n`src/core/friendly_errors`。\n您可以在以下位置找到`translator()`使用的翻译文件：\n`translations/`。\n\n#### FES消息生成器\n\n这些函数主要负责捕获错误并生成FES消息：\n\n* [`_friendlyFileLoadError()`] 捕获文件加载错误。\n* [`_validateParameters()`] 根据内联文档检查p5.js函数的输入参数。\n* [`_fesErrorMontitor()`] 处理全局错误。\n\n如需完整参考，请查阅我们的[开发笔记]。\n\n[`_friendlyFileLoadError()`]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md#_friendlyfileloaderror\n\n[`_validateParameters()`]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md#validateparameters\n\n[`_fesErrorMontitor()`]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md#feserrormonitor\n\n[开发笔记]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md\n\n#### FES消息显示器\n\n`fes_core.js/_friendlyError()` 在控制台中打印生成的友好错误消息。例如：\n\n```javascript\np5._friendlyError(\n translator('fes.globalErrors.type.notfunc', translationObj)\n);\n```\n\n该函数可以在p5的任何地方调用。\n\n## 关闭FES\n\n可能有些情况下您希望[禁用FES以提升性能]。\n\n当`p5.disableFriendlyErrors`设置为`true`时，您可以关闭FES。\n\n示例：\n\n```javascript\np5.disableFriendlyErrors = true;\n\nfunction setup() {\n createCanvas(100, 50);\n}\n```\n\np5的单个压缩文件（即p5.min.js）会自动省略FES。\n\n[禁用FES以提升性能]: https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes\n"},"如何添加友好错误信息\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* 正在寻找一种支持友好错误信息的方法？请按照此步骤指南操作！ */}\n\n\n\n本指南将引导您完成使用友好错误系统（FES，🌸）编写友好错误（FE）信息的步骤。如果您的新方法支持自定义错误处理或为用户输出自定义日志，您可能需要为其编写友好错误信息。所有这些信息都是通过基于[i18next](https://www.i18next.com/)的`translator()`方法动态生成的，这使得p5.js能够提供与用户环境匹配的错误信息翻译。\n\n## ❗️`p5.min.js`中没有翻译\n\n* 我们已将 \\[i18next] 集成到我们的代码库中。但是，它的使用仅限于p5.js的未压缩版本。压缩版本`p5.min.js`仅包含我们国际化代码的基本框架，不包含实际实现。\n* 在Browserify构建任务和`src/core/init.js`中，有特定的逻辑来避免在压缩版本中加载或设置翻译。因此，添加翻译不会影响`p5.min.js`的大小。\n\n## 前提条件\n\n在开始之前，请确定以下哪种情况最符合您的需求：\n\n* 您正在添加一个需要特定数量和类型参数的新方法。\n * 请前往[✅使用FES添加参数验证](#-使用fes添加参数验证/)。\n* 您的方法涉及加载特定类型的文件，并且您需要捕获特定于加载文件的错误。\n * 请前往[📥使用FES添加文件加载错误](#-使用fes处理文件加载错误消息/)。\n* 您已编写代码检测错误何时发生，并希望显示友好错误。\n * 请前往[🐈使用FES添加库错误信息](#-使用fes添加库错误信息/)。\n\n## ✅ 使用FES添加参数验证\n\n### 第1步 – 再次检查您的内联文档\n\n首先，确保您的方法有[内联文档](../contributing_to_the_p5js_reference/)，其中包含完整的参数列表。\n\n例如，`circle()`方法有以下内联文档，以方法描述开始，后面是参数列表，然后是示例代码：\n\n```\n/**\n * 在画布上绘制一个圆。圆是一个圆形形状。\n * 圆边缘上的每个点到其中心的距离相同。\n * 默认情况下，前两个参数设置圆中心的位置。\n * 第三个参数设置形状的宽度和高度（直径）。\n * 可以使用<a href=\"#/p5/ellipseMode\">ellipseMode()</a>函数更改原点。\n *\n * @method circle\n * @param {Number} x 圆中心的x坐标。\n * @param {Number} y 圆中心的y坐标。\n * @param {Number} d 圆的直径。\n * @chainable\n * @example\n * <div>\n * <code>\n * circle(30, 30, 20);\n * describe('灰色画布中央带有黑色轮廓的白色圆圈。');\n * </code>\n * </div>\n *\n */\n```\n\n从上面的例子中，FES将查找参数列表以验证参数：\n\n```\n * @method circle\n * @param {Number} x 圆中心的x坐标。\n * @param {Number} y 圆中心的y坐标。\n * @param {Number} d 圆的直径。\n```\n\n### 第2步 – 调用`p5._validateParameters()`\n\n现在回到您方法的实现，按照以下格式调用`validate_params()`：`p5._validateParameters('[您方法的名称]', arguments);`。\n\n例如，以下代码将验证`circle()`的参数并生成FE信息：\n\n```js\np5._validateParameters('circle', arguments);\n```\n\n通常在方法中首先调用此函数，以避免在提供的参数不符合预期时继续执行。例如，它在`circle()`方法的第一行被调用：\n\n```js\np5.prototype.circle = function() {\n p5._validateParameters('circle', arguments);\n const args = Array.prototype.slice.call(arguments, 0, 2);\n args.push(arguments[2]);\n args.push(arguments[2]);\n return this._renderEllipse(...args);\n};\n```\n\n### 第3步 – 构建并测试您的代码以应对典型情况\n\n要查看参数验证的效果，请使用`npm run build`重新构建`p5.js`。\n\n要测试您的代码，找到`/lib/empty-example/index.html`并将脚本`../p5.min.js`替换为`../p5.js`，如下例所示：\n\n```js\n<script src=\"../p5.js\"></script>\n```\n\n请注意，`lib/p5.min.js`不支持FE信息，因此请使用`lib/p5.js`进行测试。\n\n然后，编辑`/lib/empty-example/sketch.js`来测试典型的参数错误情况：\n\n1. 缺少参数\n2. 参数数量错误\n3. 参数类型错误\n\n以下是测试`circle()`方法表达式的示例：\n\n```js\n// 缺少参数\ncircle(100);\n// 参数数量错误（超过所需数量）\n// 注意这段代码仍然能成功绘制一个圆。\ncircle(100, 100, 100, 1000);\n// 参数类型错误\ncircle(100, 100, 'hello');\n```\n\n上面的代码应该生成以下FE信息：\n\n```\n🌸 p5.js says: [sketch.js, line 9] circle()需要至少3个参数，但只收到了1个。 (https://p5js.org/reference/p5/circle)\n🌸 p5.js says: [sketch.js, line 14] circle()需要不超过3个参数，但收到了4个。 (https://p5js.org/reference/p5/circle)\n🌸 p5.js says: [sketch.js, line 12] circle()的第三个参数需要Number类型，但收到了string类型。 (https://p5js.org/reference/p5/circle)\n```\n\n恭喜🎈！您现在已经完成了为新方法添加参数验证。\n\n## 📥 使用FES处理文件加载错误消息\n\n### 第1步 – 检查文件加载错误情况列表<a id=\"step-1\" />\n\n文件加载错误分为多个不同的情况，以便在错误发生时提供尽可能有帮助的信息。这使p5.js能够在不同情况下显示不同的错误。例如，当它无法读取字体文件中的数据时，它会显示一个与尝试加载过大无法读取的文件时不同的错误。\n\n这些情况都有自己的编号，可以在`core/friendly_errors/file_errors.js`文件的顶部找到。\n\n当您希望添加文件加载错误时，首先查看`core/friendly_errors/file_errors.js`中的`fileLoadErrorCases`，看看是否有适用于您情况的现有案例。\n\n例如，您可能正在加载基于字符串的文件。这对应于`fileLoadErrorCases`中的`case 3`：\n\n```js\ncase 3:\n return {\n message: translator('fes.fileLoadError.strings', {\n suggestion\n }),\n method: 'loadStrings'\n };\n```\n\n如果您正在处理的场景已经有相关的编号，请记住案例编号，并跳至[**第4步**](#step-4)。如果您在`fileLoadErrorCases`中找不到匹配的情况，请转到[**第2步**](#step-2)创建新的情况。\n\n### 第2步 – 在问题面板上讨论添加新的错误情况<a id=\"step-2\" />\n\n接下来，您将提交一个问题工单，讨论创建新的情况或确认您的情况不是现有情况的重复。编写一个简短的段落描述您的新方法以及用户可能遇到这种特定文件加载错误的场景。然后再写一个简短的段落描述您方法中的错误处理以及它加载的文件类型。\n\n转到[问题面板](https://github.com/processing/p5.js/issues/)，按\"New Issue\"按钮，然后选择\"Issue: 💡 Existing Feature Enhancement\"选项。应该出现一个空表单。\n\n添加一个标题，如\"向`fileLoadErrorCases`添加新情况：\\[您的文件加载错误情况的高级描述]\"。对于\"Increasing access\"部分，输入您在此步骤开始时准备的简短段落，描述典型情况。\n\n然后，在\"Most appropriate sub-area of p5.js?\"问题中勾选\"Friendly Errors\"框。最后，在\"Feature enhancement details\"部分，输入详细说明错误处理和加载文件类型的段落。\n\n### 第3步 – 向`fileLoadErrorCases`添加新情况<a id=\"step-3\" />\n\n在与维护者确认后，您可以向`fileLoadErrorCases`添加新情况。在`fileLoadErrorCases`的`switch`语句中，转到情况列表的末尾，并按照以下格式添加新情况：\n\n```\ncase {{next available case number}}:\n return {\n message: translator('fes.fileLoadError.{{tag name}}', {\n suggestion\n }),\n method: '{{name of your method}}'\n };\n```\n\n在上面的例子中，双尖括号（`{{}}`）中的任何内容都是您应该替换的内容。例如，如果前一个情况编号是11，您的代码应该以`case 12:`开始，最终代码中没有双括号。\n\n### 第4步 – 调用`p5._friendlyFileLoadError()`<a id=\"step-4\" />\n\n添加您的情况后，您现在可以在错误处理语句中调用`p5._friendlyFileLoadError([情况编号], [文件路径])`。\n\n例如，请查看`loadStrings()`方法加载基于字符串的文件（对应于`fileLoadErrorCases`中的`case 3`）。`loadStrings()`方法使用[`httpDo.call()`](https://p5js.org/reference/p5/httpDo/)和一个在文件错误情况下执行的自定义回调方法：\n\n```js\np5.prototype.httpDo.call(\n this,\n args[0],\n 'GET',\n 'text',\n data => {\n // [... 省略的代码 ...]\n },\n function(err) {\n // 错误处理\n p5._friendlyFileLoadError(3, args[0]);\n // [... 省略的代码 ...]\n }\n );\n```\n\n我们可以看到错误回调函数如何调用`p5._friendlyFileLoadError(3, [the first argument, which is a file path])`来生成以下FE信息：\n\n```\n🌸 p5.js says: 看起来加载文本文件时出现了问题。请检查文件路径(assets/wrongname.txt)是否正确，尝试在线托管文件，或运行本地服务器。\n+ 更多信息：https://github.com/processing/p5.js/wiki/Local-server\n```\n\n恭喜🎈！您现在已经完成为带有文件加载的方法实现FE。\n\n## 🐈 使用FES添加库错误信息\n\n### 第1步 – 编写代码检测错误何时发生\n\n首先，查找用户在使用您的方法时可能遇到的典型错误情况，并创建逻辑来捕获这些情况。此外，如果适用，请考虑提供故障保护措施，例如为缺少的参数使用默认值。确定对用户有帮助的FE信息的情况。\n\n[MDN Web文档中的这个指南](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/)提供了关于控制流和JavaScript原生错误处理结构的良好概述。\n\n\\\\\n\n### 第2步 – 调用`p5._friendlyError()`\n\n要生成FE信息，您只需要在错误处理语句中按照以下格式调用`p5._friendlyError('[custom message]', '[method name]');`。将方括号内（包括方括号）的所有内容替换为您自己的值。\n\n例如，以下代码将为`bezierVertex()`生成FE信息：\n\n```js\np5._friendlyError(\n '在调用bezierVertex()之前必须先使用vertex()',\n 'bezierVertex'\n);\n```\n\n这应该生成以下FE信息：\n\n```\n🌸 p5.js says: [sketch.js, line 19] 当调用bezierVertex时，p5js库内部发生了一个错误，错误信息为\"在调用bezierVertex()之前必须先使用vertex()\"。如果没有特别说明，可能是传递给bezierVertex的参数有问题。 (https://p5js.org/reference/p5/bezierVertex) \n```\n\n恭喜🎈！您现在已经完成了为您的方法添加库错误信息。\n\n## ✏️ 为国际受众编写友好错误信息\n\nFES信息编写者应优先降低理解错误信息的障碍，提高调试过程的可访问性。以下是一个例子：\n\n```\n🌸 p5.js says: [sketch.js, line 7] circle() was expecting at least 3 arguments, but received only 1. (https://p5js.org/reference/p5/circle) \n```\n\n如果浏览器设置为`ko-KR`（韩语）区域设置，上述参数验证信息将以韩语显示：\n\n```\n🌸 p5.js says: [sketch.js, 줄7] 최소 3개의 인수(argument)를 받는 함수 circle()에 인수가 1개만 입력되었습니다. (https://p5js.org/reference/p5/circle) \n```\n\n[友好错误i18n指南](https://almchung.github.io/p5-fes-i18n-book/)讨论了在跨文化i18n上下文中编写友好错误信息的挑战和最佳实践。以下是该指南的主要观点：\n\n* 了解您的受众：不要对错误信息的受众做出假设。尝试了解谁在使用我们的库以及他们如何使用它。\n* 保持语言包容性。我们努力使错误信息\"友好\"，这对您意味着什么？寻找语言中可能的偏见和伤害。\n* 尽可能使用简单的句子。考虑将句子分解成更小的块，以最好地利用[i18next的插值功能](https://www.i18next.com/translation-function/interpolation/)。\n* 优先考虑跨文化交流，并提供跨语言的良好体验。避免使用比喻手法。\n* 一次只介绍一个技术概念或技术术语。保持技术写作的一致性。尝试链接一个以初学者友好语言编写的外部资源，其中包含大量简短、实用的示例。\n\n[友好错误i18n指南](https://almchung.github.io/p5-fes-i18n-book/)是一个公共项目，您可以通过[这个单独的仓库](https://github.com/almchung/p5-fes-i18n-book/)为该指南做出贡献。\n\n## 🔍 可选：单元测试\n\n请考虑为您的新FE信息添加单元测试，以便尽早发现错误并确保您的代码向用户传递预期的信息。此外，单元测试是确保其他贡献者的新代码不会意外破坏或干扰您的代码功能的好方法。以下是几个关于单元测试的好指南：\n\n* [单元测试和测试驱动开发](https://archive.p5js.org/learn/tdd.html)，作者Andy Timmons\n* [贡献者文档：单元测试](../unit_testing/)\n\n示例：\n\n```js\nsuite('validateParameters: multi-format', function() {\n test('color(): 可选参数，类型不正确', function() {\n assert.validationError(function() {\n p5._validateParameters('color', [0, 0, 0, 'A']);\n });\n });\n}\n```\n\n## 结论\n\n在本指南中，我们提供了为多种不同情况添加FE信息的分步说明，包括：\n\n* 添加参数验证，\n* 处理文件加载错误，以及\n* 为方法添加库错误信息。\n\n此外，我们很高兴通过2021-2022年进行的FES调查分享我们社区的见解。调查结果以两种格式提供：\n\n* [21-22 FES调查报告漫画](https://almchung.github.io/p5jsFESsurvey/)\n* [21-22 FES调查完整报告](https://observablehq.com/@almchung/p5-fes-21-survey/)\n\n有关FES设计和技术方面的更深入信息，请参阅[FES自述文档](../friendly_error_system/)。该文档提供了详细的解释和开发说明，对那些寻求更深入了解FES的人有所帮助。\n"},"发布流程\n":{"relativeUrl":"/contribute/release_process","description":"\n\n## 方法\n\n* 我们遵循 [semver](https://semver.org/) 的版本控制模式，即遵循以下版本控制模式：`主版本号:次版本号:修订号`。\n\n## 要求\n\n* 在您的系统上安装了 Git、node.js 和 NPM\n* 您能够构建库并具有对远程仓库的推送权限\n* 在远程仓库上设置了 `NPM_TOKEN` 密钥\n* 在远程仓库上设置了 `ACCESS_TOKEN` 密钥\n\n## 使用方法\n\n```sh\n$ git checkout main\n$ npm version [major|minor|patch] # 选择适当的版本标签\n$ git push origin main\n$ git push origin v1.4.2 # 用刚刚创建的版本号替换此处的版本号\n```\n\n实际的发布步骤全部在 Github Actions CI 上运行。操作完成后，您可能希望在 Github 上查看发布，并根据需要修改发布说明（例如，将所有-contributor bot 的提交与其他提交分开）。\n\n## 安全令牌\n\n为了完全运行发布步骤，必须设置两个[仓库密钥](https://docs.github.com/cn/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)如下。\n\n* `NPM_TOKEN` 可以按照[此处](https://docs.npmjs.com/creating-and-viewing-access-tokens/)的步骤创建，以创建一个读取和发布令牌。令牌所属的用户必须具有对 NPM 项目的发布访问权限。\n* `ACCESS_TOKEN` 是一个个人访问令牌，用于访问 `p5.js`、`p5.js-website` 和 `p5.js-release` 仓库。可以按照[此处](https://docs.github.com/cn/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/)的步骤生成令牌，对于范围选择只选择 `public_repo`。建议使用组织特定的帐户进行操作（即非个人帐户），并仅将该帐户的写入访问权限限制在所需的仓库上。\n\n## 实际发生的情况\n\nGithub Actions CI 上的[\"New p5.js release\"](../.github/workflows/release.yml)操作是在匹配 `v*.*.*` 格式的标签上触发的，该标签是通过 `npm version ___` 命令创建的。\n\n一旦触发，它将执行以下步骤：\n\n1. 克隆仓库，设置 node.js，提取版本号，使用 `npm` 安装依赖项，并使用 `npm test` 运行测试。\n2. 创建将上传到 Github 发布中的发布文件。\n3. 在 Github 上创建发布并发布最新版本到 NPM。\n4. 更新网站文件\n 1. 克隆网站仓库\n 2. 将 `data.json` 和 `data.min.json` 复制到正确的位置\n 3. 将 `p5.min.js` 和 `p5.sound.min.js` 复制到正确的位置\n 4. 根据最新版本号更新 `data.yml` 文件\n 5. 根据 `data.min.json` 更新 `en.json` 文件\n 6. 提交并推送更改到网站仓库\n5. 更新 Bower 文件\n 1. 克隆 Bower 发布仓库\n 2. 将所有库文件复制到正确的位置\n 3. 提交并推送更改到网站仓库\n\n原则上，我们尽可能将尽可能多的步骤集中在一个地方运行，即在 CI 环境中运行。如果需要在发布时仅运行的新步骤，则应在 CI 工作流程中定义，而不是作为构建配置的一部分。\n\n## 测试\n\n由于发布步骤在 CI 中运行，测试它们可能会有些困难。使用 [act](https://github.com/nektos/act/) 可以在本地测试步骤的运行（在开发过程中就是这样测试的），但需要对工作流定义进行一些临时修改，我们将在此大致记录下来，因为确切的步骤可能随时间而改变。\n\n由于没有安装所有系统要求来运行 mocha Chrome 测试，测试步骤将不会运行。在设置其他环境之前，可能需要使用 `apt` 安装一些系统依赖项。请注意错误消息，它们应该提供有关缺少哪些软件包的一些信息。\n\n为避免意外推送不必要的更改，应将涉及将更改推送到远程仓库的步骤注释掉。\n"},"管理员指南\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* 了解如何管理和审查对 p5.js 的贡献。 */}\n\n\n\n无论你是刚加入我们的管理员，还是 p5.js 经验丰富的维护者，或者介于两者之间，本指南包含了许多信息、技巧和诀窍，将帮助你和其他贡献者有效地为 p5.js 做出贡献。除非另有说明，这里所写的大部分内容都是指南，这意味着你可以根据自己的工作流程来适应这里所指示的做法。\n\n## 目录\n\n* [Issues](#Issues)\n * [Bug 报告](#bug-报告/)\n * [功能请求](#功能请求/)\n * [功能增强](#功能增强/)\n * [讨论](#讨论/)\n* [拉取请求](#拉取请求/)\n * [简单修复](#简单修复/)\n * [Bug 修复](#bug-修复/)\n * [新功能/功能增强](#新功能功能增强/)\n * [Dependabot](#dependabot)\n* [构建过程](#构建过程/)\n * [主要构建任务](#主要构建任务/)\n * [杂项任务](#杂项任务/)\n* [发布过程](#发布过程/)\n* [提示与技巧](#提示与技巧/)\n * [回复模板](#回复模板/)\n * [GitHub CLI](#github-cli)\n * [管理通知](#管理通知/)\n\n***\n\n## Issues\n\n我们鼓励大多数源代码贡献以 issue 为起点，因此 issues 是大多数讨论发生的地方。你在审查 issue 时可以采取的步骤取决于 issue 的类型。该存储库使用 [GitHub issue 模板](../.github/ISSUE_TEMPLATE/)来更好地组织不同类型的 issues，并鼓励 issue 作者提供有关其问题的所有相关信息。审查 issue 的第一步通常是查看填写的模板，确定是否需要额外的信息（可能是因为某些字段未填写或使用了错误的模板）。\n\n### Bug 报告\n\n对于 bug 报告 issues，应使用 “发现了一个 bug” issue 模板。通常使用下面流程来处理 bug 报告：\n\n1. 复现 bug\n * 模板的目标是提供足够的信息，以便评审人员尝试复现所报告的 bug。\n * 如果报告的 bug 与所在存储库无关（p5.js或p5.js-website）。\n * 如果你有权访问相存储库，请将 issue 转移到相存储库。\n * 否则，请在 issue 中留下评论，说明 bug 报告应该提交到哪里（提供直接链接），然后关闭该 issue。\n * 评审 bug 报告的第一步是查看是否提供了足够的信息以复现 bug，并在有必要时尝试按描述复现 bug。\n2. 如果可以复现 bug：\n * 有时需要进行讨论以确定修复特定 bug 的最佳方法。有时这可能很简单，有时可能会比较棘手。在需要根据具体情况做出决定时，请参考 [p5.js 的设计原则](../design_principles/)。\n * 如果 issue 作者在 issue 中表示愿意提供修复方法：\n * 留下评论，批准 issue 作者来提供修复方案。使用 \"Assignee\" 旁边的右侧的齿轮按钮，将 issue 分配给 issue 作者。\n * 如果 issue 作者不愿意提供修复方法：\n * 留下评论确认 bug 是可以复现的。\n * 尝试自行修复或在 issue 上添加“需要帮助”的标签，以表明需要修复的 issue。\n3. 如果无法复现 bug：\n * 如果模板中尚未提供附加信息（如 p5.js 版本、浏览器版本、操作系统版本等），请要求提供附加信息。\n * 如果你的测试环境与 issue 中报告的不同（不同的浏览器或操作系统）：\n * 留下评论说明你无法在自己的特定环境中复现。\n * 在 issue 上添加 `需要帮助` 的标签，并要求其他具有 issue 指定设置的人尝试复现该 bug。\n * 有时候 bug 只在使用 web 编辑器时出现，而在本地测试时没有出现。在这种情况下，issue 应该转到 [web 编辑器存储库](https://github.com/processing/p5.js-web-editor/)。\n * 如果以后可以复现该 bug，则返回步骤2。\n4. 如果 bug 源于用户在 bug 报告中提供的代码，而不是 p5.js 的行为：\n * 确定是否可以通过改进 p5.js 的文档、代码实现或友好的错误系统来防止发生相同的错误。\n * 友好地将任何进一步的问题重定向到[论坛](https://discourse.processing.org/)或 [Discord](https://discord.com/invite/SHQ8dH25r9/)，如果对 p5.js 没有进一步的更改，则关闭 issue。\n\n### 功能请求\n\n对于功能请求 issues，应使用“新功能请求” issue 模板。通常使用下面流程来处理功能请求：\n\n1. 作为 p5.js 提高无障碍性的一部分，所有功能请求都必须说明它如何提高 p5.js 在该领域历史上被边缘化群体社区的可访问性。有关更多详细信息，请参阅[这里](../access/)。\n * 如果功能请求没有充分填写“提高无障碍性”字段，则可以要求 issue 作者说明该功能如何提高可访问性。\n * 功能的访问说明可以由社区中的其他成员（包括 issue 审阅者本人）提供。\n2. 根据以下标准评估所提出的新功能请求是否应包含在内。\n * 它是否符合 p5.js 的项目范围和[设计原则](../design_principles/)？\n * 比如说，可以考虑添加新的绘图原始形状的请求，但是采用基于浏览器的物联网协议的请求可能超出了范围。\n * 总体上，p5.js 的范围应相对较窄，以避免不常用的功能导致代码库过度臃肿。\n * 如果某个功能不符合 p5.js 的范围，则可以由 issue 的作者或社区中的其他成员将该功能实现为附加库。\n * 如果不清楚是否合适，建议制作一个附加程式库作为概念验证也不失为一个好主意。这有助于为用户提供使用该功能的方法，提供一个更具体的例子来说明其用途和重要性，而且不一定需要是完全集成的完整解决方案。如果合适，以后还可以将其集成到 p5.js 的核心中。\n * 它是否可能被视为破坏性变更？\n * 它是否会与现有的 p5.js 函数和变量冲突？\n * 它是否会与已经为 p5.js 编写的典型示例冲突？\n * 可能会导致上述冲突的功能应被视为破坏性变更，如果没有[进行重大版本发布](https://docs.npmjs.com/about-semantic-versioning/)，我们不应对 p5.js 进行破坏性变更。\n\n* 提出的新功能是否可以使用已经存在的 p5.js 功能、相对简单的原生 JavaScript 代码或现有易于使用的库来实现？\n * 例如，不必提供一个用于连接字符串数组的 p5.js 函数，例如 `join([\"Hello\", \"world!\"])`，而应优先使用原生 JavaScript 的 `[\"Hello\", \"world!\"].join()`。\n\n3. 在满足可访问性要求和其他考虑因素的前提下，必须有至少两个主管或维护人员在开始处理 PR 前批准新功能请求。下面介绍了新功能的 PR 审查流程。\n\n### 功能增强\n\n对于功能增强 issues，应使用“现有功能增强” issue 模板。这里的流程与新增功能请求非常相似。新增功能请求与功能增强之间的区别可能有些模糊，但是功能增强主要涉及 p5.js 的现有功能，而新增功能请求可能是请求添加全新的功能。\n\n1. 与新增功能请求类似，功能增强只有在能提高 p5.js 无障碍性时才应被接受。请参阅上面的[部分1](#feature-request)。\n2. 功能增强的包含标准与上面的功能请求类似，但要特别注意潜在的破坏性变更。\n * 如果修改现有功能，则所有先前有效和记录的函数签名必须以相同的方式运行。\n3. 在开始进行 PR 之前，必须至少由一位负责人或维护者批准功能增强。功能增强的 PR 审核过程在下面有详细说明。\n\n### 讨论\n\n此类 issue 有一个简洁的模板（“讨论”），在把主题整合为更具体的内容（如功能请求）之前，用这个模板来收集有关主题的一般性反馈。当这一类的反馈结束并产生更具体的内容后，这类的讨论问题就可以关闭了：\n\n* 如果以讨论的形式提出了一个 issue，但其实应该是一个 bug 报告，应该使用正确的标签并删除“讨论”标签。同时也应向作者索取未包含在 bug 报告中的其他信息。\n* 如果以讨论的形式打开了一个 issue，但与源代码贡献或其他与 GitHub 存储库/贡献过程/贡献社区相关的问题无关(例如，讨论 p5.js 的草图使用的最佳投影仪类型)，应将其重定向到论坛或 Discord，并关闭 issue。\n* 如果适用，应向讨论 issues 添加其他标签，以进一步标识讨论的类型。\n\n***\n\n## 拉取请求\n\n几乎所有对 p5.js 存储库的代码贡献都是通过拉取请求进行的，管理者和维护者可能具有对存储库的推送访问权限，但在贡献代码时仍然鼓励他们遵循相同的 issue > PR > 审查流程。以下是审查 PR 时可以采取的一些步骤：\n\n* 拉取请求模板可以在[此处](../.github/PULL_REQUEST_TEMPLATE/)找到。\n* 几乎所有拉取请求必须先打开并讨论相关的 issues，这意味着在任何管理者或维护者审查 PR 之前，必须首先按照相关[issue 工作流程](#issues)进行操作。\n * 唯一不适用此规则的情况是非常小的拼写错误修正，这不需要打开 issue，任何具有合并访问权限的人都可以合并该修复，即使他们不是特定领域的管理者。\n * 尽管存在这个例外，但在实践中我们只会在通常鼓励贡献者开启新 issues 的情况下应用它。换句话说，如果对于这个例外是否适用存在疑问，只需打开一个 issue 即可。\n* 如果拉取请求不能完全解决引用的 issue，你可以编辑原始帖子，将“解决 #OOOO”改为“处理 #OOOO”，这样当合并此 PR 时，不会自动关闭原始 issue。\n\n### 简单修复\n\n像小的拼写错误修复之类的简单修复可以由具有合并访问权限的任何人直接合并，只需在 PR 的“更改的文件”选项卡中快速检查，并确保自动化 CI 测试通过。\n\n\n\n\n\n### Bug 修复\n\n1. Bug 修复应由相关领域的管理者审查，最好是同意修复相关 issue 的相同人员。\n2. PR 的“更改的文件”选项卡可用于初步审查修复是否与 issue 讨论中描述的一致。\n3. 尽可能在本地进行必要的测试。GitHub CLI 可以帮助简化部分流程。（请参阅下面的 [Tips ＆ Tricks](#tips-tricks) 了解更多详情）。\n * 修复应足够解决原始 issue。\n * 修复不应更改任何现有行为，除非在原始 issue 中已经达成一致。\n * 修复不应对 p5.js 的性能产生重大影响。\n * 修复不应对 p5.js 的可访问性产生任何影响。\n * 修复应使用现代标准的 JavaScript 编码。\n * 修复应通过所有自动化测试，并在相关的情况下包含新测试。\n4. 如果需要进行任何其他更改，应根据[此处](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request)所述，在相关行添加行级注释。\n * 还可以使用建议模块来建议具体的更改:\\\n \\\n \\\n \n * 如果需要进行多个更改，而不是多次添加单行注释，请按照[此处](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/)所述进行多行注释并请求更改。\n * 如果行级注释仅用于澄清或讨论，则在上一步中选择 \"Comment\" 而不是 \"Request changes\":\\\n \n5. 一旦 PR 已经被审查，并且不需要任何其他更改，负责人可以添加或不添加评论，在上一步中选择 \"Approve\" 选项，将 PR 标记为 \"Approved\"。然后，如果需要，他们可以要求另一个负责人或维护者进行进一步审查，或者如果他们具有合并访问权限，可以合并 PR，或者维护者将合并已批准的 PR。\n6. 应该调用 @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) 机器人，将任何新贡献者添加到 README.md 文件的贡献者列表中。每种贡献类型都可以用下面的`[contribution` `type]`代替，可用贡献类型的完整列表可以在上面的链接中找到。\n\n`@all-contributors` `please` `add` `@[GitHub` `handle]` `for` `[contribution` `type]`\n\n### 新功能/功能增强\n\n新功能或功能增强的 PR 的流程与 bug 修复类似，只有一个显着的区别：\n\n* 新功能/功能增强的 PR 在合并之前必须由至少两名主管或维护者进行审查和批准。\n\n### Dependabot\n\nDependabot 的 PR 通常只对存储库管理员可见，如果这与你无关，请跳过此部分。\n\n* 如果版本更新是一个[语义化](https://semver.org/)的补丁版本，并且自动化的 CI 测试通过，可以直接合并 Dependabot PR。\n* 如果 Dependabot PR 带有语义化的次要版本更改，并且自动化的 CI 测试通过，通常可以直接合并，但建议快速检查更新的依赖项的变更日志。\n* 如果 Dependabot PR 带有语义化的主要版本更改，可能会影响构建过程或 p5.js 的功能。在这种情况下，鼓励评审人员尽可能从当前版本到目标版本检查变更日志，并在本地测试 PR，确保所有过程正常运行，并根据依赖项中潜在的重大变更进行任何必要的更改。\n * 许多依赖项之所以增加主要版本号，仅因为它们不再官方支持非常旧的 Node.js 版本，这意味着在许多情况下，主要版本号的增长并不一定意味着有依赖项 API 更改而引起的破坏性变化。\n\n***\n\n## 构建过程\n\n本节不涵盖一般的构建设置和命令，而是关于幕后发生的详细信息。关于构建信息，请参阅[贡献者指南](../contributor_guidelines.md#working-on-p5js-codebase)。\n\nGruntfile.js 文件包含了 p5.js 及其他内容的主要构建定义。构建库和文档所使用的不同工具包括但不限于 Grunt、Browserify、YUIDoc、ESLint、Babel、Uglify 和 Mocha。从`default`任务开始，逆向分析可能会有所帮助。在阅读下面的说明时，参考 Gruntfile.js 文档可能会有所帮助。\n\n### 主要构建任务\n\n```js\ngrunt.registerTask('default', ['lint', 'test']);\n```\n\n当我们运行`grunt`或 npm 脚本`npm test`时，我们运行包含`lint`和`test`的默认任务。\n\n#### `lint` 任务\n\n```js\ngrunt.registerTask('lint', ['lint:source', 'lint:samples']);\n```\n\n`lint`任务包括两个子任务：`lint:source`和`lint:samples`。`lint:source`又进一步分为三个子任务：`eslint:build`、`eslint:source`和`eslint:test`，它们使用 ESLint 检查构建脚本、源代码和测试脚本。\n\n`lint:samples`任务首先运行`yui`任务，该任务本身包括`yuidoc:prod`、`clean:reference`和`minjson`，它们从源代码中提取文档到一个 JSON 文件中，删除上一步骤中未使用的文件，并将生成的 JSON 文件压缩为`data.min.json`。\n\n接下来，在`lint:samples`中有一个名为`eslint-samples:source`的自定义任务，其定义位于[./tasks/build/eslint-samples.js](../tasks/build/eslint-samples.js)中，它将使用 ESLint 检查文档示例代码，以确保其遵循与p5.js的其余部分相同的编码规范（这里首先运行`yui`，因为我们需要先构建 JSON 文件，然后才能对示例进行检查）。\n\n#### `test` 任务\n\n```js\ngrunt.registerTask('test', [\n 'build',\n 'connect:server',\n 'mochaChrome',\n 'mochaTest',\n 'nyc:report'\n]);\n```\n\n首先，让我们看一下`test`中的`build`任务。\n\n```js\ngrunt.registerTask('build', [\n 'browserify',\n 'browserify:min',\n 'uglify',\n 'browserify:test'\n]);\n```\n\n以`browserify`开头的任务在[./tasks/build/browserify.js](../tasks/build/browserify.js)中定义。它们执行相似的步骤，但有一些细微的差异。以下是将众多 p5.js 源代码文件整合为一个完整库的主要步骤：\n\n* `browserify`负责构建 p5.js，而`browserify:min`则构建下一步要进行压缩的中间文件。`browserify`和`browserify:min`之间的区别在于，`browserify:min`不包含 FES 运行所需的数据。\n* `uglify`将`browserify:min`的输出文件压缩，生成最终的 p5.min.js 文件（此步骤的配置在主 Gruntfile.js 中）。\n* `browserify:test`构建的版本与完整的 p5.js 版本相同，只是添加了用于测试代码覆盖率报告的代码（使用 [Istanbul](https://istanbul.js.org/) ）。\n\n在 browserify 步骤中，除了将各种文件合并为一个文件外，还执行了其他几个步骤。首先，使用`brfs-babel`将`fs.readFileSync()` node.js 特定代码的使用替换为文件的实际内容。这主要用于 WebGL 代码，以将作为独立文件编写的着色器代码内联到源代码中。\n\n接下来，使用 Babel 将来自 node\\_modules 的所有依赖项的源代码进行转译，以匹配在 package.json 中定义的 [Browserslist](https://browsersl.ist/) 要求，并将 ES6 导入语句转换为 browserify 能理解的 CommonJS `require()`。这也使我们能够使用 ES6 及更高版本中可用的较新语法，而不必担心浏览器兼容性问题。\n\n在捆绑之后但将捆绑代码写入文件之前，代码会在`pretty-fast`中运行。如果代码不应被缩小，我们则需清理代码，以使最终格式更加一致。 （如果有需要的话， p5.js 源代码应保持可读、可查阅）\n\n这里省略了一些小的详细步骤；你可以查看上面链接的 browserify 构建定义文件，以更详细地了解所有内容。\n\n```\nconnect:server\n```\n\n此步骤启动一个本地服务器，托管测试文件和构建的源代码文件，以便可以在 Chrome 中运行自动化测试。\n\n```\nmochaChrome\n```\n\n此步骤在[./tasks/test/mocha-chrome.js](../tasks/test/mocha-chrome.js)中定义。它使用 Puppeteer 来启动一个无头版本的 Chrome，可以进行远程控制，并运行与`./test`文件夹中的 HTML 文件相关联的测试，包括对未缩小和缩小版本的库进行单元测试，以及测试所有参考示例。\n\n```\nmochaTest\n```\n\n与`mochaChrome`不同，此步骤在 node.js 中运行，而不是在 Chrome 中运行，并且仅测试库中的一小部分功能。p5.js 中的大多数功能都需要浏览器环境，因此只有在新的测试确实不需要浏览器环境时，才应扩展此测试集合。\n\n```\nnyc:report\n```\n\n最后，在完成所有构建和测试之后，此步骤将收集`mochaChrome`对库的完整版本进行的测试覆盖率报告，并将测试覆盖数据打印到控制台。p5.js 的测试覆盖率主要用于监控和提供一些额外的数据点，我们的目标不是达到100%的测试覆盖率。\n\n以上内容涵盖了 Gruntfile.js 配置中的默认任务！\n\n### 杂项任务\n\n如果需要，可以直接使用`npx grunt [step]`运行所有步骤、子步骤和子子步骤，尽管对于某些步骤而言，如果依赖于此链中的较早步骤，可能没有太大意义进行操作。还有一些未在上面提到但在某些情况下可能有用的任务。\n\n```\ngrunt yui:dev\n```\n\n此任务将运行上述描述的文档和库构建，然后启动一个网站，提供与网站上[http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/)的参考页面功能相似的版本。然后，它将监视源代码的更改，并重新构建文档和库。\n\n当你在处理内联文档的参考资料时，使用`grunt` `yui:dev`将非常有用，因为你无需在每次更改后都将 p5.js 存储库中构建好的文件移动至本地的 p5.js-website 存储库并重新构建网站，而是可以直接在浏览器中预览你的更改，这样就可以通过这个略微简化的参考版本来查看更改了。依此方法，你也可以更有信心地认为你所做的更改会在网站上正确显示。请注意，这仅适用于对内联文档的修改；对参考页面本身（包括样式和布局）的更改，应在网站存储库上进行修改和测试。\n\n```\ngrunt watch\ngrunt watch:main\ngrunt watch:quick\n```\n\nwatch 任务将观察一系列文件的更改，并根据所更改的文件运行相关任务以构建参考文档或库。这些任务的作用是相同的，唯一的区别在于范围。\n\n`watch`任务将在检测到源代码更改时运行所有构建和测试，类似于在源代码中运行完整的默认任务。\n\n`watch:main`任务将在检测到源代码更改时运行库构建和测试，但不会重新构建参考文档。\n\n`watch:quick`任务将仅在检测到源代码更改时运行库构建。\n\n根据你的工作内容，选择最简化的 watch 任务可以节省手动重新构建的时间。\n\n***\n\n## 发布过程\n\n请参阅[release\\_process.md](../release_process/)。\n\n***\n\n## 提示与技巧\n\n有时，需要审核的 issues 和 PRs 的数量太多，可能会令人手足无措，尽管我们尽力采取一些简化流程的措施，但以下是你可以利用的一些提示和技巧，以帮助你审核 issues 和 PR。\n\n### 回复模板\n\n你可以使用 GitHub 的 [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) 功能，这是一个方便的功能，可在回复 issues 或 PR 时使用。上面描述的工作流程中的一些步骤可能需要使用相同或非常相似的回复（比如将 issues 重定向到论坛、接受 issues 以进行修复等），使用 Saved Replies 可以稍微提高效率。\n\n以下是 p5.js 维护者使用的一些 Saved Replies，你可以自己使用或创建你自己的 Saved Replies！\n\n##### 关闭：无法重现\n\n> 我们无法重现这个 issue，但如果你能提供一个演示问题的代码示例，请随时重新打开这个 issue。谢谢！\n\n##### 关闭：需要代码片段\n\n> 为了组织的目的，我们关闭了此 issue。如果您能提供一个说明问题的代码片段，请重新打开该 issue。谢谢！\n\n##### 关闭：使用论坛\n\n> 这里的 GitHub issues 是报告 p5.js 库本身的错误和问题的好地方。如果你有关于编写自己的代码、测试或遵循教程的问题，请在[论坛](https://discourse.processing.org/)上发布。谢谢！\n\n##### 关闭：GSOC\n\n> 谢谢！讨论 GSOC 提案的最佳地方是我们的[论坛](https://discourse.processing.org/c/summer-of-code/)。\n\n##### 关闭：访问权限\n\n> 目前看来，这个功能并没有引起太多关注，而且我们还没有一个清晰的解释来说明它是如何扩大[扩大访问权限](../access/)的，因此我们现在将关闭这个 issue。如果能够在 issue 请求中添加一个关于访问权限的声明，请随时重新打开此 issue。\n\n> 我们暂时关闭了此 issue，因为没有看到对此 issue 的较详细解释[扩大访问权限](../access/)。如果可以在 issue 请求中添加更详细的访问权限说明，请随时重新打开。谢谢！\n\n##### 关闭：插件\n\n> 我们认为这个功能超出了 p5.js API 的范围（我们尽量保持最简化），但它可以成为一个很好的插件库的起点。请查看此处的文档，了解如何创建一个插件：\n> [https://github.com/processing/p5.js/blob/main/contributor\\_docs/creating\\_libraries.md](../creating_libraries/)\n\n##### 关闭 PR：先提出 issue\n\n> 谢谢。作为提醒，必须在打开拉取请求之前打开 issues 并使用 issues 标记拉取请求。这对于跟踪开发并保持讨论清晰是必要的。谢谢！\n\n##### 批准 issue 修复。\n\n> 你可以继续进行修复。谢谢。\n\n##### 合并 PR\n\n> 看起来不错。谢谢！\n\n### GitHub CLI\n\n使用看似复杂的 git 命令来获取 PR 版本的代码并在本地进行测试，可能会使复杂的 PR 审查变得更加困难。幸运的是，[GitHub CLI](https://cli.github.com/) 工具可以极大地帮助简化这个过程以及其他操作。\n\n安装完 CLI 并登录后，你只需要运行命令 `gh pr checkout [pull_request_id]` 就可以在本地审查 PR。这个命令会自动为你获取远程 fork，创建一个分支，并切换到该分支。如果要返回到主分支，只需像切换分支一样运行 `git checkout main` 即可。你甚至可以直接从 CLI 在 PR 中留下评论，而无需访问网页页面！\n\nGitHub CLI 还提供了许多其他命令，你可能会发现它们有用。无论如何，这是一个很好的工具。\n\n### 管理通知\n\n不再需要手动监视存储库的\"Issues\"或\"Pull Requests\"选项卡以获取新的 issues 或 PRs。你可以通过在存储库页面顶部与存储库名称相对的地方点击带有眼睛图标的\"Watch\"按钮来“关注”该存储库。\n\n\n\n通过关注存储库，诸如新 issues、新 PRs、提及你的用户名以及其他你在存储库上订阅的活动都会作为通知发送到你的[通知页面](https://github.com/notifications/)，你可以将其标记为已读或忽略，就像处理电子邮件收件箱一样。\n\n在某些情况下，你可能会收到 GitHub 发送的与你关注的存储库中的活动相关的电子邮件，你可以在[通知设置页面](https://github.com/settings/notifications/)上进行自定义设置，包括完全取消订阅。\n\n根据你的工作方式设置这些通知，可以避免手动查找相关 issues /PR 并避免被 GitHub 的无休止的通知淹没。在这里需要保持良好的平衡。作为起始建议，你可以关注该存储库的\"Issues\"和\"Pull Requests\"，并设置仅在“参与、提及和自定义”时接收电子邮件通知。\n"},"单元测试\n":{"relativeUrl":"/contribute/unit_testing","description":"\n\n我们使用单元测试来确保代码库中的各个组件按照我们的期望正常工作。\n\n## 参考资料\n\n这是一个[关于单元测试的好的、快速入门指南](https://codeburst.io/javascript-unit-testing-using-mocha-and-chai-1d97d9f18e71/)，使用了类似的技术栈，还有一个[更详细的指南](https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d/)。\n\n## 运行所有单元测试\n\n在仓库根目录下，在终端中使用以下命令：\n\n```shellsession\n$ npm test\n```\n\n## 测试覆盖率\n\n每次运行测试时，都会生成一个覆盖率报告。该覆盖率报告详细说明了测试套件所覆盖的源代码文件的哪些部分，从而告诉我们代码库的多少被测试到了。\n\n在运行测试后，会打印出一个摘要，并且您可以在任何网络浏览器中查看详细报告，路径为 `coverage/index.html`。在 Mac 终端中，您可以运行 `open coverage/index.html` 命令，在默认的网络浏览器中打开该页面。您还可以在终端中使用命令 `npx nyc report --reporter=text` 运行测试后查看覆盖率报告。\n\n### 运行一个测试套件\n\n要运行单个测试或一组测试，在 `.js` 文件中的 `suite` 或 `test` 后面添加 `.only`，然后使用上述命令运行测试。\n\n**请注意，不要提交包含 `.only` 的代码！**（我们希望我们的 CI 运行 *所有* 的单元测试。）\n\n#### 示例\n\n要仅运行 \"p5.ColorConversion\" 测试套件，您需要更改 `test/unit/color/color_conversion.js` 文件的第一行：\n\n```js\nsuite.only('color/p5.ColorConversion', function() {\n```\n\n现在，当您使用 `npm test` 命令时，只有在该 `function()` 主体内的测试将被运行。\n\n### 跳过一个测试套件\n\n此功能与 `.only()` 相反。通过添加 `.skip()`，您可以告诉 Mocha 忽略这些测试套件和测试用例。被跳过的内容将被标记为待定，并作为待定内容报告。\n\n## 基础设施\n\n### 框架\n\n我们使用 [mocha](https://mochajs.org) 来组织和运行我们的单元测试。\n\n我们使用 [chai 的 `assert`（和 `expect`）](https://www.chaijs.com/api/assert/) 来编写关于代码应该如何运行的单个语句。\n\n### 环境\n\n我们在 `test/unit` 文件夹下有一系列在浏览器中运行的测试，还有在 `test/node` 文件夹下一系列在 Node.js 中运行的测试。\n\n浏览器测试在 [\"无头\" Chrome](https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai/) 中运行。这就是为什么在运行测试时不会弹出浏览器窗口的原因。\n\n### 设置和辅助函数\n\n这些目前仅适用于浏览器测试（大多数测试都在此运行）：\n\n* `test/js/mocha_setup.js` 配置了 mocha 的一些选项。\n* `test/js/chai_helpers.js` 设置了 chai，并向 `chai.assert` 添加了一些有用的函数。\n* `test/js/p5_helpers.js` 添加了一些用于测试 p5 sketches 的辅助函数。\n\nNode.js 测试的设置都在 `test/mocha.opts` 文件中完成。\n\n### 持续集成测试\n\n当您在 p5.js 仓库中发起拉取请求时，它会自动[运行测试](https://github.com/processing/p5.js/actions/)。这有助于我们确保每个拉取请求的测试都通过，而不需要个人贡献者进行额外的工作。它还会自动将覆盖率报告上传到 [Codecov](https://codecov.io/github/processing/p5.js)。\n\n## 添加单元测试\n\n如果您想添加更多的单元测试，请查看是否已经存在用于您要添加测试的组件的测试文件。通常，`src/` 中的文件对应的测试文件在 `test/unit` 目录下具有相同的路径。（例如，`src/color/p5.Color.js` 的测试在 `test/unit/color/p5.Color.js` 中。）\n\n如果找不到对应的文件，那可能是因为该文件尚未有任何测试（尚未 😉），所以按照上述约定创建一个新文件。如果您要测试的模块需要在浏览器中运行，您应该将它放在 `test/unit` 中；如果不需要，在 `test/node` 下添加。**如果不确定，请优先选择将浏览器测试添加到 `test/unit`！（如果需要，稍后可以很容易地将其移到其他地方。）**\n\n如果您必须为一个模块添加一个 `test/unit` 下的测试文件，那么您还需要在 `test/unit/spec.js` 文件的 `spec` 数组中将要测试的模块添加进去。这样可以确保您的测试运行时加载了必要的模块。您可以通过查看 `test/test.html` 文件在浏览器中查看这些测试。\n\n### 编写单元测试\n\n选择一个单元，它可以是一个方法或一个变量进行测试。让我们以 `p5.prototype.keyIsPressed` 作为示例。在开始编写测试之前，我们需要了解该方法的预期行为。\n\\*\\*预期行为：\\*\\*如果按下任意键，则布尔值系统变量应为 true；如果没有按键，则应为 false。\n现在，您可以针对这个预期行为考虑各种测试案例。可能的测试案例包括：\n\n* 变量是布尔值。\n* 如果按下了键，则应为 true。\n* 如果按下任意键（字母键、数字键、特殊键等），则应为 true。\n* 如果按下多个键，则应为 true。\n* 如果没有按键，则应为 false。\n* 如果您可以想到更多的情况，请继续为其编写测试！\n\n我们可以为 `p5.prototype.keyIsPressed` 创建一个测试套件，并开始编写相应的测试。我们将使用 mocha 来组织我们的单元测试。\n\n```js\nsuite('p5.prototype.keyIsPressed', function() {\n test('keyIsPressed is a boolean', function() {\n // 在这里编写测试\n });\n\n test('keyIsPressed is true on key press', function() {\n // 在这里编写测试\n });\n\n test('keyIsPressed is false when no keys are pressed', function() {\n // 在这里编写测试\n });\n});\n```\n\n我们已经构建了测试套件的结构，但还没有编写测试。我们将使用 chai 的 assert 进行编写。\n例如：\n\n```js\ntest('keyIsPressed is a boolean', function() {\n assert.isBoolean(myp5.keyIsPressed); // 断言值为布尔值。\n});\n```\n\n类似地，我们可以使用 `assert.strictEqual(myp5.keyIsPressed, true)` 来断言值是否为 true。您可以在此处阅读有关 chai 的 assert 的更多信息：[chai 文档](https://www.chaijs.com/api/assert/)。\n现在，您已经编写了测试，请运行它们并查看该方法是否按预期运行。如果不是，请为此创建一个问题，如果您愿意，甚至可以尝试修复它！\n"},"p5.js 网页可访问性\n":{"relativeUrl":"/contribute/web_accessibility","description":"\n\n本文档描述了 p5.js 的网页可访问性功能的结构，供贡献者、维护者和其他相关方使用。如果您有兴趣使您的作品对屏幕阅读器可访问，请访问[教程](https://p5js.org/tutorials/)，或者如果您想在屏幕阅读器上使用 p5.js，请访问[使用屏幕阅读器的 p5.js 教程](https://p5js.org/learn/p5-screen-reader.html)。\n\n## 概述\n\n由于画布 HTML 元素是位图，无法提供有关其上绘制形状的屏幕阅读器可访问信息，p5.js 提供了几个函数，使画布对屏幕阅读器更加可访问。\n\n目前，p5.js 支持为画布上的基本形状（使用 `textOutput()` 和 `gridOutput()`）生成屏幕阅读器可访问的输出，以及用户生成的画布内容的屏幕阅读器可访问描述（使用 `describe()` 和 `describeElement()`）。\n\n## 基本形状的库生成的可访问输出\n\n基本形状的支持可访问输出包括文本输出和网格输出。\n\n`textOutput()` 创建一个屏幕阅读器可访问的输出，描述画布上的形状。画布的一般描述包括画布大小、画布颜色和画布中的元素数量（例如：\"您的输出是一个大小为 400x400 像素的蓝色画布，其中包含以下 4 个形状：\"）。这个描述后面是形状的列表，其中描述了每个形状的颜色、位置和面积（例如：\"左上角的橙色椭圆，覆盖画布的 1%\"）。可以选择每个元素以获取更多详细信息。还提供了一个元素表格，在这个表格中，描述了形状、颜色、位置、坐标和面积（例如：\"橙色椭圆，位置：左上角，面积：2\"）。\n\n`gridOutput()` 根据每个形状的空间位置，将画布的内容以网格（HTML表格）的形式布局。在表格输出之前，会提供画布的简要描述。该描述包括背景颜色、画布大小、对象数量和对象类型（例如：\"淡紫蓝色画布尺寸为200x200，包含4个对象 - 3个椭圆和1个矩形\"）。网格以空间方式描述内容，每个元素根据其位置放置在表格的单元格中。在每个单元格中，提供元素的颜色和形状类型（例如：\"橙色椭圆\"）。这些描述可以单独选择以获取更多细节。还提供了一个元素列表，其中描述了形状、颜色、位置和面积（例如：\"橙色椭圆 位置=左上角 面积=1%\"）。\n\n如果用户将 `LABEL` 作为参数传递给上述任何一个函数，将创建一个附加的 div，其中包含与画布相邻的输出。这对于非屏幕阅读器用户来说很有用，他们可能希望将输出显示在画布的子 DOM 之外。然而，对于屏幕阅读器用户，使用 `LABEL` 会造成不必要的冗余。我们建议仅在开发过程中使用 `LABEL`，在发布或与屏幕阅读器用户共享草稿之前将其删除。\n\n### 输出结构\n\n尽管 `textOutput()` 和 `gridOutput()` 位于 [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) 中，但输出是使用库中分布的多个函数创建和更新的。本节详细介绍支持可访问输出的不同函数。\n\n#### outputs.js\n\n[src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) 包含创建可访问输出的核心函数：\n\n* `textOutput()`: 此函数通过将 `this._accessibleOutputs.text` 设置为 `true` 并调用 `_createOutput('textOutput', 'Fallback')` 来激活文本输出。如果作为参数传递了 `LABEL`，函数还会通过将 `this._accessibleOutputs.textLabel` 设置为 `true` 并为标签调用 `_createOutput('textOutput', 'Label')` 来激活文本输出标签。\n* `gridOutput()`: 此函数通过将 `this._accessibleOutputs.grid` 设置为 `true` 并调用 `_createOutput('gridOutput', 'Fallback')` 来激活网格输出。如果作为参数传递了 `LABEL`，函数还会通过将 `this._accessibleOutputs.textLabel` 设置为 `true` 并为标签调用 `_createOutput('gridOutput', 'Label')` 来激活网格输出标签。\n* `_createOutput()`: 此函数为所有可访问输出创建 HTML 结构。根据输出的类型和显示方式，创建的 HTML 结构会有所不同。该函数还会初始化 `this.ingredients`，其中存储了所有输出的数据，包括形状、颜色和 pShapes（其中存储画布先前形状的字符串）。如果 `this.dummyDOM` 不存在，它还会创建 `this.dummyDOM`。`this.dummyDOM` 存储了 `<body>` 内的 DOM 元素的 HTML 集合。\n* `_updateAccsOutput()`: 如果使用 accessibleOutputs，在 `setup()` 和 `draw()` 结束时调用此函数。如果 `this.ingredients` 与当前输出不同，该函数会调用输出的更新函数（`_updateGridOutput` 和 `_updateTextOutput`）。只在 `setup()` 和 `draw()` 结束时调用此函数，并且只在成分不同的情况下调用 `_updateGridOutput` 和 `_updateTextOutput`，有助于避免对屏幕阅读器造成过多负担。\n* `_addAccsOutput()`: 当 accessibleOutputs 为 true 时，此函数返回 true。\n* `_accsBackground()`: 在 `background()` 结束时调用此函数。它重置 `this.ingredients.shapes`，如果背景色与先前不同，则调用 `_rgbColorName()` 获取颜色的名称，并将其存储在 `this.ingredients.colors.background` 中。\n* `_accsCanvasColors()`: 在 `fill()` 和 `stroke()` 结束时调用此函数。此函数通过将填充和描边颜色保存在 `this.ingredients.colors.fill` 和 `this.ingredients.colors.stroke` 中来更新填充和描边颜色。它还调用 `_rgbColorName()` 来获取颜色的名称。\n* `_accsOutput()`: 构建 `this.ingredients.shapes`，其中包括用于创建输出的所有形状。此函数在基本形状函数结束时调用（参见 accessible output beyond src/accessibility）。根据调用它的形状，`_accsOutput()` 可能会调用辅助函数来收集有关将用于创建输出的该形状的所有信息。这些辅助函数不是原型的一部分，包括：\n * `_getMiddle()`: 返回矩形、弧形、椭圆、三角形和四边形的中心点或质心。\n * `_getPos()`: 返回形状在画布上的位置（例如：'左上角'、'右中'）。\n * `_canvasLocator()`: 返回映射到画布的 10\\*10 网格上的形状的位置。\n * `_getArea()`: 返回形状的面积占画布总面积的百分比。\n\n当 `this._accessibleOutputs.text` 或 `this._accessibleOutputs.text` 为 `true` 时，p5.js 库中的多个函数会调用 output.js 中的函数：\n\n* `_accsOutput()` 在以下函数中被调用：\n * `p5.prototype.triangle()`\n * `p5.prototype._renderRect()`\n * `p5.prototype.quad()`\n * `pp5.prototype.point()`\n * `p5.prototype.line()`\n * `p5.prototype._renderEllipse()`\n * `p5.prototype.arc()`\n* `_updateAccsOutput()` 在以下函数中被调用：\n * `p5.prototype.redraw()`\n * `p5.prototype.resizeCanvas()`\n * `this._setup`\n* `_accsCanvasColors()` 在以下函数中被调用：\n * `p5.Renderer2D.prototype.stroke()`\n * `p5.Renderer2D.prototype.fill()`\n* `_accsBackground()` 在以下函数中被调用：\n * `p5.Renderer2D.prototype.background()`\n\n#### textOutput.js\n\n[src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) 包含更新文本输出的所有函数。该文件中的主要函数是 `_updateTextOutput()`，在 [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) 中的 `_updateAccsOutput()` 调用该函数，当 `this._accessibleOutputs.text` 或 `this._accessibleOutputs.textLabel` 为 `true` 时调用。\n\n`_updateTextOutput()` 使用 `this.ingredients` 构建文本输出和文本输出标签的内容，包括摘要、形状列表和形状详情表格。如果这些内容与当前输出不同，它会更新它们。构建输出内容由文件中的几个辅助函数支持，这些函数不是原型的一部分：\n\n* `_textSummary()`: 构建文本输出摘要的内容。\n* `_shapeDetails()`: 构建包含形状详情的文本输出表格。\n* `_shapeList()`: 构建文本输出的形状列表。\n\n#### gridOutput.js\n\n[src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) 包含更新网格输出的所有函数。该文件中的主要函数是 `_updateGridOutput()`，在 [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) 中的 `_updateAccsOutput()` 调用该函数，当 `this._accessibleOutputs.grid` 或 `this._accessibleOutputs.gridLabel` 为 `true` 时调用。\n\n`_updateGridOutput()` 使用 `this.ingredients` 构建网格输出和网格输出标签的内容，包括摘要、映射形状位置的网格和形状列表。如果这些内容与当前输出不同，它会更新它们。构建输出内容由文件中的几个辅助函数支持，这些函数不是原型的一部分：\n\n* `_gridSummary()`: 构建网格输出摘要的内容。\n* `_gridMap()`: 构建映射形状在画布上位置的网格。\n* `_gridShapeDetails()`: 构建网格输出的形状列表，列表的每一行都包含形状的详细信息。\n\n#### color\\_namer.js\n\n在创建屏幕阅读器可访问的输出时，命名画布中使用的颜色很重要。[src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) 包含 `_rgbColorName()` 函数，该函数接收 RGBA 值并返回颜色名称。该函数由 [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) 中的 `_accsBackground()` 和 `_accsCanvasColors` 调用。\n\n`_rgbColorName()` 使用 `color_conversion._rgbaToHSBA()` 获取颜色的 HSV 值，然后使用 `_calculateColor()` 获取颜色名称。此文件中的 `_calculateColor()` 函数来自 [colorNamer.js](https://github.com/MathuraMG/color-namer/)，它是作为 [2018 年 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) 的一部分和与盲人屏幕阅读器专家用户协商开发的。此函数通过将 HSV 值与 `colorLookUp` 数组中存储的值进行比较来返回颜色名称。这个函数应该进行更新，因为某些灰色的阴影没有正确命名。在更新时，还重要的是通过包含解释每行代码的注释来确保贡献者的可读性。\n\n## 用户生成的可访问画布描述\n\n### describe()\n\n`describe()` 函数为画布创建一个供屏幕阅读器访问的描述。第一个参数应为一个描述画布的字符串。第二个参数是可选的。如果指定了该参数，它决定描述的显示方式。所有的描述都成为画布元素的子 DOM 的一部分。如果用户将第二个参数设置为 `LABEL`，则会创建一个相邻于画布的附加描述的 `<div>`。\n\n`describe()` 在 [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js) 中被多个函数支持：\n\n* `_descriptionText()`: 检查文本不是 `LABEL` 或 `FALLBACK`，并确保文本以标点符号结尾。如果文本不以 '.'、','、';'、'?'、'!' 结尾，则该函数在字符串末尾添加一个 '.'。返回文本。\n* `_describeHTML()`: 创建画布的备用 HTML 结构。如果 `describe()` 的第二个参数是 `LABEL`，则该函数创建一个相邻于画布元素的 `<div>` 来显示描述文本。\n\n### describeElement()\n\n`describeElement()` 函数为绘图元素或一组共同产生含义的形状创建一个供屏幕阅读器访问的描述。第一个参数应为元素的名称字符串，第二个参数应为元素的描述字符串。第三个参数是可选的。如果指定了该参数，它决定描述的显示方式。所有元素描述都成为画布元素的子 DOM 的一部分。如果用户将第三个参数设置为 `LABEL`，则会创建一个相邻于画布的附加元素描述的 `<div>`。\n\n`describeElement()` 在 [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js) 中被多个函数支持：\n\n* `_elementName()`: 检查元素名称不是 `LABEL` 或 `FALLBACK`，并确保文本以冒号结尾。返回元素名称。\n* `_descriptionText()`: 检查文本不是 `LABEL` 或 `FALLBACK`，并确保文本以标点符号结尾。如果文本不以 '.'、','、';'、'?'、'!' 结尾，则该函数在字符串末尾添加一个 '.'。返回文本。\n* `_describeElementHTML()`: 创建画布的备用 HTML 结构。当 `describeElement()` 的第二个参数是 `LABEL` 时，该函数创建一个相邻于画布元素的 `<div>` 来显示描述文本。\n"},"WebGL 贡献指南\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* 如何开始着手处理 p5.js WebGL 模式的源代码。 */}\n\n\n\n如果你正在阅读该文档，那么你可能对帮助开发 WebGL 模式感兴趣。感谢你的帮助，我们对此非常感激！本页面旨在解释我们是如何组织 WebGL 贡献的，并提供一些建议从而帮助你进行修改。\n\n## 资源\n\n* 阅读我们的 [p5.js WebGL architecture overview](../webgl_mode_architecture/) 了解 WebGL 模式与 2D 模式的区别。这将是理解着色器、笔触等一些实现细节的宝贵参考。\n* 阅读我们的[contributor guidelines](https://p5js.org/contributor-docs/#/./contributor_guidelines/) 获取如何创建 issues 、设置代码库和测试更改的信息。\n* 了解一些关于浏览器的 WebGL API 的信息会很有帮助，这是 p5.js 的 WebGL 模式建立之上的：\n * [WebGL fundamentals](https://webglfundamentals.org/) 讲解了许多核心渲染概念。\n * [The Book of Shaders](https://thebookofshaders.com/) 讲解了 WebGL 着色器中使用的许多技术。\n\n## 规划\n\n我们通过 [GitHub Project](https://github.com/orgs/processing/projects/5/) 来组织issues，并将它们分为以下几类：\n\n* **系统级修改** 涉及长期目标，并对代码产生深远影响。在开始实施之前，此类变更需要进行充分的讨论和全面的规划。\n* **尚无解决方案的 bugs** 是指那些还需要通过调试来确定具体原因的错误报告。在确定具体原因之前，这些 bugs 还不适合进行修复；一旦原因明确，我们便可以开始讨论最佳的修复方法。\n* **有解决方案但未 PR 的 bugs** 是指已经确定了修复方案，且可以开始进行编写代码的 bugs 。\n* **小幅优化** 涉及到新增功能，这些功能在现有架构中已有明确定位，无需进一步讨论如何将它们融入系统。一旦决定加入这些功能，就可以直接开始编写相关代码。\n* **2D 功能** 指的是那些在 p5.js 中的其他部分已经实现，但在 WebGL 模式下尚不支持的功能。这些功能一旦实现，其预期表现应与 2D 模式保持一致。尽管我们可能需要讨论这些功能的最佳实施方式，但对用户来说，这些功能的要求是清晰明确的。\n* **无法在所有情况下正常运作的功能** 是指在 WebGL 模式下存在但并不适用于所有 WebGL 使用场景的功能。举例来说，某些 p5.js 方法同时支持 2D 和 3D 坐标系统，然而其他的方法可能在使用 3D 坐标时失效。在通常情况下，这些功能是可以着手进行开发的。\n* **功能请求** 是指对其他所有代码的更改请求；这些请求还需要一些讨论，以确保它们符合 WebGL 模式下的发展方向。\n* **文档** 是指那些无需进行代码更改，而是需要更好地记录 p5.js 行为的 issues 。\n\n## 代码放置\n\n所有与 WebGL 相关的内容都会存放在`src/webgl`子目录中。在该目录下，顶级 p5.js 函数根据其主题领域分成不同的文件：设置光源的命令放在`lighting.js`中；设置材质的命令则放在`materials.js`中。\n\n在实现用户界面类时，我们通常采用一类一个文件的方式。这些文件可能会偶尔包含一些其他的内部实用类。例如，`p5.Framebuffer.js` 包括`p5.Framebuffer`类，并且还包含一些特定于帧缓冲的其他主要类的子类。进一步的帧缓冲特定子类也可以放在该文件中。\n\n`p5.RendererGL`是一个处理许多行为的大类。因此，我们不是将所有功能都放在一个大的类文件中，而是根据其所属的主题领域将其功能分成许多文件。以下是我们将`p5.RendererGL`划分至各个文件中的描述，以及每个文件应包含的内容：\n\n#### `p5.RendererGL.js`\n\n初始化和核心功能。\n\n#### `p5.RendererGL.Immediate.js`\n\n与 **即时模式 (immediate mode)** 绘图相关的功能（不会被存储和复用的形状，例如`beginShape()`和`endShape()`）\n\n#### `p5.RendererGL.Retained.js`\n\n与 **保留模式 (retained mode)** 绘制相关的功能（已经存储以供复用的形状，如`sphere()`）\n\n#### `material.js`\n\n混合模式管理\n\n#### `3d_primitives.js`\n\n可以绘制形状的用户界面函数，如`triangle()`。这些函数定义了形状的几何结构。然后在`p5.RendererGL.Retained.js`或`p5.RendererGL.Immediate.js`中渲染这些形状，从而将几何输入视为通用形状。\n\n#### `Text.js`\n\n用于文本渲染的功能和实用类\n\n## 测试 WebGL 的修改\n\n### 测试一致性\n\n在 p5.js 中，函数有多种使用方式。手动验证所有方式是很困难的，因此我们尽可能地添加单元测试。通过这种方式，当我们做出新的修改时，如果所有单元测试通过，我们就可以确信新的修改没有破坏任何已有功能。\n\n在添加新测试时，如果该功能在2D模式下也有效，那么为了确保一致性，最好的方法之一就是检查在两种模式下生成的像素是否相同。以下是一个单元测试的示例：\n\n```js\ntest('coplanar strokes match 2D', function() {\n const getColors = function(mode) {\n myp5.createCanvas(20, 20, mode);\n myp5.pixelDensity(1);\n myp5.background(255);\n myp5.strokeCap(myp5.SQUARE);\n myp5.strokeJoin(myp5.MITER);\n if (mode === myp5.WEBGL) {\n myp5.translate(-myp5.width/2, -myp5.height/2);\n }\n myp5.stroke('black');\n myp5.strokeWeight(4);\n myp5.fill('red');\n myp5.rect(10, 10, 15, 15);\n myp5.fill('blue');\n myp5.rect(0, 0, 15, 15);\n myp5.loadPixels();\n return [...myp5.pixels];\n };\n assert.deepEqual(getColors(myp5.P2D), getColors(myp5.WEBGL));\n});\n```\n\n该方法并不总是适用，因为你无法在 2D 模式中关闭抗锯齿。与此同时，在 WebGL 模式中，抗锯齿通常会略有不同。但对于实现 x 和 y 轴上直线的情况，这种方法是可行的！\n\n如果一个功能只适用于 WebGL ，我们通常会检查其中的几个像素，而不是将像素与 2D 模式的结果进行比较，以确保它们的颜色符合我们的预期。在不久的将来，我们可能会将其改进为一个更加强劲且稳定的系统，并且该系统会与我们期望结果的完整图像快照进行比较，而非其中的几个像素。但在现有情况下，以下是一个像素颜色检查的示例：\n\n```js\ntest('color interpolation', function() {\n const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);\n // upper color: (200, 0, 0, 255);\n // lower color: (0, 0, 200, 255);\n // expected center color: (100, 0, 100, 255);\n myp5.beginShape();\n myp5.fill(200, 0, 0);\n myp5.vertex(-128, -128);\n myp5.fill(200, 0, 0);\n myp5.vertex(128, -128);\n myp5.fill(0, 0, 200);\n myp5.vertex(128, 128);\n myp5.fill(0, 0, 200);\n myp5.vertex(-128, 128);\n myp5.endShape(myp5.CLOSE);\n assert.equal(renderer._useVertexColor, true);\n assert.deepEqual(myp5.get(128, 128), [100, 0, 100, 255]);\n});\n```\n\n### 性能测试\n\n尽管性能不是 p5.js 的首要关注点，但我们仍会尽量确保修改不会对性能造成较大影响。在通常情况下，我们会创建两个测试绘图：一个包含了你的修改，另一个则没有。然后，我们会比较两者的帧率。\n\n关于如何衡量性能的一些建议：\n\n* 在你绘图的顶部使用 `p5.disableFriendlyErrors = true` 来禁用友好错误提示 （friendly errors)（或仅测试 `p5.min.js`，因为该版本不包含友好错误提示系统）\n* 显示平均帧率，从而了解稳定状态下的帧率：\n\n```js\nlet frameRateP;\nlet avgFrameRates = [];\nlet frameRateSum = 0;\nconst numSamples = 30;\nfunction setup() {\n // ...\n frameRateP = createP();\n frameRateP.position(0, 0);\n}\nfunction draw() {\n // ...\n const rate = frameRate() / numSamples;\n avgFrameRates.push(rate);\n frameRateSum += rate;\n if (avgFrameRates.length > numSamples) {\n frameRateSum -= avgFrameRates.shift();\n }\n \n frameRateP.html(round(frameRateSum) + ' avg fps');\n}\n```\n\n以下是我们会进行测试的一些情况，因为它们会对渲染管线的不同部分造成压力：\n\n* 几个非常复杂的形状 （例如，一个大型 3D 模型或一段长曲线）\n* 许多简单的形状 （例如，在for loop中多次调用`line()`）\n"},"p5.js WEBGL模式架构\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"\n\n本文档描述了p5.js WEBGL模式的结构，供p5.js的贡献者、维护者和其他感兴趣的人参考。如果您对在草图中使用3D图形感兴趣，请查看[此教程](https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5/)。\n\n## 结构和对象概述\n\nWEBGL架构中的核心对象包括p5.Renderer.GL、p5.Shader、p5.Texture和p5.Geometry。\np5.Renderer.GL的单个实例管理其自己的p5.Shaders、p5.Textures和p5.Geometry。其中一个目标是允许使用WebGL进行屏幕外渲染，但尚未进行测试。\n着色器和纹理与特定的GL上下文关联在一起，通过渲染器进行管理。\n\n### p5.RendererGL\n\np5.RendererGL对象是p5.js的WEBGL/3D模式渲染器。\n它继承自p5.Renderer，提供了2D模式中不可用的额外功能，例如：`box()`，`cone()`，着色器的使用，加速纹理渲染和光照。\n\n* 管理（创建和缓存）着色器（p5.Shader对象）和纹理（p5.Texture对象）\n* 通过着色器准备形状的坐标，用作属性数组\n* 在调用描边、填充、纹理和各种光照方法时，选择正确的着色器，并向这些着色器提供适当的uniform变量\n* 维护与光照有关的数据：使用各种类型的光源及其参数的计数\n* 缓存三维基元的几何形状（在保留模式下），除了使用begin/endShape创建的形状，这些形状在每次绘制时都会动态生成并推送到GL中（在即时模式下）。\n\n渲染器负责选择适当的p5.Shader来满足当前的绘图条件。\n\n### p5.Shader\n\np5.Shader类提供了对GL程序的uniform变量和attribute变量的访问。\n\n* 编译和链接顶点着色器和片元着色器组件\n* 提供API来访问和设置着色器的属性和uniform变量\n* 在渲染形状之前，绑定着色器所需的纹理\n* 提供bindShader()方法，在绘制形状之前使用，在形状绘制之后解绑着色器。\n\n有四个默认的着色器，如着色器部分所述。\n\n### p5.Texture\n\np5.Texture对象根据`p5.Image`、`p5.MediaElement`、`p5.Element`或`ImageData`管理基于纹理的GL状态。\n\n* 在内部处理基于类型的图像数据处理，这样p5.Renderer的实现在处理纹理时就不需要在自己的方法中做特殊例外。\n* 根据情况每帧进行更新，通过猜测图像数据是否发生了变化。如果没有进行更改，则尽量不上传纹理，以提高性能。\n\n### p5.Geometry\n\n在p5.Renderer对象的缓存中，以p5.Geometry对象的形式存储在保留模式下呈现的形状。\n渲染器根据绘制的形状和其参数（例如使用`box(70, 80, 90, 10, 20)`创建的盒子的几何形状通过`'box|70|80|90|10|20'`进行映射）将字符串映射到p5.Geometry对象。调用使用保留几何形状的函数时，首次通过创建一个p5.Geometry对象，并使用上述字符串ID将其存储在几何哈希中。后续的调用会在哈希中查找该ID，如果找到则使用它引用现有对象，而不是创建一个新对象。\n\n* 为几何形状的顶点、法线、面、线顶点、线法线和纹理坐标存储数据。\n* 提供计算一组顶点的面、法线、线顶点和线法线的方法。\n\n## 即时模式\n\n使用即时模式进行绘制的所有属性都存储在渲染器中的对象中，用于绘制到GL绘图上下文，然后被丢弃。\n\n## 几何形状：保留模式和即时模式\n\n保留几何形状用于3D基本图形，而即时模式用于使用begin/endShape创建的形状。\n\n| 使用保留几何形状的函数 | 使用即时模式几何形状的函数 |\n| ----------- | ----------------- |\n| plane() | bezier() |\n| box() | curve() |\n| sphere() | line() |\n| cylinder() | beginShape() |\n| cone() | vertex() |\n| ellipsoid() | endShape() |\n| torus() | point() |\n| triangle() | curveVertex() |\n| arc() | bezierVertex() |\n| point() | quadraticVertex() |\n| ellipse() | |\n| rect() | |\n| quad() | |\n| text() | |\n\n## 纹理管理\n\np5.Renderer.GL实例按需管理一组p5.Textures对象。\n为使用`texture()`方法或作为自定义着色器提供的uniform的图像和视频创建纹理。\n\n当渲染器需要纹理时，首先检查是否已经为给定的图像/视频创建了纹理，然后将其提供给着色器进行渲染。只有在找不到图像/视频的现有纹理时才会创建新的纹理。\n\n## 着色器\n\n### 着色器的类型\n\n#### Color Shader（颜色着色器）\n\n基于当前填充颜色，为对象提供平面着色。\n\n#### Light Shader（用于光照和纹理）\n\n考虑以下内容：\n\n* 由`ambientLight()`、`directionalLight()`、`pointLight()`、`spotLight()`和`specularColor()`设置的光照参数\n* 由`ambientMaterial()`、`emissiveMaterial()`和`specularMaterial()`设置的材质参数\n* 由`texture()`设置的纹理参数\n\n#### Normal Shader（法线着色器）\n\n在使用`normalMaterial()`时设置法线着色器。它使用表面的法线矢量来确定片段的颜色。\n\n### 着色器参数\n\n#### 标准模型视图和相机uniforms\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| --------------------------------- | ----- | ------- | ----- | ----- | ---- |\n| `uniform mat4 uModelViewMatrix;` | x | x | x | x | x |\n| `uniform mat4 uProjectionMatrix;` | x | x | x | x | x |\n| `uniform vec4 uViewPort;` | x | | | | |\n| `uniform vec4 uPerspective;` | x | | | | |\n\n#### 几何属性和uniforms\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| ------------------------------ | ----- | ------- | ----- | ----- | ---- |\n| `attribute vec3 aPosition;` | x | x | x | x | x |\n| `attribute vec3 aNormal;` | | x | | x | |\n| `attribute vec2 aTexCoord;` | | x | | x | |\n| `uniform mat3 uNormalMatrix;` | | x | | x | |\n| `attribute vec4 aDirection;` | x | | | | |\n| `uniform float uStrokeWeight;` | x | | | | |\n\n#### 材质颜色\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| ------------------------------ | ----- | ------- | ----- | ----- | ---- |\n| `uniform vec4 uMaterialColor;` | x | x | | | x |\n| `attribute vec4 aVertexColor;` | | | x | | |\n\n#### 光照参数\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| --------------------------------------------- | ----- | ------- | ----- | ----- | ---- |\n| `uniform int uAmbientLightCount;` | | x | | | |\n| `uniform int uDirectionalLightCount;` | | x | | | |\n| `uniform int uPointLightCount;` | | x | | | |\n| `uniform int uSpotLightCount;` | | x | | | |\n| `uniform vec3 uAmbientColor[8];` | | x | | | |\n| `uniform vec3 uLightingDirection[8];` | | x | | | |\n| `uniform vec3 uDirectionalDiffuseColors[8];` | | x | | | |\n| `uniform vec3 uDirectionalSpecularColors[8];` | | x | | | |\n| `uniform vec3 uPointLightLocation[8];` | | x | | | |\n| `uniform vec3 uPointLightDiffuseColors[8];` | | x | | | |\n| `uniform vec3 uPointLightSpecularColors[8];` | | x | | | |\n| `uniform float uSpotLightAngle[8];` | | x | | | |\n| `uniform float uSpotLightConc[8];` | | x | | | |\n| `uniform vec3 uSpotLightDiffuseColors[8];` | | x | | | |\n| `uniform vec3 uSpotLightSpecularColors[8];` | | x | | | |\n| `uniform vec3 uSpotLightLocation[8];` | | x | | | |\n| `uniform vec3 uSpotLightDirection[8];` | | x | | | |\n| `uniform bool uSpecular;` | | x | | | |\n| `uniform bool uEmissive;` | | x | | | |\n| `uniform int uShininess;` | | x | | | |\n| `uniform bool uUseLighting;` | | x | | | |\n| `uniform float uConstantAttenuation;` | | x | | | |\n| `uniform float uLinearAttenuation;` | | x | | | |\n| `uniform float uQuadraticAttenuation;` | | x | | | |\n\n#### 纹理参数\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| ----------------------------- | ----- | ------- | ----- | ----- | ---- |\n| `uniform sampler2D uSampler;` | | x | | | |\n| `uniform bool isTexture;` | | x | | | |\n\n#### 通用参数\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| ---------------------------- | ----- | ------- | ----- | ----- | ---- |\n| `uniform float uResolution;` | | | x | | |\n| `uniform float uPointSize;` | | | x | | x |\n\n#### 变量参数\n\n| 参数 | 线条着色器 | 纹理光照着色器 | 颜色着色器 | 法线着色器 | 点着色器 |\n| ----------------------------------- | ----- | ------- | ----- | ----- | ---- |\n| `varying vec3 vVertexNormal;` | | x | | | |\n| `varying vec2 vVertTexCoord;` | | x | | | |\n| `varying vec3 vLightWeighting;` | | x | | | |\n| `varying highp vec2 vVertTexCoord;` | | | | x | |\n| `varying vec4 vColor;` | | | x | | |\n| `varying float vStrokeWeight` | | | | | x |\n\n## 下一步计划\n\n即将推出！\n"}},"examples":{"基本图形形状":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"\n这个程序展示了基本图形原始函数的使用方法，包括 <a href=\"https://p5js.org/reference/p5/square\" target=\"_blank\">square()</a>、<a href=\"https://p5js.org/reference/p5/rect\" target=\"_blank\">rect()</a>、<a href=\"https://p5js.org/reference/p5/ellipse\" target=\"_blank\">ellipse()</a>、<a href=\"https://p5js.org/reference/p5/circle\" target=\"_blank\">circle()</a>、<a href=\"https://p5js.org/reference/p5/arc\" target=\"_blank\">arc()</a>、<a href=\"https://p5js.org/reference/p5/line\" target=\"_blank\">line()</a>、<a href=\"https://p5js.org/reference/p5/triangle\" target=\"_blank\">triangle()</a> 和 <a href=\"https://p5js.org/reference/p5/quad\" target=\"_blank\">quad()</a>。"},"颜色":{"relativeUrl":"/examples/shapes-and-color-color","description":"\r\n这个例子在“基本图形形状”的示例基础上，加入了颜色的元素。<a href=\"https://p5js.org/reference/p5/background\" target=\"_blank\">background()</a> 会为画布填充单一颜色，<a href=\"https://p5js.org/reference/p5/stroke\" target=\"_blank\">stroke()</a> 会设置描边的颜色，而 <a href=\"https://p5js.org/reference/p5/fill\" target=\"_blank\">fill()</a> 会设置图形内部的颜色。<a href=\"https://p5js.org/reference/p5/noFill\" target=\"_blank\">noStroke()</a> 和 <a href=\"https://p5js.org/reference/p5/noFill\" target=\"_blank\">noFill()</a> 会分别关闭描边颜色和内部填充颜色。颜色可以通过多种方式表达。本示例演示了几种不同的选项。"},"绘制线条":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"\r\n可以通过点击并拖拽鼠标来绘制线条。\r\n\r\n本示例展示了几个内置变量的使用方法。<a href=\"https://p5js.org/reference/p5/mouseX\">mouseX</a> 和 <a href=\"https://p5js.org/reference/p5/mouseY\">mouseY</a>\r\n可以存储当前的鼠标位置，而 <a href=\"https://p5js.org/reference/p5/pmouseX\">pmouseX</a> 和 <a href=\"https://p5js.org/reference/p5/pmouseY\">pmouseY</a>\r\n代表上一次的鼠标位置。\r\n *这个示例也展示了 HSB（色调-饱和度-亮度）颜色模式 <a href=\"https://p5js.org/reference/p5/colorMode\">colorMode</a> 的使用方法，所以第一个变量用来设置色调。"},"事件驱动的动画":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"\r\n这个示例展示了通过 <a href=\"https://p5js.org/reference/p5/loop\">loop()</a> 和 <a href=\"https://p5js.org/reference/p5/noLoop\">noLoop()</a> 来暂停和恢复动画的使用方法。点击鼠标可以切换动画循环的状态。如果动画循环被停止，用户可以按任意键前进一帧。注意：用户需要点击一下，让画布获得焦点，之后键盘按键操作才能被识别。调用 <a href=\"https://p5js.org/reference/p5/redraw\">redraw()</a> 函数可以使动画前进一帧，这将触发 draw() 函数执行一次。"},"移动设备运动":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"\r\n当展示绘图的移动设备发生移动时，<a href=\"https://p5js.org/reference/p5/deviceMoved\" target=\"_blank\">deviceMoved()</a> 函数会被触发。在这个例子中，<a href=\"https://p5js.org/reference/p5/accelerationX\" target=\"_blank\">accelerationX</a>、<a href=\"https://p5js.org/reference/p5/accelerationY\" target=\"_blank\">accelerationY</a> 和 <a href=\"https://p5js.org/reference/p5/accelerationZ\" target=\"_blank\">accelerationZ</a> 的值可以用来设置一个圆的位置和大小。这个功能仅适用于移动设备。"},"条件":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"\r\nif 和 else 语句用于规定一组特定的 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\" target=\"_blank\">块语句</a> 只在指定条件为真时运行。在这个例子中，只有按下鼠标时，动画才会播放。这就是第 59 行的 if 语句的作用。 你可以在 <a href=\"https://p5js.org/reference/p5/if-else\">p5 参考资料</a>和 <a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals\" target=\"_blank\">MDN上</a> 了解更多关于 if 和 else 语句的信息。\r\n\r\n\r\n比较运算符通过比较两个值来形成条件。在这个例子中，当圆形的色相达到360或更大时，根据第69行的 if 语句，色相会重置为零。若要浏览更多比较运算符的信息，请阅读 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#relational_operators\" target=\"_blank\">MDN 上的相关文档</a>。\r\n\r\n通过逻辑运算符，可以将条件进行组合。<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND\" target=\"_blank\">&&</a> 检查两个条件是否同时为真。在这个例子中，当圆位于画布的水平中心附近时，它的填充颜色为黑色；当它不在这个位置时，填充颜色为白色。这是因为第45行的 if 语句会检查圆的 x 坐标，看它是否大于等于 100 且不超过 300。而 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR\" target=\"_blank\">||</a> 检查的则是两个条件中至少有一个为真的情况。根据第75行的 if 语句，当圆到达画布的左边缘或右边缘时，它会保持水平速度并调头。\r\n"},"文本":{"relativeUrl":"/examples/imported-media-words","description":"\r\n<a href=\"https://p5js.org/reference/p5/text\" target=\"_blank\">text()</a> 函数用于将文本插入到画布中。你可以使用 <a href=\"https://p5js.org/reference/p5/loadFont\" target=\"_blank\">loadFont()</a> 和 <a href=\"https://p5js.org/reference/p5/fontSize\" target=\"_blank\">fontSize()</a> 函数来变更字体或改变文字大小。文本可以通过 <a href=\"https://p5js.org/reference/p5/textAlign\" target=\"_blank\">textAlign()</a> 函数设置为左对齐、居中或右对齐。并且，和形状一样，文本的颜色可以通过 <a href=\"https://p5js.org/reference/p5/fill\" target=\"_blank\">fill()</a> 函数来设置。"},"复制图像数据":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"\r\n通过使用 <a href=\"https://p5js.org/reference/p5/copy\" target=\"_blank\">copy()</a> 方法，你可以通过将彩色图像的颜色从黑白图像的顶部开始， 跟随光标拖动的位置进行复制，来模拟给黑白图像上色的效果。"},"透明蒙版":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"\r\n通过使用 \r\n<a href=\"https://p5js.org/reference/p5/mask\" target=\"_blank\">mask()</a> 方法，\r\n你可以为图像创建一个蒙版，\r\n以指定图像不同部分的透明度。若要在本地运行这个示例，\r\n你需要两个图像文件和一个正在运行的\r\n<a href=\"https://github.com/processing/p5.js/wiki/Local-server\">本地服务器</a>。"},"图像透明度":{"relativeUrl":"/examples/imported-media-image-transparency","description":"\r\n本程序通过使用 \r\n<a href=\"https://p5js.org/reference/p5/tint\" target=\"_blank\">tint()</a> 函数\r\n修改图像的 alpha 值，将一张图像覆盖在另一张图像上。\r\n在画布上左右移动光标可以改变图像的位置。\r\n若要在本地运行这个示例，\r\n你需要一个图像文件和一个正在运行的\r\n<a href=\"https://github.com/processing/p5.js/wiki/Local-server\">本地服务器</a>。"},"音频播放器":{"relativeUrl":"/examples/imported-media-create-audio","description":"\r\n<a href=\"https://p5js.org/reference/p5/createAudio\" target=\"_blank\">createAudio()</a> \r\n用于创建一个音频播放器。本示例展示了播放器的控制按钮，并可调整播放速度。当鼠标在窗口的左边缘时，播放速度是正常的，而随着鼠标向右移动，播放速度会变快。 有关使用音频播放器等媒体元素的更多信息，请参见 <a href=\"https://p5js.org/reference/p5.MediaElement\" target=\"_blank\">p5.MediaElement</a> 参考页面。此处使用的音频文件是一段 <a href=\"https://freesound.org/people/josefpres/sounds/711156/\" target=\"_blank\">公共版权的 Josef Pres 钢琴曲循环</a>。"},"视频播放器":{"relativeUrl":"/examples/imported-media-video","description":"\r\n通过使用 <a href=\"https://p5js.org/reference/p5/noCanvas\" target=\"_blank\">noCanvas()</a> 和 <a href=\"https://p5js.org/reference/p5/createVideo\" target=\"_blank\">createVideo()</a> 函数， 你可以将视频上传到 <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/DOM\" target=\"_blank\">DOM</a> 中，而无需将视频嵌入画布。如果你想在画布元素内嵌入视频，请参考 <a href=\"https://p5js.org/examples/imported-media-video-canvas/\" target=\"_blank\">视频画布</a> 实例。"},"画布上的视频":{"relativeUrl":"/examples/imported-media-video-canvas","description":"\r\n通过使用 <a href=\"https://p5js.org/reference/p5/createVideo\" target=\"_blank\">createVideo()</a> 和 <a href=\"https://p5js.org/reference/p5/image\" target=\"_blank\">image()</a> 函数，你可以将视频上传到画布中。由于视频捕捉是通过 <a href=\"https://p5js.org/reference/p5/image\" target=\"_blank\">image()</a> 构造函数传递的，你可以使用 <a href=\"https://p5js.org/reference/p5/filter\" target=\"_blank\">filter()</a> 方法给视频捕捉添加滤镜。要在本地运行这个示例，你需要一个正在运行的 <a href=\"https://github.com/processing/p5.js/wiki/Local-server\">本地服务器</a>。如果想要构建一个不在画布内嵌入的视频，请参见 <a href=\"https://p5js.org/examples/imported-media-video/\">视频</a> 示例。"},"视频捕捉":{"relativeUrl":"/examples/imported-media-video-capture","description":"\r\n通过使用 <a href=\"https://p5js.org/reference/p5/createCapture\" target=\"_blank\">createCapture()</a> 和 <a href=\"https://p5js.org/reference/p5/image\" target=\"_blank\">image()</a> 函数，你可以获取设备的视频捕捉并将其绘制在画布上。由于视频捕捉是通过 <a href=\"https://p5js.org/reference/p5/image\" target=\"_blank\">image()</a> 构造函数传递的，你可以使用 <a href=\"https://p5js.org/reference/p5/filter\" target=\"_blank\">filter()</a> 方法为视频捕捉添加滤镜。关于上传、显示或设计视频样式的不同方法，请参见 <a href=\"https://p5js.org/examples/imported-media-video/\" target=\"_blank\">视频</a> 和 <a href=\"https://p5js.org/examples/imported-media-video-canvas/\" target=\"_blank\">视频画布</a> 示例。"},"图片拖放":{"relativeUrl":"/examples/input-elements-image-drop","description":"\r\n<a href=\"https://p5js.org/reference/p5.Element/drop\" target=\"_blank\">drop()</a> 是一个 p5.js 元素方法，它在每次有文件加载到元素中时注册一个回调。上传的文件会被创建成一个 <a href=\"https://p5js.org/reference/p5.File\" target=\"_blank\">p5.File</a> 类。你可以使用 <a href=\"https://p5js.org/reference/p5.Element/drop\" target=\"_blank\">drop()</a> 回调函数来检查文件类型，然后编写条件语句来处理文件类型。"},"输入框和按钮":{"relativeUrl":"/examples/input-elements-input-button","description":"\r\n通过使用 <a href=\"https://p5js.org/reference/p5.Element/createElement\" target=\"_blank\">createElement()</a>、<a href=\"https://p5js.org/reference/p5/createInput\" target=\"_blank\">createInput()</a> 和 <a href=\"https://p5js.org/reference/p5.Element/createButton\" target=\"_blank\">createButton()</a> 函数，你可以获取通过输入文本提交的字符串，并将其显示在你的画布上。"},"表单元素":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"\r\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\" target=\"_blank\">文档对象模型</a>（DOM）代表了网页最终呈现的结构。使用 p5.js 的表单元素，如 <a href=\"https://p5js.org/reference/p5/createInput\" target=\"_blank\">createInput()</a>、<a href=\"https://p5js.org/reference/p5/createSelect\" target=\"_blank\">createSelect()</a> 和 <a href=\"https://p5js.org/reference/p5/createRadio\" target=\"_blank\">createRadio()</a>，你可以构建不同的方式来获取通过 <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\" target=\"_blank\">下拉菜单</a>、<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\" target=\"_blank\">输入框</a> 或 <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio\" target=\"_blank\">单选按钮</a> 提交的信息，并根据这些信息更新 DOM。"},"平移":{"relativeUrl":"/examples/transformation-translate","description":"\r\n<a href=\"https://p5js.org/reference/p5/translate\">translate()</a> 函数将坐标系的原点移动到指定位置。\r\n\r\n<a href=\"https://p5js.org/reference/p5/push\">push()</a> 和 <a href=\"https://p5js.org/reference/p5/pop\">pop()</a> 函数可以保存和恢复坐标系及其他各种绘图设置，比如填充颜色。\r\n\r\n请注意，在这个例子中，我们在不同的坐标系中分别绘制了形状（矩形和圆）。"},"旋转":{"relativeUrl":"/examples/transformation-rotate","description":"\r\n<a href=\"https://p5js.org/reference/p5/rotate\">rotate()</a> 函数可以围绕当前原点旋转当前坐标系。\r\n\r\n请注意，默认的原点是画布的左上角。为了围绕画布的中心旋转，我们必须首先平移坐标系，然后再围绕新的原点进行旋转。\r\n\r\n<a href=\"https://p5js.org/reference/p5/push\">push()</a> 和 <a href=\"https://p5js.org/reference/p5/pop\">pop()</a> 函数分别用于保存和恢复坐标系。"},"缩放":{"relativeUrl":"/examples/transformation-scale","description":"\r\n<a href=\"https://p5js.org/reference/p5/scale\">scale()</a> 函数可以按照指定的因子缩放当前坐标系。\r\n\r\n<a href=\"https://p5js.org/reference/p5/push\">push()</a> 和 <a href=\"https://p5js.org/reference/p5/pop\">pop()</a> 函数分别用于保存和恢复坐标系。\r\n\r\n在这个例子中，我们在原点处绘制了一个边长为 200 的正方形，并展示了三种不同的缩放因子。"},"线性插值":{"relativeUrl":"/examples/calculating-values-interpolate","description":"\r\n<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Interpolation\" target=\"_blank\">插值</a>计算两个值之间的一个值。例如，数字 5 是 0 和 10 之间的中点。不同的插值类型在数值之间采用不同的变化率。线性插值，简称 lerp，使用恒定的变化率。<a href=\"https://p5js.org/reference/p5/lerp\" target=\"_blank\">lerp()</a> 函数在两个数字之间进行线性插值。\r\n\r\n将鼠标移动到屏幕上，符号将跟随。在绘制动画的每一帧之间，椭圆会移动部分距离，从其当前位置向光标移动。\r\n"},"映射":{"relativeUrl":"/examples/calculating-values-map","description":"\r\n<a href=\"https://p5js.org/reference/p5/map\" target=\"_blank\">map()</a> 函数将一个范围内的值转换到另一个范围。在这个例子中，map 将光标的水平位置从 0-720 的范围转换到 0-360。最终结果为圆形的色调。Map 还将光标的垂直位置从 0-400 的范围转换到 20-300。最终结果为圆形的直径。\r\n"},"随机":{"relativeUrl":"/examples/calculating-values-random","description":"\r\n这个例子演示了如何使用 <a href=\"https://p5js.org/reference/p5/random\">random()</a> 函数。\r\n\r\n当用户按下鼠标按钮时，圆的位置和颜色会随机改变。\r\n"},"限制":{"relativeUrl":"/examples/calculating-values-constrain","description":"\r\n这个例子绘制了一个圆，其位置随光标移动，但通过使用 <a href=\"https://p5js.org/reference/p5/constrain\" target=\"_blank\">constrain()</a> 函数，确保圆始终保持在一个矩形内。\r\n"},"时钟":{"relativeUrl":"/examples/calculating-values-clock","description":"\r\n当前时间可以通过 <a href=\"https://p5js.org/reference/p5/second\" target=\"_blank\">second()</a>、<a href=\"https://p5js.org/reference/p5/minute\" target=\"_blank\">minute()</a> 和 <a href=\"https://p5js.org/reference/p5/hour\" target=\"_blank\">hour()</a> 函数读取。这个例子使用 <a href=\"https://p5js.org/reference/p5/map\" target=\"_blank\">map()</a> 来计算时针的角度。然后使用<a href=\"https://p5js.org/reference/#group-Transform\" target=\"_blank\">变换</a>来设置它们的位置。\r\n"},"颜色插值":{"relativeUrl":"/examples/repetition-color-interpolation","description":"\r\n<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Interpolation\" target=\"_blank\">插值</a>计算两个值之间的一个值。例如，数字 5 位于 0 和 10 之间的中点。不同的插值类型在数值之间采用不同的变化率。线性插值，简称为 lerp，使用恒定的变化率。<a href=\"https://p5js.org/reference/p5/lerp\" target=\"_blank\">lerp()</a> 函数在两个数字之间进行线性插值。展示在这里的 <a href=\"https://p5js.org/reference/p5/lerpColor\" target=\"_blank\">lerpColor()</a> 函数在两种颜色之间进行线性插值。在这个例子中，stripeCount 变量调整水平条纹出现的数量。将值设置为更高的数字会看起来不像单独的条纹，更像是一个渐变。\r\n"},"色轮":{"relativeUrl":"/examples/repetition-color-wheel","description":"\r\n这个例子展示了不同色调的外观。它使用 <a href=\"https://p5js.org/reference/p5/for\" target=\"_blank\">for 循环</a>来重复变换。循环初始化一个名为 angle 的变量，它改变圆的旋转以及其色调。每次循环重复时，都会相对于画布的中心绘制一个圆。<a href=\"https://p5js.org/reference/p5/push\" target=\"_blank\">push()</a> 和 <a href=\"https://p5js.org/reference/p5/pop\" target=\"_blank\">pop()</a> 函数使这些变换只影响单独的圆。\r\n"},"贝塞尔":{"relativeUrl":"/examples/repetition-bezier","description":"\r\n<a href=\"https://p5js.org/reference/p5/bezier\" target=\"_blank\">bezier()</a> 曲线是使用控制点和锚点创建的。对于 <a href=\"https://p5js.org/reference/p5/bezier\" target=\"_blank\">bezier()</a> 函数，前两个参数指定曲线的第一个点，最后两个参数指定最后一个点。中间的参数设置控制点，这些控制点定义了曲线的形状。\r\n"},"万花筒":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"\r\n万花筒是一种光学仪器，它有两个或更多反射面，这些反射面彼此以一定角度倾斜。使用 <a href=\"https://p5js.org/reference/p5/translate\" target=\"_blank\">translate()</a>、<a href=\"https://p5js.org/reference/p5/rotate\" target=\"_blank\">rotate()</a>、和 <a href=\"https://p5js.org/reference/p5/scale\" target=\"_blank\">scale()</a> 函数，你可以在画布上复制出万花筒的视觉效果。\r\n"},"噪声":{"relativeUrl":"/examples/repetition-noise","description":"\r\n<a href=\"https://en.wikipedia.org/wiki/Perlin_noise\" target=\"_blank\">Perlin 噪声</a>是由 Ken Perlin 编写的算法，用于产生既随机又有机的序列。p5 中的 <a href=\"https://p5js.org/reference/p5/noise\" target=\"_blank\">noise()</a> 函数产生 Perlin 噪声。\r\n\r\n在这个例子中，点的大小基于噪声值。左边的滑块设置点之间的距离。右边的滑块设置噪声计算中的偏移量。\r\n"},"递归树":{"relativeUrl":"/examples/repetition-recursive-tree","description":"\r\n这是通过递归渲染一个简单的树状结构的示例。分支角度根据水平鼠标位置计算得出。左右移动鼠标来改变角度。基于 Daniel Shiffman 为 Processing 编写的 <a href=\"https://processing.org/examples/tree.html\"> 递归树示例</a>。\r\n"},"随机诗歌":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"\r\n使用 <a href=\"https://p5js.org/reference/p5/floor\" target=\"_blank\">floor()</a> 和 <a href=\"https://p5js.org/reference/p5/random\" target=\"_blank\">random()</a> 函数，你可以从数组中随机选择一系列项目，并在画布上以不同的大小和位置绘制它们。\r\n"},"正弦与余弦":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"\r\n这个示例展示了<a href=\"https://en.wikipedia.org/wiki/Sine_and_cosine\">正弦和余弦</a>数学函数。\r\n\r\n动画展示了单位圆（半径为 1 的圆）周围的匀速圆周运动。从 x 轴测量的任何角度都决定了圆上的一个点。该角度的余弦和正弦分别被定义为该点的 x 坐标和 y 坐标。\r\n"},"瞄准":{"relativeUrl":"/examples/angles-and-motion-aim","description":"\r\n<a href=\"https://p5js.org/reference/p5/atan2\" target=\"_blank\">atan2()</a>\r\n函数计算两个位置之间的角度。它计算的角度可以用来让一个形状朝向某物旋转。在这个示例中，眼睛旋转以便看向光标。\r\n"},"三角带":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"\r\n这个示例演示了如何使用 <a href=\"https://p5js.org/reference/p5/beginShape\">beginShape()</a>、<a href=\"https://p5js.org/reference/p5/endShape\">endShape()</a> 和 <a href=\"https://p5js.org/reference/p5/vertex\">vertex()</a> 函数，并在 TRIANGLE_STRIP 模式下指定其顶点来创建一个形状。\r\n"},"圆圈点击器":{"relativeUrl":"/examples/games-circle-clicker","description":"\r\n这个示例演示了一个有时间限制和得分的游戏。浏览器的<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">本地存储</a>用于存储最高分，因此当使用相同的浏览器再次玩游戏时，最高分仍然保留。清除浏览器数据也会清除最高分。\r\n"},"乒乓球":{"relativeUrl":"/examples/games-ping-pong","description":"\r\n这款游戏的灵感来自于最古老的街机视频游戏之一：Atari 的 <a href=\"https://en.wikipedia.org/wiki/Pong\" target=\"_blank\">Pong</a>。在这个双人游戏中，每个玩家控制一个由白色矩形代表的球拍。W 和 S 键使左边的球拍上下移动，而上下箭头键则控制右边的球拍上下移动。玩家通过将球（由一个白色正方形代表）弹过对手一侧的画布边缘来得分。\r\n"},"贪吃蛇":{"relativeUrl":"/examples/games-snake","description":"\r\n这是一种叫做<a href=\"https://en.wikipedia.org/wiki/Snake_(video_game_genre)\" target=\"_blank\">贪吃蛇</a>的街机游戏类型的再现。第一个贪吃蛇游戏是 1976 年发布的 Blockade，许多游戏使用相同的结构。在贪吃蛇游戏中，玩家控制一条蛇的移动，在这个例子中，蛇由一条绿色线代表。玩家的目标是使蛇与一个由红点代表的果实相撞。每次蛇与果实相撞，蛇就会变长。玩家的目标是尽可能地让蛇变长，而不让蛇撞到自己或者撞到游戏区域的边缘。\r\n\r\n这个示例使用一个<a href=\"https://p5js.org/reference/p5.Vector\" target=\"_blank\">向量</a>数组来存储蛇的每个部分的位置。箭头键控制蛇的移动。\r\n"},"几何":{"relativeUrl":"/examples/3d-geometries","description":"\r\np5 的 \r\n<a href=\"https://p5js.org/reference/p5/WEBGL\" target=\"_blank\">WEBGL</a> \r\n模式包括 7 种基本形状，这些形状是平面、立方形、圆柱形、圆锥形、椭圆形、球形和椭球形。此外， \r\n<a href=\"https://p5js.org/reference/p5/model\" target=\"_blank\">model()</a> \r\n函数显示通过 \r\n<a href=\"https://p5js.org/reference/p5/loadModel\" target=\"_blank\">loadModel()</a>。\r\n加载的自定义几何形状。这个示例包括每种基本形状，并且还包括了 \r\n<a href=\"https://nasa3d.arc.nasa.gov/models\" target=\"_blank\">NASA 收藏的</a> 一个模型。"},"自定义几何":{"relativeUrl":"/examples/3d-custom-geometry","description":"\r\n<a href=\"https://p5js.org/reference/p5/buildGeometry\" target=\"_blank\">buildGeometry()</a> \r\n函数将形状存储到一个可以高效利用和重复使用 3D 模型中。"},"材质":{"relativeUrl":"/examples/3d-materials","description":"\r\n在 3D 渲染中，材质决定了表面对光的反应方式。p5 的 \r\n<a href=\"https://p5js.org/reference/p5/WEBGL\" target=\"_blank\">WEBGL</a> \r\n模式支持 \r\n<a href=\"https://p5js.org/reference/p5/ambientMaterial\" target=\"_blank\">环境</a>、\r\n<a href=\"https://p5js.org/reference/p5/emissiveMaterial\" target=\"_blank\">发射</a>、\r\n<a href=\"https://p5js.org/reference/p5/normalMaterial\" target=\"_blank\">法线</a> 和 \r\n<a href=\"https://p5js.org/reference/p5/specularMaterial\" target=\"_blank\">镜面</a> \r\n材质。\r\n\r\n环境材质仅对环境光作出响应。镜面材质对任何光源都会作出响应。\r\n在 p5 中，无论什么光源，发射材质都会显示其颜色。在其他情境中，通常发射材质会发光。\r\n法线材质可以视化表面各部分面对的方向。法线材质不会对光做出响应。\r\n\r\n环境和发射材质可以相互结合。它们也可以和填充、描边相结合。填充设置表面基础颜色，\r\n描边设置对象顶点的颜色。\r\n\r\n此外，\r\n<a href=\"https://p5js.org/reference/p5/texture\" target=\"_blank\">texture()</a> \r\n函数用图像包裹一个对象。此示例中的模型和图像纹理来自 <a href=\"https://nasa3d.arc.nasa.gov\" target=\"_blank\">NASA 的收藏</a>。"},"轨道控制":{"relativeUrl":"/examples/3d-orbit-control","description":"\r\n<a href=\"https://p5js.org/reference/p5/orbitControl\" target=\"_blank\">轨道控制</a> 是指利用鼠标或触屏输入来调整 3D 绘图中的摄像机方向。要旋转摄像机，请左键点击并拖动鼠标，或在触屏上滑动。要平移摄像机，请右键点击并拖动鼠标，或在触屏上用多个手指滑动。要将摄像机移动到绘图中心更近或更远的位置，请使用鼠标滚轮或在触屏上捏放。"},"滤镜着色器":{"relativeUrl":"/examples/3d-filter-shader","description":"\r\n滤镜着色器是一种将效果应用于画布上任何内容的方法。在这个示例中，滤镜效果被应用到一个视频上。"},"用着色器调整位置":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"\r\n着色器可以调整形状顶点的位置，从而实现对 3D 模型的扭曲和动画处理。"},"帧缓冲区模糊":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"\r\n这个示例中的 \r\n<a href=\"https://www.khronos.org/opengl/wiki/Shader\" target=\"_blank\">着色器</a> 利用来自 \r\n<a href=\"https://p5js.org/reference/p5.Framebuffer\" target=\"_blank\">p5.Framebuffer</a> \r\n的深度信息来应用模糊效果。在真实的摄像头上，如果物体比镜头的焦点更近或更远，它们会显得模糊。这里模拟了这种效果。首先，绘图将五个球体渲染到帧缓冲区内。然后，它使用模糊着色器将帧缓冲区渲染到画布上。"},"创建图形":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"\r\n<a href=\"https://p5js.org/reference/p5/createGraphics\" target=\"_blank\">createGraphics()</a>\r\n函数可用于创建一个新的 p5.Graphics 对象，它可以作为画布内的一个屏幕外图形缓冲区。屏幕外缓冲区可以具有与当前显示表面不同的尺寸和属性，尽管它们似乎存在于同一空间中。\r\n"},"多画布":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"\r\n默认情况下，p5 运行在全局模式下，这意味着所有 p5 函数都在全局作用域中，并且所有与画布相关的函数都应用于单个画布。p5 也可以运行在实例模式下，在这种模式下，这些相同的函数是 p5 类实例的方法。每个 p5 实例可能有自己的画布。\r\n\r\n要使用实例模式，必须定义一个带有参数的函数，该参数代表 p5 实例（在此示例中标记为 p）。在这个函数的范围内，通常是全局的所有 p5 函数和变量都将属于这个参数。将函数传递给 p5 构造函数，运行它。\r\n"},"着色器作为纹理":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"\r\n着色器可以作为纹理应用于 2D/3D 形状。\r\n\r\n要了解更多关于在 p5.js 中使用着色器的信息，请参阅：<a href=\"https://itp-xstory.github.io/p5js-shaders/\">p5.js 着色器</a>\r\n"},"雪花":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"\r\n这个例子演示了使用粒子系统模拟雪花飘落的运动。这个程序定义了一个雪花 \r\n<a href=\"https://p5js.org/reference/p5/class\">类</a>\r\n，并使用数组来保存雪花对象。"},"晃动球弹跳":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"\r\n通过使用 \r\n<a href=\"https://p5js.org/reference/p5/class\" target=\"_blank\">类</a>，在移动设备倾斜时，你可以创建一个圆的集合，在画布内移动。你必须在移动设备上打开此页面才能显示绘图。"},"连接的粒子":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"\r\n这个例子使用了两个自定义 \r\n<a href=\"https://p5js.org/reference/p5/class\" target=\"_blank\">类</a>。\r\nParticle 类存储了位置、速度和色调。它使用当前位置和色调渲染一个圆圈，并使用当前速度更新位置。Path 类存储了从 Particle 类创建的对象数组。它渲染连接每个粒子的连接线。当用户点击鼠标时，绘图会创建 Path 类的一个新实例。当用户拖动鼠标时，绘图会在当前路径添加 Particle 类的一个新实例。"},"群集":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"\r\n群集行为演示。\r\n你可以在 Daniel Shiffman 的 \r\n<a href=\"https://natureofcode.com/book/chapter-6-autonomous-agents/\">Nature of Code</a> \r\n一书中找到实例的全面讨论。这个模拟基于 \r\n<a href=\"http://www.red3d.com/cwr/\">Craig Reynolds</a> 的研究，他使用术语 ‘boid’ 来代表类似鸟类的对象。"},"本地存储":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"\n浏览器允许网站在访问者的设备上存储数据。这被称为 \n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\" target=\"_blank\">本地存储</a>。\n<a href=\"https://p5js.org/reference/p5/getItem\" target=\"_blank\">getItem()</a>、\n<a href=\"https://p5js.org/reference/p5/storeItem\" target=\"_blank\">storeItem()</a>、\n<a href=\"https://p5js.org/reference/p5/clearStorage\" target=\"_blank\">clearStorage()</a> 和 <a href=\"https://p5js.org/reference/p5/removeItem\" target=\"_blank\">removeItem()</a> \n函数可以控制它。\n\n这个例子受到了 Daniel Shiffman 用 Java 为 Processing 编写的加载 JSON 数据和加载表格数据例子的启发。它使用一个 \n<a href=\"https://p5js.org/reference/p5/class\" target=\"_blank\">类</a> \n来组织气泡的数据。访问者可以添加新的气泡，它们的数据将被保存在本地存储中。如果访问者重新访问绘图，绘图将重新加载相同的气泡。"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"\n<a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON\" target=\"_blank\">JavaScript Object Notation (JSON)</a> \n是一种在文件中编写数据的格式。尽管语法来自 JavaScript，但 JSON 在许多其他语境中被使用。这个例子是基于 Daniel Shiffman 用 Java 为 Processing 编写的加载 JSON 数据例子。它使用一个 \n<a href=\"https://p5js.org/reference/p5/class\" target=\"_blank\">类</a> \n来组织气泡的数据。当绘图启动时，它从一个 JSON 文件中加载了两个气泡的数据。访问者可以添加新的气泡，下载更新后的 JSON 文件，并加载一个 JSON 文件。"},"表格":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"\nComma-Separated Values (CSV) 是一种在文件中编写数据的格式。p5 可以使用 \n<a href=\"https://p5js.org/reference/p5.Table\" target=\"_blank\">p5.Table</a> 处理这种格式。\n这个例子基于 Daniel Shiffman 为 Processing 创建的 \n<a href=\"https://processing.org/examples/loadsavetable.html\" target=\"_blank\">加载表格数据</a> \n的例子。它使用一个类来组织代表气泡的数据。当绘图启动时，它从一个 CSV 文件中加载了四个气泡的数据。访问者可以添加新的气泡，下载更新后的 CSV 文件，并加载一个 CSV 文件。\n"},"非正交性反射":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"\n这个例子演示了一个球在倾斜表面上弹跳，采用了向量计算来实现反射。\n\n这段代码广泛使用了 \n<a href=\"https://p5js.org/reference/p5.Vector\">p5.Vector</a> 类，包括 \n<a href=\"https://p5js.org/reference/p5/createVector\">createVector()</a> 函数用于创建新的向量，以及用于向量计算的向量方法 \n<a href=\"https://p5js.org/reference/p5.Vector/add\">add()</a> \n和 \n<a href=\"https://p5js.org/reference/p5.Vector/dot\">dot()</a>。"},"软体":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"\n模拟软体朝着鼠标位置加速的物理效果。形状是使用 \n<a href=\"https://p5js.org/reference/p5/curveVertex\">curveVertex()</a> \n和 \n<a href=\"https://p5js.org/reference/p5/curveTightness\">curveTightness()</a> \n创建的曲线。"},"力":{"relativeUrl":"/examples/math-and-physics-forces","description":"\n多种力作用于物体时的演示。\n物体持续受到重力影响。当在“水”中时，物体会经历流体阻力。\n(<a href=\"http://natureofcode.com\">natureofcode.com</a>)\n\n使用 \n<a href=\"https://p5js.org/reference/p5.Vector\">p5.Vector</a> \n类进行力的计算，包括使用 \n<a href=\"https://p5js.org/reference/p5/createVector\">createVector()</a> \n函数创建向量。"},"烟雾粒子":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"\n\n基于 Dan Shiffman 为 Processing 创建的原始 \n<a href=\"https://natureofcode.com/book/chapter-4-particle-systems/\">例子</a>，\n来演示烟雾粒子系统。\n\n这段代码使用了 \n<a href=\"https://p5js.org/reference/p5.Vector\">p5.Vector</a> \n类，包括 \n<a href=\"https://p5js.org/reference/p5/createVector\">createVector()</a> \n函数。使用 p5.Vector 方法执行更新粒子位置和速度的各种计算。\n\n粒子系统被创建为一个 \n<a href=\"https://p5js.org/reference/p5/class\">类</a>，其中包含一个对象数组（属于 Particle 类）。"},"生命游戏":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"\n生命游戏是由数学家 John Conway 创建的细胞自动机（cellular automaton）。细胞自动机是一种模拟类型。在生命游戏中，有一个网格细胞，其中每个细胞或死或活。在这个例子中，黑色方块代表活细胞，白色方块代表死细胞。随着模拟运行，细胞根据一组规则在死和活之间切换：\n<ol>\n <li>如果周围活细胞少于两个，任何活细胞则死亡。</li>\n <li>如果周围活细胞超过三个，任何活细胞则死亡。</li>\n <li>如果周围有两个或三个活细胞，任何活细胞则保持不变，传递到下一代。</li>\n <li>如果周围恰好有三个活细胞，任何死细胞则会复活。</li>\n</ol>\n这些规则会产生复杂的交互作用。单击画布，使用随机细胞开始模拟。再次单击画布将重新启动模拟。"},"Mandelbrot 集":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"\n基于 Daniel Shiffman 为 Processing 创建的 \n<a href=\"https://processing.org/examples/mandelbrot.html\">Mandelbrot 集例子</a>，对 Mandelbrot 集进行了色彩丰富的渲染。"}},"reference":{"Array":{"relativeUrl":"/reference/p5/Array"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"Number":{"relativeUrl":"/reference/p5/number"},"Object":{"relativeUrl":"/reference/p5/object"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"}},"contributor-docs-fallback":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure success volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increase groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](https://p5js.org/reference/p5.sound), [class page](https://p5js.org/reference/p5/p5.Vector), [method page](https://p5js.org/reference/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (https://p5js.org/reference/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (https://p5js.org/reference/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (https://p5js.org/reference/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (https://p5js.org/reference/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```javascript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (https://p5js.org/reference/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (https://p5js.org/reference/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"JSDoc Best Practices\n":{"relativeUrl":"/contribute/jsdoc","description":"Documentation website built comments p5js repo things mind order documentation parsed correctly ## * top file add comment `@module` tag optionally `@submodule` reference category subcategory names contents ```js /** @module Rendering */ ``` Data @submodule LocalStorage classes Create *outside* addon function assign `p5` *inside* class MyClass { // } export default myAddonp5 fn p5MyClass = Document methods directly members *without* `@method` Description myMethod return spot added definition include `@class` including prefix parameters constructor description exist constructorn thisn @class @param {Number} number pass properties `@for` referencing `@property` naming property myProperty @property @for global functions Add listing @method myFunction p5myFunction dynamically generated usual `@for p5` const key ['nameA' nameB'] fn[key] `Hello ${key}` nameA p5 nameB Mark showing `@private` automatically start `_` @private privateMethodA _privateMethodB"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed requires temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve *Both 1x include system diffing algorithm robust system* operating systems browsers render graphics subtle variations differences normal fail Common acceptable Single-pixel shifts line positions Slight anti-aliasing Text font weight kerning Minor curve smoothness text rendered macOS slightly Linux applies thin lines curves graphical elements image earlier caused environments [Example]src/content/contributor-docs/images/pixelmatch2png sophisticated distinguish Initial Compares pixels moderate threshold identify [pixelmatch](https://github.com/mapbox/pixelmatch/) pixel Cluster identification Groups connected difference Breadth-First Search BFS Pattern recognition specifically identifies Line shift clusters represent element shifted 1px Isolated noise Smart failure criteria Applies thresholds Ignores smaller total significant Permits minor typical platforms [Example]src/content/contributor-docs/images/pixelmatchpng balances sensitivity real tolerating platform-specific parameters const MIN_CLUSTER_SIZE Minimum cluster MAX_TOTAL_DIFF_PIXELS Maximum allowed analyzing neighborhood 80% ≤2 neighbors classified structural intelligent ensures due catching important note improved pass failed detecting showing visually meaningful makes reliable reduces failures require manual investigation ### efficient sizes dimensions close 50x50 resizes images canvases result faster Focus visible details intricate hard Design demonstrate reduced cramming variants call times visualTest'stroke variations' stroke p5stroke0 p5strokeWeight1 p5line10 Screenshot thick p5strokeWeight5"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples-fallback":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries-fallback":{"AnimatorJs":{"relativeUrl":"/libraries/","description":"A javascript animation viewer based on a custom animation API primarily designed for p5.js and allows for dynamic, lightweight, real-time rendered browser animations controlled purely by code."},"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Pixyp5js":{"relativeUrl":"/libraries/","description":"A library for easily more easily dealing with pixels in images during runtime"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"TurtleGraphics":{"relativeUrl":"/libraries/","description":"Watch images being drawn using turtle graphics."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"Zoomp5js":{"relativeUrl":"/libraries/","description":"A simple library for adding the zooming functionality to your p5.js project."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.5":{"relativeUrl":"/libraries/","description":"Add UI to p5.js and other goodies"},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Modbuttons":{"relativeUrl":"/libraries/","description":"a simple and modular button system for p5js"},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Sprite":{"relativeUrl":"/libraries/","description":"A basic sprite library that supports both animated and static sprites for p5.js"},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.colorGenerator":{"relativeUrl":"/libraries/","description":"p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point."},"p5.comfyui-helper":{"relativeUrl":"/libraries/","description":"A library for interfacing with ComfyUI"},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."},"XYscope.js":{"relativeUrl":"/libraries/","description":"p5.js library to render graphics on analog vector displays"}},"events-fallback":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro VimeoEmbed ///components/VimeoEmbed/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg Introduction Casey Reas Johanna Hedva Stephanie Pi Phoenix Perry Taeyoon Choi Sara Hendren Epic Jefferson Chandler McWilliams Q&A ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people-fallback":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aarati Akkapeddi ":{"relativeUrl":"/people/#aarati-akkapeddi-"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aaron Welles":{"relativeUrl":"/people/#aaron-welles"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abdiel Lopez":{"relativeUrl":"/people/#abdiel-lopez"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Animesh Sinha":{"relativeUrl":"/people/#animesh-sinha"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antoinette Bumatay-Chan":{"relativeUrl":"/people/#antoinette-bumatay-chan"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashish Karn":{"relativeUrl":"/people/#ashish-karn"},"ashish singh":{"relativeUrl":"/people/#ashish-singh"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"Ashwani Dey":{"relativeUrl":"/people/#ashwani-dey"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"beau-muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"benpalevsky":{"relativeUrl":"/people/#benpalevsky"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"blackboxlogic":{"relativeUrl":"/people/#blackboxlogic"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Bojidar Marinov":{"relativeUrl":"/people/#bojidar-marinov"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"c-dacanay":{"relativeUrl":"/people/#c-dacanay"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Callie":{"relativeUrl":"/people/#callie"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Carrie Wang":{"relativeUrl":"/people/#carrie-wang"},"Casey Conchinha":{"relativeUrl":"/people/#casey-conchinha"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chloe Yan":{"relativeUrl":"/people/#chloe-yan"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"cog25":{"relativeUrl":"/people/#cog25"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"computational mama":{"relativeUrl":"/people/#computational-mama"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"crh82":{"relativeUrl":"/people/#crh82"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Darren Kessner":{"relativeUrl":"/people/#darren-kessner"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"davidblitz":{"relativeUrl":"/people/#davidblitz"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"dhanush":{"relativeUrl":"/people/#dhanush"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"FORCHA PEARL":{"relativeUrl":"/people/#forcha-pearl"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Franolich Design":{"relativeUrl":"/people/#franolich-design"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gabriel Sroka":{"relativeUrl":"/people/#gabriel-sroka"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Albers":{"relativeUrl":"/people/#greg-albers"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Greg Stanton":{"relativeUrl":"/people/#greg-stanton"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Kholiya":{"relativeUrl":"/people/#himanshu-kholiya"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"Ilona Brand":{"relativeUrl":"/people/#ilona-brand"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jackie Liu":{"relativeUrl":"/people/#jackie-liu"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Berghold":{"relativeUrl":"/people/#jared-berghold"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"jeanette":{"relativeUrl":"/people/#jeanette"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Philyaw":{"relativeUrl":"/people/#jordan-philyaw"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Kathryn Lichlyter":{"relativeUrl":"/people/#kathryn-lichlyter"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Gupta":{"relativeUrl":"/people/#keshav-gupta"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"Kit Kuksenok":{"relativeUrl":"/people/#kit-kuksenok"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"Kristian Hamilton":{"relativeUrl":"/people/#kristian-hamilton"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Berrios":{"relativeUrl":"/people/#lauren-berrios"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"Luke Plowden":{"relativeUrl":"/people/#luke-plowden"},"M":{"relativeUrl":"/people/#m"},"ma haidong":{"relativeUrl":"/people/#ma-haidong"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marco Macarena":{"relativeUrl":"/people/#marco-macarena"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Martin Leopold Groedl":{"relativeUrl":"/people/#martin-leopold-groedl"},"Martin Lorentzon":{"relativeUrl":"/people/#martin-lorentzon"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"mathewpan2":{"relativeUrl":"/people/#mathewpan2"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Arguelles":{"relativeUrl":"/people/#maya-arguelles"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"Mayank Verma":{"relativeUrl":"/people/#mayank-verma"},"mclark414":{"relativeUrl":"/people/#mclark414"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"Melody Sharp":{"relativeUrl":"/people/#melody-sharp"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"Mx. Ramsey":{"relativeUrl":"/people/#mx--ramsey"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"oliver thurley":{"relativeUrl":"/people/#oliver-thurley"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"Pim Tournaye":{"relativeUrl":"/people/#pim-tournaye"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Qingfeng Huang":{"relativeUrl":"/people/#qingfeng-huang"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajas Samse":{"relativeUrl":"/people/#rajas-samse"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"Renjie Li":{"relativeUrl":"/people/#renjie-li"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishab Kumar Jha":{"relativeUrl":"/people/#rishab-kumar-jha"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Rishi":{"relativeUrl":"/people/#rishi"},"Ritesh Patil":{"relativeUrl":"/people/#ritesh-patil"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"roxi09":{"relativeUrl":"/people/#roxi09"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"Seyko":{"relativeUrl":"/people/#seyko"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shoury Singh":{"relativeUrl":"/people/#shoury-singh"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Tibor Udvari":{"relativeUrl":"/people/#tibor-udvari"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Vaivaswat Dubey":{"relativeUrl":"/people/#vaivaswat-dubey"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"Vik":{"relativeUrl":"/people/#vik"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishesh Rawal":{"relativeUrl":"/people/#vishesh-rawal"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"willallstet":{"relativeUrl":"/people/#willallstet"},"William Hazard":{"relativeUrl":"/people/#william-hazard"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"Xevi H. Aqeel":{"relativeUrl":"/people/#xevi-h--aqeel"},"Xin Xin":{"relativeUrl":"/people/#xin-xin"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"ℤ":{"relativeUrl":"/people/#ℤ"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference-fallback":{"HSB":{"relativeUrl":"/reference/p5/HSB"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"addElement()":{"relativeUrl":"/reference/p5/addElement","alias":"addElement"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"baseColorShader()":{"relativeUrl":"/reference/p5/baseColorShader","alias":"baseColorShader"},"baseFilterShader()":{"relativeUrl":"/reference/p5/baseFilterShader","alias":"baseFilterShader"},"baseMaterialShader()":{"relativeUrl":"/reference/p5/baseMaterialShader","alias":"baseMaterialShader"},"baseNormalShader()":{"relativeUrl":"/reference/p5/baseNormalShader","alias":"baseNormalShader"},"baseStrokeShader()":{"relativeUrl":"/reference/p5/baseStrokeShader","alias":"baseStrokeShader"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierOrder()":{"relativeUrl":"/reference/p5/bezierOrder","alias":"bezierOrder"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"close()":{"relativeUrl":"/reference/p5/close","alias":"close"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEG_TO_RAD":{"relativeUrl":"/reference/p5/DEG_TO_RAD"},"EXCLUDE":{"relativeUrl":"/reference/p5/EXCLUDE"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"INCLUDE":{"relativeUrl":"/reference/p5/INCLUDE"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createModel()":{"relativeUrl":"/reference/p5/createModel","alias":"createModel"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"fontAscent()":{"relativeUrl":"/reference/p5/fontAscent","alias":"fontAscent"},"fontBounds()":{"relativeUrl":"/reference/p5/fontBounds","alias":"fontBounds"},"fontDescent()":{"relativeUrl":"/reference/p5/fontDescent","alias":"fontDescent"},"fontWidth()":{"relativeUrl":"/reference/p5/fontWidth","alias":"fontWidth"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"imageShader()":{"relativeUrl":"/reference/p5/imageShader","alias":"imageShader"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBlob()":{"relativeUrl":"/reference/p5/loadBlob","alias":"loadBlob"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFilterShader()":{"relativeUrl":"/reference/p5/loadFilterShader","alias":"loadFilterShader"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"paletteLerp()":{"relativeUrl":"/reference/p5/paletteLerp","alias":"paletteLerp"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveObj()":{"relativeUrl":"/reference/p5/saveObj","alias":"saveObj"},"saveStl()":{"relativeUrl":"/reference/p5/saveStl","alias":"saveStl"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"screenToWorld()":{"relativeUrl":"/reference/p5/screenToWorld","alias":"screenToWorld"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spline()":{"relativeUrl":"/reference/p5/spline","alias":"spline"},"splinePoint()":{"relativeUrl":"/reference/p5/splinePoint","alias":"splinePoint"},"splineProperties()":{"relativeUrl":"/reference/p5/splineProperties","alias":"splineProperties"},"splineProperty()":{"relativeUrl":"/reference/p5/splineProperty","alias":"splineProperty"},"splineTangent()":{"relativeUrl":"/reference/p5/splineTangent","alias":"splineTangent"},"splineVertex()":{"relativeUrl":"/reference/p5/splineVertex","alias":"splineVertex"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeMode()":{"relativeUrl":"/reference/p5/strokeMode","alias":"strokeMode"},"strokeShader()":{"relativeUrl":"/reference/p5/strokeShader","alias":"strokeShader"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textBounds()":{"relativeUrl":"/reference/p5/textBounds","alias":"textBounds"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textDirection()":{"relativeUrl":"/reference/p5/textDirection","alias":"textDirection"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textProperties()":{"relativeUrl":"/reference/p5/textProperties","alias":"textProperties"},"textProperty()":{"relativeUrl":"/reference/p5/textProperty","alias":"textProperty"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWeight()":{"relativeUrl":"/reference/p5/textWeight","alias":"textWeight"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"vertexProperty()":{"relativeUrl":"/reference/p5/vertexProperty","alias":"vertexProperty"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"worldToScreen()":{"relativeUrl":"/reference/p5/worldToScreen","alias":"worldToScreen"},"write()":{"relativeUrl":"/reference/p5/write","alias":"write"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.Biquad.freq()":{"relativeUrl":"/reference/p5.Biquad/freq","alias":"freq"},"p5.Biquad.gain()":{"relativeUrl":"/reference/p5.Biquad/gain","alias":"gain"},"p5.Biquad.res()":{"relativeUrl":"/reference/p5.Biquad/res","alias":"res"},"p5.Biquad.setType()":{"relativeUrl":"/reference/p5.Biquad/setType","alias":"setType"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.changed()":{"relativeUrl":"/reference/p5.Element/changed","alias":"changed"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.input()":{"relativeUrl":"/reference/p5.Element/input","alias":"input"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.attackTime()":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.releaseTime()":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Font.textToContours()":{"relativeUrl":"/reference/p5.Font/textToContours","alias":"textToContours"},"p5.Font.textToModel()":{"relativeUrl":"/reference/p5.Font/textToModel","alias":"textToModel"},"p5.Font.textToPaths()":{"relativeUrl":"/reference/p5.Font/textToPaths","alias":"textToPaths"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertexProperty()":{"relativeUrl":"/reference/p5.Geometry/vertexProperty","alias":"vertexProperty"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.Noise.amp()":{"relativeUrl":"/reference/p5.Noise/amp","alias":"amp"},"p5.Noise.start()":{"relativeUrl":"/reference/p5.Noise/start","alias":"start"},"p5.Noise.stop()":{"relativeUrl":"/reference/p5.Noise/stop","alias":"stop"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner.pan()":{"relativeUrl":"/reference/p5.Panner/pan","alias":"pan"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rolloff()":{"relativeUrl":"/reference/p5.Panner3D/rolloff","alias":"rolloff"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.PitchShifter.shift()":{"relativeUrl":"/reference/p5.PitchShifter/shift","alias":"shift"},"p5.Reverb.drywet()":{"relativeUrl":"/reference/p5.Reverb/drywet","alias":"drywet"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.inspectHooks()":{"relativeUrl":"/reference/p5.Shader/inspectHooks","alias":"inspectHooks"},"p5.Shader.modify()":{"relativeUrl":"/reference/p5.Shader/modify","alias":"modify"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.Shader.version()":{"relativeUrl":"/reference/p5.Shader/version","alias":"version"},"p5.SoundFile.amp()":{"relativeUrl":"/reference/p5.SoundFile/amp","alias":"amp"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.start()":{"relativeUrl":"/reference/p5.SoundFile/start","alias":"start"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.getValue()":{"relativeUrl":"/reference/p5.Vector/getValue","alias":"getValue"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.setValue()":{"relativeUrl":"/reference/p5.Vector/setValue","alias":"setValue"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.sound.getAudioContext()":{"relativeUrl":"/reference/p5.sound/getAudioContext","alias":"getAudioContext"},"p5.sound.loadSound()":{"relativeUrl":"/reference/p5.sound/loadSound","alias":"loadSound"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.BandPass":{"relativeUrl":"/reference/p5.sound/p5.BandPass"},"p5.Biquad":{"relativeUrl":"/reference/p5.sound/p5.Biquad"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.HighPass":{"relativeUrl":"/reference/p5.sound/p5.HighPass"},"p5.LowPass":{"relativeUrl":"/reference/p5.sound/p5.LowPass"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner":{"relativeUrl":"/reference/p5.sound/p5.Panner"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.PitchShifter":{"relativeUrl":"/reference/p5.sound/p5.PitchShifter"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"},"p5.sound.setAudioContext()":{"relativeUrl":"/reference/p5.sound/setAudioContext","alias":"setAudioContext"},"p5.sound.userStartAudio()":{"relativeUrl":"/reference/p5.sound/userStartAudio","alias":"userStartAudio"},"p5.sound.userStopAudio()":{"relativeUrl":"/reference/p5.sound/userStopAudio","alias":"userStopAudio"}},"tutorials-fallback":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Chatting with/about Code":{"relativeUrl":"/tutorials/criticalAI1-chatting-with-about-code","description":"Using generative AI to code with p5.js"},"Critical AI Prompt Battle":{"relativeUrl":"/tutorials/criticalAI2-prompt-battle","description":"Build a tool to compare generative AI prompts"},"Critical AI Sentiment Dataset Explorer":{"relativeUrl":"/tutorials/criticalAI3-sentiment-dataset-explorer","description":"Examine the datasets that run AI tools"},"Critical AI No-AI Chatbot":{"relativeUrl":"/tutorials/criticalAI4-no-ai-chatbot","description":"Make an interactive chatbot without using any AI"},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to GLSL":{"relativeUrl":"/tutorials/intro-to-glsl","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU using GLSL."},"p5.strands: Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-p5-strands","description":"An introduction to shaders using p5.strands"},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
diff --git a/src/content/contributor-docs/en/creating_libraries.mdx b/src/content/contributor-docs/en/creating_libraries.mdx
index ab95ae7d34..c1cad3a5db 100644
--- a/src/content/contributor-docs/en/creating_libraries.mdx
+++ b/src/content/contributor-docs/en/creating_libraries.mdx
@@ -306,4 +306,4 @@ p5.prototype.myMethod = function(){
**Examples are great, too!** They show people what your library can do. Because this is all JavaScript, people can see them running online before they download anything.[ ](http://jsfiddle.net/) You can create a collection of examples on the p5.js web editor to showcase how your library works.
-**Submit your library!** Once your library is ready for distribution and you’d like it included on the [p5js.org/libraries](https://p5js.org/libraries/) page, please submit a pull request on the p5.js website GitHub repository following [this instruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!
+**Submit your library!** Once your library is ready for distribution and you’d like it included on the [p5js.org/libraries](https://p5js.org/libraries/) page, please submit a pull request on the p5.js website GitHub repository following [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!
diff --git a/src/content/contributor-docs/en/jsdoc.mdx b/src/content/contributor-docs/en/jsdoc.mdx
new file mode 100644
index 0000000000..6fc39896eb
--- /dev/null
+++ b/src/content/contributor-docs/en/jsdoc.mdx
@@ -0,0 +1,162 @@
+---
+title: |
+ JSDoc Best Practices
+description: >
+ Documentation on the website is built from the comments in the p5.js repo.
+ Here are a few things to keep in mind in order for the documentation to be
+ parsed correctly!
+---
+
+
+Documentation on the website is built from the comments in the p5.js repo. Here are a few things to keep in mind in order for the documentation to be parsed correctly!
+
+## For everything
+
+* At the top of a file, add a comment with the `@module` tag, and optionally also the `@submodule`. These reference the category and subcategory names that the contents of the file should appear under in the reference:
+
+ e.g. for just a category:
+
+ ```js
+ /**
+ * @module Rendering
+ */
+ ```
+
+ e.g. for both:
+
+ ```js
+ /**
+ * @module Data
+ * @submodule LocalStorage
+ */
+ ```
+
+## For classes
+
+* Create classes *outside* of the addon function, and assign them to `p5` *inside.* The class name should be the same always:
+
+ ```js
+ class MyClass {
+ // ...
+ }
+
+ export default function myAddon(p5, fn) {
+ p5.MyClass = MyClass;
+ }
+ ```
+
+* Document class methods directly above the members in classes, *without* a `@method` tag:
+
+ ```js
+ class MyClass {
+ /**
+ * Description goes here
+ */
+ myMethod() {
+ return 4;
+ }
+ }
+ ```
+
+* Documentation for the class itself should go at the spot where the class is added to `p5` and not right next to the class definition. This needs to include the `@class` tag, including a `p5.` prefix on the class name. Also include the parameters for the constructor in this description, if they exist.
+
+ ```js
+ class MyClass {
+ constructor(n) {
+ this.n = n;
+ }
+ }
+
+ export default function myAddon(p5, fn) {
+ /**
+ * Description of the class goes here!
+ *
+ * @class p5.MyClass
+ * @param {Number} n A number to pass in
+ */
+ p5.MyClass = MyClass;
+ }
+ ```
+
+* Documentation for class properties should appear after the class is added to `p5`, not within the class itself. It needs to have the `@for` tag referencing its class, and the `@property` tag naming the property itself:
+
+ ```js
+ class MyClass {
+ myProperty;
+ constructor() {
+ myProperty = 2;
+ }
+ }
+
+ export default function myAddon(p5, fn) {
+ /**
+ * Description of the class goes here!
+ *
+ * @class p5.MyClass
+ */
+ p5.MyClass = MyClass;
+
+ /**
+ * Description of the property goes here!
+ *
+ * @property {Number} myProperty
+ * @for p5.MyClass
+ */
+ }
+ ```
+
+## For global functions
+
+* Add a comment with the `@method` tag listing its name:
+
+ ```js
+ export default function myAddon(p5, fn) {
+ /**
+ * Description goes here!
+ *
+ * @method myFunction
+ */
+ p5.myFunction = function() {
+ return 8;
+ };
+ }
+ ```
+
+* For dynamically generated methods, do the same as usual, but add `@for p5`.
+
+ ```js
+ function myAddon(p5, fn) {
+ for (const key of ['nameA', 'nameB']) {
+ fn[key] = function() {
+ return `Hello from ${key}!`;
+ };
+ }
+
+ /**
+ * @method nameA
+ * @for p5
+ */
+
+ /**
+ * @method nameB
+ * @for p5
+ */
+ }
+ ```
+
+* Mark things that you don't want showing up as `@private`. This is done automatically for methods whose names start with `_`.
+
+ ```js
+ class MyClass {
+ /**
+ * @private
+ */
+ privateMethodA() {
+ // ...
+ }
+
+ _privateMethodB() {
+ // ...
+ }
+ }
+ ```
diff --git a/src/content/reference/en/p5.Amplitude/getLevel.mdx b/src/content/reference/en/p5.Amplitude/getLevel.mdx
index 0da0e343be..173abf925e 100644
--- a/src/content/reference/en/p5.Amplitude/getLevel.mdx
+++ b/src/content/reference/en/p5.Amplitude/getLevel.mdx
@@ -2,54 +2,14 @@
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
+file: src/Amplitude.js
+description: Get the current amplitude value of a sound.
+line: 63
isConstructor: false
itemtype: method
-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>
class: p5.Amplitude
-params:
- - name: channel
- description: |
- <p>Optionally return only channel 0 (left) or 1 (right)</p>
- type: Number
- optional: true
return:
- description: Amplitude as a number between 0.0 and 1.0
+ description: Amplitude level (volume) of a sound.
type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Amplitude/setInput.mdx b/src/content/reference/en/p5.Amplitude/setInput.mdx
index 0b23ef10a6..118e9d3b5d 100644
--- a/src/content/reference/en/p5.Amplitude/setInput.mdx
+++ b/src/content/reference/en/p5.Amplitude/setInput.mdx
@@ -2,63 +2,16 @@
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
+file: src/Amplitude.js
+description: Connect an audio source to the amplitude object.
+line: 53
isConstructor: false
itemtype: method
-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>
class: p5.Amplitude
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
+ - name: input
+ description: '- An object that has audio output.'
+ type: Object
chainable: false
---
diff --git a/src/content/reference/en/p5.Amplitude/smooth.mdx b/src/content/reference/en/p5.Amplitude/smooth.mdx
index a6b3a1be4a..292746b8d8 100644
--- a/src/content/reference/en/p5.Amplitude/smooth.mdx
+++ b/src/content/reference/en/p5.Amplitude/smooth.mdx
@@ -2,18 +2,17 @@
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
+file: src/Amplitude.js
+description: Get the current amplitude value of a sound.
+line: 73
isConstructor: false
itemtype: method
class: p5.Amplitude
params:
- - name: set
- description: |
- <p>smoothing from 0.0 <= 1</p>
+ - name: Smooth
+ description: >-
+ Amplitude analysis by averaging with the last analysis frame. Off by
+ default.
type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Amplitude/toggleNormalize.mdx b/src/content/reference/en/p5.Amplitude/toggleNormalize.mdx
deleted file mode 100644
index 755a9572dc..0000000000
--- a/src/content/reference/en/p5.Amplitude/toggleNormalize.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Amplitude
-params:
- - name: boolean
- description: |
- <p>set normalize to true (1) or false (0)</p>
- type: Boolean
- optional: true
-chainable: false
----
-
-
-# toggleNormalize
diff --git a/src/content/reference/en/p5.AudioIn/amp.mdx b/src/content/reference/en/p5.AudioIn/amp.mdx
index e37ee8c799..ff1ffc43fa 100644
--- a/src/content/reference/en/p5.AudioIn/amp.mdx
+++ b/src/content/reference/en/p5.AudioIn/amp.mdx
@@ -2,23 +2,16 @@
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
+file: src/AudioIn.js
+description: Set amplitude (volume) of a mic input between 0 and 1.0.
+line: 81
isConstructor: false
itemtype: method
class: p5.AudioIn
params:
- - name: vol
- description: |
- <p>between 0 and 1.0</p>
+ - name: amplitudeAmount
+ description: An amplitude value between 0 and 1.
type: Number
- - name: time
- description: |
- <p>ramp time (optional)</p>
- type: Number
- optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5.AudioIn/amplitude.mdx b/src/content/reference/en/p5.AudioIn/amplitude.mdx
deleted file mode 100644
index 1347084252..0000000000
--- a/src/content/reference/en/p5.AudioIn/amplitude.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.AudioIn
-type: p5.Amplitude
----
-
-
-# amplitude
diff --git a/src/content/reference/en/p5.AudioIn/connect.mdx b/src/content/reference/en/p5.AudioIn/connect.mdx
deleted file mode 100644
index 86b246ad8a..0000000000
--- a/src/content/reference/en/p5.AudioIn/connect.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.AudioIn
-params:
- - name: unit
- description: |
- <p>An object that accepts audio input,
- such as an FFT</p>
- type: Object
- optional: true
-chainable: false
----
-
-
-# connect
diff --git a/src/content/reference/en/p5.AudioIn/currentSource.mdx b/src/content/reference/en/p5.AudioIn/currentSource.mdx
deleted file mode 100644
index 99b23e3f14..0000000000
--- a/src/content/reference/en/p5.AudioIn/currentSource.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: currentSource
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: ''
-line: 6085
-isConstructor: false
-itemtype: property
-class: p5.AudioIn
-type: Number|null
----
-
-
-# currentSource
diff --git a/src/content/reference/en/p5.AudioIn/disconnect.mdx b/src/content/reference/en/p5.AudioIn/disconnect.mdx
deleted file mode 100644
index 2f181053f1..0000000000
--- a/src/content/reference/en/p5.AudioIn/disconnect.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index c8160bcdfd..0000000000
--- a/src/content/reference/en/p5.AudioIn/enabled.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.AudioIn
-type: Boolean
----
-
-
-# enabled
diff --git a/src/content/reference/en/p5.AudioIn/getLevel.mdx b/src/content/reference/en/p5.AudioIn/getLevel.mdx
deleted file mode 100644
index 226380bce3..0000000000
--- a/src/content/reference/en/p5.AudioIn/getLevel.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.AudioIn
-params:
- - name: smoothing
- description: |
- <p>Smoothing is 0.0 by default.
- Smooths values based on previous values.</p>
- type: Number
- optional: true
-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
deleted file mode 100644
index df9ab93f1b..0000000000
--- a/src/content/reference/en/p5.AudioIn/getSources.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.AudioIn
-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
-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
deleted file mode 100644
index fd9f45cf8f..0000000000
--- a/src/content/reference/en/p5.AudioIn/input.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: input
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: ''
-line: 6066
-isConstructor: false
-itemtype: property
-class: p5.AudioIn
-type: GainNode
----
-
-
-# input
diff --git a/src/content/reference/en/p5.AudioIn/mediaStream.mdx b/src/content/reference/en/p5.AudioIn/mediaStream.mdx
deleted file mode 100644
index 73c62a2288..0000000000
--- a/src/content/reference/en/p5.AudioIn/mediaStream.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: mediaStream
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: ''
-line: 6080
-isConstructor: false
-itemtype: property
-class: p5.AudioIn
-type: MediaStreamAudioSourceNode|null
----
-
-
-# mediaStream
diff --git a/src/content/reference/en/p5.AudioIn/output.mdx b/src/content/reference/en/p5.AudioIn/output.mdx
deleted file mode 100644
index 7fa86373ad..0000000000
--- a/src/content/reference/en/p5.AudioIn/output.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: output
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: ''
-line: 6070
-isConstructor: false
-itemtype: property
-class: p5.AudioIn
-type: GainNode
----
-
-
-# output
diff --git a/src/content/reference/en/p5.AudioIn/setSource.mdx b/src/content/reference/en/p5.AudioIn/setSource.mdx
deleted file mode 100644
index bfd12b7f3a..0000000000
--- a/src/content/reference/en/p5.AudioIn/setSource.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.AudioIn
-params:
- - name: num
- description: |
- <p>position of input source in the array</p>
- type: Number
-chainable: false
----
-
-
-# setSource
diff --git a/src/content/reference/en/p5.AudioIn/start.mdx b/src/content/reference/en/p5.AudioIn/start.mdx
index a52ef9fd12..c362f96a3f 100644
--- a/src/content/reference/en/p5.AudioIn/start.mdx
+++ b/src/content/reference/en/p5.AudioIn/start.mdx
@@ -2,35 +2,12 @@
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
+file: src/AudioIn.js
+description: Start the audio input.
+line: 56
isConstructor: false
itemtype: method
class: p5.AudioIn
-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
chainable: false
---
diff --git a/src/content/reference/en/p5.AudioIn/stop.mdx b/src/content/reference/en/p5.AudioIn/stop.mdx
index 6cdc868de6..9d73f2b98f 100644
--- a/src/content/reference/en/p5.AudioIn/stop.mdx
+++ b/src/content/reference/en/p5.AudioIn/stop.mdx
@@ -2,11 +2,9 @@
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
+file: src/AudioIn.js
+description: Stop the audio input.
+line: 72
isConstructor: false
itemtype: method
class: p5.AudioIn
diff --git a/src/content/reference/en/p5.AudioIn/stream.mdx b/src/content/reference/en/p5.AudioIn/stream.mdx
deleted file mode 100644
index c5ff967c99..0000000000
--- a/src/content/reference/en/p5.AudioIn/stream.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: stream
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: ''
-line: 6075
-isConstructor: false
-itemtype: property
-class: p5.AudioIn
-type: MediaStream|null
----
-
-
-# stream
diff --git a/src/content/reference/en/p5.AudioVoice/connect.mdx b/src/content/reference/en/p5.AudioVoice/connect.mdx
deleted file mode 100644
index 3c91ef365c..0000000000
--- a/src/content/reference/en/p5.AudioVoice/connect.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.AudioVoice
-params:
- - name: unit
- description: ''
- type: Object
-chainable: false
----
-
-
-# connect
diff --git a/src/content/reference/en/p5.AudioVoice/disconnect.mdx b/src/content/reference/en/p5.AudioVoice/disconnect.mdx
deleted file mode 100644
index 6c492b2096..0000000000
--- a/src/content/reference/en/p5.AudioVoice/disconnect.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: disconnect
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Disconnect from soundOut</p>
-line: 11194
-isConstructor: false
-itemtype: method
-class: p5.AudioVoice
-chainable: false
----
-
-
-# disconnect
diff --git a/src/content/reference/en/p5.Biquad/freq.mdx b/src/content/reference/en/p5.Biquad/freq.mdx
new file mode 100644
index 0000000000..2b778dd649
--- /dev/null
+++ b/src/content/reference/en/p5.Biquad/freq.mdx
@@ -0,0 +1,19 @@
+---
+title: freq
+module: p5.sound
+submodule: p5.sound
+file: src/Biquad.js
+description: Set the cutoff frequency of the filter.
+line: 109
+isConstructor: false
+itemtype: method
+class: p5.Biquad
+params:
+ - name: cutoffFrequency
+ description: the cutoff frequency of the filter.
+ type: Number
+chainable: false
+---
+
+
+# freq
diff --git a/src/content/reference/en/p5.Biquad/gain.mdx b/src/content/reference/en/p5.Biquad/gain.mdx
new file mode 100644
index 0000000000..5918e304c1
--- /dev/null
+++ b/src/content/reference/en/p5.Biquad/gain.mdx
@@ -0,0 +1,21 @@
+---
+title: gain
+module: p5.sound
+submodule: p5.sound
+file: src/Biquad.js
+description: The gain of the filter in dB units.
+line: 89
+isConstructor: false
+itemtype: method
+class: p5.Biquad
+params:
+ - name: gain
+ description: >-
+ gain value in dB units. The gain is only used for lowshelf, highshelf, and
+ peaking filters.
+ type: Number
+chainable: false
+---
+
+
+# gain
diff --git a/src/content/reference/en/p5.Biquad/res.mdx b/src/content/reference/en/p5.Biquad/res.mdx
new file mode 100644
index 0000000000..a94bfb7fbb
--- /dev/null
+++ b/src/content/reference/en/p5.Biquad/res.mdx
@@ -0,0 +1,19 @@
+---
+title: res
+module: p5.sound
+submodule: p5.sound
+file: src/Biquad.js
+description: The filter's resonance factor.
+line: 79
+isConstructor: false
+itemtype: method
+class: p5.Biquad
+params:
+ - name: resonance
+ description: resonance of the filter. A number between 0 and 100.
+ type: Number
+chainable: false
+---
+
+
+# res
diff --git a/src/content/reference/en/p5.Biquad/setType.mdx b/src/content/reference/en/p5.Biquad/setType.mdx
new file mode 100644
index 0000000000..2e01458ab8
--- /dev/null
+++ b/src/content/reference/en/p5.Biquad/setType.mdx
@@ -0,0 +1,21 @@
+---
+title: setType
+module: p5.sound
+submodule: p5.sound
+file: src/Biquad.js
+description: Set the type of the filter.
+line: 99
+isConstructor: false
+itemtype: method
+class: p5.Biquad
+params:
+ - name: type
+ description: >-
+ type of the filter. Options: "lowpass", "highpass", "bandpass",
+ "lowshelf", "highshelf", "notch", "allpass", "peaking"
+ type: String
+chainable: false
+---
+
+
+# setType
diff --git a/src/content/reference/en/p5.Camera/camera.mdx b/src/content/reference/en/p5.Camera/camera.mdx
index 299293548c..03f6c9816b 100644
--- a/src/content/reference/en/p5.Camera/camera.mdx
+++ b/src/content/reference/en/p5.Camera/camera.mdx
@@ -51,12 +51,11 @@ description: >
the "up"
vector is <code>(0, 1, 0)</code>.</p>
-line: 2773
+line: 2108
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to toggle between cameras.
@@ -184,52 +183,44 @@ example:
</code>
</div>
class: p5.Camera
-params:
- - name: x
- description: |
- <p>x-coordinate of the camera. Defaults to 0.</p>
- type: Number
- optional: true
- - name: 'y'
- description: |
- <p>y-coordinate of the camera. Defaults to 0.</p>
- type: Number
- optional: true
- - name: z
- description: |
- <p>z-coordinate of the camera. Defaults to 800.</p>
- type: Number
- optional: true
- - name: centerX
- description: |
- <p>x-coordinate of the point the camera faces. Defaults to 0.</p>
- type: Number
- optional: true
- - name: centerY
- description: |
- <p>y-coordinate of the point the camera faces. Defaults to 0.</p>
- type: Number
- optional: true
- - name: centerZ
- description: |
- <p>z-coordinate of the point the camera faces. Defaults to 0.</p>
- type: Number
- optional: true
- - name: upX
- description: |
- <p>x-component of the camera’s "up" vector. Defaults to 0.</p>
- type: Number
- optional: true
- - name: upY
- description: |
- <p>x-component of the camera’s "up" vector. Defaults to 1.</p>
- type: Number
- optional: true
- - name: upZ
- description: |
- <p>z-component of the camera’s "up" vector. Defaults to 0.</p>
- type: Number
- optional: true
+overloads:
+ - params:
+ - name: x
+ description: x-coordinate of the camera. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the camera. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: z
+ description: z-coordinate of the camera. Defaults to 800.
+ optional: 1
+ type: Number
+ - name: centerX
+ description: x-coordinate of the point the camera faces. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: centerY
+ description: y-coordinate of the point the camera faces. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: centerZ
+ description: z-coordinate of the point the camera faces. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: upX
+ description: x-component of the camera’s "up" vector. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: upY
+ description: x-component of the camera’s "up" vector. Defaults to 1.
+ optional: 1
+ type: Number
+ - name: upZ
+ description: z-component of the camera’s "up" vector. Defaults to 0.
+ optional: 1
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Camera/centerX.mdx b/src/content/reference/en/p5.Camera/centerX.mdx
index 9f519b15dc..c5c8f0cbaa 100644
--- a/src/content/reference/en/p5.Camera/centerX.mdx
+++ b/src/content/reference/en/p5.Camera/centerX.mdx
@@ -10,28 +10,27 @@ description: >
"world" space, so
<code>myCamera.centerX</code> is 0.</p>
-line: 1187
+line: 1199
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-center.
cam.setPosition(0, -400, 800);
@@ -69,17 +68,17 @@ example:
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-right.
cam.setPosition(100, -400, 800);
diff --git a/src/content/reference/en/p5.Camera/centerY.mdx b/src/content/reference/en/p5.Camera/centerY.mdx
index 3dbe3aec5f..7ff9004125 100644
--- a/src/content/reference/en/p5.Camera/centerY.mdx
+++ b/src/content/reference/en/p5.Camera/centerY.mdx
@@ -10,28 +10,27 @@ description: >
"world" space, so
<code>myCamera.centerY</code> is 0.</p>
-line: 1300
+line: 1199
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-center.
cam.setPosition(0, -400, 800);
@@ -69,17 +68,17 @@ example:
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-right.
cam.setPosition(100, -400, 800);
diff --git a/src/content/reference/en/p5.Camera/centerZ.mdx b/src/content/reference/en/p5.Camera/centerZ.mdx
index 4695abd3c9..57502fdb3e 100644
--- a/src/content/reference/en/p5.Camera/centerZ.mdx
+++ b/src/content/reference/en/p5.Camera/centerZ.mdx
@@ -10,28 +10,27 @@ description: >
"world" space, so
<code>myCamera.centerZ</code> is 0.</p>
-line: 1413
+line: 1199
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-center.
cam.setPosition(0, -400, 800);
@@ -69,17 +68,17 @@ example:
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-right.
cam.setPosition(100, -400, 800);
diff --git a/src/content/reference/en/p5.Camera/eyeX.mdx b/src/content/reference/en/p5.Camera/eyeX.mdx
index 6216fb34f1..72f0ead5d4 100644
--- a/src/content/reference/en/p5.Camera/eyeX.mdx
+++ b/src/content/reference/en/p5.Camera/eyeX.mdx
@@ -6,28 +6,27 @@ file: src/webgl/p5.Camera.js
description: |
<p>The camera’s x-coordinate.</p>
<p>By default, the camera’s x-coordinate is set to 0 in "world" space.</p>
-line: 851
+line: 1199
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-center.
cam.setPosition(0, -400, 800);
@@ -65,17 +64,17 @@ example:
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-center.
cam.setPosition(0, -400, 800);
diff --git a/src/content/reference/en/p5.Camera/eyeY.mdx b/src/content/reference/en/p5.Camera/eyeY.mdx
index d00f4dff88..ea0710e73a 100644
--- a/src/content/reference/en/p5.Camera/eyeY.mdx
+++ b/src/content/reference/en/p5.Camera/eyeY.mdx
@@ -6,23 +6,19 @@ file: src/webgl/p5.Camera.js
description: |
<p>The camera’s y-coordinate.</p>
<p>By default, the camera’s y-coordinate is set to 0 in "world" space.</p>
-line: 963
+line: 1199
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
@@ -34,6 +30,9 @@ example:
// Point the camera at the origin.
cam.lookAt(0, 0, 0);
+ // Set the camera.
+ setCamera(cam);
+
describe(
'A white cube on a gray background. The text "eyeY: -400" is written in black beneath it.'
);
@@ -55,7 +54,7 @@ example:
fill(0);
// Display the value of eyeY, rounded to the nearest integer.
- text(`eyeX: ${round(cam.eyeY)}`, 0, 55);
+ text(`eyeY: ${round(cam.eyeY)}`, 0, 55);
}
</code>
</div>
@@ -65,17 +64,17 @@ example:
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-center.
cam.setPosition(0, -400, 800);
diff --git a/src/content/reference/en/p5.Camera/eyeZ.mdx b/src/content/reference/en/p5.Camera/eyeZ.mdx
index 1a18868aed..b10735521b 100644
--- a/src/content/reference/en/p5.Camera/eyeZ.mdx
+++ b/src/content/reference/en/p5.Camera/eyeZ.mdx
@@ -6,28 +6,27 @@ file: src/webgl/p5.Camera.js
description: |
<p>The camera’s z-coordinate.</p>
<p>By default, the camera’s z-coordinate is set to 800 in "world" space.</p>
-line: 1075
+line: 1199
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-center.
cam.setPosition(0, -400, 800);
@@ -65,17 +64,17 @@ example:
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-center.
cam.setPosition(0, -400, 800);
diff --git a/src/content/reference/en/p5.Camera/frustum.mdx b/src/content/reference/en/p5.Camera/frustum.mdx
index 928f3791f6..c79ff0bf38 100644
--- a/src/content/reference/en/p5.Camera/frustum.mdx
+++ b/src/content/reference/en/p5.Camera/frustum.mdx
@@ -58,12 +58,11 @@ description: >
the
camera and the origin.</p>
-line: 2274
+line: 1546
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to toggle between cameras.
@@ -127,43 +126,44 @@ example:
</code>
</div>
class: p5.Camera
-params:
- - name: left
- description: >
- <p>x-coordinate of the frustum’s left plane. Defaults to <code>-width /
- 20</code>.</p>
- type: Number
- optional: true
- - name: right
- description: >
- <p>x-coordinate of the frustum’s right plane. Defaults to <code>width /
- 20</code>.</p>
- type: Number
- optional: true
- - name: bottom
- description: >
- <p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
- 20</code>.</p>
- type: Number
- optional: true
- - name: top
- description: >
- <p>y-coordinate of the frustum’s top plane. Defaults to <code>-height /
- 20</code>.</p>
- type: Number
- optional: true
- - name: near
- description: >
- <p>z-coordinate of the frustum’s near plane. Defaults to <code>0.1 *
- 800</code>.</p>
- type: Number
- optional: true
- - name: far
- description: >
- <p>z-coordinate of the frustum’s far plane. Defaults to <code>10 *
- 800</code>.</p>
- type: Number
- optional: true
+overloads:
+ - params:
+ - name: left
+ description: >-
+ x-coordinate of the frustum’s left plane. Defaults to <code>-width /
+ 20</code>.
+ optional: 1
+ type: Number
+ - name: right
+ description: >-
+ x-coordinate of the frustum’s right plane. Defaults to <code>width /
+ 20</code>.
+ optional: 1
+ type: Number
+ - name: bottom
+ description: >-
+ y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
+ 20</code>.
+ optional: 1
+ type: Number
+ - name: top
+ description: >-
+ y-coordinate of the frustum’s top plane. Defaults to <code>-height /
+ 20</code>.
+ optional: 1
+ type: Number
+ - name: near
+ description: >-
+ z-coordinate of the frustum’s near plane. Defaults to <code>0.1 *
+ 800</code>.
+ optional: 1
+ type: Number
+ - name: far
+ description: >-
+ z-coordinate of the frustum’s far plane. Defaults to <code>10 *
+ 800</code>.
+ optional: 1
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Camera/lookAt.mdx b/src/content/reference/en/p5.Camera/lookAt.mdx
index 5ca544376b..fbbcad7af9 100644
--- a/src/content/reference/en/p5.Camera/lookAt.mdx
+++ b/src/content/reference/en/p5.Camera/lookAt.mdx
@@ -19,12 +19,11 @@ description: >
<code>myCamera.lookAt(10, 20, 30)</code> points the camera at the coordinates
<code>(10, 20, 30)</code>.</p>
-line: 2676
+line: 1926
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to look at a different cube.
@@ -38,6 +37,9 @@ example:
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-center.
cam.setPosition(0, -400, 800);
@@ -86,22 +88,23 @@ example:
</code>
</div>
class: p5.Camera
-params:
- - name: x
- description: >
- <p>x-coordinate of the position where the camera should look in "world"
- space.</p>
- type: Number
- - name: 'y'
- description: >
- <p>y-coordinate of the position where the camera should look in "world"
- space.</p>
- type: Number
- - name: z
- description: >
- <p>z-coordinate of the position where the camera should look in "world"
- space.</p>
- type: Number
+overloads:
+ - params:
+ - name: x
+ description: >-
+ x-coordinate of the position where the camera should look in "world"
+ space.
+ type: Number
+ - name: 'y'
+ description: >-
+ y-coordinate of the position where the camera should look in "world"
+ space.
+ type: Number
+ - name: z
+ description: >-
+ z-coordinate of the position where the camera should look in "world"
+ space.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Camera/move.mdx b/src/content/reference/en/p5.Camera/move.mdx
index 90242aa794..b1fae012ae 100644
--- a/src/content/reference/en/p5.Camera/move.mdx
+++ b/src/content/reference/en/p5.Camera/move.mdx
@@ -16,12 +16,11 @@ description: >
pixels to the right, 20 pixels down, and 30 pixels backward in its "local"
space.</p>
-line: 3001
+line: 2247
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click the canvas to begin detecting key presses.
@@ -41,6 +40,9 @@ example:
// Point it at the origin.
cam.lookAt(0, 0, 0);
+ // Set the camera.
+ setCamera(cam);
+
describe(
'A white cube drawn against a gray background. The cube appears to move when the user presses certain keys.'
);
@@ -51,31 +53,29 @@ example:
// Move the camera along its "local" axes
// when the user presses certain keys.
- if (keyIsPressed === true) {
-
- // Move horizontally.
- if (keyCode === LEFT_ARROW) {
- cam.move(-1, 0, 0);
- }
- if (keyCode === RIGHT_ARROW) {
- cam.move(1, 0, 0);
- }
-
- // Move vertically.
- if (keyCode === UP_ARROW) {
- cam.move(0, -1, 0);
- }
- if (keyCode === DOWN_ARROW) {
- cam.move(0, 1, 0);
- }
-
- // Move in/out of the screen.
- if (key === 'i') {
- cam.move(0, 0, -1);
- }
- if (key === 'o') {
- cam.move(0, 0, 1);
- }
+
+ // Move horizontally.
+ if (keyIsDown(LEFT_ARROW)) {
+ cam.move(-1, 0, 0);
+ }
+ if (keyIsDown(RIGHT_ARROW)) {
+ cam.move(1, 0, 0);
+ }
+
+ // Move vertically.
+ if (keyIsDown(UP_ARROW)) {
+ cam.move(0, -1, 0);
+ }
+ if (keyIsDown(DOWN_ARROW)) {
+ cam.move(0, 1, 0);
+ }
+
+ // Move in/out of the screen.
+ if (keyIsDown('i')) {
+ cam.move(0, 0, -1);
+ }
+ if (keyIsDown('o')) {
+ cam.move(0, 0, 1);
}
// Draw the box.
@@ -84,19 +84,17 @@ example:
</code>
</div>
class: p5.Camera
-params:
- - name: x
- description: |
- <p>distance to move along the camera’s "local" x-axis.</p>
- type: Number
- - name: 'y'
- description: |
- <p>distance to move along the camera’s "local" y-axis.</p>
- type: Number
- - name: z
- description: |
- <p>distance to move along the camera’s "local" z-axis.</p>
- type: Number
+overloads:
+ - params:
+ - name: x
+ description: distance to move along the camera’s "local" x-axis.
+ type: Number
+ - name: 'y'
+ description: distance to move along the camera’s "local" y-axis.
+ type: Number
+ - name: z
+ description: distance to move along the camera’s "local" z-axis.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Camera/ortho.mdx b/src/content/reference/en/p5.Camera/ortho.mdx
index 18c4a7f902..01c3fc996f 100644
--- a/src/content/reference/en/p5.Camera/ortho.mdx
+++ b/src/content/reference/en/p5.Camera/ortho.mdx
@@ -51,12 +51,11 @@ description: >
<code>far</code> are set to
0 and <code>max(width, height) + 800</code>, respectively.</p>
-line: 2086
+line: 1413
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to toggle between cameras.
@@ -178,42 +177,42 @@ example:
</code>
</div>
class: p5.Camera
-params:
- - name: left
- description: >
- <p>x-coordinate of the frustum’s left plane. Defaults to <code>-width /
- 2</code>.</p>
- type: Number
- optional: true
- - name: right
- description: >
- <p>x-coordinate of the frustum’s right plane. Defaults to <code>width /
- 2</code>.</p>
- type: Number
- optional: true
- - name: bottom
- description: >
- <p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
- 2</code>.</p>
- type: Number
- optional: true
- - name: top
- description: >
- <p>y-coordinate of the frustum’s top plane. Defaults to <code>-height /
- 2</code>.</p>
- type: Number
- optional: true
- - name: near
- description: |
- <p>z-coordinate of the frustum’s near plane. Defaults to 0.</p>
- type: Number
- optional: true
- - name: far
- description: >
- <p>z-coordinate of the frustum’s far plane. Defaults to <code>max(width,
- height) + 800</code>.</p>
- type: Number
- optional: true
+overloads:
+ - params:
+ - name: left
+ description: >-
+ x-coordinate of the frustum’s left plane. Defaults to <code>-width /
+ 2</code>.
+ optional: 1
+ type: Number
+ - name: right
+ description: >-
+ x-coordinate of the frustum’s right plane. Defaults to <code>width /
+ 2</code>.
+ optional: 1
+ type: Number
+ - name: bottom
+ description: >-
+ y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
+ 2</code>.
+ optional: 1
+ type: Number
+ - name: top
+ description: >-
+ y-coordinate of the frustum’s top plane. Defaults to <code>-height /
+ 2</code>.
+ optional: 1
+ type: Number
+ - name: near
+ description: z-coordinate of the frustum’s near plane. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: far
+ description: >-
+ z-coordinate of the frustum’s far plane. Defaults to <code>max(width,
+ height) + 800</code>.
+ optional: 1
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Camera/pan.mdx b/src/content/reference/en/p5.Camera/pan.mdx
index 0dcf21cb1c..311bed05cd 100644
--- a/src/content/reference/en/p5.Camera/pan.mdx
+++ b/src/content/reference/en/p5.Camera/pan.mdx
@@ -24,12 +24,11 @@ description: >
<p>Note: Angles are interpreted based on the current
<a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-line: 2550
+line: 1775
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let cam;
@@ -41,6 +40,9 @@ example:
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-center.
cam.setPosition(0, -400, 800);
@@ -69,12 +71,13 @@ example:
</code>
</div>
class: p5.Camera
-params:
- - name: angle
- description: |
- <p>amount to rotate in the current
- <a href="#/p5/angleMode">angleMode()</a>.</p>
- type: Number
+overloads:
+ - params:
+ - name: angle
+ description: |-
+ amount to rotate in the current
+ <a href="#/p5/angleMode">angleMode()</a>.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Camera/perspective.mdx b/src/content/reference/en/p5.Camera/perspective.mdx
index 68023446a3..97cec5e241 100644
--- a/src/content/reference/en/p5.Camera/perspective.mdx
+++ b/src/content/reference/en/p5.Camera/perspective.mdx
@@ -89,12 +89,11 @@ description: >
<code>10 * 800</code>,
which is 10 times the default distance between the camera and the origin.</p>
-line: 1863
+line: 1199
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to toggle between cameras.
@@ -205,31 +204,32 @@ example:
</code>
</div>
class: p5.Camera
-params:
- - name: fovy
- description: |
- <p>camera frustum vertical field of view. Defaults to
- <code>2 * atan(height / 2 / 800)</code>.</p>
- type: Number
- optional: true
- - name: aspect
- description: |
- <p>camera frustum aspect ratio. Defaults to
- <code>width / height</code>.</p>
- type: Number
- optional: true
- - name: near
- description: |
- <p>distance from the camera to the near clipping plane.
- Defaults to <code>0.1 * 800</code>.</p>
- type: Number
- optional: true
- - name: far
- description: |
- <p>distance from the camera to the far clipping plane.
- Defaults to <code>10 * 800</code>.</p>
- type: Number
- optional: true
+overloads:
+ - params:
+ - name: fovy
+ description: |-
+ camera frustum vertical field of view. Defaults to
+ <code>2 * atan(height / 2 / 800)</code>.
+ optional: 1
+ type: Number
+ - name: aspect
+ description: |-
+ camera frustum aspect ratio. Defaults to
+ <code>width / height</code>.
+ optional: 1
+ type: Number
+ - name: near
+ description: |-
+ distance from the camera to the near clipping plane.
+ Defaults to <code>0.1 * 800</code>.
+ optional: 1
+ type: Number
+ - name: far
+ description: |-
+ distance from the camera to the far clipping plane.
+ Defaults to <code>10 * 800</code>.
+ optional: 1
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Camera/roll.mdx b/src/content/reference/en/p5.Camera/roll.mdx
deleted file mode 100644
index 5c6d061367..0000000000
--- a/src/content/reference/en/p5.Camera/roll.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: roll
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
- <p>Rotates the camera in a clockwise/counter-clockwise direction.</p>
-
- <p>Rolling rotates the camera without changing its orientation. The rotation
-
- happens in the camera’s "local" space.</p>
-
- <p>The parameter, <code>angle</code>, is the angle the camera should rotate.
- Passing a
-
- positive angle, as in <code>myCamera.roll(0.001)</code>, rotates the camera in
- counter-clockwise direction.
-
- Passing a negative angle, as in <code>myCamera.roll(-0.001)</code>, rotates
- the
-
- camera in clockwise direction.</p>
-
- <p>Note: Angles are interpreted based on the current
-
- <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-line: 2472
-isConstructor: false
-itemtype: method
-alt: >-
- camera view rotates in counter clockwise direction with vertically stacked
- boxes in front of it.
-example:
- - |-
-
- <div>
- <code>
- let cam;
- let delta = 0.01;
-
- function setup() {
- createCanvas(100, 100, WEBGL);
- normalMaterial();
- // Create a p5.Camera object.
- cam = createCamera();
- }
-
- function draw() {
- background(200);
-
- // Roll camera according to angle 'delta'
- cam.roll(delta);
-
- translate(0, 0, 0);
- box(20);
- translate(0, 25, 0);
- box(20);
- translate(0, 26, 0);
- box(20);
- translate(0, 27, 0);
- box(20);
- translate(0, 28, 0);
- box(20);
- translate(0,29, 0);
- box(20);
- translate(0, 30, 0);
- box(20);
- }
- </code>
- </div>
-class: p5.Camera
-params:
- - name: angle
- description: |
- <p>amount to rotate camera in current
- <a href="#/p5/angleMode">angleMode</a> units.</p>
- type: Number
-chainable: false
----
-
-
-# roll
diff --git a/src/content/reference/en/p5.Camera/set.mdx b/src/content/reference/en/p5.Camera/set.mdx
index 932ffc8cc7..bb993cd1ce 100644
--- a/src/content/reference/en/p5.Camera/set.mdx
+++ b/src/content/reference/en/p5.Camera/set.mdx
@@ -13,12 +13,11 @@ description: >
<code>cam2.set(cam1)</code> will set <code>cam2</code> using
<code>cam1</code>’s configuration.</p>
-line: 3252
+line: 2480
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to "reset" the camera zoom.
@@ -44,6 +43,9 @@ example:
// Copy cam1's configuration.
cam2.set(cam1);
+ // Set the camera.
+ setCamera(cam2);
+
describe(
'A white cube drawn against a gray background. The camera slowly moves forward. The camera resets when the user double-clicks.'
);
@@ -64,11 +66,11 @@ example:
cam2.set(cam1);
}
class: p5.Camera
-params:
- - name: cam
- description: |
- <p>camera to copy.</p>
- type: p5.Camera
+overloads:
+ - params:
+ - name: cam
+ description: camera to copy.
+ type: p5.Camera
chainable: false
---
diff --git a/src/content/reference/en/p5.Camera/setPosition.mdx b/src/content/reference/en/p5.Camera/setPosition.mdx
index b1fd82cd1b..cdee17bb8a 100644
--- a/src/content/reference/en/p5.Camera/setPosition.mdx
+++ b/src/content/reference/en/p5.Camera/setPosition.mdx
@@ -16,12 +16,11 @@ description: >
places the camera at coordinates <code>(10, 20, 30)</code> in "world"
space.</p>
-line: 3098
+line: 2404
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to toggle between cameras.
@@ -144,19 +143,17 @@ example:
</code>
</div>
class: p5.Camera
-params:
- - name: x
- description: |
- <p>x-coordinate in "world" space.</p>
- type: Number
- - name: 'y'
- description: |
- <p>y-coordinate in "world" space.</p>
- type: Number
- - name: z
- description: |
- <p>z-coordinate in "world" space.</p>
- type: Number
+overloads:
+ - params:
+ - name: x
+ description: x-coordinate in "world" space.
+ type: Number
+ - name: 'y'
+ description: y-coordinate in "world" space.
+ type: Number
+ - name: z
+ description: z-coordinate in "world" space.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Camera/slerp.mdx b/src/content/reference/en/p5.Camera/slerp.mdx
index 1fb39889ab..c70aefc05d 100644
--- a/src/content/reference/en/p5.Camera/slerp.mdx
+++ b/src/content/reference/en/p5.Camera/slerp.mdx
@@ -42,12 +42,11 @@ description: >
close to <code>cam1</code>’s.</p>
<p>Note: All of the cameras must use the same projection.</p>
-line: 3329
+line: 2578
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let cam;
@@ -94,20 +93,19 @@ example:
</code>
</div>
class: p5.Camera
-params:
- - name: cam0
- description: |
- <p>first camera.</p>
- type: p5.Camera
- - name: cam1
- description: |
- <p>second camera.</p>
- type: p5.Camera
- - name: amt
- description: >
- <p>amount of interpolation between 0.0 (<code>cam0</code>) and 1.0
- (<code>cam1</code>).</p>
- type: Number
+overloads:
+ - params:
+ - name: cam0
+ description: first camera.
+ type: p5.Camera
+ - name: cam1
+ description: second camera.
+ type: p5.Camera
+ - name: amt
+ description: >-
+ amount of interpolation between 0.0 (<code>cam0</code>) and 1.0
+ (<code>cam1</code>).
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Camera/tilt.mdx b/src/content/reference/en/p5.Camera/tilt.mdx
index ac6eb65788..e009fc4919 100644
--- a/src/content/reference/en/p5.Camera/tilt.mdx
+++ b/src/content/reference/en/p5.Camera/tilt.mdx
@@ -24,12 +24,11 @@ description: >
<p>Note: Angles are interpreted based on the current
<a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-line: 2613
+line: 1840
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let cam;
@@ -41,6 +40,9 @@ example:
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-center.
cam.setPosition(0, -400, 800);
@@ -69,12 +71,13 @@ example:
</code>
</div>
class: p5.Camera
-params:
- - name: angle
- description: |
- <p>amount to rotate in the current
- <a href="#/p5/angleMode">angleMode()</a>.</p>
- type: Number
+overloads:
+ - params:
+ - name: angle
+ description: |-
+ amount to rotate in the current
+ <a href="#/p5/angleMode">angleMode()</a>.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Camera/upX.mdx b/src/content/reference/en/p5.Camera/upX.mdx
index a1832a4b12..5e8d9ed2ce 100644
--- a/src/content/reference/en/p5.Camera/upX.mdx
+++ b/src/content/reference/en/p5.Camera/upX.mdx
@@ -7,28 +7,27 @@ description: |
<p>The x-component of the camera's "up" vector.</p>
<p>The camera's "up" vector orients its y-axis. By default, the "up" vector is
<code>(0, 1, 0)</code>, so its x-component is 0 in "local" space.</p>
-line: 1526
+line: 1199
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-right: (100, -400, 800)
// Point it at the origin: (0, 0, 0)
// Set its "up" vector: (0, 1, 0).
@@ -65,17 +64,17 @@ example:
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-right: (100, -400, 800)
// Point it at the origin: (0, 0, 0)
// Set its "up" vector: (0, 1, 0).
diff --git a/src/content/reference/en/p5.Camera/upY.mdx b/src/content/reference/en/p5.Camera/upY.mdx
index ad3daabe50..ce199dfa99 100644
--- a/src/content/reference/en/p5.Camera/upY.mdx
+++ b/src/content/reference/en/p5.Camera/upY.mdx
@@ -7,28 +7,27 @@ description: |
<p>The y-component of the camera's "up" vector.</p>
<p>The camera's "up" vector orients its y-axis. By default, the "up" vector is
<code>(0, 1, 0)</code>, so its y-component is 1 in "local" space.</p>
-line: 1637
+line: 1199
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-right: (100, -400, 800)
// Point it at the origin: (0, 0, 0)
// Set its "up" vector: (0, 1, 0).
@@ -65,17 +64,17 @@ example:
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-right: (100, -400, 800)
// Point it at the origin: (0, 0, 0)
// Set its "up" vector: (0, 1, 0).
diff --git a/src/content/reference/en/p5.Camera/upZ.mdx b/src/content/reference/en/p5.Camera/upZ.mdx
index 23a663ea4e..d5966276d6 100644
--- a/src/content/reference/en/p5.Camera/upZ.mdx
+++ b/src/content/reference/en/p5.Camera/upZ.mdx
@@ -7,28 +7,27 @@ description: |
<p>The z-component of the camera's "up" vector.</p>
<p>The camera's "up" vector orients its y-axis. By default, the "up" vector is
<code>(0, 1, 0)</code>, so its z-component is 0 in "local" space.</p>
-line: 1748
+line: 1199
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-right: (100, -400, 800)
// Point it at the origin: (0, 0, 0)
// Set its "up" vector: (0, 1, 0).
@@ -65,17 +64,17 @@ example:
let cam;
let font;
- // Load a font and create a p5.Font object.
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ font = await loadFont('/assets/inconsolata.otf');
createCanvas(100, 100, WEBGL);
// Create a p5.Camera object.
cam = createCamera();
+ // Set the camera
+ setCamera(cam);
+
// Place the camera at the top-right: (100, -400, 800)
// Point it at the origin: (0, 0, 0)
// Set its "up" vector: (0, 1, 0).
diff --git a/src/content/reference/en/p5.Color/setAlpha.mdx b/src/content/reference/en/p5.Color/setAlpha.mdx
index 0d5576b3d9..7e9d462d6d 100644
--- a/src/content/reference/en/p5.Color/setAlpha.mdx
+++ b/src/content/reference/en/p5.Color/setAlpha.mdx
@@ -12,12 +12,95 @@ description: >
it's
between 0 and 255.</p>
-line: 698
+line: 496
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Color object.
+ let c = color(255, 128, 128);
+
+ // Draw the left rectangle.
+ noStroke();
+ fill(c);
+ rect(15, 20, 35, 60);
+
+ // Change the alpha value.
+ c.setAlpha(128);
+
+ // Draw the right rectangle.
+ fill(c);
+ rect(50, 20, 35, 60);
+
+ describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');
+ }
+ </code>
+ </div>
+ *
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Color object.
+ let c = color(255, 128, 128);
+
+ // Draw the left rectangle.
+ noStroke();
+ fill(c);
+ rect(15, 20, 35, 60);
+
+ // Change the alpha value.
+ c.setAlpha(128);
+
+ // Draw the right rectangle.
+ fill(c);
+ rect(50, 20, 35, 60);
+
+ describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');
+ }
+ </code>
+ </div>
+ *
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+ // Create a p5.Color object.
+ let c = color(255, 128, 128);
+
+ // Draw the left rectangle.
+ noStroke();
+ fill(c);
+ rect(15, 20, 35, 60);
+
+ // Change the alpha value.
+ c.setAlpha(128);
+
+ // Draw the right rectangle.
+ fill(c);
+ rect(50, 20, 35, 60);
+
+ describe('Two rectangles. The left one is salmon pink and the right one is faded pink.');
+ }
+ </code>
+ </div>
+ *
+ - |-
<div>
<code>
function setup() {
@@ -44,12 +127,25 @@ example:
}
</code>
</div>
+ *
class: p5.Color
-params:
- - name: alpha
- description: |
- <p>the new alpha value.</p>
- type: Number
+overloads:
+ - params:
+ - name: alpha
+ description: the new alpha value.
+ type: Number
+ - params:
+ - name: alpha
+ description: the new alpha value.
+ type: Number
+ - params:
+ - name: alpha
+ description: the new alpha value.
+ type: Number
+ - params:
+ - name: alpha
+ description: the new alpha value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Color/setBlue.mdx b/src/content/reference/en/p5.Color/setBlue.mdx
index dce334c749..3ba20f7c41 100644
--- a/src/content/reference/en/p5.Color/setBlue.mdx
+++ b/src/content/reference/en/p5.Color/setBlue.mdx
@@ -10,12 +10,95 @@ description: >
href="/reference/p5/colorMode/">colorMode()</a>. In the
default RGB mode it's between 0 and 255.</p>
-line: 656
+line: 440
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Color object.
+ let c = color(255, 128, 128);
+
+ // Draw the left rectangle.
+ noStroke();
+ fill(c);
+ rect(15, 20, 35, 60);
+
+ // Change the blue value.
+ c.setBlue(255);
+
+ // Draw the right rectangle.
+ fill(c);
+ rect(50, 20, 35, 60);
+
+ describe('Two rectangles. The left one is salmon pink and the right one is pale fuchsia.');
+ }
+ </code>
+ </div>
+ *
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Color object.
+ let c = color(255, 128, 128);
+
+ // Draw the left rectangle.
+ noStroke();
+ fill(c);
+ rect(15, 20, 35, 60);
+
+ // Change the blue value.
+ c.setBlue(255);
+
+ // Draw the right rectangle.
+ fill(c);
+ rect(50, 20, 35, 60);
+
+ describe('Two rectangles. The left one is salmon pink and the right one is pale fuchsia.');
+ }
+ </code>
+ </div>
+ *
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+ // Create a p5.Color object.
+ let c = color(255, 128, 128);
+
+ // Draw the left rectangle.
+ noStroke();
+ fill(c);
+ rect(15, 20, 35, 60);
+
+ // Change the blue value.
+ c.setBlue(255);
+
+ // Draw the right rectangle.
+ fill(c);
+ rect(50, 20, 35, 60);
+
+ describe('Two rectangles. The left one is salmon pink and the right one is pale fuchsia.');
+ }
+ </code>
+ </div>
+ *
+ - |-
<div>
<code>
function setup() {
@@ -42,12 +125,25 @@ example:
}
</code>
</div>
+ *
class: p5.Color
-params:
- - name: blue
- description: |
- <p>the new blue value.</p>
- type: Number
+overloads:
+ - params:
+ - name: blue
+ description: the new blue value.
+ type: Number
+ - params:
+ - name: blue
+ description: the new blue value.
+ type: Number
+ - params:
+ - name: blue
+ description: the new blue value.
+ type: Number
+ - params:
+ - name: blue
+ description: the new blue value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Color/setGreen.mdx b/src/content/reference/en/p5.Color/setGreen.mdx
index 83ba822864..bbe9082673 100644
--- a/src/content/reference/en/p5.Color/setGreen.mdx
+++ b/src/content/reference/en/p5.Color/setGreen.mdx
@@ -10,12 +10,95 @@ description: >
href="/reference/p5/colorMode/">colorMode()</a>. In the
default RGB mode it's between 0 and 255.</p>
-line: 614
+line: 385
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Color object.
+ let c = color(255, 128, 128);
+
+ // Draw the left rectangle.
+ noStroke();
+ fill(c);
+ rect(15, 20, 35, 60);
+
+ // Change the green value.
+ c.setGreen(255);
+
+ // Draw the right rectangle.
+ fill(c);
+ rect(50, 20, 35, 60);
+
+ describe('Two rectangles. The left one is salmon pink and the right one is yellow.');
+ }
+ </code>
+ </div>
+ *
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Color object.
+ let c = color(255, 128, 128);
+
+ // Draw the left rectangle.
+ noStroke();
+ fill(c);
+ rect(15, 20, 35, 60);
+
+ // Change the green value.
+ c.setGreen(255);
+
+ // Draw the right rectangle.
+ fill(c);
+ rect(50, 20, 35, 60);
+
+ describe('Two rectangles. The left one is salmon pink and the right one is yellow.');
+ }
+ </code>
+ </div>
+ *
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+ // Create a p5.Color object.
+ let c = color(255, 128, 128);
+
+ // Draw the left rectangle.
+ noStroke();
+ fill(c);
+ rect(15, 20, 35, 60);
+
+ // Change the green value.
+ c.setGreen(255);
+
+ // Draw the right rectangle.
+ fill(c);
+ rect(50, 20, 35, 60);
+
+ describe('Two rectangles. The left one is salmon pink and the right one is yellow.');
+ }
+ </code>
+ </div>
+ *
+ - |-
<div>
<code>
function setup() {
@@ -42,12 +125,25 @@ example:
}
</code>
</div>
+ *
class: p5.Color
-params:
- - name: green
- description: |
- <p>the new green value.</p>
- type: Number
+overloads:
+ - params:
+ - name: green
+ description: the new green value.
+ type: Number
+ - params:
+ - name: green
+ description: the new green value.
+ type: Number
+ - params:
+ - name: green
+ description: the new green value.
+ type: Number
+ - params:
+ - name: green
+ description: the new green value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Color/setRed.mdx b/src/content/reference/en/p5.Color/setRed.mdx
index 4c95ffd0f0..991f54186e 100644
--- a/src/content/reference/en/p5.Color/setRed.mdx
+++ b/src/content/reference/en/p5.Color/setRed.mdx
@@ -10,12 +10,92 @@ description: >
href="/reference/p5/colorMode/">colorMode()</a>. In the
default RGB mode it's between 0 and 255.</p>
-line: 572
+line: 330
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Color object.
+ let c = color(255, 128, 128);
+
+ // Draw the left rectangle.
+ noStroke();
+ fill(c);
+ rect(15, 20, 35, 60);
+
+ // Change the red value.
+ c.setRed(64);
+
+ // Draw the right rectangle.
+ fill(c);
+ rect(50, 20, 35, 60);
+
+ describe('Two rectangles. The left one is salmon pink and the right one is teal.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Color object.
+ let c = color(255, 128, 128);
+
+ // Draw the left rectangle.
+ noStroke();
+ fill(c);
+ rect(15, 20, 35, 60);
+
+ // Change the red value.
+ c.setRed(64);
+
+ // Draw the right rectangle.
+ fill(c);
+ rect(50, 20, 35, 60);
+
+ describe('Two rectangles. The left one is salmon pink and the right one is teal.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+ // Create a p5.Color object.
+ let c = color(255, 128, 128);
+
+ // Draw the left rectangle.
+ noStroke();
+ fill(c);
+ rect(15, 20, 35, 60);
+
+ // Change the red value.
+ c.setRed(64);
+
+ // Draw the right rectangle.
+ fill(c);
+ rect(50, 20, 35, 60);
+
+ describe('Two rectangles. The left one is salmon pink and the right one is teal.');
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
function setup() {
@@ -43,11 +123,23 @@ example:
</code>
</div>
class: p5.Color
-params:
- - name: red
- description: |
- <p>the new red value.</p>
- type: Number
+overloads:
+ - params:
+ - name: red
+ description: the new red value.
+ type: Number
+ - params:
+ - name: red
+ description: the new red value.
+ type: Number
+ - params:
+ - name: red
+ description: the new red value.
+ type: Number
+ - params:
+ - name: red
+ description: the new red value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Color/toString.mdx b/src/content/reference/en/p5.Color/toString.mdx
index 9d896e811d..dd7e216ac6 100644
--- a/src/content/reference/en/p5.Color/toString.mdx
+++ b/src/content/reference/en/p5.Color/toString.mdx
@@ -21,12 +21,33 @@ description: >
formatted. By default, color strings are formatted as <code>'rgba(r, g, b,
a)'</code>.</p>
-line: 362
+line: 281
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Color object.
+ let myColor = color('darkorchid');
+
+ // Style the text.
+ textAlign(CENTER);
+ textSize(16);
+
+ // Display the text.
+ text(myColor.toString('#rrggbb'), 50, 50);
+ describe('The text "#9932cc" written in purple on a gray background.');
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
function setup() {
@@ -48,29 +69,147 @@ example:
}
</code>
</div>
-class: p5.Color
-params:
- - name: format
- description: >
- <p>how the color string will be formatted.
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Color object.
+ let myColor = color('darkorchid');
- Leaving this empty formats the string as rgba(r, g, b, a).
+ // Style the text.
+ textAlign(CENTER);
+ textSize(16);
- '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color
- codes.
+ // Display the text.
+ text(myColor.toString('#rrggbb'), 50, 50);
- 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color
- mode.
+ describe('The text "#9932cc" written in purple on a gray background.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
- 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.
+ background(200);
- 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as
- percentages.</p>
- type: String
- optional: true
+ // Create a p5.Color object.
+ let myColor = color('darkorchid');
+
+ // Style the text.
+ textAlign(CENTER);
+ textSize(16);
+
+ // Display the text.
+ text(myColor.toString('#rrggbb'), 50, 50);
+
+ describe('The text "#9932cc" written in purple on a gray background.');
+ }
+ </code>
+ </div>
+class: p5.Color
return:
description: the formatted string.
type: String
+overloads:
+ - params:
+ - name: format
+ description: >-
+ 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.
+ optional: 1
+ type: String
+ return:
+ description: the formatted string.
+ type: String
+ - params:
+ - name: format
+ description: >-
+ 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.
+ optional: 1
+ type: String
+ return:
+ description: the formatted string.
+ type: String
+ - params:
+ - name: format
+ description: >-
+ 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.
+ optional: 1
+ type: String
+ return:
+ description: the formatted string.
+ type: String
+ - params:
+ - name: format
+ description: >-
+ 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.
+ optional: 1
+ type: String
+ return:
+ description: the formatted string.
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.Compressor/attack.mdx b/src/content/reference/en/p5.Compressor/attack.mdx
deleted file mode 100644
index 4a21879908..0000000000
--- a/src/content/reference/en/p5.Compressor/attack.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Compressor
-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
-chainable: false
----
-
-
-# attack
diff --git a/src/content/reference/en/p5.Compressor/compressor.mdx b/src/content/reference/en/p5.Compressor/compressor.mdx
deleted file mode 100644
index de6d10670d..0000000000
--- a/src/content/reference/en/p5.Compressor/compressor.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.Compressor
-type: AudioNode
----
-
-
-# compressor
diff --git a/src/content/reference/en/p5.Compressor/knee.mdx b/src/content/reference/en/p5.Compressor/knee.mdx
deleted file mode 100644
index c0bb453b55..0000000000
--- a/src/content/reference/en/p5.Compressor/knee.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Compressor
-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
-chainable: false
----
-
-
-# knee
diff --git a/src/content/reference/en/p5.Compressor/process.mdx b/src/content/reference/en/p5.Compressor/process.mdx
deleted file mode 100644
index c7735ac3e1..0000000000
--- a/src/content/reference/en/p5.Compressor/process.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Compressor
-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
-chainable: false
----
-
-
-# process
diff --git a/src/content/reference/en/p5.Compressor/ratio.mdx b/src/content/reference/en/p5.Compressor/ratio.mdx
deleted file mode 100644
index b690698a40..0000000000
--- a/src/content/reference/en/p5.Compressor/ratio.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Compressor
-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
-chainable: false
----
-
-
-# ratio
diff --git a/src/content/reference/en/p5.Compressor/reduction.mdx b/src/content/reference/en/p5.Compressor/reduction.mdx
deleted file mode 100644
index 3ba0efc37c..0000000000
--- a/src/content/reference/en/p5.Compressor/reduction.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: reduction
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Return the current reduction value</p>
-line: 10277
-isConstructor: false
-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
deleted file mode 100644
index b7afeade9d..0000000000
--- a/src/content/reference/en/p5.Compressor/release.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Compressor
-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
-chainable: false
----
-
-
-# release
diff --git a/src/content/reference/en/p5.Compressor/set.mdx b/src/content/reference/en/p5.Compressor/set.mdx
deleted file mode 100644
index 57fdfa191c..0000000000
--- a/src/content/reference/en/p5.Compressor/set.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Compressor
-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
-chainable: false
----
-
-
-# set
diff --git a/src/content/reference/en/p5.Compressor/threshold.mdx b/src/content/reference/en/p5.Compressor/threshold.mdx
deleted file mode 100644
index be246ca2b1..0000000000
--- a/src/content/reference/en/p5.Compressor/threshold.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Compressor
-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
-chainable: false
----
-
-
-# threshold
diff --git a/src/content/reference/en/p5.Convolver/addImpulse.mdx b/src/content/reference/en/p5.Convolver/addImpulse.mdx
deleted file mode 100644
index f64800500d..0000000000
--- a/src/content/reference/en/p5.Convolver/addImpulse.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Convolver
-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
-chainable: false
----
-
-
-# addImpulse
diff --git a/src/content/reference/en/p5.Convolver/convolverNode.mdx b/src/content/reference/en/p5.Convolver/convolverNode.mdx
deleted file mode 100644
index e95d1a9498..0000000000
--- a/src/content/reference/en/p5.Convolver/convolverNode.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.Convolver
-type: ConvolverNode
----
-
-
-# convolverNode
diff --git a/src/content/reference/en/p5.Convolver/impulses.mdx b/src/content/reference/en/p5.Convolver/impulses.mdx
deleted file mode 100644
index 131075b1fa..0000000000
--- a/src/content/reference/en/p5.Convolver/impulses.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.Convolver
-type: Array
----
-
-
-# impulses
diff --git a/src/content/reference/en/p5.Convolver/process.mdx b/src/content/reference/en/p5.Convolver/process.mdx
deleted file mode 100644
index 183fcfe681..0000000000
--- a/src/content/reference/en/p5.Convolver/process.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.Convolver
-params:
- - name: src
- description: |
- <p>p5.sound / Web Audio object with a sound
- output.</p>
- type: Object
-chainable: false
----
-
-
-# process
diff --git a/src/content/reference/en/p5.Convolver/resetImpulse.mdx b/src/content/reference/en/p5.Convolver/resetImpulse.mdx
deleted file mode 100644
index 6257633fef..0000000000
--- a/src/content/reference/en/p5.Convolver/resetImpulse.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Convolver
-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
-chainable: false
----
-
-
-# resetImpulse
diff --git a/src/content/reference/en/p5.Convolver/toggleImpulse.mdx b/src/content/reference/en/p5.Convolver/toggleImpulse.mdx
deleted file mode 100644
index 2b04cddcf1..0000000000
--- a/src/content/reference/en/p5.Convolver/toggleImpulse.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Convolver
-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
-chainable: false
----
-
-
-# toggleImpulse
diff --git a/src/content/reference/en/p5.Delay/amp.mdx b/src/content/reference/en/p5.Delay/amp.mdx
index d3b8d8d760..e9df3e96c7 100644
--- a/src/content/reference/en/p5.Delay/amp.mdx
+++ b/src/content/reference/en/p5.Delay/amp.mdx
@@ -2,29 +2,16 @@
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
+file: src/Delay.js
+description: Adjust the amplitude of the delay effect.
+line: 146
isConstructor: false
itemtype: method
class: p5.Delay
params:
- - name: volume
- description: |
- <p>amplitude between 0 and 1.0</p>
+ - name: amplitudeAmount
+ description: An amplitude value between 0 and 1.
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
chainable: false
---
diff --git a/src/content/reference/en/p5.Delay/connect.mdx b/src/content/reference/en/p5.Delay/connect.mdx
deleted file mode 100644
index 9fd0fcce37..0000000000
--- a/src/content/reference/en/p5.Delay/connect.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Delay
-params:
- - name: unit
- description: ''
- type: Object
-chainable: false
----
-
-
-# connect
diff --git a/src/content/reference/en/p5.Delay/delayTime.mdx b/src/content/reference/en/p5.Delay/delayTime.mdx
index 5d427eca0e..811e1c5ea5 100644
--- a/src/content/reference/en/p5.Delay/delayTime.mdx
+++ b/src/content/reference/en/p5.Delay/delayTime.mdx
@@ -2,19 +2,71 @@
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
+file: src/Delay.js
+description: Set the delay time in seconds.
+line: 57
isConstructor: false
itemtype: method
+example:
+ - |-
+
+ <div>
+ <code>
+ let osc, delay, env;
+
+ function setup() {
+ let cnv = createCanvas(100, 100);
+ background(220);
+ textAlign(CENTER);
+ textSize(9);
+ text('click and drag mouse', width/2, height/2);
+
+ osc = new p5.Oscillator('sawtooth');
+ osc.amp(0.74);
+ env = new p5.Envelope(0.01);
+ delay = new p5.Delay(0.12, 0.7);
+
+ osc.disconnect();
+ osc.connect(env);
+ env.disconnect();
+ env.connect(delay);
+
+ cnv.mousePressed(oscStart);
+ cnv.mouseReleased(oscStop);
+ cnv.mouseOut(oscStop);
+ describe('Tap to play a square wave with delay effect.');
+ }
+
+ function oscStart() {
+ background(0, 255, 255);
+ text('release to hear delay', width/2, height/2);
+ osc.start();
+ env.triggerAttack();
+ }
+
+ function oscStop() {
+ background(220);
+ text('click and drag mouse', width/2, height/2);
+ env.triggerRelease();
+ }
+
+ function draw() {
+
+ let dtime = map(mouseX, 0, width, 0.1, 0.5);
+ delay.delayTime(dtime);
+ }
class: p5.Delay
params:
- name: delayTime
- description: |
- <p>Time (in seconds) of the delay</p>
+ description: The delay time in seconds.
+ type: Number
+ - name: rampTime
+ description: |-
+ The time in seconds it takes to ramp to the new delay time.
+ By default it is 0.1 seconds. Setting it to 0 will change
+ the delay time immediately and demonstrate legacy behavior.
type: Number
+ optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5.Delay/disconnect.mdx b/src/content/reference/en/p5.Delay/disconnect.mdx
deleted file mode 100644
index a53a149667..0000000000
--- a/src/content/reference/en/p5.Delay/disconnect.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: disconnect
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Disconnect all output.</p>
-line: 8242
-isConstructor: false
-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
index fbe8f37acb..ee4efdcd84 100644
--- a/src/content/reference/en/p5.Delay/feedback.mdx
+++ b/src/content/reference/en/p5.Delay/feedback.mdx
@@ -2,27 +2,16 @@
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
+file: src/Delay.js
+description: The amount of feedback in the delay line.
+line: 122
isConstructor: false
itemtype: method
class: p5.Delay
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
-return:
- description: Feedback value
- type: Number
+ - name: feedbackAmount
+ description: A number between 0 and 0.99.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Delay/filter.mdx b/src/content/reference/en/p5.Delay/filter.mdx
deleted file mode 100644
index a57c1a2f90..0000000000
--- a/src/content/reference/en/p5.Delay/filter.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Delay
-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
-chainable: false
----
-
-
-# filter
diff --git a/src/content/reference/en/p5.Delay/leftDelay.mdx b/src/content/reference/en/p5.Delay/leftDelay.mdx
deleted file mode 100644
index 6692798090..0000000000
--- a/src/content/reference/en/p5.Delay/leftDelay.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.Delay
-type: DelayNode
----
-
-
-# leftDelay
diff --git a/src/content/reference/en/p5.Delay/process.mdx b/src/content/reference/en/p5.Delay/process.mdx
index c7d0dcefaf..034aa0371a 100644
--- a/src/content/reference/en/p5.Delay/process.mdx
+++ b/src/content/reference/en/p5.Delay/process.mdx
@@ -2,40 +2,22 @@
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
+file: src/Delay.js
+description: Process an input signal with a delay effect.
+line: 132
isConstructor: false
itemtype: method
class: p5.Delay
params:
- - name: Signal
- description: |
- <p>An object that outputs audio</p>
+ - name: unit
+ description: 'A p5.sound source such as an Oscillator, Soundfile, or AudioIn object.'
type: Object
- name: delayTime
- description: |
- <p>Time (in seconds) of the delay/echo.
- Some browsers limit delayTime to
- 1 second.</p>
+ description: The amount of delay in seconds. A number between 0 and 1.
type: Number
- optional: true
- name: feedback
- description: |
- <p>sends the delay back through itself
- in a loop that decreases in volume
- each time.</p>
+ description: The amount of feedback. A number between 0 and 1.
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
chainable: false
---
diff --git a/src/content/reference/en/p5.Delay/rightDelay.mdx b/src/content/reference/en/p5.Delay/rightDelay.mdx
deleted file mode 100644
index a288de0b0d..0000000000
--- a/src/content/reference/en/p5.Delay/rightDelay.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.Delay
-type: DelayNode
----
-
-
-# rightDelay
diff --git a/src/content/reference/en/p5.Delay/setType.mdx b/src/content/reference/en/p5.Delay/setType.mdx
deleted file mode 100644
index 311bf4d864..0000000000
--- a/src/content/reference/en/p5.Delay/setType.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Delay
-params:
- - name: type
- description: |
- <p>'pingPong' (1) or 'default' (0)</p>
- type: String|Number
-chainable: false
----
-
-
-# setType
diff --git a/src/content/reference/en/p5.Distortion/WaveShaperNode.mdx b/src/content/reference/en/p5.Distortion/WaveShaperNode.mdx
deleted file mode 100644
index 15bbc05e95..0000000000
--- a/src/content/reference/en/p5.Distortion/WaveShaperNode.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.Distortion
-type: AudioNode
----
-
-
-# WaveShaperNode
diff --git a/src/content/reference/en/p5.Distortion/getAmount.mdx b/src/content/reference/en/p5.Distortion/getAmount.mdx
deleted file mode 100644
index 1ce6a44f6c..0000000000
--- a/src/content/reference/en/p5.Distortion/getAmount.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index 632dc793d1..0000000000
--- a/src/content/reference/en/p5.Distortion/getOversample.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: getOversample
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Return the oversampling.</p>
-line: 10937
-isConstructor: false
-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
deleted file mode 100644
index e729aa4c85..0000000000
--- a/src/content/reference/en/p5.Distortion/process.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Distortion
-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'''
-chainable: false
----
-
-
-# process
diff --git a/src/content/reference/en/p5.Distortion/set.mdx b/src/content/reference/en/p5.Distortion/set.mdx
deleted file mode 100644
index 065baa115d..0000000000
--- a/src/content/reference/en/p5.Distortion/set.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Distortion
-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'''
-chainable: false
----
-
-
-# set
diff --git a/src/content/reference/en/p5.EQ/bands.mdx b/src/content/reference/en/p5.EQ/bands.mdx
deleted file mode 100644
index f7cbe584b0..0000000000
--- a/src/content/reference/en/p5.EQ/bands.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.EQ
-type: Array
----
-
-
-# bands
diff --git a/src/content/reference/en/p5.EQ/process.mdx b/src/content/reference/en/p5.EQ/process.mdx
deleted file mode 100644
index 9763873eab..0000000000
--- a/src/content/reference/en/p5.EQ/process.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.EQ
-params:
- - name: src
- description: |
- <p>Audio source</p>
- type: Object
-chainable: false
----
-
-
-# process
diff --git a/src/content/reference/en/p5.Effect/amp.mdx b/src/content/reference/en/p5.Effect/amp.mdx
deleted file mode 100644
index b9626788ee..0000000000
--- a/src/content/reference/en/p5.Effect/amp.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Effect
-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
-chainable: false
----
-
-
-# amp
diff --git a/src/content/reference/en/p5.Effect/chain.mdx b/src/content/reference/en/p5.Effect/chain.mdx
deleted file mode 100644
index 839d962bfb..0000000000
--- a/src/content/reference/en/p5.Effect/chain.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Effect
-params:
- - name: arguments
- description: |
- <p>Chain together multiple sound objects</p>
- type: Object
- optional: true
-chainable: false
----
-
-
-# chain
diff --git a/src/content/reference/en/p5.Effect/connect.mdx b/src/content/reference/en/p5.Effect/connect.mdx
deleted file mode 100644
index 9a37c3929e..0000000000
--- a/src/content/reference/en/p5.Effect/connect.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Effect
-params:
- - name: unit
- description: ''
- type: Object
-chainable: false
----
-
-
-# connect
diff --git a/src/content/reference/en/p5.Effect/disconnect.mdx b/src/content/reference/en/p5.Effect/disconnect.mdx
deleted file mode 100644
index cb6bfabe5c..0000000000
--- a/src/content/reference/en/p5.Effect/disconnect.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: disconnect
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Disconnect all output.</p>
-line: 6557
-isConstructor: false
-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
deleted file mode 100644
index c40fafcdfb..0000000000
--- a/src/content/reference/en/p5.Effect/drywet.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: drywet
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Adjust the dry/wet value.</p>
-line: 6525
-isConstructor: false
-itemtype: method
-class: p5.Effect
-params:
- - name: fade
- description: |
- <p>The desired drywet value (0 - 1.0)</p>
- type: Number
- optional: true
-chainable: false
----
-
-
-# drywet
diff --git a/src/content/reference/en/p5.Element/addClass.mdx b/src/content/reference/en/p5.Element/addClass.mdx
index 87d46c9ad1..7f31998bc3 100644
--- a/src/content/reference/en/p5.Element/addClass.mdx
+++ b/src/content/reference/en/p5.Element/addClass.mdx
@@ -2,34 +2,36 @@
title: addClass
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>Adds a class to the element.</p>
-line: 2554
+file: src/dom/p5.Element.js
+description: Adds a class to the element.
+line: 528
isConstructor: false
itemtype: method
example:
- - |2-
+ - |-
+ <div class='norender'>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
- <div class='norender'>
- <code>
- function setup() {
- createCanvas(100, 100);
background(200);
+
// Create a div element.
- let div = createDiv('div');
+ let div = createDiv('div');
+
// Add a class to the div.
- div.addClass('myClass');
+ div.addClass('myClass');
+
describe('A gray square.');
- }
- </code>
- </div>
+ }
+ </code>
+ </div>
class: p5.Element
-params:
- - name: class
- description: |
- <p>name of class to add.</p>
- type: String
+overloads:
+ - params:
+ - name: class
+ description: name of class to add.
+ type: String
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/attribute.mdx b/src/content/reference/en/p5.Element/attribute.mdx
index 2e7e872bbf..e29a27b042 100644
--- a/src/content/reference/en/p5.Element/attribute.mdx
+++ b/src/content/reference/en/p5.Element/attribute.mdx
@@ -2,7 +2,7 @@
title: attribute
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: >
<p>Adds an
@@ -38,12 +38,11 @@ description: >
horizontal
alignment to <code>center</code>.</p>
-line: 3275
+line: 1305
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -80,23 +79,18 @@ return:
description: value of the attribute.
type: String
overloads:
- - line: 3275
- params: []
+ - params: []
return:
description: value of the attribute.
type: String
- - line: 3330
- params:
+ - params:
- name: attr
- description: |
- <p>attribute to set.</p>
+ description: attribute to set.
type: String
- name: value
- description: |
- <p>value to assign to the attribute.</p>
+ description: value to assign to the attribute.
type: String
- chainable: 1
-chainable: false
+chainable: true
---
diff --git a/src/content/reference/en/p5.Element/center.mdx b/src/content/reference/en/p5.Element/center.mdx
index 9e0b292000..75a151ddc8 100644
--- a/src/content/reference/en/p5.Element/center.mdx
+++ b/src/content/reference/en/p5.Element/center.mdx
@@ -2,7 +2,7 @@
title: center
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: >
<p>Centers the element either vertically, horizontally, or both.</p>
@@ -15,12 +15,11 @@ description: >
is aligned
both vertically and horizontally.</p>
-line: 2827
+line: 698
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -41,12 +40,12 @@ example:
</code>
</div>
class: p5.Element
-params:
- - name: align
- description: |
- <p>passing 'vertical', 'horizontal' aligns element accordingly</p>
- type: String
- optional: true
+overloads:
+ - params:
+ - name: align
+ description: 'passing ''vertical'', ''horizontal'' aligns element accordingly'
+ optional: 1
+ type: String
chainable: true
---
diff --git a/src/content/reference/en/p5/changed.mdx b/src/content/reference/en/p5.Element/changed.mdx
similarity index 87%
rename from src/content/reference/en/p5/changed.mdx
rename to src/content/reference/en/p5.Element/changed.mdx
index 216729f824..b488fde7cd 100644
--- a/src/content/reference/en/p5/changed.mdx
+++ b/src/content/reference/en/p5.Element/changed.mdx
@@ -2,16 +2,15 @@
title: changed
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: |
<p>Calls a function when the element changes.</p>
<p>Calling <code>myElement.changed(false)</code> disables the function.</p>
-line: 330
+line: 2003
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let dropdown;
@@ -70,13 +69,14 @@ example:
}
</code>
</div>
-class: p5
-params:
- - name: fxn
- description: |
- <p>function to call when the element changes.
- <code>false</code> disables the function.</p>
- type: Function|Boolean
+class: p5.Element
+overloads:
+ - params:
+ - name: fxn
+ description: |-
+ function to call when the element changes.
+ <code>false</code> disables the function.
+ type: Function|Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/child.mdx b/src/content/reference/en/p5.Element/child.mdx
index 85bdcb2195..7090de3366 100644
--- a/src/content/reference/en/p5.Element/child.mdx
+++ b/src/content/reference/en/p5.Element/child.mdx
@@ -2,7 +2,7 @@
title: child
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: >
<p>Attaches the element as a child of another element.</p>
@@ -14,12 +14,11 @@ description: >
array of
children DOM nodes is returned.</p>
-line: 2722
+line: 305
isConstructor: false
itemtype: method
example:
- |-
-
<div class='norender'>
<code>
function setup() {
@@ -92,21 +91,18 @@ return:
description: an array of child nodes.
type: 'Node[]'
overloads:
- - line: 2722
- params: []
+ - params: []
return:
description: an array of child nodes.
type: 'Node[]'
- - line: 2802
- params:
+ - params:
- name: child
- description: |
- <p>the ID, DOM node, or <a href="#/p5.Element">p5.Element</a>
- to add to the current element</p>
+ description: |-
+ the ID, DOM node, or <a href="#/p5.Element">p5.Element</a>
+ to add to the current element
+ optional: 1
type: String|p5.Element
- optional: true
- chainable: 1
-chainable: false
+chainable: true
---
diff --git a/src/content/reference/en/p5.Element/class.mdx b/src/content/reference/en/p5.Element/class.mdx
index 9a8bd087bb..17699a923e 100644
--- a/src/content/reference/en/p5.Element/class.mdx
+++ b/src/content/reference/en/p5.Element/class.mdx
@@ -2,7 +2,7 @@
title: class
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: >
<p>Adds a
@@ -14,12 +14,11 @@ description: >
<p>Calling <code>myElement.class()</code> without an argument returns a string
with its current classes.</p>
-line: 301
+line: 492
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -44,16 +43,15 @@ example:
</code>
</div>
class: p5.Element
+return:
+ description: 'element''s classes, if any.'
+ type: String
overloads:
- - line: 301
- params:
+ - params:
- name: class
- description: |
- <p>class to add.</p>
+ description: class to add.
type: String
- chainable: 1
- - line: 337
- params: []
+ - params: []
return:
description: 'element''s classes, if any.'
type: String
diff --git a/src/content/reference/en/p5.Element/doubleClicked.mdx b/src/content/reference/en/p5.Element/doubleClicked.mdx
index 74e225d844..7f7e61be46 100644
--- a/src/content/reference/en/p5.Element/doubleClicked.mdx
+++ b/src/content/reference/en/p5.Element/doubleClicked.mdx
@@ -2,18 +2,17 @@
title: doubleClicked
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: >
<p>Calls a function when the mouse is pressed twice over the element.</p>
<p>Calling <code>myElement.doubleClicked(false)</code> disables the
function.</p>
-line: 405
+line: 1551
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -39,13 +38,14 @@ example:
</code>
</div>
class: p5.Element
-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
+overloads:
+ - params:
+ - name: fxn
+ description: |-
+ function to call when the mouse is
+ double clicked over the element.
+ <code>false</code> disables the function.
+ type: Function|Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/dragLeave.mdx b/src/content/reference/en/p5.Element/dragLeave.mdx
index 4d5ce57cae..48705de20f 100644
--- a/src/content/reference/en/p5.Element/dragLeave.mdx
+++ b/src/content/reference/en/p5.Element/dragLeave.mdx
@@ -2,16 +2,15 @@
title: dragLeave
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: |
<p>Calls a function when a file is dragged off the element.</p>
<p>Calling <code>myElement.dragLeave(false)</code> disables the function.</p>
-line: 923
+line: 1929
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Drag a file over, then off
@@ -38,13 +37,14 @@ example:
</code>
</div>
class: p5.Element
-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
+overloads:
+ - params:
+ - name: fxn
+ description: |-
+ function to call when the file is
+ dragged off the element.
+ <code>false</code> disables the function.
+ type: Function|Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/dragOver.mdx b/src/content/reference/en/p5.Element/dragOver.mdx
index 512bf1a8c9..ae2fba1c59 100644
--- a/src/content/reference/en/p5.Element/dragOver.mdx
+++ b/src/content/reference/en/p5.Element/dragOver.mdx
@@ -2,16 +2,15 @@
title: dragOver
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: |
<p>Calls a function when a file is dragged over the element.</p>
<p>Calling <code>myElement.dragOver(false)</code> disables the function.</p>
-line: 881
+line: 1888
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Drag a file over the canvas to test.
@@ -37,13 +36,14 @@ example:
</code>
</div>
class: p5.Element
-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
+overloads:
+ - params:
+ - name: fxn
+ description: |-
+ function to call when the file is
+ dragged over the element.
+ <code>false</code> disables the function.
+ type: Function|Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/draggable.mdx b/src/content/reference/en/p5.Element/draggable.mdx
index f6daf7a750..1777c9445a 100644
--- a/src/content/reference/en/p5.Element/draggable.mdx
+++ b/src/content/reference/en/p5.Element/draggable.mdx
@@ -2,7 +2,7 @@
title: draggable
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: >
<p>Makes the element draggable.</p>
@@ -12,12 +12,11 @@ description: >
<code>myElement.draggable(otherElement)</code>, the other element will become
draggable.</p>
-line: 3945
+line: 2301
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let stickyNote;
@@ -74,12 +73,12 @@ example:
</code>
</div>
class: p5.Element
-params:
- - name: elmnt
- description: |
- <p>another <a href="#/p5.Element">p5.Element</a>.</p>
- type: p5.Element
- optional: true
+overloads:
+ - params:
+ - name: elmnt
+ description: another <a href="#/p5.Element">p5.Element</a>.
+ optional: 1
+ type: p5.Element
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/drop.mdx b/src/content/reference/en/p5.Element/drop.mdx
index 190c53c76d..3f5cab4cd7 100644
--- a/src/content/reference/en/p5.Element/drop.mdx
+++ b/src/content/reference/en/p5.Element/drop.mdx
@@ -2,7 +2,7 @@
title: drop
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: >
<p>Calls a function when the user drops a file on the element.</p>
@@ -25,12 +25,11 @@ description: >
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/">DragEvent</a>.</p>
-line: 3790
+line: 2189
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Drop an image on the canvas to view
@@ -122,16 +121,15 @@ example:
</code>
</div>
class: p5.Element
-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
+overloads:
+ - params:
+ - name: callback
+ description: called when a file loads. Called once for each file dropped.
+ type: Function
+ - name: fxn
+ description: called once when any files are dropped.
+ optional: 1
+ type: Function
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/elt.mdx b/src/content/reference/en/p5.Element/elt.mdx
index e7f3aa9ed2..41f2f24d4e 100644
--- a/src/content/reference/en/p5.Element/elt.mdx
+++ b/src/content/reference/en/p5.Element/elt.mdx
@@ -2,7 +2,7 @@
title: elt
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: >
<p>The element's underlying <code>HTMLElement</code> object.</p>
@@ -12,12 +12,11 @@ description: >
target="_blank">HTMLElement</a>
object's properties and methods can be used directly.</p>
-line: 56
+line: 2466
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
diff --git a/src/content/reference/en/p5.Element/hasClass.mdx b/src/content/reference/en/p5.Element/hasClass.mdx
index 9486af0c6d..98c0a19c63 100644
--- a/src/content/reference/en/p5.Element/hasClass.mdx
+++ b/src/content/reference/en/p5.Element/hasClass.mdx
@@ -2,15 +2,13 @@
title: hasClass
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>Checks if a class is already applied to element.</p>
-line: 2636
+file: src/dom/p5.Element.js
+description: Checks if a class is already applied to element.
+line: 617
isConstructor: false
itemtype: method
example:
- |-
-
<div class='norender'>
<code>
let div;
@@ -40,14 +38,16 @@ example:
</code>
</div>
class: p5.Element
-params:
- - name: c
- description: |
- <p>name of class to check.</p>
- type: String
return:
description: a boolean value if element has specified class.
- type: Boolean
+ type: boolean
+overloads:
+ - params:
+ - name: c
+ description: '{String} name of class to check.'
+ return:
+ description: a boolean value if element has specified class.
+ type: boolean
chainable: false
---
diff --git a/src/content/reference/en/p5.Element/height.mdx b/src/content/reference/en/p5.Element/height.mdx
index 1617069a20..f8b08b79aa 100644
--- a/src/content/reference/en/p5.Element/height.mdx
+++ b/src/content/reference/en/p5.Element/height.mdx
@@ -2,14 +2,13 @@
title: height
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
-description: |
- <p>A <code>Number</code> property that stores the element's height.</p>
-line: 102
+file: src/dom/p5.Element.js
+description: A <code>Number</code> property that stores the element's height.
+line: 2466
isConstructor: false
itemtype: property
+example: []
class: p5.Element
-type: '{Number}'
---
diff --git a/src/content/reference/en/p5.Element/hide.mdx b/src/content/reference/en/p5.Element/hide.mdx
index b3bc701998..e2d5b673d6 100644
--- a/src/content/reference/en/p5.Element/hide.mdx
+++ b/src/content/reference/en/p5.Element/hide.mdx
@@ -2,15 +2,13 @@
title: hide
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>Hides the current element.</p>
-line: 3529
+file: src/dom/p5.Element.js
+description: Hides the current element.
+line: 872
isConstructor: false
itemtype: method
example:
- |-
-
let p;
function setup() {
@@ -32,6 +30,8 @@ example:
</code>
</div>
class: p5.Element
+overloads:
+ - params: []
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/html.mdx b/src/content/reference/en/p5.Element/html.mdx
index 72ecc2a189..ecc55c2870 100644
--- a/src/content/reference/en/p5.Element/html.mdx
+++ b/src/content/reference/en/p5.Element/html.mdx
@@ -2,7 +2,7 @@
title: html
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: >
<p>Sets the inner HTML of the element, replacing any existing HTML.</p>
@@ -18,12 +18,11 @@ description: >
element's inner
HTML is returned.</p>
-line: 2893
+line: 397
isConstructor: false
itemtype: method
example:
- |-
-
<div class='norender'>
<code>
function setup() {
@@ -82,25 +81,20 @@ return:
description: the inner HTML of the element
type: String
overloads:
- - line: 2893
- params: []
+ - params: []
return:
description: the inner HTML of the element
type: String
- - line: 2962
- params:
+ - params:
- name: html
- description: |
- <p>the HTML to be placed inside the element</p>
+ description: the HTML to be placed inside the element
+ optional: 1
type: String
- optional: true
- name: append
- description: |
- <p>whether to append HTML to existing</p>
+ description: whether to append HTML to existing
+ optional: 1
type: Boolean
- optional: true
- chainable: 1
-chainable: false
+chainable: true
---
diff --git a/src/content/reference/en/p5.Element/id.mdx b/src/content/reference/en/p5.Element/id.mdx
index aaea103619..744442ae56 100644
--- a/src/content/reference/en/p5.Element/id.mdx
+++ b/src/content/reference/en/p5.Element/id.mdx
@@ -2,18 +2,17 @@
title: id
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: >
<p>Sets the 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: 254
+line: 443
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -36,16 +35,15 @@ example:
</code>
</div>
class: p5.Element
+return:
+ description: ID of the element.
+ type: String
overloads:
- - line: 254
- params:
+ - params:
- name: id
- description: |
- <p>ID of the element.</p>
+ description: ID of the element.
type: String
- chainable: 1
- - line: 286
- params: []
+ - params: []
return:
description: ID of the element.
type: String
diff --git a/src/content/reference/en/p5/input.mdx b/src/content/reference/en/p5.Element/input.mdx
similarity index 84%
rename from src/content/reference/en/p5/input.mdx
rename to src/content/reference/en/p5.Element/input.mdx
index 5bf822cac0..921b72ece2 100644
--- a/src/content/reference/en/p5/input.mdx
+++ b/src/content/reference/en/p5.Element/input.mdx
@@ -2,7 +2,7 @@
title: input
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: >
<p>Calls a function when the element receives input.</p>
@@ -10,12 +10,11 @@ description: >
sliders. Calling
<code>myElement.input(false)</code> disables the function.</p>
-line: 405
+line: 2075
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let slider;
@@ -70,14 +69,15 @@ example:
}
</code>
</div>
-class: p5
-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
+class: p5.Element
+overloads:
+ - params:
+ - name: fxn
+ description: |-
+ function to call when input is detected within
+ the element.
+ <code>false</code> disables the function.
+ type: Function|Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/mouseClicked.mdx b/src/content/reference/en/p5.Element/mouseClicked.mdx
index 03efb2e2a4..30c7589862 100644
--- a/src/content/reference/en/p5.Element/mouseClicked.mdx
+++ b/src/content/reference/en/p5.Element/mouseClicked.mdx
@@ -2,7 +2,7 @@
title: mouseClicked
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: >
<p>Calls a function when the mouse is pressed and released over the
element.</p>
@@ -13,12 +13,11 @@ description: >
<p>Note: Some mobile browsers may also trigger this event when the element
receives a quick tap.</p>
-line: 578
+line: 1724
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -44,13 +43,14 @@ example:
</code>
</div>
class: p5.Element
-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
+overloads:
+ - params:
+ - name: fxn
+ description: |-
+ function to call when the mouse is
+ pressed and released over the element.
+ <code>false</code> disables the function.
+ type: Function|Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/mouseMoved.mdx b/src/content/reference/en/p5.Element/mouseMoved.mdx
index eb52bf9b14..7afb763587 100644
--- a/src/content/reference/en/p5.Element/mouseMoved.mdx
+++ b/src/content/reference/en/p5.Element/mouseMoved.mdx
@@ -2,16 +2,15 @@
title: mouseMoved
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: |
<p>Calls a function when the mouse moves over the element.</p>
<p>Calling <code>myElement.mouseMoved(false)</code> disables the function.</p>
-line: 623
+line: 1765
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -37,13 +36,14 @@ example:
</code>
</div>
class: p5.Element
-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
+overloads:
+ - params:
+ - name: fxn
+ description: |-
+ function to call when the mouse
+ moves over the element.
+ <code>false</code> disables the function.
+ type: Function|Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/mouseOut.mdx b/src/content/reference/en/p5.Element/mouseOut.mdx
index 619c04b649..a222cd9763 100644
--- a/src/content/reference/en/p5.Element/mouseOut.mdx
+++ b/src/content/reference/en/p5.Element/mouseOut.mdx
@@ -2,16 +2,15 @@
title: mouseOut
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: |
<p>Calls a function when the mouse moves off the element.</p>
<p>Calling <code>myElement.mouseOut(false)</code> disables the function.</p>
-line: 707
+line: 1847
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -37,13 +36,14 @@ example:
</code>
</div>
class: p5.Element
-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
+overloads:
+ - params:
+ - name: fxn
+ description: |-
+ function to call when the mouse
+ moves off the element.
+ <code>false</code> disables the function.
+ type: Function|Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/mouseOver.mdx b/src/content/reference/en/p5.Element/mouseOver.mdx
index 97e6756faa..8afe6ef800 100644
--- a/src/content/reference/en/p5.Element/mouseOver.mdx
+++ b/src/content/reference/en/p5.Element/mouseOver.mdx
@@ -2,16 +2,15 @@
title: mouseOver
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: |
<p>Calls a function when the mouse moves onto the element.</p>
<p>Calling <code>myElement.mouseOver(false)</code> disables the function.</p>
-line: 665
+line: 1806
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -37,13 +36,14 @@ example:
</code>
</div>
class: p5.Element
-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
+overloads:
+ - params:
+ - name: fxn
+ description: |-
+ function to call when the mouse
+ moves onto the element.
+ <code>false</code> disables the function.
+ type: Function|Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/mousePressed.mdx b/src/content/reference/en/p5.Element/mousePressed.mdx
index 596f6f53ac..b2c47cdc76 100644
--- a/src/content/reference/en/p5.Element/mousePressed.mdx
+++ b/src/content/reference/en/p5.Element/mousePressed.mdx
@@ -2,7 +2,7 @@
title: mousePressed
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: >
<p>Calls a function when the mouse is pressed over the element.</p>
@@ -12,12 +12,11 @@ description: >
<p>Note: Some mobile browsers may also trigger this event when the element
receives a quick tap.</p>
-line: 350
+line: 1498
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -43,13 +42,14 @@ example:
</code>
</div>
class: p5.Element
-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
+overloads:
+ - params:
+ - name: fxn
+ description: |-
+ function to call when the mouse is
+ pressed over the element.
+ <code>false</code> disables the function.
+ type: Function|Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/mouseReleased.mdx b/src/content/reference/en/p5.Element/mouseReleased.mdx
index b3963ecc09..2225397a2a 100644
--- a/src/content/reference/en/p5.Element/mouseReleased.mdx
+++ b/src/content/reference/en/p5.Element/mouseReleased.mdx
@@ -2,7 +2,7 @@
title: mouseReleased
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: >
<p>Calls a function when the mouse is released over the element.</p>
@@ -12,12 +12,11 @@ description: >
<p>Note: Some mobile browsers may also trigger this event when the element
receives a quick tap.</p>
-line: 533
+line: 1680
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -43,13 +42,14 @@ example:
</code>
</div>
class: p5.Element
-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
+overloads:
+ - params:
+ - name: fxn
+ description: |-
+ function to call when the mouse is
+ pressed over the element.
+ <code>false</code> disables the function.
+ type: Function|Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/mouseWheel.mdx b/src/content/reference/en/p5.Element/mouseWheel.mdx
index cf747cccd8..6f05badb27 100644
--- a/src/content/reference/en/p5.Element/mouseWheel.mdx
+++ b/src/content/reference/en/p5.Element/mouseWheel.mdx
@@ -2,7 +2,7 @@
title: mouseWheel
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: >
<p>Calls a function when the mouse wheel scrolls over the element.</p>
@@ -22,12 +22,11 @@ description: >
to the left.</p>
<p>Calling <code>myElement.mouseWheel(false)</code> disables the function.</p>
-line: 447
+line: 1636
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -90,13 +89,14 @@ example:
</code>
</div>
class: p5.Element
-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
+overloads:
+ - params:
+ - name: fxn
+ description: |-
+ function to call when the mouse wheel is
+ scrolled over the element.
+ <code>false</code> disables the function.
+ type: Function|Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/parent.mdx b/src/content/reference/en/p5.Element/parent.mdx
index 16ff9db2d4..73675d5537 100644
--- a/src/content/reference/en/p5.Element/parent.mdx
+++ b/src/content/reference/en/p5.Element/parent.mdx
@@ -2,7 +2,7 @@
title: parent
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
+file: src/dom/p5.Element.js
description: >
<p>Attaches the element to a parent element.</p>
@@ -32,12 +32,11 @@ description: >
element's
parent.</p>
-line: 112
+line: 204
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -135,17 +134,17 @@ example:
</code>
</div>
class: p5.Element
+return:
+ description: ''
+ type: p5.Element
overloads:
- - line: 112
- params:
+ - params:
- name: parent
- description: |
- <p>ID, <a href="#/p5.Element">p5.Element</a>,
- or HTMLElement of desired parent element.</p>
+ description: |-
+ ID, <a href="#/p5.Element">p5.Element</a>,
+ or HTMLElement of desired parent element.
type: String|p5.Element|Object
- chainable: 1
- - line: 233
- params: []
+ - params: []
return:
description: ''
type: p5.Element
diff --git a/src/content/reference/en/p5.Element/position.mdx b/src/content/reference/en/p5.Element/position.mdx
index fac7047db3..8d8226fd10 100644
--- a/src/content/reference/en/p5.Element/position.mdx
+++ b/src/content/reference/en/p5.Element/position.mdx
@@ -2,7 +2,7 @@
title: position
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: >
<p>Sets the element's position.</p>
@@ -28,14 +28,13 @@ description: >
returns
the element's position in an object, as in <code>{ x: 0, y: 0 }</code>.</p>
-line: 2980
+line: 786
isConstructor: false
itemtype: method
example:
- |-
-
- <div class='norender'>
- <code>
+ <div>
+ <code class='norender'>
function setup() {
let cnv = createCanvas(100, 100);
@@ -50,8 +49,8 @@ example:
</code>
</div>
- <div class='norender'>
- <code>
+ <div>
+ <code class='norender'>
function setup() {
let cnv = createCanvas(100, 100);
@@ -67,34 +66,33 @@ example:
</div>
class: p5.Element
return:
- description: 'object of form `{ x: 0, y: 0 }` containing the element''s position.'
+ description: >-
+ object of form <code>{ x: 0, y: 0 }</code> containing the element's
+ position.
type: Object
overloads:
- - line: 2980
- params: []
+ - params: []
return:
- description: 'object of form `{ x: 0, y: 0 }` containing the element''s position.'
+ description: >-
+ object of form <code>{ x: 0, y: 0 }</code> containing the element's
+ position.
type: Object
- - line: 3031
- params:
+ - params:
- name: x
- description: |
- <p>x-position relative to top-left of window (optional)</p>
+ description: x-position relative to top-left of window (optional)
+ optional: 1
type: Number
- optional: true
- name: 'y'
- description: |
- <p>y-position relative to top-left of window (optional)</p>
+ description: y-position relative to top-left of window (optional)
+ optional: 1
type: Number
- optional: true
- name: positionType
- description: >
- <p>it can be static, fixed, relative, sticky, initial or inherit
- (optional)</p>
+ description: >-
+ it can be static, fixed, relative, sticky, initial or inherit
+ (optional)
+ optional: 1
type: String
- optional: true
- chainable: 1
-chainable: false
+chainable: true
---
diff --git a/src/content/reference/en/p5.Element/remove.mdx b/src/content/reference/en/p5.Element/remove.mdx
index fae43a25be..0f0d0f3a6b 100644
--- a/src/content/reference/en/p5.Element/remove.mdx
+++ b/src/content/reference/en/p5.Element/remove.mdx
@@ -2,16 +2,15 @@
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: 3731
+file: src/dom/p5.Element.js
+description: |-
+ Removes the element, stops all audio/video streams, and removes all
+ callback functions.
+line: 51
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let p;
@@ -35,6 +34,8 @@ example:
</code>
</div>
class: p5.Element
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Element/removeAttribute.mdx b/src/content/reference/en/p5.Element/removeAttribute.mdx
index b58bb009a4..095449ef43 100644
--- a/src/content/reference/en/p5.Element/removeAttribute.mdx
+++ b/src/content/reference/en/p5.Element/removeAttribute.mdx
@@ -2,7 +2,7 @@
title: removeAttribute
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: >
<p>Removes an attribute from the element.</p>
@@ -13,12 +13,11 @@ description: >
<code>align</code>
attribute if it's been set.</p>
-line: 3359
+line: 1364
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let p;
@@ -44,11 +43,11 @@ example:
</code>
</div>
class: p5.Element
-params:
- - name: attr
- description: |
- <p>attribute to remove.</p>
- type: String
+overloads:
+ - params:
+ - name: attr
+ description: attribute to remove.
+ type: String
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/removeClass.mdx b/src/content/reference/en/p5.Element/removeClass.mdx
index d5596e99ec..759bd30404 100644
--- a/src/content/reference/en/p5.Element/removeClass.mdx
+++ b/src/content/reference/en/p5.Element/removeClass.mdx
@@ -2,15 +2,13 @@
title: removeClass
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>Removes a class from the element.</p>
-line: 2593
+file: src/dom/p5.Element.js
+description: Removes a class from the element.
+line: 575
isConstructor: false
itemtype: method
example:
- |-
-
<div class='norender'>
<code>
// In this example, a class is set when the div is created
@@ -40,11 +38,11 @@ example:
</code>
</div>
class: p5.Element
-params:
- - name: class
- description: |
- <p>name of class to remove.</p>
- type: String
+overloads:
+ - params:
+ - name: class
+ description: name of class to remove.
+ type: String
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/show.mdx b/src/content/reference/en/p5.Element/show.mdx
index 239d92f5d7..cb36a4c395 100644
--- a/src/content/reference/en/p5.Element/show.mdx
+++ b/src/content/reference/en/p5.Element/show.mdx
@@ -2,15 +2,13 @@
title: show
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>Shows the current element.</p>
-line: 3493
+file: src/dom/p5.Element.js
+description: Shows the current element.
+line: 840
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let p;
@@ -35,6 +33,8 @@ example:
</code>
</div>
class: p5.Element
+overloads:
+ - params: []
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/size.mdx b/src/content/reference/en/p5.Element/size.mdx
index 07a2e7d16f..7a61f6aba9 100644
--- a/src/content/reference/en/p5.Element/size.mdx
+++ b/src/content/reference/en/p5.Element/size.mdx
@@ -2,7 +2,7 @@
title: size
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: >
<p>Sets the element's width and height.</p>
@@ -11,15 +11,20 @@ description: >
as an object with the properties <code>width</code> and <code>height</code>.
For example,
- <code>{ width: 20, height: 10 }</code>.</p>
+
+ <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
+ <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>
@@ -39,12 +44,11 @@ description: >
<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: 3562
+line: 995
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -135,25 +139,20 @@ return:
description: width and height of the element in an object.
type: Object
overloads:
- - line: 3562
- params: []
+ - params: []
return:
description: width and height of the element in an object.
type: Object
- - line: 3676
- params:
+ - params:
- name: w
- description: |
- <p>width of the element, either AUTO, or a number.</p>
- type: Number|Constant
- optional: true
+ description: 'width of the element, either AUTO, or a number.'
+ optional: 1
+ type: Number|AUTO
- name: h
- description: |
- <p>height of the element, either AUTO, or a number.</p>
- type: Number|Constant
- optional: true
- chainable: 1
-chainable: false
+ description: 'height of the element, either AUTO, or a number.'
+ optional: 1
+ type: Number|AUTO
+chainable: true
---
diff --git a/src/content/reference/en/p5.Element/style.mdx b/src/content/reference/en/p5.Element/style.mdx
index 68c715965e..2b78f507d0 100644
--- a/src/content/reference/en/p5.Element/style.mdx
+++ b/src/content/reference/en/p5.Element/style.mdx
@@ -2,7 +2,7 @@
title: style
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: >
<p>Applies a style to the element by adding a
@@ -34,12 +34,11 @@ description: >
<a href="/reference/p5/p5.Color">p5.Color</a> object, as in
<code>myElement.style('color', myColor)</code>.</p>
-line: 3118
+line: 1149
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -122,29 +121,23 @@ return:
description: value of the property.
type: String
overloads:
- - line: 3118
- params:
+ - params:
- name: property
- description: |
- <p>style property to set.</p>
+ description: style property to set.
type: String
return:
description: value of the property.
type: String
- - line: 3218
- params:
+ - params:
- name: property
- description: ''
type: String
- name: value
- description: |
- <p>value to assign to the property.</p>
+ description: value to assign to the property.
type: String|p5.Color
- chainable: 1
return:
description: value of the property.
type: String
-chainable: false
+chainable: true
---
diff --git a/src/content/reference/en/p5.Element/toggleClass.mdx b/src/content/reference/en/p5.Element/toggleClass.mdx
index 4b77f5f1c6..b5f5eacd49 100644
--- a/src/content/reference/en/p5.Element/toggleClass.mdx
+++ b/src/content/reference/en/p5.Element/toggleClass.mdx
@@ -2,15 +2,13 @@
title: toggleClass
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>Toggles whether a class is applied to the element.</p>
-line: 2677
+file: src/dom/p5.Element.js
+description: Toggles whether a class is applied to the element.
+line: 653
isConstructor: false
itemtype: method
example:
- |-
-
<div class='norender'>
<code>
let div;
@@ -36,11 +34,10 @@ example:
</code>
</div>
class: p5.Element
-params:
- - name: c
- description: |
- <p>class name to toggle.</p>
- type: String
+overloads:
+ - params:
+ - name: c
+ description: '{String} class name to toggle.'
chainable: true
---
diff --git a/src/content/reference/en/p5.Element/touchEnded.mdx b/src/content/reference/en/p5.Element/touchEnded.mdx
deleted file mode 100644
index 33f415e51d..0000000000
--- a/src/content/reference/en/p5.Element/touchEnded.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: touchEnded
-module: DOM
-submodule: DOM
-file: src/core/p5.Element.js
-description: |
- <p>Calls a function when the user stops touching the element.</p>
- <p>Calling <code>myElement.touchMoved(false)</code> disables the function.</p>
- <p>Note: Touch functions only work on mobile devices.</p>
-line: 837
-isConstructor: false
-itemtype: method
-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>
-class: p5.Element
-params:
- - name: fxn
- description: |
- <p>function to call when the touch
- ends.
- <code>false</code> disables the function.</p>
- type: Function|Boolean
-chainable: true
----
-
-
-# touchEnded
diff --git a/src/content/reference/en/p5.Element/touchMoved.mdx b/src/content/reference/en/p5.Element/touchMoved.mdx
deleted file mode 100644
index 742efbd8a1..0000000000
--- a/src/content/reference/en/p5.Element/touchMoved.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-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.</p>
- <p>Calling <code>myElement.touchMoved(false)</code> disables the function.</p>
- <p>Note: Touch functions only work on mobile devices.</p>
-line: 793
-isConstructor: false
-itemtype: method
-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>
-class: p5.Element
-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
-chainable: true
----
-
-
-# touchMoved
diff --git a/src/content/reference/en/p5.Element/touchStarted.mdx b/src/content/reference/en/p5.Element/touchStarted.mdx
deleted file mode 100644
index 920aea5cd5..0000000000
--- a/src/content/reference/en/p5.Element/touchStarted.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: touchStarted
-module: DOM
-submodule: DOM
-file: src/core/p5.Element.js
-description: >
- <p>Calls a function when the element is touched.</p>
-
- <p>Calling <code>myElement.touchStarted(false)</code> disables the
- function.</p>
-
- <p>Note: Touch functions only work on mobile devices.</p>
-line: 749
-isConstructor: false
-itemtype: method
-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>
-class: p5.Element
-params:
- - name: fxn
- description: |
- <p>function to call when the touch
- starts.
- <code>false</code> disables the function.</p>
- type: Function|Boolean
-chainable: true
----
-
-
-# touchStarted
diff --git a/src/content/reference/en/p5.Element/value.mdx b/src/content/reference/en/p5.Element/value.mdx
index 34f3eefacf..1b0a55361e 100644
--- a/src/content/reference/en/p5.Element/value.mdx
+++ b/src/content/reference/en/p5.Element/value.mdx
@@ -2,7 +2,7 @@
title: value
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.Element.js
description: >
<p>Returns or sets the element's value.</p>
@@ -14,12 +14,11 @@ description: >
as in <code>myElement.value(123)</code>, it's used to set the element's
value.</p>
-line: 3410
+line: 1448
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let input;
@@ -79,18 +78,14 @@ return:
description: value of the element.
type: String|Number
overloads:
- - line: 3410
- params: []
+ - params: []
return:
description: value of the element.
type: String|Number
- - line: 3477
- params:
+ - params:
- name: value
- description: ''
type: String|Number
- chainable: 1
-chainable: false
+chainable: true
---
diff --git a/src/content/reference/en/p5.Element/width.mdx b/src/content/reference/en/p5.Element/width.mdx
index afc948d530..985a80728e 100644
--- a/src/content/reference/en/p5.Element/width.mdx
+++ b/src/content/reference/en/p5.Element/width.mdx
@@ -2,14 +2,13 @@
title: width
module: DOM
submodule: DOM
-file: src/core/p5.Element.js
-description: |
- <p>A <code>Number</code> property that stores the element's width.</p>
-line: 94
+file: src/dom/p5.Element.js
+description: A <code>Number</code> property that stores the element's width.
+line: 2466
isConstructor: false
itemtype: property
+example: []
class: p5.Element
-type: '{Number}'
---
diff --git a/src/content/reference/en/p5.Envelope/add.mdx b/src/content/reference/en/p5.Envelope/add.mdx
deleted file mode 100644
index eb64360388..0000000000
--- a/src/content/reference/en/p5.Envelope/add.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Envelope
-params:
- - name: number
- description: |
- <p>Constant number to add</p>
- type: Number
-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
deleted file mode 100644
index 37bd168257..0000000000
--- a/src/content/reference/en/p5.Envelope/attackLevel.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: attackLevel
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Level once attack is complete.</p>
-line: 4772
-isConstructor: false
-itemtype: property
-class: p5.Envelope
----
-
-
-# attackLevel
diff --git a/src/content/reference/en/p5.Envelope/attackTime.mdx b/src/content/reference/en/p5.Envelope/attackTime.mdx
index 753d106156..bd2117c699 100644
--- a/src/content/reference/en/p5.Envelope/attackTime.mdx
+++ b/src/content/reference/en/p5.Envelope/attackTime.mdx
@@ -2,13 +2,17 @@
title: attackTime
module: p5.sound
submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Time until envelope reaches attackLevel</p>
-line: 4767
+file: src/Envelope.js
+description: Sets the attack time of the envelope.
+line: 178
isConstructor: false
-itemtype: property
+itemtype: method
class: p5.Envelope
+params:
+ - name: attackTime
+ description: the attack time in seconds
+ type: Number
+chainable: false
---
diff --git a/src/content/reference/en/p5.Envelope/decayLevel.mdx b/src/content/reference/en/p5.Envelope/decayLevel.mdx
deleted file mode 100644
index da359a96b1..0000000000
--- a/src/content/reference/en/p5.Envelope/decayLevel.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.Envelope
----
-
-
-# decayLevel
diff --git a/src/content/reference/en/p5.Envelope/decayTime.mdx b/src/content/reference/en/p5.Envelope/decayTime.mdx
deleted file mode 100644
index 925aaf5ae4..0000000000
--- a/src/content/reference/en/p5.Envelope/decayTime.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: decayTime
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Time until envelope reaches decayLevel.</p>
-line: 4778
-isConstructor: false
-itemtype: property
-class: p5.Envelope
----
-
-
-# decayTime
diff --git a/src/content/reference/en/p5.Envelope/mult.mdx b/src/content/reference/en/p5.Envelope/mult.mdx
deleted file mode 100644
index bca7371f67..0000000000
--- a/src/content/reference/en/p5.Envelope/mult.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Envelope
-params:
- - name: number
- description: |
- <p>Constant number to multiply</p>
- type: Number
-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
index 2508ca3595..39d0ab629d 100644
--- a/src/content/reference/en/p5.Envelope/play.mdx
+++ b/src/content/reference/en/p5.Envelope/play.mdx
@@ -2,77 +2,12 @@
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
+file: src/Envelope.js
+description: Trigger the envelope and release it after the sustain time.
+line: 41
isConstructor: false
itemtype: method
-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>
class: p5.Envelope
-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
chainable: false
---
diff --git a/src/content/reference/en/p5.Envelope/ramp.mdx b/src/content/reference/en/p5.Envelope/ramp.mdx
deleted file mode 100644
index 2cd9d84f0a..0000000000
--- a/src/content/reference/en/p5.Envelope/ramp.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-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="/reference/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
-isConstructor: false
-itemtype: method
-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>
-class: p5.Envelope
-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
-chainable: false
----
-
-
-# ramp
diff --git a/src/content/reference/en/p5.Envelope/releaseLevel.mdx b/src/content/reference/en/p5.Envelope/releaseLevel.mdx
deleted file mode 100644
index 6ce28b77bb..0000000000
--- a/src/content/reference/en/p5.Envelope/releaseLevel.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.Envelope
----
-
-
-# releaseLevel
diff --git a/src/content/reference/en/p5.Envelope/releaseTime.mdx b/src/content/reference/en/p5.Envelope/releaseTime.mdx
index 6d044242af..4f8fa24eb5 100644
--- a/src/content/reference/en/p5.Envelope/releaseTime.mdx
+++ b/src/content/reference/en/p5.Envelope/releaseTime.mdx
@@ -2,13 +2,17 @@
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
+file: src/Envelope.js
+description: Sets the release time of the envelope.
+line: 168
isConstructor: false
-itemtype: property
+itemtype: method
class: p5.Envelope
+params:
+ - name: releaseTime
+ description: the release time in seconds
+ type: Number
+chainable: false
---
diff --git a/src/content/reference/en/p5.Envelope/scale.mdx b/src/content/reference/en/p5.Envelope/scale.mdx
deleted file mode 100644
index 4a32ec5fe4..0000000000
--- a/src/content/reference/en/p5.Envelope/scale.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Envelope
-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
-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
deleted file mode 100644
index 2129898428..0000000000
--- a/src/content/reference/en/p5.Envelope/set.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.Envelope
-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
-chainable: false
----
-
-
-# set
diff --git a/src/content/reference/en/p5.Envelope/setADSR.mdx b/src/content/reference/en/p5.Envelope/setADSR.mdx
index a3501f1210..c0106c139b 100644
--- a/src/content/reference/en/p5.Envelope/setADSR.mdx
+++ b/src/content/reference/en/p5.Envelope/setADSR.mdx
@@ -2,86 +2,25 @@
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
+file: src/Envelope.js
+description: 'Sets the attack, decay, sustain, and release times of the envelope.'
+line: 152
isConstructor: false
itemtype: method
-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>
class: p5.Envelope
params:
- - name: attackTime
- description: |
- <p>Time (in seconds before envelope
- reaches Attack Level</p>
+ - name: attack
+ description: how quickly the envelope reaches the maximum level
type: Number
- - name: decayTime
- description: |
- <p>Time (in seconds) before envelope
- reaches Decay/Sustain Level</p>
+ - name: decay
+ description: how quickly the envelope reaches the sustain level
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>
+ - name: sustain
+ description: how long the envelope stays at the decay level
type: Number
- optional: true
- - name: releaseTime
- description: |
- <p>Time in seconds from now (defaults to 0)</p>
+ - name: release
+ description: how quickly the envelope fades out after the sustain level
type: Number
- optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5.Envelope/setExp.mdx b/src/content/reference/en/p5.Envelope/setExp.mdx
deleted file mode 100644
index f50244b3a7..0000000000
--- a/src/content/reference/en/p5.Envelope/setExp.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Envelope
-params:
- - name: isExp
- description: |
- <p>true is exponential, false is linear</p>
- type: Boolean
-chainable: false
----
-
-
-# setExp
diff --git a/src/content/reference/en/p5.Envelope/setInput.mdx b/src/content/reference/en/p5.Envelope/setInput.mdx
index 4e6cb069ef..9cfae1c4fe 100644
--- a/src/content/reference/en/p5.Envelope/setInput.mdx
+++ b/src/content/reference/en/p5.Envelope/setInput.mdx
@@ -2,24 +2,16 @@
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
+file: src/Envelope.js
+description: ''
+line: 143
isConstructor: false
itemtype: method
class: p5.Envelope
params:
- - name: inputs
- description: |
- <p>A p5.sound object or
- Web Audio Param.</p>
+ - name: unit
+ description: A p5.sound Object
type: Object
- optional: true
- multiple: true
chainable: false
---
diff --git a/src/content/reference/en/p5.Envelope/setRange.mdx b/src/content/reference/en/p5.Envelope/setRange.mdx
deleted file mode 100644
index 92f2e5063a..0000000000
--- a/src/content/reference/en/p5.Envelope/setRange.mdx
+++ /dev/null
@@ -1,62 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.Envelope
-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
-chainable: false
----
-
-
-# setRange
diff --git a/src/content/reference/en/p5.Envelope/triggerAttack.mdx b/src/content/reference/en/p5.Envelope/triggerAttack.mdx
index e57eeaef9a..fc39c6c457 100644
--- a/src/content/reference/en/p5.Envelope/triggerAttack.mdx
+++ b/src/content/reference/en/p5.Envelope/triggerAttack.mdx
@@ -2,70 +2,52 @@
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
+file: src/Envelope.js
+description: |-
+ 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.
+line: 50
isConstructor: false
itemtype: method
example:
- |-
- <div><code>
- let attackTime = 0.001;
- let decayTime = 0.2;
- let susPercent = 0.3;
- let releaseTime = 0.4;
- let env, triOsc;
+ <div>
+ <code>
+ let osc, env;
function setup() {
let cnv = createCanvas(100, 100);
background(220);
+ cnv.mousePressed(playSound);
+ cnv.mouseReleased(stopSound);
textAlign(CENTER);
textSize(10);
text('tap to triggerAttack', width/2, height/2);
+ osc = new p5.Oscillator();
+ osc.disconnect();
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);
+ osc.connect(env);
}
- function envAttack() {
+ function playSound() {
background(0, 255, 255);
text('release to release', width/2, height/2);
-
- // ensures audio is enabled. See also: `userStartAudio`
- triOsc.start();
-
- env.triggerAttack(triOsc);
+ osc.start();
+ env.attackTime(random(0.00, 0.25));
+ env.triggerAttack(0.5);
}
- function mouseReleased() {
+ function stopSound() {
background(220);
text('tap to triggerAttack', width/2, height/2);
-
- env.triggerRelease(triOsc);
+ env.releaseTime(random(0.1, 0.3));
+ env.triggerRelease();
}
- </code></div>
+ </code>
+ </div>
class: p5.Envelope
-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
chainable: false
---
diff --git a/src/content/reference/en/p5.Envelope/triggerRelease.mdx b/src/content/reference/en/p5.Envelope/triggerRelease.mdx
index fec7153918..8208ac9493 100644
--- a/src/content/reference/en/p5.Envelope/triggerRelease.mdx
+++ b/src/content/reference/en/p5.Envelope/triggerRelease.mdx
@@ -2,67 +2,53 @@
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
+file: src/Envelope.js
+description: |-
+ Trigger the Release of the envelope. Similar to releasing the key on
+ a piano and letting the sound fade according to the release level and
+ release time.
+line: 96
isConstructor: false
itemtype: method
example:
- |-
- <div><code>
- let attackTime = 0.001;
- let decayTime = 0.2;
- let susPercent = 0.3;
- let releaseTime = 0.4;
- let env, triOsc;
+ <div>
+ <code>
+ let osc, env;
function setup() {
let cnv = createCanvas(100, 100);
background(220);
+ cnv.mousePressed(playSound);
+ cnv.mouseReleased(stopSound);
textAlign(CENTER);
textSize(10);
text('tap to triggerAttack', width/2, height/2);
+ osc = new p5.Oscillator();
+ osc.disconnect();
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);
+ osc.connect(env);
}
- function envAttack() {
+ function playSound() {
background(0, 255, 255);
text('release to release', width/2, height/2);
-
- // ensures audio is enabled. See also: `userStartAudio`
- triOsc.start();
-
- env.triggerAttack(triOsc);
+ osc.start();
+ env.attackTime(random(0.00, 0.25));
+ env.triggerAttack(0.5);
}
- function mouseReleased() {
+ function stopSound() {
background(220);
text('tap to triggerAttack', width/2, height/2);
-
- env.triggerRelease(triOsc);
+ env.releaseTime(random(0.1, 0.3));
+ env.triggerRelease();
}
- </code></div>
+ </code>
+ </div>
class: p5.Envelope
-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
chainable: false
---
diff --git a/src/content/reference/en/p5.FFT/analyze.mdx b/src/content/reference/en/p5.FFT/analyze.mdx
index b9aa276730..772f144494 100644
--- a/src/content/reference/en/p5.FFT/analyze.mdx
+++ b/src/content/reference/en/p5.FFT/analyze.mdx
@@ -2,87 +2,14 @@
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
+file: src/FFT.js
+description: Returns the frequency spectrum of the input signal.
+line: 84
isConstructor: false
itemtype: method
-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>
class: p5.FFT
-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
return:
- description: |-
- spectrum Array of energy (amplitude/volume)
- values across the frequency spectrum.
- Lowest energy (silence) = 0, highest
- possible is 255.
+ description: Array of amplitude values from 0 to 1.
type: Array
chainable: false
---
diff --git a/src/content/reference/en/p5.FFT/getCentroid.mdx b/src/content/reference/en/p5.FFT/getCentroid.mdx
deleted file mode 100644
index 81a4e80260..0000000000
--- a/src/content/reference/en/p5.FFT/getCentroid.mdx
+++ /dev/null
@@ -1,77 +0,0 @@
----
-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>
-line: 3739
-isConstructor: false
-itemtype: method
-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>
-class: p5.FFT
-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
deleted file mode 100644
index b168d17f54..0000000000
--- a/src/content/reference/en/p5.FFT/getEnergy.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
----
-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>
-line: 3650
-isConstructor: false
-itemtype: method
-class: p5.FFT
-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
-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
deleted file mode 100644
index 7da5d09924..0000000000
--- a/src/content/reference/en/p5.FFT/getOctaveBands.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.FFT
-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
-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
deleted file mode 100644
index bc8cefa018..0000000000
--- a/src/content/reference/en/p5.FFT/linAverages.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-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>
-line: 3854
-isConstructor: false
-itemtype: method
-class: p5.FFT
-params:
- - name: 'N'
- description: |
- <p>Number of returned frequency groups</p>
- type: Number
-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
deleted file mode 100644
index 3e3a5afc17..0000000000
--- a/src/content/reference/en/p5.FFT/logAverages.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
----
-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>
-line: 3889
-isConstructor: false
-itemtype: method
-class: p5.FFT
-params:
- - name: octaveBands
- description: |
- <p>Array of Octave Bands objects for grouping</p>
- type: Array
-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
deleted file mode 100644
index f32249dc47..0000000000
--- a/src/content/reference/en/p5.FFT/setInput.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.FFT
-params:
- - name: source
- description: |
- <p>p5.sound object (or web audio API source node)</p>
- type: Object
- optional: true
-chainable: false
----
-
-
-# setInput
diff --git a/src/content/reference/en/p5.FFT/smooth.mdx b/src/content/reference/en/p5.FFT/smooth.mdx
deleted file mode 100644
index a73687d845..0000000000
--- a/src/content/reference/en/p5.FFT/smooth.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.FFT
-params:
- - name: smoothing
- description: |
- <p>0.0 < smoothing < 1.0.
- Defaults to 0.8.</p>
- type: Number
-chainable: false
----
-
-
-# smooth
diff --git a/src/content/reference/en/p5.FFT/waveform.mdx b/src/content/reference/en/p5.FFT/waveform.mdx
index 2e56284652..3d6b57ab89 100644
--- a/src/content/reference/en/p5.FFT/waveform.mdx
+++ b/src/content/reference/en/p5.FFT/waveform.mdx
@@ -2,34 +2,14 @@
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
+file: src/FFT.js
+description: Returns an array of sample values from the input audio.
+line: 94
isConstructor: false
itemtype: method
class: p5.FFT
-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
return:
- description: |-
- Array Array of amplitude values (-1 to 1)
- over time. Array length = bins.
+ description: Array of sample values from -1 to -1.
type: Array
chainable: false
---
diff --git a/src/content/reference/en/p5.File/data.mdx b/src/content/reference/en/p5.File/data.mdx
index 6ca81e4bc3..7dcd5c35a0 100644
--- a/src/content/reference/en/p5.File/data.mdx
+++ b/src/content/reference/en/p5.File/data.mdx
@@ -2,17 +2,16 @@
title: data
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.File.js
description: |
<p>A string containing the file's data.</p>
<p>Data can be either image data, text contents, or a parsed object in the
case of JSON and <a href="/reference/p5/p5.XML">p5.XML</a> objects.</p>
-line: 5769
+line: 150
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Use the file input to load a file and display its info.
diff --git a/src/content/reference/en/p5.File/file.mdx b/src/content/reference/en/p5.File/file.mdx
index bd75e85276..9604ca852b 100644
--- a/src/content/reference/en/p5.File/file.mdx
+++ b/src/content/reference/en/p5.File/file.mdx
@@ -2,20 +2,19 @@
title: file
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: >
- <p>Underlying
+file: src/dom/p5.File.js
+description: >-
+ 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: 5573
+ object. All <code>File</code> properties and methods are accessible.
+line: 150
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Use the file input to load a
diff --git a/src/content/reference/en/p5.File/name.mdx b/src/content/reference/en/p5.File/name.mdx
index 69634a917b..497a71c554 100644
--- a/src/content/reference/en/p5.File/name.mdx
+++ b/src/content/reference/en/p5.File/name.mdx
@@ -2,15 +2,13 @@
title: name
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>The file name as a string.</p>
-line: 5699
+file: src/dom/p5.File.js
+description: The file name as a string.
+line: 150
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Use the file input to load a
diff --git a/src/content/reference/en/p5.File/size.mdx b/src/content/reference/en/p5.File/size.mdx
index 68a9b3c10e..3b6e1d98b4 100644
--- a/src/content/reference/en/p5.File/size.mdx
+++ b/src/content/reference/en/p5.File/size.mdx
@@ -2,15 +2,13 @@
title: size
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>The number of bytes in the file.</p>
-line: 5734
+file: src/dom/p5.File.js
+description: The number of bytes in the file.
+line: 150
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Use the file input to load a file and display its info.
diff --git a/src/content/reference/en/p5.File/subtype.mdx b/src/content/reference/en/p5.File/subtype.mdx
index c5f3dff9f2..c93873158a 100644
--- a/src/content/reference/en/p5.File/subtype.mdx
+++ b/src/content/reference/en/p5.File/subtype.mdx
@@ -2,7 +2,7 @@
title: subtype
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.File.js
description: >
<p>The file subtype as a string.</p>
@@ -13,12 +13,11 @@ description: >
target="_blank">MIME type</a>
may have a subtype such as <code>png</code> or <code>jpeg</code>.</p>
-line: 5660
+line: 150
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Use the file input to load a
diff --git a/src/content/reference/en/p5.File/type.mdx b/src/content/reference/en/p5.File/type.mdx
index 08d7b9f518..1c7dff50fa 100644
--- a/src/content/reference/en/p5.File/type.mdx
+++ b/src/content/reference/en/p5.File/type.mdx
@@ -2,7 +2,7 @@
title: type
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.File.js
description: >
<p>The file
@@ -14,12 +14,11 @@ description: >
<p>For example, <code>'image'</code> and <code>'text'</code> are both MIME
types.</p>
-line: 5622
+line: 150
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Use the file input to load a file and display its info.
diff --git a/src/content/reference/en/p5.Filter/biquadFilter.mdx b/src/content/reference/en/p5.Filter/biquadFilter.mdx
deleted file mode 100644
index 7a709a1d98..0000000000
--- a/src/content/reference/en/p5.Filter/biquadFilter.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.Filter
-type: DelayNode
----
-
-
-# biquadFilter
diff --git a/src/content/reference/en/p5.Filter/freq.mdx b/src/content/reference/en/p5.Filter/freq.mdx
deleted file mode 100644
index bba672d1cc..0000000000
--- a/src/content/reference/en/p5.Filter/freq.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Filter
-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
-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
deleted file mode 100644
index 459e511992..0000000000
--- a/src/content/reference/en/p5.Filter/gain.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Filter
-params:
- - name: gain
- description: ''
- type: Number
-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
deleted file mode 100644
index e75781351a..0000000000
--- a/src/content/reference/en/p5.Filter/process.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Filter
-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
-chainable: false
----
-
-
-# process
diff --git a/src/content/reference/en/p5.Filter/res.mdx b/src/content/reference/en/p5.Filter/res.mdx
deleted file mode 100644
index f465b014d4..0000000000
--- a/src/content/reference/en/p5.Filter/res.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Filter
-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
-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
deleted file mode 100644
index 873808dc5a..0000000000
--- a/src/content/reference/en/p5.Filter/set.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Filter
-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
-chainable: false
----
-
-
-# set
diff --git a/src/content/reference/en/p5.Filter/setType.mdx b/src/content/reference/en/p5.Filter/setType.mdx
deleted file mode 100644
index 008e56c498..0000000000
--- a/src/content/reference/en/p5.Filter/setType.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Filter
-params:
- - name: t
- description: ''
- type: String
-chainable: false
----
-
-
-# setType
diff --git a/src/content/reference/en/p5.Filter/toggle.mdx b/src/content/reference/en/p5.Filter/toggle.mdx
deleted file mode 100644
index aaf6f80430..0000000000
--- a/src/content/reference/en/p5.Filter/toggle.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index 8d109488be..0000000000
--- a/src/content/reference/en/p5.Font/font.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: font
-module: Typography
-submodule: Loading & Displaying
-file: src/typography/p5.Font.js
-description: |
- <p>The font's underlying
- <a href="https://opentype.js.org/" target="_blank">opentype.js</a>
- font object.</p>
-line: 51
-isConstructor: false
-itemtype: property
-class: p5.Font
----
-
-
-# font
diff --git a/src/content/reference/en/p5.Font/textBounds.mdx b/src/content/reference/en/p5.Font/textBounds.mdx
deleted file mode 100644
index 5a4f7916e7..0000000000
--- a/src/content/reference/en/p5.Font/textBounds.mdx
+++ /dev/null
@@ -1,162 +0,0 @@
----
-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 the font.</p>
-
- <p>The bounding box is the smallest rectangle that can contain a string of
-
- text. <code>font.textBounds()</code> returns an object with the bounding box's
-
- location and size. For example, calling <code>font.textBounds('p5*js', 5,
- 20)</code>
-
- returns an object in the format
-
- <code>{ x: 5.7, y: 12.1 , w: 9.9, h: 28.6 }</code>. The <code>x</code> and
- <code>y</code> properties are
-
- always the coordinates of the bounding box's top-left corner.</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="/reference/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="/reference/p5/textSize/">textSize()</a>.</p>
-line: 62
-isConstructor: false
-itemtype: method
-example:
- - |-
-
- <div>
- <code>
- let font;
-
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Display the bounding box.
- let bbox = font.textBounds('p5*js', 35, 53);
- rect(bbox.x, bbox.y, bbox.w, bbox.h);
-
- // Style the text.
- textFont(font);
-
- // Display the text.
- 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() {
- createCanvas(100, 100);
-
- background(200);
-
- // Style the text.
- textFont(font);
- textSize(15);
- textAlign(CENTER, CENTER);
-
- // Display the bounding box.
- let bbox = font.textBounds('p5*js', 50, 50);
- rect(bbox.x, bbox.y, bbox.w, bbox.h);
-
- // Display the text.
- 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() {
- createCanvas(100, 100);
-
- background(200);
-
- // Display the bounding box.
- let bbox = font.textBounds('p5*js', 31, 53, 15);
- rect(bbox.x, bbox.y, bbox.w, bbox.h);
-
- // Style the text.
- textFont(font);
- textSize(15);
-
- // Display the text.
- text('p5*js', 31, 53);
-
- describe('The text "p5*js" written in black inside a white rectangle.');
- }
- </code>
- </div>
-class: p5.Font
-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
-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/textToContours.mdx b/src/content/reference/en/p5.Font/textToContours.mdx
new file mode 100644
index 0000000000..9f40bb3da6
--- /dev/null
+++ b/src/content/reference/en/p5.Font/textToContours.mdx
@@ -0,0 +1,119 @@
+---
+title: textToContours
+module: Typography
+submodule: ''
+file: src/type/p5.Font.js
+description: >
+ <p>Returns an array of arrays of points outlining a string of text written
+ using the
+
+ font. Each array represents a contour, so the letter O will have two outer
+ arrays:
+
+ one for the outer edge of the shape, and one for the inner edge of the
+ hole.</p>
+
+ <p>Each point object in a contour array has three properties that describe the
+
+ point's location and orientation, called its path angle. For example,
+
+ <code>{ x: 10, y: 20, alpha: 450 }</code>.</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="/reference/p5/textAlign/">textAlign()</a> for more ways to align
+ text.</p>
+
+ <p>The fourth 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: 349
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div>
+ <code>
+ let font;
+
+ async function setup() {
+ createCanvas(100, 100);
+ font = await loadFont('//assets/inconsolata.otf');
+ }
+
+ function draw() {
+ background(200);
+ textAlign(CENTER, CENTER);
+ textSize(30);
+
+ // Get the point array.
+ let contours = font.textToContours('p5*js', width/2, height/2, { sampleFactor: 0.5 });
+
+ beginShape();
+ for (const pts of contours) {
+ beginContour();
+ for (const pt of pts) {
+ vertex(pt.x + 5*sin(pt.y*0.1 + millis()*0.01), pt.y);
+ }
+ endContour(CLOSE);
+ }
+ endShape();
+
+ describe('The text p5*js wobbling over time');
+ }
+ </code>
+ </div>
+class: p5.Font
+return:
+ description: >-
+ array of point objects, each with <code>x</code>, <code>y</code>, and
+ <code>alpha</code> (path angle) properties.
+ type: 'Object[][]'
+overloads:
+ - params:
+ - name: str
+ description: string of text.
+ type: String
+ - name: x
+ description: x-coordinate of the text.
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the text.
+ type: Number
+ - name: options
+ description: |-
+ object with sampleFactor and simplifyThreshold
+ properties.
+ optional: 1
+ type: Object
+ return:
+ description: >-
+ array of point objects, each with <code>x</code>, <code>y</code>, and
+ <code>alpha</code> (path angle) properties.
+ type: 'Object[][]'
+chainable: false
+---
+
+
+# textToContours
diff --git a/src/content/reference/en/p5.Font/textToModel.mdx b/src/content/reference/en/p5.Font/textToModel.mdx
new file mode 100644
index 0000000000..bb07d0b29a
--- /dev/null
+++ b/src/content/reference/en/p5.Font/textToModel.mdx
@@ -0,0 +1,236 @@
+---
+title: textToModel
+module: Typography
+submodule: ''
+file: src/type/p5.Font.js
+description: >
+ <p>Converts text into a 3D model that can be rendered in WebGL mode.</p>
+
+ <p>This method transforms flat text into extruded 3D geometry, allowing
+
+ for dynamic effects like depth, warping, and custom shading.</p>
+
+ <p>It works by taking the outlines (contours) of each character in the
+
+ provided text string and constructing a 3D shape from them.</p>
+
+ <p>Once your 3D text is ready, you can rotate it in 3D space using <a
+ href="/reference/p5/orbitControl/">orbitControl()</a>
+
+ — just click and drag with your mouse to see it from all angles!</p>
+
+ <p>Use the extrude slider to give your letters depth: slide it up, and your
+
+ flat text turns into a solid, multi-dimensional object.</p>
+
+ <p>You can also choose from various fonts such as "Anton", "Montserrat", or
+ "Source Serif",
+
+ much like selecting fancy fonts in a word processor,</p>
+
+ <p>The generated model (a Geometry object) can be manipulated further—rotated,
+ scaled,
+
+ or styled with shaders—to create engaging, interactive visual art.</p>
+line: 538
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div modernizr='webgl'>
+ <code>
+ let font;
+ let geom;
+
+ async function setup() {
+ createCanvas(200, 200, WEBGL);
+ font = await loadFont('https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm0K08i4gS7lu.ttf');
+
+ geom = font.textToModel("Hello", 50, 0, { sampleFactor: 2 });
+ geom.clearColors();
+ geom.normalize();
+ }
+
+ function draw() {
+ background(255);
+ orbitControl();
+ fill("red");
+ strokeWeight(4);
+ scale(min(width, height) / 300);
+ model(geom);
+ describe('A red non-extruded "Hello" in Anton on white canvas, rotatable via mouse.');
+ }
+ </code>
+ </div>
+ - |-
+ <div modernizr='webgl'>
+ <code>
+ let font;
+ let geom;
+
+ async function setup() {
+ createCanvas(200, 200, WEBGL);
+
+ // Alternative fonts:
+ // Anton: 'https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm0K08i4gS7lu.ttf'
+ // Montserrat: 'https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-Y3tcoqK5.ttf'
+ // Source Serif: 'https://fonts.gstatic.com/s/sourceserif4/v8/vEFy2_tTDB4M7-auWDN0ahZJW3IX2ih5nk3AucvUHf6OAVIJmeUDygwjihdqrhxXD-wGvjU.ttf'
+
+ // Using Source Serif for this example:
+ font = await loadFont('https://fonts.gstatic.com/s/sourceserif4/v8/vEFy2_tTDB4M7-auWDN0ahZJW3IX2ih5nk3AucvUHf6OAVIJmeUDygwjihdqrhxXD-wGvjU.ttf');
+
+ geom = font.textToModel("Hello", 50, 0, { sampleFactor: 2, extrude: 5 });
+ geom.clearColors();
+ geom.normalize();
+ }
+
+ function draw() {
+ background(255);
+ orbitControl();
+ fill("red");
+ strokeWeight(4);
+ scale(min(width, height) / 300);
+ model(geom);
+ describe('3D red extruded "Hello" in Source Serif on white, rotatable via mouse.');
+ }
+ </code>
+ </div>
+ - >-
+ <div modernizr='webgl'>
+
+ <code>
+
+ let geom;
+
+ let activeFont;
+
+ let artShader;
+
+ let lineShader;
+
+
+ // Define parameters as simple variables
+
+ let words = 'HELLO';
+
+ let warp = 1;
+
+ let extrude = 5;
+
+ let palette = ["#ffe03d", "#fe4830", "#d33033", "#6d358a", "#1c509e",
+ "#00953c"];
+
+
+ async function setup() {
+ createCanvas(200, 200, WEBGL);
+
+ // Using Anton as the default font for this example:
+
+ // Alternative fonts:
+ // Anton: 'https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm0K08i4gS7lu.ttf'
+ // Montserrat: 'https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-Y3tcoqK5.ttf'
+ // Source Serif: 'https://fonts.gstatic.com/s/sourceserif4/v8/vEFy2_tTDB4M7-auWDN0ahZJW3IX2ih5nk3AucvUHf6OAVIJmeUDygwjihdqrhxXD-wGvjU.ttf'
+ activeFont = await loadFont('https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm0K08i4gS7lu.ttf');
+
+ geom = activeFont.textToModel(words, 0, 50, { sampleFactor: 2, extrude });
+ geom.clearColors();
+ geom.normalize();
+
+ artShader = baseMaterialShader().modify({
+ uniforms: {
+ 'float time': () => millis(),
+ 'float warp': () => warp,
+ 'float numColors': () => palette.length,
+ 'vec3[6] colors': () => palette.flatMap((c) => [red(c)/255, green(c)/255, blue(c)/255]),
+ },
+ vertexDeclarations: 'out vec3 vPos;',
+ fragmentDeclarations: 'in vec3 vPos;',
+ 'Vertex getObjectInputs': `(Vertex inputs) {
+ vPos = inputs.position;
+ inputs.position.x += 5. * warp * sin(inputs.position.y * 0.1 + time * 0.001) / (1. + warp);
+ inputs.position.y += 5. * warp * sin(inputs.position.x * 0.1 + time * 0.0009) / (1. + warp);
+ return inputs;
+ }`,
+ 'vec4 getFinalColor': `(vec4 _c) {
+ float x = vPos.x * 0.005;
+ float a = floor(fract(x) * numColors);
+ float b = a == numColors - 1. ? 0. : a + 1.;
+ float t = fract(x * numColors);
+ vec3 c = mix(colors[int(a)], colors[int(b)], t);
+ return vec4(c, 1.);
+ }`
+ });
+
+ lineShader = baseStrokeShader().modify({
+ uniforms: {
+ 'float time': () => millis(),
+ 'float warp': () => warp,
+ },
+ 'StrokeVertex getObjectInputs': `(StrokeVertex inputs) {
+ inputs.position.x += 5. * warp * sin(inputs.position.y * 0.1 + time * 0.001) / (1. + warp);
+ inputs.position.y += 5. * warp * sin(inputs.position.x * 0.1 + time * 0.0009) / (1. + warp);
+ return inputs;
+ }`,
+ });
+ }
+
+
+ function draw() {
+ background(255);
+ orbitControl();
+ shader(artShader);
+ strokeShader(lineShader);
+ strokeWeight(4);
+ scale(min(width, height) / 210);
+ model(geom);
+ describe('3D wavy with different color sets "Hello" in Anton on white canvas, rotatable via mouse.');
+ }
+
+ </code>
+
+ </div>
+class: p5.Font
+return:
+ description: A geometry object representing the 3D model of the text.
+ type: p5.Geometry
+overloads:
+ - params:
+ - name: str
+ description: The text string to convert into a 3D model.
+ type: String
+ - name: x
+ description: The x-coordinate for the starting position of the text.
+ type: Number
+ - name: 'y'
+ description: The y-coordinate for the starting position of the text.
+ type: Number
+ - name: width
+ description: Maximum width of the text block (wraps text if exceeded).
+ type: Number
+ - name: height
+ description: Maximum height of the text block.
+ type: Number
+ - name: options
+ description: 'Configuration options for the 3D text:'
+ optional: 1
+ type: Object
+ - name: options.extrude
+ description: |-
+ The depth to extrude the text. A value of 0 produces
+ flat text; higher values create thicker, 3D models.
+ optional: 1
+ type: Number
+ - name: options.sampleFactor
+ description: |-
+ A factor controlling the level of detail for the text contours.
+ Higher values result in smoother curves.
+ optional: 1
+ type: Number
+ return:
+ description: A geometry object representing the 3D model of the text.
+ type: p5.Geometry
+chainable: false
+---
+
+
+# textToModel
diff --git a/src/content/reference/en/p5.Font/textToPaths.mdx b/src/content/reference/en/p5.Font/textToPaths.mdx
new file mode 100644
index 0000000000..4f3e504d69
--- /dev/null
+++ b/src/content/reference/en/p5.Font/textToPaths.mdx
@@ -0,0 +1,154 @@
+---
+title: textToPaths
+module: Typography
+submodule: ''
+file: src/type/p5.Font.js
+description: >
+ <p>Returns a flat array of path commands that describe the outlines of a
+ string of text.</p>
+
+ <p>Each command is represented as an array of the form <code>[type,
+ ...coords]</code>, where:</p>
+
+ <ul><li><code>type</code> is one of <code>'M'</code>, <code>'L'</code>,
+ <code>'Q'</code>, <code>'C'</code>, or
+ <code>'Z'</code>,</li><li><code>coords</code> are the numeric values needed
+ for that command.</li></ul><p><code>'M'</code> indicates a "move to" (starting
+ a new contour),
+
+ <code>'L'</code> a line segment,
+
+ <code>'Q'</code> a quadratic bezier,
+
+ <code>'C'</code> a cubic bezier, and
+
+ <code>'Z'</code> closes the current path.</p>
+
+ <p>The first two parameters, <code>x</code> and <code>y</code>, specify the
+ baseline origin for the text.
+
+ Optionally, you can provide a <code>width</code> and <code>height</code> for
+ text wrapping; if you don't need
+
+ wrapping, you can omit them and directly pass <code>options</code> as the
+ fourth parameter.</p>
+line: 200
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div>
+ <code>
+ let font;
+
+ async function setup() {
+ font = await loadFont('/assets/inconsolata.otf');
+ createCanvas(200, 200);
+ background(220);
+ noLoop();
+ }
+
+ function draw() {
+ background(220);
+ stroke(0);
+ noFill();
+ textSize(60);
+
+ // Get path commands for "Hello" (drawn at baseline x=50, y=100):
+ const pathCommands = font.textToPaths('Hello', 30, 110);
+
+ beginShape();
+ for (let i = 0; i < pathCommands.length; i++) {
+ const cmd = pathCommands[i];
+ const type = cmd[0];
+
+ switch (type) {
+ case 'M': {
+ // Move to (start a new contour)
+ const x = cmd[1];
+ const y = cmd[2];
+ endContour(); // In case we were already drawing
+ beginContour();
+ vertex(x, y);
+ break;
+ }
+ case 'L': {
+ // Line to
+ const x = cmd[1];
+ const y = cmd[2];
+ vertex(x, y);
+ break;
+ }
+ case 'Q': {
+ // Quadratic bezier
+ const cx = cmd[1];
+ const cy = cmd[2];
+ const x = cmd[3];
+ const y = cmd[4];
+ bezierOrder(2);
+ bezierVertex(cx, cy);
+ bezierVertex(x, y);
+ break;
+ }
+ case 'C': {
+ // Cubic bezier
+ const cx1 = cmd[1];
+ const cy1 = cmd[2];
+ const cx2 = cmd[3];
+ const cy2 = cmd[4];
+ const x = cmd[5];
+ const y = cmd[6];
+ bezierOrder(3);
+ bezierVertex(cx1, cy1);
+ bezierVertex(cx2, cy2);
+ bezierVertex(x, y);
+ break;
+ }
+ case 'Z': {
+ // Close path
+ endContour(CLOSE);
+ beginContour();
+ break;
+ }
+ }
+ }
+ endContour();
+ endShape();
+ }
+ </code>
+ </div>
+class: p5.Font
+return:
+ description: A flat array of path commands.
+ type: 'Array[]'
+overloads:
+ - params:
+ - name: str
+ description: The text to convert into path commands.
+ type: String
+ - name: x
+ description: x‐coordinate of the text baseline.
+ type: Number
+ - name: 'y'
+ description: y‐coordinate of the text baseline.
+ type: Number
+ - name: width
+ description: Optional width for text wrapping.
+ optional: 1
+ type: Number
+ - name: height
+ description: Optional height for text wrapping.
+ optional: 1
+ type: Number
+ - name: options
+ description: Configuration object for rendering text.
+ optional: 1
+ type: Object
+ return:
+ description: A flat array of path commands.
+ type: 'Array[]'
+chainable: false
+---
+
+
+# textToPaths
diff --git a/src/content/reference/en/p5.Font/textToPoints.mdx b/src/content/reference/en/p5.Font/textToPoints.mdx
index 3645b5300c..70575da602 100644
--- a/src/content/reference/en/p5.Font/textToPoints.mdx
+++ b/src/content/reference/en/p5.Font/textToPoints.mdx
@@ -1,8 +1,8 @@
---
title: textToPoints
module: Typography
-submodule: Loading & Displaying
-file: src/typography/p5.Font.js
+submodule: ''
+file: src/type/p5.Font.js
description: >
<p>Returns an array of points outlining a string of text written using the
@@ -25,14 +25,7 @@ description: >
<a href="/reference/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="/reference/p5/textSize/">textSize()</a>.</p>
-
- <p>The fifth parameter, <code>options</code>, is also optional.
+ <p>The fourth parameter, <code>options</code>, is also optional.
<code>font.textToPoints()</code>
expects an object with the following properties:</p>
@@ -50,27 +43,24 @@ description: >
than 0. The value represents the threshold angle to use when determining
whether two edges are collinear.</p>
-line: 279
+line: 275
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let font;
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
createCanvas(100, 100);
+ font = await loadFont('/assets/inconsolata.otf');
background(200);
+ textSize(35);
// Get the point array.
- let points = font.textToPoints('p5*js', 6, 60, 35, { sampleFactor: 0.5 });
+ let points = font.textToPoints('p5*js', 6, 60, { sampleFactor: 0.5 });
// Draw a dot at each point.
for (let p of points) {
@@ -82,34 +72,33 @@ example:
</code>
</div>
class: p5.Font
-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
return:
- description: 'array of point objects, each with x, y, and alpha (path angle) properties.'
- type: Array
+ description: >-
+ array of point objects, each with <code>x</code>, <code>y</code>, and
+ <code>alpha</code> (path angle) properties.
+ type: 'Object[]'
+overloads:
+ - params:
+ - name: str
+ description: string of text.
+ type: String
+ - name: x
+ description: x-coordinate of the text.
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the text.
+ type: Number
+ - name: options
+ description: |-
+ object with sampleFactor and simplifyThreshold
+ properties.
+ optional: 1
+ type: Object
+ return:
+ description: >-
+ array of point objects, each with <code>x</code>, <code>y</code>, and
+ <code>alpha</code> (path angle) properties.
+ type: 'Object[]'
chainable: false
---
diff --git a/src/content/reference/en/p5.Framebuffer/autoSized.mdx b/src/content/reference/en/p5.Framebuffer/autoSized.mdx
index ccd867039f..1fce743828 100644
--- a/src/content/reference/en/p5.Framebuffer/autoSized.mdx
+++ b/src/content/reference/en/p5.Framebuffer/autoSized.mdx
@@ -16,12 +16,11 @@ description: >
<code>true</code> if
the framebuffer automatically resizes and <code>false</code> if not.</p>
-line: 402
+line: 356
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to toggle the autosizing mode.
@@ -67,16 +66,18 @@ example:
</code>
</div>
class: p5.Framebuffer
-params:
- - name: autoSized
- description: >
- <p>whether to automatically resize the framebuffer to match the
- canvas.</p>
- type: Boolean
- optional: true
return:
description: current autosize setting.
type: Boolean
+overloads:
+ - params:
+ - name: autoSized
+ description: whether to automatically resize the framebuffer to match the canvas.
+ optional: 1
+ type: Boolean
+ return:
+ description: current autosize setting.
+ type: Boolean
chainable: false
---
diff --git a/src/content/reference/en/p5.Framebuffer/begin.mdx b/src/content/reference/en/p5.Framebuffer/begin.mdx
index 5bc5e971ac..0e2b22182f 100644
--- a/src/content/reference/en/p5.Framebuffer/begin.mdx
+++ b/src/content/reference/en/p5.Framebuffer/begin.mdx
@@ -20,12 +20,11 @@ description: >
framebuffer. Changes won't be visible until the framebuffer is displayed
as an image or texture.</p>
-line: 1118
+line: 1055
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myBuffer;
@@ -62,6 +61,8 @@ example:
</code>
</div>
class: p5.Framebuffer
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Framebuffer/color.mdx b/src/content/reference/en/p5.Framebuffer/color.mdx
index 0665c78b4b..139be1e140 100644
--- a/src/content/reference/en/p5.Framebuffer/color.mdx
+++ b/src/content/reference/en/p5.Framebuffer/color.mdx
@@ -31,12 +31,11 @@ description: >
<code>plane(myBuffer.width, -myBuffer.height)</code> will flip the
framebuffer.</p>
-line: 1701
+line: 1650
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
diff --git a/src/content/reference/en/p5.Framebuffer/createCamera.mdx b/src/content/reference/en/p5.Framebuffer/createCamera.mdx
index 2b88fc7a22..20a47a5b31 100644
--- a/src/content/reference/en/p5.Framebuffer/createCamera.mdx
+++ b/src/content/reference/en/p5.Framebuffer/createCamera.mdx
@@ -3,7 +3,7 @@ title: createCamera
module: Rendering
submodule: ''
file: src/webgl/p5.Framebuffer.js
-description: >
+description: >-
<p>Creates a new
<a href="/reference/p5/p5.Camera">p5.Camera</a> object to use with the
@@ -34,11 +34,8 @@ description: >
myCamera = myBuffer.createCamera();
- myBuffer.end();
-
- </code></pre>
-
- <p>Calling <a href="/reference/p5/setCamera/">setCamera()</a> updates the
+ myBuffer.end();</code></pre><p>Calling <a
+ href="/reference/p5/setCamera/">setCamera()</a> updates the
framebuffer's projection using the camera.
@@ -63,15 +60,12 @@ description: >
// Draw stuff...
- myBuffer.end();
-
- </code></pre>
-line: 892
+ myBuffer.end();</code></pre>
+line: 902
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to toggle between cameras.
@@ -146,6 +140,11 @@ class: p5.Framebuffer
return:
description: new camera.
type: p5.Camera
+overloads:
+ - params: []
+ return:
+ description: new camera.
+ type: p5.Camera
chainable: false
---
diff --git a/src/content/reference/en/p5.Framebuffer/depth.mdx b/src/content/reference/en/p5.Framebuffer/depth.mdx
index b21195d5d4..0f0fac6f88 100644
--- a/src/content/reference/en/p5.Framebuffer/depth.mdx
+++ b/src/content/reference/en/p5.Framebuffer/depth.mdx
@@ -31,12 +31,11 @@ description: >
<code>plane(myBuffer.width, -myBuffer.height)</code> will flip the
framebuffer.</p>
-line: 1754
+line: 1650
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Note: A "uniform" is a global variable within a shader program.
diff --git a/src/content/reference/en/p5.Framebuffer/draw.mdx b/src/content/reference/en/p5.Framebuffer/draw.mdx
index 4213a696fc..4a9acd3b8e 100644
--- a/src/content/reference/en/p5.Framebuffer/draw.mdx
+++ b/src/content/reference/en/p5.Framebuffer/draw.mdx
@@ -3,7 +3,7 @@ title: draw
module: Rendering
submodule: ''
file: src/webgl/p5.Framebuffer.js
-description: >
+description: >-
<p>Draws to the framebuffer by calling a function that contains drawing
instructions.</p>
@@ -23,15 +23,12 @@ description: >
myFunction();
- myBuffer.end();
-
- </code></pre>
-line: 1323
+ myBuffer.end();</code></pre>
+line: 1269
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click the canvas to display the framebuffer.
@@ -70,11 +67,11 @@ example:
</code>
</div>
class: p5.Framebuffer
-params:
- - name: callback
- description: |
- <p>function that draws to the framebuffer.</p>
- type: Function
+overloads:
+ - params:
+ - name: callback
+ description: function that draws to the framebuffer.
+ type: Function
chainable: false
---
diff --git a/src/content/reference/en/p5.Framebuffer/end.mdx b/src/content/reference/en/p5.Framebuffer/end.mdx
index d1d41ed2ab..ae106211fa 100644
--- a/src/content/reference/en/p5.Framebuffer/end.mdx
+++ b/src/content/reference/en/p5.Framebuffer/end.mdx
@@ -20,12 +20,11 @@ description: >
Changes won't be visible until the framebuffer is displayed as an image
or texture.</p>
-line: 1254
+line: 1193
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myBuffer;
@@ -62,6 +61,8 @@ example:
</code>
</div>
class: p5.Framebuffer
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Framebuffer/get.mdx b/src/content/reference/en/p5.Framebuffer/get.mdx
index be11d278b1..56b29a8f30 100644
--- a/src/content/reference/en/p5.Framebuffer/get.mdx
+++ b/src/content/reference/en/p5.Framebuffer/get.mdx
@@ -39,52 +39,44 @@ description: >
the coordinates for the upper-left corner of the subsection. The last two
parameters are the width and height of the subsection.</p>
-line: 1455
+line: 1379
isConstructor: false
itemtype: method
+example: []
class: p5.Framebuffer
return:
description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
type: p5.Image
overloads:
- - line: 1455
- params:
+ - params:
- name: x
- description: |
- <p>x-coordinate of the pixel. Defaults to 0.</p>
+ description: x-coordinate of the pixel. Defaults to 0.
type: Number
- name: 'y'
- description: |
- <p>y-coordinate of the pixel. Defaults to 0.</p>
+ description: y-coordinate of the pixel. Defaults to 0.
type: Number
- name: w
- description: |
- <p>width of the subsection to be returned.</p>
+ description: width of the subsection to be returned.
type: Number
- name: h
- description: |
- <p>height of the subsection to be returned.</p>
+ description: height of the subsection to be returned.
type: Number
return:
description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
type: p5.Image
- - line: 1483
- params: []
+ - params: []
return:
description: entire framebuffer as a <a href="#/p5.Image">p5.Image</a> object.
type: p5.Image
- - line: 1487
- params:
+ - params:
- name: x
- description: ''
type: Number
- name: 'y'
- description: ''
type: Number
return:
description: >-
- color of the pixel at `(x, y)` as an array of color values `[R, G, B,
- A]`.
+ color of the pixel at <code>(x, y)</code> as an array of color values
+ <code>[R, G, B, A]</code>.
type: 'Number[]'
chainable: false
---
diff --git a/src/content/reference/en/p5.Framebuffer/loadPixels.mdx b/src/content/reference/en/p5.Framebuffer/loadPixels.mdx
deleted file mode 100644
index 96bea59f79..0000000000
--- a/src/content/reference/en/p5.Framebuffer/loadPixels.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: loadPixels
-module: Rendering
-submodule: ''
-file: src/webgl/p5.Framebuffer.js
-description: >
- <p>Loads the current value of each pixel in the framebuffer into its
-
- <a href="/reference/p5.Framebuffer/pixels/">pixels</a> array.</p>
-
- <p><code>myBuffer.loadPixels()</code> must be called before reading from or
- writing to
-
- <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>.</p>
-line: 1386
-isConstructor: false
-itemtype: method
-example:
- - |-
-
- <div>
- <code>
- function setup() {
- createCanvas(100, 100, WEBGL);
-
- background(200);
-
- // Create a p5.Framebuffer object.
- let myBuffer = createFramebuffer();
-
- // Load the pixels array.
- myBuffer.loadPixels();
-
- // Get the number of pixels in the
- // top half of the framebuffer.
- let numPixels = myBuffer.pixels.length / 2;
-
- // Set the framebuffer's top half to pink.
- for (let i = 0; i < numPixels; i += 4) {
- myBuffer.pixels[i] = 255;
- myBuffer.pixels[i + 1] = 102;
- myBuffer.pixels[i + 2] = 204;
- myBuffer.pixels[i + 3] = 255;
- }
-
- // Update the pixels array.
- myBuffer.updatePixels();
-
- // Draw the p5.Framebuffer object to the canvas.
- image(myBuffer, -50, -50);
-
- describe('A pink rectangle above a gray rectangle.');
- }
- </code>
- </div>
-class: p5.Framebuffer
-chainable: false
----
-
-
-# loadPixels
diff --git a/src/content/reference/en/p5.Framebuffer/pixelDensity.mdx b/src/content/reference/en/p5.Framebuffer/pixelDensity.mdx
index ba7e157d6a..5f0a736c4b 100644
--- a/src/content/reference/en/p5.Framebuffer/pixelDensity.mdx
+++ b/src/content/reference/en/p5.Framebuffer/pixelDensity.mdx
@@ -30,12 +30,11 @@ description: >
its current
pixel density.</p>
-line: 297
+line: 287
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myBuffer;
@@ -79,12 +78,10 @@ example:
let myBuffer;
let myFont;
- // Load a font and create a p5.Font object.
- function preload() {
- myFont = loadFont('/assets/inconsolata.otf');
- }
+ async function setup() {
+ // Load a font and create a p5.Font object.
+ myFont = await loadFont('/assets/inconsolata.otf');
- function setup() {
createCanvas(100, 100, WEBGL);
background(200);
@@ -109,15 +106,18 @@ example:
</code>
</div>
class: p5.Framebuffer
-params:
- - name: density
- description: |
- <p>pixel density to set.</p>
- type: Number
- optional: true
return:
description: current pixel density.
type: Number
+overloads:
+ - params:
+ - name: density
+ description: pixel density to set.
+ optional: 1
+ type: Number
+ return:
+ description: current pixel density.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Framebuffer/pixels.mdx b/src/content/reference/en/p5.Framebuffer/pixels.mdx
index 123512633e..34f78247fa 100644
--- a/src/content/reference/en/p5.Framebuffer/pixels.mdx
+++ b/src/content/reference/en/p5.Framebuffer/pixels.mdx
@@ -22,12 +22,11 @@ description: >
<a href="/reference/p5/p5.Shader">p5.Shader</a> object instead of looping over
<code>myBuffer.pixels</code>.</p>
-line: 111
+line: 1650
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
diff --git a/src/content/reference/en/p5.Framebuffer/remove.mdx b/src/content/reference/en/p5.Framebuffer/remove.mdx
index 9d5631d6ff..f391a5e76b 100644
--- a/src/content/reference/en/p5.Framebuffer/remove.mdx
+++ b/src/content/reference/en/p5.Framebuffer/remove.mdx
@@ -20,11 +20,8 @@ description: >
// Delete the framebuffer from CPU memory.
- myBuffer = undefined;
-
- </code></pre>
-
- <p>Note: All variables that reference the framebuffer must be assigned
+ myBuffer = undefined;</code></pre><p>Note: All variables that reference the
+ framebuffer must be assigned
the value <code>undefined</code> to delete the framebuffer from CPU memory. If
any
@@ -32,12 +29,11 @@ description: >
variable still refers to the framebuffer, then it won't be garbage
collected.</p>
-line: 1031
+line: 991
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to remove the p5.Framebuffer object.
@@ -85,6 +81,8 @@ example:
</code>
</div>
class: p5.Framebuffer
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Framebuffer/resize.mdx b/src/content/reference/en/p5.Framebuffer/resize.mdx
index 1911fd9d9f..21e5e263bb 100644
--- a/src/content/reference/en/p5.Framebuffer/resize.mdx
+++ b/src/content/reference/en/p5.Framebuffer/resize.mdx
@@ -16,12 +16,11 @@ description: >
300
and <code>myBuffer.height</code> 500.</p>
-line: 238
+line: 184
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myBuffer;
@@ -57,15 +56,14 @@ example:
</code>
</div>
class: p5.Framebuffer
-params:
- - name: width
- description: |
- <p>width of the framebuffer.</p>
- type: Number
- - name: height
- description: |
- <p>height of the framebuffer.</p>
- type: Number
+overloads:
+ - params:
+ - name: width
+ description: width of the framebuffer.
+ type: Number
+ - name: height
+ description: height of the framebuffer.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Framebuffer/updatePixels.mdx b/src/content/reference/en/p5.Framebuffer/updatePixels.mdx
deleted file mode 100644
index fbde648bbe..0000000000
--- a/src/content/reference/en/p5.Framebuffer/updatePixels.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: updatePixels
-module: Rendering
-submodule: ''
-file: src/webgl/p5.Framebuffer.js
-description: >
- <p>Updates the framebuffer with the RGBA values in the
-
- <a href="/reference/p5.Framebuffer/pixels/">pixels</a> array.</p>
-
- <p><code>myBuffer.updatePixels()</code> only needs to be called after changing
- values
-
- in the <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a> array.
- Such
-
- changes can be made directly after calling
-
- <a href="/reference/p5.Framebuffer/loadPixels/">myBuffer.loadPixels()</a>.</p>
-line: 1581
-isConstructor: false
-itemtype: method
-example:
- - |-
-
- <div>
- <code>
- function setup() {
- createCanvas(100, 100, WEBGL);
-
- background(200);
-
- // Create a p5.Framebuffer object.
- let myBuffer = createFramebuffer();
-
- // Load the pixels array.
- myBuffer.loadPixels();
-
- // Get the number of pixels in the
- // top half of the framebuffer.
- let numPixels = myBuffer.pixels.length / 2;
-
- // Set the framebuffer's top half to pink.
- for (let i = 0; i < numPixels; i += 4) {
- myBuffer.pixels[i] = 255;
- myBuffer.pixels[i + 1] = 102;
- myBuffer.pixels[i + 2] = 204;
- myBuffer.pixels[i + 3] = 255;
- }
-
- // Update the pixels array.
- myBuffer.updatePixels();
-
- // Draw the p5.Framebuffer object to the canvas.
- image(myBuffer, -50, -50);
-
- describe('A pink rectangle above a gray rectangle.');
- }
- </code>
- </div>
-class: p5.Framebuffer
-chainable: false
----
-
-
-# updatePixels
diff --git a/src/content/reference/en/p5.Gain/amp.mdx b/src/content/reference/en/p5.Gain/amp.mdx
index d12a40eaf6..85ae7b1d91 100644
--- a/src/content/reference/en/p5.Gain/amp.mdx
+++ b/src/content/reference/en/p5.Gain/amp.mdx
@@ -2,29 +2,16 @@
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
+file: src/Gain.js
+description: Adjust the amplitude of the soundfile.
+line: 57
isConstructor: false
itemtype: method
class: p5.Gain
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
+ - name: amplitude
+ description: 'amplitude value between 0 and 1, or an audio rate signal such as an LFO.'
+ type: 'Number, Object'
chainable: false
---
diff --git a/src/content/reference/en/p5.Gain/connect.mdx b/src/content/reference/en/p5.Gain/connect.mdx
deleted file mode 100644
index c432403acf..0000000000
--- a/src/content/reference/en/p5.Gain/connect.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Gain
-params:
- - name: unit
- description: ''
- type: Object
-chainable: false
----
-
-
-# connect
diff --git a/src/content/reference/en/p5.Gain/disconnect.mdx b/src/content/reference/en/p5.Gain/disconnect.mdx
deleted file mode 100644
index 35b6f43131..0000000000
--- a/src/content/reference/en/p5.Gain/disconnect.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: disconnect
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Disconnect all output.</p>
-line: 11084
-isConstructor: false
-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
deleted file mode 100644
index 02595c2b6e..0000000000
--- a/src/content/reference/en/p5.Gain/setInput.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Gain
-params:
- - name: src
- description: |
- <p>p5.sound / Web Audio object with a sound
- output.</p>
- type: Object
-chainable: false
----
-
-
-# setInput
diff --git a/src/content/reference/en/p5.Geometry/calculateBoundingBox.mdx b/src/content/reference/en/p5.Geometry/calculateBoundingBox.mdx
index 4c641b1346..d688ac64b6 100644
--- a/src/content/reference/en/p5.Geometry/calculateBoundingBox.mdx
+++ b/src/content/reference/en/p5.Geometry/calculateBoundingBox.mdx
@@ -3,7 +3,7 @@ title: calculateBoundingBox
module: Shape
submodule: 3D Primitives
file: src/webgl/p5.Geometry.js
-description: >
+description: >-
<p>Calculates the position and size of the smallest box that contains the
geometry.</p>
@@ -52,15 +52,12 @@ description: >
// offset: { x: 0, y: 0, z: 0}
- // }
-
- </code></pre>
-line: 682
+ // }</code></pre>
+line: 170
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -127,6 +124,11 @@ class: p5.Geometry
return:
description: bounding box of the geometry.
type: Object
+overloads:
+ - params: []
+ return:
+ description: bounding box of the geometry.
+ type: Object
chainable: false
---
diff --git a/src/content/reference/en/p5.Geometry/clearColors.mdx b/src/content/reference/en/p5.Geometry/clearColors.mdx
index 90c7837d35..3860e24509 100644
--- a/src/content/reference/en/p5.Geometry/clearColors.mdx
+++ b/src/content/reference/en/p5.Geometry/clearColors.mdx
@@ -17,12 +17,11 @@ description: >
<a href="/reference/p5/fill/">fill()</a> function to apply color to the
geometry.</p>
-line: 863
+line: 315
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -32,10 +31,10 @@ example:
// Create a p5.Geometry object.
// Set its internal color to red.
- beginGeometry();
- fill(255, 0, 0);
- plane(20);
- let myGeometry = endGeometry();
+ let myGeometry = buildGeometry(function() {
+ fill(255, 0, 0);
+ plane(20);
+ });
// Style the shape.
noStroke();
@@ -71,6 +70,8 @@ example:
</code>
</div>
class: p5.Geometry
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Geometry/computeFaces.mdx b/src/content/reference/en/p5.Geometry/computeFaces.mdx
index 57902687f5..2d126f1e77 100644
--- a/src/content/reference/en/p5.Geometry/computeFaces.mdx
+++ b/src/content/reference/en/p5.Geometry/computeFaces.mdx
@@ -6,15 +6,14 @@ file: src/webgl/p5.Geometry.js
description: >
<p>Computes the geometry's faces using its vertices.</p>
- <p>All 3D shapes are made by connecting sets of points called
- <em>vertices</em>. A
+ <p>All 3D shapes are made by connecting sets of points called vertices. A
geometry's surface is formed by connecting vertices to form triangles that
are stitched together. Each triangular patch on the geometry's surface is
- called a <em>face</em>. <code>myGeometry.computeFaces()</code> performs the
- math needed to
+ called a face. <code>myGeometry.computeFaces()</code> performs the math needed
+ to
define each face based on the distances between vertices.</p>
@@ -65,12 +64,11 @@ description: >
<p>Note: <code>myGeometry.computeFaces()</code> only works when geometries
have four or more vertices.</p>
-line: 1340
+line: 854
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -165,6 +163,8 @@ example:
</code>
</div>
class: p5.Geometry
+overloads:
+ - params: []
chainable: true
---
diff --git a/src/content/reference/en/p5.Geometry/computeNormals.mdx b/src/content/reference/en/p5.Geometry/computeNormals.mdx
index 3ef02ce1a2..794ac799f6 100644
--- a/src/content/reference/en/p5.Geometry/computeNormals.mdx
+++ b/src/content/reference/en/p5.Geometry/computeNormals.mdx
@@ -6,22 +6,20 @@ file: src/webgl/p5.Geometry.js
description: >
<p>Calculates the normal vector for each vertex on the geometry.</p>
- <p>All 3D shapes are made by connecting sets of points called
- <em>vertices</em>. A
+ <p>All 3D shapes are made by connecting sets of points called vertices. A
geometry's surface is formed by connecting vertices to create triangles
that are stitched together. Each triangular patch on the geometry's
- surface is called a <em>face</em>. <code>myGeometry.computeNormals()</code>
- performs the
+ surface is called a face. <code>myGeometry.computeNormals()</code> performs
+ the
math needed to orient each face. Orientation is important for lighting
and other effects.</p>
- <p>A face's orientation is defined by its <em>normal vector</em> which points
- out
+ <p>A face's orientation is defined by its normal vector which points out
of the face and is normal (perpendicular) to the surface. Calling
@@ -65,12 +63,11 @@ description: >
number of decimal places to use for calculations. By default,
<code>roundToPrecision</code> uses 3 decimal places.</p>
-line: 1508
+line: 1199
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -81,9 +78,9 @@ example:
createCanvas(100, 100, WEBGL);
// Create a p5.Geometry object.
- beginGeometry();
- torus();
- myGeometry = endGeometry();
+ myGeometry = buildGeometry(function() {
+ torus();
+ });
// Compute the vertex normals.
myGeometry.computeNormals();
@@ -341,17 +338,16 @@ example:
</code>
</div>
class: p5.Geometry
-params:
- - name: shadingType
- description: |
- <p>shading type. either FLAT or SMOOTH. Defaults to <code>FLAT</code>.</p>
- type: String
- optional: true
- - name: options
- description: |
- <p>shading options.</p>
- type: Object
- optional: true
+overloads:
+ - params:
+ - name: shadingType
+ description: shading type. either FLAT or SMOOTH. Defaults to <code>FLAT</code>.
+ optional: 1
+ type: FLAT|SMOOTH
+ - name: options
+ description: shading options.
+ optional: 1
+ type: Object
chainable: true
---
diff --git a/src/content/reference/en/p5.Geometry/faces.mdx b/src/content/reference/en/p5.Geometry/faces.mdx
index 0a4884e60c..ec90b46192 100644
--- a/src/content/reference/en/p5.Geometry/faces.mdx
+++ b/src/content/reference/en/p5.Geometry/faces.mdx
@@ -8,14 +8,13 @@ description: >
faces.</p>
- <p>All 3D shapes are made by connecting sets of points called
- <em>vertices</em>. A
+ <p>All 3D shapes are made by connecting sets of points called vertices. A
geometry's surface is formed by connecting vertices to form triangles
that are stitched together. Each triangular patch on the geometry's
- surface is called a <em>face</em>.</p>
+ surface is called a face.</p>
<p>The geometry's vertices are stored as
@@ -55,12 +54,11 @@ description: >
<code>myGeometry.vertices[1]</code>,and
<code>myGeometry.vertices[3]</code>.</p>
-line: 505
+line: 2165
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -71,9 +69,9 @@ example:
createCanvas(100, 100, WEBGL);
// Create a p5.Geometry object.
- beginGeometry();
- sphere();
- myGeometry = endGeometry();
+ myGeometry = buildGeometry(function() {
+ sphere();
+ });
describe("A sphere drawn on a gray background. The sphere's surface is a grayscale patchwork of triangles.");
}
diff --git a/src/content/reference/en/p5.Geometry/flipU.mdx b/src/content/reference/en/p5.Geometry/flipU.mdx
index 6e50573681..401a0add7d 100644
--- a/src/content/reference/en/p5.Geometry/flipU.mdx
+++ b/src/content/reference/en/p5.Geometry/flipU.mdx
@@ -3,7 +3,7 @@ title: flipU
module: Shape
submodule: 3D Primitives
file: src/webgl/p5.Geometry.js
-description: >
+description: >-
<p>Flips the geometry’s texture u-coordinates.</p>
<p>In order for <a href="/reference/p5/texture/">texture()</a> to work, the
@@ -57,24 +57,18 @@ description: >
// Top vertices: [0, 0, 1, 0] --> [1, 0, 0, 0]
- // Bottom vertices: [0, 1, 1, 1] --> [1, 1, 0, 1]
-
- </code></pre>
-line: 1150
+ // Bottom vertices: [0, 1, 1, 1] --> [1, 1, 0, 1]</code></pre>
+line: 623
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let img;
- function preload() {
- img = loadImage('/assets/laDefense.jpg');
- }
-
- function setup() {
+ async function setup() {
+ img = await loadImage('/assets/laDefense.jpg');
createCanvas(100, 100, WEBGL);
background(200);
@@ -113,6 +107,8 @@ example:
</code>
</div>
class: p5.Geometry
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Geometry/flipV.mdx b/src/content/reference/en/p5.Geometry/flipV.mdx
index cdae0753d3..4523f01279 100644
--- a/src/content/reference/en/p5.Geometry/flipV.mdx
+++ b/src/content/reference/en/p5.Geometry/flipV.mdx
@@ -3,7 +3,7 @@ title: flipV
module: Shape
submodule: 3D Primitives
file: src/webgl/p5.Geometry.js
-description: >
+description: >-
<p>Flips the geometry’s texture v-coordinates.</p>
<p>In order for <a href="/reference/p5/texture/">texture()</a> to work, the
@@ -57,24 +57,18 @@ description: >
// Left vertices: [0, 0] <--> [1, 0]
- // Right vertices: [1, 0] <--> [1, 1]
-
- </code></pre>
-line: 1245
+ // Right vertices: [1, 0] <--> [1, 1]</--></--></code></pre>
+line: 715
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let img;
- function preload() {
- img = loadImage('/assets/laDefense.jpg');
- }
-
- function setup() {
+ async function setup() {
+ img = await loadImage('/assets/laDefense.jpg');
createCanvas(100, 100, WEBGL);
background(200);
@@ -113,6 +107,8 @@ example:
</code>
</div>
class: p5.Geometry
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Geometry/makeEdgesFromFaces.mdx b/src/content/reference/en/p5.Geometry/makeEdgesFromFaces.mdx
new file mode 100644
index 0000000000..12172cc0c0
--- /dev/null
+++ b/src/content/reference/en/p5.Geometry/makeEdgesFromFaces.mdx
@@ -0,0 +1,57 @@
+---
+title: makeEdgesFromFaces
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: ''
+line: 1391
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div>
+ <code>
+ let tetrahedron;
+ function setup() {
+ createCanvas(200, 200, WEBGL);
+ describe('A rotating tetrahedron');
+
+ tetrahedron = new p5.Geometry();
+
+ // Give each geometry a unique gid
+ tetrahedron.gid = 'tetrahedron';
+
+ // Add four points of the tetrahedron
+
+ let radius = 50;
+ // A 2D triangle:
+ tetrahedron.vertices.push(createVector(radius, 0, 0));
+ tetrahedron.vertices.push(createVector(radius, 0, 0).rotate(TWO_PI / 3));
+ tetrahedron.vertices.push(createVector(radius, 0, 0).rotate(TWO_PI * 2 / 3));
+ // Add a tip in the z axis:
+ tetrahedron.vertices.push(createVector(0, 0, radius));
+
+ // Create the four faces by connecting the sets of three points
+ tetrahedron.faces.push([0, 1, 2]);
+ tetrahedron.faces.push([0, 1, 3]);
+ tetrahedron.faces.push([0, 2, 3]);
+ tetrahedron.faces.push([1, 2, 3]);
+ tetrahedron.makeEdgesFromFaces();
+ }
+ function draw() {
+ background(200);
+ strokeWeight(2);
+ orbitControl();
+ rotateY(millis() * 0.001);
+ model(tetrahedron);
+ }
+ </code>
+ </div>
+class: p5.Geometry
+overloads:
+ - params: []
+chainable: false
+---
+
+
+# makeEdgesFromFaces
diff --git a/src/content/reference/en/p5.Geometry/normalize.mdx b/src/content/reference/en/p5.Geometry/normalize.mdx
index c92d3e89f9..2973feecc5 100644
--- a/src/content/reference/en/p5.Geometry/normalize.mdx
+++ b/src/content/reference/en/p5.Geometry/normalize.mdx
@@ -21,12 +21,11 @@ description: >
<p>Note: <code>myGeometry.normalize()</code> only works when called in the
<a href="/reference/p5/setup/">setup()</a> function.</p>
-line: 2228
+line: 1711
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myGeometry;
@@ -35,9 +34,9 @@ example:
createCanvas(100, 100, WEBGL);
// Create a very small torus.
- beginGeometry();
- torus(1, 0.25);
- myGeometry = endGeometry();
+ myGeometry = buildGeometry(function() {;
+ torus(1, 0.25);
+ });
// Normalize the torus so its vertices fill
// the range [-100, 100].
@@ -64,6 +63,8 @@ example:
</code>
</div>
class: p5.Geometry
+overloads:
+ - params: []
chainable: true
---
diff --git a/src/content/reference/en/p5.Geometry/uvs.mdx b/src/content/reference/en/p5.Geometry/uvs.mdx
index 54c991993d..e8fff2ab76 100644
--- a/src/content/reference/en/p5.Geometry/uvs.mdx
+++ b/src/content/reference/en/p5.Geometry/uvs.mdx
@@ -30,22 +30,17 @@ description: >
stored at <code>myGeometry.uvs[0]</code> and
<code>myGeometry.uvs[1]</code>.</p>
-line: 591
+line: 2165
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let img;
- // Load the image and create a p5.Image object.
- function preload() {
- img = loadImage('/assets/laDefense.jpg');
- }
-
- function setup() {
+ async function setup() {
+ img = await loadImage('/assets/laDefense.jpg');
createCanvas(100, 100, WEBGL);
background(200);
diff --git a/src/content/reference/en/p5.Geometry/vertexNormals.mdx b/src/content/reference/en/p5.Geometry/vertexNormals.mdx
index 827b65ef37..16cd458816 100644
--- a/src/content/reference/en/p5.Geometry/vertexNormals.mdx
+++ b/src/content/reference/en/p5.Geometry/vertexNormals.mdx
@@ -3,29 +3,20 @@ title: vertexNormals
module: Shape
submodule: 3D Primitives
file: src/webgl/p5.Geometry.js
-description: >
+description: |
<p>An array with the vectors that are normal to the geometry's vertices.</p>
-
- <p>A face's orientation is defined by its <em>normal vector</em> which points
- out
-
+ <p>A face's orientation is defined by its normal vector which points out
of the face and is normal (perpendicular) to the surface. Calling
-
<code>myGeometry.computeNormals()</code> first calculates each face's normal
-
vector. Then it calculates the normal vector for each vertex by
-
averaging the normal vectors of the faces surrounding the vertex. The
-
vertex normals are stored as <a href="/reference/p5/p5.Vector">p5.Vector</a>
-
objects in the <code>myGeometry.vertexNormals</code> array.</p>
-line: 375
+line: 2165
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -36,9 +27,9 @@ example:
createCanvas(100, 100, WEBGL);
// Create a p5.Geometry object.
- beginGeometry();
- torus(30, 15, 10, 8);
- myGeometry = endGeometry();
+ myGeometry = buildGeometry(function() {
+ torus(30, 15, 10, 8);
+ });
// Compute the vertex normals.
myGeometry.computeNormals();
diff --git a/src/content/reference/en/p5.Geometry/vertexProperty.mdx b/src/content/reference/en/p5.Geometry/vertexProperty.mdx
new file mode 100644
index 0000000000..120264708b
--- /dev/null
+++ b/src/content/reference/en/p5.Geometry/vertexProperty.mdx
@@ -0,0 +1,148 @@
+---
+title: vertexProperty
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: >
+ <p>Sets the shader's vertex property or attribute variables.</p>
+
+ <p>A vertex property, or vertex attribute, is a variable belonging to a vertex
+ in a shader. p5.js provides some
+
+ default properties, such as <code>aPosition</code>, <code>aNormal</code>,
+ <code>aVertexColor</code>, etc. These are
+
+ set using <a href="/reference/p5/vertex/">vertex()</a>, <a
+ href="/reference/p5/normal/">normal()</a>
+
+ and <a href="/reference/p5/fill/">fill()</a> respectively. Custom properties
+ can also
+
+ be defined within <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+ <a href="/reference/p5/endShape/">endShape()</a>.</p>
+
+ <p>The first parameter, <code>propertyName</code>, is a string with the
+ property's name.
+
+ This is the same variable name which should be declared in the shader, as in
+
+ <code>in vec3 aProperty</code>, similar to .<code>setUniform()</code>.</p>
+
+ <p>The second parameter, <code>data</code>, is the value assigned to the
+ shader variable. This value
+
+ will be pushed directly onto the Geometry object. There should be the same
+ number
+
+ of custom property values as vertices, this method should be invoked once for
+ each
+
+ vertex.</p>
+
+ <p>The <code>data</code> can be a Number or an array of numbers. Tn the shader
+ program the type
+
+ can be declared according to the WebGL specification. Common types include
+ <code>float</code>,
+
+ <code>vec2</code>, <code>vec3</code>, <code>vec4</code> or matrices.</p>
+
+ <p>See also the global <a
+ href="/reference/p5/vertexProperty/">vertexProperty()</a> function.</p>
+line: 1842
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div>
+ <code>
+ let geo;
+
+ function cartesianToSpherical(x, y, z) {
+ let r = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
+ let theta = acos(z / r);
+ let phi = atan2(y, x);
+ return { theta, phi };
+ }
+
+ function setup() {
+ createCanvas(100, 100, WEBGL);
+
+ // Modify the material shader to display roughness.
+ const myShader = baseMaterialShader().modify({
+ vertexDeclarations:`in float aRoughness;
+ out float vRoughness;`,
+ fragmentDeclarations: 'in float vRoughness;',
+ 'void afterVertex': `() {
+ vRoughness = aRoughness;
+ }`,
+ 'vec4 combineColors': `(ColorComponents components) {
+ vec4 color = vec4(0.);
+ color.rgb += components.diffuse * components.baseColor * (1.0-vRoughness);
+ color.rgb += components.ambient * components.ambientColor;
+ color.rgb += components.specular * components.specularColor * (1.0-vRoughness);
+ color.a = components.opacity;
+ return color;
+ }`
+ });
+
+ // Create the Geometry object.
+ geo = buildGeometry(function() {
+ fill('hotpink');
+ sphere(45, 50, 50);
+ });
+
+ // Set the roughness value for every vertex.
+ for (let v of geo.vertices){
+
+ // convert coordinates to spherical coordinates
+ let spherical = cartesianToSpherical(v.x, v.y, v.z);
+
+ // Set the custom roughness vertex property.
+ let roughness = noise(spherical.theta*5, spherical.phi*5);
+ geo.vertexProperty('aRoughness', roughness);
+ }
+
+ // Use the custom shader.
+ shader(myShader);
+
+ describe('A rough pink sphere rotating on a blue background.');
+ }
+
+ function draw() {
+ // Set some styles and lighting
+ background('lightblue');
+ noStroke();
+
+ specularMaterial(255,125,100);
+ shininess(2);
+
+ directionalLight('white', -1, 1, -1);
+ ambientLight(320);
+
+ rotateY(millis()*0.001);
+
+ // Draw the geometry
+ model(geo);
+ }
+ </code>
+ </div>
+class: p5.Geometry
+overloads:
+ - params:
+ - name: propertyName
+ description: the name of the vertex property.
+ type: String
+ - name: data
+ description: the data tied to the vertex property.
+ type: 'Number|Number[]'
+ - name: size
+ description: optional size of each unit of data.
+ optional: 1
+ type: Number
+chainable: false
+---
+
+
+# vertexProperty
diff --git a/src/content/reference/en/p5.Geometry/vertices.mdx b/src/content/reference/en/p5.Geometry/vertices.mdx
index 88fa952145..902cf16788 100644
--- a/src/content/reference/en/p5.Geometry/vertices.mdx
+++ b/src/content/reference/en/p5.Geometry/vertices.mdx
@@ -19,12 +19,11 @@ description: >
its second vertex is <code>myGeometry.vertices[1]</code>, its third vertex is
<code>myGeometry.vertices[2]</code>, and so on.</p>
-line: 252
+line: 2165
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -70,9 +69,9 @@ example:
createCanvas(100, 100, WEBGL);
// Create a p5.Geometry object.
- beginGeometry();
- torus(30, 15, 10, 8);
- myGeometry = endGeometry();
+ myGeometry = buildGeometry(function() {
+ torus(30, 15, 10, 8);
+ });
describe('A white torus rotates slowly against a dark gray background. Red spheres mark its vertices.');
}
diff --git a/src/content/reference/en/p5.Graphics/createFramebuffer.mdx b/src/content/reference/en/p5.Graphics/createFramebuffer.mdx
index f28565f0bc..7af1a4ce3e 100644
--- a/src/content/reference/en/p5.Graphics/createFramebuffer.mdx
+++ b/src/content/reference/en/p5.Graphics/createFramebuffer.mdx
@@ -32,65 +32,46 @@ description: >
properties are:</p>
- <ul>
-
- <li><code>format</code>: data format of the texture, either
+ <ul><li><code>format</code>: data format of the texture, either
<code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or <code>HALF_FLOAT</code>.
- Default is <code>UNSIGNED_BYTE</code>.</li>
-
- <li><code>channels</code>: whether to store <code>RGB</code> or
- <code>RGBA</code> color channels. Default is to match the graphics buffer
- which is <code>RGBA</code>.</li>
-
- <li><code>depth</code>: whether to include a depth buffer. Default is
- <code>true</code>.</li>
-
- <li><code>depthFormat</code>: data format of depth information, either
- <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is
- <code>FLOAT</code>.</li>
-
- <li><code>stencil</code>: whether to include a stencil buffer for masking.
- <code>depth</code> must be <code>true</code> for this feature to work.
- Defaults to the value of <code>depth</code> which is <code>true</code>.</li>
-
- <li><code>antialias</code>: whether to perform anti-aliasing. If set to
- <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will be
- used by default. The number of samples can also be set, as in <code>{
- antialias: 4 }</code>. Default is to match <a
+ Default is <code>UNSIGNED_BYTE</code>.</li><li><code>channels</code>: whether
+ to store <code>RGB</code> or <code>RGBA</code> color channels. Default is to
+ match the graphics buffer which is
+ <code>RGBA</code>.</li><li><code>depth</code>: whether to include a depth
+ buffer. Default is <code>true</code>.</li><li><code>depthFormat</code>: data
+ format of depth information, either <code>UNSIGNED_INT</code> or
+ <code>FLOAT</code>. Default is
+ <code>FLOAT</code>.</li><li><code>stencil</code>: whether to include a stencil
+ buffer for masking. <code>depth</code> must be <code>true</code> for this
+ feature to work. Defaults to the value of <code>depth</code> which is
+ <code>true</code>.</li><li><code>antialias</code>: whether to perform
+ anti-aliasing. If set to <code>true</code>, as in <code>{ antialias: true
+ }</code>, 2 samples will be used by default. The number of samples can also be
+ set, as in <code>{ antialias: 4 }</code>. Default is to match <a
href="/reference/p5/setAttributes/">setAttributes()</a> which is
- <code>false</code> (<code>true</code> in Safari).</li>
-
- <li><code>width</code>: width of the <a
+ <code>false</code> (<code>true</code> in Safari).</li><li><code>width</code>:
+ width of the <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object.
+ Default is to always match the graphics buffer
+ width.</li><li><code>height</code>: height of the <a
href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
- always match the graphics buffer width.</li>
-
- <li><code>height</code>: height of the <a
- href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
- always match the graphics buffer height.</li>
-
- <li><code>density</code>: pixel density of the <a
- href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
- always match the graphics buffer pixel density.</li>
-
- <li><code>textureFiltering</code>: how to read values from the <a
+ always match the graphics buffer height.</li><li><code>density</code>: pixel
+ density of the <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
+ object. Default is to always match the graphics buffer pixel
+ density.</li><li><code>textureFiltering</code>: how to read values from the <a
href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Either
<code>LINEAR</code> (nearby pixels will be interpolated) or
<code>NEAREST</code> (no interpolation). Generally, use <code>LINEAR</code>
when using the texture as an image and <code>NEAREST</code> if reading the
- texture as data. Default is <code>LINEAR</code>.</li>
-
- </ul>
-
- <p>If the <code>width</code>, <code>height</code>, or <code>density</code>
- attributes are set, they won't
+ texture as data. Default is <code>LINEAR</code>.</li></ul><p>If the
+ <code>width</code>, <code>height</code>, or <code>density</code> attributes
+ are set, they won't
automatically match the graphics buffer and must be changed manually.</p>
-line: 400
+line: 555
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and hold a mouse button to change shapes.
@@ -299,15 +280,18 @@ example:
</code>
</div>
class: p5.Graphics
-params:
- - name: options
- description: |
- <p>configuration options.</p>
- type: Object
- optional: true
return:
description: new framebuffer.
type: p5.Framebuffer
+overloads:
+ - params:
+ - name: options
+ description: configuration options.
+ optional: 1
+ type: Object
+ return:
+ description: new framebuffer.
+ type: p5.Framebuffer
chainable: false
---
diff --git a/src/content/reference/en/p5.Graphics/remove.mdx b/src/content/reference/en/p5.Graphics/remove.mdx
index 4b4f7d5be4..e286781f9b 100644
--- a/src/content/reference/en/p5.Graphics/remove.mdx
+++ b/src/content/reference/en/p5.Graphics/remove.mdx
@@ -20,11 +20,8 @@ description: >
// Delete the graphics buffer from CPU memory.
- myGraphics = undefined;
-
- </code></pre>
-
- <p>Note: All variables that reference the graphics buffer must be assigned
+ myGraphics = undefined;</code></pre><p>Note: All variables that reference the
+ graphics buffer must be assigned
the value <code>undefined</code> to delete the graphics buffer from CPU
memory. If any
@@ -32,12 +29,11 @@ description: >
variable still refers to the graphics buffer, then it won't be garbage
collected.</p>
-line: 320
+line: 308
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to remove the p5.Graphics object.
@@ -77,6 +73,8 @@ example:
</code>
</div>
class: p5.Graphics
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Graphics/reset.mdx b/src/content/reference/en/p5.Graphics/reset.mdx
index fb503a215c..152e7a387e 100644
--- a/src/content/reference/en/p5.Graphics/reset.mdx
+++ b/src/content/reference/en/p5.Graphics/reset.mdx
@@ -13,12 +13,11 @@ description: >
objects must reset these values manually by calling
<code>myGraphics.reset()</code>.</p>
-line: 153
+line: 241
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let pg;
@@ -169,6 +168,8 @@ example:
</code>
</div>
class: p5.Graphics
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/blend.mdx b/src/content/reference/en/p5.Image/blend.mdx
index d6f209fbb9..4dcd137807 100644
--- a/src/content/reference/en/p5.Image/blend.mdx
+++ b/src/content/reference/en/p5.Image/blend.mdx
@@ -39,24 +39,97 @@ description: >
<code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>,
<code>ADD</code>, or <code>NORMAL</code>.</p>
-line: 1430
+line: 1455
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let mountains;
+ let bricks;
+
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks_third.jpg');
+ createCanvas(100, 100);
+
+ // Blend the bricks image into the mountains.
+ mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+
+ // Display the mountains image.
+ image(mountains, 0, 0);
+
+ // Display the bricks image.
+ 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;
- // Load the images.
- function preload() {
- mountains = loadImage('/assets/rockies.jpg');
- bricks = loadImage('/assets/bricks_third.jpg');
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks_third.jpg');
+
+ createCanvas(100, 100);
+
+ // Blend the bricks image into the mountains.
+ mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+
+ // Display the mountains image.
+ image(mountains, 0, 0);
+
+ // Display the bricks image.
+ 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;
+
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks_third.jpg');
- function setup() {
+ createCanvas(100, 100);
+
+ // Blend the bricks image into the mountains.
+ mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+
+ // Display the mountains image.
+ image(mountains, 0, 0);
+
+ // Display the bricks image.
+ 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>
+ - |-
+ <div>
+ <code>
+ let mountains;
+ let bricks;
+
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks_third.jpg');
createCanvas(100, 100);
// Blend the bricks image into the mountains.
@@ -78,13 +151,88 @@ example:
let mountains;
let bricks;
- // Load the images.
- function preload() {
- mountains = loadImage('/assets/rockies.jpg');
- bricks = loadImage('/assets/bricks_third.jpg');
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks_third.jpg');
+
+ createCanvas(100, 100);
+
+ // Blend the bricks image into the mountains.
+ mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+
+ // Display the mountains image.
+ image(mountains, 0, 0);
+
+ // Display the bricks image.
+ 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;
+
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks_third.jpg');
+
+ createCanvas(100, 100);
+
+ // Blend the bricks image into the mountains.
+ mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+
+ // Display the mountains image.
+ image(mountains, 0, 0);
+
+ // Display the bricks image.
+ 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>
+ - |-
+ <div>
+ <code>
+ let mountains;
+ let bricks;
+
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks_third.jpg');
+ createCanvas(100, 100);
+
+ // Blend the bricks image into the mountains.
+ mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+
+ // Display the mountains image.
+ image(mountains, 0, 0);
+
+ // Display the bricks image.
+ 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;
+
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks_third.jpg');
- function setup() {
createCanvas(100, 100);
// Blend the bricks image into the mountains.
@@ -106,13 +254,88 @@ example:
let mountains;
let bricks;
- // Load the images.
- function preload() {
- mountains = loadImage('/assets/rockies.jpg');
- bricks = loadImage('/assets/bricks_third.jpg');
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks_third.jpg');
+
+ createCanvas(100, 100);
+
+ // Blend the bricks image into the mountains.
+ mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+
+ // Display the mountains image.
+ image(mountains, 0, 0);
+
+ // Display the bricks image.
+ 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>
+ - |-
+ <div>
+ <code>
+ let mountains;
+ let bricks;
+
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks_third.jpg');
+ createCanvas(100, 100);
+
+ // Blend the bricks image into the mountains.
+ mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+
+ // Display the mountains image.
+ image(mountains, 0, 0);
+
+ // Display the bricks image.
+ 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;
+
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks_third.jpg');
+
+ createCanvas(100, 100);
+
+ // Blend the bricks image into the mountains.
+ mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+
+ // Display the mountains image.
+ image(mountains, 0, 0);
+
+ // Display the bricks image.
+ 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;
+
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks_third.jpg');
- function setup() {
createCanvas(100, 100);
// Blend the bricks image into the mountains.
@@ -130,86 +353,282 @@ example:
</div>
class: p5.Image
overloads:
- - line: 1430
- params:
+ - params:
- name: srcImage
- description: |
- <p>source image</p>
+ description: source image
type: p5.Image
- name: sx
- description: |
- <p>x-coordinate of the source's upper-left corner.</p>
+ description: x-coordinate of the source's upper-left corner.
type: Integer
- name: sy
- description: |
- <p>y-coordinate of the source's upper-left corner.</p>
+ description: y-coordinate of the source's upper-left corner.
type: Integer
- name: sw
- description: |
- <p>source image width.</p>
+ description: source image width.
type: Integer
- name: sh
- description: |
- <p>source image height.</p>
+ description: source image height.
type: Integer
- name: dx
- description: |
- <p>x-coordinate of the destination's upper-left corner.</p>
+ description: x-coordinate of the destination's upper-left corner.
type: Integer
- name: dy
- description: |
- <p>y-coordinate of the destination's upper-left corner.</p>
+ description: y-coordinate of the destination's upper-left corner.
type: Integer
- name: dw
- description: |
- <p>destination image width.</p>
+ description: destination image width.
type: Integer
- name: dh
- description: |
- <p>destination image height.</p>
+ description: destination image height.
type: Integer
- name: blendMode
description: >
<p>the blend mode. either
- BLEND, DARKEST, LIGHTEST, DIFFERENCE,
- MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
- SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>
+
+ BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+
+ MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+
+ SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>
+
<p>Available blend modes are: normal | multiply | screen | overlay |
- darken | lighten | color-dodge | color-burn | hard-light |
- soft-light | difference | exclusion | hue | saturation |
- color | luminosity</p>
- <p><a
- href="http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/">http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</a></p>
- type: Constant
- - line: 1556
- params:
+
+ darken | lighten | color-dodge | color-burn | hard-light |
+
+ soft-light | difference | exclusion | hue | saturation |
+
+ color | luminosity</p>
+
+ <p>http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</p>
+ type: >-
+ BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL
+ - params:
+ - name: sx
+ type: Integer
+ - name: sy
+ type: Integer
+ - name: sw
+ type: Integer
+ - name: sh
+ type: Integer
+ - name: dx
+ type: Integer
+ - name: dy
+ type: Integer
+ - name: dw
+ type: Integer
+ - name: dh
+ type: Integer
+ - name: blendMode
+ type: >-
+ BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL
+ - params:
+ - name: srcImage
+ description: source image
+ type: p5.Image
+ - name: sx
+ description: x-coordinate of the source's upper-left corner.
+ type: Integer
+ - name: sy
+ description: y-coordinate of the source's upper-left corner.
+ type: Integer
+ - name: sw
+ description: source image width.
+ type: Integer
+ - name: sh
+ description: source image height.
+ type: Integer
+ - name: dx
+ description: x-coordinate of the destination's upper-left corner.
+ type: Integer
+ - name: dy
+ description: y-coordinate of the destination's upper-left corner.
+ type: Integer
+ - name: dw
+ description: destination image width.
+ type: Integer
+ - name: dh
+ description: destination image height.
+ type: Integer
+ - name: blendMode
+ description: >
+ <p>the blend mode. either
+
+ BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+
+ MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+
+ SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>
+
+ <p>Available blend modes are: normal | multiply | screen | overlay |
+
+ darken | lighten | color-dodge | color-burn | hard-light |
+
+ soft-light | difference | exclusion | hue | saturation |
+
+ color | luminosity</p>
+
+ <p>http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</p>
+ type: >-
+ BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL
+ - params:
+ - name: sx
+ type: Integer
+ - name: sy
+ type: Integer
+ - name: sw
+ type: Integer
+ - name: sh
+ type: Integer
+ - name: dx
+ type: Integer
+ - name: dy
+ type: Integer
+ - name: dw
+ type: Integer
+ - name: dh
+ type: Integer
+ - name: blendMode
+ type: >-
+ BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL
+ - params:
+ - name: srcImage
+ description: source image
+ type: p5.Image
+ - name: sx
+ description: x-coordinate of the source's upper-left corner.
+ type: Integer
+ - name: sy
+ description: y-coordinate of the source's upper-left corner.
+ type: Integer
+ - name: sw
+ description: source image width.
+ type: Integer
+ - name: sh
+ description: source image height.
+ type: Integer
+ - name: dx
+ description: x-coordinate of the destination's upper-left corner.
+ type: Integer
+ - name: dy
+ description: y-coordinate of the destination's upper-left corner.
+ type: Integer
+ - name: dw
+ description: destination image width.
+ type: Integer
+ - name: dh
+ description: destination image height.
+ type: Integer
+ - name: blendMode
+ description: >
+ <p>the blend mode. either
+
+ BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+
+ MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+
+ SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>
+
+ <p>Available blend modes are: normal | multiply | screen | overlay |
+
+ darken | lighten | color-dodge | color-burn | hard-light |
+
+ soft-light | difference | exclusion | hue | saturation |
+
+ color | luminosity</p>
+
+ <p>http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</p>
+ type: >-
+ BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL
+ - params:
+ - name: sx
+ type: Integer
+ - name: sy
+ type: Integer
+ - name: sw
+ type: Integer
+ - name: sh
+ type: Integer
+ - name: dx
+ type: Integer
+ - name: dy
+ type: Integer
+ - name: dw
+ type: Integer
+ - name: dh
+ type: Integer
+ - name: blendMode
+ type: >-
+ BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL
+ - params:
+ - name: srcImage
+ description: source image
+ type: p5.Image
+ - name: sx
+ description: x-coordinate of the source's upper-left corner.
+ type: Integer
+ - name: sy
+ description: y-coordinate of the source's upper-left corner.
+ type: Integer
+ - name: sw
+ description: source image width.
+ type: Integer
+ - name: sh
+ description: source image height.
+ type: Integer
+ - name: dx
+ description: x-coordinate of the destination's upper-left corner.
+ type: Integer
+ - name: dy
+ description: y-coordinate of the destination's upper-left corner.
+ type: Integer
+ - name: dw
+ description: destination image width.
+ type: Integer
+ - name: dh
+ description: destination image height.
+ type: Integer
+ - name: blendMode
+ description: >
+ <p>the blend mode. either
+
+ BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+
+ MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+
+ SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>
+
+ <p>Available blend modes are: normal | multiply | screen | overlay |
+
+ darken | lighten | color-dodge | color-burn | hard-light |
+
+ soft-light | difference | exclusion | hue | saturation |
+
+ color | luminosity</p>
+
+ <p>http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</p>
+ type: >-
+ BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL
+ - params:
- name: sx
- description: ''
type: Integer
- name: sy
- description: ''
type: Integer
- name: sw
- description: ''
type: Integer
- name: sh
- description: ''
type: Integer
- name: dx
- description: ''
type: Integer
- name: dy
- description: ''
type: Integer
- name: dw
- description: ''
type: Integer
- name: dh
- description: ''
type: Integer
- name: blendMode
- description: ''
- type: Constant
+ type: >-
+ BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/copy.mdx b/src/content/reference/en/p5.Image/copy.mdx
index 6864b81827..667aa4101d 100644
--- a/src/content/reference/en/p5.Image/copy.mdx
+++ b/src/content/reference/en/p5.Image/copy.mdx
@@ -38,22 +38,123 @@ description: >
it isn't
the same size as the destination region.</p>
-line: 1006
+line: 942
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Copy one region of the image to another.
+ img.copy(7, 22, 10, 10, 35, 25, 50, 50);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Outline the 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;
+
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks.jpg');
+ createCanvas(100, 100);
+
+ // Calculate the center of the bricks image.
+ let x = bricks.width / 2;
+ let y = bricks.height / 2;
+
+ // Copy the bricks to the mountains image.
+ mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);
+
+ // Display the mountains image.
+ 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>
+ - |-
<div>
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Copy one region of the image to another.
+ img.copy(7, 22, 10, 10, 35, 25, 50, 50);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Outline the 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;
+
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks.jpg');
+ createCanvas(100, 100);
+
+ // Calculate the center of the bricks image.
+ let x = bricks.width / 2;
+ let y = bricks.height / 2;
+
+ // Copy the bricks to the mountains image.
+ mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);
+
+ // Display the mountains image.
+ 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>
+ - |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Copy one region of the image to another.
@@ -77,13 +178,62 @@ example:
let mountains;
let bricks;
- // Load the images.
- function preload() {
- mountains = loadImage('/assets/rockies.jpg');
- bricks = loadImage('/assets/bricks.jpg');
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks.jpg');
+ createCanvas(100, 100);
+
+ // Calculate the center of the bricks image.
+ let x = bricks.width / 2;
+ let y = bricks.height / 2;
+
+ // Copy the bricks to the mountains image.
+ mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);
+
+ // Display the mountains image.
+ 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>
+ - |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
+ createCanvas(100, 100);
+
+ // Copy one region of the image to another.
+ img.copy(7, 22, 10, 10, 35, 25, 50, 50);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Outline the 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;
+
+ async function setup() {
+ // Load the images.
+ mountains = await loadImage('/assets/rockies.jpg');
+ bricks = await loadImage('/assets/bricks.jpg');
createCanvas(100, 100);
// Calculate the center of the bricks image.
@@ -102,69 +252,185 @@ example:
</div>
class: p5.Image
overloads:
- - line: 1006
- params:
+ - params:
+ - name: srcImage
+ description: source image.
+ type: p5.Image|p5.Element
+ - name: sx
+ description: x-coordinate of the source's upper-left corner.
+ type: Integer
+ - name: sy
+ description: y-coordinate of the source's upper-left corner.
+ type: Integer
+ - name: sw
+ description: source image width.
+ type: Integer
+ - name: sh
+ description: source image height.
+ type: Integer
+ - name: dx
+ description: x-coordinate of the destination's upper-left corner.
+ type: Integer
+ - name: dy
+ description: y-coordinate of the destination's upper-left corner.
+ type: Integer
+ - name: dw
+ description: destination image width.
+ type: Integer
+ - name: dh
+ description: destination image height.
+ type: Integer
+ - params:
+ - name: sx
+ type: Integer
+ - name: sy
+ type: Integer
+ - name: sw
+ type: Integer
+ - name: sh
+ type: Integer
+ - name: dx
+ type: Integer
+ - name: dy
+ type: Integer
+ - name: dw
+ type: Integer
+ - name: dh
+ type: Integer
+ - params:
+ - name: srcImage
+ description: source image.
+ type: p5.Image|p5.Element
+ - name: sx
+ description: x-coordinate of the source's upper-left corner.
+ type: Integer
+ - name: sy
+ description: y-coordinate of the source's upper-left corner.
+ type: Integer
+ - name: sw
+ description: source image width.
+ type: Integer
+ - name: sh
+ description: source image height.
+ type: Integer
+ - name: dx
+ description: x-coordinate of the destination's upper-left corner.
+ type: Integer
+ - name: dy
+ description: y-coordinate of the destination's upper-left corner.
+ type: Integer
+ - name: dw
+ description: destination image width.
+ type: Integer
+ - name: dh
+ description: destination image height.
+ type: Integer
+ - params:
+ - name: sx
+ type: Integer
+ - name: sy
+ type: Integer
+ - name: sw
+ type: Integer
+ - name: sh
+ type: Integer
+ - name: dx
+ type: Integer
+ - name: dy
+ type: Integer
+ - name: dw
+ type: Integer
+ - name: dh
+ type: Integer
+ - params:
+ - name: srcImage
+ description: source image.
+ type: p5.Image|p5.Element
+ - name: sx
+ description: x-coordinate of the source's upper-left corner.
+ type: Integer
+ - name: sy
+ description: y-coordinate of the source's upper-left corner.
+ type: Integer
+ - name: sw
+ description: source image width.
+ type: Integer
+ - name: sh
+ description: source image height.
+ type: Integer
+ - name: dx
+ description: x-coordinate of the destination's upper-left corner.
+ type: Integer
+ - name: dy
+ description: y-coordinate of the destination's upper-left corner.
+ type: Integer
+ - name: dw
+ description: destination image width.
+ type: Integer
+ - name: dh
+ description: destination image height.
+ type: Integer
+ - params:
+ - name: sx
+ type: Integer
+ - name: sy
+ type: Integer
+ - name: sw
+ type: Integer
+ - name: sh
+ type: Integer
+ - name: dx
+ type: Integer
+ - name: dy
+ type: Integer
+ - name: dw
+ type: Integer
+ - name: dh
+ type: Integer
+ - params:
- name: srcImage
- description: |
- <p>source image.</p>
+ description: source image.
type: p5.Image|p5.Element
- name: sx
- description: |
- <p>x-coordinate of the source's upper-left corner.</p>
+ description: x-coordinate of the source's upper-left corner.
type: Integer
- name: sy
- description: |
- <p>y-coordinate of the source's upper-left corner.</p>
+ description: y-coordinate of the source's upper-left corner.
type: Integer
- name: sw
- description: |
- <p>source image width.</p>
+ description: source image width.
type: Integer
- name: sh
- description: |
- <p>source image height.</p>
+ description: source image height.
type: Integer
- name: dx
- description: |
- <p>x-coordinate of the destination's upper-left corner.</p>
+ description: x-coordinate of the destination's upper-left corner.
type: Integer
- name: dy
- description: |
- <p>y-coordinate of the destination's upper-left corner.</p>
+ description: y-coordinate of the destination's upper-left corner.
type: Integer
- name: dw
- description: |
- <p>destination image width.</p>
+ description: destination image width.
type: Integer
- name: dh
- description: |
- <p>destination image height.</p>
+ description: destination image height.
type: Integer
- - line: 1094
- params:
+ - params:
- name: sx
- description: ''
type: Integer
- name: sy
- description: ''
type: Integer
- name: sw
- description: ''
type: Integer
- name: sh
- description: ''
type: Integer
- name: dx
- description: ''
type: Integer
- name: dy
- description: ''
type: Integer
- name: dw
- description: ''
type: Integer
- name: dh
- description: ''
type: Integer
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/delay.mdx b/src/content/reference/en/p5.Image/delay.mdx
index ba310d334b..834dd32ea7 100644
--- a/src/content/reference/en/p5.Image/delay.mdx
+++ b/src/content/reference/en/p5.Image/delay.mdx
@@ -15,24 +15,133 @@ description: >
at <code>index</code> will have its delay modified. All other frames will keep
their default delay.</p>
-line: 1952
+line: 1916
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let gifFast;
+ let gifSlow;
+
+ async function setup() {
+ // Load the images.
+ gifFast = await loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+ gifSlow = await loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Resize the images.
+ gifFast.resize(50, 50);
+ gifSlow.resize(50, 50);
+
+ // Set the delay lengths.
+ gifFast.delay(10);
+ gifSlow.delay(100);
+
+ describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');
+ }
+
+ function draw() {
+ // Display the images.
+ image(gifFast, 0, 0);
+ image(gifSlow, 50, 0);
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ // Set the delay of frame 67.
+ gif.delay(3000, 67);
+
+ describe('An animated eye looking around. It pauses for three seconds while it looks down.');
+ }
+ function draw() {
+ // Display the image.
+ image(gif, 0, 0);
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
let gifFast;
let gifSlow;
- // Load the images.
- function preload() {
- gifFast = loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
- gifSlow = loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+ async function setup() {
+ // Load the images.
+ gifFast = await loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+ gifSlow = await loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Resize the images.
+ gifFast.resize(50, 50);
+ gifSlow.resize(50, 50);
+
+ // Set the delay lengths.
+ gifFast.delay(10);
+ gifSlow.delay(100);
+
+ describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');
+ }
+
+ function draw() {
+ // Display the images.
+ image(gifFast, 0, 0);
+ image(gifSlow, 50, 0);
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ // Set the delay of frame 67.
+ gif.delay(3000, 67);
+
+ describe('An animated eye looking around. It pauses for three seconds while it looks down.');
}
- function setup() {
+ function draw() {
+ // Display the image.
+ image(gif, 0, 0);
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gifFast;
+ let gifSlow;
+
+ async function setup() {
+ // Load the images.
+ gifFast = await loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+ gifSlow = await loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+
createCanvas(100, 100);
background(200);
@@ -60,12 +169,66 @@ example:
<code>
let gif;
- // Load the image.
- function preload() {
- gif = loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ // Set the delay of frame 67.
+ gif.delay(3000, 67);
+
+ describe('An animated eye looking around. It pauses for three seconds while it looks down.');
+ }
+
+ function draw() {
+ // Display the image.
+ image(gif, 0, 0);
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gifFast;
+ let gifSlow;
+
+ async function setup() {
+ // Load the images.
+ gifFast = await loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+ gifSlow = await loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Resize the images.
+ gifFast.resize(50, 50);
+ gifSlow.resize(50, 50);
+
+ // Set the delay lengths.
+ gifFast.delay(10);
+ gifSlow.delay(100);
+
+ describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');
+ }
+
+ function draw() {
+ // Display the images.
+ image(gifFast, 0, 0);
+ image(gifSlow, 50, 0);
}
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
- function setup() {
createCanvas(100, 100);
// Set the delay of frame 67.
@@ -81,16 +244,39 @@ example:
</code>
</div>
class: p5.Image
-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
+overloads:
+ - params:
+ - name: d
+ description: delay in milliseconds between switching frames.
+ type: Number
+ - name: index
+ description: index of the frame that will have its delay modified.
+ optional: 1
+ type: Number
+ - params:
+ - name: d
+ description: delay in milliseconds between switching frames.
+ type: Number
+ - name: index
+ description: index of the frame that will have its delay modified.
+ optional: 1
+ type: Number
+ - params:
+ - name: d
+ description: delay in milliseconds between switching frames.
+ type: Number
+ - name: index
+ description: index of the frame that will have its delay modified.
+ optional: 1
+ type: Number
+ - params:
+ - name: d
+ description: delay in milliseconds between switching frames.
+ type: Number
+ - name: index
+ description: index of the frame that will have its delay modified.
+ optional: 1
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/filter.mdx b/src/content/reference/en/p5.Image/filter.mdx
index ced6b7f39f..955f5dacc0 100644
--- a/src/content/reference/en/p5.Image/filter.mdx
+++ b/src/content/reference/en/p5.Image/filter.mdx
@@ -29,22 +29,187 @@ description: |
Reduces the light areas. No parameter is used.</p>
<p><code>DILATE</code>
Increases the light areas. No parameter is used.</p>
-line: 1199
+line: 1321
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the INVERT filter.
+ img.filter(INVERT);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A blue brick wall.');
+ }
+ </code>
+ </div>
<div>
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the GRAY filter.
+ img.filter(GRAY);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A brick wall drawn in grayscale.');
}
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the THRESHOLD filter.
+ img.filter(THRESHOLD);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A brick wall drawn in black and white.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the OPAQUE filter.
+ img.filter(OPAQUE);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A red brick wall.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the POSTERIZE filter.
+ img.filter(POSTERIZE, 3);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('An image of a red brick wall drawn with a limited color palette.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the BLUR filter.
+ img.filter(BLUR, 3);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A blurry image of a red brick wall.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the DILATE filter.
+ img.filter(DILATE);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A red brick wall with bright lines between each brick.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the ERODE filter.
+ img.filter(ERODE);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A red brick wall with faint lines between each brick.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Apply the INVERT filter.
@@ -62,12 +227,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Apply the GRAY filter.
@@ -85,12 +248,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Apply the THRESHOLD filter.
@@ -108,12 +269,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Apply the OPAQUE filter.
@@ -131,12 +290,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Apply the POSTERIZE filter.
@@ -154,12 +311,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Apply the BLUR filter.
@@ -177,12 +332,178 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the DILATE filter.
+ img.filter(DILATE);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A red brick wall with bright lines between each brick.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the ERODE filter.
+ img.filter(ERODE);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A red brick wall with faint lines between each brick.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the INVERT filter.
+ img.filter(INVERT);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A blue brick wall.');
}
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the GRAY filter.
+ img.filter(GRAY);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A brick wall drawn in grayscale.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the THRESHOLD filter.
+ img.filter(THRESHOLD);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A brick wall drawn in black and white.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the OPAQUE filter.
+ img.filter(OPAQUE);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A red brick wall.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the POSTERIZE filter.
+ img.filter(POSTERIZE, 3);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('An image of a red brick wall drawn with a limited color palette.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the BLUR filter.
+ img.filter(BLUR, 3);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A blurry image of a red brick wall.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Apply the DILATE filter.
@@ -200,12 +521,178 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the ERODE filter.
+ img.filter(ERODE);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A red brick wall with faint lines between each brick.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the INVERT filter.
+ img.filter(INVERT);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A blue brick wall.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the GRAY filter.
+ img.filter(GRAY);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A brick wall drawn in grayscale.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the THRESHOLD filter.
+ img.filter(THRESHOLD);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A brick wall drawn in black and white.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the OPAQUE filter.
+ img.filter(OPAQUE);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A red brick wall.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the POSTERIZE filter.
+ img.filter(POSTERIZE, 3);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('An image of a red brick wall drawn with a limited color palette.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the BLUR filter.
+ img.filter(BLUR, 3);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A blurry image of a red brick wall.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
+
+ createCanvas(100, 100);
+
+ // Apply the DILATE filter.
+ img.filter(DILATE);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('A red brick wall with bright lines between each brick.');
}
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Apply the ERODE filter.
@@ -219,17 +706,47 @@ example:
</code>
</div>
class: p5.Image
-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
+overloads:
+ - params:
+ - name: filterType
+ description: |-
+ either THRESHOLD, GRAY, OPAQUE, INVERT,
+ POSTERIZE, ERODE, DILATE or BLUR.
+ type: THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|ERODE|DILATE|BLUR
+ - name: filterParam
+ description: parameter unique to each filter.
+ optional: 1
+ type: Number
+ - params:
+ - name: filterType
+ description: |-
+ either THRESHOLD, GRAY, OPAQUE, INVERT,
+ POSTERIZE, ERODE, DILATE or BLUR.
+ type: THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|ERODE|DILATE|BLUR
+ - name: filterParam
+ description: parameter unique to each filter.
+ optional: 1
+ type: Number
+ - params:
+ - name: filterType
+ description: |-
+ either THRESHOLD, GRAY, OPAQUE, INVERT,
+ POSTERIZE, ERODE, DILATE or BLUR.
+ type: THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|ERODE|DILATE|BLUR
+ - name: filterParam
+ description: parameter unique to each filter.
+ optional: 1
+ type: Number
+ - params:
+ - name: filterType
+ description: |-
+ either THRESHOLD, GRAY, OPAQUE, INVERT,
+ POSTERIZE, ERODE, DILATE or BLUR.
+ type: THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|ERODE|DILATE|BLUR
+ - name: filterParam
+ description: parameter unique to each filter.
+ optional: 1
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/get.mdx b/src/content/reference/en/p5.Image/get.mdx
index 837e683815..ba27814c01 100644
--- a/src/content/reference/en/p5.Image/get.mdx
+++ b/src/content/reference/en/p5.Image/get.mdx
@@ -39,22 +39,97 @@ description: >
href="/reference/p5/get/">get()</a> to work directly
with images.</p>
-line: 563
+line: 432
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Copy the image.
+ let img2 = get();
+
+ // Display the copied image on the right.
+ image(img2, 50, 0);
+
+ describe('Two identical mountain landscapes shown side-by-side.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Get a pixel's color.
+ let c = img.get(50, 90);
+
+ // Style the square using the pixel's color.
+ fill(c);
+ noStroke();
+
+ // Draw the square.
+ square(25, 25, 50);
+
+ describe('A mountain landscape with an olive green square in its center.');
+ }
+ </code>
+ </div>
<div>
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Copy half of the image.
+ let img2 = img.get(0, 0, img.width / 2, img.height / 2);
+
+ // Display half of the image.
+ image(img2, 50, 50);
+
+ describe('A mountain landscape drawn on top of another mountain landscape.');
}
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -77,12 +152,88 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Get a pixel's color.
+ let c = img.get(50, 90);
+
+ // Style the square using the pixel's color.
+ fill(c);
+ noStroke();
+
+ // Draw the square.
+ square(25, 25, 50);
+
+ describe('A mountain landscape with an olive green square in its center.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Copy half of the image.
+ let img2 = img.get(0, 0, img.width / 2, img.height / 2);
+
+ // Display half of the image.
+ image(img2, 50, 50);
+
+ describe('A mountain landscape drawn on top of another mountain landscape.');
}
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Copy the image.
+ let img2 = get();
+
+ // Display the copied image on the right.
+ image(img2, 50, 0);
+
+ describe('Two identical mountain landscapes shown side-by-side.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -107,12 +258,88 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Copy half of the image.
+ let img2 = img.get(0, 0, img.width / 2, img.height / 2);
+
+ // Display half of the image.
+ image(img2, 50, 50);
+
+ describe('A mountain landscape drawn on top of another mountain landscape.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Copy the image.
+ let img2 = get();
+
+ // Display the copied image on the right.
+ image(img2, 50, 0);
+
+ describe('Two identical mountain landscapes shown side-by-side.');
}
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Get a pixel's color.
+ let c = img.get(50, 90);
+
+ // Style the square using the pixel's color.
+ fill(c);
+ noStroke();
+
+ // Draw the square.
+ square(25, 25, 50);
+
+ describe('A mountain landscape with an olive green square in its center.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -133,42 +360,117 @@ return:
description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
type: p5.Image
overloads:
- - line: 563
- params:
+ - params:
+ - name: x
+ description: x-coordinate of the pixel.
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the pixel.
+ type: Number
+ - name: w
+ description: width of the subsection to be returned.
+ type: Number
+ - name: h
+ description: height of the subsection to be returned.
+ type: Number
+ return:
+ description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
+ type: p5.Image
+ - params: []
+ return:
+ description: whole <a href="#/p5.Image">p5.Image</a>
+ type: p5.Image
+ - params:
+ - name: x
+ type: Number
+ - name: 'y'
+ type: Number
+ return:
+ description: 'color of the pixel at (x, y) in array format <code>[R, G, B, A]</code>.'
+ type: 'Number[]'
+ - params:
+ - name: x
+ description: x-coordinate of the pixel.
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the pixel.
+ type: Number
+ - name: w
+ description: width of the subsection to be returned.
+ type: Number
+ - name: h
+ description: height of the subsection to be returned.
+ type: Number
+ return:
+ description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
+ type: p5.Image
+ - params: []
+ return:
+ description: whole <a href="#/p5.Image">p5.Image</a>
+ type: p5.Image
+ - params:
+ - name: x
+ type: Number
+ - name: 'y'
+ type: Number
+ return:
+ description: 'color of the pixel at (x, y) in array format <code>[R, G, B, A]</code>.'
+ type: 'Number[]'
+ - params:
+ - name: x
+ description: x-coordinate of the pixel.
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the pixel.
+ type: Number
+ - name: w
+ description: width of the subsection to be returned.
+ type: Number
+ - name: h
+ description: height of the subsection to be returned.
+ type: Number
+ return:
+ description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
+ type: p5.Image
+ - params: []
+ return:
+ description: whole <a href="#/p5.Image">p5.Image</a>
+ type: p5.Image
+ - params:
+ - name: x
+ type: Number
+ - name: 'y'
+ type: Number
+ return:
+ description: 'color of the pixel at (x, y) in array format <code>[R, G, B, A]</code>.'
+ type: 'Number[]'
+ - params:
- name: x
- description: |
- <p>x-coordinate of the pixel.</p>
+ description: x-coordinate of the pixel.
type: Number
- name: 'y'
- description: |
- <p>y-coordinate of the pixel.</p>
+ description: y-coordinate of the pixel.
type: Number
- name: w
- description: |
- <p>width of the subsection to be returned.</p>
+ description: width of the subsection to be returned.
type: Number
- name: h
- description: |
- <p>height of the subsection to be returned.</p>
+ description: height of the subsection to be returned.
type: Number
return:
description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
type: p5.Image
- - line: 678
- params: []
+ - params: []
return:
description: whole <a href="#/p5.Image">p5.Image</a>
type: p5.Image
- - line: 682
- params:
+ - params:
- name: x
- description: ''
type: Number
- name: 'y'
- description: ''
type: Number
return:
- description: 'color of the pixel at (x, y) in array format `[R, G, B, A]`.'
+ description: 'color of the pixel at (x, y) in array format <code>[R, G, B, A]</code>.'
type: 'Number[]'
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/getCurrentFrame.mdx b/src/content/reference/en/p5.Image/getCurrentFrame.mdx
index e60841bd6c..443bd5ae4e 100644
--- a/src/content/reference/en/p5.Image/getCurrentFrame.mdx
+++ b/src/content/reference/en/p5.Image/getCurrentFrame.mdx
@@ -3,24 +3,98 @@ 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: 1716
+description: Gets the index of the current frame in an animated GIF.
+line: 1660
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');
+ }
+ function draw() {
+ // Get the index of the current GIF frame.
+ let index = gif.getCurrentFrame();
+
+ // Display the image.
+ image(gif, 0, 0);
+
+ // Display the current frame.
+ text(index, 10, 90);
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
let gif;
- // Load the image.
- function preload() {
- gif = loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');
}
- function setup() {
+ function draw() {
+ // Get the index of the current GIF frame.
+ let index = gif.getCurrentFrame();
+
+ // Display the image.
+ image(gif, 0, 0);
+
+ // Display the current frame.
+ text(index, 10, 90);
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');
+ }
+
+ function draw() {
+ // Get the index of the current GIF frame.
+ let index = gif.getCurrentFrame();
+
+ // Display the image.
+ image(gif, 0, 0);
+
+ // Display the current frame.
+ text(index, 10, 90);
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-forever.gif');
+
createCanvas(100, 100);
describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');
@@ -42,6 +116,23 @@ class: p5.Image
return:
description: index of the GIF's current frame.
type: Number
+overloads:
+ - params: []
+ return:
+ description: index of the GIF's current frame.
+ type: Number
+ - params: []
+ return:
+ description: index of the GIF's current frame.
+ type: Number
+ - params: []
+ return:
+ description: index of the GIF's current frame.
+ type: Number
+ - params: []
+ return:
+ description: index of the GIF's current frame.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/height.mdx b/src/content/reference/en/p5.Image/height.mdx
index 183b6de732..27f561eeec 100644
--- a/src/content/reference/en/p5.Image/height.mdx
+++ b/src/content/reference/en/p5.Image/height.mdx
@@ -3,24 +3,20 @@ title: height
module: Image
submodule: Image
file: src/image/p5.Image.js
-description: |
- <p>The image's height in pixels.</p>
-line: 151
+description: The image's height in pixels.
+line: 2243
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -38,7 +34,6 @@ example:
</code>
</div>
class: p5.Image
-type: '{Number}'
---
diff --git a/src/content/reference/en/p5.Image/loadPixels.mdx b/src/content/reference/en/p5.Image/loadPixels.mdx
index a91e138b65..b67b7d133b 100644
--- a/src/content/reference/en/p5.Image/loadPixels.mdx
+++ b/src/content/reference/en/p5.Image/loadPixels.mdx
@@ -13,12 +13,209 @@ description: >
pixel
values.</p>
-line: 381
+line: 181
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Load the image's pixels.
+ img.loadPixels();
+
+ // Set the pixels to black.
+ for (let x = 0; x < img.width; x += 1) {
+ for (let y = 0; y < img.height; y += 1) {
+ img.set(x, y, 0);
+ }
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 17, 17);
+ describe('A black square drawn in the middle of a gray square.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Load the image's pixels.
+ img.loadPixels();
+
+ for (let i = 0; i < img.pixels.length; 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;
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 17, 17);
+
+ describe('A black square drawn in the middle of a gray square.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Load the image's pixels.
+ img.loadPixels();
+
+ // Set the pixels to black.
+ for (let x = 0; x < img.width; x += 1) {
+ for (let y = 0; y < img.height; y += 1) {
+ img.set(x, y, 0);
+ }
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 17, 17);
+
+ describe('A black square drawn in the middle of a gray square.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Load the image's pixels.
+ img.loadPixels();
+
+ for (let i = 0; i < img.pixels.length; 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;
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 17, 17);
+
+ describe('A black square drawn in the middle of a gray square.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Load the image's pixels.
+ img.loadPixels();
+
+ // Set the pixels to black.
+ for (let x = 0; x < img.width; x += 1) {
+ for (let y = 0; y < img.height; y += 1) {
+ img.set(x, y, 0);
+ }
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 17, 17);
+
+ describe('A black square drawn in the middle of a gray square.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Load the image's pixels.
+ img.loadPixels();
+
+ for (let i = 0; i < img.pixels.length; 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;
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 17, 17);
+
+ describe('A black square drawn in the middle of a gray square.');
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
function setup() {
@@ -85,6 +282,11 @@ example:
</code>
</div>
class: p5.Image
+overloads:
+ - params: []
+ - params: []
+ - params: []
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/mask.mdx b/src/content/reference/en/p5.Image/mask.mdx
index 79f1a51d17..289dfe2482 100644
--- a/src/content/reference/en/p5.Image/mask.mdx
+++ b/src/content/reference/en/p5.Image/mask.mdx
@@ -14,24 +14,86 @@ description: >
and can't be removed once applied. If the mask has a different
pixel density from this image, the mask will be scaled.</p>
-line: 1109
+line: 1060
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let photo;
+ let maskImage;
+ async function setup() {
+ // Load the images.
+ photo = await loadImage('/assets/rockies.jpg');
+ maskImage = await loadImage('/assets/mask2.png');
+ createCanvas(100, 100);
+
+ // Apply the mask.
+ photo.mask(maskImage);
+
+ // Display the image.
+ 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>
+ - |-
<div>
<code>
let photo;
let maskImage;
- // Load the images.
- function preload() {
- photo = loadImage('/assets/rockies.jpg');
- maskImage = loadImage('/assets/mask2.png');
+ async function setup() {
+ // Load the images.
+ photo = await loadImage('/assets/rockies.jpg');
+ maskImage = await loadImage('/assets/mask2.png');
+ createCanvas(100, 100);
+
+ // Apply the mask.
+ photo.mask(maskImage);
+
+ // Display the image.
+ 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>
+ - |-
+ <div>
+ <code>
+ let photo;
+ let maskImage;
+
+ async function setup() {
+ // Load the images.
+ photo = await loadImage('/assets/rockies.jpg');
+ maskImage = await loadImage('/assets/mask2.png');
+ createCanvas(100, 100);
+
+ // Apply the mask.
+ photo.mask(maskImage);
+
+ // Display the image.
+ 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>
+ - |-
+ <div>
+ <code>
+ let photo;
+ let maskImage;
- function setup() {
+ async function setup() {
+ // Load the images.
+ photo = await loadImage('/assets/rockies.jpg');
+ maskImage = await loadImage('/assets/mask2.png');
createCanvas(100, 100);
// Apply the mask.
@@ -45,11 +107,23 @@ example:
</code>
</div>
class: p5.Image
-params:
- - name: srcImage
- description: |
- <p>source image.</p>
- type: p5.Image
+overloads:
+ - params:
+ - name: srcImage
+ description: source image.
+ type: p5.Image
+ - params:
+ - name: srcImage
+ description: source image.
+ type: p5.Image
+ - params:
+ - name: srcImage
+ description: source image.
+ type: p5.Image
+ - params:
+ - name: srcImage
+ description: source image.
+ type: p5.Image
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/numFrames.mdx b/src/content/reference/en/p5.Image/numFrames.mdx
index 0370651a94..52daf5075a 100644
--- a/src/content/reference/en/p5.Image/numFrames.mdx
+++ b/src/content/reference/en/p5.Image/numFrames.mdx
@@ -3,24 +3,95 @@ 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: 1818
+description: Returns the number of frames in an animated GIF.
+line: 1755
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ describe('A cartoon eye looks around. The text "n / 125" is shown at the bottom of the canvas.');
+ }
+
+ function draw() {
+ // Display the image.
+ image(gif, 0, 0);
+
+ // Display the current state of playback.
+ let total = gif.numFrames();
+ let index = gif.getCurrentFrame();
+ text(`${index} / ${total}`, 30, 90);
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ describe('A cartoon eye looks around. The text "n / 125" is shown at the bottom of the canvas.');
+ }
+
+ function draw() {
+ // Display the image.
+ image(gif, 0, 0);
+ // Display the current state of playback.
+ let total = gif.numFrames();
+ let index = gif.getCurrentFrame();
+ text(`${index} / ${total}`, 30, 90);
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
let gif;
- // Load the image.
- function preload() {
- gif = loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ describe('A cartoon eye looks around. The text "n / 125" is shown at the bottom of the canvas.');
+ }
+
+ function draw() {
+ // Display the image.
+ image(gif, 0, 0);
+
+ // Display the current state of playback.
+ let total = gif.numFrames();
+ let index = gif.getCurrentFrame();
+ text(`${index} / ${total}`, 30, 90);
}
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-forever.gif');
- function setup() {
createCanvas(100, 100);
describe('A cartoon eye looks around. The text "n / 125" is shown at the bottom of the canvas.');
@@ -41,6 +112,23 @@ class: p5.Image
return:
description: number of frames in the GIF.
type: Number
+overloads:
+ - params: []
+ return:
+ description: number of frames in the GIF.
+ type: Number
+ - params: []
+ return:
+ description: number of frames in the GIF.
+ type: Number
+ - params: []
+ return:
+ description: number of frames in the GIF.
+ type: Number
+ - params: []
+ return:
+ description: number of frames in the GIF.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/pause.mdx b/src/content/reference/en/p5.Image/pause.mdx
index bd93a65513..ea16b04bbf 100644
--- a/src/content/reference/en/p5.Image/pause.mdx
+++ b/src/content/reference/en/p5.Image/pause.mdx
@@ -7,22 +7,115 @@ description: |
<p>Pauses an animated GIF.</p>
<p>The GIF can be resumed by calling
<a href="/reference/p5.Image/play/">img.play()</a>.</p>
-line: 1903
+line: 1841
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/nancy-liang-wind-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+ }
+
+ function draw() {
+ background(255);
+
+ // Display the image.
+ image(gif, 0, 0);
+ }
+ // Pause the GIF when the user presses the mouse.
+ function mousePressed() {
+ gif.pause();
+ }
+
+ // Play the GIF when the user presses the mouse.
+ function mouseReleased() {
+ gif.play();
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
let gif;
- // Load the image.
- function preload() {
- gif = loadImage('/assets/nancy-liang-wind-loop-forever.gif');
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/nancy-liang-wind-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
}
- function setup() {
+ function draw() {
+ background(255);
+
+ // Display the image.
+ image(gif, 0, 0);
+ }
+
+ // Pause the GIF when the user presses the mouse.
+ function mousePressed() {
+ gif.pause();
+ }
+
+ // Play the GIF when the user presses the mouse.
+ function mouseReleased() {
+ gif.play();
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/nancy-liang-wind-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+ }
+
+ function draw() {
+ background(255);
+
+ // Display the image.
+ image(gif, 0, 0);
+ }
+
+ // Pause the GIF when the user presses the mouse.
+ function mousePressed() {
+ gif.pause();
+ }
+
+ // Play the GIF when the user presses the mouse.
+ function mouseReleased() {
+ gif.play();
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/nancy-liang-wind-loop-forever.gif');
+
createCanvas(100, 100);
describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
@@ -47,6 +140,11 @@ example:
</code>
</div>
class: p5.Image
+overloads:
+ - params: []
+ - params: []
+ - params: []
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/pixelDensity.mdx b/src/content/reference/en/p5.Image/pixelDensity.mdx
index 4d4dec5025..728f30e591 100644
--- a/src/content/reference/en/p5.Image/pixelDensity.mdx
+++ b/src/content/reference/en/p5.Image/pixelDensity.mdx
@@ -9,22 +9,65 @@ description: |
<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: 299
+line: 47
isConstructor: false
itemtype: method
+example: []
class: p5.Image
-params:
- - name: density
- description: |
- <p>A scaling factor for the number of pixels per
- side</p>
- type: Number
- optional: true
return:
description: >-
The current density if called without arguments, or the instance for
chaining if setting density.
type: Number
+overloads:
+ - params:
+ - name: density
+ description: |-
+ A scaling factor for the number of pixels per
+ side
+ optional: 1
+ type: Number
+ return:
+ description: >-
+ The current density if called without arguments, or the instance for
+ chaining if setting density.
+ type: Number
+ - params:
+ - name: density
+ description: |-
+ A scaling factor for the number of pixels per
+ side
+ optional: 1
+ type: Number
+ return:
+ description: >-
+ The current density if called without arguments, or the instance for
+ chaining if setting density.
+ type: Number
+ - params:
+ - name: density
+ description: |-
+ A scaling factor for the number of pixels per
+ side
+ optional: 1
+ type: Number
+ return:
+ description: >-
+ The current density if called without arguments, or the instance for
+ chaining if setting density.
+ type: Number
+ - params:
+ - name: density
+ description: |-
+ A scaling factor for the number of pixels per
+ side
+ optional: 1
+ type: Number
+ return:
+ description: >-
+ The current density if called without arguments, or the instance for
+ chaining if setting density.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/pixels.mdx b/src/content/reference/en/p5.Image/pixels.mdx
index beb0679217..043f36fca7 100644
--- a/src/content/reference/en/p5.Image/pixels.mdx
+++ b/src/content/reference/en/p5.Image/pixels.mdx
@@ -45,12 +45,11 @@ description: >
be
called after any changes are made.</p>
-line: 198
+line: 2243
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
diff --git a/src/content/reference/en/p5.Image/play.mdx b/src/content/reference/en/p5.Image/play.mdx
index 21bdf48c36..81ac72b092 100644
--- a/src/content/reference/en/p5.Image/play.mdx
+++ b/src/content/reference/en/p5.Image/play.mdx
@@ -3,25 +3,112 @@ title: play
module: Image
submodule: Image
file: src/image/p5.Image.js
-description: |
- <p>Plays an animated GIF that was paused with
- <a href="/reference/p5.Image/pause/">img.pause()</a>.</p>
-line: 1858
+description: |-
+ Plays an animated GIF that was paused with
+ <a href="/reference/p5.Image/pause/">img.pause()</a>.
+line: 1796
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/nancy-liang-wind-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+ }
+
+ function draw() {
+ background(255);
+ image(gif, 0, 0);
+ }
+
+ // Pause the GIF when the user presses the mouse.
+ function mousePressed() {
+ gif.pause();
+ }
+ // Play the GIF when the user releases the mouse.
+ function mouseReleased() {
+ gif.play();
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
let gif;
- // Load the image.
- function preload() {
- gif = loadImage('/assets/nancy-liang-wind-loop-forever.gif');
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/nancy-liang-wind-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+ }
+
+ function draw() {
+ background(255);
+ image(gif, 0, 0);
+ }
+
+ // Pause the GIF when the user presses the mouse.
+ function mousePressed() {
+ gif.pause();
}
- function setup() {
+ // Play the GIF when the user releases the mouse.
+ function mouseReleased() {
+ gif.play();
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/nancy-liang-wind-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
+ }
+
+ function draw() {
+ background(255);
+ image(gif, 0, 0);
+ }
+
+ // Pause the GIF when the user presses the mouse.
+ function mousePressed() {
+ gif.pause();
+ }
+
+ // Play the GIF when the user releases the mouse.
+ function mouseReleased() {
+ gif.play();
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/nancy-liang-wind-loop-forever.gif');
+
createCanvas(100, 100);
describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
@@ -44,6 +131,11 @@ example:
</code>
</div>
class: p5.Image
+overloads:
+ - params: []
+ - params: []
+ - params: []
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/reset.mdx b/src/content/reference/en/p5.Image/reset.mdx
index 0fcaedd917..e61eb046e8 100644
--- a/src/content/reference/en/p5.Image/reset.mdx
+++ b/src/content/reference/en/p5.Image/reset.mdx
@@ -3,24 +3,101 @@ title: reset
module: Image
submodule: Image
file: src/image/p5.Image.js
-description: |
- <p>Restarts an animated GIF at its first frame.</p>
-line: 1668
+description: Restarts an animated GIF at its first frame.
+line: 1615
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-once.gif');
+
+ createCanvas(100, 100);
+
+ describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');
+ }
+
+ function draw() {
+ background(255);
+
+ // Display the image.
+ image(gif, 0, 0);
+ }
+
+ // Reset the GIF when the user presses the mouse.
+ function mousePressed() {
+ gif.reset();
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-once.gif');
+
+ createCanvas(100, 100);
+
+ describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');
+ }
+
+ function draw() {
+ background(255);
+
+ // Display the image.
+ image(gif, 0, 0);
+ }
+ // Reset the GIF when the user presses the mouse.
+ function mousePressed() {
+ gif.reset();
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
let gif;
- // Load the image.
- function preload() {
- gif = loadImage('/assets/arnott-wallace-wink-loop-once.gif');
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-once.gif');
+
+ createCanvas(100, 100);
+
+ describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');
}
- function setup() {
+ function draw() {
+ background(255);
+
+ // Display the image.
+ image(gif, 0, 0);
+ }
+
+ // Reset the GIF when the user presses the mouse.
+ function mousePressed() {
+ gif.reset();
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gif;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-once.gif');
+
createCanvas(100, 100);
describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');
@@ -40,6 +117,11 @@ example:
</code>
</div>
class: p5.Image
+overloads:
+ - params: []
+ - params: []
+ - params: []
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/resize.mdx b/src/content/reference/en/p5.Image/resize.mdx
index cd617ea78f..aa4033d2f5 100644
--- a/src/content/reference/en/p5.Image/resize.mdx
+++ b/src/content/reference/en/p5.Image/resize.mdx
@@ -12,22 +12,91 @@ description: >
<code>img.resize(50, 0)</code> on an image
that was 500 × 300 pixels will resize it to 50 × 30 pixels.</p>
-line: 837
+line: 771
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Resize the image.
+ img.resize(50, 100);
+
+ // Display the resized image.
+ 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;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Resize the image, keeping the aspect ratio.
+ img.resize(0, 30);
+
+ // Display the resized image.
+ 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;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Resize the image, keeping the aspect ratio.
+ img.resize(60, 0);
+
+ // Display the image.
+ 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;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -48,12 +117,82 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Resize the image, keeping the aspect ratio.
+ img.resize(0, 30);
+
+ // Display the resized image.
+ 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;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Resize the image, keeping the aspect ratio.
+ img.resize(60, 0);
+
+ // Display the image.
+ 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;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Resize the image.
+ img.resize(50, 100);
+
+ // Display the resized image.
+ 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;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -74,12 +213,82 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Resize the image, keeping the aspect ratio.
+ img.resize(60, 0);
+
+ // Display the image.
+ 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;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Resize the image.
+ img.resize(50, 100);
+
+ // Display the resized image.
+ 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;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ // Resize the image, keeping the aspect ratio.
+ img.resize(0, 30);
+
+ // Display the resized image.
+ 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;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -96,15 +305,35 @@ example:
</code>
</div>
class: p5.Image
-params:
- - name: width
- description: |
- <p>resized image width.</p>
- type: Number
- - name: height
- description: |
- <p>resized image height.</p>
- type: Number
+overloads:
+ - params:
+ - name: width
+ description: resized image width.
+ type: Number
+ - name: height
+ description: resized image height.
+ type: Number
+ - params:
+ - name: width
+ description: resized image width.
+ type: Number
+ - name: height
+ description: resized image height.
+ type: Number
+ - params:
+ - name: width
+ description: resized image width.
+ type: Number
+ - name: height
+ description: resized image height.
+ type: Number
+ - params:
+ - name: width
+ description: resized image width.
+ type: Number
+ - name: height
+ description: resized image height.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/save.mdx b/src/content/reference/en/p5.Image/save.mdx
index a1ffce0d38..b3a7585128 100644
--- a/src/content/reference/en/p5.Image/save.mdx
+++ b/src/content/reference/en/p5.Image/save.mdx
@@ -37,22 +37,106 @@ description: >
new
GIFs.</p>
-line: 1600
+line: 1546
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('An image of a mountain landscape. The image is downloaded when the user presses the "s", "j", or "p" key.');
+ }
+
+ // Save the image with different options when the user presses a key.
+ 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>
+ - |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('An image of a mountain landscape. The image is downloaded when the user presses the "s", "j", or "p" key.');
+ }
+ // Save the image with different options when the user presses a key.
+ 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>
+ - |-
<div>
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('An image of a mountain landscape. The image is downloaded when the user presses the "s", "j", or "p" key.');
}
- function setup() {
+ // Save the image with different options when the user presses a key.
+ 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>
+ - |-
+ <div>
+ <code>
+ let img;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
createCanvas(100, 100);
// Display the image.
@@ -74,17 +158,47 @@ example:
</code>
</div>
class: p5.Image
-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
+overloads:
+ - params:
+ - name: filename
+ description: filename. Defaults to 'untitled'.
+ type: String
+ - name: extension
+ description: |-
+ file extension, either 'png' or 'jpg'.
+ Defaults to 'png'.
+ optional: 1
+ type: String
+ - params:
+ - name: filename
+ description: filename. Defaults to 'untitled'.
+ type: String
+ - name: extension
+ description: |-
+ file extension, either 'png' or 'jpg'.
+ Defaults to 'png'.
+ optional: 1
+ type: String
+ - params:
+ - name: filename
+ description: filename. Defaults to 'untitled'.
+ type: String
+ - name: extension
+ description: |-
+ file extension, either 'png' or 'jpg'.
+ Defaults to 'png'.
+ optional: 1
+ type: String
+ - params:
+ - name: filename
+ description: filename. Defaults to 'untitled'.
+ type: String
+ - name: extension
+ description: |-
+ file extension, either 'png' or 'jpg'.
+ Defaults to 'png'.
+ optional: 1
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/set.mdx b/src/content/reference/en/p5.Image/set.mdx
index c32b5eb305..8aa5baf996 100644
--- a/src/content/reference/en/p5.Image/set.mdx
+++ b/src/content/reference/en/p5.Image/set.mdx
@@ -27,12 +27,231 @@ description: >
called
after using <code>img.set()</code> for changes to appear.</p>
-line: 697
+line: 613
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(100, 100);
+
+ // Set four pixels to black.
+ img.set(30, 20, 0);
+ img.set(85, 20, 0);
+ img.set(85, 75, 0);
+ img.set(30, 75, 0);
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('Four black dots arranged in a square drawn on a gray background.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(100, 100);
+
+ // Create a p5.Color object.
+ let black = color(0);
+
+ // Set four pixels to black.
+ img.set(30, 20, black);
+ img.set(85, 20, black);
+ img.set(85, 75, black);
+ img.set(30, 75, black);
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('Four black dots arranged in a square drawn on a gray background.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Draw a color gradient.
+ 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);
+ }
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ 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;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Create a p5.Image object.
+ let img2 = createImage(100, 100);
+
+ // Set the blank image's pixels using the landscape.
+ img2.set(0, 0, img);
+
+ // Display the second image.
+ image(img2, 0, 0);
+
+ describe('An image of a mountain landscape.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(100, 100);
+
+ // Set four pixels to black.
+ img.set(30, 20, 0);
+ img.set(85, 20, 0);
+ img.set(85, 75, 0);
+ img.set(30, 75, 0);
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('Four black dots arranged in a square drawn on a gray background.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(100, 100);
+
+ // Create a p5.Color object.
+ let black = color(0);
+
+ // Set four pixels to black.
+ img.set(30, 20, black);
+ img.set(85, 20, black);
+ img.set(85, 75, black);
+ img.set(30, 75, black);
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('Four black dots arranged in a square drawn on a gray background.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Draw a color gradient.
+ 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);
+ }
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ 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;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+ // Create a p5.Image object.
+ let img2 = createImage(100, 100);
+
+ // Set the blank image's pixels using the landscape.
+ img2.set(0, 0, img);
+
+ // Display the second image.
+ image(img2, 0, 0);
+
+ describe('An image of a mountain landscape.');
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
function setup() {
@@ -123,14 +342,122 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
+ // Create a p5.Image object.
+ let img2 = createImage(100, 100);
+
+ // Set the blank image's pixels using the landscape.
+ img2.set(0, 0, img);
+
+ // Display the second image.
+ image(img2, 0, 0);
+
+ describe('An image of a mountain landscape.');
}
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+ // Create a p5.Image object.
+ let img = createImage(100, 100);
+
+ // Set four pixels to black.
+ img.set(30, 20, 0);
+ img.set(85, 20, 0);
+ img.set(85, 75, 0);
+ img.set(30, 75, 0);
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('Four black dots arranged in a square drawn on a gray background.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
function setup() {
createCanvas(100, 100);
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(100, 100);
+
+ // Create a p5.Color object.
+ let black = color(0);
+
+ // Set four pixels to black.
+ img.set(30, 20, black);
+ img.set(85, 20, black);
+ img.set(85, 75, black);
+ img.set(30, 75, black);
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 0, 0);
+
+ describe('Four black dots arranged in a square drawn on a gray background.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Draw a color gradient.
+ 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);
+ }
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ 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;
+
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
+
+ createCanvas(100, 100);
+
// Create a p5.Image object.
let img2 = createImage(100, 100);
@@ -145,21 +472,59 @@ example:
</code>
</div>
class: p5.Image
-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'
+overloads:
+ - params:
+ - name: x
+ description: x-coordinate of the pixel.
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the pixel.
+ type: Number
+ - name: a
+ description: |-
+ grayscale value | pixel array |
+ <a href="#/p5.Color">p5.Color</a> object |
+ <a href="#/p5.Image">p5.Image</a> to copy.
+ type: 'Number|Number[]|Object'
+ - params:
+ - name: x
+ description: x-coordinate of the pixel.
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the pixel.
+ type: Number
+ - name: a
+ description: |-
+ grayscale value | pixel array |
+ <a href="#/p5.Color">p5.Color</a> object |
+ <a href="#/p5.Image">p5.Image</a> to copy.
+ type: 'Number|Number[]|Object'
+ - params:
+ - name: x
+ description: x-coordinate of the pixel.
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the pixel.
+ type: Number
+ - name: a
+ description: |-
+ grayscale value | pixel array |
+ <a href="#/p5.Color">p5.Color</a> object |
+ <a href="#/p5.Image">p5.Image</a> to copy.
+ type: 'Number|Number[]|Object'
+ - params:
+ - name: x
+ description: x-coordinate of the pixel.
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the pixel.
+ type: Number
+ - name: a
+ description: |-
+ grayscale value | pixel array |
+ <a href="#/p5.Color">p5.Color</a> object |
+ <a href="#/p5.Image">p5.Image</a> to copy.
+ type: 'Number|Number[]|Object'
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/setFrame.mdx b/src/content/reference/en/p5.Image/setFrame.mdx
index 03ae44301e..b1794efb3f 100644
--- a/src/content/reference/en/p5.Image/setFrame.mdx
+++ b/src/content/reference/en/p5.Image/setFrame.mdx
@@ -3,25 +3,126 @@ title: setFrame
module: Image
submodule: Image
file: src/image/p5.Image.js
-description: |
- <p>Sets the current frame in an animated GIF.</p>
-line: 1758
+description: Sets the current frame in an animated GIF.
+line: 1708
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ let gif;
+ let frameSlider;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ // Get the index of the last frame.
+ let maxFrame = gif.numFrames() - 1;
+
+ // Create a slider to control which frame is drawn.
+ frameSlider = createSlider(0, maxFrame);
+ frameSlider.position(10, 80);
+ frameSlider.size(80);
+
+ describe('A cartoon eye looks around when a slider is moved.');
+ }
+
+ function draw() {
+ // Get the slider's value.
+ let index = frameSlider.value();
+
+ // Set the GIF's frame.
+ gif.setFrame(index);
+
+ // Display the image.
+ image(gif, 0, 0);
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gif;
+ let frameSlider;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ // Get the index of the last frame.
+ let maxFrame = gif.numFrames() - 1;
+
+ // Create a slider to control which frame is drawn.
+ frameSlider = createSlider(0, maxFrame);
+ frameSlider.position(10, 80);
+ frameSlider.size(80);
+ describe('A cartoon eye looks around when a slider is moved.');
+ }
+
+ function draw() {
+ // Get the slider's value.
+ let index = frameSlider.value();
+
+ // Set the GIF's frame.
+ gif.setFrame(index);
+
+ // Display the image.
+ image(gif, 0, 0);
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
let gif;
let frameSlider;
- // Load the image.
- function preload() {
- gif = loadImage('/assets/arnott-wallace-eye-loop-forever.gif');
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-forever.gif');
+
+ createCanvas(100, 100);
+
+ // Get the index of the last frame.
+ let maxFrame = gif.numFrames() - 1;
+
+ // Create a slider to control which frame is drawn.
+ frameSlider = createSlider(0, maxFrame);
+ frameSlider.position(10, 80);
+ frameSlider.size(80);
+
+ describe('A cartoon eye looks around when a slider is moved.');
}
- function setup() {
+ function draw() {
+ // Get the slider's value.
+ let index = frameSlider.value();
+
+ // Set the GIF's frame.
+ gif.setFrame(index);
+
+ // Display the image.
+ image(gif, 0, 0);
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ let gif;
+ let frameSlider;
+
+ async function setup() {
+ // Load the image.
+ gif = await loadImage('/assets/arnott-wallace-wink-loop-forever.gif');
+
createCanvas(100, 100);
// Get the index of the last frame.
@@ -48,11 +149,23 @@ example:
</code>
</div>
class: p5.Image
-params:
- - name: index
- description: |
- <p>index of the frame to display.</p>
- type: Number
+overloads:
+ - params:
+ - name: index
+ description: index of the frame to display.
+ type: Number
+ - params:
+ - name: index
+ description: index of the frame to display.
+ type: Number
+ - params:
+ - name: index
+ description: index of the frame to display.
+ type: Number
+ - params:
+ - name: index
+ description: index of the frame to display.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/updatePixels.mdx b/src/content/reference/en/p5.Image/updatePixels.mdx
index 63c3aabee3..630edd6205 100644
--- a/src/content/reference/en/p5.Image/updatePixels.mdx
+++ b/src/content/reference/en/p5.Image/updatePixels.mdx
@@ -31,12 +31,212 @@ description: >
<code>img.updatePixels()</code>
will update the pixels in current frame.</p>
-line: 462
+line: 287
isConstructor: false
itemtype: method
example:
- |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Load the image's pixels.
+ img.loadPixels();
+
+ // Set the pixels to black.
+ for (let x = 0; x < img.width; x += 1) {
+ for (let y = 0; y < img.height; y += 1) {
+ img.set(x, y, 0);
+ }
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 17, 17);
+
+ describe('A black square drawn in the middle of a gray square.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Load the image's pixels.
+ img.loadPixels();
+
+ // Set the pixels to black.
+ for (let i = 0; i < img.pixels.length; 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;
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 17, 17);
+
+ describe('A black square drawn in the middle of a gray square.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Load the image's pixels.
+ img.loadPixels();
+
+ // Set the pixels to black.
+ for (let x = 0; x < img.width; x += 1) {
+ for (let y = 0; y < img.height; y += 1) {
+ img.set(x, y, 0);
+ }
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 17, 17);
+
+ describe('A black square drawn in the middle of a gray square.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Load the image's pixels.
+ img.loadPixels();
+
+ // Set the pixels to black.
+ for (let i = 0; i < img.pixels.length; 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;
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 17, 17);
+
+ describe('A black square drawn in the middle of a gray square.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Load the image's pixels.
+ img.loadPixels();
+
+ // Set the pixels to black.
+ for (let x = 0; x < img.width; x += 1) {
+ for (let y = 0; y < img.height; y += 1) {
+ img.set(x, y, 0);
+ }
+ }
+
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 17, 17);
+
+ describe('A black square drawn in the middle of a gray square.');
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create a p5.Image object.
+ let img = createImage(66, 66);
+
+ // Load the image's pixels.
+ img.loadPixels();
+
+ // Set the pixels to black.
+ for (let i = 0; i < img.pixels.length; 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;
+ }
+ // Update the image.
+ img.updatePixels();
+
+ // Display the image.
+ image(img, 17, 17);
+
+ describe('A black square drawn in the middle of a gray square.');
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
function setup() {
@@ -105,28 +305,74 @@ example:
</div>
class: p5.Image
overloads:
- - line: 462
- params:
+ - params:
+ - name: x
+ description: |-
+ x-coordinate of the upper-left corner
+ of the subsection to update.
+ type: Integer
+ - name: 'y'
+ description: |-
+ y-coordinate of the upper-left corner
+ of the subsection to update.
+ type: Integer
+ - name: w
+ description: width of the subsection to update.
+ type: Integer
+ - name: h
+ description: height of the subsection to update.
+ type: Integer
+ - params:
+ - name: x
+ description: |-
+ x-coordinate of the upper-left corner
+ of the subsection to update.
+ type: Integer
+ - name: 'y'
+ description: |-
+ y-coordinate of the upper-left corner
+ of the subsection to update.
+ type: Integer
+ - name: w
+ description: width of the subsection to update.
+ type: Integer
+ - name: h
+ description: height of the subsection to update.
+ type: Integer
+ - params:
+ - name: x
+ description: |-
+ x-coordinate of the upper-left corner
+ of the subsection to update.
+ type: Integer
+ - name: 'y'
+ description: |-
+ y-coordinate of the upper-left corner
+ of the subsection to update.
+ type: Integer
+ - name: w
+ description: width of the subsection to update.
+ type: Integer
+ - name: h
+ description: height of the subsection to update.
+ type: Integer
+ - params:
- name: x
- description: |
- <p>x-coordinate of the upper-left corner
- of the subsection to update.</p>
+ description: |-
+ x-coordinate of the upper-left corner
+ of the subsection to update.
type: Integer
- name: 'y'
- description: |
- <p>y-coordinate of the upper-left corner
- of the subsection to update.</p>
+ description: |-
+ y-coordinate of the upper-left corner
+ of the subsection to update.
type: Integer
- name: w
- description: |
- <p>width of the subsection to update.</p>
+ description: width of the subsection to update.
type: Integer
- name: h
- description: |
- <p>height of the subsection to update.</p>
+ description: height of the subsection to update.
type: Integer
- - line: 555
- params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Image/width.mdx b/src/content/reference/en/p5.Image/width.mdx
index 7c193d9a1e..03ccffdbcf 100644
--- a/src/content/reference/en/p5.Image/width.mdx
+++ b/src/content/reference/en/p5.Image/width.mdx
@@ -3,24 +3,20 @@ title: width
module: Image
submodule: Image
file: src/image/p5.Image.js
-description: |
- <p>The image's width in pixels.</p>
-line: 114
+description: The image's width in pixels.
+line: 2243
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -38,7 +34,7 @@ example:
</code>
</div>
class: p5.Image
-type: '{Number}'
+type: Number
---
diff --git a/src/content/reference/en/p5.MediaElement/addCue.mdx b/src/content/reference/en/p5.MediaElement/addCue.mdx
index b2e9554437..2a4c4e53ba 100644
--- a/src/content/reference/en/p5.MediaElement/addCue.mdx
+++ b/src/content/reference/en/p5.MediaElement/addCue.mdx
@@ -2,7 +2,7 @@
title: addCue
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: >
<p>Schedules a function to call when the audio/video reaches a specific time
@@ -28,12 +28,11 @@ description: >
useful for
removing the cue later.</p>
-line: 5263
+line: 1133
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -61,26 +60,30 @@ example:
</code>
</div>
class: p5.MediaElement
-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
return:
description: |-
id ID of this cue,
- useful for `media.removeCue(id)`.
+ useful for <code>media.removeCue(id)</code>.
type: Number
+overloads:
+ - params:
+ - name: time
+ description: cue time to run the callback function.
+ type: Number
+ - name: callback
+ description: function to call at the cue time.
+ type: Function
+ - name: value
+ description: |-
+ object to pass as the argument to
+ <code>callback</code>.
+ optional: 1
+ type: Object
+ return:
+ description: |-
+ id ID of this cue,
+ useful for <code>media.removeCue(id)</code>.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.MediaElement/autoplay.mdx b/src/content/reference/en/p5.MediaElement/autoplay.mdx
index 39aec8d0b3..4f6da3d187 100644
--- a/src/content/reference/en/p5.MediaElement/autoplay.mdx
+++ b/src/content/reference/en/p5.MediaElement/autoplay.mdx
@@ -2,7 +2,7 @@
title: autoplay
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: >
<p>Sets the audio/video to play once it's loaded.</p>
@@ -16,12 +16,11 @@ description: >
media will automatically play. If <code>false</code> is passed, as in
<code>media.autoPlay(false)</code>, it won't play automatically.</p>
-line: 4538
+line: 436
isConstructor: false
itemtype: method
example:
- |-
-
<div class='notest'>
<code>
let video;
@@ -70,12 +69,12 @@ example:
video.play();
}
class: p5.MediaElement
-params:
- - name: shouldAutoplay
- description: |
- <p>whether the element should autoplay.</p>
- type: Boolean
- optional: true
+overloads:
+ - params:
+ - name: shouldAutoplay
+ description: whether the element should autoplay.
+ optional: 1
+ type: Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5.MediaElement/clearCues.mdx b/src/content/reference/en/p5.MediaElement/clearCues.mdx
index 2ce0b5d895..85c5ad32ff 100644
--- a/src/content/reference/en/p5.MediaElement/clearCues.mdx
+++ b/src/content/reference/en/p5.MediaElement/clearCues.mdx
@@ -2,15 +2,13 @@
title: clearCues
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>Removes all functions scheduled with <code>media.addCue()</code>.</p>
-line: 5399
+file: src/dom/p5.MediaElement.js
+description: Removes all functions scheduled with <code>media.addCue()</code>.
+line: 1271
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let isChanging = true;
@@ -62,6 +60,8 @@ example:
</code>
</div>
class: p5.MediaElement
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.MediaElement/connect.mdx b/src/content/reference/en/p5.MediaElement/connect.mdx
index d42105374c..dee4827b3d 100644
--- a/src/content/reference/en/p5.MediaElement/connect.mdx
+++ b/src/content/reference/en/p5.MediaElement/connect.mdx
@@ -2,7 +2,7 @@
title: connect
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: >
<p>Sends the element's audio to an output.</p>
@@ -20,16 +20,18 @@ description: >
<p>Note: This method is meant to be used with the p5.sound.js addon
library.</p>
-line: 5095
+line: 935
isConstructor: false
itemtype: method
+example: []
class: p5.MediaElement
-params:
- - name: audioNode
- description: |
- <p>AudioNode from the Web Audio API,
- or an object from the p5.sound library</p>
- type: AudioNode|Object
+overloads:
+ - params:
+ - name: audioNode
+ description: |-
+ AudioNode from the Web Audio API,
+ or an object from the p5.sound library
+ type: AudioNode|Object
chainable: false
---
diff --git a/src/content/reference/en/p5.MediaElement/disconnect.mdx b/src/content/reference/en/p5.MediaElement/disconnect.mdx
index 4c1b24fcaa..d7b22208f2 100644
--- a/src/content/reference/en/p5.MediaElement/disconnect.mdx
+++ b/src/content/reference/en/p5.MediaElement/disconnect.mdx
@@ -2,15 +2,18 @@
title: disconnect
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: |
<p>Disconnect all Web Audio routing, including to the main output.</p>
<p>This is useful if you want to re-route the output through audio effects,
for example.</p>
-line: 5148
+line: 979
isConstructor: false
itemtype: method
+example: []
class: p5.MediaElement
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.MediaElement/duration.mdx b/src/content/reference/en/p5.MediaElement/duration.mdx
index 8321bf3f45..4b90d4b2aa 100644
--- a/src/content/reference/en/p5.MediaElement/duration.mdx
+++ b/src/content/reference/en/p5.MediaElement/duration.mdx
@@ -2,15 +2,13 @@
title: duration
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>Returns the audio/video's duration in seconds.</p>
-line: 4868
+file: src/dom/p5.MediaElement.js
+description: Returns the audio/video's duration in seconds.
+line: 740
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let dragon;
@@ -51,6 +49,11 @@ class: p5.MediaElement
return:
description: duration (in seconds).
type: Number
+overloads:
+ - params: []
+ return:
+ description: duration (in seconds).
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.MediaElement/hideControls.mdx b/src/content/reference/en/p5.MediaElement/hideControls.mdx
index 3de6211a62..9cf52a6e31 100644
--- a/src/content/reference/en/p5.MediaElement/hideControls.mdx
+++ b/src/content/reference/en/p5.MediaElement/hideControls.mdx
@@ -2,20 +2,19 @@
title: hideControls
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: >
- <p>Hide the default
+file: src/dom/p5.MediaElement.js
+description: >-
+ Hide the default
<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/"
target="_blank">HTMLMediaElement</a>
- controls.</p>
-line: 5207
+ controls.
+line: 1078
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let dragon;
@@ -60,6 +59,8 @@ example:
</code>
</div>
class: p5.MediaElement
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.MediaElement/loop.mdx b/src/content/reference/en/p5.MediaElement/loop.mdx
index 83102dfcbd..04f3806577 100644
--- a/src/content/reference/en/p5.MediaElement/loop.mdx
+++ b/src/content/reference/en/p5.MediaElement/loop.mdx
@@ -2,15 +2,13 @@
title: loop
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>Plays the audio/video repeatedly in a loop.</p>
-line: 4400
+file: src/dom/p5.MediaElement.js
+description: Plays the audio/video repeatedly in a loop.
+line: 292
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let beat;
@@ -57,6 +55,8 @@ example:
</code>
</div>
class: p5.MediaElement
+overloads:
+ - params: []
chainable: true
---
diff --git a/src/content/reference/en/p5.MediaElement/noLoop.mdx b/src/content/reference/en/p5.MediaElement/noLoop.mdx
index 0440f08b42..e51c4f9ee6 100644
--- a/src/content/reference/en/p5.MediaElement/noLoop.mdx
+++ b/src/content/reference/en/p5.MediaElement/noLoop.mdx
@@ -2,16 +2,15 @@
title: noLoop
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: |
<p>Stops the audio/video from playing in a loop.</p>
<p>The media will stop when it finishes playing.</p>
-line: 4458
+line: 351
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let beat;
@@ -58,6 +57,8 @@ example:
</code>
</div>
class: p5.MediaElement
+overloads:
+ - params: []
chainable: true
---
diff --git a/src/content/reference/en/p5.MediaElement/onended.mdx b/src/content/reference/en/p5.MediaElement/onended.mdx
index 6319770038..ac49837ae5 100644
--- a/src/content/reference/en/p5.MediaElement/onended.mdx
+++ b/src/content/reference/en/p5.MediaElement/onended.mdx
@@ -2,17 +2,16 @@
title: onended
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: |
<p>Calls a function when the audio/video reaches the end of its playback.</p>
<p>The element is passed as an argument to the callback function.</p>
<p>Note: The function won't be called if the media is looping.</p>
-line: 5024
+line: 913
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let beat;
@@ -63,13 +62,14 @@ example:
</code>
</div>
class: p5.MediaElement
-params:
- - name: callback
- description: |
- <p>function to call when playback ends.
- The <code>p5.MediaElement</code> is passed as
- the argument.</p>
- type: Function
+overloads:
+ - params:
+ - name: callback
+ description: |-
+ function to call when playback ends.
+ The <code>p5.MediaElement</code> is passed as
+ the argument.
+ type: Function
chainable: true
---
diff --git a/src/content/reference/en/p5.MediaElement/pause.mdx b/src/content/reference/en/p5.MediaElement/pause.mdx
index 2a301c64dd..8ea2d44465 100644
--- a/src/content/reference/en/p5.MediaElement/pause.mdx
+++ b/src/content/reference/en/p5.MediaElement/pause.mdx
@@ -2,18 +2,17 @@
title: pause
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: >
<p>Pauses a media element.</p>
<p>Calling <code>media.play()</code> will resume playing audio/video from the
moment it paused.</p>
-line: 4340
+line: 235
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let beat;
@@ -60,6 +59,8 @@ example:
</code>
</div>
class: p5.MediaElement
+overloads:
+ - params: []
chainable: true
---
diff --git a/src/content/reference/en/p5.MediaElement/play.mdx b/src/content/reference/en/p5.MediaElement/play.mdx
index 2824bd8873..fb26c85b83 100644
--- a/src/content/reference/en/p5.MediaElement/play.mdx
+++ b/src/content/reference/en/p5.MediaElement/play.mdx
@@ -2,15 +2,13 @@
title: play
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>Plays audio or video from a media element.</p>
-line: 4215
+file: src/dom/p5.MediaElement.js
+description: Plays audio or video from a media element.
+line: 93
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let beat;
@@ -40,6 +38,8 @@ example:
</code>
</div>
class: p5.MediaElement
+overloads:
+ - params: []
chainable: true
---
diff --git a/src/content/reference/en/p5.MediaElement/removeCue.mdx b/src/content/reference/en/p5.MediaElement/removeCue.mdx
index d815e2de3d..7fd891ace1 100644
--- a/src/content/reference/en/p5.MediaElement/removeCue.mdx
+++ b/src/content/reference/en/p5.MediaElement/removeCue.mdx
@@ -2,15 +2,13 @@
title: removeCue
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: |
- <p>Removes a callback based on its ID.</p>
-line: 5328
+file: src/dom/p5.MediaElement.js
+description: Removes a callback based on its ID.
+line: 1203
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let lavenderID;
@@ -62,11 +60,11 @@ example:
</code>
</div>
class: p5.MediaElement
-params:
- - name: id
- description: |
- <p>ID of the cue, created by <code>media.addCue()</code>.</p>
- type: Number
+overloads:
+ - params:
+ - name: id
+ description: 'ID of the cue, created by <code>media.addCue()</code>.'
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.MediaElement/showControls.mdx b/src/content/reference/en/p5.MediaElement/showControls.mdx
index be420c91a8..77e1942f45 100644
--- a/src/content/reference/en/p5.MediaElement/showControls.mdx
+++ b/src/content/reference/en/p5.MediaElement/showControls.mdx
@@ -2,7 +2,7 @@
title: showControls
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: >
<p>Show the default
@@ -12,12 +12,14 @@ description: >
controls.</p>
<p>Note: The controls vary between web browsers.</p>
-line: 5166
+line: 1022
isConstructor: false
itemtype: method
example:
- - "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background('cornflowerblue');\n\n // Style the text.\n textAlign(CENTER);\n textSize(50);\n\n // Display a dragon.\n text('\U0001F409', 50, 50);\n\n // Create a p5.MediaElement using createAudio().\n let dragon = createAudio('/assets/lucky_dragons.mp3');\n\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>"
+ - "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background('cornflowerblue');\n\n // Style the text.\n textAlign(CENTER);\n textSize(50);\n\n // Display a dragon.\n text('\U0001F409', 50, 50);\n\n // Create a p5.MediaElement using createAudio().\n let dragon = createAudio('/assets/lucky_dragons.mp3');\n\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>"
class: p5.MediaElement
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.MediaElement/speed.mdx b/src/content/reference/en/p5.MediaElement/speed.mdx
index 409a49b78b..80cd6c14f2 100644
--- a/src/content/reference/en/p5.MediaElement/speed.mdx
+++ b/src/content/reference/en/p5.MediaElement/speed.mdx
@@ -2,7 +2,7 @@
title: speed
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: >
<p>Sets the audio/video playback speed.</p>
@@ -21,12 +21,11 @@ description: >
<p>Note: Not all browsers support backward playback. Even if they do,
playback might not be smooth.</p>
-line: 4691
+line: 585
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let dragon;
@@ -71,19 +70,15 @@ return:
description: current playback speed.
type: Number
overloads:
- - line: 4691
- params: []
+ - params: []
return:
description: current playback speed.
type: Number
- - line: 4749
- params:
+ - params:
- name: speed
- description: |
- <p>speed multiplier for playback.</p>
+ description: speed multiplier for playback.
type: Number
- chainable: 1
-chainable: false
+chainable: true
---
diff --git a/src/content/reference/en/p5.MediaElement/src.mdx b/src/content/reference/en/p5.MediaElement/src.mdx
index 09c6ebedbc..f748e298cd 100644
--- a/src/content/reference/en/p5.MediaElement/src.mdx
+++ b/src/content/reference/en/p5.MediaElement/src.mdx
@@ -2,15 +2,13 @@
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: 4158
+file: src/dom/p5.MediaElement.js
+description: Path to the media element's source as a string.
+line: 1782
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let beat;
diff --git a/src/content/reference/en/p5.MediaElement/stop.mdx b/src/content/reference/en/p5.MediaElement/stop.mdx
index 1e248ada7b..1cf93f0064 100644
--- a/src/content/reference/en/p5.MediaElement/stop.mdx
+++ b/src/content/reference/en/p5.MediaElement/stop.mdx
@@ -2,18 +2,17 @@
title: stop
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: >
<p>Stops a media element and sets its current time to 0.</p>
<p>Calling <code>media.play()</code> will restart playing audio/video from the
beginning.</p>
-line: 4281
+line: 175
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let beat;
@@ -58,6 +57,8 @@ example:
</code>
</div>
class: p5.MediaElement
+overloads:
+ - params: []
chainable: true
---
diff --git a/src/content/reference/en/p5.MediaElement/time.mdx b/src/content/reference/en/p5.MediaElement/time.mdx
index c401e41a02..2bdb74c521 100644
--- a/src/content/reference/en/p5.MediaElement/time.mdx
+++ b/src/content/reference/en/p5.MediaElement/time.mdx
@@ -2,7 +2,7 @@
title: time
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: >
<p>Sets the media element's playback time.</p>
@@ -17,12 +17,11 @@ description: >
the audio/video has played.</p>
<p>Note: Time resets to 0 when looping media restarts.</p>
-line: 4766
+line: 688
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let dragon;
@@ -100,19 +99,15 @@ return:
description: current time (in seconds).
type: Number
overloads:
- - line: 4766
- params: []
+ - params: []
return:
description: current time (in seconds).
type: Number
- - line: 4854
- params:
+ - params:
- name: time
- description: |
- <p>time to jump to (in seconds).</p>
+ description: time to jump to (in seconds).
type: Number
- chainable: 1
-chainable: false
+chainable: true
---
diff --git a/src/content/reference/en/p5.MediaElement/volume.mdx b/src/content/reference/en/p5.MediaElement/volume.mdx
index fb9575e340..1cfc73485b 100644
--- a/src/content/reference/en/p5.MediaElement/volume.mdx
+++ b/src/content/reference/en/p5.MediaElement/volume.mdx
@@ -2,7 +2,7 @@
title: volume
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: >
<p>Sets the audio/video volume.</p>
@@ -18,12 +18,11 @@ description: >
<code>media.volume(0.5)</code>
sets the volume to half of its maximum.</p>
-line: 4623
+line: 517
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let dragon;
@@ -69,19 +68,15 @@ return:
description: current volume.
type: Number
overloads:
- - line: 4623
- params: []
+ - params: []
return:
description: current volume.
type: Number
- - line: 4678
- params:
+ - params:
- name: val
- description: |
- <p>volume between 0.0 and 1.0.</p>
+ description: volume between 0.0 and 1.0.
type: Number
- chainable: 1
-chainable: false
+chainable: true
---
diff --git a/src/content/reference/en/p5.MonoSynth/amp.mdx b/src/content/reference/en/p5.MonoSynth/amp.mdx
deleted file mode 100644
index aaef17f9b4..0000000000
--- a/src/content/reference/en/p5.MonoSynth/amp.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: amp
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>MonoSynth amp</p>
-line: 11544
-isConstructor: false
-itemtype: method
-class: p5.MonoSynth
-params:
- - name: vol
- description: |
- <p>desired volume</p>
- type: Number
- - name: rampTime
- description: |
- <p>Time to reach new volume</p>
- type: Number
- optional: true
-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
deleted file mode 100644
index 6d040e9792..0000000000
--- a/src/content/reference/en/p5.MonoSynth/attack.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: attack
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Getters and Setters</p>
-line: 11322
-isConstructor: false
-itemtype: property
-class: p5.MonoSynth
-type: Number
----
-
-
-# attack
diff --git a/src/content/reference/en/p5.MonoSynth/connect.mdx b/src/content/reference/en/p5.MonoSynth/connect.mdx
deleted file mode 100644
index 9362f66bab..0000000000
--- a/src/content/reference/en/p5.MonoSynth/connect.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.MonoSynth
-params:
- - name: unit
- description: |
- <p>A p5.sound or Web Audio object</p>
- type: Object
-chainable: false
----
-
-
-# connect
diff --git a/src/content/reference/en/p5.MonoSynth/decay.mdx b/src/content/reference/en/p5.MonoSynth/decay.mdx
deleted file mode 100644
index ab579078f5..0000000000
--- a/src/content/reference/en/p5.MonoSynth/decay.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: decay
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: ''
-line: 11328
-isConstructor: false
-itemtype: property
-class: p5.MonoSynth
-type: Number
----
-
-
-# decay
diff --git a/src/content/reference/en/p5.MonoSynth/disconnect.mdx b/src/content/reference/en/p5.MonoSynth/disconnect.mdx
deleted file mode 100644
index 45cce86306..0000000000
--- a/src/content/reference/en/p5.MonoSynth/disconnect.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: disconnect
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Disconnect all outputs</p>
-line: 11578
-isConstructor: false
-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
deleted file mode 100644
index f6647dd1fb..0000000000
--- a/src/content/reference/en/p5.MonoSynth/dispose.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index 5ac2a4e0ad..0000000000
--- a/src/content/reference/en/p5.MonoSynth/play.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.MonoSynth
-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
-chainable: false
----
-
-
-# play
diff --git a/src/content/reference/en/p5.MonoSynth/release.mdx b/src/content/reference/en/p5.MonoSynth/release.mdx
deleted file mode 100644
index c823cf7687..0000000000
--- a/src/content/reference/en/p5.MonoSynth/release.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: release
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: ''
-line: 11338
-isConstructor: false
-itemtype: property
-class: p5.MonoSynth
-type: Number
----
-
-
-# release
diff --git a/src/content/reference/en/p5.MonoSynth/setADSR.mdx b/src/content/reference/en/p5.MonoSynth/setADSR.mdx
deleted file mode 100644
index 16c63bfe65..0000000000
--- a/src/content/reference/en/p5.MonoSynth/setADSR.mdx
+++ /dev/null
@@ -1,52 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.MonoSynth
-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
-chainable: false
----
-
-
-# setADSR
diff --git a/src/content/reference/en/p5.MonoSynth/sustain.mdx b/src/content/reference/en/p5.MonoSynth/sustain.mdx
deleted file mode 100644
index 33f641aa6a..0000000000
--- a/src/content/reference/en/p5.MonoSynth/sustain.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: sustain
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: ''
-line: 11333
-isConstructor: false
-itemtype: property
-class: p5.MonoSynth
-type: Number
----
-
-
-# sustain
diff --git a/src/content/reference/en/p5.MonoSynth/triggerAttack.mdx b/src/content/reference/en/p5.MonoSynth/triggerAttack.mdx
deleted file mode 100644
index 15e1de3148..0000000000
--- a/src/content/reference/en/p5.MonoSynth/triggerAttack.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.MonoSynth
-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
-chainable: false
----
-
-
-# triggerAttack
diff --git a/src/content/reference/en/p5.MonoSynth/triggerRelease.mdx b/src/content/reference/en/p5.MonoSynth/triggerRelease.mdx
deleted file mode 100644
index 0ebf6b2afb..0000000000
--- a/src/content/reference/en/p5.MonoSynth/triggerRelease.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.MonoSynth
-params:
- - name: secondsFromNow
- description: |
- <p>time to trigger the release</p>
- type: Number
-chainable: false
----
-
-
-# triggerRelease
diff --git a/src/content/reference/en/p5.Noise/amp.mdx b/src/content/reference/en/p5.Noise/amp.mdx
new file mode 100644
index 0000000000..7e833160aa
--- /dev/null
+++ b/src/content/reference/en/p5.Noise/amp.mdx
@@ -0,0 +1,21 @@
+---
+title: amp
+module: p5.sound
+submodule: p5.sound
+file: src/Noise.js
+description: Adjust the amplitude of the noise source.
+line: 66
+isConstructor: false
+itemtype: method
+class: p5.Noise
+params:
+ - name: amplitude
+ description: >-
+ Set the amplitude between 0 and 1.0. Or, pass in an object such as an
+ oscillator to modulate amplitude with an audio signal.
+ type: Number
+chainable: false
+---
+
+
+# amp
diff --git a/src/content/reference/en/p5.Noise/setType.mdx b/src/content/reference/en/p5.Noise/setType.mdx
deleted file mode 100644
index d7e92a0843..0000000000
--- a/src/content/reference/en/p5.Noise/setType.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Noise
-params:
- - name: type
- description: |
- <p>'white', 'pink' or 'brown'</p>
- type: String
- optional: true
-chainable: false
----
-
-
-# setType
diff --git a/src/content/reference/en/p5.Score/start.mdx b/src/content/reference/en/p5.Noise/start.mdx
similarity index 53%
rename from src/content/reference/en/p5.Score/start.mdx
rename to src/content/reference/en/p5.Noise/start.mdx
index 7ebda41e62..5367a9f7cd 100644
--- a/src/content/reference/en/p5.Score/start.mdx
+++ b/src/content/reference/en/p5.Noise/start.mdx
@@ -2,13 +2,12 @@
title: start
module: p5.sound
submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Start playback of the score.</p>
-line: 9542
+file: src/Noise.js
+description: Starts the noise source.
+line: 81
isConstructor: false
itemtype: method
-class: p5.Score
+class: p5.Noise
chainable: false
---
diff --git a/src/content/reference/en/p5.Score/stop.mdx b/src/content/reference/en/p5.Noise/stop.mdx
similarity index 52%
rename from src/content/reference/en/p5.Score/stop.mdx
rename to src/content/reference/en/p5.Noise/stop.mdx
index bf449bcda1..b21c3599f2 100644
--- a/src/content/reference/en/p5.Score/stop.mdx
+++ b/src/content/reference/en/p5.Noise/stop.mdx
@@ -2,13 +2,12 @@
title: stop
module: p5.sound
submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Stop playback of the score.</p>
-line: 9555
+file: src/Noise.js
+description: Stops the noise source.
+line: 90
isConstructor: false
itemtype: method
-class: p5.Score
+class: p5.Noise
chainable: false
---
diff --git a/src/content/reference/en/p5.Noise/type.mdx b/src/content/reference/en/p5.Noise/type.mdx
new file mode 100644
index 0000000000..9c71eff2ca
--- /dev/null
+++ b/src/content/reference/en/p5.Noise/type.mdx
@@ -0,0 +1,19 @@
+---
+title: type
+module: p5.sound
+submodule: p5.sound
+file: src/Noise.js
+description: ''
+line: 57
+isConstructor: false
+itemtype: method
+class: p5.Noise
+params:
+ - name: type
+ description: '- the type of noise (white, pink, brown)'
+ type: String
+chainable: false
+---
+
+
+# type
diff --git a/src/content/reference/en/p5.NumberDict/add.mdx b/src/content/reference/en/p5.NumberDict/add.mdx
deleted file mode 100644
index 3f08fbd88f..0000000000
--- a/src/content/reference/en/p5.NumberDict/add.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.NumberDict
-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
-chainable: false
----
-
-
-# add
diff --git a/src/content/reference/en/p5.NumberDict/div.mdx b/src/content/reference/en/p5.NumberDict/div.mdx
deleted file mode 100644
index 3e79826efe..0000000000
--- a/src/content/reference/en/p5.NumberDict/div.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.NumberDict
-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
-chainable: false
----
-
-
-# div
diff --git a/src/content/reference/en/p5.NumberDict/maxKey.mdx b/src/content/reference/en/p5.NumberDict/maxKey.mdx
deleted file mode 100644
index 629d9282c2..0000000000
--- a/src/content/reference/en/p5.NumberDict/maxKey.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.NumberDict
-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
deleted file mode 100644
index e43974aadb..0000000000
--- a/src/content/reference/en/p5.NumberDict/maxValue.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.NumberDict
-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
deleted file mode 100644
index c25f2299d0..0000000000
--- a/src/content/reference/en/p5.NumberDict/minKey.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.NumberDict
-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
deleted file mode 100644
index eab31d7977..0000000000
--- a/src/content/reference/en/p5.NumberDict/minValue.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.NumberDict
-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
deleted file mode 100644
index f304f34c5d..0000000000
--- a/src/content/reference/en/p5.NumberDict/mult.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.NumberDict
-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
-chainable: false
----
-
-
-# mult
diff --git a/src/content/reference/en/p5.NumberDict/sub.mdx b/src/content/reference/en/p5.NumberDict/sub.mdx
deleted file mode 100644
index 84e6e9d687..0000000000
--- a/src/content/reference/en/p5.NumberDict/sub.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.NumberDict
-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
-chainable: false
----
-
-
-# sub
diff --git a/src/content/reference/en/p5.Oscillator/add.mdx b/src/content/reference/en/p5.Oscillator/add.mdx
deleted file mode 100644
index 113a96816c..0000000000
--- a/src/content/reference/en/p5.Oscillator/add.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Oscillator
-params:
- - name: number
- description: |
- <p>Constant number to add</p>
- type: Number
-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
index 5bbfb45878..8506ac6232 100644
--- a/src/content/reference/en/p5.Oscillator/amp.mdx
+++ b/src/content/reference/en/p5.Oscillator/amp.mdx
@@ -2,39 +2,55 @@
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
+file: src/Oscillator.js
+description: Adjust the amplitude of the Oscillator.
+line: 117
isConstructor: false
itemtype: method
+example:
+ - |-
+
+ <div>
+ <code>
+ let osc, lfo;
+ let cnv;
+
+ function setup() {
+ describe("a sketch that demonstrates amplitude modulation with an LFO and sine tone");
+ cnv = createCanvas(100, 100);
+ cnv.mousePressed(startSound);
+ textAlign(CENTER);
+ textWrap(WORD);
+ textSize(10);
+
+ osc = new p5.Oscillator('sine');
+ lfo = new p5.Oscillator(1);
+ lfo.disconnect();
+ osc.amp(lfo);
+ }
+
+ function startSound() {
+ lfo.start();
+ osc.start();
+ }
+
+ function draw(){
+ background(220);
+ text('click to play sound', 0, height/2 - 20, 100);
+ text('control lfo with mouseX position', 0, height/2, 100);
+
+ let freq = map(mouseX, 0, width, 0, 10);
+ lfo.freq(freq);
+ }
+ </code>
+ </div>
class: p5.Oscillator
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>
+ - name: amplitude
+ description: >-
+ Set the amplitude between 0 and 1.0. Or, pass in an object such as an
+ oscillator to modulate amplitude with an audio signal.
type: Number
- optional: true
-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
---
diff --git a/src/content/reference/en/p5.Oscillator/connect.mdx b/src/content/reference/en/p5.Oscillator/connect.mdx
deleted file mode 100644
index 4e6cb842a1..0000000000
--- a/src/content/reference/en/p5.Oscillator/connect.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Oscillator
-params:
- - name: unit
- description: |
- <p>A p5.sound or Web Audio object</p>
- type: Object
-chainable: false
----
-
-
-# connect
diff --git a/src/content/reference/en/p5.Oscillator/disconnect.mdx b/src/content/reference/en/p5.Oscillator/disconnect.mdx
deleted file mode 100644
index 56d3ee5dc8..0000000000
--- a/src/content/reference/en/p5.Oscillator/disconnect.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: disconnect
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Disconnect all outputs</p>
-line: 4420
-isConstructor: false
-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
index f95058121f..77fb69808f 100644
--- a/src/content/reference/en/p5.Oscillator/freq.mdx
+++ b/src/content/reference/en/p5.Oscillator/freq.mdx
@@ -2,62 +2,20 @@
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
+file: src/Oscillator.js
+description: Adjusts the frequency of the oscillator.
+line: 84
isConstructor: false
itemtype: method
-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>
class: p5.Oscillator
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>
+ - name: frequency
+ description: frequency of the oscillator in Hz (cycles per second).
type: Number
- optional: true
- - name: timeFromNow
- description: |
- <p>Schedule this event to happen
- at x seconds from now</p>
+ - name: rampTime
+ description: the time in seconds it takes to ramp to the new frequency (defaults to 0).
type: Number
optional: true
-return:
- description: |-
- Frequency If no value is provided,
- returns the Web Audio API
- AudioParam that controls
- this oscillator's frequency
- type: AudioParam
chainable: false
---
diff --git a/src/content/reference/en/p5.Oscillator/getAmp.mdx b/src/content/reference/en/p5.Oscillator/getAmp.mdx
deleted file mode 100644
index bead971918..0000000000
--- a/src/content/reference/en/p5.Oscillator/getAmp.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index b02e1cf74e..0000000000
--- a/src/content/reference/en/p5.Oscillator/getFreq.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index 3d639ea066..0000000000
--- a/src/content/reference/en/p5.Oscillator/getPan.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index 6102174434..0000000000
--- a/src/content/reference/en/p5.Oscillator/getType.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index ea6cbd28cc..0000000000
--- a/src/content/reference/en/p5.Oscillator/mult.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Oscillator
-params:
- - name: number
- description: |
- <p>Constant number to multiply</p>
- type: Number
-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
deleted file mode 100644
index 87d7d09d41..0000000000
--- a/src/content/reference/en/p5.Oscillator/pan.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Oscillator
-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
-chainable: false
----
-
-
-# pan
diff --git a/src/content/reference/en/p5.Oscillator/phase.mdx b/src/content/reference/en/p5.Oscillator/phase.mdx
index 618c6eee0a..af992f7721 100644
--- a/src/content/reference/en/p5.Oscillator/phase.mdx
+++ b/src/content/reference/en/p5.Oscillator/phase.mdx
@@ -2,19 +2,15 @@
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
+file: src/Oscillator.js
+description: Adjusts the phase of the oscillator.
+line: 95
isConstructor: false
itemtype: method
class: p5.Oscillator
params:
- name: phase
- description: |
- <p>float between 0.0 and 1.0</p>
+ description: phase of the oscillator in degrees (0-360).
type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Oscillator/scale.mdx b/src/content/reference/en/p5.Oscillator/scale.mdx
deleted file mode 100644
index 9817841043..0000000000
--- a/src/content/reference/en/p5.Oscillator/scale.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Oscillator
-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
-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
index 32766a2eb5..696d1dfead 100644
--- a/src/content/reference/en/p5.Oscillator/setType.mdx
+++ b/src/content/reference/en/p5.Oscillator/setType.mdx
@@ -2,17 +2,18 @@
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
+file: src/Oscillator.js
+description: Sets the type of the oscillator.
+line: 105
isConstructor: false
itemtype: method
class: p5.Oscillator
params:
- name: type
- description: |
- <p>'sine', 'triangle', 'sawtooth' or 'square'.</p>
+ description: |-
+ type of the oscillator. Options:
+ 'sine' (default), 'triangle',
+ 'sawtooth', 'square'
type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.Oscillator/start.mdx b/src/content/reference/en/p5.Oscillator/start.mdx
index 82301ab394..fd0528837c 100644
--- a/src/content/reference/en/p5.Oscillator/start.mdx
+++ b/src/content/reference/en/p5.Oscillator/start.mdx
@@ -2,27 +2,30 @@
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
+file: src/Oscillator.js
+description: Starts the oscillator. Usually from user gesture.
+line: 169
isConstructor: false
itemtype: method
+example:
+ - |-
+
+ <div>
+ <code>
+ let osc;
+
+ function setup() {
+ let cnv = createCanvas(100, 100);
+ cnv.mousePressed(startOscillator);
+ osc = new p5.Oscillator();
+ }
+
+ function startOscillator() {
+ osc.start();
+ }
+ </code>
+ </div>
class: p5.Oscillator
-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
chainable: false
---
diff --git a/src/content/reference/en/p5.Oscillator/stop.mdx b/src/content/reference/en/p5.Oscillator/stop.mdx
index 9b9d0631ba..ab28dfb6b4 100644
--- a/src/content/reference/en/p5.Oscillator/stop.mdx
+++ b/src/content/reference/en/p5.Oscillator/stop.mdx
@@ -2,20 +2,12 @@
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
+file: src/Oscillator.js
+description: Stops the oscillator.
+line: 194
isConstructor: false
itemtype: method
class: p5.Oscillator
-params:
- - name: secondsFromNow
- description: |
- <p>Time, in seconds from now.</p>
- type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Panner/pan.mdx b/src/content/reference/en/p5.Panner/pan.mdx
new file mode 100644
index 0000000000..516d1047a7
--- /dev/null
+++ b/src/content/reference/en/p5.Panner/pan.mdx
@@ -0,0 +1,21 @@
+---
+title: pan
+module: p5.sound
+submodule: p5.sound
+file: src/Panner.js
+description: Pan a sound source left or right.
+line: 53
+isConstructor: false
+itemtype: method
+class: p5.Panner
+params:
+ - name: panAmount
+ description: >-
+ Sets the pan position of the sound source. Can be a value between -1 and 1
+ or an audio rate signal such as an LFO.
+ type: 'Number, Object'
+chainable: false
+---
+
+
+# pan
diff --git a/src/content/reference/en/p5.Panner3D/maxDist.mdx b/src/content/reference/en/p5.Panner3D/maxDist.mdx
index bab86d00eb..62fca1cb65 100644
--- a/src/content/reference/en/p5.Panner3D/maxDist.mdx
+++ b/src/content/reference/en/p5.Panner3D/maxDist.mdx
@@ -2,20 +2,16 @@
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
+file: src/Panner3D.js
+description: Set the maximum distance of the panner.
+line: 152
isConstructor: false
itemtype: method
class: p5.Panner3D
params:
- - name: maxDistance
- description: ''
+ - name: distance
+ description: the maximum distance that the sound source can be heard from.
type: Number
-return:
- description: updated value
- type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Panner3D/orient.mdx b/src/content/reference/en/p5.Panner3D/orient.mdx
deleted file mode 100644
index 45f87bc234..0000000000
--- a/src/content/reference/en/p5.Panner3D/orient.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Panner3D
-params:
- - name: xVal
- description: ''
- type: Number
- - name: yVal
- description: ''
- type: Number
- - name: zVal
- description: ''
- type: Number
- - name: time
- description: ''
- type: Number
-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
deleted file mode 100644
index 87655abbb8..0000000000
--- a/src/content/reference/en/p5.Panner3D/orientX.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index 619e4f6a30..0000000000
--- a/src/content/reference/en/p5.Panner3D/orientY.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index b16ecb8aa9..0000000000
--- a/src/content/reference/en/p5.Panner3D/orientZ.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index dffe350c61..0000000000
--- a/src/content/reference/en/p5.Panner3D/panner.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-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"</br></br></p>
-line: 7629
-isConstructor: false
-itemtype: property
-class: p5.Panner3D
-type: AudioNode
----
-
-
-# panner
diff --git a/src/content/reference/en/p5.Panner3D/positionX.mdx b/src/content/reference/en/p5.Panner3D/positionX.mdx
index dd250e8ad3..2e6c53664d 100644
--- a/src/content/reference/en/p5.Panner3D/positionX.mdx
+++ b/src/content/reference/en/p5.Panner3D/positionX.mdx
@@ -2,16 +2,16 @@
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
+file: src/Panner3D.js
+description: Set the X position of the sound source.
+line: 172
isConstructor: false
itemtype: method
class: p5.Panner3D
-return:
- description: updated coordinate value
- type: Number
+params:
+ - name: positionX
+ description: the x position of the sound source.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Panner3D/positionY.mdx b/src/content/reference/en/p5.Panner3D/positionY.mdx
index 469ec09f4e..803f39f385 100644
--- a/src/content/reference/en/p5.Panner3D/positionY.mdx
+++ b/src/content/reference/en/p5.Panner3D/positionY.mdx
@@ -2,16 +2,16 @@
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
+file: src/Panner3D.js
+description: Set the Y position of the sound source.
+line: 182
isConstructor: false
itemtype: method
class: p5.Panner3D
-return:
- description: updated coordinate value
- type: Number
+params:
+ - name: positionY
+ description: the y position of the sound source.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Panner3D/positionZ.mdx b/src/content/reference/en/p5.Panner3D/positionZ.mdx
index 254bf1e378..31bfce3966 100644
--- a/src/content/reference/en/p5.Panner3D/positionZ.mdx
+++ b/src/content/reference/en/p5.Panner3D/positionZ.mdx
@@ -2,16 +2,16 @@
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
+file: src/Panner3D.js
+description: Set the Z position of the sound source.
+line: 192
isConstructor: false
itemtype: method
class: p5.Panner3D
-return:
- description: updated coordinate value
- type: Number
+params:
+ - name: positionZ
+ description: the z position of the sound source.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Panner3D/process.mdx b/src/content/reference/en/p5.Panner3D/process.mdx
index 52723cbbd9..b6c6522aaf 100644
--- a/src/content/reference/en/p5.Panner3D/process.mdx
+++ b/src/content/reference/en/p5.Panner3D/process.mdx
@@ -2,17 +2,15 @@
title: process
module: p5.sound
submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Connect an audio sorce</p>
-line: 7654
+file: src/Panner3D.js
+description: Connects an input source to the 3D panner.
+line: 116
isConstructor: false
itemtype: method
class: p5.Panner3D
params:
- - name: src
- description: |
- <p>Input source</p>
+ - name: input
+ description: an input source to process with the 3D panner.
type: Object
chainable: false
---
diff --git a/src/content/reference/en/p5.Panner3D/rollof.mdx b/src/content/reference/en/p5.Panner3D/rollof.mdx
deleted file mode 100644
index b78656b069..0000000000
--- a/src/content/reference/en/p5.Panner3D/rollof.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Panner3D
-params:
- - name: rolloffFactor
- description: ''
- type: Number
-return:
- description: updated value
- type: Number
-chainable: false
----
-
-
-# rollof
diff --git a/src/content/reference/en/p5.Panner3D/rolloff.mdx b/src/content/reference/en/p5.Panner3D/rolloff.mdx
new file mode 100644
index 0000000000..75477279c4
--- /dev/null
+++ b/src/content/reference/en/p5.Panner3D/rolloff.mdx
@@ -0,0 +1,19 @@
+---
+title: rolloff
+module: p5.sound
+submodule: p5.sound
+file: src/Panner3D.js
+description: Set the rolloff rate of the panner.
+line: 162
+isConstructor: false
+itemtype: method
+class: p5.Panner3D
+params:
+ - name: r
+ description: the rolloff rate of the panner.
+ type: Number
+chainable: false
+---
+
+
+# rolloff
diff --git a/src/content/reference/en/p5.Panner3D/set.mdx b/src/content/reference/en/p5.Panner3D/set.mdx
index 8b8426420d..f7b2968fcc 100644
--- a/src/content/reference/en/p5.Panner3D/set.mdx
+++ b/src/content/reference/en/p5.Panner3D/set.mdx
@@ -2,29 +2,22 @@
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
+file: src/Panner3D.js
+description: 'Set the x, y, and z position of the 3D panner.'
+line: 126
isConstructor: false
itemtype: method
class: p5.Panner3D
params:
- - name: xVal
- description: ''
+ - name: xPosition
+ description: the x coordinate of the panner.
type: Number
- - name: yVal
- description: ''
+ - name: yPosition
+ description: the y coordinate of the panner.
type: Number
- - name: zVal
- description: ''
+ - name: zPosition
+ description: the z coordinate of the panner.
type: Number
- - name: time
- description: ''
- type: Number
-return:
- description: 'Updated x, y, z values as an array'
- type: Array
chainable: false
---
diff --git a/src/content/reference/en/p5.Panner3D/setFalloff.mdx b/src/content/reference/en/p5.Panner3D/setFalloff.mdx
index e8a02b8761..6d1f5c75d7 100644
--- a/src/content/reference/en/p5.Panner3D/setFalloff.mdx
+++ b/src/content/reference/en/p5.Panner3D/setFalloff.mdx
@@ -2,22 +2,19 @@
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
+file: src/Panner3D.js
+description: The rolloff rate of the panner.
+line: 140
isConstructor: false
itemtype: method
class: p5.Panner3D
params:
- - name: maxDistance
+ - name: rolloffFactor
description: ''
type: Number
- optional: true
- - name: rolloffFactor
+ - name: maxDistance
description: ''
type: Number
- optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5.Part/addPhrase.mdx b/src/content/reference/en/p5.Part/addPhrase.mdx
deleted file mode 100644
index 53d4a881ad..0000000000
--- a/src/content/reference/en/p5.Part/addPhrase.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Part
-params:
- - name: phrase
- description: |
- <p>reference to a p5.Phrase</p>
- type: p5.Phrase
-chainable: false
----
-
-
-# addPhrase
diff --git a/src/content/reference/en/p5.Part/getBPM.mdx b/src/content/reference/en/p5.Part/getBPM.mdx
deleted file mode 100644
index b1f0371e43..0000000000
--- a/src/content/reference/en/p5.Part/getBPM.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index f371817004..0000000000
--- a/src/content/reference/en/p5.Part/getPhrase.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Part
-params:
- - name: phraseName
- description: ''
- type: String
-chainable: false
----
-
-
-# getPhrase
diff --git a/src/content/reference/en/p5.Part/loop.mdx b/src/content/reference/en/p5.Part/loop.mdx
deleted file mode 100644
index cb3aea8214..0000000000
--- a/src/content/reference/en/p5.Part/loop.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Part
-params:
- - name: time
- description: |
- <p>seconds from now</p>
- type: Number
- optional: true
-chainable: false
----
-
-
-# loop
diff --git a/src/content/reference/en/p5.Part/noLoop.mdx b/src/content/reference/en/p5.Part/noLoop.mdx
deleted file mode 100644
index 9ffeb7fe63..0000000000
--- a/src/content/reference/en/p5.Part/noLoop.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index 0cb9639606..0000000000
--- a/src/content/reference/en/p5.Part/onStep.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Part
-params:
- - name: callback
- description: |
- <p>The name of the callback
- you want to fire
- on every beat/tatum.</p>
- type: Function
-chainable: false
----
-
-
-# onStep
diff --git a/src/content/reference/en/p5.Part/pause.mdx b/src/content/reference/en/p5.Part/pause.mdx
deleted file mode 100644
index 63b38035d1..0000000000
--- a/src/content/reference/en/p5.Part/pause.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Part
-params:
- - name: time
- description: |
- <p>seconds from now</p>
- type: Number
-chainable: false
----
-
-
-# pause
diff --git a/src/content/reference/en/p5.Part/removePhrase.mdx b/src/content/reference/en/p5.Part/removePhrase.mdx
deleted file mode 100644
index 651a9b489f..0000000000
--- a/src/content/reference/en/p5.Part/removePhrase.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Part
-params:
- - name: phraseName
- description: ''
- type: String
-chainable: false
----
-
-
-# removePhrase
diff --git a/src/content/reference/en/p5.Part/replaceSequence.mdx b/src/content/reference/en/p5.Part/replaceSequence.mdx
deleted file mode 100644
index 59d924b50f..0000000000
--- a/src/content/reference/en/p5.Part/replaceSequence.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Part
-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
-chainable: false
----
-
-
-# replaceSequence
diff --git a/src/content/reference/en/p5.Part/setBPM.mdx b/src/content/reference/en/p5.Part/setBPM.mdx
deleted file mode 100644
index e4f44a44bf..0000000000
--- a/src/content/reference/en/p5.Part/setBPM.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Part
-params:
- - name: BPM
- description: |
- <p>Beats Per Minute</p>
- type: Number
- - name: rampTime
- description: |
- <p>Seconds from now</p>
- type: Number
- optional: true
-chainable: false
----
-
-
-# setBPM
diff --git a/src/content/reference/en/p5.Part/start.mdx b/src/content/reference/en/p5.Part/start.mdx
deleted file mode 100644
index bb3b76967b..0000000000
--- a/src/content/reference/en/p5.Part/start.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Part
-params:
- - name: time
- description: |
- <p>seconds from now</p>
- type: Number
- optional: true
-chainable: false
----
-
-
-# start
diff --git a/src/content/reference/en/p5.Part/stop.mdx b/src/content/reference/en/p5.Part/stop.mdx
deleted file mode 100644
index 04f9503c17..0000000000
--- a/src/content/reference/en/p5.Part/stop.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Part
-params:
- - name: time
- description: |
- <p>seconds from now</p>
- type: Number
- optional: true
-chainable: false
----
-
-
-# stop
diff --git a/src/content/reference/en/p5.PeakDetect/isDetected.mdx b/src/content/reference/en/p5.PeakDetect/isDetected.mdx
deleted file mode 100644
index bd6868e4c1..0000000000
--- a/src/content/reference/en/p5.PeakDetect/isDetected.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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
----
-
-
-# isDetected
diff --git a/src/content/reference/en/p5.PeakDetect/onPeak.mdx b/src/content/reference/en/p5.PeakDetect/onPeak.mdx
deleted file mode 100644
index 150222edce..0000000000
--- a/src/content/reference/en/p5.PeakDetect/onPeak.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.PeakDetect
-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
-chainable: false
----
-
-
-# onPeak
diff --git a/src/content/reference/en/p5.PeakDetect/update.mdx b/src/content/reference/en/p5.PeakDetect/update.mdx
deleted file mode 100644
index 67a223a87e..0000000000
--- a/src/content/reference/en/p5.PeakDetect/update.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.PeakDetect
-params:
- - name: fftObject
- description: |
- <p>A p5.FFT object</p>
- type: p5.FFT
-chainable: false
----
-
-
-# update
diff --git a/src/content/reference/en/p5.Phrase/sequence.mdx b/src/content/reference/en/p5.Phrase/sequence.mdx
deleted file mode 100644
index 392280b61b..0000000000
--- a/src/content/reference/en/p5.Phrase/sequence.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.Phrase
-type: Array
----
-
-
-# sequence
diff --git a/src/content/reference/en/p5.PitchShifter/shift.mdx b/src/content/reference/en/p5.PitchShifter/shift.mdx
new file mode 100644
index 0000000000..6a4e4f74b1
--- /dev/null
+++ b/src/content/reference/en/p5.PitchShifter/shift.mdx
@@ -0,0 +1,19 @@
+---
+title: shift
+module: p5.sound
+submodule: p5.sound
+file: src/PitchShifter.js
+description: Shift the pitch of the source audio.
+line: 55
+isConstructor: false
+itemtype: method
+class: p5.PitchShifter
+params:
+ - name: pitchValue
+ description: amount of semitones to shift the pitch
+ type: Number
+chainable: false
+---
+
+
+# shift
diff --git a/src/content/reference/en/p5.PolySynth/AudioVoice.mdx b/src/content/reference/en/p5.PolySynth/AudioVoice.mdx
deleted file mode 100644
index 654db15319..0000000000
--- a/src/content/reference/en/p5.PolySynth/AudioVoice.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.PolySynth
----
-
-
-# AudioVoice
diff --git a/src/content/reference/en/p5.PolySynth/connect.mdx b/src/content/reference/en/p5.PolySynth/connect.mdx
deleted file mode 100644
index 23e54964a9..0000000000
--- a/src/content/reference/en/p5.PolySynth/connect.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.PolySynth
-params:
- - name: unit
- description: |
- <p>A p5.sound or Web Audio object</p>
- type: Object
-chainable: false
----
-
-
-# connect
diff --git a/src/content/reference/en/p5.PolySynth/disconnect.mdx b/src/content/reference/en/p5.PolySynth/disconnect.mdx
deleted file mode 100644
index 241eea5450..0000000000
--- a/src/content/reference/en/p5.PolySynth/disconnect.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: disconnect
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Disconnect all outputs</p>
-line: 12119
-isConstructor: false
-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
deleted file mode 100644
index b688442e27..0000000000
--- a/src/content/reference/en/p5.PolySynth/dispose.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index f5ff960e03..0000000000
--- a/src/content/reference/en/p5.PolySynth/noteADSR.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.PolySynth
-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
-chainable: false
----
-
-
-# noteADSR
diff --git a/src/content/reference/en/p5.PolySynth/noteAttack.mdx b/src/content/reference/en/p5.PolySynth/noteAttack.mdx
deleted file mode 100644
index 36bc00bb4b..0000000000
--- a/src/content/reference/en/p5.PolySynth/noteAttack.mdx
+++ /dev/null
@@ -1,64 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.PolySynth
-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
-chainable: false
----
-
-
-# noteAttack
diff --git a/src/content/reference/en/p5.PolySynth/noteRelease.mdx b/src/content/reference/en/p5.PolySynth/noteRelease.mdx
deleted file mode 100644
index f57fbcd8d5..0000000000
--- a/src/content/reference/en/p5.PolySynth/noteRelease.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.PolySynth
-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
-chainable: false
----
-
-
-# noteRelease
diff --git a/src/content/reference/en/p5.PolySynth/notes.mdx b/src/content/reference/en/p5.PolySynth/notes.mdx
deleted file mode 100644
index e7caea9fe7..0000000000
--- a/src/content/reference/en/p5.PolySynth/notes.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.PolySynth
----
-
-
-# notes
diff --git a/src/content/reference/en/p5.PolySynth/play.mdx b/src/content/reference/en/p5.PolySynth/play.mdx
deleted file mode 100644
index 5de9536788..0000000000
--- a/src/content/reference/en/p5.PolySynth/play.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.PolySynth
-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
-chainable: false
----
-
-
-# play
diff --git a/src/content/reference/en/p5.PolySynth/polyvalue.mdx b/src/content/reference/en/p5.PolySynth/polyvalue.mdx
deleted file mode 100644
index 88979a937c..0000000000
--- a/src/content/reference/en/p5.PolySynth/polyvalue.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.PolySynth
----
-
-
-# polyvalue
diff --git a/src/content/reference/en/p5.PolySynth/setADSR.mdx b/src/content/reference/en/p5.PolySynth/setADSR.mdx
deleted file mode 100644
index 66487da1a4..0000000000
--- a/src/content/reference/en/p5.PolySynth/setADSR.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.PolySynth
-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
-chainable: false
----
-
-
-# setADSR
diff --git a/src/content/reference/en/p5.PrintWriter/clear.mdx b/src/content/reference/en/p5.PrintWriter/clear.mdx
deleted file mode 100644
index 7f5904b4d9..0000000000
--- a/src/content/reference/en/p5.PrintWriter/clear.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: clear
-module: IO
-submodule: Output
-file: src/io/files.js
-description: |
- <p>Clears all data from the print stream.</p>
-line: 1722
-isConstructor: false
-itemtype: method
-example:
- - |-
-
- <div>
- <code>
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Style the text.
- textAlign(LEFT, CENTER);
- textFont('Courier New');
- textSize(12);
-
- // Display instructions.
- text('Double-click to save', 5, 50, 90);
-
- describe('The text "Double-click to save" written in black on a gray background.');
- }
-
- // Save the file when the user double-clicks.
- function doubleClicked() {
- // Create a p5.PrintWriter object.
- let myWriter = createWriter('numbers.txt');
-
- // Add some data to the print stream.
- myWriter.print('Hello p5*js!');
-
- // Clear the print stream.
- myWriter.clear();
-
- // Save the file and close the print stream.
- myWriter.close();
- }
- </code>
- </div>
-class: p5.PrintWriter
-chainable: false
----
-
-
-# clear
diff --git a/src/content/reference/en/p5.PrintWriter/print.mdx b/src/content/reference/en/p5.PrintWriter/print.mdx
deleted file mode 100644
index 32a0c1f49a..0000000000
--- a/src/content/reference/en/p5.PrintWriter/print.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: print
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
- <p>Writes data to the print stream with new lines added.</p>
-
- <p>The parameter, <code>data</code>, is the data to write. <code>data</code>
- can be a number or
-
- string, as in <code>myWriter.print('hi')</code>, or an array of numbers and
- strings,
-
- as in <code>myWriter.print([1, 2, 3])</code>. A comma will be inserted between
- array
-
- array elements when they're added to the print stream.</p>
-line: 1672
-isConstructor: false
-itemtype: method
-example:
- - |-
-
- <div>
- <code>
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Style the text.
- textAlign(LEFT, CENTER);
- textFont('Courier New');
- textSize(12);
-
- // Display instructions.
- text('Double-click to save', 5, 50, 90);
-
- describe('The text "Double-click to save" written in black on a gray background.');
- }
-
- // Save the file when the user double-clicks.
- function doubleClicked() {
- // Create a p5.PrintWriter object.
- let myWriter = createWriter('numbers.txt');
-
- // Add some data to the print stream.
- myWriter.print('1,2,3,');
- myWriter.print(['4', '5', '6']);
-
- // Save the file and close the print stream.
- myWriter.close();
- }
- </code>
- </div>
-class: p5.PrintWriter
-params:
- - name: data
- description: |
- <p>data to be written as a string, number,
- or array of strings and numbers.</p>
- type: String|Number|Array
-chainable: false
----
-
-
-# print
diff --git a/src/content/reference/en/p5.Pulse/width.mdx b/src/content/reference/en/p5.Pulse/width.mdx
deleted file mode 100644
index 49e856cf91..0000000000
--- a/src/content/reference/en/p5.Pulse/width.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Pulse
-params:
- - name: width
- description: |
- <p>Width between the pulses (0 to 1.0,
- defaults to 0)</p>
- type: Number
- optional: true
-chainable: false
----
-
-
-# width
diff --git a/src/content/reference/en/p5.Reverb/amp.mdx b/src/content/reference/en/p5.Reverb/amp.mdx
deleted file mode 100644
index dd219962b8..0000000000
--- a/src/content/reference/en/p5.Reverb/amp.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Reverb
-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
-chainable: false
----
-
-
-# amp
diff --git a/src/content/reference/en/p5.Reverb/connect.mdx b/src/content/reference/en/p5.Reverb/connect.mdx
deleted file mode 100644
index b414875178..0000000000
--- a/src/content/reference/en/p5.Reverb/connect.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Reverb
-params:
- - name: unit
- description: ''
- type: Object
-chainable: false
----
-
-
-# connect
diff --git a/src/content/reference/en/p5.Reverb/disconnect.mdx b/src/content/reference/en/p5.Reverb/disconnect.mdx
deleted file mode 100644
index 35b8c66097..0000000000
--- a/src/content/reference/en/p5.Reverb/disconnect.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: disconnect
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Disconnect all output.</p>
-line: 8501
-isConstructor: false
-itemtype: method
-class: p5.Reverb
-chainable: false
----
-
-
-# disconnect
diff --git a/src/content/reference/en/p5.Reverb/drywet.mdx b/src/content/reference/en/p5.Reverb/drywet.mdx
new file mode 100644
index 0000000000..daffbb89c2
--- /dev/null
+++ b/src/content/reference/en/p5.Reverb/drywet.mdx
@@ -0,0 +1,21 @@
+---
+title: drywet
+module: p5.sound
+submodule: p5.sound
+file: src/Reverb.js
+description: Adjust the dry/wet value.
+line: 66
+isConstructor: false
+itemtype: method
+class: p5.Reverb
+params:
+ - name: mix
+ description: >-
+ The desired mix between the original and the affected signal. A number
+ between 0 and 1. 0 is all dry, 1 is completely affected.
+ type: Number
+chainable: false
+---
+
+
+# drywet
diff --git a/src/content/reference/en/p5.Reverb/process.mdx b/src/content/reference/en/p5.Reverb/process.mdx
deleted file mode 100644
index afd1c38a78..0000000000
--- a/src/content/reference/en/p5.Reverb/process.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Reverb
-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
-chainable: false
----
-
-
-# process
diff --git a/src/content/reference/en/p5.Reverb/set.mdx b/src/content/reference/en/p5.Reverb/set.mdx
index f60e63e903..43ee523b56 100644
--- a/src/content/reference/en/p5.Reverb/set.mdx
+++ b/src/content/reference/en/p5.Reverb/set.mdx
@@ -2,32 +2,16 @@
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
+file: src/Reverb.js
+description: Set the decay time of the reverb.
+line: 56
isConstructor: false
itemtype: method
class: p5.Reverb
params:
- - name: seconds
- description: |
- <p>Duration of the reverb, in seconds.
- Min: 0, Max: 10. Defaults to 3.</p>
+ - name: time
+ description: Decay time of the reverb in seconds.
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
chainable: false
---
diff --git a/src/content/reference/en/p5.Score/loop.mdx b/src/content/reference/en/p5.Score/loop.mdx
deleted file mode 100644
index 992e893dc6..0000000000
--- a/src/content/reference/en/p5.Score/loop.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: loop
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Loop playback of the score.</p>
-line: 9581
-isConstructor: false
-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
deleted file mode 100644
index 9c85c6f41b..0000000000
--- a/src/content/reference/en/p5.Score/noLoop.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index f5e26c836a..0000000000
--- a/src/content/reference/en/p5.Score/pause.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: pause
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Pause playback of the score.</p>
-line: 9569
-isConstructor: false
-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
deleted file mode 100644
index f4e843899b..0000000000
--- a/src/content/reference/en/p5.Score/setBPM.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.Score
-params:
- - name: BPM
- description: |
- <p>Beats Per Minute</p>
- type: Number
- - name: rampTime
- description: |
- <p>Seconds from now</p>
- type: Number
-chainable: false
----
-
-
-# setBPM
diff --git a/src/content/reference/en/p5.Shader/copyToContext.mdx b/src/content/reference/en/p5.Shader/copyToContext.mdx
index c87c008ce2..8e2638d9f5 100644
--- a/src/content/reference/en/p5.Shader/copyToContext.mdx
+++ b/src/content/reference/en/p5.Shader/copyToContext.mdx
@@ -35,8 +35,8 @@ description: >
<a href="/reference/p5/p5.Graphics">p5.Graphics</a> object to the main canvas
using
- the <code>window</code> variable, as in
- <code>myShader.copyToContext(window)</code>.</p>
+ the <code>p5.instance</code> variable, as in
+ <code>myShader.copyToContext(p5.instance)</code>.</p>
<p>Note: A <a href="/reference/p5/p5.Shader">p5.Shader</a> object created with
@@ -55,12 +55,11 @@ description: >
objects
have the same context as the main canvas.</p>
-line: 574
+line: 692
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Note: A "uniform" is a global variable within a shader program.
@@ -187,7 +186,7 @@ example:
pg.shader(original);
// Copy the original shader to the main canvas.
- copied = original.copyToContext(window);
+ copied = original.copyToContext(p5.instance);
// Apply the copied shader to the main canvas.
shader(copied);
@@ -209,14 +208,17 @@ example:
</code>
</div>
class: p5.Shader
-params:
- - name: context
- description: |
- <p>WebGL context for the copied shader.</p>
- type: p5|p5.Graphics
return:
description: new shader compiled for the target context.
type: p5.Shader
+overloads:
+ - params:
+ - name: context
+ description: WebGL context for the copied shader.
+ type: p5|p5.Graphics
+ return:
+ description: new shader compiled for the target context.
+ type: p5.Shader
chainable: false
---
diff --git a/src/content/reference/en/p5.Shader/inspectHooks.mdx b/src/content/reference/en/p5.Shader/inspectHooks.mdx
index 4c60233b57..7fedd8f6c2 100644
--- a/src/content/reference/en/p5.Shader/inspectHooks.mdx
+++ b/src/content/reference/en/p5.Shader/inspectHooks.mdx
@@ -3,17 +3,15 @@ title: inspectHooks
module: 3D
submodule: Material
file: src/webgl/p5.Shader.js
-description: >
+description: >-
<p>Logs the hooks available in this shader, and their current
implementation.</p>
<p>Each shader may let you override bits of its behavior. Each bit is called
- a <em>hook.</em> A hook is either for the <em>vertex</em> shader, if it
- affects the
+ a hook. A hook is either for the vertex shader, if it affects the
- position of vertices, or in the <em>fragment</em> shader, if it affects the
- pixel
+ position of vertices, or in the fragment shader, if it affects the pixel
color. This method logs those values to the console, letting you know what
@@ -31,11 +29,7 @@ description: >
}`
});
- myShader.inspectHooks();
-
- </code></pre>
-
- <pre><code>==== Vertex shader hooks: ====
+ myShader.inspectHooks();</code></pre><pre><code>==== Vertex shader hooks: ====
void beforeVertex() {}
@@ -73,15 +67,15 @@ description: >
}
vec4 getFinalColor(vec4 color) { return color; }
- void afterFragment() {}
-
- </code></pre>
-line: 259
+ void afterFragment() {}</code></pre>
+line: 252
isConstructor: false
itemtype: method
+example: []
class: p5.Shader
+overloads:
+ - params: []
chainable: false
-beta: true
---
diff --git a/src/content/reference/en/p5.Shader/modify.mdx b/src/content/reference/en/p5.Shader/modify.mdx
index ac666c7dc5..8e1ab7785f 100644
--- a/src/content/reference/en/p5.Shader/modify.mdx
+++ b/src/content/reference/en/p5.Shader/modify.mdx
@@ -10,11 +10,9 @@ description: >
<p>Each shader may let you override bits of its behavior. Each bit is called
- a <em>hook.</em> A hook is either for the <em>vertex</em> shader, if it
- affects the
+ a hook. A hook is either for the vertex shader, if it affects the
- position of vertices, or in the <em>fragment</em> shader, if it affects the
- pixel
+ position of vertices, or in the fragment shader, if it affects the pixel
color. You can inspect the different hooks available by calling
@@ -59,12 +57,11 @@ description: >
<code>vertexDeclarations</code> and <code>fragmentDeclarations</code>
keys.</p>
-line: 340
+line: 370
isConstructor: false
itemtype: method
example:
- |-
-
<div modernizr='webgl'>
<code>
let myShader;
@@ -73,27 +70,27 @@ example:
createCanvas(200, 200, WEBGL);
myShader = baseMaterialShader().modify({
uniforms: {
- 'float time': () => millis()
+ 'float time': () => millis() // Uniform for time
},
- 'vec3 getWorldPosition': `(vec3 pos) {
- pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
- return pos;
+ 'Vertex getWorldInputs': `(Vertex inputs) {
+ inputs.position.y +=
+ 20. * sin(time * 0.001 + inputs.position.x * 0.05);
+ return inputs;
}`
});
}
function draw() {
background(255);
- shader(myShader);
- lights();
- noStroke();
- fill('red');
- sphere(50);
+ shader(myShader); // Apply the custom shader
+ lights(); // Enable lighting
+ noStroke(); // Disable stroke
+ fill('red'); // Set fill color to red
+ sphere(50); // Draw a sphere with the shader applied
}
</code>
</div>
- |-
-
<div modernizr='webgl'>
<code>
let myShader;
@@ -103,9 +100,10 @@ example:
myShader = baseMaterialShader().modify({
// Manually specifying a uniform
declarations: 'uniform float time;',
- 'vec3 getWorldPosition': `(vec3 pos) {
- pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
- return pos;
+ 'Vertex getWorldInputs': `(Vertex inputs) {
+ inputs.position.y +=
+ 20. * sin(time * 0.001 + inputs.position.x * 0.05);
+ return inputs;
}`
});
}
@@ -122,17 +120,19 @@ example:
</code>
</div>
class: p5.Shader
-params:
- - name: hooks
- description: |
- <p>The hooks in the shader to replace.</p>
- type: Object
- optional: true
return:
description: ''
type: p5.Shader
+overloads:
+ - params:
+ - name: hooks
+ description: The hooks in the shader to replace.
+ optional: 1
+ type: Object
+ return:
+ description: ''
+ type: p5.Shader
chainable: false
-beta: true
---
diff --git a/src/content/reference/en/p5.Shader/setUniform.mdx b/src/content/reference/en/p5.Shader/setUniform.mdx
index b0dd26032e..f9aaba667e 100644
--- a/src/content/reference/en/p5.Shader/setUniform.mdx
+++ b/src/content/reference/en/p5.Shader/setUniform.mdx
@@ -33,12 +33,11 @@ description: >
uniform’s type. Numbers, strings, booleans, arrays, and many types of
images can all be passed to a shader with <code>setUniform()</code>.</p>
-line: 990
+line: 1135
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Note: A "uniform" is a global variable within a shader program.
@@ -248,16 +247,17 @@ example:
</code>
</div>
class: p5.Shader
-params:
- - name: uniformName
- description: |
- <p>name of the uniform. Must match the name
- used in the vertex and fragment shaders.</p>
- type: String
- - name: data
- description: |
- <p>value to assign to the uniform. Must match the uniform’s data type.</p>
- type: 'Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture'
+overloads:
+ - params:
+ - name: uniformName
+ description: |-
+ name of the uniform. Must match the name
+ used in the vertex and fragment shaders.
+ type: String
+ - name: data
+ description: value to assign to the uniform. Must match the uniform’s data type.
+ type: >-
+ Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture
chainable: true
---
diff --git a/src/content/reference/en/p5.Shader/version.mdx b/src/content/reference/en/p5.Shader/version.mdx
new file mode 100644
index 0000000000..83ae0e7c2c
--- /dev/null
+++ b/src/content/reference/en/p5.Shader/version.mdx
@@ -0,0 +1,35 @@
+---
+title: version
+module: 3D
+submodule: Material
+file: src/webgl/p5.Shader.js
+description: >
+ <p>Shaders are written in <a
+ href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/">GLSL</a>,
+ but
+
+ there are different versions of GLSL that it might be written in.</p>
+
+ <p>Calling this method on a <code>p5.Shader</code> will return the GLSL
+ version it uses, either <code>100 es</code> or <code>300 es</code>.
+
+ WebGL 1 shaders will only use <code>100 es</code>, and WebGL 2 shaders may use
+ either.</p>
+line: 180
+isConstructor: false
+itemtype: method
+example: []
+class: p5.Shader
+return:
+ description: The GLSL version used by the shader.
+ type: String
+overloads:
+ - params: []
+ return:
+ description: The GLSL version used by the shader.
+ type: String
+chainable: false
+---
+
+
+# version
diff --git a/src/content/reference/en/p5.SoundFile/addCue.mdx b/src/content/reference/en/p5.SoundFile/addCue.mdx
deleted file mode 100644
index 3bd58f0a97..0000000000
--- a/src/content/reference/en/p5.SoundFile/addCue.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.SoundFile
-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
-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/amp.mdx b/src/content/reference/en/p5.SoundFile/amp.mdx
new file mode 100644
index 0000000000..0134609771
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/amp.mdx
@@ -0,0 +1,19 @@
+---
+title: amp
+module: p5.sound
+submodule: SoundFile
+file: src/SoundFile.js
+description: Adjust the amplitude of the soundfile.
+line: 234
+isConstructor: false
+itemtype: method
+class: p5.SoundFile
+params:
+ - name: amplitude
+ description: amplitude value between 0 and 1.
+ type: Number
+chainable: false
+---
+
+
+# amp
diff --git a/src/content/reference/en/p5.SoundFile/channels.mdx b/src/content/reference/en/p5.SoundFile/channels.mdx
index a771a5c8ca..3a704fe042 100644
--- a/src/content/reference/en/p5.SoundFile/channels.mdx
+++ b/src/content/reference/en/p5.SoundFile/channels.mdx
@@ -1,18 +1,15 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: Gets the number of channels in the sound file.
+line: 452
isConstructor: false
itemtype: method
class: p5.SoundFile
return:
- description: '[channels]'
- type: Number
+ description: Returns the number of channels in the sound file.
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/clearCues.mdx b/src/content/reference/en/p5.SoundFile/clearCues.mdx
deleted file mode 100644
index cabe21da18..0000000000
--- a/src/content/reference/en/p5.SoundFile/clearCues.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index bdddc34f94..0000000000
--- a/src/content/reference/en/p5.SoundFile/connect.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.SoundFile
-params:
- - name: object
- description: |
- <p>Audio object that accepts an input</p>
- type: Object
- optional: true
-chainable: false
----
-
-
-# connect
diff --git a/src/content/reference/en/p5.SoundFile/currentTime.mdx b/src/content/reference/en/p5.SoundFile/currentTime.mdx
deleted file mode 100644
index 422cd52ba3..0000000000
--- a/src/content/reference/en/p5.SoundFile/currentTime.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index 4cdecb2ed3..0000000000
--- a/src/content/reference/en/p5.SoundFile/disconnect.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-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
-isConstructor: false
-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
index 9c26242d40..e8d2579251 100644
--- a/src/content/reference/en/p5.SoundFile/duration.mdx
+++ b/src/content/reference/en/p5.SoundFile/duration.mdx
@@ -1,16 +1,15 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: Returns the duration of a sound file in seconds.
+line: 315
isConstructor: false
itemtype: method
class: p5.SoundFile
return:
- description: The duration of the soundFile in seconds.
+ description: duration
type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/frames.mdx b/src/content/reference/en/p5.SoundFile/frames.mdx
index 1ea17aaee5..598081a4f1 100644
--- a/src/content/reference/en/p5.SoundFile/frames.mdx
+++ b/src/content/reference/en/p5.SoundFile/frames.mdx
@@ -1,17 +1,41 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: Return the number of samples in a sound file.
+line: 408
isConstructor: false
itemtype: method
+example:
+ - |-
+
+ <div>
+ <code>
+ let player;
+
+ function preload() {
+ player = loadSound('//assets/lucky_dragons_-_power_melody.mp3');
+ }
+
+ function setup() {
+ describe('A sketch that calculates and displays the length of a sound file using number of samples and sample rate.');
+ createCanvas(100, 100);
+ background(220);
+ textAlign(CENTER);
+ textWrap(WORD);
+ textSize(10);
+ frames = player.frames();
+ sampleRate = player.sampleRate();
+ sampleLength = round((frames / sampleRate), 2);
+ info = `sample is ${sampleLength} seconds long`;
+ text(info, 0, 20, 100);
+ }
+ </code>
+ </div>
class: p5.SoundFile
return:
- description: '[sampleCount]'
+ description: The number of samples in the sound file.
type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/getBlob.mdx b/src/content/reference/en/p5.SoundFile/getBlob.mdx
deleted file mode 100644
index 9a083f578a..0000000000
--- a/src/content/reference/en/p5.SoundFile/getBlob.mdx
+++ /dev/null
@@ -1,64 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.SoundFile
-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
deleted file mode 100644
index e6f2b25294..0000000000
--- a/src/content/reference/en/p5.SoundFile/getPan.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-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
-isConstructor: false
-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
deleted file mode 100644
index 97958d5c86..0000000000
--- a/src/content/reference/en/p5.SoundFile/getPeaks.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.SoundFile
-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
-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
deleted file mode 100644
index 3199e284c5..0000000000
--- a/src/content/reference/en/p5.SoundFile/isLoaded.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
-isConstructor: false
-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
index 5fb89cadb4..9b7d1c591f 100644
--- a/src/content/reference/en/p5.SoundFile/isLooping.mdx
+++ b/src/content/reference/en/p5.SoundFile/isLooping.mdx
@@ -1,17 +1,15 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: Return the playback state of the soundfile.
+line: 355
isConstructor: false
itemtype: method
class: p5.SoundFile
return:
- description: ''
+ description: 'Looping State, true or false.'
type: Boolean
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/isPaused.mdx b/src/content/reference/en/p5.SoundFile/isPaused.mdx
deleted file mode 100644
index 87730bf520..0000000000
--- a/src/content/reference/en/p5.SoundFile/isPaused.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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
-isConstructor: false
-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
index 27e3dccc40..d1ef0f0daa 100644
--- a/src/content/reference/en/p5.SoundFile/isPlaying.mdx
+++ b/src/content/reference/en/p5.SoundFile/isPlaying.mdx
@@ -1,17 +1,15 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: Return the playback state of the soundfile.
+line: 345
isConstructor: false
itemtype: method
class: p5.SoundFile
return:
- description: ''
+ description: 'Playback state, true or false.'
type: Boolean
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/jump.mdx b/src/content/reference/en/p5.SoundFile/jump.mdx
index 9fe1f16781..b5b6bfcc2f 100644
--- a/src/content/reference/en/p5.SoundFile/jump.mdx
+++ b/src/content/reference/en/p5.SoundFile/jump.mdx
@@ -1,31 +1,16 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: Move the playhead of a soundfile that is currently playing to a new position.
+line: 335
isConstructor: false
itemtype: method
class: p5.SoundFile
params:
- - name: cueTime
- description: |
- <p>cueTime of the soundFile in seconds.</p>
- type: Number
- - name: duration
- description: |
- <p>duration in seconds.</p>
+ - name: timePoint
+ description: Time to jump to in seconds.
type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/loop.mdx b/src/content/reference/en/p5.SoundFile/loop.mdx
index 5874de795c..19329b5d4a 100644
--- a/src/content/reference/en/p5.SoundFile/loop.mdx
+++ b/src/content/reference/en/p5.SoundFile/loop.mdx
@@ -1,69 +1,17 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: Loop the soundfile.
+line: 210
isConstructor: false
itemtype: method
-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>
class: p5.SoundFile
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
+ - name: loopState
+ description: Set to True or False in order to set the loop state.
+ type: Boolean
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/onended.mdx b/src/content/reference/en/p5.SoundFile/onended.mdx
index a2a7a23fa9..c974828c7d 100644
--- a/src/content/reference/en/p5.SoundFile/onended.mdx
+++ b/src/content/reference/en/p5.SoundFile/onended.mdx
@@ -1,23 +1,51 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: Define a function to call when the soundfile is done playing.
+line: 365
isConstructor: false
itemtype: method
+example:
+ - |-
+
+ <div>
+ <code>
+ let player;
+
+ function preload() {
+ player = loadSound('//assets/lucky_dragons_-_power_melody.mp3');
+ }
+
+ function setup() {
+ let cnv = createCanvas(100, 100);
+ background(220);
+ textAlign(CENTER);
+ textSize(10);
+ text('click to play', width/2, height/2);
+ cnv.mousePressed(playSound);
+ player.onended(coolFunction);
+ }
+
+ function coolFunction() {
+ background(220);
+ text('sound is done', width/2, height/2);
+ }
+
+ function playSound() {
+ background(0, 255, 255);
+ text('sound is playing', width/2, height/2);
+ if (!player.isPlaying()) {
+ player.play();
+ }
+ }
+ </code>
+ </div>
class: p5.SoundFile
params:
- name: callback
- description: |
- <p>function to call when the
- soundfile has ended.</p>
+ description: Name of a function that will be called when the soundfile is done playing.
type: Function
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/pan.mdx b/src/content/reference/en/p5.SoundFile/pan.mdx
deleted file mode 100644
index ec7978f08c..0000000000
--- a/src/content/reference/en/p5.SoundFile/pan.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.SoundFile
-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
-chainable: false
----
-
-
-# pan
diff --git a/src/content/reference/en/p5.SoundFile/pause.mdx b/src/content/reference/en/p5.SoundFile/pause.mdx
index ab9fa5f577..d9d841362e 100644
--- a/src/content/reference/en/p5.SoundFile/pause.mdx
+++ b/src/content/reference/en/p5.SoundFile/pause.mdx
@@ -1,51 +1,52 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: Pause the soundfile.
+line: 161
isConstructor: false
itemtype: method
example:
- |-
- <div><code>
- let soundFile;
+ <div>
+ <code>
+ let player;
+
function preload() {
- soundFormats('ogg', 'mp3');
- soundFile = loadSound('/assets/Damscray_-_Dancing_Tiger_02.mp3');
+ player = loadSound('//assets/Damscray_DancingTiger.mp3');
}
+
function setup() {
+ describe('A sketch that pauses and resumes sound file playback.');
let cnv = createCanvas(100, 100);
- cnv.mousePressed(canvasPressed);
+ cnv.mousePressed(playSound);
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();
+ textAlign(CENTER);
+ textWrap(WORD);
+ textSize(10);
background(220);
+ text('click to play', 0, 20, 100);
+
+ player.loop();
+ }
+
+ function playSound() {
+ if (!player.isPlaying()) {
+ player.play();
+ background(220);
+ text('click to pause', 0, 20, 100);
+ }
+ else {
+ player.pause();
+ background(220);
+ text('click to play', 0, 20, 100);
+ }
}
</code>
</div>
class: p5.SoundFile
-params:
- - name: startTime
- description: |
- <p>(optional) schedule event to occur
- seconds from now</p>
- type: Number
- optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/play.mdx b/src/content/reference/en/p5.SoundFile/play.mdx
index 15ba14875f..b92c96c455 100644
--- a/src/content/reference/en/p5.SoundFile/play.mdx
+++ b/src/content/reference/en/p5.SoundFile/play.mdx
@@ -1,41 +1,13 @@
---
title: play
module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Play the p5.SoundFile</p>
-line: 1679
+submodule: SoundFile
+file: src/SoundFile.js
+description: Start the soundfile.
+line: 138
isConstructor: false
itemtype: method
class: p5.SoundFile
-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
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/playMode.mdx b/src/content/reference/en/p5.SoundFile/playMode.mdx
deleted file mode 100644
index 9b0ece06ae..0000000000
--- a/src/content/reference/en/p5.SoundFile/playMode.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.SoundFile
-params:
- - name: str
- description: |
- <p>'restart' or 'sustain' or 'untilDone'</p>
- type: String
-chainable: false
----
-
-
-# playMode
diff --git a/src/content/reference/en/p5.SoundFile/rate.mdx b/src/content/reference/en/p5.SoundFile/rate.mdx
index 86c5553a44..af24998bc3 100644
--- a/src/content/reference/en/p5.SoundFile/rate.mdx
+++ b/src/content/reference/en/p5.SoundFile/rate.mdx
@@ -1,58 +1,19 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: Set the playback rate of the soundfile.
+line: 300
isConstructor: false
itemtype: method
-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>
class: p5.SoundFile
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>
+ - name: rate
+ description: >-
+ 1 is normal speed, 2 is double speed. Negative values plays the soundfile
+ backwards.
type: Number
- optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/removeCue.mdx b/src/content/reference/en/p5.SoundFile/removeCue.mdx
deleted file mode 100644
index 098a52ebc2..0000000000
--- a/src/content/reference/en/p5.SoundFile/removeCue.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.SoundFile
-params:
- - name: id
- description: |
- <p>ID of the cue, as returned by addCue</p>
- type: Number
-chainable: false
----
-
-
-# removeCue
diff --git a/src/content/reference/en/p5.SoundFile/reverseBuffer.mdx b/src/content/reference/en/p5.SoundFile/reverseBuffer.mdx
deleted file mode 100644
index 1a08f11c07..0000000000
--- a/src/content/reference/en/p5.SoundFile/reverseBuffer.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.SoundFile
-chainable: false
----
-
-
-# reverseBuffer
diff --git a/src/content/reference/en/p5.SoundFile/sampleRate.mdx b/src/content/reference/en/p5.SoundFile/sampleRate.mdx
index 07dab7c3af..704dcc7087 100644
--- a/src/content/reference/en/p5.SoundFile/sampleRate.mdx
+++ b/src/content/reference/en/p5.SoundFile/sampleRate.mdx
@@ -1,17 +1,15 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: Gets the number of channels in the sound file.
+line: 442
isConstructor: false
itemtype: method
class: p5.SoundFile
return:
- description: '[sampleRate]'
- type: Number
+ description: Returns the sample rate of the sound file.
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/save.mdx b/src/content/reference/en/p5.SoundFile/save.mdx
deleted file mode 100644
index 9ca4f3a2cc..0000000000
--- a/src/content/reference/en/p5.SoundFile/save.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.SoundFile
-params:
- - name: fileName
- description: |
- <p>name of the resulting .wav file.</p>
- type: String
- optional: true
-chainable: false
----
-
-
-# save
diff --git a/src/content/reference/en/p5.SoundFile/setBuffer.mdx b/src/content/reference/en/p5.SoundFile/setBuffer.mdx
deleted file mode 100644
index 4feaa4e0fa..0000000000
--- a/src/content/reference/en/p5.SoundFile/setBuffer.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.SoundFile
-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
-chainable: false
----
-
-
-# setBuffer
diff --git a/src/content/reference/en/p5.SoundFile/setLoop.mdx b/src/content/reference/en/p5.SoundFile/setLoop.mdx
index af55e6a639..a7a6622b31 100644
--- a/src/content/reference/en/p5.SoundFile/setLoop.mdx
+++ b/src/content/reference/en/p5.SoundFile/setLoop.mdx
@@ -1,21 +1,32 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: >-
+ Set a loop region, and optionally a playback rate, and amplitude for the
+ soundfile.
+line: 220
isConstructor: false
itemtype: method
class: p5.SoundFile
params:
- - name: Boolean
- description: |
- <p>set looping to true or false</p>
- type: Boolean
+ - name: startTime
+ description: Set to True or False in order to set the loop state.
+ type: Number
+ optional: true
+ - name: rate
+ description: Set to True or False in order to set the loop state.
+ type: Number
+ optional: true
+ - name: amp
+ description: Set to True or False in order to set the loop state.
+ type: Number
+ optional: true
+ - name: duration
+ description: Set to True or False in order to set the loop state.
+ type: Number
+ optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/setPath.mdx b/src/content/reference/en/p5.SoundFile/setPath.mdx
index 77449f49bb..0342e6689c 100644
--- a/src/content/reference/en/p5.SoundFile/setPath.mdx
+++ b/src/content/reference/en/p5.SoundFile/setPath.mdx
@@ -1,24 +1,58 @@
---
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
+submodule: SoundFile
+file: src/SoundFile.js
+description: Change the path for the soundfile.
+line: 245
isConstructor: false
itemtype: method
+example:
+ - |-
+
+ <div>
+ <code>
+ let soundSource, cnv, btn;
+
+ function preload() {
+ soundSource = loadSound('//assets/Damscray_-_Dancing_Tiger_01.mp3');
+ }
+
+ function setup() {
+ describe(
+ 'a sketch that says click to play sound. there is a button that says load sound. when you click the button, the path of the sound file player changes and the new sound plays.');
+ cnv = createCanvas(100, 100);
+ cnv.mousePressed(playSound);
+ background(220);
+ textAlign(CENTER);
+ textWrap(WORD);
+ textSize(10);
+ text('click to play sound or the button to load a new sound', 0, 20, 100);
+ btn = createButton('New Sound');
+ btn.mousePressed(setNewPath);
+ soundSource.loop();
+ }
+
+ function playSound() {
+ soundSource.play();
+ }
+
+ function setNewPath() {
+ background(220);
+ text('a new sound was loaded', 0, 20, 100);
+ soundSource.setPath('//assets/Damscray_-_Dancing_Tiger_02.mp3', playSound);
+ }
+ </code>
+ </div>
class: p5.SoundFile
params:
- name: path
- description: |
- <p>path to audio file</p>
+ description: Path to the sound file.
type: String
- - name: callback
- description: |
- <p>Callback</p>
+ - name: successCallback
+ description: Function to call when the sound file is loaded.
type: Function
+ optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundFile/setVolume.mdx b/src/content/reference/en/p5.SoundFile/setVolume.mdx
deleted file mode 100644
index 398a751946..0000000000
--- a/src/content/reference/en/p5.SoundFile/setVolume.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.SoundFile
-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
-chainable: false
----
-
-
-# setVolume
diff --git a/src/content/reference/en/p5.SoundFile/start.mdx b/src/content/reference/en/p5.SoundFile/start.mdx
new file mode 100644
index 0000000000..bfd1dfbea7
--- /dev/null
+++ b/src/content/reference/en/p5.SoundFile/start.mdx
@@ -0,0 +1,15 @@
+---
+title: start
+module: p5.sound
+submodule: SoundFile
+file: src/SoundFile.js
+description: Start the soundfile.
+line: 125
+isConstructor: false
+itemtype: method
+class: p5.SoundFile
+chainable: false
+---
+
+
+# start
diff --git a/src/content/reference/en/p5.SoundFile/stop.mdx b/src/content/reference/en/p5.SoundFile/stop.mdx
index e7cd522978..a7580bd61d 100644
--- a/src/content/reference/en/p5.SoundFile/stop.mdx
+++ b/src/content/reference/en/p5.SoundFile/stop.mdx
@@ -1,21 +1,13 @@
---
title: stop
module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Stop soundfile playback.</p>
-line: 2025
+submodule: SoundFile
+file: src/SoundFile.js
+description: Stop the soundfile.
+line: 151
isConstructor: false
itemtype: method
class: p5.SoundFile
-params:
- - name: startTime
- description: |
- <p>(optional) schedule event to occur
- in seconds from now</p>
- type: Number
- optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5.SoundLoop/bpm.mdx b/src/content/reference/en/p5.SoundLoop/bpm.mdx
deleted file mode 100644
index 910b19e2d4..0000000000
--- a/src/content/reference/en/p5.SoundLoop/bpm.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.SoundLoop
-type: Number
----
-
-
-# bpm
diff --git a/src/content/reference/en/p5.SoundLoop/interval.mdx b/src/content/reference/en/p5.SoundLoop/interval.mdx
deleted file mode 100644
index 8050d46206..0000000000
--- a/src/content/reference/en/p5.SoundLoop/interval.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: interval
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>length of the loops interval</p>
-line: 9770
-isConstructor: false
-itemtype: property
-class: p5.SoundLoop
-type: Number|String
----
-
-
-# interval
diff --git a/src/content/reference/en/p5.SoundLoop/iterations.mdx b/src/content/reference/en/p5.SoundLoop/iterations.mdx
deleted file mode 100644
index 760838e19f..0000000000
--- a/src/content/reference/en/p5.SoundLoop/iterations.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.SoundLoop
-type: Number
----
-
-
-# iterations
diff --git a/src/content/reference/en/p5.SoundLoop/maxIterations.mdx b/src/content/reference/en/p5.SoundLoop/maxIterations.mdx
deleted file mode 100644
index ea95ae0865..0000000000
--- a/src/content/reference/en/p5.SoundLoop/maxIterations.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.SoundLoop
-type: Number
----
-
-
-# maxIterations
diff --git a/src/content/reference/en/p5.SoundLoop/musicalTimeMode.mdx b/src/content/reference/en/p5.SoundLoop/musicalTimeMode.mdx
deleted file mode 100644
index 7ba91c2a01..0000000000
--- a/src/content/reference/en/p5.SoundLoop/musicalTimeMode.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.SoundLoop
-type: Boolean
----
-
-
-# musicalTimeMode
diff --git a/src/content/reference/en/p5.SoundLoop/pause.mdx b/src/content/reference/en/p5.SoundLoop/pause.mdx
deleted file mode 100644
index 0a0e8c920b..0000000000
--- a/src/content/reference/en/p5.SoundLoop/pause.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: pause
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Pause the loop</p>
-line: 9878
-isConstructor: false
-itemtype: method
-class: p5.SoundLoop
-params:
- - name: timeFromNow
- description: |
- <p>schedule a pausing time</p>
- type: Number
- optional: true
-chainable: false
----
-
-
-# pause
diff --git a/src/content/reference/en/p5.SoundLoop/start.mdx b/src/content/reference/en/p5.SoundLoop/start.mdx
deleted file mode 100644
index d37628a424..0000000000
--- a/src/content/reference/en/p5.SoundLoop/start.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: start
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Start the loop</p>
-line: 9841
-isConstructor: false
-itemtype: method
-class: p5.SoundLoop
-params:
- - name: timeFromNow
- description: |
- <p>schedule a starting time</p>
- type: Number
- optional: true
-chainable: false
----
-
-
-# start
diff --git a/src/content/reference/en/p5.SoundLoop/stop.mdx b/src/content/reference/en/p5.SoundLoop/stop.mdx
deleted file mode 100644
index 9814bb55a3..0000000000
--- a/src/content/reference/en/p5.SoundLoop/stop.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: stop
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>Stop the loop</p>
-line: 9860
-isConstructor: false
-itemtype: method
-class: p5.SoundLoop
-params:
- - name: timeFromNow
- description: |
- <p>schedule a stopping time</p>
- type: Number
- optional: true
-chainable: false
----
-
-
-# stop
diff --git a/src/content/reference/en/p5.SoundLoop/syncedStart.mdx b/src/content/reference/en/p5.SoundLoop/syncedStart.mdx
deleted file mode 100644
index b1eecee86e..0000000000
--- a/src/content/reference/en/p5.SoundLoop/syncedStart.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.SoundLoop
-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
-chainable: false
----
-
-
-# syncedStart
diff --git a/src/content/reference/en/p5.SoundLoop/timeSignature.mdx b/src/content/reference/en/p5.SoundLoop/timeSignature.mdx
deleted file mode 100644
index 1c5b2283d3..0000000000
--- a/src/content/reference/en/p5.SoundLoop/timeSignature.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-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
-isConstructor: false
-itemtype: property
-class: p5.SoundLoop
-type: Number
----
-
-
-# timeSignature
diff --git a/src/content/reference/en/p5.SoundRecorder/record.mdx b/src/content/reference/en/p5.SoundRecorder/record.mdx
deleted file mode 100644
index 56d0355790..0000000000
--- a/src/content/reference/en/p5.SoundRecorder/record.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.SoundRecorder
-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
-chainable: false
----
-
-
-# record
diff --git a/src/content/reference/en/p5.SoundRecorder/setInput.mdx b/src/content/reference/en/p5.SoundRecorder/setInput.mdx
deleted file mode 100644
index f8c54a3d63..0000000000
--- a/src/content/reference/en/p5.SoundRecorder/setInput.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5.SoundRecorder
-params:
- - name: unit
- description: |
- <p>p5.sound object or a web audio unit
- that outputs sound</p>
- type: Object
- optional: true
-chainable: false
----
-
-
-# setInput
diff --git a/src/content/reference/en/p5.SoundRecorder/stop.mdx b/src/content/reference/en/p5.SoundRecorder/stop.mdx
deleted file mode 100644
index 3e7f8e25b1..0000000000
--- a/src/content/reference/en/p5.SoundRecorder/stop.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
-isConstructor: false
-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
index b296ccb6af..cfdb770462 100644
--- a/src/content/reference/en/p5.Table/addColumn.mdx
+++ b/src/content/reference/en/p5.Table/addColumn.mdx
@@ -3,61 +3,60 @@ title: addColumn
module: IO
submodule: Table
file: src/io/p5.Table.js
-description: >
- <p>Use <a href="/reference/p5/addColumn/">addColumn()</a> to add a new column
- to a <a href="/reference/p5/p5.Table">Table</a> object.
+description: >-
+ Use <a href="/reference/p5.Table/addColumn/">addColumn()</a> to add a new
+ column to a <a href="/reference/p5/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
+ specified, the new column's title will be null.)
+line: 644
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- - |2-
+ - |-
+ <div>
+ <code>
+ let table;
- <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
+ async function setup() {
+ createCanvas(300, 300);
+ table = await loadTable('//assets/mammals.csv', ',', 'header');
- let table;
+ table.addColumn('carnivore');
+ table.set(0, 'carnivore', 'no');
+ table.set(1, 'carnivore', 'yes');
+ table.set(2, 'carnivore', 'no');
- function preload() {
- //my table is comma separated value "csv"
- //and has a header specifying the columns labels
- table = loadTable('/assets/mammals.csv', 'csv', 'header');
- }
+ fill(0); // Set text color to black
+ textSize(11); // Adjust text size as needed
- function setup() {
- table.addColumn('carnivore');
- table.set(0, 'carnivore', 'no');
- table.set(1, 'carnivore', 'yes');
- table.set(2, 'carnivore', 'no');
+ for (let r = 0; r < table.getRowCount(); r++) {
+ for (let c = 0; c < table.getColumnCount(); c++) {
+ // Keep column spacing consistent (e.g. 80 pixels apart).
+ let x = c * 80 + 10;
+ let y = r * 30 + 20;
+ // Use x directly, rather than multiplying by c again
+ text(table.getString(r, c), x, y);
+ }
+ }
- //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>
+ describe('no image displayed');
+ }
+ </code>
+ </div>
class: p5.Table
-params:
- - name: title
- description: |
- <p>title of the given column</p>
- type: String
- optional: true
+overloads:
+ - params:
+ - name: title
+ description: title of the given column
+ optional: 1
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/addRow.mdx b/src/content/reference/en/p5.Table/addRow.mdx
index b04b28dd5a..1651cb6a51 100644
--- a/src/content/reference/en/p5.Table/addRow.mdx
+++ b/src/content/reference/en/p5.Table/addRow.mdx
@@ -4,8 +4,8 @@ module: IO
submodule: Table
file: src/io/p5.Table.js
description: >
- <p>Use <a href="/reference/p5/addRow/">addRow()</a> to add a new row of data
- to a <a href="/reference/p5/p5.Table">p5.Table</a> object. By default,
+ <p>Use <a href="/reference/p5.Table/addRow/">addRow()</a> to add a new row of
+ data to a <a href="/reference/p5/p5.Table">p5.Table</a> object. By default,
an empty row is created. Typically, you would store a reference to
@@ -18,56 +18,70 @@ description: >
as a parameter, then that row is
duplicated and added to the table.</p>
-line: 90
+line: 85
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- - |2-
+ - |-
+ <div>
+ <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
- <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;
- let table;
+ async function setup() {
+ // Create a 300x300 canvas
+ createCanvas(300, 300);
- function preload() {
- //my table is comma separated value "csv"
- //and has a header specifying the columns labels
- table = loadTable('/assets/mammals.csv', 'csv', 'header');
- }
+ // Load the CSV file from the assets folder with a header row
+ table = await loadTable('/assets/mammals.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');
+ // Add a new row for "Wolf"
+ 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));
+ // Set text properties
+ fill(0); // Text color: black
+ textSize(12); // Adjust text size as needed
- describe('no image displayed');
- }
- </code>
- </div>
+ // Display the table data on the canvas
+ // Each cell is positioned based on its row and column
+ for (let r = 0; r < table.getRowCount(); r++) {
+ for (let c = 0; c < table.getColumnCount(); c++) {
+ let x = c * 50 + 10; // Horizontal spacing for each column
+ let y = r * 30 + 20; // Vertical spacing for each row
+ text(table.getString(r, c), x * c, y);
+ }
+ }
+
+ describe('no image displayed');
+ }
+ </code>
+ </div>
class: p5.Table
-params:
- - name: row
- description: |
- <p>row to be added to the table</p>
- type: p5.TableRow
- optional: true
return:
description: the row that was added
type: p5.TableRow
+overloads:
+ - params:
+ - name: row
+ description: row to be added to the table
+ optional: 1
+ type: p5.TableRow
+ return:
+ description: the row that was added
+ type: p5.TableRow
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/clearRows.mdx b/src/content/reference/en/p5.Table/clearRows.mdx
index 7e1fd8f5a3..fd518c63b7 100644
--- a/src/content/reference/en/p5.Table/clearRows.mdx
+++ b/src/content/reference/en/p5.Table/clearRows.mdx
@@ -3,42 +3,54 @@ 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
+description: |-
+ Removes all rows from a Table. While all rows are removed,
+ columns and column titles are maintained.
+line: 598
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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>
+ - |-
+ <div>
+ <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;
+
+ async function setup() {
+ // Create a 200x200 canvas
+ createCanvas(200, 200);
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Clear all rows from the table
+ table.clearRows();
+
+ // Set text properties
+ fill(0); // Text color: black
+ textSize(12); // Adjust text size as needed
+
+ // Display the number of rows and columns on the canvas
+ text(table.getRowCount() + ' total rows in table', 10, 30);
+ text(table.getColumnCount() + ' total columns in table', 10, 60);
+
+ describe('no image displayed');
+ }
+ </code>
+ </div>
class: p5.Table
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/columns.mdx b/src/content/reference/en/p5.Table/columns.mdx
index fc4d501271..6b485a9dd6 100644
--- a/src/content/reference/en/p5.Table/columns.mdx
+++ b/src/content/reference/en/p5.Table/columns.mdx
@@ -3,45 +3,42 @@ 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
+description: >-
+ 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
+ loaded with the "header" parameter.
+line: 1360
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: property
example:
- |-
-
- <div class="norender">
+ <div >
<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');
- }
+ async function setup() {
+ // Create a 200x200 canvas
+ createCanvas(200, 200);
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Set text properties for drawing on the canvas
+ fill(0); // Set text color to black
+ textSize(12); // Adjust text size as needed
- function setup() {
- //print the column names
+ // Display the column names on the canvas
for (let c = 0; c < table.getColumnCount(); c++) {
- print('column ' + c + ' is named ' + table.columns[c]);
+ text('column ' + c + ' is named ' + table.columns[c], 10, 30 + c * 20);
}
}
</code>
</div>
class: p5.Table
-type: '{String[]}'
---
diff --git a/src/content/reference/en/p5.Table/findRow.mdx b/src/content/reference/en/p5.Table/findRow.mdx
index 83bd28757c..0641193b5e 100644
--- a/src/content/reference/en/p5.Table/findRow.mdx
+++ b/src/content/reference/en/p5.Table/findRow.mdx
@@ -3,59 +3,64 @@ 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
+description: |-
+ 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
+ either its ID or title.
+line: 284
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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>
+ - |-
+ <div>
+ <code>
+ let table;
+
+ async function setup() {
+ // Create a 100x100 canvas
+ createCanvas(100, 100);
+ background(255); // Set background to white
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Find the row with the animal named "Zebra"
+ let row = table.findRow('Zebra', 'name');
+
+ // Get the species from the found row
+ let species = row.getString('species');
+
+ // Set text properties and display the species on the canvas
+ fill(0); // Set text color to black
+ textSize(12); // Adjust text size as needed
+ text(species, 10, 30);
+
+ describe('no image displayed');
+ }
+ </code>
+ </div>
class: p5.Table
-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
return:
description: ''
type: p5.TableRow
+overloads:
+ - params:
+ - name: value
+ description: The value to match
+ type: String
+ - name: column
+ description: |-
+ ID number or title of the
+ column to search
+ type: Integer|String
+ return:
+ description: ''
+ type: p5.TableRow
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/findRows.mdx b/src/content/reference/en/p5.Table/findRows.mdx
index c62f250adb..62393b56a3 100644
--- a/src/content/reference/en/p5.Table/findRows.mdx
+++ b/src/content/reference/en/p5.Table/findRows.mdx
@@ -3,64 +3,69 @@ title: findRows
module: IO
submodule: Table
file: src/io/p5.Table.js
-description: |
- <p>Finds the rows in the Table that contain the value
+description: |-
+ 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>
+ specified by either its ID or title.
line: 351
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- - |2-
+ - |-
+ <div>
+ <code>
+ let table;
- <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
+ async function setup() {
+ // Create a 200x200 canvas
+ createCanvas(200, 200);
+ background(255); // Set background to white
- let table;
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
- function preload() {
- //my table is comma separated value "csv"
- //and has a header specifying the columns labels
- table = loadTable('/assets/mammals.csv', 'csv', 'header');
- }
+ // Add another goat entry
+ let newRow = table.addRow();
+ newRow.setString('id', table.getRowCount() - 1);
+ newRow.setString('species', 'Scape Goat');
+ newRow.setString('name', 'Goat');
- 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 rows where the name is "Goat"
+ let rows = table.findRows('Goat', 'name');
- //find the rows containing animals named Goat
- let rows = table.findRows('Goat', 'name');
- print(rows.length + ' Goats found');
- describe('no image displayed');
- }
- </code>
- </div>
+ // Set text properties
+ fill(0); // Set text color to black
+ textSize(12); // Adjust text size as needed
+
+ // Display the result on the canvas
+ text(rows.length + ' Goats found', 10, 30);
+
+ describe('no image displayed');
+ }
+ </code>
+ </div>
class: p5.Table
-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
return:
description: An Array of TableRow objects
type: 'p5.TableRow[]'
+overloads:
+ - params:
+ - name: value
+ description: The value to match
+ type: String
+ - name: column
+ description: |-
+ ID number or title of the
+ column to search
+ type: Integer|String
+ return:
+ description: An Array of TableRow objects
+ type: 'p5.TableRow[]'
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/get.mdx b/src/content/reference/en/p5.Table/get.mdx
index 6995529f73..5cfd382889 100644
--- a/src/content/reference/en/p5.Table/get.mdx
+++ b/src/content/reference/en/p5.Table/get.mdx
@@ -3,57 +3,63 @@ 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.
+description: |-
+ 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
+ either its ID or title.
+line: 1112
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- |-
-
- <div class="norender">
+ <div>
<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');
- }
+ async function setup() {
+ // Create a 100x100 canvas
+ createCanvas(100, 100);
+ background(255); // Set background to white
+
+ // Load the CSV file from the assets folder with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Set text properties for drawing on the canvas
+ fill(0); // Text color: black
+ textSize(12); // Adjust text size as needed
+
+ // Get the values from the table
+ let value1 = table.get(0, 1); // Using column index (1) => "Capra hircus"
+ let value2 = table.get(0, 'species'); // Using column name => "Capra hircus"
+
+ // Display the values on the canvas
+ text(value1, 10, 30);
+ text(value2, 10, 60);
- function setup() {
- print(table.get(0, 1));
- //Capra hircus
- print(table.get(0, 'species'));
- //Capra hircus
describe('no image displayed');
}
</code>
</div>
class: p5.Table
-params:
- - name: row
- description: |
- <p>row ID</p>
- type: Integer
- - name: column
- description: |
- <p>columnName (string) or
- ID (number)</p>
- type: String|Integer
return:
description: ''
type: String|Number
+overloads:
+ - params:
+ - name: row
+ description: row ID
+ type: Integer
+ - name: column
+ description: |-
+ columnName (string) or
+ ID (number)
+ type: String|Integer
+ return:
+ description: ''
+ type: String|Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/getArray.mdx b/src/content/reference/en/p5.Table/getArray.mdx
index ec4c973a06..42190b4282 100644
--- a/src/content/reference/en/p5.Table/getArray.mdx
+++ b/src/content/reference/en/p5.Table/getArray.mdx
@@ -3,37 +3,41 @@ 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
+description: Retrieves all table data and returns it as a multidimensional array.
+line: 1317
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- |-
-
- <div class="norender">
+ <div>
<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');
- }
+ async function setup() {
+ // Create a 200x200 canvas and set a white background
+ createCanvas(200, 200);
+ background(255);
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
- function setup() {
+ // Get the CSV data as a 2D array
let tableArray = table.getArray();
+
+ // Set text properties
+ fill(0); // Set text color to black
+ textSize(12); // Adjust text size as needed
+
+ // Display each row of the CSV on the canvas
+ // Each row is displayed on a separate line
for (let i = 0; i < tableArray.length; i++) {
- print(tableArray[i]);
+ let rowText = tableArray[i].join(", ");
+ text(rowText, 10, 20 + i * 50 + 30);
}
+
describe('no image displayed');
}
</code>
@@ -42,6 +46,11 @@ class: p5.Table
return:
description: ''
type: Array
+overloads:
+ - params: []
+ return:
+ description: ''
+ type: Array
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/getColumn.mdx b/src/content/reference/en/p5.Table/getColumn.mdx
index 26c87f0c7f..2c78142a80 100644
--- a/src/content/reference/en/p5.Table/getColumn.mdx
+++ b/src/content/reference/en/p5.Table/getColumn.mdx
@@ -3,50 +3,53 @@ 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>
+description: |-
+ Retrieves all values in the specified column, and returns them
+ as an array. The column may be specified by either its ID or title.
line: 542
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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
- <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;
+ *
+ async function setup() {
+ // The table is comma separated value "csv"
+ // and has a header specifying the columns labels.
+ table = await loadTable('/assets/mammals.csv', 'csv', 'header');
- 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>
+ //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>
class: p5.Table
-params:
- - name: column
- description: |
- <p>String or Number of the column to return</p>
- type: String|Number
return:
description: Array of column values
type: Array
+overloads:
+ - params:
+ - name: column
+ description: String or Number of the column to return
+ type: String|Number
+ return:
+ description: Array of column values
+ type: Array
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/getColumnCount.mdx b/src/content/reference/en/p5.Table/getColumnCount.mdx
index c69db04a69..a5b5b34527 100644
--- a/src/content/reference/en/p5.Table/getColumnCount.mdx
+++ b/src/content/reference/en/p5.Table/getColumnCount.mdx
@@ -3,43 +3,47 @@ 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
+description: Returns the total number of columns in a Table.
+line: 679
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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
- <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;
- let table;
+ async function setup() {
+ table = await loadTable('/assets/blobs.csv');
- function preload() {
- table = loadTable('/assets/blobs.csv');
- }
+ createCanvas(200, 100);
+ textAlign(CENTER);
+ background(255);
+ }
- 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>
+ function draw() {
+ let numOfColumn = table.getColumnCount();
+ text('There are ' + numOfColumn + ' columns in the table.', 100, 50);
+ }
+ </code>
+ </div>
class: p5.Table
return:
description: Number of columns in this table
type: Integer
+overloads:
+ - params: []
+ return:
+ description: Number of columns in this table
+ type: Integer
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/getNum.mdx b/src/content/reference/en/p5.Table/getNum.mdx
index 9b1560b907..61af44aa28 100644
--- a/src/content/reference/en/p5.Table/getNum.mdx
+++ b/src/content/reference/en/p5.Table/getNum.mdx
@@ -3,55 +3,59 @@ 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.
+description: |-
+ 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
+ either its ID or title.
+line: 1157
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- |-
-
- <div class="norender">
+ <div>
<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');
- }
+ async function setup() {
+ // Create a 100x100 canvas
+ createCanvas(100, 100);
+ background(255); // Set background to white
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Compute the result: id at row 1, column 0 plus 100 (i.e. 1 + 100 = 101)
+ let result = table.getNum(1, 0) + 100;
+
+ // Set text properties and display the result on the canvas
+ fill(0); // Set text color to black
+ textSize(12); // Adjust text size as needed
+ text(result, 10, 30); // Display the result at position (10, 30)
- function setup() {
- print(table.getNum(1, 0) + 100);
- //id 1 + 100 = 101
describe('no image displayed');
}
</code>
</div>
class: p5.Table
-params:
- - name: row
- description: |
- <p>row ID</p>
- type: Integer
- - name: column
- description: |
- <p>columnName (string) or
- ID (number)</p>
- type: String|Integer
return:
description: ''
type: Number
+overloads:
+ - params:
+ - name: row
+ description: row ID
+ type: Integer
+ - name: column
+ description: |-
+ columnName (string) or
+ ID (number)
+ type: String|Integer
+ return:
+ description: ''
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/getObject.mdx b/src/content/reference/en/p5.Table/getObject.mdx
index 6e73d5e2ae..b7cc31bafc 100644
--- a/src/content/reference/en/p5.Table/getObject.mdx
+++ b/src/content/reference/en/p5.Table/getObject.mdx
@@ -3,16 +3,18 @@ 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
+description: |-
+ 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
+ title.
+line: 1257
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
// Given the CSV file "mammals.csv"
@@ -25,13 +27,11 @@ example:
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');
- }
+ async function setup() {
+ // The table is comma separated value "csv"
+ // and has a header specifying the columns labels.
+ table = await loadTable('/assets/mammals.csv', 'csv', 'header');
- function setup() {
let tableObject = table.getObject();
print(tableObject);
@@ -42,16 +42,20 @@ example:
</code>
</div>
class: p5.Table
-params:
- - name: headerColumn
- description: |
- <p>Name of the column which should be used to
- title each row object (optional)</p>
- type: String
- optional: true
return:
description: ''
type: Object
+overloads:
+ - params:
+ - name: headerColumn
+ description: |-
+ Name of the column which should be used to
+ title each row object (optional)
+ optional: 1
+ type: String
+ return:
+ description: ''
+ type: Object
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/getRow.mdx b/src/content/reference/en/p5.Table/getRow.mdx
index 18ea56fb00..6a424624d9 100644
--- a/src/content/reference/en/p5.Table/getRow.mdx
+++ b/src/content/reference/en/p5.Table/getRow.mdx
@@ -3,41 +3,41 @@ title: getRow
module: IO
submodule: Table
file: src/io/p5.Table.js
-description: >
- <p>Returns a reference to the specified <a
+description: >-
+ Returns a reference to the specified <a
href="/reference/p5/p5.TableRow">p5.TableRow</a>. The reference
- can then be used to get and set values of the selected row.</p>
-line: 198
+ can then be used to get and set values of the selected row.
+line: 186
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- |-
-
- <div class="norender">
+ <div>
<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');
- }
+ async function setup() {
+ // Create a 200x200 canvas
+ createCanvas(200, 200);
+ background(255); // Set background to white
- function setup() {
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Get the row at index 1 (second row)
let row = table.getRow(1);
- //print it column by column
- //note: a row is an object, not an array
+
+ // Set text properties for drawing on the canvas
+ fill(0); // Set text color to black
+ textSize(12); // Set the text size
+
+ // Loop over each column in the row and display its value on the canvas
for (let c = 0; c < table.getColumnCount(); c++) {
- print(row.getString(c));
+ text(row.getString(c), 10, 20 + c * 50 + 20);
}
describe('no image displayed');
@@ -45,14 +45,17 @@ example:
</code>
</div>
class: p5.Table
-params:
- - name: rowID
- description: |
- <p>ID number of the row to get</p>
- type: Integer
return:
description: <a href="#/p5.TableRow">p5.TableRow</a> object
type: p5.TableRow
+overloads:
+ - params:
+ - name: rowID
+ description: ID number of the row to get
+ type: Integer
+ return:
+ description: <a href="#/p5.TableRow">p5.TableRow</a> object
+ type: p5.TableRow
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/getRowCount.mdx b/src/content/reference/en/p5.Table/getRowCount.mdx
index 81bd3955a0..86406814db 100644
--- a/src/content/reference/en/p5.Table/getRowCount.mdx
+++ b/src/content/reference/en/p5.Table/getRowCount.mdx
@@ -3,43 +3,47 @@ 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
+description: Returns the total number of rows in a Table.
+line: 713
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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
- <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;
- let table;
+ async function setup() {
+ table = await loadTable('/assets/blobs.csv');
- function preload() {
- table = loadTable('/assets/blobs.csv');
- }
+ createCanvas(200, 100);
+ textAlign(CENTER);
+ background(255);
+ }
- function setup() {
- createCanvas(200, 100);
- textAlign(CENTER);
- background(255);
- }
-
- function draw() {
- text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);
- }
- </code>
- </div>
+ function draw() {
+ text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);
+ }
+ </code>
+ </div>
class: p5.Table
return:
description: Number of rows in this table
type: Integer
+overloads:
+ - params: []
+ return:
+ description: Number of rows in this table
+ type: Integer
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/getRows.mdx b/src/content/reference/en/p5.Table/getRows.mdx
index 58e7cfd126..5f371a73bd 100644
--- a/src/content/reference/en/p5.Table/getRows.mdx
+++ b/src/content/reference/en/p5.Table/getRows.mdx
@@ -3,54 +3,66 @@ 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="/reference/p5/p5.TableRow">p5.TableRow</a>s.</p>
-line: 242
+description: >-
+ Gets all rows from the table. Returns an array of <a
+ href="/reference/p5/p5.TableRow">p5.TableRow</a>s.
+line: 238
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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>
+ - |-
+ <div>
+ <code>
+ let table;
+
+ async function setup() {
+ // Create a 200x200 canvas and set a white background
+ createCanvas(200, 200);
+ background(255);
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ let rows = table.getRows();
+
+ // Warning: rows is an array of objects.
+ // Set the 'name' of each row to 'Unicorn'
+ for (let r = 0; r < rows.length; r++) {
+ rows[r].set('name', 'Unicorn');
+ }
+
+ // Set text properties
+ fill(0); // Set text color to black
+ textSize(12); // Adjust text size as needed
+
+ // Display the modified table values on the canvas
+ // We'll join each row's values with a space and display each row on a new line.
+ let y = 20; // Starting y position
+ for (let r = 0; r < table.getRowCount(); r++) {
+ let rowText = "";
+ for (let c = 0; c < table.getColumnCount(); c++) {
+ rowText += table.getString(r, c) + " ";
+ }
+ text(rowText, 10, y * 2);
+ y += 20; // Move to next line
+ }
+
+ describe('no image displayed');
+ }
+ </code>
+ </div>
class: p5.Table
return:
description: Array of <a href="#/p5.TableRow">p5.TableRow</a>s
type: 'p5.TableRow[]'
+overloads:
+ - params: []
+ return:
+ description: Array of <a href="#/p5.TableRow">p5.TableRow</a>s
+ type: 'p5.TableRow[]'
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/getString.mdx b/src/content/reference/en/p5.Table/getString.mdx
index b396c75852..6ec1e4a144 100644
--- a/src/content/reference/en/p5.Table/getString.mdx
+++ b/src/content/reference/en/p5.Table/getString.mdx
@@ -3,62 +3,76 @@ 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.
+description: |-
+ 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
+ either its ID or title.
+line: 1215
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- |-
-
- <div class="norender">
+ <div>
<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');
- }
+ async function setup() {
+ // Create a 200x200 canvas
+ createCanvas(200, 200);
+ background(255); // Set background to white
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Set text properties
+ fill(0); // Text color: black
+ textSize(12); // Adjust text size as needed
+
+ // Display each table cell value on the canvas one below the other.
+ // We use a variable 'y' to increment the vertical position.
+ let y = 20;
+ text(table.getString(0, 0), 10, y); // 0
+ y += 20;
+ text(table.getString(0, 1), 10, y); // Capra hircus
+ y += 20;
+ text(table.getString(0, 2), 10, y); // Goat
+ y += 20;
+ text(table.getString(1, 0), 10, y); // 1
+ y += 20;
+ text(table.getString(1, 1), 10, y); // Panthera pardus
+ y += 20;
+ text(table.getString(1, 2), 10, y); // Leopard
+ y += 20;
+ text(table.getString(2, 0), 10, y); // 2
+ y += 20;
+ text(table.getString(2, 1), 10, y); // Equus zebra
+ y += 20;
+ text(table.getString(2, 2), 10, y); // Zebra
- 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>
class: p5.Table
-params:
- - name: row
- description: |
- <p>row ID</p>
- type: Integer
- - name: column
- description: |
- <p>columnName (string) or
- ID (number)</p>
- type: String|Integer
return:
description: ''
type: String
+overloads:
+ - params:
+ - name: row
+ description: row ID
+ type: Integer
+ - name: column
+ description: |-
+ columnName (string) or
+ ID (number)
+ type: String|Integer
+ return:
+ description: ''
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/matchRow.mdx b/src/content/reference/en/p5.Table/matchRow.mdx
index c1477fd649..b7a55e4471 100644
--- a/src/content/reference/en/p5.Table/matchRow.mdx
+++ b/src/content/reference/en/p5.Table/matchRow.mdx
@@ -3,58 +3,64 @@ 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
+description: |-
+ 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
+ specified by either its ID or title.
+line: 412
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- |-
-
- <div class="norender">
+ <div>
<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');
- }
+ async function setup() {
+ // Create a 200x200 canvas
+ createCanvas(200, 200);
+ background(255); // Set background to white
- function setup() {
- //Search using specified regex on a given column, return TableRow object
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Search using the specified regex on column index 1 (species)
let mammal = table.matchRow(new RegExp('ant'), 1);
- print(mammal.getString(1));
- //Output "Panthera pardus"
+ let species = mammal.getString(1); // "Panthera pardus"
+
+ // Set text properties for drawing on the canvas
+ fill(0); // Text color: black
+ textSize(12); // Adjust text size as needed
+
+ // Display the species on the canvas
+ text(species, 10, 30);
+
+ describe('no image displayed');
}
</code>
</div>
class: p5.Table
-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
return:
description: TableRow object
type: p5.TableRow
+overloads:
+ - params:
+ - name: regexp
+ description: The regular expression to match
+ type: String|RegExp
+ - name: column
+ description: |-
+ The column ID (number) or
+ title (string)
+ type: String|Integer
+ return:
+ description: TableRow object
+ type: p5.TableRow
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/matchRows.mdx b/src/content/reference/en/p5.Table/matchRows.mdx
index fae3c2372c..488c6c7c1f 100644
--- a/src/content/reference/en/p5.Table/matchRows.mdx
+++ b/src/content/reference/en/p5.Table/matchRows.mdx
@@ -3,36 +3,43 @@ 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,
+description: |-
+ 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
+ column to search may be specified by either its ID or title.
+line: 490
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- |-
-
- <div class="norender">
+ <div>
<code>
let table;
function setup() {
- table = new p5.Table();
+ // Create a 200x200 canvas and set a white background
+ createCanvas(200, 200);
+ background(255);
+ // Create a new p5.Table and add columns
+ table = new p5.Table();
table.addColumn('name');
table.addColumn('type');
- let newRow = table.addRow();
+ // Add rows to the table
+ let newRow = table.addRow();
newRow.setString('name', 'Lion');
- newRow.setString('type', 'Mammal');
+ newRow.setString('type', 'Mammal');
newRow = table.addRow();
newRow.setString('name', 'Snake');
newRow.setString('type', 'Reptile');
- newRow = table.addRow();
+ newRow = table.addRow();
newRow.setString('name', 'Mosquito');
newRow.setString('type', 'Insect');
@@ -40,31 +47,41 @@ example:
newRow.setString('name', 'Lizard');
newRow.setString('type', 'Reptile');
+ // Search for rows where the "type" starts with "R"
let rows = table.matchRows('R.*', 'type');
+
+ // Set text properties for drawing on the canvas
+ fill(0); // Text color: black
+ textSize(12); // Text size
+
+ // Display each matching row on the canvas
+ let y = 20;
for (let i = 0; i < rows.length; i++) {
- print(rows[i].getString('name') + ': ' + rows[i].getString('type'));
+ let output = rows[i].getString('name') + ': ' + rows[i].getString('type');
+ text(output, 10, y);
+ y += 20;
}
}
- // Sketch prints:
- // Snake: Reptile
- // Lizard: Reptile
</code>
</div>
class: p5.Table
-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
return:
description: An Array of TableRow objects
type: 'p5.TableRow[]'
+overloads:
+ - params:
+ - name: regexp
+ description: The regular expression to match
+ type: String
+ - name: column
+ description: |-
+ The column ID (number) or
+ title (string)
+ optional: 1
+ type: String|Integer
+ return:
+ description: An Array of TableRow objects
+ type: 'p5.TableRow[]'
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/removeColumn.mdx b/src/content/reference/en/p5.Table/removeColumn.mdx
index 591a6f546a..26826ae2f4 100644
--- a/src/content/reference/en/p5.Table/removeColumn.mdx
+++ b/src/content/reference/en/p5.Table/removeColumn.mdx
@@ -3,9 +3,9 @@ title: removeColumn
module: IO
submodule: Table
file: src/io/p5.Table.js
-description: >
- <p>Use <a href="/reference/p5/removeColumn/">removeColumn()</a> to remove an
- existing column from a Table
+description: >-
+ Use <a href="/reference/p5.Table/removeColumn/">removeColumn()</a> to remove
+ an existing column from a Table
object. The column to be removed may be identified by either
@@ -13,44 +13,50 @@ description: >
removeColumn(0) would remove the first column, removeColumn(1)
- would remove the second column, and so on.</p>
-line: 888
+ would remove the second column, and so on.
+line: 894
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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>
+ - |-
+ <div>
+ <code>
+ let table;
+
+ async function setup() {
+ // Create a 100x100 canvas
+ createCanvas(100, 100);
+ background(255); // Set background to white
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Remove the "id" column
+ table.removeColumn('id');
+
+ // Get the remaining column count
+ let colCount = table.getColumnCount();
+
+ // Set text properties
+ fill(0); // Text color: black
+ textSize(12); // Adjust text size as needed
+
+ // Display the column count on the canvas
+ text(colCount, 40, 50);
+
+ describe('no image displayed');
+ }
+ </code>
+ </div>
class: p5.Table
-params:
- - name: column
- description: |
- <p>columnName (string) or ID (number)</p>
- type: String|Integer
+overloads:
+ - params:
+ - name: column
+ description: columnName (string) or ID (number)
+ type: String|Integer
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/removeRow.mdx b/src/content/reference/en/p5.Table/removeRow.mdx
index 2e19e8d3bc..7f543ef84e 100644
--- a/src/content/reference/en/p5.Table/removeRow.mdx
+++ b/src/content/reference/en/p5.Table/removeRow.mdx
@@ -3,51 +3,56 @@ title: removeRow
module: IO
submodule: Table
file: src/io/p5.Table.js
-description: |
- <p>Removes a row from the table object.</p>
-line: 152
+description: Removes a row from the table object.
+line: 141
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- |-
-
- <div class="norender">
+ <div>
<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');
- }
+ async function setup() {
+ // Create a 200x200 canvas and set a white background
+ createCanvas(200, 200);
+ background(255);
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
- function setup() {
- //remove the first row
+ // Remove the first row from the table
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));
+ // Set text properties for drawing on the canvas
+ fill(0); // Set text color to black
+ textSize(12); // Adjust text size as needed
+
+ // Display the table values on the canvas:
+ // Each row's cell values are joined into a single string and drawn on a new line.
+ let y = 20; // Starting vertical position
+ for (let r = 0; r < table.getRowCount(); r++) {
+ let rowText = "";
+ for (let c = 0; c < table.getColumnCount(); c++) {
+ rowText += table.getString(r, c) + " ";
+ }
+ text(rowText, 18, y * 3);
+ y += 20;
+ }
describe('no image displayed');
}
</code>
</div>
class: p5.Table
-params:
- - name: id
- description: |
- <p>ID number of the row to remove</p>
- type: Integer
+overloads:
+ - params:
+ - name: id
+ description: ID number of the row to remove
+ type: Integer
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/removeTokens.mdx b/src/content/reference/en/p5.Table/removeTokens.mdx
index 5af655011c..e637ef6fa7 100644
--- a/src/content/reference/en/p5.Table/removeTokens.mdx
+++ b/src/content/reference/en/p5.Table/removeTokens.mdx
@@ -8,47 +8,49 @@ description: |
<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
+line: 754
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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>
+ - |-
+ <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>
class: p5.Table
-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
+overloads:
+ - params:
+ - name: chars
+ description: String listing characters to be removed
+ type: String
+ - name: column
+ description: |-
+ Column ID (number)
+ or name (string)
+ optional: 1
+ type: String|Integer
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/rows.mdx b/src/content/reference/en/p5.Table/rows.mdx
index 127ed88cfa..5029d55aa0 100644
--- a/src/content/reference/en/p5.Table/rows.mdx
+++ b/src/content/reference/en/p5.Table/rows.mdx
@@ -3,17 +3,20 @@ title: rows
module: IO
submodule: Table
file: src/io/p5.Table.js
-description: >
- <p>An array containing the <a href="/reference/p5/p5.Table">p5.TableRow</a>
+description: >-
+ An array containing the <a href="/reference/p5/p5.Table">p5.TableRow</a>
objects that make up the
rows of the table. The same result as calling <a
- href="/reference/p5/getRows/">getRows()</a></p>
-line: 80
+ href="/reference/p5.Table/getRows/">getRows()</a>
+line: 1360
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: property
+example: []
class: p5.Table
-type: '{p5.TableRow[]}'
---
diff --git a/src/content/reference/en/p5.Table/set.mdx b/src/content/reference/en/p5.Table/set.mdx
index bcc01a5657..379963f2e9 100644
--- a/src/content/reference/en/p5.Table/set.mdx
+++ b/src/content/reference/en/p5.Table/set.mdx
@@ -3,62 +3,68 @@ 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.
+description: |-
+ 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
+ by either its ID or title.
+line: 968
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- |-
-
- <div class="norender">
+ <div>
<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');
- }
+ async function setup() {
+ // Create a 200x200 canvas and set a white background
+ createCanvas(200, 200);
+ background(255);
- function setup() {
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Update the first row: change species to "Canis Lupus" and name to "Wolf"
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));
+ // Set text properties for drawing on the canvas
+ fill(0); // Text color: black
+ textSize(12); // Adjust text size as needed
+
+ // Display the table values on the canvas:
+ // Each row's values are concatenated into a single string and displayed on a new line.
+ let y = 20; // Starting vertical position
+ for (let r = 0; r < table.getRowCount(); r++) {
+ let rowText = "";
+ for (let c = 0; c < table.getColumnCount(); c++) {
+ rowText += table.getString(r, c) + " ";
+ }
+ text(rowText, 10, y * 2.5);
+ y += 20;
+ }
describe('no image displayed');
}
</code>
</div>
class: p5.Table
-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
+overloads:
+ - params:
+ - name: row
+ description: row ID
+ type: Integer
+ - name: column
+ description: |-
+ column ID (Number)
+ or title (String)
+ type: String|Integer
+ - name: value
+ description: value to assign
+ type: String|Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/setNum.mdx b/src/content/reference/en/p5.Table/setNum.mdx
index a553973ca2..b1471b5ae4 100644
--- a/src/content/reference/en/p5.Table/setNum.mdx
+++ b/src/content/reference/en/p5.Table/setNum.mdx
@@ -3,59 +3,60 @@ 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.
+description: |-
+ 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
+ by either its ID or title.
+line: 1013
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
example:
- |-
-
- <div class="norender">
+ <div>
<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');
- }
+ async function setup() {
+ // Create a 100x100 canvas and set a white background
+ createCanvas(100, 100);
+ background(255);
- function setup() {
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Set the value in row 1, column "id" to the number 1
table.setNum(1, 'id', 1);
- print(table.getColumn(0));
- //["0", 1, "2"]
+ // Get the first column as an array and join its values into a string for display.
+ let col0 = table.getColumn(0); // Expected output: ["0", 1, "2"]
+ let output = col0.join(", ");
+
+ // Set text properties and display the output on the canvas
+ fill(0); // Text color: black
+ textSize(12); // Adjust text size as needed
+ text(output, 30, 50);
describe('no image displayed');
}
</code>
</div>
class: p5.Table
-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
+overloads:
+ - params:
+ - name: row
+ description: row ID
+ type: Integer
+ - name: column
+ description: |-
+ column ID (Number)
+ or title (String)
+ type: String|Integer
+ - name: value
+ description: value to assign
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/setString.mdx b/src/content/reference/en/p5.Table/setString.mdx
index 92b93cb4c1..b1345467b0 100644
--- a/src/content/reference/en/p5.Table/setString.mdx
+++ b/src/content/reference/en/p5.Table/setString.mdx
@@ -3,59 +3,70 @@ 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.
+description: |-
+ 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
+ by either its ID or title.
+line: 1067
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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
-
+ <div>
+ <code>
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');
- }
+ async function setup() {
+ // Create a 200x200 canvas and set a white background
+ createCanvas(200, 200);
+ background(255);
- function setup() {
- //add a row
+ // Load the CSV file from the assets folder with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Add a new row with the new animal data
let newRow = table.addRow();
newRow.setString('id', table.getRowCount() - 1);
newRow.setString('species', 'Canis Lupus');
newRow.setString('name', 'Wolf');
- print(table.getArray());
+ // Convert the table to a 2D array
+ let tableArray = table.getArray();
+
+ // Set text properties
+ fill(0); // Set text color to black
+ textSize(12); // Adjust text size as needed
+
+ // Display each row of the table on the canvas
+ let y = 20; // Starting y position
+ for (let i = 0; i < tableArray.length; i++) {
+ // Join the values of each row with a comma separator
+ let rowText = tableArray[i].join(', ');
+ text(rowText, 15, y * 2);
+ y += 20; // Increment y position for the next row
+ }
describe('no image displayed');
}
- </code></div>
+ </code>
+ </div>
class: p5.Table
-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
+overloads:
+ - params:
+ - name: row
+ description: row ID
+ type: Integer
+ - name: column
+ description: |-
+ column ID (Number)
+ or title (String)
+ type: String|Integer
+ - name: value
+ description: value to assign
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.Table/trim.mdx b/src/content/reference/en/p5.Table/trim.mdx
index a7d3a77f3d..5bf8199036 100644
--- a/src/content/reference/en/p5.Table/trim.mdx
+++ b/src/content/reference/en/p5.Table/trim.mdx
@@ -3,48 +3,51 @@ title: trim
module: IO
submodule: Table
file: src/io/p5.Table.js
-description: |
- <p>Trims leading and trailing whitespace, such as spaces and tabs,
+description: |-
+ 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
+ may be referenced by either its ID or title.
+line: 823
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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>
+ - |-
+ <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>
class: p5.Table
-params:
- - name: column
- description: |
- <p>Column ID (number)
- or name (string)</p>
- type: String|Integer
- optional: true
+overloads:
+ - params:
+ - name: column
+ description: |-
+ Column ID (number)
+ or name (string)
+ optional: 1
+ type: String|Integer
chainable: false
---
diff --git a/src/content/reference/en/p5.TableRow/get.mdx b/src/content/reference/en/p5.TableRow/get.mdx
index 5966abe2ec..dac40dd239 100644
--- a/src/content/reference/en/p5.TableRow/get.mdx
+++ b/src/content/reference/en/p5.TableRow/get.mdx
@@ -3,53 +3,62 @@ 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
+description: |-
+ Retrieves a value from the TableRow's specified column.
+ The column may be specified by either its ID or title.
+line: 235
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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>
+ - |-
+ <div>
+ <code>
+ let table;
+
+ async function setup() {
+ // Create a 200x100 canvas and set a white background
+ createCanvas(200, 100);
+ background(255);
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Extract the names from each row and store them in an array
+ let names = [];
+ let rows = table.getRows();
+ for (let r = 0; r < rows.length; r++) {
+ names.push(rows[r].get('name'));
+ }
+
+ // Set text properties and display the names on the canvas
+ fill(0); // Set text color to black
+ textSize(12); // Set text size
+
+ // Join names into a single string separated by commas
+ let namesText = names.join(', ');
+ text(namesText, 35, 50);
+
+ describe('no image displayed');
+ }
+ </code>
+ </div>
class: p5.TableRow
-params:
- - name: column
- description: |
- <p>columnName (string) or
- ID (number)</p>
- type: String|Integer
return:
description: ''
type: String|Number
+overloads:
+ - params:
+ - name: column
+ description: |-
+ columnName (string) or
+ ID (number)
+ type: String|Integer
+ return:
+ description: ''
+ type: String|Number
chainable: false
---
diff --git a/src/content/reference/en/p5.TableRow/getNum.mdx b/src/content/reference/en/p5.TableRow/getNum.mdx
index 136735dac5..787987878d 100644
--- a/src/content/reference/en/p5.TableRow/getNum.mdx
+++ b/src/content/reference/en/p5.TableRow/getNum.mdx
@@ -3,55 +3,65 @@ title: getNum
module: IO
submodule: Table
file: src/io/p5.TableRow.js
-description: |
- <p>Retrieves a Float value from the TableRow's specified
+description: |-
+ Retrieves a Float value from the TableRow's specified
column. The column may be specified by either its ID or
- title.</p>
-line: 231
+ title.
+line: 287
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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>
+ - |-
+ <div>
+ <code>
+ let table;
+
+ async function setup() {
+ // Create a 200x100 canvas and set a white background
+ createCanvas(200, 100);
+ background(255);
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ 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 = max(maxId, id);
+ }
+
+ let result = 'minimum id = ' + minId + ', maximum id = ' + maxId;
+
+ // Set text properties and display the result on the canvas
+ fill(0); // Set text color to black
+ textSize(12); // Set text size
+ text(result, 10, 50);
+
+ describe('no image displayed');
+ }
+ </code>
+ </div>
class: p5.TableRow
-params:
- - name: column
- description: |
- <p>columnName (string) or
- ID (number)</p>
- type: String|Integer
return:
description: Float Floating point number
type: Number
+overloads:
+ - params:
+ - name: column
+ description: |-
+ columnName (string) or
+ ID (number)
+ type: String|Integer
+ return:
+ description: Float Floating point number
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.TableRow/getString.mdx b/src/content/reference/en/p5.TableRow/getString.mdx
index 8dd7db7b39..b8b5fa0962 100644
--- a/src/content/reference/en/p5.TableRow/getString.mdx
+++ b/src/content/reference/en/p5.TableRow/getString.mdx
@@ -3,57 +3,64 @@ title: getString
module: IO
submodule: Table
file: src/io/p5.TableRow.js
-description: |
- <p>Retrieves an String value from the TableRow's specified
+description: |-
+ Retrieves an String value from the TableRow's specified
column. The column may be specified by either its ID or
- title.</p>
-line: 285
+ title.
+line: 345
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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>
+ - |-
+ <div>
+ <code>
+ let table;
+
+ async function setup() {
+ // Create a 200x100 canvas and set a white background
+ createCanvas(200, 100);
+ background(255);
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ 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;
+ }
+ }
+
+ let result = 'longest: ' + longest;
+
+ // Set text properties and display the result on the canvas
+ fill(0); // Set text color to black
+ textSize(12); // Set text size
+ text(result, 30, 50);
+
+ describe('no image displayed');
+ }
+ </code>
+ </div>
class: p5.TableRow
-params:
- - name: column
- description: |
- <p>columnName (string) or
- ID (number)</p>
- type: String|Integer
return:
description: String
type: String
+overloads:
+ - params:
+ - name: column
+ description: |-
+ columnName (string) or
+ ID (number)
+ type: String|Integer
+ return:
+ description: String
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.TableRow/set.mdx b/src/content/reference/en/p5.TableRow/set.mdx
index 02a7c29440..488425c910 100644
--- a/src/content/reference/en/p5.TableRow/set.mdx
+++ b/src/content/reference/en/p5.TableRow/set.mdx
@@ -3,54 +3,65 @@ 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
+description: |-
+ Stores a value in the TableRow's specified column.
+ The column may be specified by either its ID or title.
+line: 64
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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>
+ - |-
+ <div>
+ <code>
+ let table;
+
+ async function setup() {
+ // Create a 200x200 canvas and set a white background
+ createCanvas(200, 200);
+ background(255);
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Set every row's "name" to "Unicorn"
+ let rows = table.getRows();
+ for (let r = 0; r < rows.length; r++) {
+ rows[r].set('name', 'Unicorn');
+ }
+
+ // Convert the table to an array
+ let tableArray = table.getArray();
+
+ // Set text properties
+ fill(0); // Set text color to black
+ textSize(12); // Set text size
+
+ // Display each row of the table on the canvas
+ let y = 20; // Starting y position
+ for (let i = 0; i < tableArray.length; i++) {
+ let rowText = tableArray[i].join(', ');
+ text(rowText, 10, y * 2.5);
+ y += 20; // Increment y position for the next row
+ }
+
+ describe('no image displayed');
+ }
+ </code>
+ </div>
class: p5.TableRow
-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
+overloads:
+ - params:
+ - name: column
+ description: |-
+ Column ID (Number)
+ or Title (String)
+ type: String|Integer
+ - name: value
+ description: The value to be stored
+ type: String|Number
chainable: false
---
diff --git a/src/content/reference/en/p5.TableRow/setNum.mdx b/src/content/reference/en/p5.TableRow/setNum.mdx
index c20e6b440c..2a9efd20c8 100644
--- a/src/content/reference/en/p5.TableRow/setNum.mdx
+++ b/src/content/reference/en/p5.TableRow/setNum.mdx
@@ -3,54 +3,68 @@ 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
+description: |-
+ Stores a Float value in the TableRow's specified column.
+ The column may be specified by either its ID or title.
+line: 135
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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>
+ - |-
+ <div>
+ <code>
+ let table;
+
+ async function setup() {
+ // Create a 200x200 canvas and set a white background
+ createCanvas(200, 200);
+ background(255);
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Update each row's "id" to (row index + 10)
+ let rows = table.getRows();
+ for (let r = 0; r < rows.length; r++) {
+ rows[r].setNum('id', r + 10);
+ }
+
+ // Convert the table to a 2D array for display
+ let tableArray = table.getArray();
+
+ // Set text properties
+ fill(0); // Text color: black
+ textSize(12); // Adjust text size as needed
+
+ // Display each row of the table on the canvas
+ let y = 20; // Starting y position
+ for (let i = 0; i < tableArray.length; i++) {
+ // Join each row's values with a comma separator
+ let rowText = tableArray[i].join(', ');
+ text(rowText, 10, y * 2.5);
+ y += 20; // Increment y for the next row
+ }
+
+ describe('no image displayed');
+ }
+ </code>
+ </div>
class: p5.TableRow
-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
+overloads:
+ - params:
+ - name: column
+ description: |-
+ Column ID (Number)
+ or Title (String)
+ type: String|Integer
+ - name: value
+ description: |-
+ The value to be stored
+ as a Float
+ type: Number|String
chainable: false
---
diff --git a/src/content/reference/en/p5.TableRow/setString.mdx b/src/content/reference/en/p5.TableRow/setString.mdx
index 74b0a9fddc..d2528abc29 100644
--- a/src/content/reference/en/p5.TableRow/setString.mdx
+++ b/src/content/reference/en/p5.TableRow/setString.mdx
@@ -3,55 +3,67 @@ 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
+description: |-
+ Stores a String value in the TableRow's specified column.
+ The column may be specified by either its ID or title.
+line: 188
+deprecated: >-
+ p5.Table will be removed in a future version of p5.js to make way for a new,
+ friendlier version :)
isConstructor: false
itemtype: method
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>
+ - |-
+ <div>
+ <code>
+ let table;
+
+ async function setup() {
+ // Create a 300x200 canvas and set a white background
+ createCanvas(300, 200);
+ background(255);
+
+ // Load the CSV file with a header row
+ table = await loadTable('/assets/mammals.csv', ',', 'header');
+
+ // Update each row's "name" field
+ 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');
+ }
+
+ // Convert the table to a 2D array for display
+ let tableArray = table.getArray();
+
+ // Set text properties
+ fill(0); // Text color: black
+ textSize(12); // Adjust text size as needed
+
+ // Display each row of the table on the canvas
+ let y = 20; // Starting y position
+ for (let i = 0; i < tableArray.length; i++) {
+ let rowText = tableArray[i].join(', ');
+ text(rowText, 10, y * 2.5);
+ y += 20; // Increment y for the next row
+ }
+
+ // describe('no image displayed');
+ }
+ </code>
class: p5.TableRow
-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
+overloads:
+ - params:
+ - name: column
+ description: |-
+ Column ID (Number)
+ or Title (String)
+ type: String|Integer
+ - name: value
+ description: |-
+ The value to be stored
+ as a String
+ type: String|Number|Boolean|Object
chainable: false
---
diff --git a/src/content/reference/en/p5.TypedDict/clear.mdx b/src/content/reference/en/p5.TypedDict/clear.mdx
deleted file mode 100644
index 0d55313f04..0000000000
--- a/src/content/reference/en/p5.TypedDict/clear.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.TypedDict
-chainable: false
----
-
-
-# clear
diff --git a/src/content/reference/en/p5.TypedDict/create.mdx b/src/content/reference/en/p5.TypedDict/create.mdx
deleted file mode 100644
index 374fae9fc5..0000000000
--- a/src/content/reference/en/p5.TypedDict/create.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.TypedDict
-overloads:
- - line: 209
- params:
- - name: key
- description: ''
- type: Number|String
- - name: value
- description: ''
- type: Number|String
- - line: 227
- params:
- - name: obj
- description: |
- <p>key/value pair</p>
- type: Object
-chainable: false
----
-
-
-# create
diff --git a/src/content/reference/en/p5.TypedDict/get.mdx b/src/content/reference/en/p5.TypedDict/get.mdx
deleted file mode 100644
index eeb27d1873..0000000000
--- a/src/content/reference/en/p5.TypedDict/get.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.TypedDict
-params:
- - name: the
- description: |
- <p>key you want to access</p>
- type: Number|String
-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
deleted file mode 100644
index dd6faedb24..0000000000
--- a/src/content/reference/en/p5.TypedDict/hasKey.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-example:
- - |-
-
- <div class="norender">
- <code>
- function setup() {
- let myDictionary = createStringDict('p5', 'js');
- print(myDictionary.hasKey('p5')); // logs true to console
- }
- </code></div>
-class: p5.TypedDict
-params:
- - name: key
- description: |
- <p>that you want to look up</p>
- type: Number|String
-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
deleted file mode 100644
index 0ab9554c42..0000000000
--- a/src/content/reference/en/p5.TypedDict/print.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.TypedDict
-chainable: false
----
-
-
-# print
diff --git a/src/content/reference/en/p5.TypedDict/remove.mdx b/src/content/reference/en/p5.TypedDict/remove.mdx
deleted file mode 100644
index eeff97495f..0000000000
--- a/src/content/reference/en/p5.TypedDict/remove.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.TypedDict
-params:
- - name: key
- description: |
- <p>for the pair to remove</p>
- type: Number|String
-chainable: false
----
-
-
-# remove
diff --git a/src/content/reference/en/p5.TypedDict/saveJSON.mdx b/src/content/reference/en/p5.TypedDict/saveJSON.mdx
deleted file mode 100644
index c76018d444..0000000000
--- a/src/content/reference/en/p5.TypedDict/saveJSON.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.TypedDict
-chainable: false
----
-
-
-# saveJSON
diff --git a/src/content/reference/en/p5.TypedDict/saveTable.mdx b/src/content/reference/en/p5.TypedDict/saveTable.mdx
deleted file mode 100644
index fbe396490a..0000000000
--- a/src/content/reference/en/p5.TypedDict/saveTable.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.TypedDict
-chainable: false
----
-
-
-# saveTable
diff --git a/src/content/reference/en/p5.TypedDict/set.mdx b/src/content/reference/en/p5.TypedDict/set.mdx
deleted file mode 100644
index f910dee46a..0000000000
--- a/src/content/reference/en/p5.TypedDict/set.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.TypedDict
-params:
- - name: key
- description: ''
- type: Number|String
- - name: value
- description: ''
- type: Number|String
-chainable: false
----
-
-
-# set
diff --git a/src/content/reference/en/p5.TypedDict/size.mdx b/src/content/reference/en/p5.TypedDict/size.mdx
deleted file mode 100644
index 5112a14060..0000000000
--- a/src/content/reference/en/p5.TypedDict/size.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5.TypedDict
-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
index 114d052648..bd3b91618e 100644
--- a/src/content/reference/en/p5.Vector/add.mdx
+++ b/src/content/reference/en/p5.Vector/add.mdx
@@ -1,11 +1,10 @@
---
title: add
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
- <p>Adds to a vector's <code>x</code>, <code>y</code>, and <code>z</code>
- components.</p>
+ <p>Adds to a vector's components.</p>
<p><code>add()</code> can use separate numbers, as in <code>v.add(1, 2,
3)</code>,
@@ -23,18 +22,19 @@ description: >
Calling <code>add()</code> with no arguments, as in <code>v.add()</code>, has
no effect.</p>
+ <p>This method supports N-dimensional vectors.</p>
+
<p>The static version of <code>add()</code>, as in <code>p5.Vector.add(v2,
v1)</code>, returns a new
<a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change the
originals.</p>
-line: 282
+line: 3345
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -142,47 +142,37 @@ example:
</code>
</div>
class: p5.Vector
+return:
+ description: resulting <a href="#/p5.Vector">p5.Vector</a>.
+ type: p5.Vector
overloads:
- - line: 282
- params:
+ - params:
- name: x
- description: |
- <p>x component of the vector to be added.</p>
- type: Number
+ description: x component of the vector to be added or an array of components.
+ type: Number|Array
- name: 'y'
- description: |
- <p>y component of the vector to be added.</p>
+ description: y component of the vector to be added.
+ optional: 1
type: Number
- optional: true
- name: z
- description: |
- <p>z component of the vector to be added.</p>
+ description: z component of the vector to be added.
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 411
- params:
+ - params:
- name: value
- description: |
- <p>The vector to add</p>
+ description: The vector to add
type: 'p5.Vector|Number[]'
- chainable: 1
- - line: 3353
- params:
+ - params:
- name: v1
- description: |
- <p>A <a href="#/p5.Vector">p5.Vector</a> to add</p>
+ description: A <a href="#/p5.Vector">p5.Vector</a> to add
type: p5.Vector
- name: v2
- description: |
- <p>A <a href="#/p5.Vector">p5.Vector</a> to add</p>
+ description: A <a href="#/p5.Vector">p5.Vector</a> to add
type: p5.Vector
- name: target
- description: |
- <p>vector to receive the result.</p>
+ description: vector to receive the result.
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
return:
description: resulting <a href="#/p5.Vector">p5.Vector</a>.
type: p5.Vector
diff --git a/src/content/reference/en/p5.Vector/angleBetween.mdx b/src/content/reference/en/p5.Vector/angleBetween.mdx
index 2daaebe1f4..ea4d6d73e7 100644
--- a/src/content/reference/en/p5.Vector/angleBetween.mdx
+++ b/src/content/reference/en/p5.Vector/angleBetween.mdx
@@ -1,7 +1,7 @@
---
title: angleBetween
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Calculates the angle between two vectors.</p>
@@ -18,12 +18,11 @@ description: >
angles in the units of the current
<a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-line: 2384
+line: 3750
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -150,27 +149,21 @@ return:
description: angle between the vectors.
type: Number
overloads:
- - line: 2384
- params:
+ - params:
- name: value
- description: >
- <p>x, y, and z components of a <a
- href="#/p5.Vector">p5.Vector</a>.</p>
+ description: 'x, y, and z components of a <a href="#/p5.Vector">p5.Vector</a>.'
type: p5.Vector
return:
description: angle between the vectors.
type: Number
- - line: 3811
- params:
+ - params: []
+ - params:
- name: v1
- description: |
- <p>the first vector.</p>
+ description: the first vector.
type: p5.Vector
- name: v2
- description: |
- <p>the second vector.</p>
+ description: the second vector.
type: p5.Vector
- static: 1
return:
description: angle between the two vectors.
type: Number
diff --git a/src/content/reference/en/p5.Vector/array.mdx b/src/content/reference/en/p5.Vector/array.mdx
index 309c4b315e..11251b736b 100644
--- a/src/content/reference/en/p5.Vector/array.mdx
+++ b/src/content/reference/en/p5.Vector/array.mdx
@@ -1,16 +1,14 @@
---
title: array
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
-description: |
- <p>Returns the vector's components as an array of numbers.</p>
-line: 2979
+description: Returns the vector's components as an array of numbers.
+line: 3791
isConstructor: false
itemtype: method
example:
- |-
-
<div class = "norender">
<code>
function setup() {
@@ -27,18 +25,15 @@ return:
description: array with the vector's components.
type: 'Number[]'
overloads:
- - line: 2979
- params: []
+ - params: []
return:
description: array with the vector's components.
type: 'Number[]'
- - line: 3856
- params:
+ - params: []
+ - params:
- name: v
- description: |
- <p>the vector to convert to an array</p>
+ description: the vector to convert to an array
type: p5.Vector
- static: 1
return:
description: an Array with the 3 values
type: 'Number[]'
diff --git a/src/content/reference/en/p5.Vector/clampToZero.mdx b/src/content/reference/en/p5.Vector/clampToZero.mdx
deleted file mode 100644
index 37eaf83464..0000000000
--- a/src/content/reference/en/p5.Vector/clampToZero.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: clampToZero
-module: Math
-submodule: Vector
-file: src/math/p5.Vector.js
-description: >
- <p>Replaces the components of a <a
- href="/reference/p5/p5.Vector">p5.Vector</a> that are very close to zero with
- zero.</p>
-
- <p>In computers, handling numbers with decimals can give slightly imprecise
- answers due to the way those numbers are represented.
-
- This can make it hard to check if a number is zero, as it may be close but not
- exactly zero.
-
- This method rounds very close numbers to zero to make those checks easier</p>
-
- <p><a
- href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON/">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON</a></p>
-line: 3892
-isConstructor: false
-itemtype: method
-class: p5.Vector
-return:
- description: with components very close to zero replaced with zero.
- type: p5.Vector
-chainable: true
----
-
-
-# clampToZero
diff --git a/src/content/reference/en/p5.Vector/copy.mdx b/src/content/reference/en/p5.Vector/copy.mdx
index 01118a7420..317e5ba7e4 100644
--- a/src/content/reference/en/p5.Vector/copy.mdx
+++ b/src/content/reference/en/p5.Vector/copy.mdx
@@ -1,17 +1,14 @@
---
title: copy
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
-description: >
- <p>Returns a copy of the <a href="/reference/p5/p5.Vector">p5.Vector</a>
- object.</p>
-line: 239
+description: Returns a copy of the <a href="/reference/p5/p5.Vector">p5.Vector</a> object.
+line: 3333
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -38,18 +35,14 @@ return:
description: copy of the <a href="#/p5.Vector">p5.Vector</a> object.
type: p5.Vector
overloads:
- - line: 239
- params: []
+ - params: []
return:
description: copy of the <a href="#/p5.Vector">p5.Vector</a> object.
type: p5.Vector
- - line: 3341
- params:
+ - params:
- name: v
- description: |
- <p>the <a href="#/p5.Vector">p5.Vector</a> to create a copy of</p>
+ description: the <a href="#/p5.Vector">p5.Vector</a> to create a copy of
type: p5.Vector
- static: 1
return:
description: the copy of the <a href="#/p5.Vector">p5.Vector</a> object
type: p5.Vector
diff --git a/src/content/reference/en/p5.Vector/cross.mdx b/src/content/reference/en/p5.Vector/cross.mdx
index b5842806d6..5b45eef491 100644
--- a/src/content/reference/en/p5.Vector/cross.mdx
+++ b/src/content/reference/en/p5.Vector/cross.mdx
@@ -1,7 +1,7 @@
---
title: cross
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Calculates the cross product of two vectors.</p>
@@ -16,12 +16,11 @@ description: >
v2)</code>, is the same
as calling <code>v1.cross(v2)</code>.</p>
-line: 1554
+line: 3544
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -58,26 +57,21 @@ return:
description: cross product as a <a href="#/p5.Vector">p5.Vector</a>.
type: p5.Vector
overloads:
- - line: 1554
- params:
+ - params:
- name: v
- description: |
- <p><a href="#/p5.Vector">p5.Vector</a> to be crossed.</p>
+ description: <a href="#/p5.Vector">p5.Vector</a> to be crossed.
type: p5.Vector
return:
description: cross product as a <a href="#/p5.Vector">p5.Vector</a>.
type: p5.Vector
- - line: 3590
- params:
+ - params: []
+ - params:
- name: v1
- description: |
- <p>first <a href="#/p5.Vector">p5.Vector</a>.</p>
+ description: first <a href="#/p5.Vector">p5.Vector</a>.
type: p5.Vector
- name: v2
- description: |
- <p>second <a href="#/p5.Vector">p5.Vector</a>.</p>
+ description: second <a href="#/p5.Vector">p5.Vector</a>.
type: p5.Vector
- static: 1
return:
description: cross product.
type: Number
diff --git a/src/content/reference/en/p5.Vector/dist.mdx b/src/content/reference/en/p5.Vector/dist.mdx
index 493a252552..703c21bbdd 100644
--- a/src/content/reference/en/p5.Vector/dist.mdx
+++ b/src/content/reference/en/p5.Vector/dist.mdx
@@ -1,145 +1,28 @@
---
title: dist
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
-description: >
- <p>Calculates the distance between two points represented by vectors.</p>
-
- <p>A point's coordinates can be represented by the components of a vector
-
- that extends from the origin to the point.</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="/reference/p5/dist/">dist()</a> to calculate the distance
- between points
-
- using coordinates as in <code>dist(x1, y1, x2, y2)</code>.</p>
-line: 1612
+description: |-
+ Calculates the Euclidean distance between two points (considering a
+ point as a vector object).
+line: 3558
isConstructor: false
itemtype: method
-example:
- - |-
-
- <div class="norender">
- <code>
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Create p5.Vector objects.
- let v1 = createVector(1, 0);
- let v2 = createVector(0, 1);
-
- // Calculate the distance between them.
- let d = v1.dist(v2);
-
- // Prints "1.414..." to the console.
- print(d);
- }
- </code>
- </div>
-
- <div class="norender">
- <code>
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Create p5.Vector objects.
- let v1 = createVector(1, 0);
- let v2 = createVector(0, 1);
-
- // Calculate the distance between them.
- let d = p5.Vector.dist(v1, v2);
-
- // Prints "1.414..." to the console.
- print(d);
- }
- </code>
- </div>
-
- <div>
- <code>
- function setup() {
- createCanvas(100, 100);
-
- 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 draw() {
- background(200);
-
- let origin = createVector(0, 0);
-
- // Draw the red arrow.
- let v1 = createVector(50, 50);
- drawArrow(origin, v1, 'red');
-
- // Draw the blue arrow.
- let v2 = createVector(20, 70);
- drawArrow(origin, v2, 'blue');
-
- // Purple arrow.
- let v3 = p5.Vector.sub(v2, v1);
- drawArrow(v1, v3, 'purple');
-
- // Style the text.
- textAlign(CENTER);
-
- // Display the magnitude. The same as floor(v3.mag());
- let m = floor(p5.Vector.dist(v1, v2));
- text(m, 50, 75);
- }
-
- // Draws an arrow between two vectors.
- 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>
+example: []
class: p5.Vector
return:
- description: distance.
+ description: The distance
type: Number
overloads:
- - line: 1612
- params:
- - name: v
- description: >
- <p>x, y, and z coordinates of a <a
- href="#/p5.Vector">p5.Vector</a>.</p>
- type: p5.Vector
- return:
- description: distance.
- type: Number
- - line: 3605
- params:
+ - params: []
+ - params:
- name: v1
- description: |
- <p>The first <a href="#/p5.Vector">p5.Vector</a></p>
+ description: The first <a href="#/p5.Vector">p5.Vector</a>
type: p5.Vector
- name: v2
- description: |
- <p>The second <a href="#/p5.Vector">p5.Vector</a></p>
+ description: The second <a href="#/p5.Vector">p5.Vector</a>
type: p5.Vector
- static: 1
return:
description: The distance
type: Number
diff --git a/src/content/reference/en/p5.Vector/div.mdx b/src/content/reference/en/p5.Vector/div.mdx
index f9ec3a3a07..d081aee19b 100644
--- a/src/content/reference/en/p5.Vector/div.mdx
+++ b/src/content/reference/en/p5.Vector/div.mdx
@@ -1,7 +1,7 @@
---
title: div
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Divides a vector's <code>x</code>, <code>y</code>, and <code>z</code>
@@ -34,12 +34,11 @@ description: >
<a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change the
originals.</p>
-line: 1065
+line: 3505
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -200,109 +199,70 @@ example:
</code>
</div>
class: p5.Vector
+return:
+ description: The resulting new <a href="#/p5.Vector">p5.Vector</a>
+ type: p5.Vector
overloads:
- - line: 1065
- params:
+ - params:
- name: 'n'
- description: |
- <p>The number to divide the vector by</p>
+ description: The number to divide the vector by
type: Number
- chainable: 1
- - line: 1247
- params:
+ - params:
- name: x
- description: |
- <p>number to divide with the x component of the vector.</p>
+ description: number to divide with the x component of the vector.
type: Number
- name: 'y'
- description: |
- <p>number to divide with the y component of the vector.</p>
+ description: number to divide with the y component of the vector.
type: Number
- name: z
- description: |
- <p>number to divide with the z component of the vector.</p>
+ description: number to divide with the z component of the vector.
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 1255
- params:
+ - params:
- name: arr
- description: |
- <p>array to divide the components of the vector by.</p>
+ description: array to divide the components of the vector by.
type: 'Number[]'
- chainable: 1
- - line: 1261
- params:
+ - params:
- name: v
- description: |
- <p>vector to divide the components of the original vector by.</p>
+ description: vector to divide the components of the original vector by.
type: p5.Vector
- chainable: 1
- - line: 3520
- params:
+ - params: []
+ - params:
- name: x
- description: ''
type: Number
- name: 'y'
- description: ''
type: Number
- name: z
- description: ''
+ optional: 1
type: Number
- optional: true
- static: 1
return:
description: The resulting new <a href="#/p5.Vector">p5.Vector</a>
type: p5.Vector
- - line: 3529
- params:
+ - params:
- name: v
- description: ''
type: p5.Vector
- name: 'n'
- description: ''
type: Number
- name: target
- description: |
- <p>The vector to receive the result</p>
+ description: The vector to receive the result
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
- return:
- description: The resulting new <a href="#/p5.Vector">p5.Vector</a>
- type: p5.Vector
- - line: 3538
- params:
+ - params:
- name: v0
- description: ''
type: p5.Vector
- name: v1
- description: ''
type: p5.Vector
- name: target
- description: ''
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
- return:
- description: The resulting new <a href="#/p5.Vector">p5.Vector</a>
- type: p5.Vector
- - line: 3547
- params:
+ - params:
- name: v0
- description: ''
type: p5.Vector
- name: arr
- description: ''
type: 'Number[]'
- name: target
- description: ''
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
- return:
- description: The resulting new <a href="#/p5.Vector">p5.Vector</a>
- type: p5.Vector
chainable: true
---
diff --git a/src/content/reference/en/p5.Vector/dot.mdx b/src/content/reference/en/p5.Vector/dot.mdx
index dfa0c67b1f..1dfd486043 100644
--- a/src/content/reference/en/p5.Vector/dot.mdx
+++ b/src/content/reference/en/p5.Vector/dot.mdx
@@ -1,7 +1,7 @@
---
title: dot
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Calculates the dot product of two vectors.</p>
@@ -31,12 +31,11 @@ description: >
v2)</code>, is the same
as calling <code>v1.dot(v2)</code>.</p>
-line: 1441
+line: 3531
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -117,45 +116,36 @@ return:
description: dot product.
type: Number
overloads:
- - line: 1441
- params:
+ - params:
- name: x
- description: |
- <p>x component of the vector.</p>
+ description: x component of the vector.
type: Number
- name: 'y'
- description: |
- <p>y component of the vector.</p>
+ description: y component of the vector.
+ optional: 1
type: Number
- optional: true
- name: z
- description: |
- <p>z component of the vector.</p>
+ description: z component of the vector.
+ optional: 1
type: Number
- optional: true
return:
description: dot product.
type: Number
- - line: 1542
- params:
+ - params:
- name: v
- description: |
- <p><a href="#/p5.Vector">p5.Vector</a> to be dotted.</p>
+ description: <a href="#/p5.Vector">p5.Vector</a> to be dotted.
type: p5.Vector
return:
description: ''
type: Number
- - line: 3576
- params:
+ - params: []
+ - params:
- name: v1
- description: |
- <p>first <a href="#/p5.Vector">p5.Vector</a>.</p>
+ description: first <a href="#/p5.Vector">p5.Vector</a>.
type: p5.Vector
- name: v2
- description: |
- <p>second <a href="#/p5.Vector">p5.Vector</a>.</p>
+ description: second <a href="#/p5.Vector">p5.Vector</a>.
type: p5.Vector
- static: 1
return:
description: dot product.
type: Number
diff --git a/src/content/reference/en/p5.Vector/equals.mdx b/src/content/reference/en/p5.Vector/equals.mdx
index d9538d2547..9cd4a3d87e 100644
--- a/src/content/reference/en/p5.Vector/equals.mdx
+++ b/src/content/reference/en/p5.Vector/equals.mdx
@@ -1,7 +1,7 @@
---
title: equals
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Checks whether all the vector's components are equal to another
@@ -29,12 +29,11 @@ description: >
interprets both parameters as <a href="/reference/p5/p5.Vector">p5.Vector</a>
objects.</p>
-line: 3001
+line: 3804
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -90,46 +89,37 @@ return:
description: whether the vectors are equal.
type: Boolean
overloads:
- - line: 3001
- params:
+ - params:
- name: x
- description: |
- <p>x component of the vector.</p>
+ description: x component of the vector.
+ optional: 1
type: Number
- optional: true
- name: 'y'
- description: |
- <p>y component of the vector.</p>
+ description: y component of the vector.
+ optional: 1
type: Number
- optional: true
- name: z
- description: |
- <p>z component of the vector.</p>
+ description: z component of the vector.
+ optional: 1
type: Number
- optional: true
return:
description: whether the vectors are equal.
type: Boolean
- - line: 3074
- params:
+ - params:
- name: value
- description: |
- <p>vector to compare.</p>
+ description: vector to compare.
type: p5.Vector|Array
return:
description: ''
type: Boolean
- - line: 3869
- params:
+ - params: []
+ - params:
- name: v1
- description: |
- <p>the first vector to compare</p>
+ description: the first vector to compare
type: p5.Vector|Array
- name: v2
- description: |
- <p>the second vector to compare</p>
+ description: the second vector to compare
type: p5.Vector|Array
- static: 1
return:
description: ''
type: Boolean
diff --git a/src/content/reference/en/p5.Vector/fromAngle.mdx b/src/content/reference/en/p5.Vector/fromAngle.mdx
index e6556cafae..4f8f3ce82d 100644
--- a/src/content/reference/en/p5.Vector/fromAngle.mdx
+++ b/src/content/reference/en/p5.Vector/fromAngle.mdx
@@ -1,16 +1,14 @@
---
title: fromAngle
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
-description: |
- <p>Creates a new 2D vector from an angle.</p>
-line: 3099
+description: Creates a new 2D vector from an angle.
+line: 3154
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -72,20 +70,23 @@ example:
</code>
</div>
class: p5.Vector
-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
return:
description: new <a href="#/p5.Vector">p5.Vector</a> object.
type: p5.Vector
+overloads:
+ - params:
+ - name: angle
+ description: >-
+ desired angle, in radians. Unaffected by <a
+ href="#/p5/angleMode">angleMode()</a>.
+ type: Number
+ - name: length
+ description: length of the new vector (defaults to 1).
+ optional: 1
+ type: Number
+ return:
+ description: new <a href="#/p5.Vector">p5.Vector</a> object.
+ type: p5.Vector
chainable: false
---
diff --git a/src/content/reference/en/p5.Vector/fromAngles.mdx b/src/content/reference/en/p5.Vector/fromAngles.mdx
index 3176eb928c..ec204cdcc8 100644
--- a/src/content/reference/en/p5.Vector/fromAngles.mdx
+++ b/src/content/reference/en/p5.Vector/fromAngles.mdx
@@ -1,16 +1,14 @@
---
title: fromAngles
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
-description: |
- <p>Creates a new 3D vector from a pair of ISO spherical angles.</p>
-line: 3174
+description: Creates a new 3D vector from a pair of ISO spherical angles.
+line: 3216
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -55,24 +53,26 @@ example:
</code>
</div>
class: p5.Vector
-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
return:
description: new <a href="#/p5.Vector">p5.Vector</a> object.
type: p5.Vector
+overloads:
+ - params:
+ - name: theta
+ description: polar angle in radians (zero is up).
+ type: Number
+ - name: phi
+ description: |-
+ azimuthal angle in radians
+ (zero is out of the screen).
+ type: Number
+ - name: length
+ description: length of the new vector (defaults to 1).
+ optional: 1
+ type: Number
+ return:
+ description: new <a href="#/p5.Vector">p5.Vector</a> object.
+ type: p5.Vector
chainable: false
---
diff --git a/src/content/reference/en/p5.Vector/getValue.mdx b/src/content/reference/en/p5.Vector/getValue.mdx
new file mode 100644
index 0000000000..2be32d2d0f
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/getValue.mdx
@@ -0,0 +1,43 @@
+---
+title: getValue
+module: Math
+submodule: ''
+file: src/math/p5.Vector.js
+description: >
+ <p>Retrieves the value at the specified index from the vector.</p>
+
+ <p>This method allows you to get the value of a specific component of the
+ vector
+
+ by providing its index. Think of the vector as a list of numbers, where each
+
+ number represents a different direction (like x, y, or z). The index is just
+
+ the position of the number in that list.</p>
+
+ <p>For example, if you have a vector with values 10, 20, 30 the index 0 would
+
+ give you the first value 10, index 1 would give you the second value 20,
+
+ and so on.</p>
+line: 119
+isConstructor: false
+itemtype: method
+example: []
+class: p5.Vector
+return:
+ description: The value at the specified position in the vector.
+ type: Number
+overloads:
+ - params:
+ - name: index
+ description: The position of the value you want to get from the vector.
+ type: Number
+ return:
+ description: The value at the specified position in the vector.
+ type: Number
+chainable: false
+---
+
+
+# getValue
diff --git a/src/content/reference/en/p5.Vector/heading.mdx b/src/content/reference/en/p5.Vector/heading.mdx
index 7b05c74956..103f4c3567 100644
--- a/src/content/reference/en/p5.Vector/heading.mdx
+++ b/src/content/reference/en/p5.Vector/heading.mdx
@@ -1,7 +1,7 @@
---
title: heading
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Calculates the angle a 2D vector makes with the positive x-axis.</p>
@@ -22,12 +22,11 @@ description: >
<code>p5.Vector.heading(v)</code>, works the
same way.</p>
-line: 2026
+line: 3735
isConstructor: false
itemtype: method
example:
- |-
-
<div class = "norender">
<code>
function setup() {
@@ -117,18 +116,15 @@ return:
description: angle of rotation.
type: Number
overloads:
- - line: 2026
- params: []
+ - params: []
return:
description: angle of rotation.
type: Number
- - line: 3796
- params:
+ - params: []
+ - params:
- name: v
- description: |
- <p>the vector to find the angle of</p>
+ description: the vector to find the angle of
type: p5.Vector
- static: 1
return:
description: the angle of rotation
type: Number
diff --git a/src/content/reference/en/p5.Vector/lerp.mdx b/src/content/reference/en/p5.Vector/lerp.mdx
index 338d056e17..13ca4650cb 100644
--- a/src/content/reference/en/p5.Vector/lerp.mdx
+++ b/src/content/reference/en/p5.Vector/lerp.mdx
@@ -1,7 +1,7 @@
---
title: lerp
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Calculates new <code>x</code>, <code>y</code>, and <code>z</code>
@@ -23,12 +23,11 @@ description: >
doesn't change
the original.</p>
-line: 2538
+line: 3574
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -121,54 +120,43 @@ example:
</code>
</div>
class: p5.Vector
+return:
+ description: The lerped value
+ type: p5.Vector
overloads:
- - line: 2538
- params:
+ - params:
- name: x
- description: |
- <p>x component.</p>
+ description: x component.
type: Number
- name: 'y'
- description: |
- <p>y component.</p>
+ description: y component.
type: Number
- name: z
- description: |
- <p>z component.</p>
+ description: z component.
type: Number
- name: amt
- description: |
- <p>amount of interpolation between 0.0 (old vector)
- and 1.0 (new vector). 0.5 is halfway between.</p>
+ description: |-
+ amount of interpolation between 0.0 (old vector)
+ and 1.0 (new vector). 0.5 is halfway between.
type: Number
- chainable: 1
- - line: 2651
- params:
+ - params:
- name: v
- description: |
- <p><a href="#/p5.Vector">p5.Vector</a> to lerp toward.</p>
+ description: <a href="#/p5.Vector">p5.Vector</a> to lerp toward.
type: p5.Vector
- name: amt
- description: ''
type: Number
- chainable: 1
- - line: 3620
- params:
+ - params: []
+ - params:
- name: v1
- description: ''
type: p5.Vector
- name: v2
- description: ''
type: p5.Vector
- name: amt
- description: ''
type: Number
- name: target
- description: |
- <p>The vector to receive the result</p>
+ description: The vector to receive the result
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
return:
description: The lerped value
type: p5.Vector
diff --git a/src/content/reference/en/p5.Vector/limit.mdx b/src/content/reference/en/p5.Vector/limit.mdx
index f729548984..1fe5c90f28 100644
--- a/src/content/reference/en/p5.Vector/limit.mdx
+++ b/src/content/reference/en/p5.Vector/limit.mdx
@@ -1,7 +1,7 @@
---
title: limit
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Limits a vector's magnitude to a maximum value.</p>
@@ -13,12 +13,11 @@ description: >
the
original.</p>
-line: 1835
+line: 3683
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -96,29 +95,25 @@ example:
</code>
</div>
class: p5.Vector
+return:
+ description: v with a magnitude limited to max
+ type: p5.Vector
overloads:
- - line: 1835
- params:
+ - params:
- name: max
- description: |
- <p>maximum magnitude for the vector.</p>
+ description: maximum magnitude for the vector.
type: Number
- chainable: 1
- - line: 3738
- params:
+ - params: []
+ - params:
- name: v
- description: |
- <p>the vector to limit</p>
+ description: the vector to limit
type: p5.Vector
- name: max
- description: ''
type: Number
- name: target
- description: |
- <p>the vector to receive the result (Optional)</p>
+ description: the vector to receive the result (Optional)
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
return:
description: v with a magnitude limited to max
type: p5.Vector
diff --git a/src/content/reference/en/p5.Vector/mag.mdx b/src/content/reference/en/p5.Vector/mag.mdx
index 49723af2a9..2d4cc94b30 100644
--- a/src/content/reference/en/p5.Vector/mag.mdx
+++ b/src/content/reference/en/p5.Vector/mag.mdx
@@ -1,7 +1,7 @@
---
title: mag
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Calculates the magnitude (length) of the vector.</p>
@@ -10,12 +10,11 @@ description: >
2D vector
using components as in <code>mag(x, y)</code>.</p>
-line: 1362
+line: 3629
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -46,18 +45,15 @@ return:
description: magnitude of the vector.
type: Number
overloads:
- - line: 1362
- params: []
+ - params: []
return:
description: magnitude of the vector.
type: Number
- - line: 3682
- params:
+ - params: []
+ - params:
- name: vecT
- description: |
- <p>The vector to return the magnitude of</p>
+ description: The vector to return the magnitude of
type: p5.Vector
- static: 1
return:
description: The magnitude of vecT
type: Number
diff --git a/src/content/reference/en/p5.Vector/magSq.mdx b/src/content/reference/en/p5.Vector/magSq.mdx
index f1559173f0..f0ffb33359 100644
--- a/src/content/reference/en/p5.Vector/magSq.mdx
+++ b/src/content/reference/en/p5.Vector/magSq.mdx
@@ -1,16 +1,14 @@
---
title: magSq
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
-description: |
- <p>Calculates the magnitude (length) of the vector squared.</p>
-line: 1402
+description: Calculates the magnitude (length) of the vector squared.
+line: 3644
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -41,18 +39,15 @@ return:
description: squared magnitude of the vector.
type: Number
overloads:
- - line: 1402
- params: []
+ - params: []
return:
description: squared magnitude of the vector.
type: Number
- - line: 3698
- params:
+ - params: []
+ - params:
- name: vecT
- description: |
- <p>the vector to return the squared magnitude of</p>
+ description: the vector to return the squared magnitude of
type: p5.Vector
- static: 1
return:
description: the squared magnitude of vecT
type: Number
diff --git a/src/content/reference/en/p5.Vector/mult.mdx b/src/content/reference/en/p5.Vector/mult.mdx
index d6f3f99fb0..37ec870c2c 100644
--- a/src/content/reference/en/p5.Vector/mult.mdx
+++ b/src/content/reference/en/p5.Vector/mult.mdx
@@ -1,306 +1,74 @@
---
title: mult
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
-description: >
- <p>Multiplies a vector's <code>x</code>, <code>y</code>, and <code>z</code>
- components.</p>
-
- <p><code>mult()</code> can use separate numbers, as in <code>v.mult(1, 2,
- 3)</code>, another
-
- <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
- <code>v.mult(v2)</code>, or an array
-
- of numbers, as in <code>v.mult([1, 2, 3])</code>.</p>
-
- <p>If only one value is provided, as in <code>v.mult(2)</code>, then all the
- components
-
- will be multiplied by 2. If a value isn't provided for a component, it
-
- won't change. For example, <code>v.mult(4, 5)</code> multiplies
- <code>v.x</code> by 4, <code>v.y</code> by 5,
-
- and <code>v.z</code> by 1. Calling <code>mult()</code> with no arguments, as
- in <code>v.mult()</code>, 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="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change the
-
- originals.</p>
-line: 785
+description: Multiplies a vector by a scalar and returns a new vector.
+line: 3436
isConstructor: false
itemtype: method
-example:
- - |-
-
- <div>
- <code>
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Style the points.
- strokeWeight(5);
-
- // Top-left.
- let p = createVector(25, 25);
- point(p);
-
- // Center.
- // Multiply all components by 2.
- 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>
- function setup() {
- strokeWeight(5);
-
- // Top-left.
- let p = createVector(25, 25);
- point(p);
-
- // Bottom-right.
- // Multiply p.x * 2 and p.y * 3
- 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>
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Style the points.
- strokeWeight(5);
-
- // Top-left.
- let p = createVector(25, 25);
- point(p);
-
- // Bottom-right.
- // Multiply p.x * 2 and p.y * 3
- 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>
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Style the points.
- strokeWeight(5);
-
- // Top-left.
- let p = createVector(25, 25);
- point(p);
-
- // Bottom-right.
- // Multiply p.x * p2.x and p.y * p2.y
- 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>
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Style the points.
- strokeWeight(5);
-
- // Top-left.
- let p = createVector(25, 25);
- point(p);
-
- // Bottom-right.
- // Create a new p5.Vector with
- // p3.x = p.x * p2.x
- // p3.y = p.y * p2.y
- 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 setup() {
- createCanvas(100, 100);
-
- describe('Two arrows extending from the top left corner. The blue arrow is twice the length of the red arrow.');
- }
- function draw() {
- background(200);
-
- let origin = createVector(0, 0);
-
- // Draw the red arrow.
- let v1 = createVector(25, 25);
- drawArrow(origin, v1, 'red');
-
- // Draw the blue arrow.
- let v2 = p5.Vector.mult(v1, 2);
- drawArrow(origin, v2, 'blue');
- }
-
- // Draws an arrow between two vectors.
- 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>
+example: []
class: p5.Vector
+return:
+ description: resulting new <a href="#/p5.Vector">p5.Vector</a>.
+ type: p5.Vector
overloads:
- - line: 785
- params:
- - name: 'n'
- description: |
- <p>The number to multiply with the vector</p>
- type: Number
- chainable: 1
- - line: 965
- params:
+ - params:
- name: x
- description: |
- <p>number to multiply with the x component of the vector.</p>
+ description: number to multiply with the x component of the vector.
type: Number
- name: 'y'
- description: |
- <p>number to multiply with the y component of the vector.</p>
+ description: number to multiply with the y component of the vector.
type: Number
- name: z
- description: |
- <p>number to multiply with the z component of the vector.</p>
+ description: number to multiply with the z component of the vector.
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 973
- params:
+ - params:
- name: arr
- description: |
- <p>array to multiply with the components of the vector.</p>
+ description: array to multiply with the components of the vector.
type: 'Number[]'
- chainable: 1
- - line: 979
- params:
+ - params:
- name: v
- description: |
- <p>vector to multiply with the components of the original vector.</p>
+ description: vector to multiply with the components of the original vector.
type: p5.Vector
- chainable: 1
- - line: 3435
- params:
+ - params: []
+ - params:
- name: x
- description: ''
type: Number
- name: 'y'
- description: ''
type: Number
- name: z
- description: ''
+ optional: 1
type: Number
- optional: true
- static: 1
return:
description: resulting new <a href="#/p5.Vector">p5.Vector</a>.
type: p5.Vector
- - line: 3444
- params:
+ - params:
- name: v
- description: ''
type: p5.Vector
- name: 'n'
- description: ''
type: Number
- name: target
- description: |
- <p>vector to receive the result.</p>
+ description: vector to receive the result.
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
- return:
- description: The resulting new <a href="#/p5.Vector">p5.Vector</a>
- type: p5.Vector
- - line: 3453
- params:
+ - params:
- name: v0
- description: ''
type: p5.Vector
- name: v1
- description: ''
type: p5.Vector
- name: target
- description: ''
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
- return:
- description: The resulting new <a href="#/p5.Vector">p5.Vector</a>
- type: p5.Vector
- - line: 3462
- params:
+ - params:
- name: v0
- description: ''
type: p5.Vector
- name: arr
- description: ''
type: 'Number[]'
- name: target
- description: ''
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
- return:
- description: The resulting new <a href="#/p5.Vector">p5.Vector</a>
- type: p5.Vector
chainable: true
---
diff --git a/src/content/reference/en/p5.Vector/normalize.mdx b/src/content/reference/en/p5.Vector/normalize.mdx
index 9b69c85038..9f58c1e963 100644
--- a/src/content/reference/en/p5.Vector/normalize.mdx
+++ b/src/content/reference/en/p5.Vector/normalize.mdx
@@ -1,7 +1,7 @@
---
title: normalize
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Scales the components of a <a href="/reference/p5/p5.Vector">p5.Vector</a>
@@ -16,12 +16,11 @@ description: >
doesn't change
the original.</p>
-line: 1726
+line: 3657
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -115,23 +114,19 @@ return:
description: normalized <a href="#/p5.Vector">p5.Vector</a>.
type: p5.Vector
overloads:
- - line: 1726
- params: []
+ - params: []
return:
description: normalized <a href="#/p5.Vector">p5.Vector</a>.
type: p5.Vector
- - line: 3711
- params:
+ - params: []
+ - params:
- name: v
- description: |
- <p>The vector to normalize</p>
+ description: The vector to normalize
type: p5.Vector
- name: target
- description: |
- <p>The vector to receive the result</p>
+ description: The vector to receive the result
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
return:
description: 'The vector v, normalized to a length of 1'
type: p5.Vector
diff --git a/src/content/reference/en/p5.Vector/random2D.mdx b/src/content/reference/en/p5.Vector/random2D.mdx
index 53705402ae..b051bbdf28 100644
--- a/src/content/reference/en/p5.Vector/random2D.mdx
+++ b/src/content/reference/en/p5.Vector/random2D.mdx
@@ -1,16 +1,14 @@
---
title: random2D
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
-description: |
- <p>Creates a new 2D unit vector with a random heading.</p>
-line: 3243
+description: Creates a new 2D unit vector with a random heading.
+line: 3295
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -71,6 +69,11 @@ class: p5.Vector
return:
description: new <a href="#/p5.Vector">p5.Vector</a> object.
type: p5.Vector
+overloads:
+ - params: []
+ return:
+ description: new <a href="#/p5.Vector">p5.Vector</a> object.
+ type: p5.Vector
chainable: false
---
diff --git a/src/content/reference/en/p5.Vector/random3D.mdx b/src/content/reference/en/p5.Vector/random3D.mdx
index 8f2cc86b5b..e6da8e8af7 100644
--- a/src/content/reference/en/p5.Vector/random3D.mdx
+++ b/src/content/reference/en/p5.Vector/random3D.mdx
@@ -1,16 +1,14 @@
---
title: random3D
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
-description: |
- <p>Creates a new 3D unit vector with a random heading.</p>
-line: 3311
+description: Creates a new 3D unit vector with a random heading.
+line: 3318
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -27,6 +25,11 @@ class: p5.Vector
return:
description: new <a href="#/p5.Vector">p5.Vector</a> object.
type: p5.Vector
+overloads:
+ - params: []
+ return:
+ description: new <a href="#/p5.Vector">p5.Vector</a> object.
+ type: p5.Vector
chainable: false
---
diff --git a/src/content/reference/en/p5.Vector/reflect.mdx b/src/content/reference/en/p5.Vector/reflect.mdx
index 6c6426e1f7..5b4c93686e 100644
--- a/src/content/reference/en/p5.Vector/reflect.mdx
+++ b/src/content/reference/en/p5.Vector/reflect.mdx
@@ -1,7 +1,7 @@
---
title: reflect
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Reflects a vector about a line in 2D or a plane in 3D.</p>
@@ -17,12 +17,11 @@ description: >
doesn't change
the original.</p>
-line: 2869
+line: 3765
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -113,30 +112,27 @@ example:
</code>
</div>
class: p5.Vector
+return:
+ description: the reflected vector
+ type: p5.Vector
overloads:
- - line: 2869
- params:
+ - params:
- name: surfaceNormal
- description: |
- <p><a href="#/p5.Vector">p5.Vector</a>
- to reflect about.</p>
+ description: |-
+ <a href="#/p5.Vector">p5.Vector</a>
+ to reflect about.
type: p5.Vector
- chainable: 1
- - line: 3826
- params:
+ - params: []
+ - params:
- name: incidentVector
- description: |
- <p>vector to be reflected.</p>
+ description: vector to be reflected.
type: p5.Vector
- name: surfaceNormal
- description: ''
type: p5.Vector
- name: target
- description: |
- <p>vector to receive the result.</p>
+ description: vector to receive the result.
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
return:
description: the reflected vector
type: p5.Vector
diff --git a/src/content/reference/en/p5.Vector/rem.mdx b/src/content/reference/en/p5.Vector/rem.mdx
index e671272920..5066857a42 100644
--- a/src/content/reference/en/p5.Vector/rem.mdx
+++ b/src/content/reference/en/p5.Vector/rem.mdx
@@ -1,7 +1,7 @@
---
title: rem
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Performs modulo (remainder) division with a vector's <code>x</code>,
@@ -34,12 +34,11 @@ description: >
the
originals.</p>
-line: 466
+line: 3373
isConstructor: false
itemtype: method
example:
- |-
-
<div class='norender'>
<code>
function setup() {
@@ -133,49 +132,36 @@ example:
</code>
</div>
class: p5.Vector
+return:
+ description: The resulting <a href="#/p5.Vector">p5.Vector</a>
+ type: p5.Vector
overloads:
- - line: 466
- params:
+ - params:
- name: x
- description: |
- <p>x component of divisor vector.</p>
+ description: x component of divisor vector.
type: Number
- name: 'y'
- description: |
- <p>y component of divisor vector.</p>
+ description: y component of divisor vector.
type: Number
- name: z
- description: |
- <p>z component of divisor vector.</p>
+ description: z component of divisor vector.
type: Number
- chainable: 1
- - line: 583
- params:
+ - params:
- name: value
- description: |
- <p>divisor vector.</p>
- type: 'p5.Vector | Number[]'
- chainable: 1
- - line: 3380
- params:
+ description: divisor vector.
+ type: 'p5.Vector|Number[]'
+ - params:
- name: v1
- description: |
- <p>The dividend <a href="#/p5.Vector">p5.Vector</a></p>
+ description: The dividend <a href="#/p5.Vector">p5.Vector</a>
type: p5.Vector
- name: v2
- description: |
- <p>The divisor <a href="#/p5.Vector">p5.Vector</a></p>
+ description: The divisor <a href="#/p5.Vector">p5.Vector</a>
type: p5.Vector
- static: 1
- - line: 3386
- params:
+ - params:
- name: v1
- description: ''
type: p5.Vector
- name: v2
- description: ''
type: p5.Vector
- static: 1
return:
description: The resulting <a href="#/p5.Vector">p5.Vector</a>
type: p5.Vector
diff --git a/src/content/reference/en/p5.Vector/rotate.mdx b/src/content/reference/en/p5.Vector/rotate.mdx
index 931b207b8e..b7fbe0a6d2 100644
--- a/src/content/reference/en/p5.Vector/rotate.mdx
+++ b/src/content/reference/en/p5.Vector/rotate.mdx
@@ -1,7 +1,7 @@
---
title: rotate
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Rotates a 2D vector by an angle without changing its magnitude.</p>
@@ -25,12 +25,11 @@ description: >
doesn't change
the original.</p>
-line: 2238
+line: 3461
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -151,30 +150,20 @@ example:
</div>
class: p5.Vector
overloads:
- - line: 2238
- params:
+ - params:
- name: angle
- description: |
- <p>angle of rotation.</p>
+ description: angle of rotation.
type: Number
- chainable: 1
- - line: 3491
- params:
+ - params: []
+ - params:
- name: v
- description: ''
type: p5.Vector
- name: angle
- description: ''
type: Number
- name: target
- description: |
- <p>The vector to receive the result</p>
+ description: The vector to receive the result
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
- return:
- description: The resulting new <a href="#/p5.Vector">p5.Vector</a>
- type: p5.Vector
chainable: true
---
diff --git a/src/content/reference/en/p5.Vector/set.mdx b/src/content/reference/en/p5.Vector/set.mdx
index c69b39f4f2..d59169f81d 100644
--- a/src/content/reference/en/p5.Vector/set.mdx
+++ b/src/content/reference/en/p5.Vector/set.mdx
@@ -1,7 +1,7 @@
---
title: set
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Sets the vector's <code>x</code>, <code>y</code>, and <code>z</code>
@@ -24,12 +24,11 @@ description: >
all the vector's
components to 0.</p>
-line: 161
+line: 335
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -67,31 +66,23 @@ example:
</div>
class: p5.Vector
overloads:
- - line: 161
- params:
+ - params:
- name: x
- description: |
- <p>x component of the vector.</p>
+ description: x component of the vector.
+ optional: 1
type: Number
- optional: true
- name: 'y'
- description: |
- <p>y component of the vector.</p>
+ description: y component of the vector.
+ optional: 1
type: Number
- optional: true
- name: z
- description: |
- <p>z component of the vector.</p>
+ description: z component of the vector.
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 215
- params:
+ - params:
- name: value
- description: |
- <p>vector to set.</p>
+ description: vector to set.
type: 'p5.Vector|Number[]'
- chainable: 1
chainable: true
---
diff --git a/src/content/reference/en/p5.Vector/setHeading.mdx b/src/content/reference/en/p5.Vector/setHeading.mdx
index 15ee51d50e..d708d4ef4e 100644
--- a/src/content/reference/en/p5.Vector/setHeading.mdx
+++ b/src/content/reference/en/p5.Vector/setHeading.mdx
@@ -1,7 +1,7 @@
---
title: setHeading
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Rotates a 2D vector to a specific angle without changing its magnitude.</p>
@@ -17,12 +17,11 @@ description: >
the units of the current <a
href="/reference/p5/angleMode/">angleMode()</a>.</p>
-line: 2134
+line: 2192
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -104,11 +103,11 @@ example:
</code>
</div>
class: p5.Vector
-params:
- - name: angle
- description: |
- <p>angle of rotation.</p>
- type: Number
+overloads:
+ - params:
+ - name: angle
+ description: angle of rotation.
+ type: Number
chainable: true
---
diff --git a/src/content/reference/en/p5.Vector/setMag.mdx b/src/content/reference/en/p5.Vector/setMag.mdx
index caf24272ce..9c08df6d56 100644
--- a/src/content/reference/en/p5.Vector/setMag.mdx
+++ b/src/content/reference/en/p5.Vector/setMag.mdx
@@ -1,7 +1,7 @@
---
title: setMag
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Sets a vector's magnitude to a given value.</p>
@@ -13,12 +13,11 @@ description: >
change the
original.</p>
-line: 1933
+line: 3709
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -96,29 +95,25 @@ example:
</code>
</div>
class: p5.Vector
+return:
+ description: v with a magnitude set to len
+ type: p5.Vector
overloads:
- - line: 1933
- params:
+ - params:
- name: len
- description: |
- <p>new length for this vector.</p>
+ description: new length for this vector.
type: Number
- chainable: 1
- - line: 3766
- params:
+ - params: []
+ - params:
- name: v
- description: |
- <p>the vector to set the magnitude of</p>
+ description: the vector to set the magnitude of
type: p5.Vector
- name: len
- description: ''
type: Number
- name: target
- description: |
- <p>the vector to receive the result (Optional)</p>
+ description: the vector to receive the result (Optional)
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
return:
description: v with a magnitude set to len
type: p5.Vector
diff --git a/src/content/reference/en/p5.Vector/setValue.mdx b/src/content/reference/en/p5.Vector/setValue.mdx
new file mode 100644
index 0000000000..f1ae9fbffb
--- /dev/null
+++ b/src/content/reference/en/p5.Vector/setValue.mdx
@@ -0,0 +1,39 @@
+---
+title: setValue
+module: Math
+submodule: ''
+file: src/math/p5.Vector.js
+description: >
+ <p>Sets the value at the specified index of the vector.</p>
+
+ <p>This method allows you to change a specific component of the vector by
+ providing its index and the new value you want to set.
+
+ Think of the vector as a list of numbers, where each number represents a
+ different direction (like x, y, or z).
+
+ The index is just the position of the number in that list.</p>
+
+ <p>For example, if you have a vector with values [0, 20, 30], and you want to
+ change the second value (20) to 50,
+
+ you would use this method with index 1 (since indexes start at 0) and value
+ 50.</p>
+line: 144
+isConstructor: false
+itemtype: method
+example: []
+class: p5.Vector
+overloads:
+ - params:
+ - name: index
+ description: The position in the vector where you want to set the new value.
+ type: Number
+ - name: value
+ description: The new value you want to set at the specified position.
+ type: Number
+chainable: false
+---
+
+
+# setValue
diff --git a/src/content/reference/en/p5.Vector/slerp.mdx b/src/content/reference/en/p5.Vector/slerp.mdx
index 1b16e7b42c..5a70f6493a 100644
--- a/src/content/reference/en/p5.Vector/slerp.mdx
+++ b/src/content/reference/en/p5.Vector/slerp.mdx
@@ -1,7 +1,7 @@
---
title: slerp
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Calculates a new heading and magnitude that are between two vectors.</p>
@@ -33,12 +33,11 @@ description: >
doesn't change
the original.</p>
-line: 2667
+line: 3604
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
function setup() {
@@ -155,39 +154,32 @@ return:
description: ''
type: p5.Vector
overloads:
- - line: 2667
- params:
+ - params:
- name: v
- description: |
- <p><a href="#/p5.Vector">p5.Vector</a> to slerp toward.</p>
+ description: <a href="#/p5.Vector">p5.Vector</a> to slerp toward.
type: p5.Vector
- name: amt
- description: |
- <p>amount of interpolation between 0.0 (old vector)
- and 1.0 (new vector). 0.5 is halfway between.</p>
+ description: |-
+ amount of interpolation between 0.0 (old vector)
+ and 1.0 (new vector). 0.5 is halfway between.
type: Number
return:
description: ''
type: p5.Vector
- - line: 3652
- params:
+ - params: []
+ - params:
- name: v1
- description: |
- <p>old vector.</p>
+ description: old vector.
type: p5.Vector
- name: v2
- description: |
- <p>new vector.</p>
+ description: new vector.
type: p5.Vector
- name: amt
- description: ''
type: Number
- name: target
- description: |
- <p>vector to receive the result.</p>
+ description: vector to receive the result.
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
return:
description: slerped vector between v1 and v2
type: p5.Vector
diff --git a/src/content/reference/en/p5.Vector/sub.mdx b/src/content/reference/en/p5.Vector/sub.mdx
index 91a319daa5..4ae29653b2 100644
--- a/src/content/reference/en/p5.Vector/sub.mdx
+++ b/src/content/reference/en/p5.Vector/sub.mdx
@@ -1,7 +1,7 @@
---
title: sub
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Subtracts from a vector's <code>x</code>, <code>y</code>, and
@@ -29,12 +29,11 @@ description: >
<a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change the
originals.</p>
-line: 635
+line: 3392
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -82,7 +81,7 @@ example:
let p1 = createVector(75, 75);
let p2 = createVector(50, 50);
- // Subtract without modifying the original vectors.
+ // Subtract with modifying the original vectors.
let p3 = p5.Vector.sub(p1, p2);
// Draw the points.
@@ -139,47 +138,37 @@ example:
</code>
</div>
class: p5.Vector
+return:
+ description: The resulting <a href="#/p5.Vector">p5.Vector</a>
+ type: p5.Vector
overloads:
- - line: 635
- params:
+ - params:
- name: x
- description: |
- <p>x component of the vector to subtract.</p>
+ description: x component of the vector to subtract.
type: Number
- name: 'y'
- description: |
- <p>y component of the vector to subtract.</p>
+ description: y component of the vector to subtract.
+ optional: 1
type: Number
- optional: true
- name: z
- description: |
- <p>z component of the vector to subtract.</p>
+ description: z component of the vector to subtract.
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 761
- params:
+ - params:
- name: value
- description: |
- <p>the vector to subtract</p>
+ description: the vector to subtract
type: 'p5.Vector|Number[]'
- chainable: 1
- - line: 3405
- params:
+ - params:
- name: v1
- description: |
- <p>A <a href="#/p5.Vector">p5.Vector</a> to subtract from</p>
+ description: A <a href="#/p5.Vector">p5.Vector</a> to subtract from
type: p5.Vector
- name: v2
- description: |
- <p>A <a href="#/p5.Vector">p5.Vector</a> to subtract</p>
+ description: A <a href="#/p5.Vector">p5.Vector</a> to subtract
type: p5.Vector
- name: target
- description: |
- <p>vector to receive the result.</p>
+ description: vector to receive the result.
+ optional: 1
type: p5.Vector
- optional: true
- static: 1
return:
description: The resulting <a href="#/p5.Vector">p5.Vector</a>
type: p5.Vector
diff --git a/src/content/reference/en/p5.Vector/toString.mdx b/src/content/reference/en/p5.Vector/toString.mdx
index 5b1e7397af..fba516a33e 100644
--- a/src/content/reference/en/p5.Vector/toString.mdx
+++ b/src/content/reference/en/p5.Vector/toString.mdx
@@ -1,7 +1,7 @@
---
title: toString
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
description: >
<p>Returns a string representation of a vector.</p>
@@ -10,12 +10,11 @@ description: >
console while
debugging.</p>
-line: 136
+line: 274
isConstructor: false
itemtype: method
example:
- |-
-
<div class = "norender">
<code>
function setup() {
@@ -30,6 +29,11 @@ class: p5.Vector
return:
description: string representation of the vector.
type: String
+overloads:
+ - params: []
+ return:
+ description: string representation of the vector.
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.Vector/x.mdx b/src/content/reference/en/p5.Vector/x.mdx
index 156b1b3dd1..b07d2fa4a6 100644
--- a/src/content/reference/en/p5.Vector/x.mdx
+++ b/src/content/reference/en/p5.Vector/x.mdx
@@ -1,15 +1,14 @@
---
title: x
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
-description: |
- <p>The x component of the vector</p>
-line: 113
+description: The x component of the vector
+line: 3904
isConstructor: false
itemtype: property
+example: []
class: p5.Vector
-type: '{Number}'
---
diff --git a/src/content/reference/en/p5.Vector/y.mdx b/src/content/reference/en/p5.Vector/y.mdx
index 57b121a718..8271166ca0 100644
--- a/src/content/reference/en/p5.Vector/y.mdx
+++ b/src/content/reference/en/p5.Vector/y.mdx
@@ -1,15 +1,14 @@
---
title: 'y'
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
-description: |
- <p>The y component of the vector</p>
-line: 120
+description: The y component of the vector
+line: 3904
isConstructor: false
itemtype: property
+example: []
class: p5.Vector
-type: '{Number}'
---
diff --git a/src/content/reference/en/p5.Vector/z.mdx b/src/content/reference/en/p5.Vector/z.mdx
index 30408807b8..22762cf72a 100644
--- a/src/content/reference/en/p5.Vector/z.mdx
+++ b/src/content/reference/en/p5.Vector/z.mdx
@@ -1,15 +1,14 @@
---
title: z
module: Math
-submodule: Vector
+submodule: ''
file: src/math/p5.Vector.js
-description: |
- <p>The z component of the vector</p>
-line: 127
+description: The z component of the vector
+line: 3904
isConstructor: false
itemtype: property
+example: []
class: p5.Vector
-type: '{Number}'
---
diff --git a/src/content/reference/en/p5.XML/addChild.mdx b/src/content/reference/en/p5.XML/addChild.mdx
index cd779cb663..90fd222fec 100644
--- a/src/content/reference/en/p5.XML/addChild.mdx
+++ b/src/content/reference/en/p5.XML/addChild.mdx
@@ -13,22 +13,19 @@ description: >
inserts
<code>otherXML</code> as a child element of <code>myXML</code>.</p>
-line: 538
+line: 507
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -64,14 +61,17 @@ example:
</code>
</div>
class: p5.XML
-params:
- - name: child
- description: |
- <p>child element to add.</p>
- type: p5.XML
return:
description: added child element.
type: p5.XML
+overloads:
+ - params:
+ - name: child
+ description: child element to add.
+ type: p5.XML
+ return:
+ description: added child element.
+ type: p5.XML
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/getAttributeCount.mdx b/src/content/reference/en/p5.XML/getAttributeCount.mdx
index adbe30d8be..212eee6235 100644
--- a/src/content/reference/en/p5.XML/getAttributeCount.mdx
+++ b/src/content/reference/en/p5.XML/getAttributeCount.mdx
@@ -3,24 +3,20 @@ title: getAttributeCount
module: IO
submodule: Input
file: src/io/p5.XML.js
-description: |
- <p>Returns the number of attributes the element has.</p>
-line: 723
+description: Returns the number of attributes the element has.
+line: 667
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -47,6 +43,11 @@ class: p5.XML
return:
description: number of attributes.
type: Integer
+overloads:
+ - params: []
+ return:
+ description: number of attributes.
+ type: Integer
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/getChild.mdx b/src/content/reference/en/p5.XML/getChild.mdx
index 4eaa97a2d6..12119eb4fe 100644
--- a/src/content/reference/en/p5.XML/getChild.mdx
+++ b/src/content/reference/en/p5.XML/getChild.mdx
@@ -16,22 +16,19 @@ description: >
<code>myXML.getChild(1)</code>, then the child element at that index will be
returned.</p>
-line: 448
+line: 443
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -59,12 +56,10 @@ example:
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -88,14 +83,17 @@ example:
</code>
</div>
class: p5.XML
-params:
- - name: name
- description: |
- <p>element name or index.</p>
- type: String|Integer
return:
description: child element.
type: p5.XML
+overloads:
+ - params:
+ - name: name
+ description: element name or index.
+ type: String|Integer
+ return:
+ description: child element.
+ type: p5.XML
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/getChildren.mdx b/src/content/reference/en/p5.XML/getChildren.mdx
index 65ea80b85b..480e7286bb 100644
--- a/src/content/reference/en/p5.XML/getChildren.mdx
+++ b/src/content/reference/en/p5.XML/getChildren.mdx
@@ -14,22 +14,19 @@ description: >
elements
with the tag <code><cat></code>.</p>
-line: 342
+line: 360
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -66,12 +63,10 @@ example:
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -105,15 +100,18 @@ example:
</code>
</div>
class: p5.XML
-params:
- - name: name
- description: |
- <p>name of the elements to return.</p>
- type: String
- optional: true
return:
description: child elements.
type: 'p5.XML[]'
+overloads:
+ - params:
+ - name: name
+ description: name of the elements to return.
+ optional: 1
+ type: String
+ return:
+ description: child elements.
+ type: 'p5.XML[]'
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/getContent.mdx b/src/content/reference/en/p5.XML/getContent.mdx
index a759224ed0..75bacb3e28 100644
--- a/src/content/reference/en/p5.XML/getContent.mdx
+++ b/src/content/reference/en/p5.XML/getContent.mdx
@@ -13,22 +13,19 @@ description: >
no
content.</p>
-line: 1153
+line: 1107
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -78,16 +75,20 @@ example:
</code>
</div>
class: p5.XML
-params:
- - name: defaultValue
- description: |
- <p>value to return if the element has no
- content.</p>
- type: String
- optional: true
return:
description: element's content as a string.
type: String
+overloads:
+ - params:
+ - name: defaultValue
+ description: |-
+ value to return if the element has no
+ content.
+ optional: 1
+ type: String
+ return:
+ description: element's content as a string.
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/getName.mdx b/src/content/reference/en/p5.XML/getName.mdx
index f7a49dad8d..955d2f6b02 100644
--- a/src/content/reference/en/p5.XML/getName.mdx
+++ b/src/content/reference/en/p5.XML/getName.mdx
@@ -10,22 +10,19 @@ description: >
<code><language>JavaScript</language></code> has the name
<code>language</code>.</p>
-line: 128
+line: 108
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -55,6 +52,11 @@ class: p5.XML
return:
description: name of the element.
type: String
+overloads:
+ - params: []
+ return:
+ description: name of the element.
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/getNum.mdx b/src/content/reference/en/p5.XML/getNum.mdx
index 8e34279764..e10564a70f 100644
--- a/src/content/reference/en/p5.XML/getNum.mdx
+++ b/src/content/reference/en/p5.XML/getNum.mdx
@@ -28,22 +28,19 @@ description: >
<a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
attribute's value.</p>
-line: 884
+line: 872
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -74,12 +71,10 @@ example:
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -108,19 +103,21 @@ example:
</code>
</div>
class: p5.XML
-params:
- - name: name
- description: |
- <p>name of the attribute to be checked.</p>
- type: String
- - name: defaultValue
- description: |
- <p>value to return if the attribute doesn't exist.</p>
- type: Number
- optional: true
return:
description: attribute value as a number.
type: Number
+overloads:
+ - params:
+ - name: name
+ description: name of the attribute to be checked.
+ type: String
+ - name: defaultValue
+ description: value to return if the attribute doesn't exist.
+ optional: 1
+ type: Number
+ return:
+ description: attribute value as a number.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/getParent.mdx b/src/content/reference/en/p5.XML/getParent.mdx
index b4912fff3f..38e00eb26e 100644
--- a/src/content/reference/en/p5.XML/getParent.mdx
+++ b/src/content/reference/en/p5.XML/getParent.mdx
@@ -3,27 +3,24 @@ title: getParent
module: IO
submodule: Input
file: src/io/p5.XML.js
-description: >
- <p>Returns the element's parent element as a new <a
+description: >-
+ Returns the element's parent element as a new <a
href="/reference/p5/p5.XML">p5.XML</a>
- object.</p>
-line: 77
+ object.
+line: 61
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -56,6 +53,11 @@ class: p5.XML
return:
description: parent element.
type: p5.XML
+overloads:
+ - params: []
+ return:
+ description: parent element.
+ type: p5.XML
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/getString.mdx b/src/content/reference/en/p5.XML/getString.mdx
index 7cd2251f7a..f2fd3c3db6 100644
--- a/src/content/reference/en/p5.XML/getString.mdx
+++ b/src/content/reference/en/p5.XML/getString.mdx
@@ -28,22 +28,19 @@ description: >
<a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
attribute's value.</p>
-line: 989
+line: 971
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -74,12 +71,10 @@ example:
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -107,19 +102,21 @@ example:
</code>
</div>
class: p5.XML
-params:
- - name: name
- description: |
- <p>name of the attribute to be checked.</p>
- type: String
- - name: defaultValue
- description: |
- <p>value to return if the attribute doesn't exist.</p>
- type: Number
- optional: true
return:
description: attribute value as a string.
type: String
+overloads:
+ - params:
+ - name: name
+ description: name of the attribute to be checked.
+ type: String
+ - name: defaultValue
+ description: value to return if the attribute doesn't exist.
+ optional: 1
+ type: Number
+ return:
+ description: attribute value as a string.
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/hasAttribute.mdx b/src/content/reference/en/p5.XML/hasAttribute.mdx
index ba5fe63d5d..03ef51943b 100644
--- a/src/content/reference/en/p5.XML/hasAttribute.mdx
+++ b/src/content/reference/en/p5.XML/hasAttribute.mdx
@@ -18,22 +18,19 @@ description: >
<a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
attribute's value.</p>
-line: 821
+line: 772
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -62,14 +59,17 @@ example:
</code>
</div>
class: p5.XML
-params:
- - name: name
- description: |
- <p>name of the attribute to be checked.</p>
- type: String
return:
description: whether the element has the attribute.
- type: Boolean
+ type: boolean
+overloads:
+ - params:
+ - name: name
+ description: name of the attribute to be checked.
+ type: String
+ return:
+ description: whether the element has the attribute.
+ type: boolean
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/hasChildren.mdx b/src/content/reference/en/p5.XML/hasChildren.mdx
index 8141c22cdd..1351c79b3e 100644
--- a/src/content/reference/en/p5.XML/hasChildren.mdx
+++ b/src/content/reference/en/p5.XML/hasChildren.mdx
@@ -3,25 +3,22 @@ title: hasChildren
module: IO
submodule: Input
file: src/io/p5.XML.js
-description: >
- <p>Returns <code>true</code> if the element has child elements and
- <code>false</code> if not.</p>
-line: 242
+description: >-
+ Returns <code>true</code> if the element has child elements and
+ <code>false</code> if not.
+line: 211
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -48,7 +45,12 @@ example:
class: p5.XML
return:
description: whether the element has children.
- type: Boolean
+ type: boolean
+overloads:
+ - params: []
+ return:
+ description: whether the element has children.
+ type: boolean
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/listAttributes.mdx b/src/content/reference/en/p5.XML/listAttributes.mdx
index 095d0e8363..354b2ce0df 100644
--- a/src/content/reference/en/p5.XML/listAttributes.mdx
+++ b/src/content/reference/en/p5.XML/listAttributes.mdx
@@ -13,22 +13,19 @@ description: >
<a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
attribute's value.</p>
-line: 767
+line: 712
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -55,6 +52,11 @@ class: p5.XML
return:
description: attribute names.
type: 'String[]'
+overloads:
+ - params: []
+ return:
+ description: attribute names.
+ type: 'String[]'
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/listChildren.mdx b/src/content/reference/en/p5.XML/listChildren.mdx
index a2e73f6ae9..6d1197972f 100644
--- a/src/content/reference/en/p5.XML/listChildren.mdx
+++ b/src/content/reference/en/p5.XML/listChildren.mdx
@@ -3,25 +3,22 @@ title: listChildren
module: IO
submodule: Input
file: src/io/p5.XML.js
-description: |
- <p>Returns an array with the names of the element's child elements as
- <code>String</code>s.</p>
-line: 287
+description: |-
+ Returns an array with the names of the element's child elements as
+ <code>String</code>s.
+line: 259
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -54,6 +51,11 @@ class: p5.XML
return:
description: names of the child elements.
type: 'String[]'
+overloads:
+ - params: []
+ return:
+ description: names of the child elements.
+ type: 'String[]'
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/removeChild.mdx b/src/content/reference/en/p5.XML/removeChild.mdx
index b00ccb01c1..b624ba1864 100644
--- a/src/content/reference/en/p5.XML/removeChild.mdx
+++ b/src/content/reference/en/p5.XML/removeChild.mdx
@@ -18,22 +18,19 @@ description: >
be
removed.</p>
-line: 603
+line: 613
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -73,12 +70,10 @@ example:
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -114,11 +109,11 @@ example:
</code>
</div>
class: p5.XML
-params:
- - name: name
- description: |
- <p>name or index of the child element to remove.</p>
- type: String|Integer
+overloads:
+ - params:
+ - name: name
+ description: name or index of the child element to remove.
+ type: String|Integer
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/serialize.mdx b/src/content/reference/en/p5.XML/serialize.mdx
index a2b11487cd..ba2f224188 100644
--- a/src/content/reference/en/p5.XML/serialize.mdx
+++ b/src/content/reference/en/p5.XML/serialize.mdx
@@ -10,22 +10,19 @@ description: >
network or
saving it to a file.</p>
-line: 1291
+line: 1221
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -62,6 +59,11 @@ class: p5.XML
return:
description: element as a string.
type: String
+overloads:
+ - params: []
+ return:
+ description: element as a string.
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/setAttribute.mdx b/src/content/reference/en/p5.XML/setAttribute.mdx
index adce9e8a8d..c949cae1a3 100644
--- a/src/content/reference/en/p5.XML/setAttribute.mdx
+++ b/src/content/reference/en/p5.XML/setAttribute.mdx
@@ -18,22 +18,19 @@ description: >
attribute to the
value 123.</p>
-line: 1093
+line: 1034
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -65,15 +62,14 @@ example:
</code>
</div>
class: p5.XML
-params:
- - name: name
- description: |
- <p>name of the attribute to be set.</p>
- type: String
- - name: value
- description: |
- <p>attribute's new value.</p>
- type: Number|String|Boolean
+overloads:
+ - params:
+ - name: name
+ description: name of the attribute to be set.
+ type: String
+ - name: value
+ description: attribute's new value.
+ type: Number|String|Boolean
chainable: false
---
diff --git a/src/content/reference/en/p5.XML/setContent.mdx b/src/content/reference/en/p5.XML/setContent.mdx
deleted file mode 100644
index 5079007b22..0000000000
--- a/src/content/reference/en/p5.XML/setContent.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: setContent
-module: IO
-submodule: Input
-file: src/io/p5.XML.js
-description: >
- <p>Sets the element's content.</p>
-
- <p>An element's content is the text between its tags. For example, the element
-
- <code><language>JavaScript</language></code> has the content
- <code>JavaScript</code>.</p>
-
- <p>The parameter, <code>content</code>, is a string with the element's new
- content.</p>
-line: 1232
-isConstructor: false
-itemtype: method
-example:
- - |-
-
- <div>
- <code>
- let myXML;
-
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
-
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Get the first reptile child element.
- let reptile = myXML.getChild('reptile');
-
- // Get the reptile's original content.
- let oldContent = reptile.getContent();
-
- // Set the reptile's content.
- reptile.setContent('Loggerhead');
-
- // Get the reptile's new content.
- let newContent = reptile.getContent();
-
- // Style the text.
- textAlign(CENTER, CENTER);
- textFont('Courier New');
- textSize(14);
-
- // Display the element's old and new content.
- text(`${oldContent}: ${newContent}`, 5, 50, 90);
-
- describe(
- `The text "${oldContent}: ${newContent}" written in green on a gray background.`
- );
- }
- </code>
- </div>
-class: p5.XML
-params:
- - name: content
- description: |
- <p>new content for the element.</p>
- type: String
-chainable: false
----
-
-
-# setContent
diff --git a/src/content/reference/en/p5.XML/setName.mdx b/src/content/reference/en/p5.XML/setName.mdx
index 5132ced8c8..90cf523386 100644
--- a/src/content/reference/en/p5.XML/setName.mdx
+++ b/src/content/reference/en/p5.XML/setName.mdx
@@ -18,22 +18,19 @@ description: >
name
<code><planet></planet></code>.</p>
-line: 178
+line: 161
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myXML;
- // Load the XML and create a p5.XML object.
- function preload() {
- myXML = loadXML('/assets/animals.xml');
- }
+ async function setup() {
+ // Load the XML and create a p5.XML object.
+ myXML = await loadXML('/assets/animals.xml');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -62,11 +59,11 @@ example:
}
</code></div>
class: p5.XML
-params:
- - name: name
- description: |
- <p>new tag name of the element.</p>
- type: String
+overloads:
+ - params:
+ - name: name
+ description: new tag name of the element.
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/getAudioContext.mdx b/src/content/reference/en/p5.sound/getAudioContext.mdx
new file mode 100644
index 0000000000..fb7ab3cf3c
--- /dev/null
+++ b/src/content/reference/en/p5.sound/getAudioContext.mdx
@@ -0,0 +1,18 @@
+---
+title: getAudioContext
+module: Sound
+submodule: Sound Utilities
+file: src/Utils.js
+description: Get the window's audio context.
+line: 14
+isConstructor: false
+itemtype: method
+class: p5.sound
+return:
+ description: the audio context
+ type: AudioContext
+chainable: false
+---
+
+
+# getAudioContext
diff --git a/src/content/reference/en/p5.sound/loadSound.mdx b/src/content/reference/en/p5.sound/loadSound.mdx
new file mode 100644
index 0000000000..a8cb982c55
--- /dev/null
+++ b/src/content/reference/en/p5.sound/loadSound.mdx
@@ -0,0 +1,56 @@
+---
+title: loadSound
+module: p5.sound
+submodule: SoundFile
+file: src/SoundFile.js
+description: |-
+ loadSound() returns a new SoundFile from a specified
+ path. If called during preload(), the SoundFile will be ready
+ to play in time for setup() and draw(). If called outside of
+ preload, the 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.
+line: 12
+isConstructor: false
+itemtype: method
+example:
+ - |-
+
+ <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 here to play', 10, 20);
+ }
+
+ function canvasPressed() {
+ // playing a sound file on a user gesture
+ // is equivalent to `userStartAudio()`
+ mySound.play();
+ }
+ </code></div>
+class: p5.sound
+params:
+ - name: path
+ description: |-
+ 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.
+ type: String|Array
+return:
+ description: Returns a SoundFile
+ type: SoundFile
+chainable: false
+---
+
+
+# loadSound
diff --git a/src/content/reference/en/p5.sound/p5.Amplitude.mdx b/src/content/reference/en/p5.sound/p5.Amplitude.mdx
index 1aa8a0d443..3d783cdc4b 100644
--- a/src/content/reference/en/p5.sound/p5.Amplitude.mdx
+++ b/src/content/reference/en/p5.sound/p5.Amplitude.mdx
@@ -2,49 +2,60 @@
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>
-line: 3022
+file: src/Amplitude.js
+description: Get the current volume of a sound.
+line: 10
isConstructor: true
params:
- name: smoothing
- description: |
- <p>between 0.0 and .999 to smooth
- amplitude readings (defaults to 0)</p>
+ description: >-
+ Smooth the amplitude analysis by averaging with the last analysis frame.
+ 0.0 is no time averaging with the last analysis frame.
type: Number
optional: true
example:
- - "\n<div><code>\nlet sound, amplitude;\n\nfunction preload(){\n sound = loadSound('/assets/beat.mp3');\n}\nfunction setup() {\n let cnv = createCanvas(100,100);\n cnv.mouseClicked(togglePlay);\n amplitude = new p5.Amplitude();\n}\n\nfunction draw() {\n background(220);\n text('tap to play', 20, 20);\n\n let level = amplitude.getLevel();\n let size = map(level, 0, 1, 0, 200);\n ellipse(width/2, height/2, size, size);\n}\n\nfunction togglePlay() {\n if (sound.isPlaying() ){\n sound.pause();\n } else {\n sound.loop();\n\t\tamplitude = new p5.Amplitude();\n\t\tamplitude.setInput(sound);\n }\n}\n\n</code></div>"
+ - |-
+
+ <div>
+ <code>
+ let sound, amp, cnv;
+
+ function preload() {
+ //replace this sound with something local with rights to distribute
+ sound = loadSound('//assets/Damscray_DancingTiger.mp3');
+ }
+
+ function setup() {
+ cnv = createCanvas(100, 100);
+ cnv.mousePressed(playSound);
+ textAlign(CENTER);
+ fill(255);
+ amp = new p5.Amplitude();
+ sound.connect(amp);
+ }
+
+ function playSound() {
+ sound.play();
+ }
+
+ function draw() {
+ let level = amp.getLevel();
+ level = map(level, 0, 0.2, 0, 255);
+ background(level, 0, 0);
+ text('tap to play', width/2, 20);
+ describe('The color of the background changes based on the amplitude of the sound.');
+ }
+ </code>
+ </div>
methods:
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>
+ description: Connect an audio source to the amplitude object.
path: 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>
+ description: Get the current amplitude value of a sound.
path: 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: p5.Amplitude/toggleNormalize
smooth:
- description: |
- <p>Smooth Amplitude analysis by averaging with the last analysis
- frame. Off by default.</p>
+ description: Get the current amplitude value of a sound.
path: p5.Amplitude/smooth
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.AudioIn.mdx b/src/content/reference/en/p5.sound/p5.AudioIn.mdx
index 2b3f2a87b2..7a5a5f97ab 100644
--- a/src/content/reference/en/p5.sound/p5.AudioIn.mdx
+++ b/src/content/reference/en/p5.sound/p5.AudioIn.mdx
@@ -2,149 +2,58 @@
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>
-line: 6015
+file: src/AudioIn.js
+description: 'Get sound from an input source, typically a computer microphone.'
+line: 11
isConstructor: true
-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
example:
- |-
- <div><code>
- let mic;
+ <div>
+ <code>
+ let mic, delay, filter;
- function setup(){
+ function setup() {
let cnv = createCanvas(100, 100);
- cnv.mousePressed(userStartAudio);
- textAlign(CENTER);
+ cnv.mousePressed(startMic);
+ background(220);
+
mic = new p5.AudioIn();
- mic.start();
+ delay = new p5.Delay(0.74, 0.1);
+ filter = new p5.Biquad(600, "bandpass");
+
+ mic.disconnect();
+ mic.connect(delay);
+ delay.disconnect();
+ delay.connect(filter);
+
+ textAlign(CENTER);
+ textWrap(WORD);
+ textSize(10);
+ text('click to open mic, watch out for feedback', 0, 20, 100);
+ describe('a sketch that accesses the user\'s microphone and connects it to a delay line.')
}
- function draw(){
- background(0);
- fill(255);
- text('tap to start', width/2, 20);
+ function startMic() {
+ mic.start();
+ }
- micLevel = mic.getLevel();
- let y = height - micLevel * height;
- ellipse(width/2, y, 10, 10);
+ function draw() {
+ d = map(mouseX, 0, width, 0.0, 0.5);
+ delay.delayTime(d);
}
- </code></div>
+ </code>
+ </div>
methods:
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>
+ description: Start the audio input.
path: 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>
+ description: Stop the audio input.
path: 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: 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: 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: p5.AudioIn/getLevel
amp:
- description: |
- <p>Set amplitude (volume) of a mic input between 0 and 1.0. <br/></p>
+ description: Set amplitude (volume) of a mic input between 0 and 1.0.
path: 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: 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: p5.AudioIn/setSource
-properties:
- input:
- description: ''
- path: p5.AudioIn/input
- output:
- description: ''
- path: p5.AudioIn/output
- stream:
- description: ''
- path: p5.AudioIn/stream
- mediaStream:
- description: ''
- path: p5.AudioIn/mediaStream
- currentSource:
- description: ''
- path: p5.AudioIn/currentSource
- 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: p5.AudioIn/enabled
- amplitude:
- description: |
- <p>Input amplitude, connect to it by default but not to master out</p>
- path: p5.AudioIn/amplitude
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.AudioVoice.mdx b/src/content/reference/en/p5.sound/p5.AudioVoice.mdx
deleted file mode 100644
index 9030bcfa14..0000000000
--- a/src/content/reference/en/p5.sound/p5.AudioVoice.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-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>
-line: 11149
-isConstructor: true
-methods:
- connect:
- description: |
- <p>Connect to p5 objects or Web Audio Nodes</p>
- path: p5.AudioVoice/connect
- disconnect:
- description: |
- <p>Disconnect from soundOut</p>
- path: p5.AudioVoice/disconnect
-chainable: false
----
-
-
-# p5.AudioVoice
diff --git a/src/content/reference/en/p5.sound/p5.BandPass.mdx b/src/content/reference/en/p5.sound/p5.BandPass.mdx
index a58992dbc8..718f5e3c72 100644
--- a/src/content/reference/en/p5.sound/p5.BandPass.mdx
+++ b/src/content/reference/en/p5.sound/p5.BandPass.mdx
@@ -2,14 +2,15 @@
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>
-line: 6962
+file: src/Biquad.js
+description: Creates a Bandpass Biquad filter.
+line: 164
isConstructor: true
+params:
+ - name: freq
+ description: Set the cutoff frequency of the filter
+ type: Number
+ optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.Biquad.mdx b/src/content/reference/en/p5.sound/p5.Biquad.mdx
new file mode 100644
index 0000000000..245e37064c
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Biquad.mdx
@@ -0,0 +1,92 @@
+---
+title: p5.Biquad
+module: p5.sound
+submodule: p5.sound
+file: src/Biquad.js
+description: Filter the frequency range of a sound.
+line: 11
+isConstructor: true
+params:
+ - name: cutoff
+ description: 'cutoff frequency of the filter, a value between 0 and 24000.'
+ type: Number
+ optional: true
+ - name: type
+ description: |-
+ filter type. Options: "lowpass",
+ "highpass", "bandpass", "lowshelf",
+ "highshelf", "notch", "allpass",
+ "peaking"
+ type: String
+ optional: true
+example:
+ - |-
+
+ <div>
+ <code>
+ ///kind of Karplus-Strong string synthesis using p5.sound.js
+
+ let noise, lowPass, hiPass, delay, env, gain;
+
+ function setup() {
+ let cnv = createCanvas(100, 100);
+ background(220);
+ textAlign(CENTER);
+ textSize(9);
+ text('click and drag mouse', width/2, height/2);
+
+ noise = new p5.Noise('white');
+ env = new p5.Envelope(0);
+ lowPass = new p5.Biquad(1200, 'lowpass');
+ hiPass = new p5.Biquad(55, 'highpass');
+ delay = new p5.Delay(0.0005, 0.97);
+ gain = new p5.Gain(0.5);
+ noise.disconnect();
+ noise.connect(hiPass);
+ hiPass.disconnect();
+ hiPass.connect(env);
+ env.disconnect();
+ env.connect(lowPass);
+ lowPass.disconnect();
+ lowPass.connect(delay);
+
+ cnv.mousePressed(pluckStart);
+ cnv.mouseReleased(pluckStop);
+ cnv.mouseOut(pluckStop);
+ describe('A sketch that synthesizes string sounds.');
+ }
+
+ function pluckStart() {
+ background(0, 255, 255);
+ text('release to trigger decay', width/2, height/2);
+ let dtime = map(mouseX, 0, width, 0.009, 0.001);
+ delay.delayTime(dtime, 0);
+ noise.start();
+ env.triggerAttack();
+ }
+
+ function pluckStop() {
+ background(220);
+ text('click to pluck', width/2, height/2);
+ env.triggerRelease();
+ }
+ </code>
+ </div>
+methods:
+ res:
+ description: The filter's resonance factor.
+ path: p5.Biquad/res
+ gain:
+ description: The gain of the filter in dB units.
+ path: p5.Biquad/gain
+ setType:
+ description: Set the type of the filter.
+ path: p5.Biquad/setType
+ freq:
+ description: Set the cutoff frequency of the filter.
+ path: p5.Biquad/freq
+chainable: false
+---
+
+
+# p5.Biquad
diff --git a/src/content/reference/en/p5.sound/p5.Compressor.mdx b/src/content/reference/en/p5.sound/p5.Compressor.mdx
deleted file mode 100644
index 747bf731a2..0000000000
--- a/src/content/reference/en/p5.sound/p5.Compressor.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-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>
-line: 10036
-isConstructor: true
-methods:
- process:
- description: |
- <p>Performs the same function as .connect, but also accepts
- optional parameters to set compressor's audioParams</p>
- path: p5.Compressor/process
- set:
- description: |
- <p>Set the paramters of a compressor.</p>
- path: p5.Compressor/set
- attack:
- description: |
- <p>Get current attack or set value w/ time ramp</p>
- path: p5.Compressor/attack
- knee:
- description: |
- <p>Get current knee or set value w/ time ramp</p>
- path: p5.Compressor/knee
- ratio:
- description: |
- <p>Get current ratio or set value w/ time ramp</p>
- path: p5.Compressor/ratio
- threshold:
- description: |
- <p>Get current threshold or set value w/ time ramp</p>
- path: p5.Compressor/threshold
- release:
- description: |
- <p>Get current release or set value w/ time ramp</p>
- path: p5.Compressor/release
- reduction:
- description: |
- <p>Return the current reduction value</p>
- path: p5.Compressor/reduction
-properties:
- 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: p5.Compressor/compressor
-chainable: false
----
-
-
-# p5.Compressor
diff --git a/src/content/reference/en/p5.sound/p5.Convolver.mdx b/src/content/reference/en/p5.sound/p5.Convolver.mdx
deleted file mode 100644
index 43a51401a1..0000000000
--- a/src/content/reference/en/p5.sound/p5.Convolver.mdx
+++ /dev/null
@@ -1,127 +0,0 @@
----
-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>
-line: 8549
-isConstructor: true
-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
-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>
-methods:
- process:
- description: |
- <p>Connect a source to the convolver.</p>
- path: 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: 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: 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: p5.Convolver/toggleImpulse
-properties:
- 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: 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: p5.Convolver/impulses
-chainable: false
----
-
-
-# p5.Convolver
diff --git a/src/content/reference/en/p5.sound/p5.Delay.mdx b/src/content/reference/en/p5.sound/p5.Delay.mdx
index d100387609..88176911d0 100644
--- a/src/content/reference/en/p5.sound/p5.Delay.mdx
+++ b/src/content/reference/en/p5.sound/p5.Delay.mdx
@@ -2,40 +2,24 @@
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>
-line: 7926
+file: src/Delay.js
+description: 'A delay effect with parameters for feedback, and delay time.'
+line: 12
isConstructor: true
+params:
+ - name: delayTime
+ description: The delay time in seconds between 0 and 1. Defaults to 0.250.
+ type: Number
+ optional: true
+ - name: feedback
+ description: The amount of feedback in the delay line between 0 and 1. Defaults to 0.2.
+ type: Number
+ optional: true
example:
- |-
- <div><code>
+ <div>
+ <code>
let osc;
function setup() {
@@ -46,83 +30,37 @@ example:
osc = new p5.Oscillator('square');
osc.amp(0.5);
- delay = new p5.Delay();
-
- // delay.process() accepts 4 parameters:
- // source, delayTime (in seconds), feedback, filter frequency
- delay.process(osc, 0.12, .7, 2300);
+ delay = new p5.Delay(0.12, 0.7);
+
+ osc.disconnect();
+ osc.connect(delay);
cnv.mousePressed(oscStart);
+ describe('Tap to play a square wave with delay effect.');
}
function oscStart() {
osc.start();
}
+ </code>
+ </div>
function mouseReleased() {
osc.stop();
}
- </code></div>
methods:
- process:
- description: |
- <p>Add delay to an audio signal according to a set
- of delay parameters.</p>
- path: 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>
+ description: Set the delay time in seconds.
path: 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>
+ description: The amount of feedback in the delay line.
path: 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: 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: p5.Delay/setType
+ process:
+ description: Process an input signal with a delay effect.
+ path: p5.Delay/process
amp:
- description: |
- <p>Set the output level of the delay effect.</p>
+ description: Adjust the amplitude of the delay effect.
path: p5.Delay/amp
- connect:
- description: |
- <p>Send output to a p5.sound or web audio object</p>
- path: p5.Delay/connect
- disconnect:
- description: |
- <p>Disconnect all output.</p>
- path: p5.Delay/disconnect
-properties:
- 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: 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: p5.Delay/rightDelay
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.Distortion.mdx b/src/content/reference/en/p5.sound/p5.Distortion.mdx
deleted file mode 100644
index c6c96b9368..0000000000
--- a/src/content/reference/en/p5.sound/p5.Distortion.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
----
-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>
-line: 10816
-isConstructor: true
-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'''
-methods:
- process:
- description: >
- <p>Process a sound source, optionally specify amount and oversample
- values.</p>
- path: p5.Distortion/process
- set:
- description: |
- <p>Set the amount and oversample of the waveshaper distortion.</p>
- path: p5.Distortion/set
- getAmount:
- description: |
- <p>Return the distortion amount, typically between 0-1.</p>
- path: p5.Distortion/getAmount
- getOversample:
- description: |
- <p>Return the oversampling.</p>
- path: p5.Distortion/getOversample
-properties:
- 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: p5.Distortion/WaveShaperNode
-chainable: false
----
-
-
-# p5.Distortion
diff --git a/src/content/reference/en/p5.sound/p5.EQ.mdx b/src/content/reference/en/p5.sound/p5.EQ.mdx
deleted file mode 100644
index 54573d2c4b..0000000000
--- a/src/content/reference/en/p5.sound/p5.EQ.mdx
+++ /dev/null
@@ -1,121 +0,0 @@
----
-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>
-line: 7105
-isConstructor: true
-params:
- - name: _eqsize
- description: |
- <p>Constructor will accept 3 or 8, defaults to 3</p>
- type: Number
- optional: true
-example:
- - |-
-
- <div><code>
- let eq, soundFile
- let eqBandIndex = 0;
- let eqBandNames = ['lows', 'mids', 'highs'];
-
- function preload() {
- soundFormats('mp3', 'ogg');
- soundFile = loadSound('/assets/beat');
- }
-
- function setup() {
- let cnv = createCanvas(100, 100);
- cnv.mousePressed(toggleSound);
-
- eq = new p5.EQ(eqBandNames.length);
- soundFile.disconnect();
- eq.process(soundFile);
- }
-
- function draw() {
- background(30);
- noStroke();
- fill(255);
- textAlign(CENTER);
- text('filtering ', 50, 25);
-
- fill(255, 40, 255);
- textSize(26);
- text(eqBandNames[eqBandIndex], 50, 55);
-
- fill(255);
- textSize(9);
-
- if (!soundFile.isPlaying()) {
- text('tap to play', 50, 80);
- } else {
- text('tap to filter next band', 50, 80)
- }
- }
-
- function toggleSound() {
- if (!soundFile.isPlaying()) {
- soundFile.play();
- } else {
- eqBandIndex = (eqBandIndex + 1) % eq.bands.length;
- }
-
- for (let i = 0; i < eq.bands.length; i++) {
- eq.bands[i].gain(0);
- }
- // filter the band we want to filter
- eq.bands[eqBandIndex].gain(-40);
- }
- </code></div>
-methods:
- process:
- description: |
- <p>Process an input by connecting it to the EQ</p>
- path: p5.EQ/process
-properties:
- 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: p5.EQ/bands
-chainable: false
----
-
-
-# p5.EQ
diff --git a/src/content/reference/en/p5.sound/p5.Effect.mdx b/src/content/reference/en/p5.sound/p5.Effect.mdx
deleted file mode 100644
index 986c82e148..0000000000
--- a/src/content/reference/en/p5.sound/p5.Effect.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
----
-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.</br></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>
-line: 6423
-isConstructor: true
-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
-methods:
- amp:
- description: |
- <p>Set the output volume of the filter.</p>
- path: 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: p5.Effect/chain
- drywet:
- description: |
- <p>Adjust the dry/wet value.</p>
- path: 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: p5.Effect/connect
- disconnect:
- description: |
- <p>Disconnect all output.</p>
- path: p5.Effect/disconnect
-chainable: false
----
-
-
-# p5.Effect
diff --git a/src/content/reference/en/p5.sound/p5.Envelope.mdx b/src/content/reference/en/p5.sound/p5.Envelope.mdx
index 12146b9ead..aa9b4b882d 100644
--- a/src/content/reference/en/p5.sound/p5.Envelope.mdx
+++ b/src/content/reference/en/p5.sound/p5.Envelope.mdx
@@ -2,189 +2,64 @@
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="/reference/p5.Envelope/setRange/">setRange</a></code> to
- change the attack/release level.
-
- Use <code><a href="/reference/p5.Envelope/setADSR/">setADSR</a></code> to
- change attackTime, decayTime, sustainPercent and releaseTime.</p>
-
- <p>Use the <code><a href="/reference/p5.Envelope/play/">play</a></code> method
- to play the entire envelope,
-
- the <code><a href="/reference/p5.Envelope/ramp/">ramp</a></code> method for a
- pingable trigger,
-
- or <code><a
- href="/reference/p5.Envelope/triggerAttack/">triggerAttack</a></code>/
-
- <code><a
- href="/reference/p5.Envelope/triggerRelease/">triggerRelease</a></code> to
- trigger noteOn/noteOff.</p>
-line: 4721
+file: src/Envelope.js
+description: Generate an amplitude envelope.
+line: 10
isConstructor: true
+params:
+ - name: attack
+ description: how quickly the envelope reaches the maximum level
+ type: Number
+ optional: true
+ - name: decay
+ description: how quickly the envelope reaches the sustain level
+ type: Number
+ optional: true
+ - name: sustain
+ description: how long the envelope stays at the decay level
+ type: Number
+ optional: true
+ - name: release
+ description: how quickly the envelope fades out after the sustain level
+ type: Number
+ optional: true
example:
- |-
- <div><code>
- let t1 = 0.1; // attack time in seconds
- 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 env;
- let triOsc;
-
- function setup() {
- let cnv = createCanvas(100, 100);
- background(220);
- text('tap to play', 20, 20);
- cnv.mousePressed(playSound);
-
- env = new p5.Envelope(t1, l1, t2, l2);
- triOsc = new p5.Oscillator('triangle');
- }
-
- function playSound() {
- // starting the oscillator ensures that audio is enabled.
- triOsc.start();
- env.play(triOsc);
- }
- </code></div>
+ <div>
+ <code>
+ console.log('do an example here');
+ </code>
+ </div>
methods:
- set:
- description: |
- <p>Reset the envelope with a series of time/value pairs.</p>
- path: 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: p5.Envelope/setADSR
- setRange:
- description: |
- <p>Set max (attackLevel) and min (releaseLevel) of envelope.</p>
- path: 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: 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: 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>
+ description: Trigger the envelope and release it after the sustain time.
path: 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>
+ description: >-
+ 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.
path: 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>
+ description: |-
+ Trigger the Release of the envelope. Similar to releasing the key on
+ a piano and letting the sound fade according to the release level and
+ release time.
path: p5.Envelope/triggerRelease
- ramp:
- description: >
- <p>Exponentially ramp to a value using the first two
-
- values from <code><a
- href="/reference/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: 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: 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: 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: p5.Envelope/scale
-properties:
- attackTime:
- description: |
- <p>Time until envelope reaches attackLevel</p>
- path: p5.Envelope/attackTime
- attackLevel:
- description: |
- <p>Level once attack is complete.</p>
- path: p5.Envelope/attackLevel
- decayTime:
- description: |
- <p>Time until envelope reaches decayLevel.</p>
- path: p5.Envelope/decayTime
- decayLevel:
- description: >
- <p>Level after decay. The envelope will sustain here until it is
- released.</p>
- path: p5.Envelope/decayLevel
+ setInput:
+ description: ''
+ path: p5.Envelope/setInput
+ setADSR:
+ description: 'Sets the attack, decay, sustain, and release times of the envelope.'
+ path: p5.Envelope/setADSR
releaseTime:
- description: |
- <p>Duration of the release portion of the envelope.</p>
+ description: Sets the release time of the envelope.
path: p5.Envelope/releaseTime
- releaseLevel:
- description: |
- <p>Level at the end of the release.</p>
- path: p5.Envelope/releaseLevel
+ attackTime:
+ description: Sets the attack time of the envelope.
+ path: p5.Envelope/attackTime
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.FFT.mdx b/src/content/reference/en/p5.sound/p5.FFT.mdx
index 900c8d7022..145609d692 100644
--- a/src/content/reference/en/p5.sound/p5.FFT.mdx
+++ b/src/content/reference/en/p5.sound/p5.FFT.mdx
@@ -2,74 +2,41 @@
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. </br></br></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>
-line: 3347
+file: src/FFT.js
+description: Analyze the frequency spectrum and waveform of sounds.
+line: 11
isConstructor: true
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>
+ - name: fftSize
+ description: >-
+ FFT analysis size. Must be a power of two between 16 and 1024. Defaults to
+ 32.
type: Number
optional: true
example:
- |-
- <div><code>
- function preload(){
- sound = loadSound('/assets/Damscray_DancingTiger.mp3');
- }
+ <div>
+ <code>
+ let osc;
function setup(){
let cnv = createCanvas(100,100);
cnv.mouseClicked(togglePlay);
- fft = new p5.FFT();
- sound.amp(0.2);
+ fft = new p5.FFT(32);
+ osc = new p5.TriOsc(440);
+ osc.connect(fft);
}
function draw(){
background(220);
-
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);
+ fill(255, 0, 0);
+
+ for (let i = 0; i < spectrum.length; i++) {
+ let x = map(i, 0, spectrum.length, 0, width);
+ let h = -height + map(spectrum[i], 0, 0.1, height, 0);
rect(x, height, width / spectrum.length, h )
}
@@ -77,119 +44,32 @@ example:
noFill();
beginShape();
stroke(20);
+
for (let i = 0; i < waveform.length; i++){
let x = map(i, 0, waveform.length, 0, width);
let y = map( waveform[i], -1, 1, 0, height);
vertex(x,y);
}
endShape();
-
- text('tap to play', 20, 20);
+
+ textAlign(CENTER);
+ text('tap to play', width/2, 20);
+ osc.freq(map(mouseX, 0, width, 100, 2000));
+ describe('The sketch displays the frequency spectrum and waveform of the sound that plays.');
}
function togglePlay() {
- if (sound.isPlaying()) {
- sound.pause();
- } else {
- sound.loop();
- }
+ osc.start();
}
- </code></div>
+ </code>
+ </div>
methods:
- 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: 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: 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>
+ description: Returns the frequency spectrum of the input signal.
path: 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>
- path: 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>
- path: p5.FFT/getCentroid
- smooth:
- description: |
- <p>Smooth FFT analysis by averaging with the last analysis frame.</p>
- path: 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>
- path: 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>
- path: 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: p5.FFT/getOctaveBands
+ waveform:
+ description: Returns an array of sample values from the input audio.
+ path: p5.FFT/waveform
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.Filter.mdx b/src/content/reference/en/p5.sound/p5.Filter.mdx
deleted file mode 100644
index 90439817ad..0000000000
--- a/src/content/reference/en/p5.sound/p5.Filter.mdx
+++ /dev/null
@@ -1,157 +0,0 @@
----
-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>
-line: 6628
-isConstructor: true
-params:
- - name: type
- description: |
- <p>'lowpass' (default), 'highpass', 'bandpass'</p>
- type: String
- optional: true
-example:
- - |-
-
- <div><code>
- let fft, noise, filter;
-
- function setup() {
- let cnv = createCanvas(100,100);
- cnv.mousePressed(makeNoise);
- fill(255, 0, 255);
-
- filter = new p5.BandPass();
- noise = new p5.Noise();
- noise.disconnect();
- noise.connect(filter);
-
- fft = new p5.FFT();
- }
-
- function draw() {
- background(220);
-
- // set the BandPass frequency based on mouseX
- let freq = map(mouseX, 0, width, 20, 10000);
- freq = constrain(freq, 0, 22050);
- filter.freq(freq);
- // give the filter a narrow band (lower res = wider bandpass)
- filter.res(50);
-
- // draw filtered spectrum
- let spectrum = fft.analyze();
- noStroke();
- 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);
- }
- if (!noise.started) {
- text('tap here and drag to change frequency', 10, 20, width - 20);
- } else {
- text('Frequency: ' + round(freq)+'Hz', 20, 20, width - 20);
- }
- }
-
- function makeNoise() {
- // see also: `userStartAudio()`
- noise.start();
- noise.amp(0.5, 0.2);
- }
-
- function mouseReleased() {
- noise.amp(0, 0.2);
- }
-
- </code></div>
-methods:
- process:
- description: |
- <p>Filter an audio signal according to a set
- of filter parameters.</p>
- path: p5.Filter/process
- set:
- description: |
- <p>Set the frequency and the resonance of the filter.</p>
- path: 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: p5.Filter/freq
- res:
- description: |
- <p>Controls either width of a bandpass frequency,
- or the resonance of a low/highpass cutoff frequency.</p>
- path: 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: p5.Filter/gain
- toggle:
- description: |
- <p>Toggle function. Switches between the specified type and allpass</p>
- path: 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: p5.Filter/setType
-properties:
- 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: p5.Filter/biquadFilter
-chainable: false
----
-
-
-# p5.Filter
diff --git a/src/content/reference/en/p5.sound/p5.Gain.mdx b/src/content/reference/en/p5.sound/p5.Gain.mdx
index f441abc389..36cba14bc5 100644
--- a/src/content/reference/en/p5.sound/p5.Gain.mdx
+++ b/src/content/reference/en/p5.sound/p5.Gain.mdx
@@ -2,90 +2,52 @@
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>
-line: 10973
+file: src/Gain.js
+description: Generate a gain node to use for mixing and main volume.
+line: 10
isConstructor: true
example:
- |-
- <div><code>
+ <div>
+ <code>
+ let cnv, soundFile, osc, gain;
- // load two soundfile and crossfade beetween them
- let sound1,sound2;
- let sound1Gain, sound2Gain, mixGain;
- function preload(){
- soundFormats('ogg', 'mp3');
- sound1 = loadSound('/assets/Damscray_-_Dancing_Tiger_01');
- sound2 = loadSound('/assets/beat');
+ function preload() {
+ soundFile = loadSound('/assets/Damscray_DancingTiger.mp3');
}
+
function setup() {
- let cnv = createCanvas(100, 100);
- cnv.mousePressed(startSound);
- // create a 'mix' gain bus to which we will connect both soundfiles
- mixGain = new p5.Gain();
- mixGain.connect();
- sound1.disconnect(); // diconnect from p5 output
- sound1Gain = new p5.Gain(); // setup a gain node
- sound1Gain.setInput(sound1); // connect the first sound to its input
- sound1Gain.connect(mixGain); // connect its output to the final mix bus
- sound2.disconnect();
- sound2Gain = new p5.Gain();
- sound2Gain.setInput(sound2);
- sound2Gain.connect(mixGain);
- }
- function startSound() {
- sound1.loop();
- sound2.loop();
- loop();
+ cnv = createCanvas(100, 100);
+ cnv.mousePressed(playSound);
+
+ gain = new p5.Gain(0.74);
+ osc = new p5.Oscillator();
+ osc.amp(0.74);
+ osc.disconnect();
+ soundFile.loop();
+ soundFile.disconnect();
+
+ //connect both sound sources to gain node
+ soundFile.connect(gain);
+ osc.connect(gain);
}
- function mouseReleased() {
- sound1.stop();
- sound2.stop();
+
+ function playSound() {
+ soundFile.play();
+ soundFile.play();
}
- function draw(){
+
+ function draw() {
background(220);
- textAlign(CENTER);
- textSize(11);
- fill(0);
- if (!sound1.isPlaying()) {
- text('tap and drag to play', width/2, height/2);
- return;
- }
- // map the horizontal position of the mouse to values useable for volume * control of sound1
- var sound1Volume = constrain(map(mouseX,width,0,0,1), 0, 1);
- var sound2Volume = 1-sound1Volume;
- sound1Gain.amp(sound1Volume);
- sound2Gain.amp(sound2Volume);
- // map the vertical position of the mouse to values useable for 'output * volume control'
- var outputVolume = constrain(map(mouseY,height,0,0,1), 0, 1);
- mixGain.amp(outputVolume);
- text('output', width/2, height - outputVolume * height * 0.9)
- fill(255, 0, 255);
- textAlign(LEFT);
- text('sound1', 5, height - sound1Volume * height * 0.9);
- textAlign(RIGHT);
- text('sound2', width - 5, height - sound2Volume * height * 0.9);
+ let level = map(mouseX, 0, width, 0, 1);
+ gain.amp(level);
}
- </code></div>
+ </code>
+ </div>
methods:
- setInput:
- description: |
- <p>Connect a source to the gain node.</p>
- path: p5.Gain/setInput
- connect:
- description: |
- <p>Send output to a p5.sound or web audio object</p>
- path: p5.Gain/connect
- disconnect:
- description: |
- <p>Disconnect all output.</p>
- path: p5.Gain/disconnect
amp:
- description: |
- <p>Set the output level of the gain node.</p>
+ description: Adjust the amplitude of the soundfile.
path: p5.Gain/amp
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.HighPass.mdx b/src/content/reference/en/p5.sound/p5.HighPass.mdx
index 3aa854c235..d35221bbfd 100644
--- a/src/content/reference/en/p5.sound/p5.HighPass.mdx
+++ b/src/content/reference/en/p5.sound/p5.HighPass.mdx
@@ -2,14 +2,15 @@
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>
-line: 6938
+file: src/Biquad.js
+description: Creates a Highpass Biquad filter.
+line: 150
isConstructor: true
+params:
+ - name: freq
+ description: Set the cutoff frequency of the filter
+ type: Number
+ optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.LowPass.mdx b/src/content/reference/en/p5.sound/p5.LowPass.mdx
index 6ec84a3429..99f85c1974 100644
--- a/src/content/reference/en/p5.sound/p5.LowPass.mdx
+++ b/src/content/reference/en/p5.sound/p5.LowPass.mdx
@@ -2,14 +2,15 @@
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>
-line: 6914
+file: src/Biquad.js
+description: Creates a Lowpass Biquad filter.
+line: 136
isConstructor: true
+params:
+ - name: freq
+ description: Set the cutoff frequency of the filter
+ type: Number
+ optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.MonoSynth.mdx b/src/content/reference/en/p5.sound/p5.MonoSynth.mdx
deleted file mode 100644
index 9e91f575b5..0000000000
--- a/src/content/reference/en/p5.sound/p5.MonoSynth.mdx
+++ /dev/null
@@ -1,106 +0,0 @@
----
-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>
-line: 11247
-isConstructor: true
-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>
-methods:
- play:
- description: |
- <p>Play tells the MonoSynth to start playing a note. This method schedules
- the calling of .triggerAttack and .triggerRelease.</p>
- path: 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: 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: 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: p5.MonoSynth/setADSR
- amp:
- description: |
- <p>MonoSynth amp</p>
- path: p5.MonoSynth/amp
- connect:
- description: |
- <p>Connect to a p5.sound / Web Audio object.</p>
- path: p5.MonoSynth/connect
- disconnect:
- description: |
- <p>Disconnect all outputs</p>
- path: p5.MonoSynth/disconnect
- dispose:
- description: |
- <p>Get rid of the MonoSynth and free up its resources / memory.</p>
- path: p5.MonoSynth/dispose
-properties:
- attack:
- description: |
- <p>Getters and Setters</p>
- path: p5.MonoSynth/attack
- decay:
- description: ''
- path: p5.MonoSynth/decay
- sustain:
- description: ''
- path: p5.MonoSynth/sustain
- release:
- description: ''
- path: p5.MonoSynth/release
-chainable: false
----
-
-
-# p5.MonoSynth
diff --git a/src/content/reference/en/p5.sound/p5.Noise.mdx b/src/content/reference/en/p5.sound/p5.Noise.mdx
index 843ed2ce1e..dad5cb5143 100644
--- a/src/content/reference/en/p5.sound/p5.Noise.mdx
+++ b/src/content/reference/en/p5.sound/p5.Noise.mdx
@@ -2,24 +2,62 @@
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>
-line: 5620
+file: src/Noise.js
+description: Generate a buffer with random values.
+line: 11
isConstructor: true
params:
- name: type
- description: |
- <p>Type of noise can be 'white' (default),
- 'brown' or 'pink'.</p>
+ description: '- the type of noise (white, pink, brown)'
type: String
+ optional: true
+example:
+ - |-
+
+ <div>
+ <code>
+ let noise, env, cnv;
+ let types = ['white', 'pink', 'brown'];
+ let noiseType = 'brown';
+
+ function setup() {
+ cnv = createCanvas(100, 100);
+ textAlign(CENTER);
+ cnv.mousePressed(start);
+ noise = new p5.Noise(noiseType);
+ env = new p5.Envelope(0.01, 0.1, 0.15, 0.5);
+ noise.disconnect();
+ noise.connect(env);
+ noise.start();
+ }
+
+ function start() {
+ noiseType = random(types);
+ noise.type(noiseType);
+ env.play();
+ }
+
+ function draw() {
+ background(noiseType);
+ text('tap to play', width/2, 20);
+ let txt = 'type: ' + noiseType;
+ text(txt, width/2, 40);
+ }
+ </code>
+ </div>
methods:
- setType:
- description: |
- <p>Set type of noise to 'white', 'pink' or 'brown'.
- White is the default.</p>
- path: p5.Noise/setType
+ type:
+ description: ''
+ path: p5.Noise/type
+ amp:
+ description: Adjust the amplitude of the noise source.
+ path: p5.Noise/amp
+ start:
+ description: Starts the noise source.
+ path: p5.Noise/start
+ stop:
+ description: Stops the noise source.
+ path: p5.Noise/stop
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.OnsetDetect.mdx b/src/content/reference/en/p5.sound/p5.OnsetDetect.mdx
deleted file mode 100644
index 9e335ae74f..0000000000
--- a/src/content/reference/en/p5.sound/p5.OnsetDetect.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-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>
-line: 11624
-isConstructor: true
-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
-chainable: false
----
-
-
-# p5.OnsetDetect
diff --git a/src/content/reference/en/p5.sound/p5.Oscillator.mdx b/src/content/reference/en/p5.sound/p5.Oscillator.mdx
index d3c47fd23b..ed218b669f 100644
--- a/src/content/reference/en/p5.sound/p5.Oscillator.mdx
+++ b/src/content/reference/en/p5.sound/p5.Oscillator.mdx
@@ -2,168 +2,84 @@
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>
-line: 4060
+file: src/Oscillator.js
+description: 'Generate Sine, Triangle, Square and Sawtooth waveforms.'
+line: 12
isConstructor: true
params:
- - name: freq
- description: |
- <p>frequency defaults to 440Hz</p>
+ - name: frequency
+ description: frequency defaults to 440Hz
type: Number
optional: true
- name: type
- description: |
- <p>type of oscillator. Options:
+ description: |-
+ type of oscillator. Options:
'sine' (default), 'triangle',
- 'sawtooth', 'square'</p>
+ 'sawtooth', 'square'
type: String
optional: true
example:
- |-
- <div><code>
+ <div>
+ <code>
let osc, playing, freq, amp;
function setup() {
+ describe("a sketch that demonstrates the frequency and amplitude parameters of an oscillator.");
let cnv = createCanvas(100, 100);
cnv.mousePressed(playOscillator);
- osc = new p5.Oscillator('sine');
+ osc = new p5.Oscillator();
}
function draw() {
background(220)
freq = constrain(map(mouseX, 0, width, 100, 500), 100, 500);
- amp = constrain(map(mouseY, height, 0, 0, 1), 0, 1);
-
+ //amp = constrain(map(mouseY, height, 0, 0, 1), 0, 1);
text('tap to play', 20, 20);
text('freq: ' + freq, 20, 40);
- text('amp: ' + amp, 20, 60);
+ //text('amp: ' + amp, 20, 60);
if (playing) {
// smooth the transitions by 0.1 seconds
- osc.freq(freq, 0.1);
- osc.amp(amp, 0.1);
+ osc.freq(freq);
+ //osc.amp(amp);
}
}
function playOscillator() {
// starting an oscillator on a user gesture will enable audio
// in browsers that have a strict autoplay policy.
- // See also: userStartAudio();
osc.start();
playing = true;
}
function mouseReleased() {
// ramp amplitude to 0 over 0.5 seconds
- osc.amp(0, 0.5);
+ //osc.amp(0, 0.5);
playing = false;
}
- </code> </div>
+ </code>
+ </div>
methods:
- 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: 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: 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: p5.Oscillator/amp
- getAmp:
- description: |
- <p>Returns the value of output gain</p>
- path: 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>
+ description: Adjusts the frequency of the oscillator.
path: p5.Oscillator/freq
- getFreq:
- description: |
- <p>Returns the value of frequency of oscillator</p>
- path: p5.Oscillator/getFreq
- setType:
- description: |
- <p>Set type to 'sine', 'triangle', 'sawtooth' or 'square'.</p>
- path: p5.Oscillator/setType
- getType:
- description: >
- <p>Returns current type of oscillator eg. 'sine', 'triangle', 'sawtooth'
- or 'square'.</p>
- path: p5.Oscillator/getType
- connect:
- description: |
- <p>Connect to a p5.sound / Web Audio object.</p>
- path: p5.Oscillator/connect
- disconnect:
- description: |
- <p>Disconnect all outputs</p>
- path: p5.Oscillator/disconnect
- pan:
- description: |
- <p>Pan between Left (-1) and Right (1)</p>
- path: p5.Oscillator/pan
- getPan:
- description: >
- <p>Returns the current value of panPosition , between Left (-1) and Right
- (1)</p>
- path: 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>
+ description: Adjusts the phase of the oscillator.
path: 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: 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: 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: p5.Oscillator/scale
+ setType:
+ description: Sets the type of the oscillator.
+ path: p5.Oscillator/setType
+ amp:
+ description: Adjust the amplitude of the Oscillator.
+ path: p5.Oscillator/amp
+ start:
+ description: Starts the oscillator. Usually from user gesture.
+ path: p5.Oscillator/start
+ stop:
+ description: Stops the oscillator.
+ path: p5.Oscillator/stop
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.Panner.mdx b/src/content/reference/en/p5.sound/p5.Panner.mdx
new file mode 100644
index 0000000000..bb987224f0
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.Panner.mdx
@@ -0,0 +1,51 @@
+---
+title: p5.Panner
+module: p5.sound
+submodule: p5.sound
+file: src/Panner.js
+description: A panning effect.
+line: 11
+isConstructor: true
+example:
+ - |-
+
+ <div>
+ <code>
+ let panner, lfo, soundfile, cnv;
+
+ function preload() {
+ soundfile = loadSound('//assets/beat.mp3');
+ }
+
+ function setup() {
+ cnv = createCanvas(100, 100);
+ background(220);
+ cnv.mousePressed(startSound);
+
+ panner = new p5.Panner();
+ lfo = new p5.Oscillator(1);
+ //disconnect lfo from speakers because we don't want to hear it!
+ lfo.disconnect();
+ panner.pan(lfo);
+
+ soundfile.loop();
+ soundfile.disconnect();
+ soundfile.connect(panner);
+
+ }
+
+ function startSound() {
+ lfo.start();
+ soundfile.start();
+ }
+ </code>
+ </div>
+methods:
+ pan:
+ description: Pan a sound source left or right.
+ path: p5.Panner/pan
+chainable: false
+---
+
+
+# p5.Panner
diff --git a/src/content/reference/en/p5.sound/p5.Panner3D.mdx b/src/content/reference/en/p5.sound/p5.Panner3D.mdx
index a0401efff1..1e4211d4f0 100644
--- a/src/content/reference/en/p5.sound/p5.Panner3D.mdx
+++ b/src/content/reference/en/p5.sound/p5.Panner3D.mdx
@@ -2,89 +2,126 @@
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/">
+file: src/Panner3D.js
+description: A 3D sound spatializer.
+line: 10
+isConstructor: true
+example:
+ - |-
- Web Audio Spatial Panner Node</a>.
+ <div>
+ <code>
+ let radius = 10 ;
+ let soundSource, spatializer;
+ let font;
+ let cnv;
- This panner is a spatial processing node that allows audio to be positioned
+ let x = 0;
+ let y = 0;
+ let z = 100;
- and oriented in 3D space.</p>
+ let vX;
+ let vY;
+ let vZ;
- <p>The position is relative to an <a title="Web Audio Listener docs"
- href="https://developer.mozilla.org/en-US/docs/Web/API/AudioListener/">
+ function preload() {
+ soundSource = loadSound('//assets/beat.mp3');
+ font = loadFont('//assets/SourceSansPro-Regular.otf');
+ }
- Audio Context Listener</a>, which can be accessed
+ function setup() {
+ describe(
+ 'A 3D shape with a sound source attached to it. The sound source is spatialized using the Panner3D class. Click to play the sound.'
+ );
+ cnv = createCanvas(100, 100, WEBGL);
+ cnv.mousePressed(playSound);
- by <code>p5.soundOut.audiocontext.listener</code></p>
-line: 7602
-isConstructor: true
+ camera(0, 0, 0, 0, 0, 1);
+
+ textFont(font);
+ textAlign(CENTER,CENTER);
+
+ angleMode(DEGREES);
+
+ vX = random(-0.5, 0.5);
+ vY = random(-0.5, 0.5);
+ vZ = random(-0.5, 0.5) * 1.5;
+
+ spatializer = new p5.Panner3D();
+ spatializer.maxDist(100);
+ soundSource.loop();
+ soundSource.disconnect();
+ soundSource.connect(spatializer);
+ }
+
+ function playSound() {
+ soundSource.play();
+ }
+
+ function draw() {
+ background(220);
+ push();
+ textSize(5);
+ fill(0);
+ translate(0,0,100);
+ //text('click to play', 0, 0);
+ pop();
+ // Update Box and Sound Source Position
+ push();
+ moveSoundBox();
+ box(5, 5, 5);
+ pop();
+ }
+
+ // Rotate 1 degree per frame along all three axes
+ function moveSoundBox() {
+ x = x + vX;
+ y = y + vY;
+ z = z + vZ;
+
+ if (x > radius || x < -radius) {
+ vX = -vX;
+ }
+ if (y > radius || y < -radius) {
+ vY = -vY;
+ }
+ if (z > 250 || z < 80) {
+ vZ = -vZ;
+ }
+ //set the position of the 3D panner
+ spatializer.set(x, y, z);
+ //set the postion of the box
+ translate(x, y, z);
+ rotateX(45 + frameCount);
+ rotateZ(45);
+ }
+ </code>
+ </div>
methods:
process:
- description: |
- <p>Connect an audio sorce</p>
+ description: Connects an input source to the 3D panner.
path: p5.Panner3D/process
set:
- description: |
- <p>Set the X,Y,Z position of the Panner</p>
+ description: 'Set the x, y, and z position of the 3D panner.'
path: p5.Panner3D/set
+ setFalloff:
+ description: The rolloff rate of the panner.
+ path: p5.Panner3D/setFalloff
+ maxDist:
+ description: Set the maximum distance of the panner.
+ path: p5.Panner3D/maxDist
+ rolloff:
+ description: Set the rolloff rate of the panner.
+ path: p5.Panner3D/rolloff
positionX:
- description: |
- <p>Getter and setter methods for position coordinates</p>
+ description: Set the X position of the sound source.
path: p5.Panner3D/positionX
positionY:
- description: |
- <p>Getter and setter methods for position coordinates</p>
+ description: Set the Y position of the sound source.
path: p5.Panner3D/positionY
positionZ:
- description: |
- <p>Getter and setter methods for position coordinates</p>
+ description: Set the Z position of the sound source.
path: p5.Panner3D/positionZ
- orient:
- description: |
- <p>Set the X,Y,Z position of the Panner</p>
- path: p5.Panner3D/orient
- orientX:
- description: |
- <p>Getter and setter methods for orient coordinates</p>
- path: p5.Panner3D/orientX
- orientY:
- description: |
- <p>Getter and setter methods for orient coordinates</p>
- path: p5.Panner3D/orientY
- orientZ:
- description: |
- <p>Getter and setter methods for orient coordinates</p>
- path: p5.Panner3D/orientZ
- setFalloff:
- description: |
- <p>Set the rolloff factor and max distance</p>
- path: p5.Panner3D/setFalloff
- maxDist:
- description: |
- <p>Maxium distance between the source and the listener</p>
- path: p5.Panner3D/maxDist
- rollof:
- description: >
- <p>How quickly the volume is reduced as the source moves away from the
- listener</p>
- path: p5.Panner3D/rollof
-properties:
- 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"</br></br></p>
- path: p5.Panner3D/panner
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.Part.mdx b/src/content/reference/en/p5.sound/p5.Part.mdx
deleted file mode 100644
index 8f7f602941..0000000000
--- a/src/content/reference/en/p5.sound/p5.Part.mdx
+++ /dev/null
@@ -1,132 +0,0 @@
----
-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>
-line: 9185
-isConstructor: true
-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
-example:
- - |-
-
- <div><code>
- let box, drum, myPart;
- let boxPat = [1,0,0,2,0,2,0,0];
- let drumPat = [0,1,1,0,2,0,1,0];
-
- function preload() {
- box = loadSound('/assets/beatbox.mp3');
- drum = loadSound('/assets/drum.mp3');
- }
-
- function setup() {
- let cnv = createCanvas(100, 100);
- cnv.mousePressed(playMyPart);
- background(220);
- textAlign(CENTER, CENTER);
- text('tap to play', width/2, height/2);
-
- let boxPhrase = new p5.Phrase('box', playBox, boxPat);
- let drumPhrase = new p5.Phrase('drum', playDrum, drumPat);
- myPart = new p5.Part();
- myPart.addPhrase(boxPhrase);
- myPart.addPhrase(drumPhrase);
- myPart.setBPM(60);
- }
-
- function playBox(time, playbackRate) {
- box.rate(playbackRate);
- box.play(time);
- }
-
- function playDrum(time, playbackRate) {
- drum.rate(playbackRate);
- drum.play(time);
- }
-
- function playMyPart() {
- userStartAudio();
-
- myPart.start();
- }
- </code></div>
-methods:
- setBPM:
- description: |
- <p>Set the tempo of this part, in Beats Per Minute.</p>
- path: p5.Part/setBPM
- getBPM:
- description: |
- <p>Returns the tempo, in Beats Per Minute, of this part.</p>
- path: 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: 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: p5.Part/loop
- noLoop:
- description: |
- <p>Tell the part to stop looping.</p>
- path: 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: p5.Part/stop
- pause:
- description: |
- <p>Pause the part. Playback will resume
- from the current step.</p>
- path: p5.Part/pause
- addPhrase:
- description: |
- <p>Add a p5.Phrase to this Part.</p>
- path: 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: 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: p5.Part/getPhrase
- replaceSequence:
- description: >
- <p>Find all sequences with the specified name, and replace their patterns
- with the specified array.</p>
- path: p5.Part/replaceSequence
- onStep:
- description: >
- <p>Set the function that will be called at every step. This will clear the
- previous function.</p>
- path: p5.Part/onStep
-chainable: false
----
-
-
-# p5.Part
diff --git a/src/content/reference/en/p5.sound/p5.PeakDetect.mdx b/src/content/reference/en/p5.sound/p5.PeakDetect.mdx
deleted file mode 100644
index c76561a532..0000000000
--- a/src/content/reference/en/p5.sound/p5.PeakDetect.mdx
+++ /dev/null
@@ -1,157 +0,0 @@
----
-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>
-line: 10312
-isConstructor: true
-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
-example:
- - |-
-
- <div><code>
-
- var cnv, soundFile, fft, peakDetect;
- var ellipseWidth = 10;
-
- function preload() {
- soundFile = loadSound('/assets/beat.mp3');
- }
-
- function setup() {
- background(0);
- noStroke();
- fill(255);
- textAlign(CENTER);
-
- // p5.PeakDetect requires a p5.FFT
- fft = new p5.FFT();
- peakDetect = new p5.PeakDetect();
- }
-
- function draw() {
- background(0);
- text('click to play/pause', width/2, height/2);
-
- // peakDetect accepts an fft post-analysis
- fft.analyze();
- peakDetect.update(fft);
-
- if ( peakDetect.isDetected ) {
- ellipseWidth = 50;
- } else {
- ellipseWidth *= 0.95;
- }
-
- ellipse(width/2, height/2, ellipseWidth, ellipseWidth);
- }
-
- // toggle play/stop when canvas is clicked
- function mouseClicked() {
- if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
- if (soundFile.isPlaying() ) {
- soundFile.stop();
- } else {
- soundFile.play();
- }
- }
- }
- </code></div>
-methods:
- 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: 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: p5.PeakDetect/onPeak
-chainable: false
----
-
-
-# p5.PeakDetect
diff --git a/src/content/reference/en/p5.sound/p5.Phrase.mdx b/src/content/reference/en/p5.sound/p5.Phrase.mdx
deleted file mode 100644
index e51b87a903..0000000000
--- a/src/content/reference/en/p5.sound/p5.Phrase.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-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>
-line: 9103
-isConstructor: true
-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
-example:
- - |-
-
- <div><code>
- let mySound, myPhrase, myPart;
- let pattern = [1,0,0,2,0,2,0,0];
-
- function preload() {
- mySound = loadSound('/assets/beatbox.mp3');
- }
-
- function setup() {
- let cnv = createCanvas(100, 100);
- cnv.mousePressed(playMyPart);
- background(220);
- text('tap to play', width/2, height/2);
- textAlign(CENTER, CENTER);
-
- myPhrase = new p5.Phrase('bbox', onEachStep, pattern);
- myPart = new p5.Part();
- myPart.addPhrase(myPhrase);
- myPart.setBPM(60);
- }
-
- function onEachStep(time, playbackRate) {
- mySound.rate(playbackRate);
- mySound.play(time);
- }
-
- function playMyPart() {
- userStartAudio();
- myPart.start();
- }
- </code></div>
-properties:
- 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: p5.Phrase/sequence
-chainable: false
----
-
-
-# p5.Phrase
diff --git a/src/content/reference/en/p5.sound/p5.PitchShifter.mdx b/src/content/reference/en/p5.sound/p5.PitchShifter.mdx
new file mode 100644
index 0000000000..5f49497892
--- /dev/null
+++ b/src/content/reference/en/p5.sound/p5.PitchShifter.mdx
@@ -0,0 +1,54 @@
+---
+title: p5.PitchShifter
+module: p5.sound
+submodule: p5.sound
+file: src/PitchShifter.js
+description: Change the pitch of a sound.
+line: 10
+isConstructor: true
+example:
+ - |-
+
+ <div>
+ <code>
+ let cnv, soundFile, pitchShifter;
+
+ function preload() {
+ soundFile = loadSound('//assets/beatbox.mp3');
+ }
+
+ function setup() {
+ cnv = createCanvas(100, 100);
+ cnv.mousePressed(startSound);
+ background(220);
+ textAlign(CENTER);
+ textSize(9);
+ text('click to play sound', width/2, height/2);
+ pitchShifter = new p5.PitchShifter();
+
+ soundFile.disconnect();
+ soundFile.connect(pitchShifter);
+ //change the pitch and retrigger sample when done playing
+ soundFile.onended(changePitch);
+ }
+
+ function startSound () {
+ soundFile.play();
+ }
+
+ function changePitch () {
+ let pitchValue = random(-12, 12);
+ pitchShifter.shift(pitchValue);
+ soundFile.play();
+ }
+ </code>
+ </div>
+methods:
+ shift:
+ description: Shift the pitch of the source audio.
+ path: p5.PitchShifter/shift
+chainable: false
+---
+
+
+# p5.PitchShifter
diff --git a/src/content/reference/en/p5.sound/p5.PolySynth.mdx b/src/content/reference/en/p5.sound/p5.PolySynth.mdx
deleted file mode 100644
index eb121e2690..0000000000
--- a/src/content/reference/en/p5.sound/p5.PolySynth.mdx
+++ /dev/null
@@ -1,137 +0,0 @@
----
-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>
-line: 11691
-isConstructor: true
-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
-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>
-methods:
- play:
- description: >
- <p>Play a note by triggering noteAttack and noteRelease with sustain
- time</p>
- path: 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: 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: 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: 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: p5.PolySynth/noteRelease
- connect:
- description: |
- <p>Connect to a p5.sound / Web Audio object.</p>
- path: p5.PolySynth/connect
- disconnect:
- description: |
- <p>Disconnect all outputs</p>
- path: p5.PolySynth/disconnect
- dispose:
- description: |
- <p>Get rid of the MonoSynth and free up its resources / memory.</p>
- path: p5.PolySynth/dispose
-properties:
- 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: p5.PolySynth/notes
- polyvalue:
- description: |
- <p>A PolySynth must have at least 1 voice, defaults to 8</p>
- path: 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: p5.PolySynth/AudioVoice
-chainable: false
----
-
-
-# p5.PolySynth
diff --git a/src/content/reference/en/p5.sound/p5.Pulse.mdx b/src/content/reference/en/p5.sound/p5.Pulse.mdx
deleted file mode 100644
index 8f27d0c899..0000000000
--- a/src/content/reference/en/p5.sound/p5.Pulse.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-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.</a></p>
-line: 5779
-isConstructor: true
-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
-example:
- - |-
-
- <div><code>
- let pulse;
- function setup() {
- let cnv = createCanvas(100, 100);
- cnv.mousePressed(startPulse);
- background(220);
-
- pulse = new p5.Pulse();
- pulse.amp(0.5);
- pulse.freq(220);
- }
- function startPulse() {
- pulse.start();
- pulse.amp(0.5, 0.02);
- }
- function mouseReleased() {
- pulse.amp(0, 0.2);
- }
- function draw() {
- background(220);
- text('tap to play', 5, 20, width - 20);
- let w = map(mouseX, 0, width, 0, 1);
- w = constrain(w, 0, 1);
- pulse.width(w);
- text('pulse width: ' + w, 5, height - 20);
- }
- </code></div>
-methods:
- width:
- description: |
- <p>Set the width of a Pulse object (an oscillator that implements
- Pulse Width Modulation).</p>
- path: p5.Pulse/width
-chainable: false
----
-
-
-# p5.Pulse
diff --git a/src/content/reference/en/p5.sound/p5.Reverb.mdx b/src/content/reference/en/p5.sound/p5.Reverb.mdx
index 4d0e249011..e4ff63ea26 100644
--- a/src/content/reference/en/p5.sound/p5.Reverb.mdx
+++ b/src/content/reference/en/p5.sound/p5.Reverb.mdx
@@ -2,91 +2,58 @@
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>
-line: 8308
+file: src/Reverb.js
+description: Add reverb to a sound.
+line: 10
isConstructor: true
+params:
+ - name: decayTime
+ description: Set the decay time of the reverb
+ type: Number
+ optional: true
example:
- |-
- <div><code>
- let soundFile, reverb;
- function preload() {
- soundFile = loadSound('/assets/Damscray_DancingTiger.mp3');
- }
+ <div>
+ <code>
+ let noise, osc, env, reverb;
+ let randomTime = 0;
function setup() {
let cnv = createCanvas(100, 100);
cnv.mousePressed(playSound);
-
+ noise = new p5.Noise();
+ env = new p5.Envelope();
reverb = new p5.Reverb();
- soundFile.disconnect(); // so we'll only hear reverb...
+ noise.disconnect();
+ noise.connect(env);
+ env.disconnect();
+ env.connect(reverb);
+ noise.start();
+ textAlign(CENTER);
+ }
- // connect soundFile to reverb, process w/
- // 3 second reverbTime, decayRate of 2%
- reverb.process(soundFile, 3, 2);
+ function playSound() {
+ randomTime = random(0.1, 3);
+ reverb.set(randomTime);
+ env.play();
}
function draw() {
- let dryWet = constrain(map(mouseX, 0, width, 0, 1), 0, 1);
- // 1 = all reverb, 0 = no reverb
- reverb.drywet(dryWet);
-
background(220);
- text('tap to play', 10, 20);
- text('dry/wet: ' + round(dryWet * 100) + '%', 10, height - 20);
- }
-
- function playSound() {
- soundFile.play();
+ text('click to play', width/2, 20);
+ text('decay ' + round(randomTime, 2), width/2, 40);
+ describe('Click to play a sound with a random decay time.');
}
- </code></div>
+ </code>
+ </div>
methods:
- process:
- description: |
- <p>Connect a source to the reverb, and assign reverb parameters.</p>
- path: p5.Reverb/process
set:
- description: |
- <p>Set the reverb settings. Similar to .process(), but without
- assigning a new input.</p>
+ description: Set the decay time of the reverb.
path: p5.Reverb/set
- amp:
- description: |
- <p>Set the output level of the reverb effect.</p>
- path: p5.Reverb/amp
- connect:
- description: |
- <p>Send output to a p5.sound or web audio object</p>
- path: p5.Reverb/connect
- disconnect:
- description: |
- <p>Disconnect all output.</p>
- path: p5.Reverb/disconnect
+ drywet:
+ description: Adjust the dry/wet value.
+ path: p5.Reverb/drywet
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.SawOsc.mdx b/src/content/reference/en/p5.sound/p5.SawOsc.mdx
index 0ba76fe10d..a5dfbac1ed 100644
--- a/src/content/reference/en/p5.sound/p5.SawOsc.mdx
+++ b/src/content/reference/en/p5.sound/p5.SawOsc.mdx
@@ -2,20 +2,13 @@
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>
-line: 4656
+file: src/Oscillator.js
+description: Creates a sawtooth oscillator.
+line: 220
isConstructor: true
params:
- name: freq
- description: |
- <p>Set the frequency</p>
+ description: Set the frequency
type: Number
optional: true
chainable: false
diff --git a/src/content/reference/en/p5.sound/p5.Score.mdx b/src/content/reference/en/p5.sound/p5.Score.mdx
deleted file mode 100644
index d4f2d867d7..0000000000
--- a/src/content/reference/en/p5.sound/p5.Score.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-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>
-line: 9493
-isConstructor: true
-params:
- - name: parts
- description: |
- <p>One or multiple parts, to be played in sequence.</p>
- type: p5.Part
- optional: true
- multiple: true
-methods:
- start:
- description: |
- <p>Start playback of the score.</p>
- path: p5.Score/start
- stop:
- description: |
- <p>Stop playback of the score.</p>
- path: p5.Score/stop
- pause:
- description: |
- <p>Pause playback of the score.</p>
- path: p5.Score/pause
- loop:
- description: |
- <p>Loop playback of the score.</p>
- path: 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: p5.Score/noLoop
- setBPM:
- description: |
- <p>Set the tempo for all parts in the score</p>
- path: p5.Score/setBPM
-chainable: false
----
-
-
-# p5.Score
diff --git a/src/content/reference/en/p5.sound/p5.SinOsc.mdx b/src/content/reference/en/p5.sound/p5.SinOsc.mdx
index b103bf3b89..c0dfb166cb 100644
--- a/src/content/reference/en/p5.sound/p5.SinOsc.mdx
+++ b/src/content/reference/en/p5.sound/p5.SinOsc.mdx
@@ -2,20 +2,13 @@
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>
-line: 4602
+file: src/Oscillator.js
+description: Creates a sine oscillator.
+line: 262
isConstructor: true
params:
- name: freq
- description: |
- <p>Set the frequency</p>
+ description: Set the frequency
type: Number
optional: true
chainable: false
diff --git a/src/content/reference/en/p5.sound/p5.SoundFile.mdx b/src/content/reference/en/p5.sound/p5.SoundFile.mdx
index a5bb335e51..c68e028cf0 100644
--- a/src/content/reference/en/p5.sound/p5.SoundFile.mdx
+++ b/src/content/reference/en/p5.sound/p5.SoundFile.mdx
@@ -1,297 +1,107 @@
---
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>
-line: 1405
+submodule: SoundFile
+file: src/SoundFile.js
+description: Load and play sound files.
+line: 74
isConstructor: true
-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
example:
- |-
- <div><code>
- let mySound;
+ <div>
+ <code>
+ let sound, amp, delay, cnv;
+
function preload() {
- soundFormats('mp3', 'ogg');
- mySound = loadSound('/assets/doorbell');
+ //replace this sound with something local with rights to distribute
+ //need to fix local asset loading first though :)
+ sound = loadSound('//assets/doorbell.mp3');
}
function setup() {
- let cnv = createCanvas(100, 100);
- cnv.mousePressed(canvasPressed);
- background(220);
- text('tap here to play', 10, 20);
+ cnv = createCanvas(100, 100);
+ textAlign(CENTER);
+ cnv.mousePressed(playSound);
+ amp = new p5.Amplitude();
+ delay = new p5.Delay();
+ sound.disconnect();
+ sound.connect(delay);
+ delay.connect(amp);
}
- function canvasPressed() {
- // playing a sound file on a user gesture
- // is equivalent to `userStartAudio()`
- mySound.play();
+ function playSound() {
+ sound.play();
}
- </code></div>
+
+ function draw() {
+ let dtime = map(mouseX, 0, width, 0, 1);
+ delay.delayTime(dtime);
+ let f = map(mouseY, 0, height, 0, .75);
+ delay.feedback(f);
+ let level = map(amp.getLevel(), 0, 0.5, 0, 255);
+ background(level, 0, 0);
+ fill(255);
+ text('click to play', width/2, 20);
+ }
+ </code>
+ </div>
methods:
- isLoaded:
- description: |
- <p>Returns true if the sound file finished loading successfully.</p>
- path: p5.SoundFile/isLoaded
+ start:
+ description: Start the soundfile.
+ path: p5.SoundFile/start
play:
- description: |
- <p>Play the p5.SoundFile</p>
+ description: Start the soundfile.
path: 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: p5.SoundFile/playMode
+ stop:
+ description: Stop the soundfile.
+ path: p5.SoundFile/stop
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>
+ description: Pause the soundfile.
path: p5.SoundFile/pause
loop:
- description: |
- <p>Loop the p5.SoundFile. Accepts optional parameters to set the
- playback rate, playback volume, loopStart, loopEnd.</p>
+ description: Loop the soundfile.
path: 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>
+ description: >-
+ Set a loop region, and optionally a playback rate, and amplitude for the
+ soundfile.
path: p5.SoundFile/setLoop
- isLooping:
- description: >
- <p>Returns 'true' if a p5.SoundFile is currently looping and playing,
- 'false' if not.</p>
- path: p5.SoundFile/isLooping
- isPlaying:
- description: |
- <p>Returns true if a p5.SoundFile is playing, false if not (i.e.
- paused or stopped).</p>
- path: p5.SoundFile/isPlaying
- isPaused:
- description: |
- <p>Returns true if a p5.SoundFile is paused, false if not (i.e.
- playing or stopped).</p>
- path: p5.SoundFile/isPaused
- stop:
- description: |
- <p>Stop soundfile playback.</p>
- path: 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: p5.SoundFile/pan
- getPan:
- description: |
- <p>Returns the current stereo pan position (-1.0 to 1.0)</p>
- path: p5.SoundFile/getPan
+ amp:
+ description: Adjust the amplitude of the soundfile.
+ path: p5.SoundFile/amp
+ setPath:
+ description: Change the path for the soundfile.
+ path: p5.SoundFile/setPath
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>
+ description: Set the playback rate of the soundfile.
path: 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: p5.SoundFile/setVolume
duration:
- description: |
- <p>Returns the duration of a sound file in seconds.</p>
+ description: Returns the duration of a sound file in seconds.
path: 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: 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: p5.SoundFile/jump
- channels:
- description: |
- <p>Return the number of channels in a sound file.
- For example, Mono = 1, Stereo = 2.</p>
- path: p5.SoundFile/channels
sampleRate:
- description: |
- <p>Return the sample rate of the sound file.</p>
+ description: Gets the number of channels in the sound file.
path: p5.SoundFile/sampleRate
- frames:
- description: |
- <p>Return the number of samples in a sound file.
- Equal to sampleRate * duration.</p>
- path: 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: p5.SoundFile/getPeaks
- reverseBuffer:
- description: |
- <p>Reverses the p5.SoundFile's buffer source.
- Playback must be handled separately (see example).</p>
- path: p5.SoundFile/reverseBuffer
+ jump:
+ description: >-
+ Move the playhead of a soundfile that is currently playing to a new
+ position.
+ path: p5.SoundFile/jump
+ isPlaying:
+ description: Return the playback state of the soundfile.
+ path: p5.SoundFile/isPlaying
+ isLooping:
+ description: Return the playback state of the soundfile.
+ path: p5.SoundFile/isLooping
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>
+ description: Define a function to call when the soundfile is done playing.
path: 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: p5.SoundFile/connect
- disconnect:
- description: |
- <p>Disconnects the output of this p5sound object.</p>
- path: p5.SoundFile/disconnect
- setPath:
- description: |
- <p>Reset the source for this SoundFile to a
- new path (URL).</p>
- path: p5.SoundFile/setPath
- setBuffer:
- description: |
- <p>Replace the current Audio Buffer with a new Buffer.</p>
- path: 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: p5.SoundFile/addCue
- removeCue:
- description: |
- <p>Remove a callback based on its ID. The ID is returned by the
- addCue method.</p>
- path: p5.SoundFile/removeCue
- clearCues:
- description: |
- <p>Remove all of the callbacks that had originally been scheduled
- via the addCue method.</p>
- path: 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: 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: p5.SoundFile/getBlob
+ frames:
+ description: Return the number of samples in a sound file.
+ path: p5.SoundFile/frames
+ channels:
+ description: Gets the number of channels in the sound file.
+ path: p5.SoundFile/channels
chainable: false
---
diff --git a/src/content/reference/en/p5.sound/p5.SoundLoop.mdx b/src/content/reference/en/p5.sound/p5.SoundLoop.mdx
deleted file mode 100644
index e0a5dc9076..0000000000
--- a/src/content/reference/en/p5.sound/p5.SoundLoop.mdx
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: p5.SoundLoop
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
- <p>SoundLoop</p>
-line: 9673
-isConstructor: true
-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
-example:
- - |-
-
- <div><code>
- let synth, soundLoop;
- let notePattern = [60, 62, 64, 67, 69, 72];
-
- function setup() {
- let cnv = createCanvas(100, 100);
- cnv.mousePressed(canvasPressed);
- colorMode(HSB);
- background(0, 0, 86);
- text('tap to start/stop', 10, 20);
-
- //the looper's callback is passed the timeFromNow
- //this value should be used as a reference point from
- //which to schedule sounds
- let intervalInSeconds = 0.2;
- soundLoop = new p5.SoundLoop(onSoundLoop, intervalInSeconds);
-
- synth = new p5.MonoSynth();
- }
-
- function canvasPressed() {
- // ensure audio is enabled
- userStartAudio();
-
- if (soundLoop.isPlaying) {
- soundLoop.stop();
- } else {
- // start the loop
- soundLoop.start();
- }
- }
-
- function onSoundLoop(timeFromNow) {
- let noteIndex = (soundLoop.iterations - 1) % notePattern.length;
- let note = midiToFreq(notePattern[noteIndex]);
- synth.play(note, 0.5, timeFromNow);
- background(noteIndex * 360 / notePattern.length, 50, 100);
- }
- </code></div>
-methods:
- start:
- description: |
- <p>Start the loop</p>
- path: p5.SoundLoop/start
- stop:
- description: |
- <p>Stop the loop</p>
- path: p5.SoundLoop/stop
- pause:
- description: |
- <p>Pause the loop</p>
- path: 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: p5.SoundLoop/syncedStart
-properties:
- 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: p5.SoundLoop/bpm
- timeSignature:
- description: |
- <p>number of quarter notes in a measure (defaults to 4)</p>
- path: p5.SoundLoop/timeSignature
- interval:
- description: |
- <p>length of the loops interval</p>
- path: p5.SoundLoop/interval
- iterations:
- description: |
- <p>how many times the callback has been called so far</p>
- path: 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: p5.SoundLoop/musicalTimeMode
- maxIterations:
- description: |
- <p>Set a limit to the number of loops to play. defaults to Infinity</p>
- path: p5.SoundLoop/maxIterations
-chainable: false
----
-
-
-# p5.SoundLoop
diff --git a/src/content/reference/en/p5.sound/p5.SoundRecorder.mdx b/src/content/reference/en/p5.sound/p5.SoundRecorder.mdx
deleted file mode 100644
index ae53f7fa5f..0000000000
--- a/src/content/reference/en/p5.sound/p5.SoundRecorder.mdx
+++ /dev/null
@@ -1,108 +0,0 @@
----
-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>
-line: 10559
-isConstructor: true
-example:
- - |-
-
- <div><code>
- let mic, recorder, soundFile;
- let state = 0;
-
- function setup() {
- let cnv = createCanvas(100, 100);
- cnv.mousePressed(canvasPressed);
- background(220);
- textAlign(CENTER, CENTER);
-
- // create an audio in
- mic = new p5.AudioIn();
-
- // prompts user to enable their browser mic
- mic.start();
-
- // create a sound recorder
- recorder = new p5.SoundRecorder();
-
- // connect the mic to the recorder
- recorder.setInput(mic);
-
- // this sound file will be used to
- // playback & save the recording
- soundFile = new p5.SoundFile();
-
- text('tap to record', width/2, height/2);
- }
-
- function canvasPressed() {
- // ensure audio is enabled
- userStartAudio();
-
- // make sure user enabled the mic
- if (state === 0 && mic.enabled) {
-
- // record to our p5.SoundFile
- recorder.record(soundFile);
-
- background(255,0,0);
- text('Recording!', width/2, height/2);
- state++;
- }
- else if (state === 1) {
- background(0,255,0);
-
- // stop recorder and
- // send result to soundFile
- recorder.stop();
-
- text('Done! Tap to play and download', width/2, height/2, width - 20);
- state++;
- }
-
- else if (state === 2) {
- soundFile.play(); // play the result!
- save(soundFile, 'mySound.wav');
- state++;
- }
- }
- </div></code>
-methods:
- 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: 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: 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: p5.SoundRecorder/stop
-chainable: false
----
-
-
-# p5.SoundRecorder
diff --git a/src/content/reference/en/p5.sound/p5.SqrOsc.mdx b/src/content/reference/en/p5.sound/p5.SqrOsc.mdx
index 11e9769ff1..c4ee387e43 100644
--- a/src/content/reference/en/p5.sound/p5.SqrOsc.mdx
+++ b/src/content/reference/en/p5.sound/p5.SqrOsc.mdx
@@ -2,20 +2,13 @@
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>
-line: 4683
+file: src/Oscillator.js
+description: Creates a square oscillator.
+line: 234
isConstructor: true
params:
- name: freq
- description: |
- <p>Set the frequency</p>
+ description: Set the frequency
type: Number
optional: true
chainable: false
diff --git a/src/content/reference/en/p5.sound/p5.TriOsc.mdx b/src/content/reference/en/p5.sound/p5.TriOsc.mdx
index 96e24afbc0..1ae76b6851 100644
--- a/src/content/reference/en/p5.sound/p5.TriOsc.mdx
+++ b/src/content/reference/en/p5.sound/p5.TriOsc.mdx
@@ -2,20 +2,13 @@
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>
-line: 4629
+file: src/Oscillator.js
+description: Creates a triangle oscillator.
+line: 248
isConstructor: true
params:
- name: freq
- description: |
- <p>Set the frequency</p>
+ description: Set the frequency
type: Number
optional: true
chainable: false
diff --git a/src/content/reference/en/p5.sound/setAudioContext.mdx b/src/content/reference/en/p5.sound/setAudioContext.mdx
new file mode 100644
index 0000000000..30fb43f72a
--- /dev/null
+++ b/src/content/reference/en/p5.sound/setAudioContext.mdx
@@ -0,0 +1,21 @@
+---
+title: setAudioContext
+module: Sound
+submodule: Sound Utilities
+file: src/Utils.js
+description: >-
+ Sets the AudioContext to a specified context to enable cross library
+ compatibility.
+line: 30
+isConstructor: false
+itemtype: method
+class: p5.sound
+params:
+ - name: the
+ description: desired AudioContext.
+ type: AudioContext
+chainable: false
+---
+
+
+# setAudioContext
diff --git a/src/content/reference/en/p5.sound/userStartAudio.mdx b/src/content/reference/en/p5.sound/userStartAudio.mdx
new file mode 100644
index 0000000000..a52b1d148a
--- /dev/null
+++ b/src/content/reference/en/p5.sound/userStartAudio.mdx
@@ -0,0 +1,17 @@
+---
+title: userStartAudio
+module: Sound
+submodule: Sound Utilities
+file: src/Utils.js
+description: >-
+ userStartAudio() starts the AudioContext on a user gesture. It can be placed
+ in a specific interaction function, such as mousePressed().
+line: 39
+isConstructor: false
+itemtype: method
+class: p5.sound
+chainable: false
+---
+
+
+# userStartAudio
diff --git a/src/content/reference/en/p5.sound/userStopAudio.mdx b/src/content/reference/en/p5.sound/userStopAudio.mdx
new file mode 100644
index 0000000000..a7369151aa
--- /dev/null
+++ b/src/content/reference/en/p5.sound/userStopAudio.mdx
@@ -0,0 +1,15 @@
+---
+title: userStopAudio
+module: Sound
+submodule: Sound Utilities
+file: src/Utils.js
+description: userStopAudio() stops the AudioContext on a user gesture.
+line: 47
+isConstructor: false
+itemtype: method
+class: p5.sound
+chainable: false
+---
+
+
+# userStopAudio
diff --git a/src/content/reference/en/p5/HSB.mdx b/src/content/reference/en/p5/HSB.mdx
new file mode 100644
index 0000000000..0b41a7fb12
--- /dev/null
+++ b/src/content/reference/en/p5/HSB.mdx
@@ -0,0 +1,22 @@
+---
+title: HSB
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >-
+ 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>.
+line: 32
+isConstructor: false
+itemtype: property
+example: []
+class: p5
+type: HSB
+---
+
+
+# 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..4be35270d5
--- /dev/null
+++ b/src/content/reference/en/p5/HSL.mdx
@@ -0,0 +1,16 @@
+---
+title: HSL
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: ''
+line: 38
+isConstructor: false
+itemtype: property
+example: []
+class: p5
+type: HSL
+---
+
+
+# HSL
diff --git a/src/content/reference/en/p5/HWB.mdx b/src/content/reference/en/p5/HWB.mdx
new file mode 100644
index 0000000000..aa7a3a0946
--- /dev/null
+++ b/src/content/reference/en/p5/HWB.mdx
@@ -0,0 +1,16 @@
+---
+title: HWB
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: ''
+line: 44
+isConstructor: false
+itemtype: property
+example: []
+class: p5
+type: HWB
+---
+
+
+# HWB
diff --git a/src/content/reference/en/p5/LAB.mdx b/src/content/reference/en/p5/LAB.mdx
new file mode 100644
index 0000000000..20c4dfa4c1
--- /dev/null
+++ b/src/content/reference/en/p5/LAB.mdx
@@ -0,0 +1,16 @@
+---
+title: LAB
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: ''
+line: 50
+isConstructor: false
+itemtype: property
+example: []
+class: p5
+type: LAB
+---
+
+
+# LAB
diff --git a/src/content/reference/en/p5/LCH.mdx b/src/content/reference/en/p5/LCH.mdx
new file mode 100644
index 0000000000..c6d664484b
--- /dev/null
+++ b/src/content/reference/en/p5/LCH.mdx
@@ -0,0 +1,16 @@
+---
+title: LCH
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: ''
+line: 56
+isConstructor: false
+itemtype: property
+example: []
+class: p5
+type: LCH
+---
+
+
+# LCH
diff --git a/src/content/reference/en/p5/OKLAB.mdx b/src/content/reference/en/p5/OKLAB.mdx
new file mode 100644
index 0000000000..f8e2df880d
--- /dev/null
+++ b/src/content/reference/en/p5/OKLAB.mdx
@@ -0,0 +1,16 @@
+---
+title: OKLAB
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: ''
+line: 62
+isConstructor: false
+itemtype: property
+example: []
+class: p5
+type: OKLAB
+---
+
+
+# OKLAB
diff --git a/src/content/reference/en/p5/OKLCH.mdx b/src/content/reference/en/p5/OKLCH.mdx
new file mode 100644
index 0000000000..286f0ebe4e
--- /dev/null
+++ b/src/content/reference/en/p5/OKLCH.mdx
@@ -0,0 +1,16 @@
+---
+title: OKLCH
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: ''
+line: 68
+isConstructor: false
+itemtype: property
+example: []
+class: p5
+type: OKLCH
+---
+
+
+# OKLCH
diff --git a/src/content/reference/en/p5/RGB.mdx b/src/content/reference/en/p5/RGB.mdx
new file mode 100644
index 0000000000..990cc5f94d
--- /dev/null
+++ b/src/content/reference/en/p5/RGB.mdx
@@ -0,0 +1,16 @@
+---
+title: RGB
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: ''
+line: 16
+isConstructor: false
+itemtype: property
+example: []
+class: p5
+type: RGB
+---
+
+
+# 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..a2a1a22f13
--- /dev/null
+++ b/src/content/reference/en/p5/RGBA.mdx
@@ -0,0 +1,16 @@
+---
+title: RGBA
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: ''
+line: 74
+isConstructor: false
+itemtype: property
+example: []
+class: p5
+type: RGBA
+---
+
+
+# RGBA
diff --git a/src/content/reference/en/p5/RGBHDR.mdx b/src/content/reference/en/p5/RGBHDR.mdx
new file mode 100644
index 0000000000..69e5f1e0e4
--- /dev/null
+++ b/src/content/reference/en/p5/RGBHDR.mdx
@@ -0,0 +1,16 @@
+---
+title: RGBHDR
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: ''
+line: 22
+isConstructor: false
+itemtype: property
+example: []
+class: p5
+type: RGBHDR
+---
+
+
+# RGBHDR
diff --git a/src/content/reference/en/p5/abs.mdx b/src/content/reference/en/p5/abs.mdx
index 64974a6548..fd0b89a8d9 100644
--- a/src/content/reference/en/p5/abs.mdx
+++ b/src/content/reference/en/p5/abs.mdx
@@ -13,12 +13,11 @@ description: >
<code>abs(5)</code> both return 5. The absolute value of a number is always
positive.</p>
-line: 10
+line: 45
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -43,14 +42,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: 'n'
- description: |
- <p>number to compute.</p>
- type: Number
return:
description: absolute value of given number.
type: Number
+overloads:
+ - params:
+ - name: 'n'
+ description: number to compute.
+ type: Number
+ return:
+ description: absolute value of given number.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/accelerationX.mdx b/src/content/reference/en/p5/accelerationX.mdx
index 14edb024b5..ed29acdcb6 100644
--- a/src/content/reference/en/p5/accelerationX.mdx
+++ b/src/content/reference/en/p5/accelerationX.mdx
@@ -3,17 +3,14 @@ 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
+description: |-
+ The system variable accelerationX always contains the acceleration of the
+ device along the x axis. Value is represented as meters per second squared.
+line: 42
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Move a touchscreen device to register
diff --git a/src/content/reference/en/p5/accelerationY.mdx b/src/content/reference/en/p5/accelerationY.mdx
index 4e9deb8f0d..178a02364a 100644
--- a/src/content/reference/en/p5/accelerationY.mdx
+++ b/src/content/reference/en/p5/accelerationY.mdx
@@ -3,17 +3,14 @@ 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
+description: |-
+ The system variable accelerationY always contains the acceleration of the
+ device along the y axis. Value is represented as meters per second squared.
+line: 64
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Move a touchscreen device to register
diff --git a/src/content/reference/en/p5/accelerationZ.mdx b/src/content/reference/en/p5/accelerationZ.mdx
index ac646333b0..27855511d4 100644
--- a/src/content/reference/en/p5/accelerationZ.mdx
+++ b/src/content/reference/en/p5/accelerationZ.mdx
@@ -3,17 +3,14 @@ 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
+description: |-
+ The system variable accelerationZ always contains the acceleration of the
+ device along the z axis. Value is represented as meters per second squared.
+line: 87
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Move a touchscreen device to register
diff --git a/src/content/reference/en/p5/acos.mdx b/src/content/reference/en/p5/acos.mdx
index fdf96c404c..e4d35efc94 100644
--- a/src/content/reference/en/p5/acos.mdx
+++ b/src/content/reference/en/p5/acos.mdx
@@ -18,12 +18,11 @@ description: >
then values are
returned in the range 0 to 180.</p>
-line: 18
+line: 79
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -68,14 +67,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: value
- description: |
- <p>value whose arc cosine is to be returned.</p>
- type: Number
return:
description: arc cosine of the given value.
type: Number
+overloads:
+ - params:
+ - name: value
+ description: value whose arc cosine is to be returned.
+ type: Number
+ return:
+ description: arc cosine of the given value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/addElement.mdx b/src/content/reference/en/p5/addElement.mdx
new file mode 100644
index 0000000000..aa08666221
--- /dev/null
+++ b/src/content/reference/en/p5/addElement.mdx
@@ -0,0 +1,19 @@
+---
+title: addElement
+module: DOM
+submodule: DOM
+file: src/dom/p5.MediaElement.js
+description: Helpers for create methods.
+line: 1311
+isConstructor: false
+itemtype: method
+example: []
+class: p5
+overloads:
+ - params: []
+ - params: []
+chainable: false
+---
+
+
+# addElement
diff --git a/src/content/reference/en/p5/alpha.mdx b/src/content/reference/en/p5/alpha.mdx
index 9c389580de..d034298757 100644
--- a/src/content/reference/en/p5/alpha.mdx
+++ b/src/content/reference/en/p5/alpha.mdx
@@ -12,12 +12,11 @@ description: >
components, or
a CSS color string.</p>
-line: 16
+line: 923
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -45,7 +44,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -73,7 +71,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -101,15 +98,19 @@ example:
</code>
</div>
class: p5
-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'
return:
description: the alpha value.
type: Number
+overloads:
+ - params:
+ - name: color
+ description: |-
+ <a href="#/p5.Color">p5.Color</a> object, array of
+ color components, or CSS color string.
+ type: 'p5.Color|Number[]|String'
+ return:
+ description: the alpha value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/ambientLight.mdx b/src/content/reference/en/p5/ambientLight.mdx
index b241dd85c2..19998e5cae 100644
--- a/src/content/reference/en/p5/ambientLight.mdx
+++ b/src/content/reference/en/p5/ambientLight.mdx
@@ -52,12 +52,11 @@ description: >
using
the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-line: 10
+line: 192
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -174,63 +173,49 @@ example:
</div>
class: p5
overloads:
- - line: 10
- params:
+ - params:
- name: v1
- description: |
- <p>red or hue value in the current
- <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ red or hue value in the current
+ <a href="#/p5/colorMode">colorMode()</a>.
type: Number
- name: v2
- description: |
- <p>green or saturation value in the current
- <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ green or saturation value in the current
+ <a href="#/p5/colorMode">colorMode()</a>.
type: Number
- name: v3
- description: |
- <p>blue, brightness, or lightness value in the current
- <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ blue, brightness, or lightness value in the current
+ <a href="#/p5/colorMode">colorMode()</a>.
type: Number
- name: alpha
- description: |
- <p>alpha (transparency) value in the current
- <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ alpha (transparency) value in the current
+ <a href="#/p5/colorMode">colorMode()</a>.
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 164
- params:
+ - params:
- name: gray
- description: |
- <p>grayscale value between 0 and 255.</p>
+ description: grayscale value between 0 and 255.
type: Number
- name: alpha
- description: ''
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 171
- params:
+ - params:
- name: value
- description: |
- <p>color as a CSS string.</p>
+ description: color as a CSS string.
type: String
- chainable: 1
- - line: 177
- params:
+ - params:
- name: values
- description: |
- <p>color as an array of RGBA, HSBA, or HSLA
- values.</p>
+ description: |-
+ color as an array of RGBA, HSBA, or HSLA
+ values.
type: 'Number[]'
- chainable: 1
- - line: 184
- params:
+ - params:
- name: color
- description: |
- <p>color as a <a href="#/p5.Color">p5.Color</a> object.</p>
+ description: color as a <a href="#/p5.Color">p5.Color</a> object.
type: p5.Color
- chainable: 1
chainable: true
---
diff --git a/src/content/reference/en/p5/ambientMaterial.mdx b/src/content/reference/en/p5/ambientMaterial.mdx
index 2e891ceb1b..35b3dfc203 100644
--- a/src/content/reference/en/p5/ambientMaterial.mdx
+++ b/src/content/reference/en/p5/ambientMaterial.mdx
@@ -53,12 +53,11 @@ description: >
using the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
<p>Note: <code>ambientMaterial()</code> can only be used in WebGL mode.</p>
-line: 2416
+line: 3111
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -226,39 +225,32 @@ example:
</div>
class: p5
overloads:
- - line: 2416
- params:
+ - params:
- name: v1
- description: |
- <p>red or hue value in the current
- <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ red or hue value in the current
+ <a href="#/p5/colorMode">colorMode()</a>.
type: Number
- name: v2
- description: |
- <p>green or saturation value in the
- current <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ green or saturation value in the
+ current <a href="#/p5/colorMode">colorMode()</a>.
type: Number
- name: v3
- description: |
- <p>blue, brightness, or lightness value in the
- current <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ blue, brightness, or lightness value in the
+ current <a href="#/p5/colorMode">colorMode()</a>.
type: Number
- chainable: 1
- - line: 2621
- params:
+ - params:
- name: gray
- description: |
- <p>grayscale value between 0 (black) and 255 (white).</p>
+ description: grayscale value between 0 (black) and 255 (white).
type: Number
- chainable: 1
- - line: 2627
- params:
+ - params:
- name: color
- description: |
- <p>color as a <a href="#/p5.Color">p5.Color</a> object,
- an array of color values, or a CSS string.</p>
+ description: |-
+ color as a <a href="#/p5.Color">p5.Color</a> object,
+ an array of color values, or a CSS string.
type: 'p5.Color|Number[]|String'
- chainable: 1
chainable: true
---
diff --git a/src/content/reference/en/p5/angleMode.mdx b/src/content/reference/en/p5/angleMode.mdx
index 3196b9ed9d..f2551cea4e 100644
--- a/src/content/reference/en/p5/angleMode.mdx
+++ b/src/content/reference/en/p5/angleMode.mdx
@@ -23,12 +23,11 @@ description: >
mode, which
is either <code>RADIANS</code> or <code>DEGREES</code>.</p>
-line: 557
+line: 746
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -197,18 +196,18 @@ example:
</code>
</div>
class: p5
+return:
+ description: mode either RADIANS or DEGREES
+ type: RADIANS|DEGREES
overloads:
- - line: 557
- params:
+ - params:
- name: mode
- description: |
- <p>either RADIANS or DEGREES.</p>
- type: Constant
- - line: 743
- params: []
+ description: either RADIANS or DEGREES.
+ type: RADIANS|DEGREES
+ - params: []
return:
description: mode either RADIANS or DEGREES
- type: Constant
+ type: RADIANS|DEGREES
chainable: false
---
diff --git a/src/content/reference/en/p5/append.mdx b/src/content/reference/en/p5/append.mdx
deleted file mode 100644
index 280dcb1660..0000000000
--- a/src/content/reference/en/p5/append.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
----
-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
-deprecated: >-
- Use <a
- href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push">array.push(value)</a>
- instead.
-isConstructor: false
-itemtype: method
-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>
-class: p5
-params:
- - name: array
- description: |
- <p>Array to append</p>
- type: Array
- - name: value
- description: |
- <p>to be added to the Array</p>
- type: Any
-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
index 5a43b9f169..4eee8acb60 100644
--- a/src/content/reference/en/p5/applyMatrix.mdx
+++ b/src/content/reference/en/p5/applyMatrix.mdx
@@ -40,15 +40,9 @@ description: >
elements in the following transformation matrix:</p>
- <blockquote>
-
- <p><img style="max-width: 150px" src="/assets/transformation-matrix.png"
- alt="The transformation matrix used when applyMatrix is called in 2D
- mode."/></p>
-
- </blockquote>
-
- <p>The numbers can be passed individually, as in
+ <img style="max-width: 150px" src="/assets/transformation-matrix.png" alt="The
+ transformation matrix used when applyMatrix is called in 2D mode."/><p>The
+ numbers can be passed individually, as in
<code>applyMatrix(2, 0, 0, 0, 2, 0)</code>. They can also be passed in an
array, as in
@@ -92,12 +86,11 @@ description: >
function won't
cause shapes to transform continuously.</p>
-line: 11
+line: 235
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -241,102 +234,74 @@ example:
</div>
class: p5
overloads:
- - line: 11
- params:
+ - params:
- name: arr
- description: >
- <p>an array containing the elements of the transformation matrix. Its
- length should be either 6 (2D) or 16 (3D).</p>
+ description: >-
+ an array containing the elements of the transformation matrix. Its
+ length should be either 6 (2D) or 16 (3D).
type: Array
- chainable: 1
- - line: 206
- params:
+ - params:
- name: a
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: b
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: c
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: d
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: e
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: f
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- chainable: 1
- - line: 216
- params:
+ - params:
- name: a
- description: ''
type: Number
- name: b
- description: ''
type: Number
- name: c
- description: ''
type: Number
- name: d
- description: ''
type: Number
- name: e
- description: ''
type: Number
- name: f
- description: ''
type: Number
- name: g
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: h
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: i
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: j
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: k
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: l
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: m
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: 'n'
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: o
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- name: p
- description: |
- <p>an element of the transformation matrix.</p>
+ description: an element of the transformation matrix.
type: Number
- chainable: 1
chainable: true
---
diff --git a/src/content/reference/en/p5/arc.mdx b/src/content/reference/en/p5/arc.mdx
index b9a3c87165..e76fe5934b 100644
--- a/src/content/reference/en/p5/arc.mdx
+++ b/src/content/reference/en/p5/arc.mdx
@@ -2,7 +2,7 @@
title: arc
module: Shape
submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
+file: src/shape/2d_primitives.js
description: >
<p>Draws an arc.</p>
@@ -23,14 +23,8 @@ description: >
between which to draw the arc. Arcs are always drawn clockwise from
- <code>start</code> to <code>stop</code>. The fifth and sixth parameters, start
- and stop, set the
-
- angles between which to draw the arc. Arcs are always drawn clockwise from
-
- start to stop. By default, angles are given in radians, but if angleMode
-
- (DEGREES) is set, the function interprets the values in degrees.</p>
+ <code>start</code> to <code>stop</code>. Angles are always given in
+ radians.</p>
<p>The seventh parameter, <code>mode</code>, is optional. It determines the
arc's fill
@@ -44,12 +38,11 @@ description: >
how many
vertices are used to draw the arc in WebGL mode. The default value is 25.</p>
-line: 102
+line: 311
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -64,7 +57,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -79,7 +71,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -226,45 +217,40 @@ example:
</code>
</div>
class: p5
-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
+overloads:
+ - params:
+ - name: x
+ description: x-coordinate of the arc's ellipse.
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the arc's ellipse.
+ type: Number
+ - name: w
+ description: width of the arc's ellipse by default.
+ type: Number
+ - name: h
+ description: height of the arc's ellipse by default.
+ type: Number
+ - name: start
+ description: 'angle to start the arc, specified in radians.'
+ type: Number
+ - name: stop
+ description: 'angle to stop the arc, specified in radians.'
+ type: Number
+ - name: mode
+ description: |-
+ optional parameter to determine the way of drawing
+ the arc. either CHORD, PIE, or OPEN.
+ optional: 1
+ type: CHORD|PIE|OPEN
+ - name: detail
+ description: |-
+ 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.
+ optional: 1
+ type: Integer
chainable: true
---
diff --git a/src/content/reference/en/p5/arrayCopy.mdx b/src/content/reference/en/p5/arrayCopy.mdx
deleted file mode 100644
index 63f0254777..0000000000
--- a/src/content/reference/en/p5/arrayCopy.mdx
+++ /dev/null
@@ -1,92 +0,0 @@
----
-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="/reference/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
-deprecated: >-
- Use <a
- href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin">arr1.copyWithin(arr2)</a>
- instead.
-isConstructor: false
-itemtype: method
-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>
-class: p5
-overloads:
- - line: 35
- params:
- - name: src
- description: |
- <p>the source Array</p>
- type: Array
- - name: srcPosition
- description: |
- <p>starting position in the source Array</p>
- type: Integer
- - name: dst
- description: |
- <p>the destination Array</p>
- type: Array
- - name: dstPosition
- description: |
- <p>starting position in the destination Array</p>
- type: Integer
- - name: length
- description: |
- <p>number of Array elements to be copied</p>
- type: Integer
- - line: 73
- params:
- - name: src
- description: ''
- type: Array
- - name: dst
- description: ''
- type: Array
- - name: length
- description: ''
- type: Integer
- optional: true
-chainable: false
----
-
-
-# arrayCopy
diff --git a/src/content/reference/en/p5/asin.mdx b/src/content/reference/en/p5/asin.mdx
index 3a9a2e3e31..683e3bad82 100644
--- a/src/content/reference/en/p5/asin.mdx
+++ b/src/content/reference/en/p5/asin.mdx
@@ -18,12 +18,11 @@ description: >
then values are
returned in the range -90 to 90.</p>
-line: 80
+line: 141
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -68,14 +67,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: value
- description: |
- <p>value whose arc sine is to be returned.</p>
- type: Number
return:
description: arc sine of the given value.
type: Number
+overloads:
+ - params:
+ - name: value
+ description: value whose arc sine is to be returned.
+ type: Number
+ return:
+ description: arc sine of the given value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/atan.mdx b/src/content/reference/en/p5/atan.mdx
index d79b9dd5f8..b40861f417 100644
--- a/src/content/reference/en/p5/atan.mdx
+++ b/src/content/reference/en/p5/atan.mdx
@@ -18,12 +18,11 @@ description: >
<code>DEGREES</code>
then values are returned in the range -90 to 90.</p>
-line: 142
+line: 203
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -68,14 +67,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: value
- description: |
- <p>value whose arc tangent is to be returned.</p>
- type: Number
return:
description: arc tangent of the given value.
type: Number
+overloads:
+ - params:
+ - name: value
+ description: value whose arc tangent is to be returned.
+ type: Number
+ return:
+ description: arc tangent of the given value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/atan2.mdx b/src/content/reference/en/p5/atan2.mdx
index 1dd114da96..5b86f5f3f9 100644
--- a/src/content/reference/en/p5/atan2.mdx
+++ b/src/content/reference/en/p5/atan2.mdx
@@ -24,12 +24,11 @@ description: >
then values are
returned in the range -180 to 180.</p>
-line: 204
+line: 280
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -84,18 +83,20 @@ example:
</code>
</div>
class: p5
-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
return:
description: arc tangent of the given point.
type: Number
+overloads:
+ - params:
+ - name: 'y'
+ description: y-coordinate of the point.
+ type: Number
+ - name: x
+ description: x-coordinate of the point.
+ type: Number
+ return:
+ description: arc tangent of the given point.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/background.mdx b/src/content/reference/en/p5/background.mdx
index 6e83c4b14c..515e45756a 100644
--- a/src/content/reference/en/p5/background.mdx
+++ b/src/content/reference/en/p5/background.mdx
@@ -59,12 +59,11 @@ description: >
background a bright
yellow color.</p>
-line: 414
+line: 650
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -225,84 +224,64 @@ example:
</div>
class: p5
overloads:
- - line: 414
- params:
+ - params:
- name: color
- description: >
- <p>any value created by the <a href="#/p5/color">color()</a>
- function</p>
+ description: any value created by the <a href="#/p5/color">color()</a> function
type: p5.Color
- chainable: 1
- - line: 608
- params:
+ - params:
- name: colorstring
- description: |
- <p>color string, possible formats include: integer
- rgb() or rgba(), percentage rgb() or rgba(),
- 3-digit hex, 6-digit hex.</p>
+ description: |-
+ color string, possible formats include: integer
+ rgb() or rgba(), percentage rgb() or rgba(),
+ 3-digit hex, 6-digit hex.
type: String
- name: a
- description: |
- <p>opacity of the background relative to current
- color range (default is 0-255).</p>
+ description: |-
+ opacity of the background relative to current
+ color range (default is 0-255).
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 618
- params:
+ - params:
- name: gray
- description: |
- <p>specifies a value between white and black.</p>
+ description: specifies a value between white and black.
type: Number
- name: a
- description: ''
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 625
- params:
+ - params:
- name: v1
- description: >
- <p>red value if color mode is RGB, or hue value if color mode is
- HSB.</p>
+ description: 'red value if color mode is RGB, or hue value if color mode is HSB.'
type: Number
- name: v2
- description: >
- <p>green value if color mode is RGB, or saturation value if color mode
- is HSB.</p>
+ description: >-
+ green value if color mode is RGB, or saturation value if color mode is
+ HSB.
type: Number
- name: v3
- description: >
- <p>blue value if color mode is RGB, or brightness value if color mode
- is HSB.</p>
+ description: >-
+ blue value if color mode is RGB, or brightness value if color mode is
+ HSB.
type: Number
- name: a
- description: ''
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 634
- params:
+ - params:
- name: values
- description: |
- <p>an array containing the red, green, blue
- and alpha components of the color.</p>
+ description: |-
+ an array containing the red, green, blue
+ and alpha components of the color.
type: 'Number[]'
- chainable: 1
- - line: 641
- params:
+ - params:
- name: image
- description: |
- <p>image created with <a href="#/p5/loadImage">loadImage()</a>
- or <a href="#/p5/createImage">createImage()</a>,
- to set as background.
- (must be same size as the sketch window).</p>
+ description: |-
+ image created with <a href="#/p5/loadImage">loadImage()</a>
+ or <a href="#/p5/createImage">createImage()</a>,
+ to set as background.
+ (must be same size as the sketch window).
type: p5.Image
- name: a
- description: ''
+ optional: 1
type: Number
- optional: true
- chainable: 1
chainable: true
---
diff --git a/src/content/reference/en/p5/baseColorShader.mdx b/src/content/reference/en/p5/baseColorShader.mdx
index bd66263c0b..f3229b1b05 100644
--- a/src/content/reference/en/p5/baseColorShader.mdx
+++ b/src/content/reference/en/p5/baseColorShader.mdx
@@ -13,117 +13,73 @@ description: >
<table>
- <thead>
+ <tr><th>Hook</th><th>Description</th></tr>
- <tr>
+ <tr><td><p><code>void beforeVertex</code></p>
- <th>Hook</th>
+ </td><td><p>Called at the start of the vertex shader.</p>
- <th>Description</th>
+ </td></tr>
- </tr>
+ <tr><td><p><code>Vertex getObjectInputs</code></p>
- </thead>
+ </td><td><p>Update the vertex data of the model being drawn before any
+ positioning has been applied. It takes in a <code>Vertex</code> struct, which
+ includes:</p>
- <tbody><tr>
+ <ul><li><code>vec3 position</code>, the position of the
+ vertex</li><li><code>vec3 normal</code>, the direction facing out of the
+ surface</li><li><code>vec2 texCoord</code>, the texture coordinates associeted
+ with the vertex</li><li><code>vec4 color</code>, the per-vertex color
- <td><code>void beforeVertex</code></td>
+ The struct can be modified and returned.</li></ul></td></tr>
- <td>Called at the start of the vertex shader.</td>
+ <tr><td><p><code>Vertex getWorldInputs</code></p>
- </tr>
+ </td><td><p>Update the vertex data of the model being drawn after
+ transformations such as <code>translate()</code> and <code>scale()</code> have
+ been applied, but before the camera has been applied. It takes in a
+ <code>Vertex</code> struct like, in the <code>getObjectInputs</code> hook
+ above, that can be modified and returned.</p>
- <tr>
+ </td></tr>
- <td><code>vec3 getLocalPosition</code></td>
+ <tr><td><p><code>Vertex getCameraInputs</code></p>
- <td>Update the position of vertices before transforms are applied. It takes in
- <code>vec3 position</code> and must return a modified version.</td>
+ </td><td><p>Update the vertex data of the model being drawn as they appear
+ relative to the camera. It takes in a <code>Vertex</code> struct like, in the
+ <code>getObjectInputs</code> hook above, that can be modified and
+ returned.</p>
- </tr>
+ </td></tr>
- <tr>
+ <tr><td><p><code>void afterVertex</code></p>
- <td><code>vec3 getWorldPosition</code></td>
+ </td><td><p>Called at the end of the vertex shader.</p>
- <td>Update the position of vertices after transforms are applied. It takes in
- <code>vec3 position</code> and pust return a modified version.</td>
+ </td></tr>
- </tr>
+ <tr><td><p><code>void beforeFragment</code></p>
- <tr>
+ </td><td><p>Called at the start of the fragment shader.</p>
- <td><code>vec3 getLocalNormal</code></td>
+ </td></tr>
- <td>Update the normal before transforms are applied. It takes in <code>vec3
- normal</code> and must return a modified version.</td>
+ <tr><td><p><code>vec4 getFinalColor</code></p>
- </tr>
+ </td><td><p>Update the final color after mixing. It takes in a <code>vec4
+ color</code> and must return a modified version.</p>
- <tr>
+ </td></tr>
- <td><code>vec3 getWorldNormal</code></td>
+ <tr><td><p><code>void afterFragment</code></p>
- <td>Update the normal after transforms are applied. It takes in <code>vec3
- normal</code> and must return a modified version.</td>
+ </td><td><p>Called at the end of the fragment shader.</p>
- </tr>
+ </td></tr>
- <tr>
-
- <td><code>vec2 getUV</code></td>
-
- <td>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
- return a modified version.</td>
-
- </tr>
-
- <tr>
-
- <td><code>vec4 getVertexColor</code></td>
-
- <td>Update the color of each vertex. It takes in a <code>vec4 color</code> and
- must return a modified version.</td>
-
- </tr>
-
- <tr>
-
- <td><code>void afterVertex</code></td>
-
- <td>Called at the end of the vertex shader.</td>
-
- </tr>
-
- <tr>
-
- <td><code>void beforeFragment</code></td>
-
- <td>Called at the start of the fragment shader.</td>
-
- </tr>
-
- <tr>
-
- <td><code>vec4 getFinalColor</code></td>
-
- <td>Update the final color after mixing. It takes in a <code>vec4 color</code>
- and must return a modified version.</td>
-
- </tr>
-
- <tr>
-
- <td><code>void afterFragment</code></td>
-
- <td>Called at the end of the fragment shader.</td>
-
- </tr>
-
- </tbody></table>
-
- <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
- If you
+ </table><p>Most of the time, you will need to write your hooks in GLSL ES
+ version 300. If you
are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
@@ -131,12 +87,11 @@ description: >
hooks and
their default implementations.</p>
-line: 1292
+line: 1874
isConstructor: false
itemtype: method
example:
- |-
-
<div modernizr='webgl'>
<code>
let myShader;
@@ -147,9 +102,10 @@ example:
uniforms: {
'float time': () => millis()
},
- 'vec3 getWorldPosition': `(vec3 pos) {
- pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
- return pos;
+ 'Vertex getWorldInputs': `(Vertex inputs) {
+ inputs.position.y +=
+ 20. * sin(time * 0.001 + inputs.position.x * 0.05);
+ return inputs;
}`
});
}
@@ -167,8 +123,12 @@ class: p5
return:
description: The color shader
type: p5.Shader
+overloads:
+ - params: []
+ return:
+ description: The color shader
+ type: p5.Shader
chainable: false
-beta: true
---
diff --git a/src/content/reference/en/p5/baseFilterShader.mdx b/src/content/reference/en/p5/baseFilterShader.mdx
new file mode 100644
index 0000000000..1895b8a6d5
--- /dev/null
+++ b/src/content/reference/en/p5/baseFilterShader.mdx
@@ -0,0 +1,97 @@
+---
+title: baseFilterShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+ <p>Get the base shader for filters.</p>
+
+ <p>You can then call <a
+ href="/reference/p5.Shader/modify/"><code>baseFilterShader().modify()</code></a>
+
+ and change the following hook:</p>
+
+ <table>
+
+ <tr><th>Hook</th><th>Description</th></tr>
+
+ <tr><td><p><code>vec4 getColor</code></p>
+
+ </td><td><p>Output the final color for the current pixel. It takes in two
+ parameters:
+
+ <code>FilterInputs inputs</code>, and <code>in sampler2D canvasContent</code>,
+ and must return a color
+
+ as a <code>vec4</code>.</p>
+
+ <p><code>FilterInputs inputs</code> is a scruct with the following
+ properties:</p>
+
+ <ul><li><code>vec2 texCoord</code>, the position on the canvas, with
+ coordinates between 0 and 1. Calling
+
+ <code>getTexture(canvasContent, texCoord)</code> returns the original color of
+ the current pixel.</li><li><code>vec2 canvasSize</code>, the width and height
+ of the sketch.</li><li><code>vec2 texelSize</code>, the size of one real pixel
+ relative to the size of the whole canvas.
+
+ This is equivalent to <code>1 / (canvasSize *
+ pixelDensity)</code>.</li></ul><p><code>in sampler2D canvasContent</code> is a
+ texture with the contents of the sketch, pre-filter. Call
+
+ <code>getTexture(canvasContent, someCoordinate)</code> to retrieve the color
+ of the sketch at that coordinate,
+
+ with coordinate values between 0 and 1.</p>
+
+ </td></tr>
+
+ </table><p>Most of the time, you will need to write your hooks in GLSL ES
+ version 300. If you
+
+ are using WebGL 1, write your hooks in GLSL ES 100 instead.</p>
+line: 1577
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div modernizr='webgl'>
+ <code>
+ let img;
+ let myShader;
+
+ async function setup() {
+ img = await loadImage('/assets/bricks.jpg');
+ createCanvas(100, 100, WEBGL);
+ myShader = baseFilterShader().modify(() => {
+ let time = uniformFloat(() => millis());
+ getColor((inputs, canvasContent) => {
+ inputs.texCoord.y +=
+ 0.02 * sin(time * 0.001 + inputs.texCoord.x * 5);
+ return texture(canvasContent, inputs.texCoord);
+ });
+ });
+ }
+
+ function draw() {
+ image(img, -50, -50);
+ filter(myShader);
+ describe('an image of bricks, distorting over time');
+ }
+ </code>
+ </div>
+class: p5
+return:
+ description: The filter shader
+ type: p5.Shader
+overloads:
+ - params: []
+ return:
+ description: The filter shader
+ type: p5.Shader
+chainable: false
+---
+
+
+# baseFilterShader
diff --git a/src/content/reference/en/p5/baseMaterialShader.mdx b/src/content/reference/en/p5/baseMaterialShader.mdx
index 81a2788982..3cb27b7da2 100644
--- a/src/content/reference/en/p5/baseMaterialShader.mdx
+++ b/src/content/reference/en/p5/baseMaterialShader.mdx
@@ -17,231 +17,110 @@ description: >
<tr><th>Hook</th><th>Description</th></tr>
- <tr><td>
+ <tr><td><p><code>void beforeVertex</code></p>
-
- <p><code>void beforeVertex</code></p>
-
- </td><td>
-
-
- <p>Called at the start of the vertex shader.</p>
-
- </td></tr>
-
- <tr><td>
-
-
- <p><code>vec3 getLocalPosition</code></p>
-
- </td><td>
-
-
- <p>Update the position of vertices before transforms are applied. It takes in
- <code>vec3 position</code> and must return a modified version.</p>
-
- </td></tr>
-
- <tr><td>
-
-
- <p><code>vec3 getWorldPosition</code></p>
-
- </td><td>
-
-
- <p>Update the position of vertices after transforms are applied. It takes in
- <code>vec3 position</code> and pust return a modified version.</p>
-
- </td></tr>
-
- <tr><td>
-
-
- <p><code>vec3 getLocalNormal</code></p>
-
- </td><td>
-
-
- <p>Update the normal before transforms are applied. It takes in <code>vec3
- normal</code> and must return a modified version.</p>
+ </td><td><p>Called at the start of the vertex shader.</p>
</td></tr>
- <tr><td>
-
-
- <p><code>vec3 getWorldNormal</code></p>
+ <tr><td><p><code>Vertex getObjectInputs</code></p>
- </td><td>
+ </td><td><p>Update the vertex data of the model being drawn before any
+ positioning has been applied. It takes in a <code>Vertex</code> struct, which
+ includes:</p>
+ <ul><li><code>vec3 position</code>, the position of the
+ vertex</li><li><code>vec3 normal</code>, the direction facing out of the
+ surface</li><li><code>vec2 texCoord</code>, the texture coordinates associeted
+ with the vertex</li><li><code>vec4 color</code>, the per-vertex color
- <p>Update the normal after transforms are applied. It takes in <code>vec3
- normal</code> and must return a modified version.</p>
-
- </td></tr>
-
- <tr><td>
-
-
- <p><code>vec2 getUV</code></p>
-
- </td><td>
+ The struct can be modified and returned.</li></ul></td></tr>
+ <tr><td><p><code>Vertex getWorldInputs</code></p>
- <p>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
- return a modified version.</p>
+ </td><td><p>Update the vertex data of the model being drawn after
+ transformations such as <code>translate()</code> and <code>scale()</code> have
+ been applied, but before the camera has been applied. It takes in a
+ <code>Vertex</code> struct like, in the <code>getObjectInputs</code> hook
+ above, that can be modified and returned.</p>
</td></tr>
- <tr><td>
-
-
- <p><code>vec4 getVertexColor</code></p>
+ <tr><td><p><code>Vertex getCameraInputs</code></p>
- </td><td>
-
-
- <p>Update the color of each vertex. It takes in a <code>vec4 color</code> and
- must return a modified version.</p>
+ </td><td><p>Update the vertex data of the model being drawn as they appear
+ relative to the camera. It takes in a <code>Vertex</code> struct like, in the
+ <code>getObjectInputs</code> hook above, that can be modified and
+ returned.</p>
</td></tr>
- <tr><td>
-
-
- <p><code>void afterVertex</code></p>
+ <tr><td><p><code>void afterVertex</code></p>
- </td><td>
-
-
- <p>Called at the end of the vertex shader.</p>
+ </td><td><p>Called at the end of the vertex shader.</p>
</td></tr>
- <tr><td>
-
+ <tr><td><p><code>void beforeFragment</code></p>
- <p><code>void beforeFragment</code></p>
-
- </td><td>
-
-
- <p>Called at the start of the fragment shader.</p>
+ </td><td><p>Called at the start of the fragment shader.</p>
</td></tr>
- <tr><td>
-
-
- <p><code>Inputs getPixelInputs</code></p>
-
- </td><td>
+ <tr><td><p><code>Inputs getPixelInputs</code></p>
-
- <p>Update the per-pixel inputs of the material. It takes in an
+ </td><td><p>Update the per-pixel inputs of the material. It takes in an
<code>Inputs</code> struct, which includes:</p>
- <ul>
-
- <li><code>vec3 normal</code>, the direction pointing out of the surface</li>
-
- <li><code>vec2 texCoord</code>, a vector where <code>x</code> and
+ <ul><li><code>vec3 normal</code>, the direction pointing out of the
+ surface</li><li><code>vec2 texCoord</code>, a vector where <code>x</code> and
<code>y</code> are between 0 and 1 describing the spot on a texture the pixel
- is mapped to, as a fraction of the texture size</li>
-
- <li><code>vec3 ambientLight</code>, the ambient light color on the vertex</li>
-
- <li><code>vec4 color</code>, the base material color of the pixel</li>
-
- <li><code>vec3 ambientMaterial</code>, the color of the pixel when affected by
- ambient light</li>
-
- <li><code>vec3 specularMaterial</code>, the color of the pixel when reflecting
- specular highlights</li>
-
- <li><code>vec3 emissiveMaterial</code>, the light color emitted by the
- pixel</li>
-
- <li><code>float shininess</code>, a number representing how sharp specular
- reflections should be, from 1 to infinity</li>
-
- <li><code>float metalness</code>, a number representing how mirrorlike the
- material should be, between 0 and 1
+ is mapped to, as a fraction of the texture size</li><li><code>vec3
+ ambientLight</code>, the ambient light color on the vertex</li><li><code>vec4
+ color</code>, the base material color of the pixel</li><li><code>vec3
+ ambientMaterial</code>, the color of the pixel when affected by ambient
+ light</li><li><code>vec3 specularMaterial</code>, the color of the pixel when
+ reflecting specular highlights</li><li><code>vec3 emissiveMaterial</code>, the
+ light color emitted by the pixel</li><li><code>float shininess</code>, a
+ number representing how sharp specular reflections should be, from 1 to
+ infinity</li><li><code>float metalness</code>, a number representing how
+ mirrorlike the material should be, between 0 and 1
The struct can be modified and returned.</li></ul></td></tr>
- <tr><td>
-
-
- <p><code>vec4 combineColors</code></p>
-
- </td><td>
+ <tr><td><p><code>vec4 combineColors</code></p>
-
- <p>Take in a <code>ColorComponents</code> struct containing all the different
- components of light, and combining them into
+ </td><td><p>Take in a <code>ColorComponents</code> struct containing all the
+ different components of light, and combining them into
a single final color. The struct contains:</p>
- <ul>
-
- <li><code>vec3 baseColor</code>, the base color of the pixel</li>
-
- <li><code>float opacity</code>, the opacity between 0 and 1 that it should be
- drawn at</li>
-
- <li><code>vec3 ambientColor</code>, the color of the pixel when affected by
- ambient light</li>
-
- <li><code>vec3 specularColor</code>, the color of the pixel when affected by
- specular reflections</li>
-
- <li><code>vec3 diffuse</code>, the amount of diffused light hitting the
- pixel</li>
-
- <li><code>vec3 ambient</code>, the amount of ambient light hitting the
- pixel</li>
-
- <li><code>vec3 specular</code>, the amount of specular reflection hitting the
- pixel</li>
-
- <li><code>vec3 emissive</code>, the amount of light emitted by the pixel</li>
-
- </ul>
-
- </td></tr>
-
- <tr><td>
+ <ul><li><code>vec3 baseColor</code>, the base color of the
+ pixel</li><li><code>float opacity</code>, the opacity between 0 and 1 that it
+ should be drawn at</li><li><code>vec3 ambientColor</code>, the color of the
+ pixel when affected by ambient light</li><li><code>vec3 specularColor</code>,
+ the color of the pixel when affected by specular
+ reflections</li><li><code>vec3 diffuse</code>, the amount of diffused light
+ hitting the pixel</li><li><code>vec3 ambient</code>, the amount of ambient
+ light hitting the pixel</li><li><code>vec3 specular</code>, the amount of
+ specular reflection hitting the pixel</li><li><code>vec3 emissive</code>, the
+ amount of light emitted by the pixel</li></ul></td></tr>
+ <tr><td><p><code>vec4 getFinalColor</code></p>
- <p><code>vec4 getFinalColor</code></p>
-
- </td><td>
-
-
- <p>Update the final color after mixing. It takes in a <code>vec4 color</code>
- and must return a modified version.</p>
+ </td><td><p>Update the final color after mixing. It takes in a <code>vec4
+ color</code> and must return a modified version.</p>
</td></tr>
- <tr><td>
-
-
- <p><code>void afterFragment</code></p>
-
- </td><td>
-
+ <tr><td><p><code>void afterFragment</code></p>
- <p>Called at the end of the fragment shader.</p>
+ </td><td><p>Called at the end of the fragment shader.</p>
</td></tr>
- </table>
-
-
- <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
- If you
+ </table><p>Most of the time, you will need to write your hooks in GLSL ES
+ version 300. If you
are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
@@ -249,26 +128,24 @@ description: >
possible hooks and
their default implementations.</p>
-line: 886
+line: 1506
isConstructor: false
itemtype: method
example:
- |-
-
<div modernizr='webgl'>
<code>
let myShader;
function setup() {
createCanvas(200, 200, WEBGL);
- myShader = baseMaterialShader().modify({
- uniforms: {
- 'float time': () => millis()
- },
- 'vec3 getWorldPosition': `(vec3 pos) {
- pos.y += 20.0 * sin(time * 0.001 + pos.x * 0.05);
- return pos;
- }`
+ myShader = baseMaterialShader().modify(() => {
+ let time = uniformFloat(() => millis());
+ getWorldInputs((inputs) => {
+ inputs.position.y +=
+ 20 * sin(time * 0.001 + inputs.position.x * 0.05);
+ return inputs;
+ });
});
}
@@ -283,7 +160,6 @@ example:
</code>
</div>
- |-
-
<div modernizr='webgl'>
<code>
let myShader;
@@ -318,29 +194,24 @@ example:
</code>
</div>
- |-
-
<div modernizr='webgl'>
<code>
let myShader;
let environment;
- function preload() {
- environment = loadImage('/assets/outdoor_spheremap.jpg');
- }
+ async function setup() {
+ environment = await loadImage('/assets/outdoor_spheremap.jpg');
- function setup() {
createCanvas(200, 200, WEBGL);
- myShader = baseMaterialShader().modify({
- 'Inputs getPixelInputs': `(Inputs inputs) {
- float factor =
- sin(
- inputs.texCoord.x * ${TWO_PI} +
- inputs.texCoord.y * ${TWO_PI}
- ) * 0.4 + 0.5;
- inputs.shininess = mix(1., 100., factor);
+ myShader = baseMaterialShader().modify(() => {
+ getPixelInputs((inputs) => {
+ let factor = sin(
+ TWO_PI * (inputs.texCoord.x + inputs.texCoord.y)
+ );
+ inputs.shininess = mix(1, 100, factor);
inputs.metalness = factor;
return inputs;
- }`
+ })
});
}
@@ -358,32 +229,23 @@ example:
</code>
</div>
- |-
-
<div modernizr='webgl'>
<code>
let myShader;
function setup() {
createCanvas(200, 200, WEBGL);
- myShader = baseMaterialShader().modify({
- 'Inputs getPixelInputs': `(Inputs inputs) {
- vec3 newNormal = inputs.normal;
- // Simple bump mapping: adjust the normal based on position
- newNormal.x += 0.2 * sin(
- sin(
- inputs.texCoord.y * ${TWO_PI} * 10.0 +
- inputs.texCoord.x * ${TWO_PI} * 25.0
- )
- );
- newNormal.y += 0.2 * sin(
- sin(
- inputs.texCoord.x * ${TWO_PI} * 10.0 +
- inputs.texCoord.y * ${TWO_PI} * 25.0
- )
+ myShader = baseMaterialShader().modify(() => {
+ getPixelInputs((inputs) => {
+ inputs.normal.x += 0.2 * sin(
+ sin(TWO_PI * dot(inputs.texCoord.yx, vec2(10, 25)))
+ );
+ inputs.normal.y += 0.2 * sin(
+ sin(TWO_PI * dot(inputs.texCoord, vec2(10, 25)))
);
- inputs.normal = normalize(newNormal);
+ inputs.normal = normalize(inputs.normal);
return inputs;
- }`
+ });
});
}
@@ -407,8 +269,12 @@ class: p5
return:
description: The material shader
type: p5.Shader
+overloads:
+ - params: []
+ return:
+ description: The material shader
+ type: p5.Shader
chainable: false
-beta: true
---
diff --git a/src/content/reference/en/p5/baseNormalShader.mdx b/src/content/reference/en/p5/baseNormalShader.mdx
index 9b70aafb2e..06a044a39e 100644
--- a/src/content/reference/en/p5/baseNormalShader.mdx
+++ b/src/content/reference/en/p5/baseNormalShader.mdx
@@ -14,117 +14,73 @@ description: >
<table>
- <thead>
+ <tr><th>Hook</th><th>Description</th></tr>
- <tr>
+ <tr><td><p><code>void beforeVertex</code></p>
- <th>Hook</th>
+ </td><td><p>Called at the start of the vertex shader.</p>
- <th>Description</th>
+ </td></tr>
- </tr>
+ <tr><td><p><code>Vertex getObjectInputs</code></p>
- </thead>
+ </td><td><p>Update the vertex data of the model being drawn before any
+ positioning has been applied. It takes in a <code>Vertex</code> struct, which
+ includes:</p>
- <tbody><tr>
+ <ul><li><code>vec3 position</code>, the position of the
+ vertex</li><li><code>vec3 normal</code>, the direction facing out of the
+ surface</li><li><code>vec2 texCoord</code>, the texture coordinates associeted
+ with the vertex</li><li><code>vec4 color</code>, the per-vertex color
- <td><code>void beforeVertex</code></td>
+ The struct can be modified and returned.</li></ul></td></tr>
- <td>Called at the start of the vertex shader.</td>
+ <tr><td><p><code>Vertex getWorldInputs</code></p>
- </tr>
+ </td><td><p>Update the vertex data of the model being drawn after
+ transformations such as <code>translate()</code> and <code>scale()</code> have
+ been applied, but before the camera has been applied. It takes in a
+ <code>Vertex</code> struct like, in the <code>getObjectInputs</code> hook
+ above, that can be modified and returned.</p>
- <tr>
+ </td></tr>
- <td><code>vec3 getLocalPosition</code></td>
+ <tr><td><p><code>Vertex getCameraInputs</code></p>
- <td>Update the position of vertices before transforms are applied. It takes in
- <code>vec3 position</code> and must return a modified version.</td>
+ </td><td><p>Update the vertex data of the model being drawn as they appear
+ relative to the camera. It takes in a <code>Vertex</code> struct like, in the
+ <code>getObjectInputs</code> hook above, that can be modified and
+ returned.</p>
- </tr>
+ </td></tr>
- <tr>
+ <tr><td><p><code>void afterVertex</code></p>
- <td><code>vec3 getWorldPosition</code></td>
+ </td><td><p>Called at the end of the vertex shader.</p>
- <td>Update the position of vertices after transforms are applied. It takes in
- <code>vec3 position</code> and pust return a modified version.</td>
+ </td></tr>
- </tr>
+ <tr><td><p><code>void beforeFragment</code></p>
- <tr>
+ </td><td><p>Called at the start of the fragment shader.</p>
- <td><code>vec3 getLocalNormal</code></td>
+ </td></tr>
- <td>Update the normal before transforms are applied. It takes in <code>vec3
- normal</code> and must return a modified version.</td>
+ <tr><td><p><code>vec4 getFinalColor</code></p>
- </tr>
+ </td><td><p>Update the final color after mixing. It takes in a <code>vec4
+ color</code> and must return a modified version.</p>
- <tr>
+ </td></tr>
- <td><code>vec3 getWorldNormal</code></td>
+ <tr><td><p><code>void afterFragment</code></p>
- <td>Update the normal after transforms are applied. It takes in <code>vec3
- normal</code> and must return a modified version.</td>
+ </td><td><p>Called at the end of the fragment shader.</p>
- </tr>
+ </td></tr>
- <tr>
-
- <td><code>vec2 getUV</code></td>
-
- <td>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
- return a modified version.</td>
-
- </tr>
-
- <tr>
-
- <td><code>vec4 getVertexColor</code></td>
-
- <td>Update the color of each vertex. It takes in a <code>vec4 color</code> and
- must return a modified version.</td>
-
- </tr>
-
- <tr>
-
- <td><code>void afterVertex</code></td>
-
- <td>Called at the end of the vertex shader.</td>
-
- </tr>
-
- <tr>
-
- <td><code>void beforeFragment</code></td>
-
- <td>Called at the start of the fragment shader.</td>
-
- </tr>
-
- <tr>
-
- <td><code>vec4 getFinalColor</code></td>
-
- <td>Update the final color after mixing. It takes in a <code>vec4 color</code>
- and must return a modified version.</td>
-
- </tr>
-
- <tr>
-
- <td><code>void afterFragment</code></td>
-
- <td>Called at the end of the fragment shader.</td>
-
- </tr>
-
- </tbody></table>
-
- <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
- If you
+ </table><p>Most of the time, you will need to write your hooks in GLSL ES
+ version 300. If you
are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
@@ -132,12 +88,11 @@ description: >
hooks and
their default implementations.</p>
-line: 1197
+line: 1743
isConstructor: false
itemtype: method
example:
- |-
-
<div modernizr='webgl'>
<code>
let myShader;
@@ -148,9 +103,10 @@ example:
uniforms: {
'float time': () => millis()
},
- 'vec3 getWorldPosition': `(vec3 pos) {
- pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
- return pos;
+ 'Vertex getWorldInputs': `(Vertex inputs) {
+ inputs.position.y +=
+ 20. * sin(time * 0.001 + inputs.position.x * 0.05);
+ return inputs;
}`
});
}
@@ -164,7 +120,6 @@ example:
</code>
</div>
- |-
-
<div modernizr='webgl'>
<code>
let myShader;
@@ -172,7 +127,10 @@ example:
function setup() {
createCanvas(200, 200, WEBGL);
myShader = baseNormalShader().modify({
- 'vec3 getWorldNormal': '(vec3 normal) { return abs(normal); }',
+ 'Vertex getCameraInputs': `(Vertex inputs) {
+ inputs.normal = abs(inputs.normal);
+ return inputs;
+ }`,
'vec4 getFinalColor': `(vec4 color) {
// Map the r, g, and b values of the old normal to new colors
// instead of just red, green, and blue:
@@ -198,10 +156,14 @@ example:
</div>
class: p5
return:
- description: The `normalMaterial` shader
+ description: The <code>normalMaterial</code> shader
type: p5.Shader
+overloads:
+ - params: []
+ return:
+ description: The <code>normalMaterial</code> shader
+ type: p5.Shader
chainable: false
-beta: true
---
diff --git a/src/content/reference/en/p5/baseStrokeShader.mdx b/src/content/reference/en/p5/baseStrokeShader.mdx
index e030467671..5cb0d87fea 100644
--- a/src/content/reference/en/p5/baseStrokeShader.mdx
+++ b/src/content/reference/en/p5/baseStrokeShader.mdx
@@ -15,195 +15,94 @@ description: >
<tr><th>Hook</th><th>Description</th></tr>
- <tr><td>
+ <tr><td><p><code>void beforeVertex</code></p>
-
- <p><code>void beforeVertex</code></p>
-
- </td><td>
-
-
- <p>Called at the start of the vertex shader.</p>
-
- </td></tr>
-
- <tr><td>
-
-
- <p><code>vec3 getLocalPosition</code></p>
-
- </td><td>
-
-
- <p>Update the position of vertices before transforms are applied. It takes in
- <code>vec3 position</code> and must return a modified version.</p>
-
- </td></tr>
-
- <tr><td>
-
-
- <p><code>vec3 getWorldPosition</code></p>
-
- </td><td>
-
-
- <p>Update the position of vertices after transforms are applied. It takes in
- <code>vec3 position</code> and pust return a modified version.</p>
+ </td><td><p>Called at the start of the vertex shader.</p>
</td></tr>
- <tr><td>
+ <tr><td><p><code>StrokeVertex getObjectInputs</code></p>
+ </td><td><p>Update the vertex data of the stroke being drawn before any
+ positioning has been applied. It takes in a <code>StrokeVertex</code> struct,
+ which includes:</p>
- <p><code>float getStrokeWeight</code></p>
+ <ul><li><code>vec3 position</code>, the position of the
+ vertex</li><li><code>vec3 tangentIn</code>, the tangent coming in to the
+ vertex</li><li><code>vec3 tangentOut</code>, the tangent coming out of the
+ vertex. In straight segments, this will be the same as <code>tangentIn</code>.
+ In joins, it will be different. In caps, one of the tangents will be
+ 0.</li><li><code>vec4 color</code>, the per-vertex color</li><li><code>float
+ weight</code>, the stroke weight
- </td><td>
+ The struct can be modified and returned.</li></ul></td></tr>
+ <tr><td><p><code>StrokeVertex getWorldInputs</code></p>
- <p>Update the stroke weight. It takes in <code>float weight</code> and pust
- return a modified version.</p>
+ </td><td><p>Update the vertex data of the model being drawn after
+ transformations such as <code>translate()</code> and <code>scale()</code> have
+ been applied, but before the camera has been applied. It takes in a
+ <code>StrokeVertex</code> struct like, in the <code>getObjectInputs</code>
+ hook above, that can be modified and returned.</p>
</td></tr>
- <tr><td>
+ <tr><td><p><code>StrokeVertex getCameraInputs</code></p>
-
- <p><code>vec2 getLineCenter</code></p>
-
- </td><td>
-
-
- <p>Update the center of the line. It takes in <code>vec2 center</code> and
- must return a modified version.</p>
-
- </td></tr>
-
- <tr><td>
-
-
- <p><code>vec2 getLinePosition</code></p>
-
- </td><td>
-
-
- <p>Update the position of each vertex on the edge of the line. It takes in
- <code>vec2 position</code> and must return a modified version.</p>
+ </td><td><p>Update the vertex data of the model being drawn as they appear
+ relative to the camera. It takes in a <code>StrokeVertex</code> struct like,
+ in the <code>getObjectInputs</code> hook above, that can be modified and
+ returned.</p>
</td></tr>
- <tr><td>
-
-
- <p><code>vec4 getVertexColor</code></p>
-
- </td><td>
+ <tr><td><p><code>void afterVertex</code></p>
-
- <p>Update the color of each vertex. It takes in a <code>vec4 color</code> and
- must return a modified version.</p>
+ </td><td><p>Called at the end of the vertex shader.</p>
</td></tr>
- <tr><td>
-
-
- <p><code>void afterVertex</code></p>
-
- </td><td>
-
+ <tr><td><p><code>void beforeFragment</code></p>
- <p>Called at the end of the vertex shader.</p>
+ </td><td><p>Called at the start of the fragment shader.</p>
</td></tr>
- <tr><td>
+ <tr><td><p><code>Inputs getPixelInputs</code></p>
-
- <p><code>void beforeFragment</code></p>
-
- </td><td>
-
-
- <p>Called at the start of the fragment shader.</p>
-
- </td></tr>
-
- <tr><td>
-
-
- <p><code>Inputs getPixelInputs</code></p>
-
- </td><td>
-
-
- <p>Update the inputs to the shader. It takes in a struct <code>Inputs
+ </td><td><p>Update the inputs to the shader. It takes in a struct <code>Inputs
inputs</code>, which includes:</p>
- <ul>
-
- <li><code>vec4 color</code>, the color of the stroke</li>
-
- <li><code>vec2 tangent</code>, the direction of the stroke in screen
- space</li>
-
- <li><code>vec2 center</code>, the coordinate of the center of the stroke in
- screen space p5.js pixels</li>
+ <ul><li><code>vec4 color</code>, the color of the stroke</li><li><code>vec2
+ tangent</code>, the direction of the stroke in screen space</li><li><code>vec2
+ center</code>, the coordinate of the center of the stroke in screen space
+ p5.js pixels</li><li><code>vec2 position</code>, the coordinate of the current
+ pixel in screen space p5.js pixels</li><li><code>float strokeWeight</code>,
+ the thickness of the stroke in p5.js pixels</li></ul></td></tr>
- <li><code>vec2 position</code>, the coordinate of the current pixel in screen
- space p5.js pixels</li>
+ <tr><td><p><code>bool shouldDiscard</code></p>
- <li><code>float strokeWeight</code>, the thickness of the stroke in p5.js
- pixels</li>
-
- </ul>
+ </td><td><p>Caps and joins are made by discarded pixels in the fragment shader
+ to carve away unwanted areas. Use this to change this logic. It takes in a
+ <code>bool willDiscard</code> and must return a modified version.</p>
</td></tr>
- <tr><td>
-
-
- <p><code>bool shouldDiscard</code></p>
-
- </td><td>
-
+ <tr><td><p><code>vec4 getFinalColor</code></p>
- <p>Caps and joins are made by discarded pixels in the fragment shader to carve
- away unwanted areas. Use this to change this logic. It takes in a <code>bool
- willDiscard</code> and must return a modified version.</p>
+ </td><td><p>Update the final color after mixing. It takes in a <code>vec4
+ color</code> and must return a modified version.</p>
</td></tr>
- <tr><td>
+ <tr><td><p><code>void afterFragment</code></p>
-
- <p><code>vec4 getFinalColor</code></p>
-
- </td><td>
-
-
- <p>Update the final color after mixing. It takes in a <code>vec4 color</code>
- and must return a modified version.</p>
+ </td><td><p>Called at the end of the fragment shader.</p>
</td></tr>
- <tr><td>
-
-
- <p><code>void afterFragment</code></p>
-
- </td><td>
-
-
- <p>Called at the end of the fragment shader.</p>
-
- </td></tr>
-
- </table>
-
-
- <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
- If you
+ </table><p>Most of the time, you will need to write your hooks in GLSL ES
+ version 300. If you
are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
@@ -211,12 +110,11 @@ description: >
hooks and
their default implementations.</p>
-line: 1355
+line: 2122
isConstructor: false
itemtype: method
example:
- |-
-
<div modernizr='webgl'>
<code>
let myShader;
@@ -238,7 +136,7 @@ example:
function draw() {
background(255);
- shader(myShader);
+ strokeShader(myShader);
strokeWeight(30);
line(
-width/3,
@@ -250,7 +148,6 @@ example:
</code>
</div>
- |-
-
<div modernizr='webgl'>
<code>
let myShader;
@@ -261,27 +158,23 @@ example:
uniforms: {
'float time': () => millis()
},
- declarations: 'vec3 myPosition;',
- 'vec3 getWorldPosition': `(vec3 pos) {
- myPosition = pos;
- return pos;
- }`,
- 'float getStrokeWeight': `(float w) {
+ 'StrokeVertex getWorldInputs': `(StrokeVertex inputs) {
// Add a somewhat random offset to the weight
// that varies based on position and time
float scale = 0.8 + 0.2*sin(10.0 * sin(
floor(time/250.) +
- myPosition.x*0.01 +
- myPosition.y*0.01
+ inputs.position.x*0.01 +
+ inputs.position.y*0.01
));
- return w * scale;
+ inputs.weight *= scale;
+ return inputs;
}`
});
}
function draw() {
background(255);
- shader(myShader);
+ strokeShader(myShader);
myShader.setUniform('time', millis());
strokeWeight(10);
beginShape();
@@ -296,7 +189,6 @@ example:
</code>
</div>
- |-
-
<div modernizr='webgl'>
<code>
let myShader;
@@ -322,7 +214,7 @@ example:
function draw() {
background(255);
- shader(myShader);
+ strokeShader(myShader);
strokeWeight(10);
beginShape();
for (let i = 0; i <= 50; i++) {
@@ -345,8 +237,12 @@ class: p5
return:
description: The stroke shader
type: p5.Shader
+overloads:
+ - params: []
+ return:
+ description: The stroke shader
+ type: p5.Shader
chainable: false
-beta: true
---
diff --git a/src/content/reference/en/p5/beginClip.mdx b/src/content/reference/en/p5/beginClip.mdx
index 101fa6f8f2..3365f7b10e 100644
--- a/src/content/reference/en/p5/beginClip.mdx
+++ b/src/content/reference/en/p5/beginClip.mdx
@@ -36,12 +36,11 @@ description: >
<p>Masks can also be defined in a callback function that's passed to
<a href="/reference/p5/clip/">clip()</a>.</p>
-line: 13
+line: 186
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -63,7 +62,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -126,7 +124,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -156,7 +153,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -192,12 +188,12 @@ example:
</code>
</div>
class: p5
-params:
- - name: options
- description: |
- <p>an object containing clip settings.</p>
- type: Object
- optional: true
+overloads:
+ - params:
+ - name: options
+ description: an object containing clip settings.
+ optional: 1
+ type: Object
chainable: false
---
diff --git a/src/content/reference/en/p5/beginContour.mdx b/src/content/reference/en/p5/beginContour.mdx
index 9803da0cd7..af2b6aad05 100644
--- a/src/content/reference/en/p5/beginContour.mdx
+++ b/src/content/reference/en/p5/beginContour.mdx
@@ -1,8 +1,8 @@
---
title: beginContour
module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
+submodule: Custom Shapes
+file: src/shape/custom_shapes.js
description: >
<p>Begins creating a hole within a flat shape.</p>
@@ -47,12 +47,11 @@ description: >
clockwise order. Then, draw vertices for the negative space in
counter-clockwise order.</p>
-line: 20
+line: 2487
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -75,7 +74,7 @@ example:
vertex(30, 70);
vertex(70, 70);
vertex(70, 30);
- endContour();
+ endContour(CLOSE);
// Stop drawing the shape.
endShape(CLOSE);
@@ -116,7 +115,7 @@ example:
vertex(-20, 20);
vertex(20, 20);
vertex(20, -20);
- endContour();
+ endContour(CLOSE);
// Stop drawing the shape.
endShape(CLOSE);
@@ -124,7 +123,9 @@ example:
</code>
</div>
class: p5
-chainable: true
+overloads:
+ - params: []
+chainable: false
---
diff --git a/src/content/reference/en/p5/beginGeometry.mdx b/src/content/reference/en/p5/beginGeometry.mdx
deleted file mode 100644
index 43d9036d5b..0000000000
--- a/src/content/reference/en/p5/beginGeometry.mdx
+++ /dev/null
@@ -1,278 +0,0 @@
----
-title: beginGeometry
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
- <p>Begins adding shapes to a new
-
- <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object.</p>
-
- <p>The <code>beginGeometry()</code> and <a
- href="/reference/p5/endGeometry/">endGeometry()</a>
-
- functions help with creating complex 3D shapes from simpler ones such as
-
- <a href="/reference/p5/sphere/">sphere()</a>. <code>beginGeometry()</code>
- begins adding shapes
-
- to a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and
-
- <a href="/reference/p5/endGeometry/">endGeometry()</a> stops adding them.</p>
-
- <p><code>beginGeometry()</code> and <a
- href="/reference/p5/endGeometry/">endGeometry()</a> can help
-
- to make sketches more performant. For example, if a complex 3D shape
-
- doesn’t change while a sketch runs, then it can be created with
-
- <code>beginGeometry()</code> and <a
- href="/reference/p5/endGeometry/">endGeometry()</a>.
-
- Creating a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and
- then
-
- drawing it will run faster than repeatedly drawing the individual pieces.</p>
-
- <p>See <a href="/reference/p5/buildGeometry/">buildGeometry()</a> for another
- way to
-
- build 3D shapes.</p>
-
- <p>Note: <code>beginGeometry()</code> can only be used in WebGL mode.</p>
-line: 13
-isConstructor: false
-itemtype: method
-example:
- - |-
-
- <div>
- <code>
- // Click and drag the mouse to view the scene from different angles.
-
- let shape;
-
- function setup() {
- createCanvas(100, 100, WEBGL);
-
- // Start building the p5.Geometry object.
- beginGeometry();
-
- // Add a cone.
- cone();
-
- // Stop building the p5.Geometry object.
- shape = endGeometry();
-
- describe('A white cone drawn on a gray background.');
- }
-
- function draw() {
- background(50);
-
- // Enable orbiting with the mouse.
- orbitControl();
-
- // Turn on the lights.
- lights();
-
- // Style the p5.Geometry object.
- noStroke();
-
- // Draw the p5.Geometry object.
- model(shape);
- }
- </code>
- </div>
-
- <div>
- <code>
- // Click and drag the mouse to view the scene from different angles.
-
- let shape;
-
- function setup() {
- createCanvas(100, 100, WEBGL);
-
- // Create the p5.Geometry object.
- createArrow();
-
- describe('A white arrow drawn on a gray background.');
- }
-
- function draw() {
- background(50);
-
- // Enable orbiting with the mouse.
- orbitControl();
-
- // Turn on the lights.
- lights();
-
- // Style the p5.Geometry object.
- noStroke();
-
- // Draw the p5.Geometry object.
- model(shape);
- }
-
- function createArrow() {
- // Start building the p5.Geometry object.
- beginGeometry();
-
- // Add shapes.
- push();
- rotateX(PI);
- cone(10);
- translate(0, -10, 0);
- cylinder(3, 20);
- pop();
-
- // Stop building the p5.Geometry object.
- shape = endGeometry();
- }
- </code>
- </div>
-
- <div>
- <code>
- // Click and drag the mouse to view the scene from different angles.
-
- let blueArrow;
- let redArrow;
-
- function setup() {
- createCanvas(100, 100, WEBGL);
-
- // Create the arrows.
- redArrow = createArrow('red');
- blueArrow = createArrow('blue');
-
- describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');
- }
-
- function draw() {
- background(200);
-
- // Enable orbiting with the mouse.
- orbitControl();
-
- // Turn on the lights.
- lights();
-
- // Style the arrows.
- noStroke();
-
- // Draw the red arrow.
- model(redArrow);
-
- // Translate and rotate the coordinate system.
- translate(30, 0, 0);
- rotateZ(frameCount * 0.01);
-
- // Draw the blue arrow.
- model(blueArrow);
- }
-
- function createArrow(fillColor) {
- // Start building the p5.Geometry object.
- beginGeometry();
-
- fill(fillColor);
-
- // Add shapes to the p5.Geometry object.
- push();
- rotateX(PI);
- cone(10);
- translate(0, -10, 0);
- cylinder(3, 20);
- pop();
-
- // Stop building the p5.Geometry object.
- let shape = endGeometry();
-
- return shape;
- }
- </code>
- </div>
-
- <div>
- <code>
- // Click and drag the mouse to view the scene from different angles.
-
- let button;
- let particles;
-
- function setup() {
- createCanvas(100, 100, WEBGL);
-
- // Create a button to reset the particle system.
- button = createButton('Reset');
-
- // Call resetModel() when the user presses the button.
- button.mousePressed(resetModel);
-
- // Add the original set of particles.
- resetModel();
- }
-
- function draw() {
- background(50);
-
- // Enable orbiting with the mouse.
- orbitControl();
-
- // Turn on the lights.
- lights();
-
- // Style the particles.
- noStroke();
-
- // Draw the particles.
- model(particles);
- }
-
- function resetModel() {
- // If the p5.Geometry object has already been created,
- // free those resources.
- if (particles) {
- freeGeometry(particles);
- }
-
- // Create a new p5.Geometry object with random spheres.
- particles = createParticles();
- }
-
- function createParticles() {
- // Start building the p5.Geometry object.
- beginGeometry();
-
- // Add shapes.
- for (let i = 0; i < 60; i += 1) {
- // Calculate random coordinates.
- let x = randomGaussian(0, 20);
- let y = randomGaussian(0, 20);
- let z = randomGaussian(0, 20);
-
- push();
- // Translate to the particle's coordinates.
- translate(x, y, z);
- // Draw the particle.
- sphere(5);
- pop();
- }
-
- // Stop building the p5.Geometry object.
- let shape = endGeometry();
-
- return shape;
- }
- </code>
- </div>
-class: p5
-chainable: false
----
-
-
-# beginGeometry
diff --git a/src/content/reference/en/p5/beginShape.mdx b/src/content/reference/en/p5/beginShape.mdx
index f8a3ac24a2..d8a630d50e 100644
--- a/src/content/reference/en/p5/beginShape.mdx
+++ b/src/content/reference/en/p5/beginShape.mdx
@@ -1,8 +1,8 @@
---
title: beginShape
module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
+submodule: Custom Shapes
+file: src/shape/vertex.js
description: >
<p>Begins adding vertices to a custom shape.</p>
@@ -17,45 +17,26 @@ description: >
adding them.</p>
- <p>The parameter, <code>kind</code>, sets the kind of shape to make. By
- default, any
-
- irregular polygon can be drawn. The available modes for kind are:</p>
-
- <ul>
-
- <li><code>POINTS</code> to draw a series of points.</li>
-
- <li><code>LINES</code> to draw a series of unconnected line segments.</li>
-
- <li><code>TRIANGLES</code> to draw a series of separate triangles.</li>
-
- <li><code>TRIANGLE_FAN</code> to draw a series of connected triangles sharing
- the first vertex in a fan-like fashion.</li>
-
- <li><code>TRIANGLE_STRIP</code> to draw a series of connected triangles in
- strip fashion.</li>
-
- <li><code>QUADS</code> to draw a series of separate quadrilaterals
- (quads).</li>
-
- <li><code>QUAD_STRIP</code> to draw quad strip using adjacent edges to form
- the next quad.</li>
-
- <li><code>TESS</code> to create a filling curve by explicit tessellation
- (WebGL only).</li>
-
- </ul>
-
- <p>After calling <code>beginShape()</code>, shapes can be built by calling
+ <p>The parameter, <code>kind</code>, sets the kind of shape to make. The
+ available kinds are:</p>
+
+ <ul><li><code>PATH</code> (the default) to draw shapes by tracing out the path
+ along their edges.</li><li><code>POINTS</code> to draw a series of
+ points.</li><li><code>LINES</code> to draw a series of unconnected line
+ segments.</li><li><code>TRIANGLES</code> to draw a series of separate
+ triangles.</li><li><code>TRIANGLE_FAN</code> to draw a series of connected
+ triangles sharing the first vertex in a fan-like
+ fashion.</li><li><code>TRIANGLE_STRIP</code> to draw a series of connected
+ triangles in strip fashion.</li><li><code>QUADS</code> to draw a series of
+ separate quadrilaterals (quads).</li><li><code>QUAD_STRIP</code> to draw quad
+ strip using adjacent edges to form the next quad.</li></ul><p>After calling
+ <code>beginShape()</code>, shapes can be built by calling
<a href="/reference/p5/vertex/">vertex()</a>,
- <a href="/reference/p5/bezierVertex/">bezierVertex()</a>,
-
- <a href="/reference/p5/quadraticVertex/">quadraticVertex()</a>, and/or
+ <a href="/reference/p5/bezierVertex/">bezierVertex()</a>, and/or
- <a href="/reference/p5/curveVertex/">curveVertex()</a>. Calling
+ <a href="/reference/p5/splineVertex/">splineVertex()</a>. Calling
<a href="/reference/p5/endShape/">endShape()</a> will stop adding vertices to
the
@@ -80,12 +61,11 @@ description: >
and
<a href="/reference/p5/endShape/">endShape()</a>.</p>
-line: 129
+line: 399
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -368,7 +348,7 @@ example:
// Start drawing the shape.
// Draw a series of quadrilaterals.
- beginShape(TESS);
+ beginShape(PATH);
// Add the vertices.
vertex(-30, -30, 0);
@@ -407,7 +387,7 @@ example:
// Start drawing the shape.
// Draw a series of quadrilaterals.
- beginShape(TESS);
+ beginShape(PATH);
// Add the vertices.
fill('red');
@@ -432,13 +412,15 @@ example:
</code>
</div>
class: p5
-params:
- - name: kind
- description: |
- <p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
- TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS.</p>
- type: Constant
- optional: true
+overloads:
+ - params:
+ - name: kind
+ description: |-
+ either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
+ TRIANGLE_STRIP, QUADS, QUAD_STRIP or PATH. Defaults to PATH.
+ optional: 1
+ type: >-
+ POINTS|LINES|TRIANGLES|TRIANGLE_FAN|TRIANGLE_STRIP|QUADS|QUAD_STRIP|PATH
chainable: true
---
diff --git a/src/content/reference/en/p5/bezier.mdx b/src/content/reference/en/p5/bezier.mdx
index 8b2db69e7a..fb7998bc3a 100644
--- a/src/content/reference/en/p5/bezier.mdx
+++ b/src/content/reference/en/p5/bezier.mdx
@@ -2,7 +2,7 @@
title: bezier
module: Shape
submodule: Curves
-file: src/core/shape/curves.js
+file: src/shape/curves.js
description: >
<p>Draws a Bézier curve.</p>
@@ -34,12 +34,11 @@ description: >
<code>bezier()</code> has twelve arguments because each point has x-, y-,
and z-coordinates.</p>
-line: 13
+line: 203
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -185,84 +184,60 @@ example:
</div>
class: p5
overloads:
- - line: 13
- params:
+ - params:
- name: x1
- description: |
- <p>x-coordinate of the first anchor point.</p>
+ description: x-coordinate of the first anchor point.
type: Number
- name: y1
- description: |
- <p>y-coordinate of the first anchor point.</p>
+ description: y-coordinate of the first anchor point.
type: Number
- name: x2
- description: |
- <p>x-coordinate of the first control point.</p>
+ description: x-coordinate of the first control point.
type: Number
- name: y2
- description: |
- <p>y-coordinate of the first control point.</p>
+ description: y-coordinate of the first control point.
type: Number
- name: x3
- description: |
- <p>x-coordinate of the second control point.</p>
+ description: x-coordinate of the second control point.
type: Number
- name: y3
- description: |
- <p>y-coordinate of the second control point.</p>
+ description: y-coordinate of the second control point.
type: Number
- name: x4
- description: |
- <p>x-coordinate of the second anchor point.</p>
+ description: x-coordinate of the second anchor point.
type: Number
- name: y4
- description: |
- <p>y-coordinate of the second anchor point.</p>
+ description: y-coordinate of the second anchor point.
type: Number
- chainable: 1
- - line: 191
- params:
+ - params:
- name: x1
- description: ''
type: Number
- name: y1
- description: ''
type: Number
- name: z1
- description: |
- <p>z-coordinate of the first anchor point.</p>
+ description: z-coordinate of the first anchor point.
type: Number
- name: x2
- description: ''
type: Number
- name: y2
- description: ''
type: Number
- name: z2
- description: |
- <p>z-coordinate of the first control point.</p>
+ description: z-coordinate of the first control point.
type: Number
- name: x3
- description: ''
type: Number
- name: y3
- description: ''
type: Number
- name: z3
- description: |
- <p>z-coordinate of the second control point.</p>
+ description: z-coordinate of the second control point.
type: Number
- name: x4
- description: ''
type: Number
- name: y4
- description: ''
type: Number
- name: z4
- description: |
- <p>z-coordinate of the second anchor point.</p>
+ description: z-coordinate of the second anchor point.
type: Number
- chainable: 1
chainable: true
---
diff --git a/src/content/reference/en/p5/bezierDetail.mdx b/src/content/reference/en/p5/bezierDetail.mdx
deleted file mode 100644
index 285674a1c9..0000000000
--- a/src/content/reference/en/p5/bezierDetail.mdx
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: bezierDetail
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
- <p>Sets the number of segments used to draw Bézier curves in WebGL mode.</p>
-
- <p>In WebGL mode, smooth shapes are drawn using many flat segments. Adding
-
- more flat segments makes shapes appear smoother.</p>
-
- <p>The parameter, <code>detail</code>, is the number of segments to use while
- drawing a
-
- Bézier curve. For example, calling <code>bezierDetail(5)</code> will use 5
- segments to
-
- draw curves with the <a href="/reference/p5/bezier/">bezier()</a> function. By
-
- default,<code>detail</code> is 20.</p>
-
- <p>Note: <code>bezierDetail()</code> has no effect in 2D mode.</p>
-line: 221
-isConstructor: false
-itemtype: method
-example:
- - |-
-
- <div>
- <code>
- // Draw the original curve.
-
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Draw the anchor points in black.
- stroke(0);
- strokeWeight(5);
- point(85, 20);
- point(15, 80);
-
- // Draw the control points in red.
- stroke(255, 0, 0);
- point(10, 10);
- point(90, 90);
-
- // Draw a black bezier curve.
- noFill();
- stroke(0);
- strokeWeight(1);
- bezier(85, 20, 10, 10, 90, 90, 15, 80);
-
- // Draw red lines from the anchor points to the control points.
- stroke(255, 0, 0);
- line(85, 20, 10, 10);
- line(15, 80, 90, 90);
-
- describe(
- 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
- );
- }
- </code>
- </div>
-
- <div>
- <code>
- // Draw the curve with less detail.
-
- function setup() {
- createCanvas(100, 100, WEBGL);
-
- background(200);
-
- // Set the curveDetail() to 5.
- bezierDetail(5);
-
- // Draw the anchor points in black.
- stroke(0);
- strokeWeight(5);
- point(35, -30, 0);
- point(-35, 30, 0);
-
- // Draw the control points in red.
- stroke(255, 0, 0);
- point(-40, -40, 0);
- point(40, 40, 0);
-
- // Draw a black bezier curve.
- noFill();
- stroke(0);
- strokeWeight(1);
- bezier(35, -30, 0, -40, -40, 0, 40, 40, 0, -35, 30, 0);
-
- // Draw red lines from the anchor points to the control points.
- stroke(255, 0, 0);
- line(35, -30, -40, -40);
- line(-35, 30, 40, 40);
-
- describe(
- 'A gray square with three curves. A black s-curve is drawn with jagged segments. Two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
- );
- }
- </code>
- </div>
-class: p5
-params:
- - name: detail
- description: |
- <p>number of segments to use. Defaults to 20.</p>
- type: Number
-chainable: true
----
-
-
-# bezierDetail
diff --git a/src/content/reference/en/p5/bezierOrder.mdx b/src/content/reference/en/p5/bezierOrder.mdx
new file mode 100644
index 0000000000..f3bb751a6b
--- /dev/null
+++ b/src/content/reference/en/p5/bezierOrder.mdx
@@ -0,0 +1,102 @@
+---
+title: bezierOrder
+module: Shape
+submodule: Custom Shapes
+file: src/shape/custom_shapes.js
+description: >
+ <p>Influences the shape of the Bézier curve segment in a custom shape.
+
+ By default, this is 3; the other possible parameter is 2. This
+
+ results in quadratic Bézier curves.</p>
+
+ <p><code>bezierVertex()</code> adds a curved segment to custom shapes. The
+ Bézier curves
+
+ it creates are defined like those made by the
+
+ <a href="/reference/p5/bezier/">bezier()</a> function.
+ <code>bezierVertex()</code> must be
+
+ called between the
+
+ <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+ <a href="/reference/p5/endShape/">endShape()</a> functions. There must be at
+ least
+
+ one call to <a href="/reference/p5/vertex/">bezierVertex()</a>, before
+
+ a number of <code>bezierVertex()</code> calls that is a multiple of the
+ parameter
+
+ set by <a href="/reference/p5/bezierOrder/">bezierOrder(...)</a> (default
+ 3).</p>
+
+ <p>Each curve of order 3 requires three calls to <code>bezierVertex</code>, so
+
+ 2 curves would need 7 calls to <code>bezierVertex()</code>:
+
+ (1 one initial anchor point, two sets of 3 curves describing the curves)
+
+ With <code>bezierOrder(2)</code>, two curves would need 5 calls: 1 + 2 +
+ 2.</p>
+
+ <p>Bézier curves can also be drawn in 3D using WebGL mode.</p>
+
+ <p>Note: <code>bezierVertex()</code> won’t work when an argument is passed to
+
+ <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
+line: 1645
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Style the shape.
+ noFill();
+
+ // Start drawing the shape.
+ beginShape();
+
+ // set the order to 2 for a quadratic Bézier curve
+ bezierOrder(2);
+
+ // Add the first anchor point.
+ bezierVertex(30, 20);
+
+ // Add the Bézier vertex.
+ bezierVertex(80, 20);
+ bezierVertex(50, 50);
+
+ // Stop drawing the shape.
+ endShape();
+
+ describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.');
+ }
+ </code>
+ </div>
+class: p5
+return:
+ description: The current Bézier order.
+ type: Number
+overloads:
+ - params:
+ - name: order
+ description: 'The new order to set. Can be either 2 or 3, by default 3'
+ type: Number
+ - params: []
+ return:
+ description: The current Bézier order.
+ type: Number
+chainable: false
+---
+
+
+# bezierOrder
diff --git a/src/content/reference/en/p5/bezierPoint.mdx b/src/content/reference/en/p5/bezierPoint.mdx
index 32090ef835..edfabef10f 100644
--- a/src/content/reference/en/p5/bezierPoint.mdx
+++ b/src/content/reference/en/p5/bezierPoint.mdx
@@ -2,7 +2,7 @@
title: bezierPoint
module: Shape
submodule: Curves
-file: src/core/shape/curves.js
+file: src/shape/curves.js
description: >
<p>Calculates coordinates along a Bézier curve using interpolation.</p>
@@ -39,12 +39,11 @@ description: >
is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
between them.</p>
-line: 324
+line: 331
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -128,30 +127,29 @@ example:
</code>
</div>
class: p5
-params:
- - name: a
- description: |
- <p>coordinate of first control point.</p>
- type: Number
- - name: b
- description: |
- <p>coordinate of first anchor point.</p>
- type: Number
- - name: c
- description: |
- <p>coordinate of second anchor point.</p>
- type: Number
- - name: d
- description: |
- <p>coordinate of second control point.</p>
- type: Number
- - name: t
- description: |
- <p>amount to interpolate between 0 and 1.</p>
- type: Number
return:
description: coordinate of the point on the curve.
type: Number
+overloads:
+ - params:
+ - name: a
+ description: coordinate of first control point.
+ type: Number
+ - name: b
+ description: coordinate of first anchor point.
+ type: Number
+ - name: c
+ description: coordinate of second anchor point.
+ type: Number
+ - name: d
+ description: coordinate of second control point.
+ type: Number
+ - name: t
+ description: amount to interpolate between 0 and 1.
+ type: Number
+ return:
+ description: coordinate of the point on the curve.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/bezierTangent.mdx b/src/content/reference/en/p5/bezierTangent.mdx
index d9c761e443..53afddea9c 100644
--- a/src/content/reference/en/p5/bezierTangent.mdx
+++ b/src/content/reference/en/p5/bezierTangent.mdx
@@ -2,7 +2,7 @@
title: bezierTangent
module: Shape
submodule: Curves
-file: src/core/shape/curves.js
+file: src/shape/curves.js
description: >
<p>Calculates coordinates along a line that's tangent to a Bézier curve.</p>
@@ -43,12 +43,11 @@ description: >
is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
between them.</p>
-line: 450
+line: 449
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -121,30 +120,29 @@ example:
</code>
</div>
class: p5
-params:
- - name: a
- description: |
- <p>coordinate of first anchor point.</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 anchor point.</p>
- type: Number
- - name: t
- description: |
- <p>amount to interpolate between 0 and 1.</p>
- type: Number
return:
description: coordinate of a point on the tangent line.
type: Number
+overloads:
+ - params:
+ - name: a
+ description: coordinate of first anchor point.
+ type: Number
+ - name: b
+ description: coordinate of first control point.
+ type: Number
+ - name: c
+ description: coordinate of second control point.
+ type: Number
+ - name: d
+ description: coordinate of second anchor point.
+ type: Number
+ - name: t
+ description: amount to interpolate between 0 and 1.
+ type: Number
+ return:
+ description: coordinate of a point on the tangent line.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/bezierVertex.mdx b/src/content/reference/en/p5/bezierVertex.mdx
index bcdfde55c9..2353b0d677 100644
--- a/src/content/reference/en/p5/bezierVertex.mdx
+++ b/src/content/reference/en/p5/bezierVertex.mdx
@@ -1,8 +1,8 @@
---
title: bezierVertex
module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
+submodule: Custom Shapes
+file: src/shape/vertex.js
description: >
<p>Adds a Bézier curve segment to a custom shape.</p>
@@ -18,42 +18,46 @@ description: >
<a href="/reference/p5/beginShape/">beginShape()</a> and
- <a href="/reference/p5/endShape/">endShape()</a> functions. The curved segment
- uses
+ <a href="/reference/p5/endShape/">endShape()</a> functions.
- the previous vertex as the first anchor point, so there must be at least
+ Bézier need a starting point. Building a shape
- one call to <a href="/reference/p5/vertex/">vertex()</a> before
- <code>bezierVertex()</code> can
+ only with Bézier curves needs one initial
- be used.</p>
+ call to <a href="/reference/p5/vertex/">bezierVertex()</a>, before
- <p>The first four parameters, <code>x2</code>, <code>y2</code>,
- <code>x3</code>, and <code>y3</code>, set the curve’s two
+ a number of <code>bezierVertex()</code> calls that is a multiple of the
+ parameter
- control points. The control points "pull" the curve towards them.</p>
+ set by <a href="/reference/p5/bezierOrder/">bezierOrder(...)</a> (default 3).
- <p>The fifth and sixth parameters, <code>x4</code>, and <code>y4</code>, set
- the last anchor point.
+ But shapes can mix different types of vertices, so if there
- The last anchor point is where the curve ends.</p>
+ are some previous vertices, then the initial anchor is not needed,
- <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
+ only the multiples of 3 (or the Bézier order) calls to
- <code>bezierVertex()</code> has eight arguments because each point has x-, y-,
- and
+ <code>bezierVertex</code> for each curve.</p>
- z-coordinates.</p>
+ <p>Each curve of order 3 requires three calls to <code>bezierVertex</code>, so
+
+ 2 curves would need 7 calls to <code>bezierVertex()</code>:
+
+ (1 one initial anchor point, two sets of 3 curves describing the curves)
+
+ With <code>bezierOrder(2)</code>, two curves would need 5 calls: 1 + 2 +
+ 2.</p>
+
+ <p>Bézier curves can also be drawn in 3D using WebGL mode.</p>
<p>Note: <code>bezierVertex()</code> won’t work when an argument is passed to
<a href="/reference/p5/beginShape/">beginShape()</a>.</p>
-line: 543
+line: 686
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -68,10 +72,12 @@ example:
beginShape();
// Add the first anchor point.
- vertex(30, 20);
+ bezierVertex(30, 20);
// Add the Bézier vertex.
- bezierVertex(80, 0, 80, 75, 30, 75);
+ bezierVertex(80, 0);
+ bezierVertex(80, 75);
+ bezierVertex(30, 75);
// Stop drawing the shape.
endShape();
@@ -108,10 +114,12 @@ example:
beginShape();
// Add the first anchor point.
- vertex(30, 20);
+ bezierVertex(30, 20);
// Add the Bézier vertex.
- bezierVertex(80, 0, 80, 75, 30, 75);
+ bezierVertex(80, 0);
+ bezierVertex(80, 75);
+ bezierVertex(30, 75);
// Stop drawing the shape.
endShape();
@@ -168,10 +176,12 @@ example:
beginShape();
// Add the first anchor point.
- vertex(30, 20);
+ bezierVertex(30, 20);
// Add the Bézier vertex.
- bezierVertex(x2, y2, 80, 75, 30, 75);
+ bezierVertex(x2, y2);
+ bezierVertex(80, 75);
+ bezierVertex(30, 75);
// Stop drawing the shape.
endShape();
@@ -215,11 +225,16 @@ example:
beginShape();
// Add the first anchor point.
- vertex(30, 20);
+ bezierVertex(30, 20);
// Add the Bézier vertices.
- bezierVertex(80, 0, 80, 75, 30, 75);
- bezierVertex(50, 80, 60, 25, 30, 20);
+ bezierVertex(80, 0);
+ bezierVertex(80, 75);
+ bezierVertex(30, 75);
+
+ bezierVertex(50, 80);
+ bezierVertex(60, 25);
+ bezierVertex(30, 20);
// Stop drawing the shape.
endShape();
@@ -251,83 +266,63 @@ example:
// Draw the first moon.
beginShape();
- vertex(-20, -30, 0);
- bezierVertex(30, -50, 0, 30, 25, 0, -20, 25, 0);
- bezierVertex(0, 30, 0, 10, -25, 0, -20, -30, 0);
+ bezierVertex(-20, -30, 0);
+
+ bezierVertex(30, -50, 0);
+ bezierVertex(30, 25, 0);
+ bezierVertex(-20, 25, 0);
+
+ bezierVertex(0, 30, 0);
+ bezierVertex(10, -25, 0);
+ bezierVertex(-20, -30, 0);
endShape();
// Draw the second moon.
beginShape();
- vertex(-20, -30, -20);
- bezierVertex(30, -50, -20, 30, 25, -20, -20, 25, -20);
- bezierVertex(0, 30, -20, 10, -25, -20, -20, -30, -20);
+
+ bezierVertex(-20, -30, -20);
+
+ bezierVertex(30, -50, -20);
+ bezierVertex(30, 25, -20);
+ bezierVertex(-20, 25, -20);
+
+ bezierVertex(0, 30, -20);
+ bezierVertex(10, -25, -20);
+ bezierVertex(-20, -30, -20);
+
endShape();
}
</code>
</div>
class: p5
overloads:
- - line: 543
- params:
- - name: x2
- description: |
- <p>x-coordinate of the first control point.</p>
- type: Number
- - name: y2
- description: |
- <p>y-coordinate of the first control point.</p>
- type: Number
- - name: x3
- description: |
- <p>x-coordinate of the second control point.</p>
- type: Number
- - name: y3
- description: |
- <p>y-coordinate of the second control point.</p>
- type: Number
- - name: x4
- description: |
- <p>x-coordinate of the anchor point.</p>
- type: Number
- - name: y4
- description: |
- <p>y-coordinate of the anchor point.</p>
- type: Number
- chainable: 1
- - line: 792
- params:
- - name: x2
- description: ''
+ - params:
+ - name: x
+ description: x-coordinate of the first control point.
type: Number
- - name: y2
- description: ''
+ - name: 'y'
+ description: y-coordinate of the first control point.
type: Number
- - name: z2
- description: |
- <p>z-coordinate of the first control point.</p>
+ - name: u
+ optional: 1
type: Number
- - name: x3
- description: ''
+ - name: v
+ optional: 1
type: Number
- - name: y3
- description: ''
+ - params:
+ - name: x
type: Number
- - name: z3
- description: |
- <p>z-coordinate of the second control point.</p>
+ - name: 'y'
type: Number
- - name: x4
- description: ''
+ - name: z
type: Number
- - name: y4
- description: ''
+ - name: u
+ optional: 1
type: Number
- - name: z4
- description: |
- <p>z-coordinate of the anchor point.</p>
+ - name: v
+ optional: 1
type: Number
- chainable: 1
-chainable: true
+chainable: false
---
diff --git a/src/content/reference/en/p5/blend.mdx b/src/content/reference/en/p5/blend.mdx
index 27d397991c..a5ed06660f 100644
--- a/src/content/reference/en/p5/blend.mdx
+++ b/src/content/reference/en/p5/blend.mdx
@@ -39,24 +39,21 @@ description: >
<code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>,
<code>ADD</code>, or <code>NORMAL</code></p>
-line: 148
+line: 271
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let img0;
let img1;
- // Load the images.
- function preload() {
- img0 = loadImage('/assets/rockies.jpg');
- img1 = loadImage('/assets/bricks_third.jpg');
- }
+ async function setup() {
+ // Load the images.
+ img0 = await loadImage('/assets/rockies.jpg');
+ img1 = await loadImage('/assets/bricks_third.jpg');
- function setup() {
createCanvas(100, 100);
// Use the mountains as the background.
@@ -78,13 +75,11 @@ example:
let img0;
let img1;
- // Load the images.
- function preload() {
- img0 = loadImage('/assets/rockies.jpg');
- img1 = loadImage('/assets/bricks_third.jpg');
- }
+ async function setup() {
+ // Load the images.
+ img0 = await loadImage('/assets/rockies.jpg');
+ img1 = await loadImage('/assets/bricks_third.jpg');
- function setup() {
createCanvas(100, 100);
// Use the mountains as the background.
@@ -106,13 +101,11 @@ example:
let img0;
let img1;
- // Load the images.
- function preload() {
- img0 = loadImage('/assets/rockies.jpg');
- img1 = loadImage('/assets/bricks_third.jpg');
- }
+ async function setup() {
+ // Load the images.
+ img0 = await loadImage('/assets/rockies.jpg');
+ img1 = await loadImage('/assets/bricks_third.jpg');
- function setup() {
createCanvas(100, 100);
// Use the mountains as the background.
@@ -130,80 +123,62 @@ example:
</div>
class: p5
overloads:
- - line: 148
- params:
+ - params:
- name: srcImage
- description: |
- <p>source image.</p>
+ description: source image.
type: p5.Image
- name: sx
- description: |
- <p>x-coordinate of the source's upper-left corner.</p>
+ description: x-coordinate of the source's upper-left corner.
type: Integer
- name: sy
- description: |
- <p>y-coordinate of the source's upper-left corner.</p>
+ description: y-coordinate of the source's upper-left corner.
type: Integer
- name: sw
- description: |
- <p>source image width.</p>
+ description: source image width.
type: Integer
- name: sh
- description: |
- <p>source image height.</p>
+ description: source image height.
type: Integer
- name: dx
- description: |
- <p>x-coordinate of the destination's upper-left corner.</p>
+ description: x-coordinate of the destination's upper-left corner.
type: Integer
- name: dy
- description: |
- <p>y-coordinate of the destination's upper-left corner.</p>
+ description: y-coordinate of the destination's upper-left corner.
type: Integer
- name: dw
- description: |
- <p>destination image width.</p>
+ description: destination image width.
type: Integer
- name: dh
- description: |
- <p>destination image height.</p>
+ description: destination image height.
type: Integer
- name: blendMode
- description: |
- <p>the blend mode. either
- BLEND, DARKEST, LIGHTEST, DIFFERENCE,
- MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
- SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>
- type: Constant
- - line: 267
- params:
+ description: |-
+ the blend mode. either
+ BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+ MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+ SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
+ type: >-
+ BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL
+ - params:
- name: sx
- description: ''
type: Integer
- name: sy
- description: ''
type: Integer
- name: sw
- description: ''
type: Integer
- name: sh
- description: ''
type: Integer
- name: dx
- description: ''
type: Integer
- name: dy
- description: ''
type: Integer
- name: dw
- description: ''
type: Integer
- name: dh
- description: ''
type: Integer
- name: blendMode
- description: ''
- type: Constant
+ type: >-
+ BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|NORMAL
chainable: false
---
diff --git a/src/content/reference/en/p5/blendMode.mdx b/src/content/reference/en/p5/blendMode.mdx
index 8ffe625fbd..e48417d052 100644
--- a/src/content/reference/en/p5/blendMode.mdx
+++ b/src/content/reference/en/p5/blendMode.mdx
@@ -1,9 +1,9 @@
---
title: blendMode
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >-
<p>Sets the way colors blend when added to the canvas.</p>
<p>By default, drawing with a solid color paints over the current pixel values
@@ -32,85 +32,50 @@ description: >
are available in both 2D and WebGL mode:</p>
- <ul>
-
- <li><code>BLEND</code>: color values from the source overwrite the canvas.
- This is the default mode.</li>
-
- <li><code>ADD</code>: color values from the source are added to values from
- the canvas.</li>
-
- <li><code>DARKEST</code>: keeps the darkest color value.</li>
-
- <li><code>LIGHTEST</code>: keeps the lightest color value.</li>
-
- <li><code>EXCLUSION</code>: similar to <code>DIFFERENCE</code> but with less
- contrast.</li>
-
- <li><code>MULTIPLY</code>: color values from the source are multiplied with
- values from the canvas. The result is always darker.</li>
-
- <li><code>SCREEN</code>: all color values are inverted, then multiplied, then
- inverted again. The result is always lighter. (Opposite of
- <code>MULTIPLY</code>)</li>
-
- <li><code>REPLACE</code>: the last source drawn completely replaces the rest
- of the canvas.</li>
-
- <li><code>REMOVE</code>: overlapping pixels are removed by making them
- completely transparent.</li>
-
- </ul>
-
- <p>The following blend modes are only available in 2D mode:</p>
-
- <ul>
-
- <li><code>DIFFERENCE</code>: color values from the source are subtracted from
+ <ul><li><code>BLEND</code>: color values from the source overwrite the canvas.
+ This is the default mode.</li><li><code>ADD</code>: color values from the
+ source are added to values from the canvas.</li><li><code>DARKEST</code>:
+ keeps the darkest color value.</li><li><code>LIGHTEST</code>: keeps the
+ lightest color value.</li><li><code>EXCLUSION</code>: similar to
+ <code>DIFFERENCE</code> but with less contrast.</li><li><code>MULTIPLY</code>:
+ color values from the source are multiplied with values from the canvas. The
+ result is always darker.</li><li><code>SCREEN</code>: all color values are
+ inverted, then multiplied, then inverted again. The result is always lighter.
+ (Opposite of <code>MULTIPLY</code>)</li><li><code>REPLACE</code>: the last
+ source drawn completely replaces the rest of the
+ canvas.</li><li><code>REMOVE</code>: overlapping pixels are removed by making
+ them completely transparent.</li></ul><p>The following blend modes are only
+ available in 2D mode:</p>
+
+ <ul><li><code>DIFFERENCE</code>: color values from the source are subtracted
+ from the values from the canvas. If the difference is a negative number, it's
+ made positive.</li><li><code>OVERLAY</code>: combines <code>MULTIPLY</code>
+ and <code>SCREEN</code>. Dark values in the canvas get darker and light values
+ get lighter.</li><li><code>HARD_LIGHT</code>: combines <code>MULTIPLY</code>
+ and <code>SCREEN</code>. Dark values in the source get darker and light values
+ get lighter.</li><li><code>SOFT_LIGHT</code>: a softer version of
+ <code>HARD_LIGHT</code>.</li><li><code>DODGE</code>: lightens light tones and
+ increases contrast. Divides the canvas color values by the inverted color
+ values from the source.</li><li><code>BURN</code>: darkens dark tones and
+ increases contrast. Divides the source color values by the inverted color
+ values from the canvas, then inverts the result.</li></ul><p>The following
+ blend modes are only available in WebGL mode:</p>
+
+ <ul><li><code>SUBTRACT</code>: RGB values from the source are subtracted from
the values from the canvas. If the difference is a negative number, it's made
- positive.</li>
-
- <li><code>OVERLAY</code>: combines <code>MULTIPLY</code> and
- <code>SCREEN</code>. Dark values in the canvas get darker and light values get
- lighter.</li>
-
- <li><code>HARD_LIGHT</code>: combines <code>MULTIPLY</code> and
- <code>SCREEN</code>. Dark values in the source get darker and light values get
- lighter.</li>
-
- <li><code>SOFT_LIGHT</code>: a softer version of <code>HARD_LIGHT</code>.</li>
-
- <li><code>DODGE</code>: lightens light tones and increases contrast. Divides
- the canvas color values by the inverted color values from the source.</li>
-
- <li><code>BURN</code>: darkens dark tones and increases contrast. Divides the
- source color values by the inverted color values from the canvas, then inverts
- the result.</li>
-
- </ul>
-
- <p>The following blend modes are only available in WebGL mode:</p>
-
- <ul>
-
- <li><code>SUBTRACT</code>: RGB values from the source are subtracted from the
- values from the canvas. If the difference is a negative number, it's made
positive. Alpha (transparency) values from the source and canvas are
- added.</li>
-
- </ul>
-line: 720
+ added.</li></ul>
+line: 2394
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Use the default blend mode.
blendMode(BLEND);
@@ -118,15 +83,15 @@ example:
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('A Sky Blue line and a Deep Rose line form an X on a gray background.');
+ describe('A blue line and a red line form an X on a gray background.');
}
</code>
</div>
@@ -136,23 +101,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(HARD_LIGHT);
+ blendMode(ADD);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('An ocean blue line and a hot pink line form an X on a gray background. The area where they overlap is Magenta purple.');
+ describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint magenta.');
}
</code>
</div>
@@ -162,23 +127,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(ADD);
+ blendMode(DARKEST);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('An icy blue line and a light lavender line form an X on a gray background. The area where they overlap is white.');
+ describe('A blue line and a red line form an X on a gray background. The area where they overlap is black.');
}
</code>
</div>
@@ -188,23 +153,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(DARKEST);
+ blendMode(LIGHTEST);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('A steel blue line and a cranberry line form an X on a gray background. The area where they overlap is deep purple.');
+ describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint magenta.');
}
</code>
</div>
@@ -214,23 +179,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(BURN);
+ blendMode(EXCLUSION);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('A cobalt blue line and a burgundy line form an X on a gray background. The area where they overlap is black.');
+ describe('A yellow line and a cyan line form an X on a gray background. The area where they overlap is green.');
}
</code>
</div>
@@ -240,23 +205,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(LIGHTEST);
+ blendMode(MULTIPLY);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('A pale lavender line and a soft beige line form an X on a gray background. The area where they overlap is pale lilac.');
+ describe('A blue line and a red line form an X on a gray background. The area where they overlap is black.');
}
</code>
</div>
@@ -266,23 +231,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(EXCLUSION);
+ blendMode(SCREEN);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('An earthy brown line and a muted sage line form an X on a gray background. The area where they overlap is sage green.');
+ describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint magenta.');
}
</code>
</div>
@@ -292,23 +257,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(MULTIPLY);
+ blendMode(REPLACE);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('A slate blue line and a plum line form an X on a gray background. The area where they overlap is dark Indigo.');
+ describe('A diagonal red line.');
}
</code>
</div>
@@ -318,23 +283,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(SCREEN);
+ blendMode(REMOVE);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('A baby blue line and a peach pink line form an X on a gray background. The area where they overlap is misty lilac.');
+ describe('The silhouette of an X is missing from a gray background.');
}
</code>
</div>
@@ -344,23 +309,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(REPLACE);
+ blendMode(DIFFERENCE);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('A diagonal deep rose line.');
+ describe('A yellow line and a cyan line form an X on a gray background. The area where they overlap is green.');
}
</code>
</div>
@@ -370,23 +335,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(REMOVE);
+ blendMode(OVERLAY);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('The silhouette of an X is missing from a gray background.');
+ describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is bright magenta.');
}
</code>
</div>
@@ -396,23 +361,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(DIFFERENCE);
+ blendMode(HARD_LIGHT);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('A light burgundy line and a forest green line form an X on a gray background. The area where they overlap is dark cocoa.');
+ describe('A blue line and a red line form an X on a gray background.');
}
</code>
</div>
@@ -422,23 +387,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(OVERLAY);
+ blendMode(SOFT_LIGHT);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('A cornflower blue line and a light rose line form an X on a gray background. The area where they overlap is violet.');
+ describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is violet.');
}
</code>
</div>
@@ -448,23 +413,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(SOFT_LIGHT);
+ blendMode(DODGE);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('A pale sky line and a rose blush line form an X on a gray background. The area where they overlap is lavender.');
+ describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint violet.');
}
</code>
</div>
@@ -474,23 +439,23 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Set the blend mode.
- blendMode(DODGE);
+ blendMode(BURN);
// Style the lines.
strokeWeight(30);
- // Draw the first line.
- stroke('#1a85ff');
+ // Draw the blue line.
+ stroke('blue');
line(25, 25, 75, 75);
- // Draw the second line.
- stroke('#d41159');
+ // Draw the red line.
+ stroke('red');
line(75, 25, 25, 75);
- describe('An aqua blue line and a light pink line form an X on a gray background. The area where they overlap is white.');
+ describe('A blue line and a red line form an X on a gray background. The area where they overlap is black.');
}
</code>
</div>
@@ -498,39 +463,39 @@ example:
<div>
<code>
function setup() {
- // Create a canvas with WEBGL mode.
- createCanvas(100, 100, WEBGL);
+ createCanvas(100, 100);
- // Set the background color.
- background(180);
+ background(200);
- // Set the blend mode to SUBTRACT.
+ // Set the blend mode.
blendMode(SUBTRACT);
// Style the lines.
strokeWeight(30);
// Draw the blue line.
- stroke('#1a85ff');
- line(-25, -25, 25, 25);
+ stroke('blue');
+ line(25, 25, 75, 75);
// Draw the red line.
- stroke('#d41159');
- line(25, -25, -25, 25);
+ stroke('red');
+ line(75, 25, 25, 75);
- describe('A burnt orange and a sea green line form an X on a gray background. The area where they overlap is forest green.');
+ describe('A yellow line and a turquoise line form an X on a gray background. The area where they overlap is green.');
}
</code>
</div>
class: p5
-params:
- - name: mode
- description: |
- <p>blend mode to set.
- either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
- EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
- SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT</p>
- type: Constant
+overloads:
+ - params:
+ - name: mode
+ description: |-
+ blend mode to set.
+ either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
+ EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+ SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT
+ type: >-
+ BLEND|DARKEST|LIGHTEST|DIFFERENCE|MULTIPLY|EXCLUSION|SCREEN|REPLACE|OVERLAY|HARD_LIGHT|SOFT_LIGHT|DODGE|BURN|ADD|REMOVE|SUBTRACT
chainable: false
---
diff --git a/src/content/reference/en/p5/blue.mdx b/src/content/reference/en/p5/blue.mdx
index b6ba1b8848..36981983f3 100644
--- a/src/content/reference/en/p5/blue.mdx
+++ b/src/content/reference/en/p5/blue.mdx
@@ -8,23 +8,22 @@ description: >
<p><code>blue()</code> extracts the blue value from a
- <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+ <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color
components, or
a CSS color string.</p>
<p>By default, <code>blue()</code> returns a color's blue value in the range 0
- to 255. If the <a href="/reference/colorMode/">colorMode()</a> is set to RGB,
- it
+ to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+ RGB, it
returns the blue value in the given range.</p>
-line: 117
+line: 821
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -52,7 +51,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -80,7 +78,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -108,7 +105,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -139,15 +135,19 @@ example:
</code>
</div>
class: p5
-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'
return:
description: the blue value.
type: Number
+overloads:
+ - params:
+ - name: color
+ description: |-
+ <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
+ color components, or CSS color string.
+ type: 'p5.Color|Number[]|String'
+ return:
+ description: the blue value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/boolean.mdx b/src/content/reference/en/p5/boolean.mdx
index 1fbc9e9237..edd6bde00a 100644
--- a/src/content/reference/en/p5/boolean.mdx
+++ b/src/content/reference/en/p5/boolean.mdx
@@ -26,12 +26,11 @@ description: >
values will
be returned.</p>
-line: 341
+line: 455
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -129,20 +128,16 @@ return:
description: converted Boolean value.
type: Boolean
overloads:
- - line: 341
- params:
+ - params:
- name: 'n'
- description: |
- <p>value to convert.</p>
+ description: value to convert.
type: String|Boolean|Number
return:
description: converted Boolean value.
type: Boolean
- - line: 451
- params:
+ - params:
- name: ns
- description: |
- <p>values to convert.</p>
+ description: values to convert.
type: Array
return:
description: converted Boolean values.
diff --git a/src/content/reference/en/p5/box.mdx b/src/content/reference/en/p5/box.mdx
index 89b801c56e..80bf1a3637 100644
--- a/src/content/reference/en/p5/box.mdx
+++ b/src/content/reference/en/p5/box.mdx
@@ -53,12 +53,11 @@ description: >
form their surfaces. By default, <code>detailY</code> is 1.</p>
<p>Note: <code>box()</code> can only be used in WebGL mode.</p>
-line: 1009
+line: 699
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -150,32 +149,28 @@ example:
</code>
</div>
class: p5
-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>number of triangle subdivisions along the x-axis.</p>
- type: Integer
- optional: true
- - name: detailY
- description: |
- <p>number of triangle subdivisions along the y-axis.</p>
- type: Integer
- optional: true
+overloads:
+ - params:
+ - name: width
+ description: width of the box.
+ optional: 1
+ type: Number
+ - name: height
+ description: height of the box.
+ optional: 1
+ type: Number
+ - name: depth
+ description: depth of the box.
+ optional: 1
+ type: Number
+ - name: detailX
+ description: number of triangle subdivisions along the x-axis.
+ optional: 1
+ type: Integer
+ - name: detailY
+ description: number of triangle subdivisions along the y-axis.
+ optional: 1
+ type: Integer
chainable: true
---
diff --git a/src/content/reference/en/p5/brightness.mdx b/src/content/reference/en/p5/brightness.mdx
index 5631384233..933364c677 100644
--- a/src/content/reference/en/p5/brightness.mdx
+++ b/src/content/reference/en/p5/brightness.mdx
@@ -8,7 +8,7 @@ description: >
<p><code>brightness()</code> extracts the HSB brightness value from a
- <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+ <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color
components, or
a CSS color string.</p>
@@ -16,16 +16,15 @@ description: >
<p>By default, <code>brightness()</code> returns a color's HSB brightness in
the range 0
- to 100. If the <a href="/reference/colorMode/">colorMode()</a> is set to HSB,
- it
+ to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+ HSB, it
returns the brightness value in the given range.</p>
-line: 253
+line: 1367
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -56,7 +55,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -87,7 +85,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -118,7 +115,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -149,15 +145,19 @@ example:
</code>
</div>
class: p5
-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'
return:
description: the brightness value.
type: Number
+overloads:
+ - params:
+ - name: color
+ description: |-
+ <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
+ color components, or CSS color string.
+ type: 'p5.Color|Number[]|String'
+ return:
+ description: the brightness value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/buildGeometry.mdx b/src/content/reference/en/p5/buildGeometry.mdx
index 86a65983e3..050d08b184 100644
--- a/src/content/reference/en/p5/buildGeometry.mdx
+++ b/src/content/reference/en/p5/buildGeometry.mdx
@@ -41,12 +41,11 @@ description: >
shapes.</p>
<p>Note: <code>buildGeometry()</code> can only be used in WebGL mode.</p>
-line: 520
+line: 333
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -245,14 +244,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: callback
- description: |
- <p>function that draws the shape.</p>
- type: Function
return:
description: new 3D shape.
type: p5.Geometry
+overloads:
+ - params:
+ - name: callback
+ description: function that draws the shape.
+ type: Function
+ return:
+ description: new 3D shape.
+ type: p5.Geometry
chainable: false
---
diff --git a/src/content/reference/en/p5/byte.mdx b/src/content/reference/en/p5/byte.mdx
index db846c64c2..000e533f6a 100644
--- a/src/content/reference/en/p5/byte.mdx
+++ b/src/content/reference/en/p5/byte.mdx
@@ -34,12 +34,11 @@ description: >
<code>byte('giraffe')</code>,
then the value <code>NaN</code> (not a number) will be returned.</p>
-line: 468
+line: 602
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -152,20 +151,16 @@ return:
description: converted byte value.
type: Number
overloads:
- - line: 468
- params:
+ - params:
- name: 'n'
- description: |
- <p>value to convert.</p>
+ description: value to convert.
type: String|Boolean|Number
return:
description: converted byte value.
type: Number
- - line: 598
- params:
+ - params:
- name: ns
- description: |
- <p>values to convert.</p>
+ description: values to convert.
type: Array
return:
description: converted byte values.
diff --git a/src/content/reference/en/p5/camera.mdx b/src/content/reference/en/p5/camera.mdx
index d7eb07a490..2d140c1097 100644
--- a/src/content/reference/en/p5/camera.mdx
+++ b/src/content/reference/en/p5/camera.mdx
@@ -51,12 +51,11 @@ description: >
vector is <code>(0, 1, 0)</code>.</p>
<p>Note: <code>camera()</code> can only be used in WebGL mode.</p>
-line: 13
+line: 3208
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -144,52 +143,44 @@ example:
</code>
</div>
class: p5
-params:
- - name: x
- description: |
- <p>x-coordinate of the camera. Defaults to 0.</p>
- type: Number
- optional: true
- - name: 'y'
- description: |
- <p>y-coordinate of the camera. Defaults to 0.</p>
- type: Number
- optional: true
- - name: z
- description: |
- <p>z-coordinate of the camera. Defaults to 800.</p>
- type: Number
- optional: true
- - name: centerX
- description: |
- <p>x-coordinate of the point the camera faces. Defaults to 0.</p>
- type: Number
- optional: true
- - name: centerY
- description: |
- <p>y-coordinate of the point the camera faces. Defaults to 0.</p>
- type: Number
- optional: true
- - name: centerZ
- description: |
- <p>z-coordinate of the point the camera faces. Defaults to 0.</p>
- type: Number
- optional: true
- - name: upX
- description: |
- <p>x-component of the camera’s "up" vector. Defaults to 0.</p>
- type: Number
- optional: true
- - name: upY
- description: |
- <p>y-component of the camera’s "up" vector. Defaults to 1.</p>
- type: Number
- optional: true
- - name: upZ
- description: |
- <p>z-component of the camera’s "up" vector. Defaults to 0.</p>
- type: Number
- optional: true
+overloads:
+ - params:
+ - name: x
+ description: x-coordinate of the camera. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the camera. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: z
+ description: z-coordinate of the camera. Defaults to 800.
+ optional: 1
+ type: Number
+ - name: centerX
+ description: x-coordinate of the point the camera faces. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: centerY
+ description: y-coordinate of the point the camera faces. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: centerZ
+ description: z-coordinate of the point the camera faces. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: upX
+ description: x-component of the camera’s "up" vector. Defaults to 0.
+ optional: 1
+ type: Number
+ - name: upY
+ description: y-component of the camera’s "up" vector. Defaults to 1.
+ optional: 1
+ type: Number
+ - name: upZ
+ description: z-component of the camera’s "up" vector. Defaults to 0.
+ optional: 1
+ type: Number
chainable: true
---
diff --git a/src/content/reference/en/p5/ceil.mdx b/src/content/reference/en/p5/ceil.mdx
index 459b773fda..0c567f4425 100644
--- a/src/content/reference/en/p5/ceil.mdx
+++ b/src/content/reference/en/p5/ceil.mdx
@@ -12,12 +12,11 @@ description: >
both return the value
10.</p>
-line: 48
+line: 88
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -47,14 +46,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: 'n'
- description: |
- <p>number to round up.</p>
- type: Number
return:
description: rounded up number.
type: Integer
+overloads:
+ - params:
+ - name: 'n'
+ description: number to round up.
+ type: Number
+ return:
+ description: rounded up number.
+ type: Integer
chainable: false
---
diff --git a/src/content/reference/en/p5/char.mdx b/src/content/reference/en/p5/char.mdx
index df3990f230..0c222381ea 100644
--- a/src/content/reference/en/p5/char.mdx
+++ b/src/content/reference/en/p5/char.mdx
@@ -30,12 +30,11 @@ description: >
target="_blank">MDN</a>
for more information about conversions.</p>
-line: 612
+line: 720
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -124,20 +123,16 @@ return:
description: converted single-character string.
type: String
overloads:
- - line: 612
- params:
+ - params:
- name: 'n'
- description: |
- <p>value to convert.</p>
+ description: value to convert.
type: String|Number
return:
description: converted single-character string.
type: String
- - line: 716
- params:
+ - params:
- name: ns
- description: |
- <p>values to convert.</p>
+ description: values to convert.
type: Array
return:
description: converted single-character strings.
diff --git a/src/content/reference/en/p5/circle.mdx b/src/content/reference/en/p5/circle.mdx
index 5d60fbb3cc..161bb5a0bd 100644
--- a/src/content/reference/en/p5/circle.mdx
+++ b/src/content/reference/en/p5/circle.mdx
@@ -2,7 +2,7 @@
title: circle
module: Shape
submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
+file: src/shape/2d_primitives.js
description: >
<p>Draws a circle.</p>
@@ -19,12 +19,11 @@ description: >
See <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for other ways to
set its position.</p>
-line: 489
+line: 529
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -39,7 +38,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -54,19 +52,17 @@ example:
</code>
</div>
class: p5
-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
+overloads:
+ - params:
+ - name: x
+ description: x-coordinate of the center of the circle.
+ type: Number
+ - name: 'y'
+ description: y-coordinate of the center of the circle.
+ type: Number
+ - name: d
+ description: diameter of the circle.
+ type: Number
chainable: true
---
diff --git a/src/content/reference/en/p5/class.mdx b/src/content/reference/en/p5/class.mdx
index 400957b6cb..12f1268573 100644
--- a/src/content/reference/en/p5/class.mdx
+++ b/src/content/reference/en/p5/class.mdx
@@ -3,12 +3,12 @@ title: class
module: Foundation
submodule: Foundation
file: src/core/reference.js
-description: "<p>A template for creating objects of a particular type.</p>\n<p>Classes can make it easier to program with objects. For example, a <code>Frog</code>\nclass could create objects that behave like frogs. Each object created\nusing a class is called an instance of that class. All instances of a class\nare the same type. Here's an example of creating an instance of a <code>Frog</code>\nclass:</p>\n<pre><code class=\"language-js\">let fifi = new Frog(50, 50, 20);\n</code></pre>\n<p>The variable <code>fifi</code> refers to an instance of the <code>Frog</code> class. The keyword\n<code>new</code> is used to call the <code>Frog</code> class' constructor in the statement\n<code>new Frog()</code>. Altogether, a new <code>Frog</code> object was created and assigned to\nthe variable <code>fifi</code>. Classes are templates, so they can be used to create\nmore than one instance:</p>\n<pre><code class=\"language-js\">// First Frog instance.\nlet frog1 = new Frog(25, 50, 10);\n\n// Second Frog instance.\nlet frog2 = new Frog(75, 50, 10);\n</code></pre>\n<p>A simple <code>Frog</code> class could be declared as follows:</p>\n<pre><code class=\"language-js\">class Frog {\n constructor(x, y, size) {\n // This code runs once when an instance is created.\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n // This code runs once when myFrog.show() is called.\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('\U0001F438', this.x, this.y);\n }\n\n hop() {\n // This code runs once when myFrog.hop() is called.\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n}\n</code></pre>\n<p>Class declarations begin with the keyword <code>class</code> followed by the class\nname, such as <code>Frog</code>, and curly braces <code>{}</code>. Class names should use\n<code>PascalCase</code> and can't have spaces in their names. For example, naming a\nclass <code>Kermit The Frog</code> with spaces between each word would throw a\n<code>SyntaxError</code>. The code between the curly braces <code>{}</code> defines the class.</p>\n<p>Functions that belong to a class are called methods. <code>constructor()</code>,\n<code>show()</code>, and <code>hop()</code> are methods in the <code>Frog</code> class. Methods define an\nobject's behavior. Methods can accept parameters and return values, just\nlike functions. Note that methods don't use the <code>function</code> keyword.</p>\n<p><code>constructor()</code> is a special method that's called once when an instance of\nthe class is created. The statement <code>new Frog()</code> calls the <code>Frog</code> class'\n<code>constructor()</code> method.</p>\n<p>A class definition is a template for instances. The keyword <code>this</code> refers\nto an instance's data and methods. For example, each <code>Frog</code> instance has\nunique coordinates stored in <code>this.x</code> and <code>this.y</code>. The <code>show()</code> method\nuses those coordinates to draw the frog. The <code>hop()</code> method updates those\ncoordinates when called. Once a <code>Frog</code> instance is created, its data and\nmethods can be accessed using the dot operator <code>.</code> as follows:</p>\n<pre><code class=\"language-js\">// Draw a lily pad.\nfill('green');\nstroke('green');\ncircle(fifi.x, fifi.y, 2 * fifi.size);\n\n// Show the Frog.\nfifi.show();\n\n// Hop.\nfifi.hop();\n</code></pre>\n"
-line: 1329
+description: "<p>A template for creating objects of a particular type.</p>\n<p>Classes can make it easier to program with objects. For example, a <code>Frog</code>\nclass could create objects that behave like frogs. Each object created\nusing a class is called an instance of that class. All instances of a class\nare the same type. Here's an example of creating an instance of a <code>Frog</code>\nclass:</p>\n<pre><code class=\"language-js\">let fifi = new Frog(50, 50, 20);</code></pre><p>The variable <code>fifi</code> refers to an instance of the <code>Frog</code> class. The keyword\n<code>new</code> is used to call the <code>Frog</code> class' constructor in the statement\n<code>new Frog()</code>. Altogether, a new <code>Frog</code> object was created and assigned to\nthe variable <code>fifi</code>. Classes are templates, so they can be used to create\nmore than one instance:</p>\n<pre><code class=\"language-js\">// First Frog instance.\nlet frog1 = new Frog(25, 50, 10);\n\n// Second Frog instance.\nlet frog2 = new Frog(75, 50, 10);</code></pre><p>A simple <code>Frog</code> class could be declared as follows:</p>\n<pre><code class=\"language-js\">class Frog {\n constructor(x, y, size) {\n // This code runs once when an instance is created.\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n // This code runs once when myFrog.show() is called.\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('\U0001F438', this.x, this.y);\n }\n\n hop() {\n // This code runs once when myFrog.hop() is called.\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n}</code></pre><p>Class declarations begin with the keyword <code>class</code> followed by the class\nname, such as <code>Frog</code>, and curly braces <code>{}</code>. Class names should use\n<code>PascalCase</code> and can't have spaces in their names. For example, naming a\nclass <code>Kermit The Frog</code> with spaces between each word would throw a\n<code>SyntaxError</code>. The code between the curly braces <code>{}</code> defines the class.</p>\n<p>Functions that belong to a class are called methods. <code>constructor()</code>,\n<code>show()</code>, and <code>hop()</code> are methods in the <code>Frog</code> class. Methods define an\nobject's behavior. Methods can accept parameters and return values, just\nlike functions. Note that methods don't use the <code>function</code> keyword.</p>\n<p><code>constructor()</code> is a special method that's called once when an instance of\nthe class is created. The statement <code>new Frog()</code> calls the <code>Frog</code> class'\n<code>constructor()</code> method.</p>\n<p>A class definition is a template for instances. The keyword <code>this</code> refers\nto an instance's data and methods. For example, each <code>Frog</code> instance has\nunique coordinates stored in <code>this.x</code> and <code>this.y</code>. The <code>show()</code> method\nuses those coordinates to draw the frog. The <code>hop()</code> method updates those\ncoordinates when called. Once a <code>Frog</code> instance is created, its data and\nmethods can be accessed using the dot operator <code>.</code> as follows:</p>\n<pre><code class=\"language-js\">// Draw a lily pad.\nfill('green');\nstroke('green');\ncircle(fifi.x, fifi.y, 2 * fifi.size);\n\n// Show the Frog.\nfifi.show();\n\n// Hop.\nfifi.hop();</code></pre>"
+line: 1
isConstructor: false
itemtype: property
example:
- - "\n<div>\n<code>\n// Declare a frog variable.\nlet fifi;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variable a new Frog object.\n fifi = new Frog(50, 50, 20);\n\n describe('A frog face drawn on a blue background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frog.\n fifi.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('\U0001F438', this.x, this.y);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n describe('Two frog faces drawn next to each other on a blue background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('\U0001F438', this.x, this.y);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n // Slow the frame rate.\n frameRate(1);\n\n describe('Two frog faces on a blue background. The frogs hop around randomly.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n\n // Move the frogs.\n frog1.hop();\n frog2.hop();\n\n // Wrap around if they've hopped off the edge.\n frog1.checkEdges();\n frog2.checkEdges();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('\U0001F438', this.x, this.y);\n }\n\n hop() {\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n\n checkEdges() {\n if (this.x > width) {\n this.x = this.x - width;\n } else if (this.x < 0) {\n this.x = width - this.x;\n }\n\n if (this.y > height) {\n this.y = this.y - height;\n } else if (this.y < 0) {\n this.y = height - this.y;\n }\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Create an array that will hold frogs.\nlet frogs = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add Frog objects to the array.\n for (let i = 0; i < 5; i += 1) {\n // Calculate random coordinates and size.\n let x = random(0, 100);\n let y = random(0, 100);\n let s = random(2, 20);\n\n // Create a new Frog object.\n let frog = new Frog(x, y, s);\n\n // Add the Frog to the array.\n frogs.push(frog);\n }\n\n // Slow the frame rate.\n frameRate(1);\n\n describe(\n 'Five frog faces on a blue background. The frogs hop around randomly.'\n );\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n for (let frog of frogs) {\n // Show the frog.\n frog.show();\n\n // Move the frog.\n frog.hop();\n\n // Wrap around if they've hopped off the edge.\n frog.checkEdges();\n }\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('\U0001F438', this.x, this.y);\n }\n\n hop() {\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n\n checkEdges() {\n if (this.x > width) {\n this.x = this.x - width;\n } else if (this.x < 0) {\n this.x = width - this.x;\n }\n\n if (this.y > height) {\n this.y = this.y - height;\n } else if (this.y < 0) {\n this.y = height - this.y;\n }\n }\n}\n</code>\n</div>"
+ - "<div>\n<code>\n// Declare a frog variable.\nlet fifi;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variable a new Frog object.\n fifi = new Frog(50, 50, 20);\n\n describe('A frog face drawn on a blue background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frog.\n fifi.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('\U0001F438', this.x, this.y);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n describe('Two frog faces drawn next to each other on a blue background.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('\U0001F438', this.x, this.y);\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Assign the frog variables a new Frog object.\n frog1 = new Frog(25, 50, 10);\n frog2 = new Frog(75, 50, 20);\n\n // Slow the frame rate.\n frameRate(1);\n\n describe('Two frog faces on a blue background. The frogs hop around randomly.');\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n // Show the frogs.\n frog1.show();\n frog2.show();\n\n // Move the frogs.\n frog1.hop();\n frog2.hop();\n\n // Wrap around if they've hopped off the edge.\n frog1.checkEdges();\n frog2.checkEdges();\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('\U0001F438', this.x, this.y);\n }\n\n hop() {\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n\n checkEdges() {\n if (this.x > width) {\n this.x = this.x - width;\n } else if (this.x < 0) {\n this.x = width - this.x;\n }\n\n if (this.y > height) {\n this.y = this.y - height;\n } else if (this.y < 0) {\n this.y = height - this.y;\n }\n }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Create an array that will hold frogs.\nlet frogs = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add Frog objects to the array.\n for (let i = 0; i < 5; i += 1) {\n // Calculate random coordinates and size.\n let x = random(0, 100);\n let y = random(0, 100);\n let s = random(2, 20);\n\n // Create a new Frog object.\n let frog = new Frog(x, y, s);\n\n // Add the Frog to the array.\n frogs.push(frog);\n }\n\n // Slow the frame rate.\n frameRate(1);\n\n describe(\n 'Five frog faces on a blue background. The frogs hop around randomly.'\n );\n}\n\nfunction draw() {\n background('cornflowerblue');\n\n for (let frog of frogs) {\n // Show the frog.\n frog.show();\n\n // Move the frog.\n frog.hop();\n\n // Wrap around if they've hopped off the edge.\n frog.checkEdges();\n }\n}\n\nclass Frog {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n show() {\n textAlign(CENTER, CENTER);\n textSize(this.size);\n text('\U0001F438', this.x, this.y);\n }\n\n hop() {\n this.x += random(-10, 10);\n this.y += random(-10, 10);\n }\n\n checkEdges() {\n if (this.x > width) {\n this.x = this.x - width;\n } else if (this.x < 0) {\n this.x = width - this.x;\n }\n\n if (this.y > height) {\n this.y = this.y - height;\n } else if (this.y < 0) {\n this.y = height - this.y;\n }\n }\n}\n</code>\n</div>"
class: p5
---
diff --git a/src/content/reference/en/p5/clear.mdx b/src/content/reference/en/p5/clear.mdx
index ce6b900922..23c2bcc0e5 100644
--- a/src/content/reference/en/p5/clear.mdx
+++ b/src/content/reference/en/p5/clear.mdx
@@ -1,8 +1,8 @@
---
title: clear
-module: Color
-submodule: Setting
-file: src/color/setting.js
+module: IO
+submodule: Input
+file: src/io/files.js
description: >
<p>Clears the pixels on the canvas.</p>
@@ -26,12 +26,11 @@ description: >
clears the depth buffer. If you are not using the WebGL renderer, these
parameters will have no effect.</p>
-line: 655
+line: 1520
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -76,28 +75,61 @@ example:
}
</code>
</div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Style the text.
+ textAlign(LEFT, CENTER);
+ textFont('Courier New');
+ textSize(12);
+
+ // Display instructions.
+ text('Double-click to save', 5, 50, 90);
+
+ describe('The text "Double-click to save" written in black on a gray background.');
+ }
+
+ // Save the file when the user double-clicks.
+ function doubleClicked() {
+ // Create a p5.PrintWriter object.
+ let myWriter = createWriter('numbers.txt');
+
+ // Add some data to the print stream.
+ myWriter.print('Hello p5*js!');
+
+ // Clear the print stream.
+ myWriter.clear();
+
+ // Save the file and close the print stream.
+ myWriter.close();
+ }
+ </code>
+ </div>
class: p5
-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
+overloads:
+ - params:
+ - name: r
+ description: normalized red value.
+ optional: 1
+ type: Number
+ - name: g
+ description: normalized green value.
+ optional: 1
+ type: Number
+ - name: b
+ description: normalized blue value.
+ optional: 1
+ type: Number
+ - name: a
+ description: normalized alpha value.
+ optional: 1
+ type: Number
+ - params: []
chainable: true
---
diff --git a/src/content/reference/en/p5/clearDepth.mdx b/src/content/reference/en/p5/clearDepth.mdx
index 83ef1f2113..8b789aef92 100644
--- a/src/content/reference/en/p5/clearDepth.mdx
+++ b/src/content/reference/en/p5/clearDepth.mdx
@@ -11,8 +11,7 @@ description: >
in 3D space. This information is stored in an object called the
- <em>depth buffer</em>. Clearing the depth buffer ensures new objects aren't
- drawn
+ depth buffer. Clearing the depth buffer ensures new objects aren't drawn
behind old ones. Doing so can be useful for feedback effects in which the
@@ -33,12 +32,11 @@ description: >
<code>depth</code> is 1.</p>
<p>Note: <code>clearDepth()</code> can only be used in WebGL mode.</p>
-line: 635
+line: 628
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let previous;
@@ -96,13 +94,14 @@ example:
</code>
</div>
class: p5
-params:
- - name: depth
- description: |
- <p>amount of the depth buffer to clear between 0
- (none) and 1 (far clipping plane). Defaults to 1.</p>
- type: Number
- optional: true
+overloads:
+ - params:
+ - name: depth
+ description: |-
+ amount of the depth buffer to clear between 0
+ (none) and 1 (far clipping plane). Defaults to 1.
+ optional: 1
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/clearStorage.mdx b/src/content/reference/en/p5/clearStorage.mdx
index 5698e16eee..6c4add35f4 100644
--- a/src/content/reference/en/p5/clearStorage.mdx
+++ b/src/content/reference/en/p5/clearStorage.mdx
@@ -23,12 +23,11 @@ description: >
<p>Note: Sensitive data such as passwords or personal information shouldn't be
stored in <code>localStorage</code>.</p>
-line: 313
+line: 371
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to clear localStorage.
@@ -71,6 +70,8 @@ example:
</code>
</div>
class: p5
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5/clip.mdx b/src/content/reference/en/p5/clip.mdx
index 2f85b585af..6ed5f914a0 100644
--- a/src/content/reference/en/p5/clip.mdx
+++ b/src/content/reference/en/p5/clip.mdx
@@ -37,12 +37,11 @@ description: >
href="/reference/p5/beginClip/">beginClip()</a>
and <a href="/reference/p5/endClip/">endClip()</a>.</p>
-line: 222
+line: 408
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -67,7 +66,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -133,7 +131,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -166,7 +163,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -205,16 +201,15 @@ example:
</code>
</div>
class: p5
-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
+overloads:
+ - params:
+ - name: callback
+ description: a function that draws the mask shape.
+ type: Function
+ - name: options
+ description: an object containing clip settings.
+ optional: 1
+ type: Object
chainable: false
---
diff --git a/src/content/reference/en/p5.PrintWriter/close.mdx b/src/content/reference/en/p5/close.mdx
similarity index 89%
rename from src/content/reference/en/p5.PrintWriter/close.mdx
rename to src/content/reference/en/p5/close.mdx
index c319c91b41..084b4c958d 100644
--- a/src/content/reference/en/p5.PrintWriter/close.mdx
+++ b/src/content/reference/en/p5/close.mdx
@@ -1,16 +1,14 @@
---
title: close
module: IO
-submodule: Output
+submodule: Input
file: src/io/files.js
-description: |
- <p>Saves the file and closes the print stream.</p>
-line: 1767
+description: Saves the file and closes the print stream.
+line: 1566
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -46,7 +44,9 @@ example:
}
</code>
</div>
-class: p5.PrintWriter
+class: p5
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5/color.mdx b/src/content/reference/en/p5/color.mdx
index 35b4b0a5f5..691ef64f4c 100644
--- a/src/content/reference/en/p5/color.mdx
+++ b/src/content/reference/en/p5/color.mdx
@@ -39,12 +39,11 @@ description: >
parameter
sets the alpha (transparency) value.</p>
-line: 398
+line: 400
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -65,7 +64,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -95,7 +93,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -116,7 +113,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -144,7 +140,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -185,7 +180,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -273,68 +267,59 @@ return:
description: resulting color.
type: p5.Color
overloads:
- - line: 398
- params:
+ - params:
- name: gray
- description: |
- <p>number specifying value between white and black.</p>
+ description: number specifying value between white and black.
type: Number
- name: alpha
- description: |
- <p>alpha value relative to current color range
- (default is 0-255).</p>
+ description: |-
+ alpha value relative to current color range
+ (default is 0-255).
+ optional: 1
type: Number
- optional: true
return:
description: resulting color.
type: p5.Color
- - line: 652
- params:
+ - params:
- name: v1
- description: |
- <p>red or hue value relative to
- the current color range.</p>
+ description: |-
+ red or hue value relative to
+ the current color range.
type: Number
- name: v2
- description: |
- <p>green or saturation value
- relative to the current color range.</p>
+ description: |-
+ green or saturation value
+ relative to the current color range.
type: Number
- name: v3
- description: |
- <p>blue or brightness value
- relative to the current color range.</p>
+ description: |-
+ blue or brightness value
+ relative to the current color range.
type: Number
- name: alpha
- description: ''
+ optional: 1
type: Number
- optional: true
return:
description: ''
type: p5.Color
- - line: 664
- params:
+ - params:
- name: value
- description: |
- <p>a color string.</p>
+ description: a color string.
type: String
return:
description: ''
type: p5.Color
- - line: 670
- params:
+ - params:
- name: values
- description: |
- <p>an array containing the red, green, blue,
- and alpha components of the color.</p>
+ description: |-
+ an array containing the red, green, blue,
+ and alpha components of the color.
type: 'Number[]'
return:
description: ''
type: p5.Color
- - line: 677
- params:
+ - params:
- name: color
- description: ''
type: p5.Color
return:
description: ''
diff --git a/src/content/reference/en/p5/colorMode.mdx b/src/content/reference/en/p5/colorMode.mdx
index 769f0c379a..3972894cc9 100644
--- a/src/content/reference/en/p5/colorMode.mdx
+++ b/src/content/reference/en/p5/colorMode.mdx
@@ -3,7 +3,7 @@ title: colorMode
module: Color
submodule: Setting
file: src/color/setting.js
-description: >
+description: >-
<p>Changes the way color values are interpreted.</p>
<p>By default, the <code>Number</code> parameters for <a
@@ -28,22 +28,109 @@ description: >
model.</p>
<p>Calling <code>colorMode(HSB)</code> or <code>colorMode(HSL)</code> changes
- to HSB or HSL system
+ to HSB or HSL systems instead of RGB.
- instead of RGB. Pure red is <code>color(0, 100, 100)</code> in HSB and
+ Pure red is <code>color(0, 100, 100)</code> in HSB and <code>color(0, 100,
+ 50)</code> in HSL.</p>
- <code>color(0, 100, 50)</code> in HSL.</p>
+ <p>Some additional color modes that p5.js supports are:</p>
+
+ <p><code>RGBHDR</code> - High Dynamic Range RGB defined within the Display P3
+ color space.
+
+ Colors are expressed with an extended dynamic range. To render these colors
+
+ accurately, you must use the HDR canvas.</p>
+
+ <p><code>HWB</code> - Hue, Whiteness, Blackness.
+
+ Similar to HSB and HSL, this mode uses a hue angle.
+
+ Instead of saturation and lightness, HWB defines colors based on the
+ percentage
+
+ of whiteness and blackness. This is the color model used by Chrome's GUI color
+ picker.
+
+ Pure red in HWB is represented as <code>color(0, 0, 0)</code> (i.e., hue 0
+ with 0% whiteness and 0% blackness).</p>
+
+ <pre><code> <img
+ src="/assets/hwb.png"/></code></pre><p><code>LAB</code> - Also known as CIE
+ Lab, this color mode defines colors with Lightness, Alpha, and Beta.
+
+ It is widely used in professional color measurement contexts due to its
+ perceptual uniformity.</p>
+
+ <p><code>LCH</code> - A more intuitive representation of the CIE Lab color
+ space using Lightness, Chroma, and Hue.
+
+ This mode separates the color's chromatic intensity (chroma) from its
+ lightness,
+
+ simplifying color selection and manipulation.</p>
+
+ <p><code>OKLAB</code> - A variant of the CIE Lab color space that corrects
+ for non-uniformities inherent in LAB.
+
+ The adjustment provides a more perceptually accurate and uniform
+ representation,
+
+ which is particularly beneficial for smooth color transitions.</p>
+
+ <p><code>OKLCH</code> - An easier-to-use representation of OKLAB, expressing
+ colors in terms of Lightness, Chroma, and Hue.
+
+ This mode retains the perceptual benefits of OKLAB while offering a more
+ intuitive format for color manipulation.</p>
<p><a href="/reference/p5/p5.Color">p5.Color</a> objects remember the mode
that they were
created in. Changing modes doesn't affect their appearance.</p>
-line: 733
+
+ <p><code>Single-value (Grayscale) Colors</code>:When a color is specified with
+ only one parameter (e.g., <code>color(g)</code>), p5.js will interpret it
+
+ as a grayscale color. However, how that single parameter translates into a
+ grayscale value
+
+ depends on the color mode:</p>
+
+ <ul><li><code>RGB, HSB, and HSL</code>: In RGB, the single value is
+ interpreted using the “blue” maximum
+
+ (i.e., the single parameter is mapped to the blue channel's max).
+
+ In HSB and HSL, the single value is mapped to Brightness and Lightness max
+ respectively with hue=0 .
+
+ and saturation=0.</li><li><code>LAB, LCH, OKLAB, and OKLCH</code>: The single
+ value is taken to be the <code>lightness (L)</code> component,
+
+ with the specified max range for that channel.</li><li><code>HWB</code>:
+ Grayscale relies on both the <code>whiteness (W)</code> and <code>blackness
+ (B)</code> channels. Since
+
+ a single value cannot directly account for two distinct channels, the library
+ uses an
+
+ average of their max values to interpret the single grayscale parameter. For
+ instance,
+
+ if W has a max of 50 and B has a max of 100, then the single grayscale
+ parameter
+
+ is mapped using (50 + 100) / 2 = 75 as its effective maximum. More complex or
+ negative
+
+ ranges are currently not handled, so results in those cases may be
+ ambiguous.</li></ul>
+line: 1158
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -61,7 +148,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -82,7 +168,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -103,7 +188,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -124,7 +208,80 @@ example:
</code>
</div>
- |-
-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ // Draw a neutral gray background using the default color mode.
+ background(200);
+
+ // Switch to HWB color mode.
+ // (Assuming p5.js supports HWB with a range of:
+ // hue: 0–360, whiteness: 0–100, blackness: 0–100.)
+ colorMode(HWB);
+
+ // Set fill to pure red in HWB.
+ // Pure red in HWB is: hue = 0°, whiteness = 0%, blackness = 0%.
+ fill(0, 0, 0);
+
+ // Draw a circle at the center.
+ circle(50, 50, 25);
+
+ describe('A gray square with a red circle at its center, drawn using HWB color mode.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ // Draw a neutral gray background using the default color mode.
+ background(200);
+
+ // Switch to LAB color mode.
+ // In this mode, L typically ranges from 0 to 100 while a and b span roughly -128 to 127.
+ colorMode(LAB);
+
+ // Set fill to pure red in LAB.
+ // The sRGB red (255, 0, 0) converts approximately to LAB as:
+ // L = 53, a = 80, b = 67.
+ fill(53, 80, 67);
+
+ // Draw a circle at the center.
+ circle(50, 50, 25);
+
+ describe('A gray square with a red circle at its center, drawn using LAB color mode.');
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ // Draw a neutral gray background.
+ background(200);
+
+ // Switch to LCH color mode.
+ // In LCH, colors are defined by Lightness, Chroma, and Hue (in degrees).
+ colorMode(LCH);
+
+ // Set fill to an approximation of pure red in LCH:
+ // Lightness ≈ 53, Chroma ≈ 104, Hue ≈ 40°.
+ fill(53, 104, 40);
+
+ // Draw a circle at the center.
+ circle(50, 50, 25);
+
+ describe('A gray square with a red circle at its center, drawn using LCH color mode.');
+ }
+ </code>
+ </div>
+ - |-
<div>
<code>
function setup() {
@@ -219,48 +376,128 @@ example:
}
</code>
</div>
+ - |-
+ <div>
+ <code>
+ let hslGraphic, lchGraphic, oklchGraphic;
+
+ function setup() {
+ createCanvas(600, 200);
+ noLoop();
+
+ // Create three graphics objects for HSL, LCH, and OKLCH color modes
+ hslGraphic = createGraphics(200, 200);
+ lchGraphic = createGraphics(200, 200);
+ oklchGraphic = createGraphics(200, 200);
+
+ // Draw HSL color wheel
+ colorMode(HSL);
+ hslGraphic.translate(100, 100);
+ for (let i = 0; i < 1000; i++) {
+ hslGraphic.stroke(360 / 1000 * i, 70, 50);
+ hslGraphic.line(0, 0, hslGraphic.width / 2, 0);
+ hslGraphic.rotate(TAU / 1000);
+ }
+
+ // Draw LCH color wheel
+ colorMode(LCH);
+ lchGraphic.translate(100, 100);
+ for (let i = 0; i < 1000; i++) {
+ lchGraphic.stroke(54, 106, 360 / 1000 * i);
+ lchGraphic.line(0, 0, lchGraphic.width / 2, 0);
+ lchGraphic.rotate(TAU / 1000);
+ }
+
+ // Draw OKLCH color wheel
+ colorMode(OKLCH);
+ oklchGraphic.translate(100, 100);
+ for (let i = 0; i < 1000; i++) {
+ oklchGraphic.stroke(54, 106, 360 / 1000 * i);
+ oklchGraphic.line(0, 0, oklchGraphic.width / 2, 0);
+ oklchGraphic.rotate(TAU / 1000);
+ }
+ }
+
+ function draw() {
+ // Set the styles
+ colorMode(RGB);
+ background(220);
+
+ // Display the color wheels
+ image(hslGraphic, 0, 0);
+ image(lchGraphic, 200, 0);
+ image(oklchGraphic, 400, 0);
+ }
+ </code>
+ </div>
+ - |-
+ <div>
+ <code>
+ // Example: Single-value (Grayscale) colors in different color modes.
+ // The rectangle is filled with one parameter, but its final color depends
+ // on how that parameter is interpreted by the current color mode.
+
+ function setup() {
+ createCanvas(100, 100);
+ noStroke();
+ noLoop();
+ }
+
+ function draw() {
+ // Set color mode to RGB with range 0-255
+ colorMode(RGB, 255);
+
+ // Fill with single grayscale value
+ fill(128);
+ rect(0, 0, 100, 100);
+
+ // Add text label
+ fill(0); // Switch to black text for clarity
+ textSize(14);
+ text("RGB (128)", 10, 20);
+ }
+ </code>
+ </div>
class: p5
+return:
+ description: The current color mode.
+ type: String
overloads:
- - line: 733
- params:
+ - params:
- name: mode
- description: |
- <p>either RGB, HSB or HSL, corresponding to
- Red/Green/Blue and Hue/Saturation/Brightness
- (or Lightness).</p>
- type: Constant
+ description: |-
+ either RGB, HSB, HSL,
+ or one of the extended modes described above.
+ type: RGB|HSB|HSL|RGBHDR|HWB|LAB|LCH|OKLAB|OKLCH
- name: max
- description: |
- <p>range for all values.</p>
+ description: range for all values.
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 938
- params:
+ - params:
- name: mode
- description: ''
- type: Constant
+ type: RGB|HSB|HSL|RGBHDR|HWB|LAB|LCH|OKLAB|OKLCH
- name: max1
- description: |
- <p>range for the red or hue depending on the
- current color mode.</p>
+ description: |-
+ range for the red or hue depending on the
+ current color mode.
type: Number
- name: max2
- description: |
- <p>range for the green or saturation depending
- on the current color mode.</p>
+ description: |-
+ range for the green or saturation depending
+ on the current color mode.
type: Number
- name: max3
- description: |
- <p>range for the blue or brightness/lightness
- depending on the current color mode.</p>
+ description: |-
+ range for the blue or brightness/lightness
+ depending on the current color mode.
type: Number
- name: maxA
- description: |
- <p>range for the alpha.</p>
+ description: range for the alpha.
+ optional: 1
type: Number
- optional: true
- chainable: 1
+ return:
+ description: The current color mode.
+ type: String
chainable: true
---
diff --git a/src/content/reference/en/p5/concat.mdx b/src/content/reference/en/p5/concat.mdx
deleted file mode 100644
index 481f788ea7..0000000000
--- a/src/content/reference/en/p5/concat.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-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
-deprecated: >-
- Use <a
- href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat">arr1.concat(arr2)</a>
- instead.
-isConstructor: false
-itemtype: method
-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>
-class: p5
-params:
- - name: a
- description: |
- <p>first Array to concatenate</p>
- type: Array
- - name: b
- description: |
- <p>second Array to concatenate</p>
- type: Array
-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
index c423e18519..9f06ad6556 100644
--- a/src/content/reference/en/p5/cone.mdx
+++ b/src/content/reference/en/p5/cone.mdx
@@ -58,12 +58,11 @@ description: >
<code>cap</code> is <code>true</code>.</p>
<p>Note: <code>cone()</code> can only be used in WebGL mode.</p>
-line: 1730
+line: 1273
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -229,32 +228,28 @@ example:
</code>
</div>
class: p5
-params:
- - name: radius
- description: |
- <p>radius of the cone's base. Defaults to 50.</p>
- type: Number
- optional: true
- - name: height
- description: |
- <p>height of the cone. Defaults to the value of <code>radius</code>.</p>
- type: Number
- optional: true
- - name: detailX
- description: |
- <p>number of edges used to draw the base. Defaults to 24.</p>
- type: Integer
- optional: true
- - name: detailY
- description: |
- <p>number of triangle subdivisions along the y-axis. Defaults to 1.</p>
- type: Integer
- optional: true
- - name: cap
- description: |
- <p>whether to draw the cone's base. Defaults to <code>true</code>.</p>
- type: Boolean
- optional: true
+overloads:
+ - params:
+ - name: radius
+ description: radius of the cone's base. Defaults to 50.
+ optional: 1
+ type: Number
+ - name: height
+ description: height of the cone. Defaults to the value of <code>radius</code>.
+ optional: 1
+ type: Number
+ - name: detailX
+ description: number of edges used to draw the base. Defaults to 24.
+ optional: 1
+ type: Integer
+ - name: detailY
+ description: number of triangle subdivisions along the y-axis. Defaults to 1.
+ optional: 1
+ type: Integer
+ - name: cap
+ description: whether to draw the cone's base. Defaults to <code>true</code>.
+ optional: 1
+ type: Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5/console.mdx b/src/content/reference/en/p5/console.mdx
index 1695dd7373..5d17b9187d 100644
--- a/src/content/reference/en/p5/console.mdx
+++ b/src/content/reference/en/p5/console.mdx
@@ -3,7 +3,7 @@ title: console
module: Foundation
submodule: Foundation
file: src/core/reference.js
-description: >
+description: >-
<p>Prints a message to the web browser's console.</p>
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/console/"
@@ -21,12 +21,8 @@ description: >
console.log('Got here!');
// Game logic.
- }
-
- </code></pre>
-
- <p><code>console.error()</code> is helpful for tracking errors because it
- prints
+ }</code></pre><p><code>console.error()</code> is helpful for tracking errors
+ because it prints
formatted messages. For example, it's common to encounter errors when
@@ -42,15 +38,13 @@ description: >
// Try to load an image and call handleError() if it fails.
- loadImage('https://example.com/cat.jpg', handleImage, handleError);
-
- </code></pre>
-line: 1988
+ loadImage('https://example.com/cat.jpg', handleImage,
+ handleError);</code></pre>
+line: 1
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
diff --git a/src/content/reference/en/p5/constants/ADD.mdx b/src/content/reference/en/p5/constants/ADD.mdx
index 4491ab7288..dc0bdaa990 100644
--- a/src/content/reference/en/p5/constants/ADD.mdx
+++ b/src/content/reference/en/p5/constants/ADD.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 905
+line: 969
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: ADD
---
diff --git a/src/content/reference/en/p5/constants/ALT.mdx b/src/content/reference/en/p5/constants/ALT.mdx
index f28fbb2f33..32872c0ee0 100644
--- a/src/content/reference/en/p5/constants/ALT.mdx
+++ b/src/content/reference/en/p5/constants/ALT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 820
+line: 858
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: ALT
---
diff --git a/src/content/reference/en/p5/constants/ARROW.mdx b/src/content/reference/en/p5/constants/ARROW.mdx
index 26226f0bb8..cb455bf7e2 100644
--- a/src/content/reference/en/p5/constants/ARROW.mdx
+++ b/src/content/reference/en/p5/constants/ARROW.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 55
+line: 65
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: ARROW
---
diff --git a/src/content/reference/en/p5/constants/AUTO.mdx b/src/content/reference/en/p5/constants/AUTO.mdx
index 4793e579e2..e61932486e 100644
--- a/src/content/reference/en/p5/constants/AUTO.mdx
+++ b/src/content/reference/en/p5/constants/AUTO.mdx
@@ -3,19 +3,20 @@ 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),
+description: >-
+ 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: 810
+ AUTO, at a time.
+line: 851
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: AUTO
---
diff --git a/src/content/reference/en/p5/constants/AXES.mdx b/src/content/reference/en/p5/constants/AXES.mdx
index cda2063675..8fdd079434 100644
--- a/src/content/reference/en/p5/constants/AXES.mdx
+++ b/src/content/reference/en/p5/constants/AXES.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1171
+line: 1274
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: AXES
---
diff --git a/src/content/reference/en/p5/constants/BACKSPACE.mdx b/src/content/reference/en/p5/constants/BACKSPACE.mdx
index 9d669879fd..84bb44c3c0 100644
--- a/src/content/reference/en/p5/constants/BACKSPACE.mdx
+++ b/src/content/reference/en/p5/constants/BACKSPACE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 826
+line: 865
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: BACKSPACE
---
diff --git a/src/content/reference/en/p5/constants/BASELINE.mdx b/src/content/reference/en/p5/constants/BASELINE.mdx
index b97bb36ad3..821a05ba30 100644
--- a/src/content/reference/en/p5/constants/BASELINE.mdx
+++ b/src/content/reference/en/p5/constants/BASELINE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 675
+line: 713
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: BASELINE
---
diff --git a/src/content/reference/en/p5/constants/BEVEL.mdx b/src/content/reference/en/p5/constants/BEVEL.mdx
index 07e5210938..fcd15ee575 100644
--- a/src/content/reference/en/p5/constants/BEVEL.mdx
+++ b/src/content/reference/en/p5/constants/BEVEL.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 777
+line: 833
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: BEVEL
---
diff --git a/src/content/reference/en/p5/constants/BEZIER.mdx b/src/content/reference/en/p5/constants/BEZIER.mdx
index 400607edfe..08809a71fd 100644
--- a/src/content/reference/en/p5/constants/BEZIER.mdx
+++ b/src/content/reference/en/p5/constants/BEZIER.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1073
+line: 1160
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: BEZIER
---
diff --git a/src/content/reference/en/p5/constants/BLEND.mdx b/src/content/reference/en/p5/constants/BLEND.mdx
index e9fed7efe0..a46ff3169b 100644
--- a/src/content/reference/en/p5/constants/BLEND.mdx
+++ b/src/content/reference/en/p5/constants/BLEND.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 893
+line: 957
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: BLEND
---
diff --git a/src/content/reference/en/p5/constants/BLUR.mdx b/src/content/reference/en/p5/constants/BLUR.mdx
index 6f4fe1fc75..9fc275c260 100644
--- a/src/content/reference/en/p5/constants/BLUR.mdx
+++ b/src/content/reference/en/p5/constants/BLUR.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1019
+line: 1097
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: BLUR
---
diff --git a/src/content/reference/en/p5/constants/BOLD.mdx b/src/content/reference/en/p5/constants/BOLD.mdx
index 2a19faaab7..14a0185c54 100644
--- a/src/content/reference/en/p5/constants/BOLD.mdx
+++ b/src/content/reference/en/p5/constants/BOLD.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1036
+line: 1117
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: BOLD
---
diff --git a/src/content/reference/en/p5/constants/BOLDITALIC.mdx b/src/content/reference/en/p5/constants/BOLDITALIC.mdx
index cd6237a5e0..d9a911acd5 100644
--- a/src/content/reference/en/p5/constants/BOLDITALIC.mdx
+++ b/src/content/reference/en/p5/constants/BOLDITALIC.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1041
+line: 1123
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: BOLDITALIC
---
diff --git a/src/content/reference/en/p5/constants/BOTTOM.mdx b/src/content/reference/en/p5/constants/BOTTOM.mdx
index 6c98d200f2..955e8a92b8 100644
--- a/src/content/reference/en/p5/constants/BOTTOM.mdx
+++ b/src/content/reference/en/p5/constants/BOTTOM.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 670
+line: 707
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: BOTTOM
---
diff --git a/src/content/reference/en/p5/constants/BURN.mdx b/src/content/reference/en/p5/constants/BURN.mdx
index 209900a322..89b23aad3d 100644
--- a/src/content/reference/en/p5/constants/BURN.mdx
+++ b/src/content/reference/en/p5/constants/BURN.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 976
+line: 1047
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: BURN
---
diff --git a/src/content/reference/en/p5/constants/CENTER.mdx b/src/content/reference/en/p5/constants/CENTER.mdx
index 3ff0fbdc68..d24af9aeb8 100644
--- a/src/content/reference/en/p5/constants/CENTER.mdx
+++ b/src/content/reference/en/p5/constants/CENTER.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 660
+line: 695
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: CENTER
---
diff --git a/src/content/reference/en/p5/constants/CHAR.mdx b/src/content/reference/en/p5/constants/CHAR.mdx
index b97311bfc0..3c864a8b01 100644
--- a/src/content/reference/en/p5/constants/CHAR.mdx
+++ b/src/content/reference/en/p5/constants/CHAR.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1046
+line: 1129
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: CHAR
---
diff --git a/src/content/reference/en/p5/constants/CHORD.mdx b/src/content/reference/en/p5/constants/CHORD.mdx
index 9854ab6d6e..8ec3e07c17 100644
--- a/src/content/reference/en/p5/constants/CHORD.mdx
+++ b/src/content/reference/en/p5/constants/CHORD.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 750
+line: 803
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: CHORD
---
diff --git a/src/content/reference/en/p5/constants/CLAMP.mdx b/src/content/reference/en/p5/constants/CLAMP.mdx
index 3feb6ead54..3aa78aea62 100644
--- a/src/content/reference/en/p5/constants/CLAMP.mdx
+++ b/src/content/reference/en/p5/constants/CLAMP.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1126
+line: 1222
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: CLAMP
---
diff --git a/src/content/reference/en/p5/constants/CLOSE.mdx b/src/content/reference/en/p5/constants/CLOSE.mdx
index b1d891f631..8f8869551a 100644
--- a/src/content/reference/en/p5/constants/CLOSE.mdx
+++ b/src/content/reference/en/p5/constants/CLOSE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 740
+line: 791
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: CLOSE
---
diff --git a/src/content/reference/en/p5/constants/CONTAIN.mdx b/src/content/reference/en/p5/constants/CONTAIN.mdx
index ff23139368..888224541c 100644
--- a/src/content/reference/en/p5/constants/CONTAIN.mdx
+++ b/src/content/reference/en/p5/constants/CONTAIN.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1188
+line: 1294
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: CONTAIN
---
diff --git a/src/content/reference/en/p5/constants/CONTROL.mdx b/src/content/reference/en/p5/constants/CONTROL.mdx
index d8d5f85c9c..2c45b14c5d 100644
--- a/src/content/reference/en/p5/constants/CONTROL.mdx
+++ b/src/content/reference/en/p5/constants/CONTROL.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 831
+line: 872
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: CONTROL
---
diff --git a/src/content/reference/en/p5/constants/CORNER.mdx b/src/content/reference/en/p5/constants/CORNER.mdx
index 35b881949d..974b5ebd9c 100644
--- a/src/content/reference/en/p5/constants/CORNER.mdx
+++ b/src/content/reference/en/p5/constants/CORNER.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 635
+line: 665
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: CORNER
---
diff --git a/src/content/reference/en/p5/constants/CORNERS.mdx b/src/content/reference/en/p5/constants/CORNERS.mdx
index 43d7dd4e4f..206387f976 100644
--- a/src/content/reference/en/p5/constants/CORNERS.mdx
+++ b/src/content/reference/en/p5/constants/CORNERS.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 640
+line: 671
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: CORNERS
---
diff --git a/src/content/reference/en/p5/constants/COVER.mdx b/src/content/reference/en/p5/constants/COVER.mdx
index 0f4f4f12cb..d885020c7e 100644
--- a/src/content/reference/en/p5/constants/COVER.mdx
+++ b/src/content/reference/en/p5/constants/COVER.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1194
+line: 1301
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: COVER
---
diff --git a/src/content/reference/en/p5/constants/CROSS.mdx b/src/content/reference/en/p5/constants/CROSS.mdx
index 5e799de3ab..78051fa6c9 100644
--- a/src/content/reference/en/p5/constants/CROSS.mdx
+++ b/src/content/reference/en/p5/constants/CROSS.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 60
+line: 83
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: CROSS
---
diff --git a/src/content/reference/en/p5/constants/CURVE.mdx b/src/content/reference/en/p5/constants/CURVE.mdx
index c8787abd0d..9f47a0a1b7 100644
--- a/src/content/reference/en/p5/constants/CURVE.mdx
+++ b/src/content/reference/en/p5/constants/CURVE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1078
+line: 1166
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: CURVE
---
diff --git a/src/content/reference/en/p5/constants/DARKEST.mdx b/src/content/reference/en/p5/constants/DARKEST.mdx
index e84a526aa1..97e4925e2c 100644
--- a/src/content/reference/en/p5/constants/DARKEST.mdx
+++ b/src/content/reference/en/p5/constants/DARKEST.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 913
+line: 975
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: DARKEST
---
diff --git a/src/content/reference/en/p5/constants/DEGREES.mdx b/src/content/reference/en/p5/constants/DEGREES.mdx
deleted file mode 100644
index 94026da6c1..0000000000
--- a/src/content/reference/en/p5/constants/DEGREES.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: DEGREES
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
- <p>A <code>String</code> constant that's used to set the
-
- <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
- <p>By default, functions such as <a href="/reference/p5/rotate/">rotate()</a>
- and
-
- <a href="/reference/p5/sin/">sin()</a> expect angles measured in units of
- radians.
-
- Calling <code>angleMode(DEGREES)</code> ensures that angles are measured in
- units of
-
- degrees.</p>
-
- <p>Note: <code>TWO_PI</code> radians equals 360˚.</p>
-line: 547
-isConstructor: false
-itemtype: property
-example:
- - |-
-
- <div>
- <code>
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Draw a red arc from 0 to HALF_PI radians.
- fill(255, 0, 0);
- arc(50, 50, 80, 80, 0, HALF_PI);
-
- // Use degrees.
- angleMode(DEGREES);
-
- // Draw a blue arc from 90˚ to 180˚.
- fill(0, 0, 255);
- arc(50, 50, 80, 80, 90, 180);
-
- describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');
- }
- </code>
- </div>
-class: p5
-type: String
----
-
-
-# DEGREES
diff --git a/src/content/reference/en/p5/constants/RADIANS.mdx b/src/content/reference/en/p5/constants/DEG_TO_RAD.mdx
similarity index 96%
rename from src/content/reference/en/p5/constants/RADIANS.mdx
rename to src/content/reference/en/p5/constants/DEG_TO_RAD.mdx
index 8599799a08..649cf0da5b 100644
--- a/src/content/reference/en/p5/constants/RADIANS.mdx
+++ b/src/content/reference/en/p5/constants/DEG_TO_RAD.mdx
@@ -1,5 +1,5 @@
---
-title: RADIANS
+title: DEG_TO_RAD
module: Constants
submodule: Constants
file: src/core/constants.js
@@ -24,12 +24,11 @@ description: >
<a href="/reference/p5/DEGREES/">DEGREES</a>.</p>
<p>Note: <code>TWO_PI</code> radians equals 360˚.</p>
-line: 587
+line: 656
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
@@ -56,8 +55,7 @@ example:
</code>
</div>
class: p5
-type: String
---
-# RADIANS
+# DEG\_TO\_RAD
diff --git a/src/content/reference/en/p5/constants/DELETE.mdx b/src/content/reference/en/p5/constants/DELETE.mdx
index 0c9d411d66..cb6098e992 100644
--- a/src/content/reference/en/p5/constants/DELETE.mdx
+++ b/src/content/reference/en/p5/constants/DELETE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 836
+line: 879
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: DELETE
---
diff --git a/src/content/reference/en/p5/constants/DIFFERENCE.mdx b/src/content/reference/en/p5/constants/DIFFERENCE.mdx
index 302f4f0f9b..ae54559ba9 100644
--- a/src/content/reference/en/p5/constants/DIFFERENCE.mdx
+++ b/src/content/reference/en/p5/constants/DIFFERENCE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 924
+line: 987
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: DIFFERENCE
---
diff --git a/src/content/reference/en/p5/constants/DILATE.mdx b/src/content/reference/en/p5/constants/DILATE.mdx
index 9fc3c21521..8bc979c135 100644
--- a/src/content/reference/en/p5/constants/DILATE.mdx
+++ b/src/content/reference/en/p5/constants/DILATE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1009
+line: 1085
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: DILATE
---
diff --git a/src/content/reference/en/p5/constants/DODGE.mdx b/src/content/reference/en/p5/constants/DODGE.mdx
index bf83d377da..36fe00ffa3 100644
--- a/src/content/reference/en/p5/constants/DODGE.mdx
+++ b/src/content/reference/en/p5/constants/DODGE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 970
+line: 1041
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: DODGE
---
diff --git a/src/content/reference/en/p5/constants/DOWN_ARROW.mdx b/src/content/reference/en/p5/constants/DOWN_ARROW.mdx
index 9a4d3b6b35..44741506be 100644
--- a/src/content/reference/en/p5/constants/DOWN_ARROW.mdx
+++ b/src/content/reference/en/p5/constants/DOWN_ARROW.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 841
+line: 886
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: DOWN_ARROW
---
diff --git a/src/content/reference/en/p5/constants/EMPTY_PATH.mdx b/src/content/reference/en/p5/constants/EMPTY_PATH.mdx
new file mode 100644
index 0000000000..c1455a6188
--- /dev/null
+++ b/src/content/reference/en/p5/constants/EMPTY_PATH.mdx
@@ -0,0 +1,16 @@
+---
+title: EMPTY_PATH
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 779
+isConstructor: false
+itemtype: property
+example: []
+class: p5
+type: EMPTY_PATH
+---
+
+
+# EMPTY\_PATH
diff --git a/src/content/reference/en/p5/constants/ENTER.mdx b/src/content/reference/en/p5/constants/ENTER.mdx
index f0cbd4fe34..70d0071732 100644
--- a/src/content/reference/en/p5/constants/ENTER.mdx
+++ b/src/content/reference/en/p5/constants/ENTER.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 846
+line: 893
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: ENTER
---
diff --git a/src/content/reference/en/p5/constants/ERODE.mdx b/src/content/reference/en/p5/constants/ERODE.mdx
index 634a3daf3f..9a3e516fbf 100644
--- a/src/content/reference/en/p5/constants/ERODE.mdx
+++ b/src/content/reference/en/p5/constants/ERODE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1014
+line: 1091
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: ERODE
---
diff --git a/src/content/reference/en/p5/constants/ESCAPE.mdx b/src/content/reference/en/p5/constants/ESCAPE.mdx
index 0651423f84..17c8081d19 100644
--- a/src/content/reference/en/p5/constants/ESCAPE.mdx
+++ b/src/content/reference/en/p5/constants/ESCAPE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 851
+line: 900
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: ESCAPE
---
diff --git a/src/content/reference/en/p5/constants/EXCLUDE.mdx b/src/content/reference/en/p5/constants/EXCLUDE.mdx
new file mode 100644
index 0000000000..a33525ef07
--- /dev/null
+++ b/src/content/reference/en/p5/constants/EXCLUDE.mdx
@@ -0,0 +1,18 @@
+---
+title: EXCLUDE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >-
+ The <code>splineProperty('ends')</code> mode where the first and last points
+ in a spline
+
+ affect the direction of the curve, but are not rendered.
+line: 1347
+isConstructor: false
+itemtype: property
+class: p5
+---
+
+
+# EXCLUDE
diff --git a/src/content/reference/en/p5/constants/EXCLUSION.mdx b/src/content/reference/en/p5/constants/EXCLUSION.mdx
index 8d1180ee7a..c3ff8aea71 100644
--- a/src/content/reference/en/p5/constants/EXCLUSION.mdx
+++ b/src/content/reference/en/p5/constants/EXCLUSION.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 934
+line: 999
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: EXCLUSION
---
diff --git a/src/content/reference/en/p5/constants/FALLBACK.mdx b/src/content/reference/en/p5/constants/FALLBACK.mdx
index 56dd49c9ec..0a48c7afaf 100644
--- a/src/content/reference/en/p5/constants/FALLBACK.mdx
+++ b/src/content/reference/en/p5/constants/FALLBACK.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1182
+line: 1287
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: FALLBACK
---
diff --git a/src/content/reference/en/p5/constants/FILL.mdx b/src/content/reference/en/p5/constants/FILL.mdx
index b7b55e67ff..5fb2fcace3 100644
--- a/src/content/reference/en/p5/constants/FILL.mdx
+++ b/src/content/reference/en/p5/constants/FILL.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1090
+line: 1180
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: FILL
---
diff --git a/src/content/reference/en/p5/constants/FLAT.mdx b/src/content/reference/en/p5/constants/FLAT.mdx
index 731b69382d..42f34d545d 100644
--- a/src/content/reference/en/p5/constants/FLAT.mdx
+++ b/src/content/reference/en/p5/constants/FLAT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1138
+line: 1236
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: FLAT
---
diff --git a/src/content/reference/en/p5/constants/FLOAT.mdx b/src/content/reference/en/p5/constants/FLOAT.mdx
index b8a02df282..3f4e2f8411 100644
--- a/src/content/reference/en/p5/constants/FLOAT.mdx
+++ b/src/content/reference/en/p5/constants/FLOAT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1212
+line: 1322
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: FLOAT
---
diff --git a/src/content/reference/en/p5/constants/RGB.mdx b/src/content/reference/en/p5/constants/FULL.mdx
similarity index 77%
rename from src/content/reference/en/p5/constants/RGB.mdx
rename to src/content/reference/en/p5/constants/FULL.mdx
index a0897e412f..f61e0f0325 100644
--- a/src/content/reference/en/p5/constants/RGB.mdx
+++ b/src/content/reference/en/p5/constants/FULL.mdx
@@ -1,15 +1,15 @@
---
-title: RGB
+title: FULL
module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 789
+line: 76
isConstructor: false
itemtype: property
class: p5
-type: String
+type: string
---
-# RGB
+# FULL
diff --git a/src/content/reference/en/p5/constants/GRAY.mdx b/src/content/reference/en/p5/constants/GRAY.mdx
index c60cccc9b6..7599b67380 100644
--- a/src/content/reference/en/p5/constants/GRAY.mdx
+++ b/src/content/reference/en/p5/constants/GRAY.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 989
+line: 1061
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: GRAY
---
diff --git a/src/content/reference/en/p5/constants/GRID.mdx b/src/content/reference/en/p5/constants/GRID.mdx
index ba26a9a04a..7a867c9da5 100644
--- a/src/content/reference/en/p5/constants/GRID.mdx
+++ b/src/content/reference/en/p5/constants/GRID.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1165
+line: 1267
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: GRID
---
diff --git a/src/content/reference/en/p5/constants/HALF_FLOAT.mdx b/src/content/reference/en/p5/constants/HALF_FLOAT.mdx
index 78928436d0..3d863ee383 100644
--- a/src/content/reference/en/p5/constants/HALF_FLOAT.mdx
+++ b/src/content/reference/en/p5/constants/HALF_FLOAT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1218
+line: 1329
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: HALF_FLOAT
---
diff --git a/src/content/reference/en/p5/constants/HALF_PI.mdx b/src/content/reference/en/p5/constants/HALF_PI.mdx
index ed453bea45..20fe3b1b65 100644
--- a/src/content/reference/en/p5/constants/HALF_PI.mdx
+++ b/src/content/reference/en/p5/constants/HALF_PI.mdx
@@ -20,12 +20,11 @@ description: >
equals 180˚, <code>HALF_PI</code>
radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 88
+line: 199
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
@@ -99,7 +98,6 @@ example:
</code>
</div>
class: p5
-type: Number
---
diff --git a/src/content/reference/en/p5/constants/HAND.mdx b/src/content/reference/en/p5/constants/HAND.mdx
index a121599031..fede525002 100644
--- a/src/content/reference/en/p5/constants/HAND.mdx
+++ b/src/content/reference/en/p5/constants/HAND.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 65
+line: 89
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: HAND
---
diff --git a/src/content/reference/en/p5/constants/HARD_LIGHT.mdx b/src/content/reference/en/p5/constants/HARD_LIGHT.mdx
index 3710501168..600beecc67 100644
--- a/src/content/reference/en/p5/constants/HARD_LIGHT.mdx
+++ b/src/content/reference/en/p5/constants/HARD_LIGHT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 960
+line: 1029
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: HARD_LIGHT
---
diff --git a/src/content/reference/en/p5/constants/HSB.mdx b/src/content/reference/en/p5/constants/HSB.mdx
deleted file mode 100644
index 77bdaca87f..0000000000
--- a/src/content/reference/en/p5/constants/HSB.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-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: 794
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# HSB
diff --git a/src/content/reference/en/p5/constants/IMAGE.mdx b/src/content/reference/en/p5/constants/IMAGE.mdx
index f45690d772..6b92c3c9b8 100644
--- a/src/content/reference/en/p5/constants/IMAGE.mdx
+++ b/src/content/reference/en/p5/constants/IMAGE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1108
+line: 1201
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: IMAGE
---
diff --git a/src/content/reference/en/p5/constants/IMMEDIATE.mdx b/src/content/reference/en/p5/constants/IMMEDIATE.mdx
index 1c5aa611be..6b69ef9862 100644
--- a/src/content/reference/en/p5/constants/IMMEDIATE.mdx
+++ b/src/content/reference/en/p5/constants/IMMEDIATE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1100
+line: 1192
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: IMMEDIATE
---
diff --git a/src/content/reference/en/p5/constants/INCLUDE.mdx b/src/content/reference/en/p5/constants/INCLUDE.mdx
new file mode 100644
index 0000000000..7d6841fd51
--- /dev/null
+++ b/src/content/reference/en/p5/constants/INCLUDE.mdx
@@ -0,0 +1,16 @@
+---
+title: INCLUDE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: |-
+ The <code>splineProperty('ends')</code> mode where splines curve through
+ their first and last points.
+line: 1338
+isConstructor: false
+itemtype: property
+class: p5
+---
+
+
+# INCLUDE
diff --git a/src/content/reference/en/p5/constants/INVERT.mdx b/src/content/reference/en/p5/constants/INVERT.mdx
index 9e90a912b9..90c46ee536 100644
--- a/src/content/reference/en/p5/constants/INVERT.mdx
+++ b/src/content/reference/en/p5/constants/INVERT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 999
+line: 1073
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: INVERT
---
diff --git a/src/content/reference/en/p5/constants/ITALIC.mdx b/src/content/reference/en/p5/constants/ITALIC.mdx
index ae2c30b407..9b0d8110c8 100644
--- a/src/content/reference/en/p5/constants/ITALIC.mdx
+++ b/src/content/reference/en/p5/constants/ITALIC.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1031
+line: 1111
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: ITALIC
---
diff --git a/src/content/reference/en/p5/constants/LABEL.mdx b/src/content/reference/en/p5/constants/LABEL.mdx
index e9318f7506..958425b06c 100644
--- a/src/content/reference/en/p5/constants/LABEL.mdx
+++ b/src/content/reference/en/p5/constants/LABEL.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1177
+line: 1281
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: LABEL
---
diff --git a/src/content/reference/en/p5/constants/LANDSCAPE.mdx b/src/content/reference/en/p5/constants/LANDSCAPE.mdx
index 957015183a..e656cd272b 100644
--- a/src/content/reference/en/p5/constants/LANDSCAPE.mdx
+++ b/src/content/reference/en/p5/constants/LANDSCAPE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1150
+line: 1250
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: LANDSCAPE
---
diff --git a/src/content/reference/en/p5/constants/LEFT.mdx b/src/content/reference/en/p5/constants/LEFT.mdx
index f98d30c4d5..6166240054 100644
--- a/src/content/reference/en/p5/constants/LEFT.mdx
+++ b/src/content/reference/en/p5/constants/LEFT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 655
+line: 689
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: LEFT
---
diff --git a/src/content/reference/en/p5/constants/LEFT_ARROW.mdx b/src/content/reference/en/p5/constants/LEFT_ARROW.mdx
index e8fe2192d6..87d001ae15 100644
--- a/src/content/reference/en/p5/constants/LEFT_ARROW.mdx
+++ b/src/content/reference/en/p5/constants/LEFT_ARROW.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 856
+line: 907
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: LEFT_ARROW
---
diff --git a/src/content/reference/en/p5/constants/LIGHTEST.mdx b/src/content/reference/en/p5/constants/LIGHTEST.mdx
index a62153dc47..07d58d77b2 100644
--- a/src/content/reference/en/p5/constants/LIGHTEST.mdx
+++ b/src/content/reference/en/p5/constants/LIGHTEST.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 918
+line: 981
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: LIGHTEST
---
diff --git a/src/content/reference/en/p5/constants/LINEAR.mdx b/src/content/reference/en/p5/constants/LINEAR.mdx
index 8a8debd45e..6df67f5457 100644
--- a/src/content/reference/en/p5/constants/LINEAR.mdx
+++ b/src/content/reference/en/p5/constants/LINEAR.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1063
+line: 1148
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: LINEAR
---
diff --git a/src/content/reference/en/p5/constants/LINES.mdx b/src/content/reference/en/p5/constants/LINES.mdx
index 7d5855d342..ec57ded34f 100644
--- a/src/content/reference/en/p5/constants/LINES.mdx
+++ b/src/content/reference/en/p5/constants/LINES.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 687
+line: 725
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: LINES
---
diff --git a/src/content/reference/en/p5/constants/LINE_LOOP.mdx b/src/content/reference/en/p5/constants/LINE_LOOP.mdx
index 30f455df69..e5c73a373c 100644
--- a/src/content/reference/en/p5/constants/LINE_LOOP.mdx
+++ b/src/content/reference/en/p5/constants/LINE_LOOP.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 699
+line: 737
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: LINE_LOOP
---
diff --git a/src/content/reference/en/p5/constants/LINE_STRIP.mdx b/src/content/reference/en/p5/constants/LINE_STRIP.mdx
index d5fbcece9b..00c995a283 100644
--- a/src/content/reference/en/p5/constants/LINE_STRIP.mdx
+++ b/src/content/reference/en/p5/constants/LINE_STRIP.mdx
@@ -4,11 +4,11 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 693
+line: 731
isConstructor: false
itemtype: property
class: p5
-type: Number
+type: number
---
diff --git a/src/content/reference/en/p5/constants/MIRROR.mdx b/src/content/reference/en/p5/constants/MIRROR.mdx
index 2077acd834..dbeb7f0e48 100644
--- a/src/content/reference/en/p5/constants/MIRROR.mdx
+++ b/src/content/reference/en/p5/constants/MIRROR.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1131
+line: 1228
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: MIRROR
---
diff --git a/src/content/reference/en/p5/constants/MITER.mdx b/src/content/reference/en/p5/constants/MITER.mdx
index e2d9da35c9..34a69492e9 100644
--- a/src/content/reference/en/p5/constants/MITER.mdx
+++ b/src/content/reference/en/p5/constants/MITER.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 782
+line: 839
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: MITER
---
diff --git a/src/content/reference/en/p5/constants/MOVE.mdx b/src/content/reference/en/p5/constants/MOVE.mdx
index 3e9880acae..59bd9722f7 100644
--- a/src/content/reference/en/p5/constants/MOVE.mdx
+++ b/src/content/reference/en/p5/constants/MOVE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 70
+line: 95
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: MOVE
---
diff --git a/src/content/reference/en/p5/constants/MULTIPLY.mdx b/src/content/reference/en/p5/constants/MULTIPLY.mdx
index d4b8b1ce98..48c79d1137 100644
--- a/src/content/reference/en/p5/constants/MULTIPLY.mdx
+++ b/src/content/reference/en/p5/constants/MULTIPLY.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 939
+line: 1005
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: MULTIPLY
---
diff --git a/src/content/reference/en/p5/constants/NEAREST.mdx b/src/content/reference/en/p5/constants/NEAREST.mdx
index a8cfe5eadb..a8e2906a0f 100644
--- a/src/content/reference/en/p5/constants/NEAREST.mdx
+++ b/src/content/reference/en/p5/constants/NEAREST.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1116
+line: 1210
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: NEAREST
---
diff --git a/src/content/reference/en/p5/constants/NORMAL.mdx b/src/content/reference/en/p5/constants/NORMAL.mdx
index 116234df4f..f881bc40d5 100644
--- a/src/content/reference/en/p5/constants/NORMAL.mdx
+++ b/src/content/reference/en/p5/constants/NORMAL.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1026
+line: 1105
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: NORMAL
---
diff --git a/src/content/reference/en/p5/constants/OPAQUE.mdx b/src/content/reference/en/p5/constants/OPAQUE.mdx
index f3afc216f9..99df147cb4 100644
--- a/src/content/reference/en/p5/constants/OPAQUE.mdx
+++ b/src/content/reference/en/p5/constants/OPAQUE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 994
+line: 1067
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: OPAQUE
---
diff --git a/src/content/reference/en/p5/constants/OPEN.mdx b/src/content/reference/en/p5/constants/OPEN.mdx
index 135e570bad..21a6911dc6 100644
--- a/src/content/reference/en/p5/constants/OPEN.mdx
+++ b/src/content/reference/en/p5/constants/OPEN.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 745
+line: 797
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: OPEN
---
diff --git a/src/content/reference/en/p5/constants/OPTION.mdx b/src/content/reference/en/p5/constants/OPTION.mdx
index 17eb46f268..2f6a6620b7 100644
--- a/src/content/reference/en/p5/constants/OPTION.mdx
+++ b/src/content/reference/en/p5/constants/OPTION.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 861
+line: 914
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: OPTION
---
diff --git a/src/content/reference/en/p5/constants/OVERLAY.mdx b/src/content/reference/en/p5/constants/OVERLAY.mdx
index 999d6f2772..fbbf37948d 100644
--- a/src/content/reference/en/p5/constants/OVERLAY.mdx
+++ b/src/content/reference/en/p5/constants/OVERLAY.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 955
+line: 1023
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: OVERLAY
---
diff --git a/src/content/reference/en/p5/constants/P2D.mdx b/src/content/reference/en/p5/constants/P2D.mdx
index 317cc89f07..3562632e3c 100644
--- a/src/content/reference/en/p5/constants/P2D.mdx
+++ b/src/content/reference/en/p5/constants/P2D.mdx
@@ -3,13 +3,12 @@ title: P2D
module: Constants
submodule: Constants
file: src/core/constants.js
-description: |
- <p>The default, two-dimensional renderer.</p>
-line: 18
+description: 'The default, two-dimensional renderer.'
+line: 23
isConstructor: false
itemtype: property
class: p5
-type: String
+type: string
---
diff --git a/src/content/reference/en/p5/constants/RGBA.mdx b/src/content/reference/en/p5/constants/PATH.mdx
similarity index 73%
rename from src/content/reference/en/p5/constants/RGBA.mdx
rename to src/content/reference/en/p5/constants/PATH.mdx
index b7a6b6bae2..d09458c10a 100644
--- a/src/content/reference/en/p5/constants/RGBA.mdx
+++ b/src/content/reference/en/p5/constants/PATH.mdx
@@ -1,15 +1,16 @@
---
-title: RGBA
+title: PATH
module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1224
+line: 785
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: PATH
---
-# RGBA
+# PATH
diff --git a/src/content/reference/en/p5/constants/PI.mdx b/src/content/reference/en/p5/constants/PI.mdx
index ec403cc391..74670ab7e6 100644
--- a/src/content/reference/en/p5/constants/PI.mdx
+++ b/src/content/reference/en/p5/constants/PI.mdx
@@ -19,12 +19,11 @@ description: >
equals 180˚, <code>HALF_PI</code>
radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 178
+line: 288
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
@@ -98,7 +97,6 @@ example:
</code>
</div>
class: p5
-type: Number
---
diff --git a/src/content/reference/en/p5/constants/PIE.mdx b/src/content/reference/en/p5/constants/PIE.mdx
index ec12fe0c1b..20fe195753 100644
--- a/src/content/reference/en/p5/constants/PIE.mdx
+++ b/src/content/reference/en/p5/constants/PIE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 755
+line: 809
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: PIE
---
diff --git a/src/content/reference/en/p5/constants/POINTS.mdx b/src/content/reference/en/p5/constants/POINTS.mdx
index c972f38a7b..cfa4ce050d 100644
--- a/src/content/reference/en/p5/constants/POINTS.mdx
+++ b/src/content/reference/en/p5/constants/POINTS.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 681
+line: 719
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: POINTS
---
diff --git a/src/content/reference/en/p5/constants/PORTRAIT.mdx b/src/content/reference/en/p5/constants/PORTRAIT.mdx
index f0a92f0632..9f474a11cb 100644
--- a/src/content/reference/en/p5/constants/PORTRAIT.mdx
+++ b/src/content/reference/en/p5/constants/PORTRAIT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1155
+line: 1256
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: PORTRAIT
---
diff --git a/src/content/reference/en/p5/constants/POSTERIZE.mdx b/src/content/reference/en/p5/constants/POSTERIZE.mdx
index 8496c73072..978c7eabe7 100644
--- a/src/content/reference/en/p5/constants/POSTERIZE.mdx
+++ b/src/content/reference/en/p5/constants/POSTERIZE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1004
+line: 1079
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: POSTERIZE
---
diff --git a/src/content/reference/en/p5/constants/PROJECT.mdx b/src/content/reference/en/p5/constants/PROJECT.mdx
index c8cb9d1ac9..4e32da7095 100644
--- a/src/content/reference/en/p5/constants/PROJECT.mdx
+++ b/src/content/reference/en/p5/constants/PROJECT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 760
+line: 815
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: PROJECT
---
diff --git a/src/content/reference/en/p5/constants/QUADRATIC.mdx b/src/content/reference/en/p5/constants/QUADRATIC.mdx
index 5b5c681cde..f3649fe1d5 100644
--- a/src/content/reference/en/p5/constants/QUADRATIC.mdx
+++ b/src/content/reference/en/p5/constants/QUADRATIC.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1068
+line: 1154
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: QUADRATIC
---
diff --git a/src/content/reference/en/p5/constants/QUADS.mdx b/src/content/reference/en/p5/constants/QUADS.mdx
index 373136fb0e..79fcee32ad 100644
--- a/src/content/reference/en/p5/constants/QUADS.mdx
+++ b/src/content/reference/en/p5/constants/QUADS.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 723
+line: 761
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: QUADS
---
diff --git a/src/content/reference/en/p5/constants/QUAD_STRIP.mdx b/src/content/reference/en/p5/constants/QUAD_STRIP.mdx
index 3a8e9a2c9e..5d7d9d61f1 100644
--- a/src/content/reference/en/p5/constants/QUAD_STRIP.mdx
+++ b/src/content/reference/en/p5/constants/QUAD_STRIP.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 728
+line: 767
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: QUAD_STRIP
---
diff --git a/src/content/reference/en/p5/constants/QUARTER_PI.mdx b/src/content/reference/en/p5/constants/QUARTER_PI.mdx
index f2ead3884f..88da21dfea 100644
--- a/src/content/reference/en/p5/constants/QUARTER_PI.mdx
+++ b/src/content/reference/en/p5/constants/QUARTER_PI.mdx
@@ -20,12 +20,11 @@ description: >
equals 180˚, <code>HALF_PI</code>
radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 267
+line: 378
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
@@ -99,7 +98,6 @@ example:
</code>
</div>
class: p5
-type: Number
---
diff --git a/src/content/reference/en/p5/constants/RADIUS.mdx b/src/content/reference/en/p5/constants/RADIUS.mdx
index 047aaae889..fe2cf1de2f 100644
--- a/src/content/reference/en/p5/constants/RADIUS.mdx
+++ b/src/content/reference/en/p5/constants/RADIUS.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 645
+line: 677
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: RADIUS
---
diff --git a/src/content/reference/en/p5/constants/REMOVE.mdx b/src/content/reference/en/p5/constants/REMOVE.mdx
index a42d93ca33..ea566fb8d4 100644
--- a/src/content/reference/en/p5/constants/REMOVE.mdx
+++ b/src/content/reference/en/p5/constants/REMOVE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 899
+line: 963
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: REMOVE
---
diff --git a/src/content/reference/en/p5/constants/REPEAT.mdx b/src/content/reference/en/p5/constants/REPEAT.mdx
index 3837236e10..d5122b7aa0 100644
--- a/src/content/reference/en/p5/constants/REPEAT.mdx
+++ b/src/content/reference/en/p5/constants/REPEAT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1121
+line: 1216
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: REPEAT
---
diff --git a/src/content/reference/en/p5/constants/REPLACE.mdx b/src/content/reference/en/p5/constants/REPLACE.mdx
index 872757da13..e865012c36 100644
--- a/src/content/reference/en/p5/constants/REPLACE.mdx
+++ b/src/content/reference/en/p5/constants/REPLACE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 949
+line: 1017
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: REPLACE
---
diff --git a/src/content/reference/en/p5/constants/RETURN.mdx b/src/content/reference/en/p5/constants/RETURN.mdx
index 49403fae56..c2177138f0 100644
--- a/src/content/reference/en/p5/constants/RETURN.mdx
+++ b/src/content/reference/en/p5/constants/RETURN.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 866
+line: 921
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: RETURN
---
diff --git a/src/content/reference/en/p5/constants/RIGHT.mdx b/src/content/reference/en/p5/constants/RIGHT.mdx
index aec0d43de2..e80b724112 100644
--- a/src/content/reference/en/p5/constants/RIGHT.mdx
+++ b/src/content/reference/en/p5/constants/RIGHT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 650
+line: 683
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: RIGHT
---
diff --git a/src/content/reference/en/p5/constants/RIGHT_ARROW.mdx b/src/content/reference/en/p5/constants/RIGHT_ARROW.mdx
index ef8e5c931a..27dbd584d5 100644
--- a/src/content/reference/en/p5/constants/RIGHT_ARROW.mdx
+++ b/src/content/reference/en/p5/constants/RIGHT_ARROW.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 871
+line: 928
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: RIGHT_ARROW
---
diff --git a/src/content/reference/en/p5/constants/ROUND.mdx b/src/content/reference/en/p5/constants/ROUND.mdx
index a00ec5e772..e61a111591 100644
--- a/src/content/reference/en/p5/constants/ROUND.mdx
+++ b/src/content/reference/en/p5/constants/ROUND.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 772
+line: 827
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: ROUND
---
diff --git a/src/content/reference/en/p5/constants/SCREEN.mdx b/src/content/reference/en/p5/constants/SCREEN.mdx
index 90dab63276..dbe38fcc80 100644
--- a/src/content/reference/en/p5/constants/SCREEN.mdx
+++ b/src/content/reference/en/p5/constants/SCREEN.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 944
+line: 1011
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: SCREEN
---
diff --git a/src/content/reference/en/p5/constants/SHIFT.mdx b/src/content/reference/en/p5/constants/SHIFT.mdx
index 7f6f1fe0f8..b41f1cd9c2 100644
--- a/src/content/reference/en/p5/constants/SHIFT.mdx
+++ b/src/content/reference/en/p5/constants/SHIFT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 876
+line: 935
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: SHIFT
---
diff --git a/src/content/reference/en/p5/constants/HSL.mdx b/src/content/reference/en/p5/constants/SIMPLE.mdx
similarity index 76%
rename from src/content/reference/en/p5/constants/HSL.mdx
rename to src/content/reference/en/p5/constants/SIMPLE.mdx
index 0f7392143d..cee9e52455 100644
--- a/src/content/reference/en/p5/constants/HSL.mdx
+++ b/src/content/reference/en/p5/constants/SIMPLE.mdx
@@ -1,15 +1,15 @@
---
-title: HSL
+title: SIMPLE
module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 803
+line: 71
isConstructor: false
itemtype: property
class: p5
-type: String
+type: string
---
-# HSL
+# SIMPLE
diff --git a/src/content/reference/en/p5/constants/SMOOTH.mdx b/src/content/reference/en/p5/constants/SMOOTH.mdx
index 79747bcfd2..48a234a586 100644
--- a/src/content/reference/en/p5/constants/SMOOTH.mdx
+++ b/src/content/reference/en/p5/constants/SMOOTH.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1143
+line: 1242
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: SMOOTH
---
diff --git a/src/content/reference/en/p5/constants/SOFT_LIGHT.mdx b/src/content/reference/en/p5/constants/SOFT_LIGHT.mdx
index 3d6ba329d9..80401d0f5b 100644
--- a/src/content/reference/en/p5/constants/SOFT_LIGHT.mdx
+++ b/src/content/reference/en/p5/constants/SOFT_LIGHT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 965
+line: 1035
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: SOFT_LIGHT
---
diff --git a/src/content/reference/en/p5/constants/SQUARE.mdx b/src/content/reference/en/p5/constants/SQUARE.mdx
index a77e648b2e..d0760fab63 100644
--- a/src/content/reference/en/p5/constants/SQUARE.mdx
+++ b/src/content/reference/en/p5/constants/SQUARE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 766
+line: 821
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: SQUERE
---
diff --git a/src/content/reference/en/p5/constants/STROKE.mdx b/src/content/reference/en/p5/constants/STROKE.mdx
index ae2c35b45c..f8ad2178e8 100644
--- a/src/content/reference/en/p5/constants/STROKE.mdx
+++ b/src/content/reference/en/p5/constants/STROKE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1085
+line: 1174
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: STROKE
---
diff --git a/src/content/reference/en/p5/constants/SUBTRACT.mdx b/src/content/reference/en/p5/constants/SUBTRACT.mdx
index 452bbe2a1b..aedea931b2 100644
--- a/src/content/reference/en/p5/constants/SUBTRACT.mdx
+++ b/src/content/reference/en/p5/constants/SUBTRACT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 929
+line: 993
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: SUBTRACT
---
diff --git a/src/content/reference/en/p5/constants/TAB.mdx b/src/content/reference/en/p5/constants/TAB.mdx
index 5feec3d3d6..81611b1fe8 100644
--- a/src/content/reference/en/p5/constants/TAB.mdx
+++ b/src/content/reference/en/p5/constants/TAB.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 881
+line: 942
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: TAB
---
diff --git a/src/content/reference/en/p5/constants/TAU.mdx b/src/content/reference/en/p5/constants/TAU.mdx
index e82d45abf0..c303164a53 100644
--- a/src/content/reference/en/p5/constants/TAU.mdx
+++ b/src/content/reference/en/p5/constants/TAU.mdx
@@ -20,12 +20,11 @@ description: >
180˚, <code>HALF_PI</code>
radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 357
+line: 473
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
@@ -104,7 +103,6 @@ example:
</code>
</div>
class: p5
-type: Number
---
diff --git a/src/content/reference/en/p5/constants/TESS.mdx b/src/content/reference/en/p5/constants/TESS.mdx
index 0ceafc8ad3..eeae65c854 100644
--- a/src/content/reference/en/p5/constants/TESS.mdx
+++ b/src/content/reference/en/p5/constants/TESS.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 734
+line: 773
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: TESS
---
diff --git a/src/content/reference/en/p5/constants/TEXT.mdx b/src/content/reference/en/p5/constants/TEXT.mdx
index ef43458f95..6fdd125edc 100644
--- a/src/content/reference/en/p5/constants/TEXT.mdx
+++ b/src/content/reference/en/p5/constants/TEXT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 75
+line: 101
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: TEXT
---
diff --git a/src/content/reference/en/p5/constants/TEXTURE.mdx b/src/content/reference/en/p5/constants/TEXTURE.mdx
index adbad912aa..00457dbdba 100644
--- a/src/content/reference/en/p5/constants/TEXTURE.mdx
+++ b/src/content/reference/en/p5/constants/TEXTURE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1095
+line: 1186
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: TEXTURE
---
diff --git a/src/content/reference/en/p5/constants/THRESHOLD.mdx b/src/content/reference/en/p5/constants/THRESHOLD.mdx
index 230e39b064..7789b31de0 100644
--- a/src/content/reference/en/p5/constants/THRESHOLD.mdx
+++ b/src/content/reference/en/p5/constants/THRESHOLD.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 984
+line: 1055
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: THRESHOLD
---
diff --git a/src/content/reference/en/p5/constants/TOP.mdx b/src/content/reference/en/p5/constants/TOP.mdx
index 28383719e9..f62219f1fd 100644
--- a/src/content/reference/en/p5/constants/TOP.mdx
+++ b/src/content/reference/en/p5/constants/TOP.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 665
+line: 701
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: TOP
---
diff --git a/src/content/reference/en/p5/constants/TRIANGLES.mdx b/src/content/reference/en/p5/constants/TRIANGLES.mdx
index b17df78d93..ae9935b2fe 100644
--- a/src/content/reference/en/p5/constants/TRIANGLES.mdx
+++ b/src/content/reference/en/p5/constants/TRIANGLES.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 705
+line: 743
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: TRIANGLES
---
diff --git a/src/content/reference/en/p5/constants/TRIANGLE_FAN.mdx b/src/content/reference/en/p5/constants/TRIANGLE_FAN.mdx
index 5af8883243..03a7aa81f6 100644
--- a/src/content/reference/en/p5/constants/TRIANGLE_FAN.mdx
+++ b/src/content/reference/en/p5/constants/TRIANGLE_FAN.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 711
+line: 749
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: TRIANGLE_FAN
---
diff --git a/src/content/reference/en/p5/constants/TRIANGLE_STRIP.mdx b/src/content/reference/en/p5/constants/TRIANGLE_STRIP.mdx
index 1539a9739b..76fc64b7c0 100644
--- a/src/content/reference/en/p5/constants/TRIANGLE_STRIP.mdx
+++ b/src/content/reference/en/p5/constants/TRIANGLE_STRIP.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 717
+line: 755
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: TRIANGLE_STRIP
---
diff --git a/src/content/reference/en/p5/constants/TWO_PI.mdx b/src/content/reference/en/p5/constants/TWO_PI.mdx
index a6981e3fe0..f313102c4b 100644
--- a/src/content/reference/en/p5/constants/TWO_PI.mdx
+++ b/src/content/reference/en/p5/constants/TWO_PI.mdx
@@ -20,12 +20,11 @@ description: >
equals 180˚, <code>HALF_PI</code>
radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 452
+line: 568
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
@@ -104,7 +103,6 @@ example:
</code>
</div>
class: p5
-type: Number
---
diff --git a/src/content/reference/en/p5/constants/UNSIGNED_BYTE.mdx b/src/content/reference/en/p5/constants/UNSIGNED_BYTE.mdx
index e7dcaeb69b..2da793f309 100644
--- a/src/content/reference/en/p5/constants/UNSIGNED_BYTE.mdx
+++ b/src/content/reference/en/p5/constants/UNSIGNED_BYTE.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1200
+line: 1308
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: UNSIGNED_BYTE
---
diff --git a/src/content/reference/en/p5/constants/UNSIGNED_INT.mdx b/src/content/reference/en/p5/constants/UNSIGNED_INT.mdx
index d5d1283078..4a69d7ce06 100644
--- a/src/content/reference/en/p5/constants/UNSIGNED_INT.mdx
+++ b/src/content/reference/en/p5/constants/UNSIGNED_INT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1206
+line: 1315
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: UNSIGNED_INT
---
diff --git a/src/content/reference/en/p5/constants/UP_ARROW.mdx b/src/content/reference/en/p5/constants/UP_ARROW.mdx
index 3ca222a2e6..b19ab4f961 100644
--- a/src/content/reference/en/p5/constants/UP_ARROW.mdx
+++ b/src/content/reference/en/p5/constants/UP_ARROW.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 886
+line: 949
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Number
+type: UP_ARROW
---
diff --git a/src/content/reference/en/p5/constants/VERSION.mdx b/src/content/reference/en/p5/constants/VERSION.mdx
index 76049b8678..ae8ee56307 100644
--- a/src/content/reference/en/p5/constants/VERSION.mdx
+++ b/src/content/reference/en/p5/constants/VERSION.mdx
@@ -3,13 +3,12 @@ title: VERSION
module: Constants
submodule: Constants
file: src/core/constants.js
-description: |
- <p>Version of this p5.js.</p>
-line: 9
+description: Version of this p5.js.
+line: 14
isConstructor: false
itemtype: property
class: p5
-type: String
+type: string
---
diff --git a/src/content/reference/en/p5/constants/WAIT.mdx b/src/content/reference/en/p5/constants/WAIT.mdx
index 4bb546dbcc..984a3bdf14 100644
--- a/src/content/reference/en/p5/constants/WAIT.mdx
+++ b/src/content/reference/en/p5/constants/WAIT.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 80
+line: 107
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: WAIT
---
diff --git a/src/content/reference/en/p5/constants/WEBGL.mdx b/src/content/reference/en/p5/constants/WEBGL.mdx
index fa29351fbc..a549f9b705 100644
--- a/src/content/reference/en/p5/constants/WEBGL.mdx
+++ b/src/content/reference/en/p5/constants/WEBGL.mdx
@@ -11,77 +11,60 @@ description: >
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
+ <ul><li>Coordinate System - 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/tutorials/coordinates-and-transformations/">the
- tutorial 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
+ tutorial page about coordinates and transformations</a>.</li><li>3D Shapes -
+ <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="https://p5js.org/reference/#3D%20Primitives/">more</a>. See <a
href="https://p5js.org/tutorials/custom-geometry/">the tutorial 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
+ custom geometry</a> to make more complex objects.</li><li>Shape Detail - 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
+ wiki section about shapes</a> for a more information and an
+ example.</li><li>Textures - 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
+ with textures.</li><li>Materials and Lighting - <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/tutorials/lights-camera-materials/">the tutorial 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
+ for styling and appearance</a> to experiment with different
+ combinations.</li><li>Camera - The viewport of a <code>WEBGL</code> sketch can
be adjusted by changing camera attributes. See <a
href="https://p5js.org/tutorials/lights-camera-materials#camera-and-view">the
tutorial page section about cameras</a> for an explanation of camera
- controls.</li>
-
- <li><strong>Text</strong> - <code>WEBGL</code> requires opentype/truetype font
+ controls.</li><li>Text - <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
+ wiki section about text</a> for details, along with a
+ workaround.</li><li>Shaders - Shaders are hardware accelerated programs that
can be used for a variety of effects and graphics. See the <a
href="https://p5js.org/tutorials/intro-to-shaders/">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/tutorials/#webgl">all the interactive WEBGL
- tutorials</a> in the "Tutorials" section of this website, or read the wiki
- article <a
+ shaders</a> to get started with shaders in p5.js.</li><li>Graphics
+ Acceleration - <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/tutorials/#webgl">all the
+ interactive WEBGL tutorials</a> in the "Tutorials" 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
+line: 48
isConstructor: false
itemtype: property
class: p5
-type: String
+type: string
---
diff --git a/src/content/reference/en/p5/constants/WEBGL2.mdx b/src/content/reference/en/p5/constants/WEBGL2.mdx
index 935dd7ad51..dcc0b0ccb9 100644
--- a/src/content/reference/en/p5/constants/WEBGL2.mdx
+++ b/src/content/reference/en/p5/constants/WEBGL2.mdx
@@ -3,15 +3,15 @@ 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),
+description: |-
+ 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
+ has.
+line: 57
isConstructor: false
itemtype: property
class: p5
-type: String
+type: string
---
diff --git a/src/content/reference/en/p5/constants/WORD.mdx b/src/content/reference/en/p5/constants/WORD.mdx
index 234de17a17..5f9253926c 100644
--- a/src/content/reference/en/p5/constants/WORD.mdx
+++ b/src/content/reference/en/p5/constants/WORD.mdx
@@ -4,11 +4,12 @@ module: Constants
submodule: Constants
file: src/core/constants.js
description: ''
-line: 1051
+line: 1135
isConstructor: false
itemtype: property
+example: []
class: p5
-type: String
+type: WORD
---
diff --git a/src/content/reference/en/p5/constrain.mdx b/src/content/reference/en/p5/constrain.mdx
index 5cd3464a58..bcd9c75b00 100644
--- a/src/content/reference/en/p5/constrain.mdx
+++ b/src/content/reference/en/p5/constrain.mdx
@@ -3,14 +3,12 @@ title: constrain
module: Math
submodule: Calculation
file: src/math/calculation.js
-description: |
- <p>Constrains a number between a minimum and maximum value.</p>
-line: 91
+description: Constrains a number between a minimum and maximum value.
+line: 149
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -60,22 +58,23 @@ example:
</code>
</div>
class: p5
-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
return:
description: constrained number.
type: Number
+overloads:
+ - params:
+ - name: 'n'
+ description: number to constrain.
+ type: Number
+ - name: low
+ description: minimum limit.
+ type: Number
+ - name: high
+ description: maximum limit.
+ type: Number
+ return:
+ description: constrained number.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/copy.mdx b/src/content/reference/en/p5/copy.mdx
index 76146bba8e..270b8ff496 100644
--- a/src/content/reference/en/p5/copy.mdx
+++ b/src/content/reference/en/p5/copy.mdx
@@ -35,22 +35,19 @@ description: >
region. <code>dw</code> and <code>dh</code> are the region's width and
height.</p>
-line: 288
+line: 346
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Use the mountains as the background.
@@ -70,69 +67,50 @@ example:
</div>
class: p5
overloads:
- - line: 288
- params:
+ - params:
- name: srcImage
- description: |
- <p>source image.</p>
+ description: source image.
type: p5.Image|p5.Element
- name: sx
- description: |
- <p>x-coordinate of the source's upper-left corner.</p>
+ description: x-coordinate of the source's upper-left corner.
type: Integer
- name: sy
- description: |
- <p>y-coordinate of the source's upper-left corner.</p>
+ description: y-coordinate of the source's upper-left corner.
type: Integer
- name: sw
- description: |
- <p>source image width.</p>
+ description: source image width.
type: Integer
- name: sh
- description: |
- <p>source image height.</p>
+ description: source image height.
type: Integer
- name: dx
- description: |
- <p>x-coordinate of the destination's upper-left corner.</p>
+ description: x-coordinate of the destination's upper-left corner.
type: Integer
- name: dy
- description: |
- <p>y-coordinate of the destination's upper-left corner.</p>
+ description: y-coordinate of the destination's upper-left corner.
type: Integer
- name: dw
- description: |
- <p>destination image width.</p>
+ description: destination image width.
type: Integer
- name: dh
- description: |
- <p>destination image height.</p>
+ description: destination image height.
type: Integer
- - line: 345
- params:
+ - params:
- name: sx
- description: ''
type: Integer
- name: sy
- description: ''
type: Integer
- name: sw
- description: ''
type: Integer
- name: sh
- description: ''
type: Integer
- name: dx
- description: ''
type: Integer
- name: dy
- description: ''
type: Integer
- name: dw
- description: ''
type: Integer
- name: dh
- description: ''
type: Integer
chainable: false
---
diff --git a/src/content/reference/en/p5/cos.mdx b/src/content/reference/en/p5/cos.mdx
index ec17d10470..66527fb8b5 100644
--- a/src/content/reference/en/p5/cos.mdx
+++ b/src/content/reference/en/p5/cos.mdx
@@ -12,16 +12,15 @@ description: >
returned oscillate between -1 and 1 as the input angle increases.
<code>cos()</code>
- calculates the cosine of an angle, using radians by default, or according to
+ calculates the cosine of an angle, using radians by default, or according
- if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+ to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
DEGREES).</p>
-line: 281
+line: 361
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -86,17 +85,20 @@ example:
</code>
</div>
class: p5
-params:
- - name: angle
- description: >
- <p>the angle, in radians by default, or according to
-
- if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
- DEGREES).</p>
- type: Number
return:
description: cosine of the angle.
type: Number
+overloads:
+ - params:
+ - name: angle
+ description: >-
+ the angle, in radians by default, or according to if <a
+ href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+ DEGREES).
+ type: Number
+ return:
+ description: cosine of the angle.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/createA.mdx b/src/content/reference/en/p5/createA.mdx
index f9809d38e7..ea7a4c1a35 100644
--- a/src/content/reference/en/p5/createA.mdx
+++ b/src/content/reference/en/p5/createA.mdx
@@ -28,12 +28,11 @@ description: >
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target"
target="_blank">other options</a>.</p>
-line: 724
+line: 691
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -65,24 +64,28 @@ example:
</code>
</div>
class: p5
-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
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
+overloads:
+ - params:
+ - name: href
+ description: URL of linked page.
+ type: String
+ - name: html
+ description: inner HTML of link element to display.
+ type: String
+ - name: target
+ description: >-
+ target where the new link should open,
+
+ either <code>'_blank'</code>, <code>'_self'</code>,
+ <code>'_parent'</code>, or <code>'_top'</code>.
+ optional: 1
+ type: String
+ return:
+ description: new <a href="#/p5.Element">p5.Element</a> object.
+ type: p5.Element
chainable: false
---
diff --git a/src/content/reference/en/p5/createAudio.mdx b/src/content/reference/en/p5/createAudio.mdx
index 29d84504d2..0c9ade9654 100644
--- a/src/content/reference/en/p5/createAudio.mdx
+++ b/src/content/reference/en/p5/createAudio.mdx
@@ -2,46 +2,13 @@
title: createAudio
module: DOM
submodule: DOM
-file: src/dom/dom.js
-description: >
- <p>Creates a hidden <code><audio></code> element for simple audio
- playback.</p>
-
- <p><code>createAudio()</code> returns a new
-
- <a href="/reference/p5/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: 2213
+file: src/dom/p5.MediaElement.js
+description: AUDIO STUFF *
+line: 1505
isConstructor: false
itemtype: method
example:
- |-
-
<div class='notest'>
<code>
function setup() {
@@ -58,21 +25,25 @@ example:
</code>
</div>
class: p5
-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
return:
description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
type: p5.MediaElement
+overloads:
+ - params: []
+ - params:
+ - name: src
+ description: |-
+ path to an audio file, or an array of paths
+ for supporting different browsers.
+ optional: 1
+ type: 'String|String[]'
+ - name: callback
+ description: function to call once the audio is ready to play.
+ optional: 1
+ type: Function
+ return:
+ description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
+ type: p5.MediaElement
chainable: false
---
diff --git a/src/content/reference/en/p5/createButton.mdx b/src/content/reference/en/p5/createButton.mdx
index cd1caead46..fd96d8299c 100644
--- a/src/content/reference/en/p5/createButton.mdx
+++ b/src/content/reference/en/p5/createButton.mdx
@@ -21,12 +21,11 @@ description: >
target="_blank">MDN</a>
for more details.</p>
-line: 924
+line: 912
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -86,19 +85,21 @@ example:
</code>
</div>
class: p5
-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
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
+overloads:
+ - params:
+ - name: label
+ description: label displayed on the button.
+ type: String
+ - name: value
+ description: value of the button.
+ optional: 1
+ type: String
+ return:
+ description: new <a href="#/p5.Element">p5.Element</a> object.
+ type: p5.Element
chainable: false
---
diff --git a/src/content/reference/en/p5/createCamera.mdx b/src/content/reference/en/p5/createCamera.mdx
index 8822942b7b..9cf830665f 100644
--- a/src/content/reference/en/p5/createCamera.mdx
+++ b/src/content/reference/en/p5/createCamera.mdx
@@ -32,12 +32,11 @@ description: >
scene.</p>
<p>Note: <code>createCamera()</code> can only be used in WebGL mode.</p>
-line: 638
+line: 3765
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to toggle between cameras.
@@ -89,6 +88,11 @@ class: p5
return:
description: the new camera.
type: p5.Camera
+overloads:
+ - params: []
+ return:
+ description: the new camera.
+ type: p5.Camera
chainable: false
---
diff --git a/src/content/reference/en/p5/createCanvas.mdx b/src/content/reference/en/p5/createCanvas.mdx
index f5e66579d6..57c38221f7 100644
--- a/src/content/reference/en/p5/createCanvas.mdx
+++ b/src/content/reference/en/p5/createCanvas.mdx
@@ -63,18 +63,17 @@ description: >
system variable to check what version is being used, or call
<code>setAttributes({ version: 1 })</code> to create a WebGL1 context.</p>
-line: 15
+line: 126
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Draw a diagonal line.
line(0, 0, width, height);
@@ -89,7 +88,7 @@ example:
function setup() {
createCanvas(100, 50);
- background(180);
+ background(200);
// Draw a diagonal line.
line(0, 0, width, height);
@@ -106,7 +105,7 @@ example:
function setup() {
createCanvas(100, 100, WEBGL);
- background(180);
+ background(200);
// Draw a diagonal line.
line(-width / 2, -height / 2, width / 2, height / 2);
@@ -125,7 +124,7 @@ example:
// Position the canvas.
cnv.position(10, 20);
- background(180);
+ background(200);
// Draw a diagonal line.
line(0, 0, width, height);
@@ -136,48 +135,39 @@ example:
</div>
class: p5
return:
- description: new `p5.Renderer` that holds the canvas.
+ description: new <code>p5.Renderer</code> that holds the canvas.
type: p5.Renderer
overloads:
- - line: 15
- params:
+ - params:
- name: width
- description: |
- <p>width of the canvas. Defaults to 100.</p>
+ description: width of the canvas. Defaults to 100.
+ optional: 1
type: Number
- optional: true
- name: height
- description: |
- <p>height of the canvas. Defaults to 100.</p>
+ description: height of the canvas. Defaults to 100.
+ optional: 1
type: Number
- optional: true
- name: renderer
- description: |
- <p>either P2D or WEBGL. Defaults to <code>P2D</code>.</p>
- type: Constant
- optional: true
+ description: either P2D or WEBGL. Defaults to <code>P2D</code>.
+ optional: 1
+ type: P2D|WEBGL|P2DHDR
- name: canvas
- description: |
- <p>existing canvas element that should be used for the sketch.</p>
+ description: existing canvas element that should be used for the sketch.
+ optional: 1
type: HTMLCanvasElement
- optional: true
return:
- description: new `p5.Renderer` that holds the canvas.
+ description: new <code>p5.Renderer</code> that holds the canvas.
type: p5.Renderer
- - line: 119
- params:
+ - params:
- name: width
- description: ''
+ optional: 1
type: Number
- optional: true
- name: height
- description: ''
+ optional: 1
type: Number
- optional: true
- name: canvas
- description: ''
+ optional: 1
type: HTMLCanvasElement
- optional: true
return:
description: ''
type: p5.Renderer
diff --git a/src/content/reference/en/p5/createCapture.mdx b/src/content/reference/en/p5/createCapture.mdx
index ec1049ffe1..fa44f1e183 100644
--- a/src/content/reference/en/p5/createCapture.mdx
+++ b/src/content/reference/en/p5/createCapture.mdx
@@ -2,7 +2,7 @@
title: createCapture
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: >
<p>Creates a <code><video></code> element that "captures" the audio/video
stream from
@@ -71,12 +71,11 @@ description: >
and <a
href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia/"
target="_blank">here</a>.</p>
-line: 2295
+line: 1665
isConstructor: false
itemtype: method
example:
- |-
-
<div class='notest'>
<code>
function setup() {
@@ -155,30 +154,35 @@ example:
</code>
</div>
class: p5
-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: flipped
- description: >
- <p>flip the capturing video and mirror the output with
- <code>{flipped:true}</code>. By
- default it is false.</p>
- type: Object
- optional: true
- - name: callback
- description: |
- <p>function to call once the stream
- has loaded.</p>
- type: Function
- optional: true
return:
description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
type: p5.MediaElement
+overloads:
+ - params:
+ - name: type
+ description: |-
+ type of capture, either AUDIO or VIDEO,
+ or a constraints object. Both video and audio
+ audio streams are captured by default.
+ optional: 1
+ type: AUDIO|VIDEO|Object
+ - name: flipped
+ description: >-
+ flip the capturing video and mirror the output with
+ <code>{flipped:true}</code>. By
+
+ default it is false.
+ optional: 1
+ type: Object
+ - name: callback
+ description: |-
+ function to call once the stream
+ has loaded.
+ optional: 1
+ type: Function
+ return:
+ description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
+ type: p5.MediaElement
chainable: false
---
diff --git a/src/content/reference/en/p5/createCheckbox.mdx b/src/content/reference/en/p5/createCheckbox.mdx
index 98b3700c39..497537b341 100644
--- a/src/content/reference/en/p5/createCheckbox.mdx
+++ b/src/content/reference/en/p5/createCheckbox.mdx
@@ -23,12 +23,11 @@ description: >
that sets the
checkbox's value.</p>
-line: 1008
+line: 1016
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let checkbox;
@@ -106,21 +105,24 @@ example:
</code>
</div>
class: p5
-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
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
+overloads:
+ - params:
+ - name: label
+ description: label displayed after the checkbox.
+ optional: 1
+ type: String
+ - name: value
+ description: >-
+ value of the checkbox. Checked is <code>true</code> and unchecked is
+ <code>false</code>.
+ optional: 1
+ type: Boolean
+ return:
+ description: new <a href="#/p5.Element">p5.Element</a> object.
+ type: p5.Element
chainable: false
---
diff --git a/src/content/reference/en/p5/createColorPicker.mdx b/src/content/reference/en/p5/createColorPicker.mdx
index 5cfb4b4fd2..7d7b27b5af 100644
--- a/src/content/reference/en/p5/createColorPicker.mdx
+++ b/src/content/reference/en/p5/createColorPicker.mdx
@@ -3,7 +3,7 @@ title: createColorPicker
module: DOM
submodule: DOM
file: src/dom/dom.js
-description: >
+description: >-
<p>Creates a color picker element.</p>
<p>The parameter, <code>value</code>, is optional. If a color string or
@@ -18,21 +18,16 @@ description: >
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="/reference/p5/p5.Color">p5.Color</a> object.</li>
-
- </ul>
-line: 1759
+ <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="/reference/p5/p5.Color">p5.Color</a>
+ object.</li></ul>
+line: 1732
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myPicker;
@@ -80,17 +75,21 @@ example:
</code>
</div>
class: p5
-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
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
+overloads:
+ - params:
+ - name: value
+ description: >-
+ default color as a <a
+ href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"
+ target="_blank">CSS color string</a>.
+ optional: 1
+ type: String|p5.Color
+ return:
+ description: new <a href="#/p5.Element">p5.Element</a> object.
+ type: p5.Element
chainable: false
---
diff --git a/src/content/reference/en/p5/createConvolver.mdx b/src/content/reference/en/p5/createConvolver.mdx
deleted file mode 100644
index d851c7dd39..0000000000
--- a/src/content/reference/en/p5/createConvolver.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5
-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
-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
index 1f6123d6b2..61894a56ed 100644
--- a/src/content/reference/en/p5/createDiv.mdx
+++ b/src/content/reference/en/p5/createDiv.mdx
@@ -14,12 +14,11 @@ description: >
the
inner HTML of the new <code><div></div></code>.</p>
-line: 491
+line: 450
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -52,16 +51,18 @@ example:
</code>
</div>
class: p5
-params:
- - name: html
- description: >
- <p>inner HTML for the new <code><div></div></code>
- element.</p>
- type: String
- optional: true
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
+overloads:
+ - params:
+ - name: html
+ description: inner HTML for the new <code><div></div></code> element.
+ optional: 1
+ type: String
+ return:
+ description: new <a href="#/p5.Element">p5.Element</a> object.
+ type: p5.Element
chainable: false
---
diff --git a/src/content/reference/en/p5/createElement.mdx b/src/content/reference/en/p5/createElement.mdx
index 99b0234fce..448c3e1f2f 100644
--- a/src/content/reference/en/p5/createElement.mdx
+++ b/src/content/reference/en/p5/createElement.mdx
@@ -15,12 +15,11 @@ description: >
HTML content to insert into the new element. New elements have no content
by default.</p>
-line: 2493
+line: 308
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -55,19 +54,21 @@ example:
</code>
</div>
class: p5
-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
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
+overloads:
+ - params:
+ - name: tag
+ description: tag for the new element.
+ type: String
+ - name: content
+ description: HTML content to insert into the element.
+ optional: 1
+ type: String
+ return:
+ description: new <a href="#/p5.Element">p5.Element</a> object.
+ type: p5.Element
chainable: false
---
diff --git a/src/content/reference/en/p5/createFileInput.mdx b/src/content/reference/en/p5/createFileInput.mdx
index 5f8baccfd6..0a7a99e4a6 100644
--- a/src/content/reference/en/p5/createFileInput.mdx
+++ b/src/content/reference/en/p5/createFileInput.mdx
@@ -27,12 +27,11 @@ description: >
<code>true</code>, <code>callback</code>
will be called once per file.</p>
-line: 1942
+line: 1953
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Use the file input to select an image to
@@ -115,19 +114,21 @@ example:
</code>
</div>
class: p5
-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
return:
description: new <a href="#/p5.File">p5.File</a> object.
type: p5.File
+overloads:
+ - params:
+ - name: callback
+ description: function to call once the file loads.
+ type: Function
+ - name: multiple
+ description: allow multiple files to be selected.
+ optional: 1
+ type: Boolean
+ return:
+ description: new <a href="#/p5.File">p5.File</a> object.
+ type: p5.File
chainable: false
---
diff --git a/src/content/reference/en/p5/createFilterShader.mdx b/src/content/reference/en/p5/createFilterShader.mdx
index 3c9165bade..393bb7a11a 100644
--- a/src/content/reference/en/p5/createFilterShader.mdx
+++ b/src/content/reference/en/p5/createFilterShader.mdx
@@ -38,23 +38,14 @@ description: >
uniforms that can be set:</p>
- <ul>
-
- <li><code>sampler2D tex0</code>, which contains the canvas contents as a
- texture.</li>
-
- <li><code>vec2 canvasSize</code>, which is the 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. This is calculated as <code>1.0 / (width *
- density)</code> for the pixel width and <code>1.0 / (height * density)</code>
- for the pixel height.</li>
-
- </ul>
-
- <p>The <a href="/reference/p5/p5.Shader">p5.Shader</a> that's created also
- provides
+ <ul><li><code>sampler2D tex0</code>, which contains the canvas contents as a
+ texture.</li><li><code>vec2 canvasSize</code>, which is the 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. This is calculated as <code>1.0 / (width * density)</code> for the
+ pixel width and <code>1.0 / (height * density)</code> for the pixel
+ height.</li></ul><p>The <a href="/reference/p5/p5.Shader">p5.Shader</a> that's
+ created also provides
<code>varying vec2 vTexCoord</code>, a coordinate with values between 0 and 1.
@@ -65,14 +56,14 @@ description: >
href="https://github.com/aferriss/p5jsShaderExamples/">repo of shader
examples</a>
- or the <a href="https://p5js.org/tutorials/intro-to-shaders/">Introduction to
- Shaders</a> tutorial.</p>
-line: 540
+ or the <a
+ href="https://p5js.org/learn/getting-started-in-webgl-shaders.html">Introduction
+ to Shaders</a> tutorial.</p>
+line: 666
isConstructor: false
itemtype: method
example:
- |-
-
<div modernizr='webgl'>
<code>
function setup() {
@@ -92,10 +83,8 @@ example:
<div modernizr='webgl'>
<code>
let img, s;
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
- function setup() {
+ async function setup() {
+ img = await loadImage('/assets/bricks.jpg');
let fragSrc = `precision highp float;
// x,y coordinates, given from the vertex shader
@@ -121,6 +110,7 @@ example:
createCanvas(100, 100, WEBGL);
s = createFilterShader(fragSrc);
}
+
function draw() {
image(img, -50, -50);
s.setUniform('darkness', 0.5);
@@ -130,14 +120,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: fragSrc
- description: |
- <p>source code for the fragment shader.</p>
- type: String
return:
description: new shader object created from the fragment shader.
type: p5.Shader
+overloads:
+ - params:
+ - name: fragSrc
+ description: source code for the fragment shader.
+ type: String
+ return:
+ description: new shader object created from the fragment shader.
+ type: p5.Shader
chainable: false
---
diff --git a/src/content/reference/en/p5/createFramebuffer.mdx b/src/content/reference/en/p5/createFramebuffer.mdx
index d145fc77ea..358c0a9848 100644
--- a/src/content/reference/en/p5/createFramebuffer.mdx
+++ b/src/content/reference/en/p5/createFramebuffer.mdx
@@ -25,66 +25,46 @@ description: >
properties are:</p>
- <ul>
-
- <li><code>format</code>: data format of the texture, either
+ <ul><li><code>format</code>: data format of the texture, either
<code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or <code>HALF_FLOAT</code>.
- Default is <code>UNSIGNED_BYTE</code>.</li>
-
- <li><code>channels</code>: whether to store <code>RGB</code> or
- <code>RGBA</code> color channels. Default is to match the main canvas which is
- <code>RGBA</code>.</li>
-
- <li><code>depth</code>: whether to include a depth buffer. Default is
- <code>true</code>.</li>
-
- <li><code>depthFormat</code>: data format of depth information, either
- <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is
- <code>FLOAT</code>.</li>
-
- <li><code>stencil</code>: whether to include a stencil buffer for masking.
- <code>depth</code> must be <code>true</code> for this feature to work.
- Defaults to the value of <code>depth</code> which is <code>true</code>.</li>
-
- <li><code>antialias</code>: whether to perform anti-aliasing. If set to
- <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will be
- used by default. The number of samples can also be set, as in <code>{
- antialias: 4 }</code>. Default is to match <a
+ Default is <code>UNSIGNED_BYTE</code>.</li><li><code>channels</code>: whether
+ to store <code>RGB</code> or <code>RGBA</code> color channels. Default is to
+ match the main canvas which is <code>RGBA</code>.</li><li><code>depth</code>:
+ whether to include a depth buffer. Default is
+ <code>true</code>.</li><li><code>depthFormat</code>: data format of depth
+ information, either <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default
+ is <code>FLOAT</code>.</li><li><code>stencil</code>: whether to include a
+ stencil buffer for masking. <code>depth</code> must be <code>true</code> for
+ this feature to work. Defaults to the value of <code>depth</code> which is
+ <code>true</code>.</li><li><code>antialias</code>: whether to perform
+ anti-aliasing. If set to <code>true</code>, as in <code>{ antialias: true
+ }</code>, 2 samples will be used by default. The number of samples can also be
+ set, as in <code>{ antialias: 4 }</code>. Default is to match <a
href="/reference/p5/setAttributes/">setAttributes()</a> which is
- <code>false</code> (<code>true</code> in Safari).</li>
-
- <li><code>width</code>: width of the <a
+ <code>false</code> (<code>true</code> in Safari).</li><li><code>width</code>:
+ width of the <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object.
+ Default is to always match the main canvas width.</li><li><code>height</code>:
+ height of the <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
+ object. Default is to always match the main canvas
+ height.</li><li><code>density</code>: pixel density of the <a
href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
- always match the main canvas width.</li>
-
- <li><code>height</code>: height of the <a
- href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
- always match the main canvas height.</li>
-
- <li><code>density</code>: pixel density of the <a
- href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
- always match the main canvas pixel density.</li>
-
- <li><code>textureFiltering</code>: how to read values from the <a
+ always match the main canvas pixel
+ density.</li><li><code>textureFiltering</code>: how to read values from the <a
href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Either
<code>LINEAR</code> (nearby pixels will be interpolated) or
<code>NEAREST</code> (no interpolation). Generally, use <code>LINEAR</code>
when using the texture as an image and <code>NEAREST</code> if reading the
- texture as data. Default is <code>LINEAR</code>.</li>
-
- </ul>
-
- <p>If the <code>width</code>, <code>height</code>, or <code>density</code>
- attributes are set, they won't automatically match the main canvas and must be
- changed manually.</p>
+ texture as data. Default is <code>LINEAR</code>.</li></ul><p>If the
+ <code>width</code>, <code>height</code>, or <code>density</code> attributes
+ are set, they won't automatically match the main canvas and must be changed
+ manually.</p>
<p>Note: <code>createFramebuffer()</code> can only be used in WebGL mode.</p>
-line: 495
+line: 544
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myBuffer;
@@ -189,15 +169,18 @@ example:
</code>
</div>
class: p5
-params:
- - name: options
- description: |
- <p>configuration options.</p>
- type: Object
- optional: true
return:
description: new framebuffer.
type: p5.Framebuffer
+overloads:
+ - params:
+ - name: options
+ description: configuration options.
+ optional: 1
+ type: Object
+ return:
+ description: new framebuffer.
+ type: p5.Framebuffer
chainable: false
---
diff --git a/src/content/reference/en/p5/createGraphics.mdx b/src/content/reference/en/p5/createGraphics.mdx
index 11a419ac38..3718471f1b 100644
--- a/src/content/reference/en/p5/createGraphics.mdx
+++ b/src/content/reference/en/p5/createGraphics.mdx
@@ -68,12 +68,11 @@ description: >
create a
WebGL1 context.</p>
-line: 370
+line: 395
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click to draw the contents of the graphics buffer.
@@ -83,7 +82,7 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Create the p5.Graphics object.
pg = createGraphics(50, 50);
@@ -113,7 +112,7 @@ example:
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Create the p5.Graphics object in WebGL mode.
pg = createGraphics(50, 50, WEBGL);
@@ -142,42 +141,34 @@ return:
description: new graphics buffer.
type: p5.Graphics
overloads:
- - line: 370
- params:
+ - params:
- name: width
- description: |
- <p>width of the graphics buffer.</p>
+ description: width of the graphics buffer.
type: Number
- name: height
- description: |
- <p>height of the graphics buffer.</p>
+ description: height of the graphics buffer.
type: Number
- name: renderer
- description: |
- <p>either P2D or WEBGL. Defaults to P2D.</p>
- type: Constant
- optional: true
+ description: either P2D or WEBGL. Defaults to P2D.
+ optional: 1
+ type: P2D|WEBGL
- name: canvas
- description: |
- <p>existing canvas element that should be
- used for the graphics buffer..</p>
+ description: |-
+ existing canvas element that should be
+ used for the graphics buffer..
+ optional: 1
type: HTMLCanvasElement
- optional: true
return:
description: new graphics buffer.
type: p5.Graphics
- - line: 475
- params:
+ - params:
- name: width
- description: ''
type: Number
- name: height
- description: ''
type: Number
- name: canvas
- description: ''
+ optional: 1
type: HTMLCanvasElement
- optional: true
return:
description: ''
type: p5.Graphics
diff --git a/src/content/reference/en/p5/createImage.mdx b/src/content/reference/en/p5/createImage.mdx
index 405935d864..57914a0703 100644
--- a/src/content/reference/en/p5/createImage.mdx
+++ b/src/content/reference/en/p5/createImage.mdx
@@ -34,12 +34,11 @@ description: >
transparent by
default.</p>
-line: 15
+line: 150
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -150,18 +149,20 @@ example:
</code>
</div>
class: p5
-params:
- - name: width
- description: |
- <p>width in pixels.</p>
- type: Integer
- - name: height
- description: |
- <p>height in pixels.</p>
- type: Integer
return:
description: new <a href="#/p5.Image">p5.Image</a> object.
type: p5.Image
+overloads:
+ - params:
+ - name: width
+ description: width in pixels.
+ type: Integer
+ - name: height
+ description: height in pixels.
+ type: Integer
+ return:
+ description: new <a href="#/p5.Image">p5.Image</a> object.
+ type: p5.Image
chainable: false
---
diff --git a/src/content/reference/en/p5/createImg.mdx b/src/content/reference/en/p5/createImg.mdx
index 953f060c67..db7f143100 100644
--- a/src/content/reference/en/p5/createImg.mdx
+++ b/src/content/reference/en/p5/createImg.mdx
@@ -42,12 +42,11 @@ description: >
call after the image loads. The new image is passed to the callback
function as a <a href="/reference/p5/p5.Element">p5.Element</a> object.</p>
-line: 649
+line: 615
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -70,38 +69,31 @@ return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
overloads:
- - line: 649
- params:
+ - params:
- name: src
- description: |
- <p>relative path or URL for the image.</p>
+ description: relative path or URL for the image.
type: String
- name: alt
- description: |
- <p>alternate text for the image.</p>
+ description: alternate text for the image.
type: String
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
- - line: 693
- params:
+ - params:
- name: src
- description: ''
type: String
- name: alt
- description: ''
type: String
- name: crossOrigin
- description: |
- <p>crossOrigin property to use when fetching the image.</p>
+ description: crossOrigin property to use when fetching the image.
+ optional: 1
type: String
- optional: true
- name: successCallback
- description: |
- <p>function to call once the image loads. The new image will be passed
- to the function as a <a href="#/p5.Element">p5.Element</a> object.</p>
+ description: |-
+ function to call once the image loads. The new image will be passed
+ to the function as a <a href="#/p5.Element">p5.Element</a> object.
+ optional: 1
type: Function
- optional: true
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
diff --git a/src/content/reference/en/p5/createInput.mdx b/src/content/reference/en/p5/createInput.mdx
index c216fce18f..df8abdc11f 100644
--- a/src/content/reference/en/p5/createInput.mdx
+++ b/src/content/reference/en/p5/createInput.mdx
@@ -22,12 +22,11 @@ description: >
target="_blank">list of options</a>.
The default is <code>'text'</code>.</p>
-line: 1859
+line: 1843
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let myInput;
@@ -83,28 +82,24 @@ return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
overloads:
- - line: 1859
- params:
+ - params:
- name: value
- description: >
- <p>default value of the input box. Defaults to an empty string
- <code>''</code>.</p>
+ description: >-
+ default value of the input box. Defaults to an empty string
+ <code>''</code>.
+ optional: 1
type: String
- optional: true
- name: type
- description: |
- <p>type of input. Defaults to <code>'text'</code>.</p>
+ description: type of input. Defaults to <code>'text'</code>.
+ optional: 1
type: String
- optional: true
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
- - line: 1929
- params:
+ - params:
- name: value
- description: ''
+ optional: 1
type: String
- optional: true
return:
description: ''
type: p5.Element
diff --git a/src/content/reference/en/p5/createModel.mdx b/src/content/reference/en/p5/createModel.mdx
index 6ba33e4a9d..e22da4fc32 100644
--- a/src/content/reference/en/p5/createModel.mdx
+++ b/src/content/reference/en/p5/createModel.mdx
@@ -3,7 +3,7 @@ title: createModel
module: Shape
submodule: 3D Models
file: src/webgl/loading.js
-description: >
+description: >-
<p>Load a 3d model from an OBJ or STL string.</p>
<p>OBJ and STL files lack a built-in sense of scale, causing models exported
@@ -20,39 +20,21 @@ description: >
rendered without color properties.</p>
- <ul>
-
- <li>Options can include:</li>
-
- </ul>
-
- <ul>
-
- <li><code>modelString</code>: Specifies the plain text string of either an stl
- or obj file to be loaded.</li>
-
- <li><code>fileType</code>: Defines the file extension of the model.</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>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: 1134
+ <ul><li>Options can include:</li></ul><ul><li><code>modelString</code>:
+ Specifies the plain text string of either an stl or obj file to be
+ loaded.</li><li><code>fileType</code>: Defines the file extension of the
+ model.</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>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: 1195
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
const octahedron_model = `
@@ -93,93 +75,81 @@ return:
description: the <a href="#/p5.Geometry">p5.Geometry</a> object
type: p5.Geometry
overloads:
- - line: 1134
- params:
+ - params:
- name: modelString
- description: |
- <p>String of the object to be loaded</p>
+ description: String of the object to be loaded
type: String
- name: fileType
- description: |
- <p>The file extension of the model
- (<code>.stl</code>, <code>.obj</code>).</p>
+ description: |-
+ The file extension of the model
+ (<code>.stl</code>, <code>.obj</code>).
+ optional: 1
type: String
- optional: true
- name: normalize
- description: |
- <p>If true, scale the model to a
- standardized size when loading</p>
+ description: |-
+ If true, scale the model to a
+ standardized size when loading
type: Boolean
- name: successCallback
- description: |
- <p>Function to be called
- once the model is loaded. Will be passed
- the 3D model object.</p>
+ description: |-
+ Function to be called
+ once the model is loaded. Will be passed
+ the 3D model object.
+ optional: 1
type: function(p5.Geometry)
- optional: true
- name: failureCallback
- description: |
- <p>called with event error if
- the model fails to load.</p>
- type: Function(Event)
- optional: true
+ description: |-
+ called with event error if
+ the model fails to load.
+ optional: 1
+ type: function(Event)
return:
description: the <a href="#/p5.Geometry">p5.Geometry</a> object
type: p5.Geometry
- - line: 1204
- params:
+ - params:
- name: modelString
- description: ''
type: String
- name: fileType
- description: ''
+ optional: 1
type: String
- optional: true
- name: successCallback
- description: ''
+ optional: 1
type: function(p5.Geometry)
- optional: true
- name: failureCallback
- description: ''
- type: Function(Event)
- optional: true
+ optional: 1
+ type: function(Event)
return:
description: the <a href="#/p5.Geometry">p5.Geometry</a> object
type: p5.Geometry
- - line: 1212
- params:
+ - params:
- name: modelString
- description: ''
type: String
- name: fileType
- description: ''
+ optional: 1
type: String
- optional: true
- name: options
- description: ''
+ optional: 1
type: Object
- optional: true
- props:
- - name: successCallback
- description: ''
- type: function(p5.Geometry)
- optional: true
- - name: failureCallback
- description: ''
- type: Function(Event)
- optional: true
- - name: normalize
- description: ''
- type: Boolean
- optional: true
- - name: flipU
- description: ''
- type: Boolean
- optional: true
- - name: flipV
- description: ''
- type: Boolean
- optional: true
+ - name: options.successCallback
+ description: ''
+ optional: 1
+ type: function(p5.Geometry)
+ - name: options.failureCallback
+ description: ''
+ optional: 1
+ type: function(Event)
+ - name: options.normalize
+ description: ''
+ optional: 1
+ type: boolean
+ - name: options.flipU
+ description: ''
+ optional: 1
+ type: boolean
+ - name: options.flipV
+ description: ''
+ optional: 1
+ type: boolean
return:
description: the <a href="#/p5.Geometry">p5.Geometry</a> object
type: p5.Geometry
diff --git a/src/content/reference/en/p5/createNumberDict.mdx b/src/content/reference/en/p5/createNumberDict.mdx
deleted file mode 100644
index d4a27f2abe..0000000000
--- a/src/content/reference/en/p5/createNumberDict.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: createNumberDict
-module: Data
-submodule: Dictionary
-file: src/data/p5.TypedDict.js
-description: >
- <p>Creates a new instance of <a
- href="/reference/p5/p5.NumberDict">p5.NumberDict</a> using the key-value pair
- or object you provide.</p>
-line: 48
-isConstructor: false
-itemtype: method
-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>
-class: p5
-return:
- description: ''
- type: p5.NumberDict
-overloads:
- - line: 48
- params:
- - name: key
- description: ''
- type: Number
- - name: value
- description: ''
- type: Number
- return:
- description: ''
- type: p5.NumberDict
- - line: 71
- params:
- - name: object
- description: |
- <p>object</p>
- type: Object
- 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
index 851e7ded92..f458725ea3 100644
--- a/src/content/reference/en/p5/createP.mdx
+++ b/src/content/reference/en/p5/createP.mdx
@@ -13,12 +13,11 @@ description: >
the
inner HTML of the new <code><p></p></code>.</p>
-line: 543
+line: 485
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -35,15 +34,18 @@ example:
</code>
</div>
class: p5
-params:
- - name: html
- description: |
- <p>inner HTML for the new <code><p></p></code> element.</p>
- type: String
- optional: true
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
+overloads:
+ - params:
+ - name: html
+ description: inner HTML for the new <code><p></p></code> element.
+ optional: 1
+ type: String
+ return:
+ description: new <a href="#/p5.Element">p5.Element</a> object.
+ type: p5.Element
chainable: false
---
diff --git a/src/content/reference/en/p5/createRadio.mdx b/src/content/reference/en/p5/createRadio.mdx
index 317c70497e..d9ede65363 100644
--- a/src/content/reference/en/p5/createRadio.mdx
+++ b/src/content/reference/en/p5/createRadio.mdx
@@ -3,7 +3,7 @@ title: createRadio
module: DOM
submodule: DOM
file: src/dom/dom.js
-description: >
+description: >-
<p>Creates a radio button element.</p>
<p>The parameter is optional. If a string is passed, as in
@@ -11,7 +11,7 @@ description: >
<code>let myRadio = createSelect('food')</code>, then each radio option will
have <code>"food"</code> as its <code>name</code> parameter: <code><input
- name="food"></code>.
+ name="food"></input></code>.
If an existing <code><div></div></code> or <code><span></span></code>
@@ -25,37 +25,25 @@ description: >
helpful methods for managing options:</p>
- <ul>
-
- <li><code>myRadio.option(value, [label])</code> adds an option to the menu.
- The first parameter, <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
+ <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> Disables the radio button if
- <code>true</code> is passed, and enables it if <code>false</code> is
- passed.</li>
-
- </ul>
-line: 1440
+ 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: 1509
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let style = document.createElement('style');
@@ -146,7 +134,6 @@ example:
// in the top-left corner.
myRadio = createRadio();
myRadio.position(0, 0);
- myRadio.class('p5-radio');
myRadio.size(50);
// Add a few color options.
@@ -184,32 +171,27 @@ return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
overloads:
- - line: 1440
- params:
+ - params:
- name: containerElement
- description: >
- <p>container HTML Element, either a
- <code><div></div></code>
-
- or <code><span></span></code>.</p>
+ description: |-
+ container HTML Element, either a <code><div></div></code>
+ or <code><span></span></code>.
+ optional: 1
type: Object
- optional: true
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
- - line: 1588
- params:
+ - params:
- name: name
- description: >
- <p>name parameter assigned to each option's
- <code><input></input></code> element.</p>
+ description: >-
+ name parameter assigned to each option's
+ <code><input></input></code> element.
+ optional: 1
type: String
- optional: true
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
- - line: 1593
- params: []
+ - params: []
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
diff --git a/src/content/reference/en/p5/createSelect.mdx b/src/content/reference/en/p5/createSelect.mdx
index ebe2047ebb..7fd02fdf5a 100644
--- a/src/content/reference/en/p5/createSelect.mdx
+++ b/src/content/reference/en/p5/createSelect.mdx
@@ -3,7 +3,7 @@ title: createSelect
module: DOM
submodule: DOM
file: src/dom/dom.js
-description: >
+description: >-
<p>Creates a dropdown menu <code><select></select></code> element.</p>
<p>The parameter is optional. If <code>true</code> is passed, as in
@@ -25,42 +25,26 @@ description: >
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: 1159
+ <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: 1243
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let mySelect;
@@ -204,23 +188,23 @@ return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
overloads:
- - line: 1159
- params:
+ - params:
- name: multiple
- description: |
- <p>support multiple selections.</p>
+ description: support multiple selections.
+ optional: 1
type: Boolean
- optional: true
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
- - line: 1324
- params:
+ - params:
- name: existing
- description: >
- <p>select element to wrap, either as a <a
+ description: >-
+ select element to wrap, either as a <a
href="#/p5.Element">p5.Element</a> or
- a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement" target="_blank">HTMLSelectElement</a>.</p>
+
+ a <a
+ href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement"
+ target="_blank">HTMLSelectElement</a>.
type: Object
return:
description: ''
diff --git a/src/content/reference/en/p5/createShader.mdx b/src/content/reference/en/p5/createShader.mdx
index 2759909a01..8b357aa4c6 100644
--- a/src/content/reference/en/p5/createShader.mdx
+++ b/src/content/reference/en/p5/createShader.mdx
@@ -40,8 +40,7 @@ description: >
that contains the fragment shader program written in GLSL.</p>
- <p>A shader can optionally describe <em>hooks,</em> which are functions in
- GLSL that
+ <p>A shader can optionally describe hooks, which are functions in GLSL that
users may choose to provide to customize the behavior of the shader using the
@@ -71,12 +70,8 @@ description: >
vertex: {
'void beforeVertex': '() {}'
}
- }
-
- </code></pre>
-
- <p>Then, in your vertex shader source, you can run a hook by calling a
- function
+ }</code></pre><p>Then, in your vertex shader source, you can run a hook by
+ calling a function
with the same name prefixed by <code>HOOK_</code>. If you want to check if the
default
@@ -95,19 +90,15 @@ description: >
#endif
// Add the rest of your shader code here!
- }
-
- </code></pre>
-
- <p>Note: Only filter shaders can be used in 2D mode. All shaders can be used
+ }</code></pre><p>Note: Only filter shaders can be used in 2D mode. All shaders
+ can be used
in WebGL mode.</p>
-line: 173
+line: 512
isConstructor: false
itemtype: method
example:
- |-
-
<div modernizr='webgl'>
<code>
// Note: A "uniform" is a global variable within a shader program.
@@ -397,37 +388,35 @@ example:
</code>
</div>
class: p5
-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
- - name: options
- description: >
- <p>An optional object describing how this shader can
-
- be augmented with hooks. It can include:</p>
-
- <ul>
-
- <li><code>vertex</code>: An object describing the available vertex shader
- hooks.</li>
-
- <li><code>fragment</code>: An object describing the available frament
- shader hooks.</li>
-
- </ul>
- type: Object
- optional: true
return:
description: |-
new shader object created from the
vertex and fragment shaders.
type: p5.Shader
+overloads:
+ - params:
+ - name: vertSrc
+ description: source code for the vertex shader.
+ type: String
+ - name: fragSrc
+ description: source code for the fragment shader.
+ type: String
+ - name: options
+ description: >-
+ <p>An optional object describing how this shader can
+
+ be augmented with hooks. It can include:</p>
+
+ <ul><li><code>vertex</code>: An object describing the available vertex
+ shader hooks.</li><li><code>fragment</code>: An object describing the
+ available frament shader hooks.</li></ul>
+ optional: 1
+ type: Object
+ return:
+ description: |-
+ new shader object created from the
+ vertex and fragment shaders.
+ type: p5.Shader
chainable: false
---
diff --git a/src/content/reference/en/p5/createSlider.mdx b/src/content/reference/en/p5/createSlider.mdx
index a38232f3b5..afe9405ebe 100644
--- a/src/content/reference/en/p5/createSlider.mdx
+++ b/src/content/reference/en/p5/createSlider.mdx
@@ -27,12 +27,11 @@ description: >
allows the slider to move smoothly from <code>min</code> to
<code>max</code>.</p>
-line: 789
+line: 821
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let slider;
@@ -130,28 +129,28 @@ example:
</code>
</div>
class: p5
-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
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
+overloads:
+ - params:
+ - name: min
+ description: minimum value of the slider.
+ type: Number
+ - name: max
+ description: maximum value of the slider.
+ type: Number
+ - name: value
+ description: default value of the slider.
+ optional: 1
+ type: Number
+ - name: step
+ description: size for each step in the slider's range.
+ optional: 1
+ type: Number
+ return:
+ description: new <a href="#/p5.Element">p5.Element</a> object.
+ type: p5.Element
chainable: false
---
diff --git a/src/content/reference/en/p5/createSpan.mdx b/src/content/reference/en/p5/createSpan.mdx
index 6ccc331a99..ea04cccaf7 100644
--- a/src/content/reference/en/p5/createSpan.mdx
+++ b/src/content/reference/en/p5/createSpan.mdx
@@ -18,12 +18,11 @@ description: >
the
inner HTML of the new <code><span></span></code>.</p>
-line: 578
+line: 556
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -73,16 +72,18 @@ example:
</code>
</div>
class: p5
-params:
- - name: html
- description: >
- <p>inner HTML for the new <code><span></span></code>
- element.</p>
- type: String
- optional: true
return:
description: new <a href="#/p5.Element">p5.Element</a> object.
type: p5.Element
+overloads:
+ - params:
+ - name: html
+ description: inner HTML for the new <code><span></span></code> element.
+ optional: 1
+ type: String
+ return:
+ description: new <a href="#/p5.Element">p5.Element</a> object.
+ type: p5.Element
chainable: false
---
diff --git a/src/content/reference/en/p5/createStringDict.mdx b/src/content/reference/en/p5/createStringDict.mdx
deleted file mode 100644
index 8601f498b4..0000000000
--- a/src/content/reference/en/p5/createStringDict.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5
-return:
- description: ''
- type: p5.StringDict
-overloads:
- - line: 14
- params:
- - name: key
- description: ''
- type: String
- - name: value
- description: ''
- type: String
- return:
- description: ''
- type: p5.StringDict
- - line: 37
- params:
- - name: object
- description: |
- <p>object</p>
- type: Object
- 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
index 2d6e301b71..798d0111f3 100644
--- a/src/content/reference/en/p5/createVector.mdx
+++ b/src/content/reference/en/p5/createVector.mdx
@@ -1,7 +1,7 @@
---
title: createVector
module: Math
-submodule: Vector
+submodule: ''
file: src/math/math.js
description: >
<p>Creates a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
@@ -23,6 +23,16 @@ description: >
right and 4 units down.</p>
+ <p>You can also pass N dimensions to the <code>createVector</code> function.
+ For example,
+
+ calling <code>createVector(1, 2, 3, 4)</code> creates a vector with four
+ components.
+
+ This allows for flexibility in representing vectors in higher-dimensional
+
+ spaces.</p>
+
<p><a href="/reference/p5/p5.Vector">p5.Vector</a> objects are often used to
program
@@ -41,12 +51,11 @@ description: >
<code>pos.add(vel)</code>. Vector math relies on methods inside the
<a href="/reference/p5/p5.Vector">p5.Vector</a> class.</p>
-line: 10
+line: 98
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -104,25 +113,16 @@ example:
</code>
</div>
class: p5
-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
return:
description: new <a href="#/p5.Vector">p5.Vector</a> object.
type: p5.Vector
+overloads:
+ - params:
+ - name: components
+ description: Components of the vector.
+ return:
+ description: new <a href="#/p5.Vector">p5.Vector</a> object.
+ type: p5.Vector
chainable: false
---
diff --git a/src/content/reference/en/p5/createVideo.mdx b/src/content/reference/en/p5/createVideo.mdx
index 820866af2e..48506f29a4 100644
--- a/src/content/reference/en/p5/createVideo.mdx
+++ b/src/content/reference/en/p5/createVideo.mdx
@@ -2,7 +2,7 @@
title: createVideo
module: DOM
submodule: DOM
-file: src/dom/dom.js
+file: src/dom/p5.MediaElement.js
description: >
<p>Creates a <code><video></code> element for simple audio/video playback.</p>
@@ -41,12 +41,11 @@ description: >
to call once
the video is ready to play.</p>
-line: 2115
+line: 1458
isConstructor: false
itemtype: method
example:
- |-
-
<div class='notest'>
<code>
function setup() {
@@ -111,20 +110,23 @@ example:
</code>
</div>
class: p5
-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
return:
description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
type: p5.MediaElement
+overloads:
+ - params:
+ - name: src
+ description: |-
+ path to a video file, or an array of paths for
+ supporting different browsers.
+ type: 'String|String[]'
+ - name: callback
+ description: function to call once the video is ready to play.
+ optional: 1
+ type: Function
+ return:
+ description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
+ type: p5.MediaElement
chainable: false
---
diff --git a/src/content/reference/en/p5/createWriter.mdx b/src/content/reference/en/p5/createWriter.mdx
index 3a5cc7f838..5376aab48b 100644
--- a/src/content/reference/en/p5/createWriter.mdx
+++ b/src/content/reference/en/p5/createWriter.mdx
@@ -1,7 +1,7 @@
---
title: createWriter
module: IO
-submodule: Output
+submodule: Input
file: src/io/files.js
description: >
<p>Creates a new <a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a>
@@ -10,7 +10,7 @@ description: >
<p><a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a> objects provide a
way to
- save a sequence of text data, called the <em>print stream</em>, to the user's
+ save a sequence of text data, called the print stream, to the user's
computer. They're low-level objects that enable precise control of text
@@ -40,12 +40,11 @@ description: >
interpreted
as the file name and the second parameter as the extension.</p>
-line: 1444
+line: 1304
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -123,19 +122,21 @@ example:
</code>
</div>
class: p5
-params:
- - name: name
- description: |
- <p>name of the file to create.</p>
- type: String
- - name: extension
- description: |
- <p>format to use for the file.</p>
- type: String
- optional: true
return:
description: stream for writing data.
type: p5.PrintWriter
+overloads:
+ - params:
+ - name: name
+ description: name of the file to create.
+ type: String
+ - name: extension
+ description: format to use for the file.
+ optional: 1
+ type: String
+ return:
+ description: stream for writing data.
+ type: p5.PrintWriter
chainable: false
---
diff --git a/src/content/reference/en/p5/cursor.mdx b/src/content/reference/en/p5/cursor.mdx
index d2ec7cc68d..f7932d25b1 100644
--- a/src/content/reference/en/p5/cursor.mdx
+++ b/src/content/reference/en/p5/cursor.mdx
@@ -38,12 +38,11 @@ description: >
and <code>y</code> must be less than the image's width and height,
respectively.</p>
-line: 209
+line: 301
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -112,23 +111,22 @@ example:
</code>
</div>
class: p5
-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
+overloads:
+ - params:
+ - name: type
+ description: |-
+ Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.
+ Native CSS properties: 'grab', 'progress', and so on.
+ Path to cursor image.
+ type: ARROW|CROSS|HAND|MOVE|TEXT|WAIT|String
+ - name: x
+ description: horizontal active spot of the cursor.
+ optional: 1
+ type: Number
+ - name: 'y'
+ description: vertical active spot of the cursor.
+ optional: 1
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/curveDetail.mdx b/src/content/reference/en/p5/curveDetail.mdx
index ae3f11767f..7dadb30127 100644
--- a/src/content/reference/en/p5/curveDetail.mdx
+++ b/src/content/reference/en/p5/curveDetail.mdx
@@ -1,8 +1,8 @@
---
title: curveDetail
module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
description: >
<p>Sets the number of segments used to draw spline curves in WebGL mode.</p>
@@ -10,59 +10,17 @@ description: >
more flat segments makes shapes appear smoother.</p>
- <p>The parameter, <code>detail</code>, is the number of segments to use while
+ <p>The parameter, <code>detail</code>, is the density of segments to use while
drawing a
- spline curve. For example, calling <code>curveDetail(5)</code> will use 5
- segments to
-
- draw curves with the <a href="/reference/p5/curve/">curve()</a> function. By
-
- default,<code>detail</code> is 20.</p>
+ spline curve.</p>
<p>Note: <code>curveDetail()</code> has no effect in 2D mode.</p>
-line: 772
+line: 2727
isConstructor: false
itemtype: method
example:
- |-
-
- <div>
- <code>
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Draw a black spline curve.
- noFill();
- strokeWeight(1);
- stroke(0);
- curve(5, 26, 73, 24, 73, 61, 15, 65);
-
- // Draw red spline curves from the anchor points to the control points.
- stroke(255, 0, 0);
- curve(5, 26, 5, 26, 73, 24, 73, 61);
- curve(73, 24, 73, 61, 15, 65, 15, 65);
-
- // Draw the anchor points in black.
- strokeWeight(5);
- stroke(0);
- point(73, 24);
- point(73, 61);
-
- // Draw the control points in red.
- stroke(255, 0, 0);
- point(5, 26);
- point(15, 65);
-
- describe(
- 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
- );
- }
- </code>
- </div>
-
<div>
<code>
function setup() {
@@ -70,19 +28,22 @@ example:
background(200);
- // Set the curveDetail() to 3.
- curveDetail(3);
+ // Set the curveDetail() to 0.5
+ curveDetail(0.5);
+
+ // Do not show all the vertices
+ splineProperty('ends', EXCLUDE)
// Draw a black spline curve.
noFill();
strokeWeight(1);
stroke(0);
- curve(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0);
+ spline(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0);
// Draw red spline curves from the anchor points to the control points.
- stroke(255, 0, 0);
- curve(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0);
- curve(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0);
+ spline(255, 0, 0);
+ spline(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0);
+ spline(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0);
// Draw the anchor points in black.
strokeWeight(5);
@@ -102,11 +63,11 @@ example:
</code>
</div>
class: p5
-params:
- - name: resolution
- description: |
- <p>number of segments to use. Defaults to 20.</p>
- type: Number
+overloads:
+ - params:
+ - name: resolution
+ description: number of segments to use. Default is 1/4
+ type: Number
chainable: true
---
diff --git a/src/content/reference/en/p5/curveTightness.mdx b/src/content/reference/en/p5/curveTightness.mdx
deleted file mode 100644
index bcdbd3fa20..0000000000
--- a/src/content/reference/en/p5/curveTightness.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: curveTightness
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
- <p>Adjusts the way <a href="/reference/p5/curve/">curve()</a> and
-
- <a href="/reference/p5/curveVertex/">curveVertex()</a> draw.</p>
-
- <p>Spline curves are like cables that are attached to a set of points.
-
- <code>curveTightness()</code> adjusts how tightly the cable is attached to the
- points.</p>
-
- <p>The parameter, <code>tightness</code>, determines how the curve fits to the
- vertex
-
- points. By default, <code>tightness</code> is set to 0. Setting tightness to
- 1,
-
- as in <code>curveTightness(1)</code>, connects the curve's points using
- straight
-
- lines. Values in the range from –5 to 5 deform curves while leaving them
-
- recognizable.</p>
-line: 875
-isConstructor: false
-itemtype: method
-example:
- - |-
-
- <div>
- <code>
- // Move the mouse left and right to see the curve change.
-
- function setup() {
- createCanvas(100, 100);
-
- describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right');
- }
-
- function draw() {
- background(200);
-
- // Set the curve's tightness using the mouse.
- let t = map(mouseX, 0, 100, -5, 5, true);
- curveTightness(t);
-
- // Draw the curve.
- noFill();
- beginShape();
- curveVertex(10, 26);
- curveVertex(10, 26);
- curveVertex(83, 24);
- curveVertex(83, 61);
- curveVertex(25, 65);
- curveVertex(25, 65);
- endShape();
- }
- </code>
- </div>
-class: p5
-params:
- - name: amount
- description: |
- <p>amount of tightness.</p>
- type: Number
-chainable: true
----
-
-
-# curveTightness
diff --git a/src/content/reference/en/p5/cylinder.mdx b/src/content/reference/en/p5/cylinder.mdx
index 8e8b78376e..888536a6f9 100644
--- a/src/content/reference/en/p5/cylinder.mdx
+++ b/src/content/reference/en/p5/cylinder.mdx
@@ -67,12 +67,11 @@ description: >
drawn. By default, <code>topCap</code> is <code>true</code>.</p>
<p>Note: <code>cylinder()</code> can only be used in WebGL mode.</p>
-line: 1477
+line: 1052
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -239,39 +238,32 @@ example:
</code>
</div>
class: p5
-params:
- - name: radius
- description: |
- <p>radius of the cylinder. Defaults to 50.</p>
- type: Number
- optional: true
- - name: height
- description: >
- <p>height of the cylinder. Defaults to the value of
- <code>radius</code>.</p>
- type: Number
- optional: true
- - name: detailX
- description: |
- <p>number of edges along the top and bottom. Defaults to 24.</p>
- type: Integer
- optional: true
- - name: detailY
- description: |
- <p>number of triangle subdivisions along the y-axis. Defaults to 1.</p>
- type: Integer
- optional: true
- - name: bottomCap
- description: >
- <p>whether to draw the cylinder's bottom. Defaults to
- <code>true</code>.</p>
- type: Boolean
- optional: true
- - name: topCap
- description: |
- <p>whether to draw the cylinder's top. Defaults to <code>true</code>.</p>
- type: Boolean
- optional: true
+overloads:
+ - params:
+ - name: radius
+ description: radius of the cylinder. Defaults to 50.
+ optional: 1
+ type: Number
+ - name: height
+ description: height of the cylinder. Defaults to the value of <code>radius</code>.
+ optional: 1
+ type: Number
+ - name: detailX
+ description: number of edges along the top and bottom. Defaults to 24.
+ optional: 1
+ type: Integer
+ - name: detailY
+ description: number of triangle subdivisions along the y-axis. Defaults to 1.
+ optional: 1
+ type: Integer
+ - name: bottomCap
+ description: whether to draw the cylinder's bottom. Defaults to <code>true</code>.
+ optional: 1
+ type: Boolean
+ - name: topCap
+ description: whether to draw the cylinder's top. Defaults to <code>true</code>.
+ optional: 1
+ type: Boolean
chainable: true
---
diff --git a/src/content/reference/en/p5/day.mdx b/src/content/reference/en/p5/day.mdx
index c463fc9657..d02637377d 100644
--- a/src/content/reference/en/p5/day.mdx
+++ b/src/content/reference/en/p5/day.mdx
@@ -3,14 +3,12 @@ title: day
module: IO
submodule: Time & Date
file: src/utilities/time_date.js
-description: |
- <p>Returns the current day as a number from 1–31.</p>
-line: 10
+description: Returns the current day as a number from 1–31.
+line: 39
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -37,6 +35,11 @@ class: p5
return:
description: current day between 1 and 31.
type: Integer
+overloads:
+ - params: []
+ return:
+ description: current day between 1 and 31.
+ type: Integer
chainable: false
---
diff --git a/src/content/reference/en/p5/debugMode.mdx b/src/content/reference/en/p5/debugMode.mdx
index ecc1bd80b2..ec791a9c2a 100644
--- a/src/content/reference/en/p5/debugMode.mdx
+++ b/src/content/reference/en/p5/debugMode.mdx
@@ -114,12 +114,11 @@ description: >
50 and
offsets the icon 10 pixels along each axis.</p>
-line: 471
+line: 689
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -248,110 +247,84 @@ example:
</div>
class: p5
overloads:
- - line: 471
- params: []
- - line: 650
- params:
+ - params: []
+ - params:
- name: mode
- description: |
- <p>either GRID or AXES</p>
- type: Constant
- - line: 655
- params:
+ description: either GRID or AXES
+ type: GRID|AXES
+ - params:
- name: mode
- description: ''
- type: Constant
+ type: GRID|AXES
- name: gridSize
- description: |
- <p>side length of the grid.</p>
+ description: side length of the grid.
+ optional: 1
type: Number
- optional: true
- name: gridDivisions
- description: |
- <p>number of divisions in the grid.</p>
+ description: number of divisions in the grid.
+ optional: 1
type: Number
- optional: true
- name: xOff
- description: |
- <p>offset from origin along the x-axis.</p>
+ description: offset from origin along the x-axis.
+ optional: 1
type: Number
- optional: true
- name: yOff
- description: |
- <p>offset from origin along the y-axis.</p>
+ description: offset from origin along the y-axis.
+ optional: 1
type: Number
- optional: true
- name: zOff
- description: |
- <p>offset from origin along the z-axis.</p>
+ description: offset from origin along the z-axis.
+ optional: 1
type: Number
- optional: true
- - line: 665
- params:
+ - params:
- name: mode
- description: ''
- type: Constant
+ type: GRID|AXES
- name: axesSize
- description: |
- <p>length of axes icon markers.</p>
+ description: length of axes icon markers.
+ optional: 1
type: Number
- optional: true
- name: xOff
- description: ''
+ optional: 1
type: Number
- optional: true
- name: yOff
- description: ''
+ optional: 1
type: Number
- optional: true
- name: zOff
- description: ''
+ optional: 1
type: Number
- optional: true
- - line: 674
- params:
+ - params:
- name: gridSize
- description: ''
+ optional: 1
type: Number
- optional: true
- name: gridDivisions
- description: ''
+ optional: 1
type: Number
- optional: true
- name: gridXOff
- description: |
- <p>grid offset from the origin along the x-axis.</p>
+ description: grid offset from the origin along the x-axis.
+ optional: 1
type: Number
- optional: true
- name: gridYOff
- description: |
- <p>grid offset from the origin along the y-axis.</p>
+ description: grid offset from the origin along the y-axis.
+ optional: 1
type: Number
- optional: true
- name: gridZOff
- description: |
- <p>grid offset from the origin along the z-axis.</p>
+ description: grid offset from the origin along the z-axis.
+ optional: 1
type: Number
- optional: true
- name: axesSize
- description: ''
+ optional: 1
type: Number
- optional: true
- name: axesXOff
- description: |
- <p>axes icon offset from the origin along the x-axis.</p>
+ description: axes icon offset from the origin along the x-axis.
+ optional: 1
type: Number
- optional: true
- name: axesYOff
- description: |
- <p>axes icon offset from the origin along the y-axis.</p>
+ description: axes icon offset from the origin along the y-axis.
+ optional: 1
type: Number
- optional: true
- name: axesZOff
- description: |
- <p>axes icon offset from the origin along the z-axis.</p>
+ description: axes icon offset from the origin along the z-axis.
+ optional: 1
type: Number
- optional: true
chainable: false
---
diff --git a/src/content/reference/en/p5/degrees.mdx b/src/content/reference/en/p5/degrees.mdx
index a1e3e930ae..e61faf64c8 100644
--- a/src/content/reference/en/p5/degrees.mdx
+++ b/src/content/reference/en/p5/degrees.mdx
@@ -10,12 +10,11 @@ description: |
<p>The same angle can be expressed in with either unit. For example, 90° is a
quarter of a full rotation. The same angle is 2 × π ÷ 4
(about 1.57) radians.</p>
-line: 485
+line: 519
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -35,14 +34,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: radians
- description: |
- <p>radians value to convert to degrees.</p>
- type: Number
return:
description: converted angle.
type: Number
+overloads:
+ - params:
+ - name: radians
+ description: radians value to convert to degrees.
+ type: Number
+ return:
+ description: converted angle.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/deltaTime.mdx b/src/content/reference/en/p5/deltaTime.mdx
index 363ac8c872..eccd08f231 100644
--- a/src/content/reference/en/p5/deltaTime.mdx
+++ b/src/content/reference/en/p5/deltaTime.mdx
@@ -15,12 +15,11 @@ description: >
It's
useful for simulating physics.</p>
-line: 124
+line: 173
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
let x = 0;
diff --git a/src/content/reference/en/p5/describe.mdx b/src/content/reference/en/p5/describe.mdx
index 248a628bb5..9c84123baa 100644
--- a/src/content/reference/en/p5/describe.mdx
+++ b/src/content/reference/en/p5/describe.mdx
@@ -26,17 +26,15 @@ description: >
<p>Read
- <a
- href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
- accessible canvas descriptions</a>
+ <a href="/learn/accessible-labels.html">Writing accessible canvas
+ descriptions</a>
to learn more about making sketches accessible.</p>
-line: 18
+line: 119
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -117,16 +115,15 @@ example:
</code>
</div>
class: p5
-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
+overloads:
+ - params:
+ - name: text
+ description: description of the canvas.
+ type: String
+ - name: display
+ description: either LABEL or FALLBACK.
+ optional: 1
+ type: FALLBACK|LABEL
chainable: false
---
diff --git a/src/content/reference/en/p5/describeElement.mdx b/src/content/reference/en/p5/describeElement.mdx
index 59cdbcc069..2768a02c38 100644
--- a/src/content/reference/en/p5/describeElement.mdx
+++ b/src/content/reference/en/p5/describeElement.mdx
@@ -38,17 +38,15 @@ description: >
<p>Read
- <a
- href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
- accessible canvas descriptions</a>
+ <a href="/learn/accessible-labels.html">Writing accessible canvas
+ descriptions</a>
to learn more about making sketches accessible.</p>
-line: 162
+line: 245
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -103,20 +101,18 @@ example:
</code>
</div>
class: p5
-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
+overloads:
+ - params:
+ - name: name
+ description: name of the element.
+ type: String
+ - name: text
+ description: description of the element.
+ type: String
+ - name: display
+ description: either LABEL or FALLBACK.
+ optional: 1
+ type: FALLBACK|LABEL
chainable: false
---
diff --git a/src/content/reference/en/p5/deviceMoved.mdx b/src/content/reference/en/p5/deviceMoved.mdx
index f14052e071..80b3c4365c 100644
--- a/src/content/reference/en/p5/deviceMoved.mdx
+++ b/src/content/reference/en/p5/deviceMoved.mdx
@@ -3,20 +3,19 @@ title: deviceMoved
module: Events
submodule: Acceleration
file: src/events/acceleration.js
-description: >
- <p>The <a href="/reference/p5/deviceMoved/">deviceMoved()</a> function is
- called when the device is moved by more than
+description: >-
+ The <a href="/reference/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="/reference/p5/setMoveThreshold/">setMoveThreshold()</a>.</p>
-line: 501
+ href="https://p5js.org/reference/p5/setMoveThreshold/">setMoveThreshold()</a>.
+line: 618
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
// Run this example on a mobile device
@@ -39,6 +38,8 @@ example:
</code>
</div>
class: p5
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5/deviceOrientation.mdx b/src/content/reference/en/p5/deviceOrientation.mdx
index 9c7c475354..4de935328f 100644
--- a/src/content/reference/en/p5/deviceOrientation.mdx
+++ b/src/content/reference/en/p5/deviceOrientation.mdx
@@ -3,16 +3,17 @@ title: deviceOrientation
module: Events
submodule: Acceleration
file: src/events/acceleration.js
-description: |
- <p>The system variable deviceOrientation always contains the orientation of
+description: |-
+ 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
+ either LANDSCAPE or PORTRAIT.
+line: 19
isConstructor: false
itemtype: property
+example: []
class: p5
-type: Constant
+type: LANDSCAPE|PORTRAIT
---
diff --git a/src/content/reference/en/p5/deviceShaken.mdx b/src/content/reference/en/p5/deviceShaken.mdx
index a1e6f57c73..4d81c87960 100644
--- a/src/content/reference/en/p5/deviceShaken.mdx
+++ b/src/content/reference/en/p5/deviceShaken.mdx
@@ -3,8 +3,8 @@ title: deviceShaken
module: Events
submodule: Acceleration
file: src/events/acceleration.js
-description: >
- <p>The <a href="/reference/p5/deviceShaken/">deviceShaken()</a> function is
+description: >-
+ The <a href="/reference/p5/deviceShaken/">deviceShaken()</a> function is
called when the device total acceleration
changes of accelerationX and accelerationY values is more than
@@ -12,13 +12,12 @@ description: >
the threshold value. The default threshold is set to 30.
The threshold value can be changed using <a
- href="/reference/p5/setShakeThreshold/">setShakeThreshold()</a>.</p>
-line: 589
+ href="https://p5js.org/reference/p5/setShakeThreshold/">setShakeThreshold()</a>.
+line: 618
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
// Run this example on a mobile device
@@ -40,6 +39,8 @@ example:
</code>
</div>
class: p5
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5/deviceTurned.mdx b/src/content/reference/en/p5/deviceTurned.mdx
index 356bf740a5..bbef443084 100644
--- a/src/content/reference/en/p5/deviceTurned.mdx
+++ b/src/content/reference/en/p5/deviceTurned.mdx
@@ -17,12 +17,11 @@ description: >
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
+line: 618
isConstructor: false
itemtype: method
example:
- |-
-
<div class="norender">
<code>
// Run this example on a mobile device
@@ -70,6 +69,8 @@ example:
</code>
</div>
class: p5
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5/directionalLight.mdx b/src/content/reference/en/p5/directionalLight.mdx
index 0143fdfc64..33cef7cd6a 100644
--- a/src/content/reference/en/p5/directionalLight.mdx
+++ b/src/content/reference/en/p5/directionalLight.mdx
@@ -93,12 +93,11 @@ description: >
direction the <code>lightDir</code> vector points with the color value of
<code>myColor</code>.</p>
-line: 461
+line: 631
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -196,79 +195,60 @@ example:
</div>
class: p5
overloads:
- - line: 461
- params:
+ - params:
- name: v1
- description: |
- <p>red or hue value in the current
- <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ red or hue value in the current
+ <a href="#/p5/colorMode">colorMode()</a>.
type: Number
- name: v2
- description: |
- <p>green or saturation value in the current
- <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ green or saturation value in the current
+ <a href="#/p5/colorMode">colorMode()</a>.
type: Number
- name: v3
- description: |
- <p>blue, brightness, or lightness value in the current
- <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ blue, brightness, or lightness value in the current
+ <a href="#/p5/colorMode">colorMode()</a>.
type: Number
- name: x
- description: |
- <p>x-component of the light's direction between -1 and 1.</p>
+ description: x-component of the light's direction between -1 and 1.
type: Number
- name: 'y'
- description: |
- <p>y-component of the light's direction between -1 and 1.</p>
+ description: y-component of the light's direction between -1 and 1.
type: Number
- name: z
- description: |
- <p>z-component of the light's direction between -1 and 1.</p>
+ description: z-component of the light's direction between -1 and 1.
type: Number
- chainable: 1
- - line: 614
- params:
+ - params:
- name: v1
- description: ''
type: Number
- name: v2
- description: ''
type: Number
- name: v3
- description: ''
type: Number
- name: direction
- description: |
- <p>direction of the light as a
- <a href="#/p5.Vector">p5.Vector</a> object.</p>
+ description: |-
+ direction of the light as a
+ <a href="#/p5.Vector">p5.Vector</a> object.
type: p5.Vector
- chainable: 1
- - line: 624
- params:
+ - params:
- name: color
- description: |
- <p>color as a <a href="#/p5.Color">p5.Color</a> object,
- an array of color values, or as a CSS string.</p>
+ description: |-
+ color as a <a href="#/p5.Color">p5.Color</a> object,
+ an array of color values, or as a CSS string.
type: 'p5.Color|Number[]|String'
- name: x
- description: ''
type: Number
- name: 'y'
- description: ''
type: Number
- name: z
- description: ''
type: Number
- chainable: 1
- - line: 634
- params:
+ - params:
- name: color
- description: ''
type: 'p5.Color|Number[]|String'
- name: direction
- description: ''
type: p5.Vector
- chainable: 1
chainable: true
---
diff --git a/src/content/reference/en/p5/disableFriendlyErrors.mdx b/src/content/reference/en/p5/disableFriendlyErrors.mdx
index 6bdc60cd39..aea3e4bf83 100644
--- a/src/content/reference/en/p5/disableFriendlyErrors.mdx
+++ b/src/content/reference/en/p5/disableFriendlyErrors.mdx
@@ -18,12 +18,11 @@ description: >
which takes time to process. Disabling the FES can significantly improve
performance by turning off these checks.</p>
-line: 877
+line: 671
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Disable the FES.
diff --git a/src/content/reference/en/p5/displayDensity.mdx b/src/content/reference/en/p5/displayDensity.mdx
index cb00f50e08..f0b263b1cf 100644
--- a/src/content/reference/en/p5/displayDensity.mdx
+++ b/src/content/reference/en/p5/displayDensity.mdx
@@ -3,14 +3,12 @@ title: displayDensity
module: Environment
submodule: Environment
file: src/core/environment.js
-description: |
- <p>Returns the display's current pixel density.</p>
-line: 1078
+description: Returns the display's current pixel density.
+line: 1120
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -45,6 +43,11 @@ class: p5
return:
description: current pixel density of the display.
type: Number
+overloads:
+ - params: []
+ return:
+ description: current pixel density of the display.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/displayHeight.mdx b/src/content/reference/en/p5/displayHeight.mdx
index 2f353f6763..6d87f0b164 100644
--- a/src/content/reference/en/p5/displayHeight.mdx
+++ b/src/content/reference/en/p5/displayHeight.mdx
@@ -16,13 +16,12 @@ description: >
<p>Note: The actual screen height can be computed as
<code>displayHeight * pixelDensity()</code>.</p>
-line: 621
+line: 647
isConstructor: false
itemtype: property
alt: This example does not render anything.
example:
- |-
-
<div class="norender">
<code>
function setup() {
diff --git a/src/content/reference/en/p5/displayWidth.mdx b/src/content/reference/en/p5/displayWidth.mdx
index bcb4bb81dc..a924491e0f 100644
--- a/src/content/reference/en/p5/displayWidth.mdx
+++ b/src/content/reference/en/p5/displayWidth.mdx
@@ -16,13 +16,12 @@ description: >
<p>Note: The actual screen width can be computed as
<code>displayWidth * pixelDensity()</code>.</p>
-line: 590
+line: 616
isConstructor: false
itemtype: property
alt: This example does not render anything.
example:
- |-
-
<div class="norender">
<code>
function setup() {
diff --git a/src/content/reference/en/p5/dist.mdx b/src/content/reference/en/p5/dist.mdx
index b30c37a6eb..c319c6da8e 100644
--- a/src/content/reference/en/p5/dist.mdx
+++ b/src/content/reference/en/p5/dist.mdx
@@ -1,8 +1,8 @@
---
title: dist
module: Math
-submodule: Calculation
-file: src/math/calculation.js
+submodule: ''
+file: src/math/p5.Vector.js
description: >
<p>Calculates the distance between two points.</p>
@@ -21,12 +21,11 @@ description: >
distance between two <a href="/reference/p5/p5.Vector">p5.Vector</a>
objects.</p>
-line: 155
+line: 1690
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -60,57 +59,142 @@ example:
}
</code>
</div>
+ - |-
+ <div class="norender">
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create p5.Vector objects.
+ let v1 = createVector(1, 0);
+ let v2 = createVector(0, 1);
+
+ // Calculate the distance between them.
+ let d = v1.dist(v2);
+
+ // Prints "1.414..." to the console.
+ print(d);
+ }
+ </code>
+ </div>
+
+ <div class="norender">
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ background(200);
+
+ // Create p5.Vector objects.
+ let v1 = createVector(1, 0);
+ let v2 = createVector(0, 1);
+
+ // Calculate the distance between them.
+ let d = p5.Vector.dist(v1, v2);
+
+ // Prints "1.414..." to the console.
+ print(d);
+ }
+ </code>
+ </div>
+
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+
+ 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 draw() {
+ background(200);
+
+ let origin = createVector(0, 0);
+
+ // Draw the red arrow.
+ let v1 = createVector(50, 50);
+ drawArrow(origin, v1, 'red');
+
+ // Draw the blue arrow.
+ let v2 = createVector(20, 70);
+ drawArrow(origin, v2, 'blue');
+
+ // Purple arrow.
+ let v3 = p5.Vector.sub(v2, v1);
+ drawArrow(v1, v3, 'purple');
+
+ // Style the text.
+ textAlign(CENTER);
+
+ // Display the magnitude. The same as floor(v3.mag());
+ let m = floor(p5.Vector.dist(v1, v2));
+ text(m, 50, 75);
+ }
+
+ // Draws an arrow between two vectors.
+ 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>
class: p5
return:
description: distance between the two points.
type: Number
overloads:
- - line: 155
- params:
+ - params:
- name: x1
- description: |
- <p>x-coordinate of the first point.</p>
+ description: x-coordinate of the first point.
type: Number
- name: y1
- description: |
- <p>y-coordinate of the first point.</p>
+ description: y-coordinate of the first point.
type: Number
- name: x2
- description: |
- <p>x-coordinate of the second point.</p>
+ description: x-coordinate of the second point.
type: Number
- name: y2
- description: |
- <p>y-coordinate of the second point.</p>
+ description: y-coordinate of the second point.
type: Number
return:
description: distance between the two points.
type: Number
- - line: 209
- params:
+ - params:
- name: x1
- description: ''
type: Number
- name: y1
- description: ''
type: Number
- name: z1
- description: |
- <p>z-coordinate of the first point.</p>
+ description: z-coordinate of the first point.
type: Number
- name: x2
- description: ''
type: Number
- name: y2
- description: ''
type: Number
- name: z2
- description: |
- <p>z-coordinate of the second point.</p>
+ description: z-coordinate of the second point.
type: Number
return:
description: distance between the two points.
type: Number
+ - params:
+ - name: v
+ description: 'x, y, and z coordinates of a <a href="#/p5.Vector">p5.Vector</a>.'
+ type: p5.Vector
+ return:
+ description: distance.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/doubleClicked.mdx b/src/content/reference/en/p5/doubleClicked.mdx
index 868e18c69d..d11b7e8547 100644
--- a/src/content/reference/en/p5/doubleClicked.mdx
+++ b/src/content/reference/en/p5/doubleClicked.mdx
@@ -1,8 +1,8 @@
---
title: doubleClicked
module: Events
-submodule: Mouse
-file: src/events/mouse.js
+submodule: Pointer
+file: src/events/pointer.js
description: >
<p>A function that's called once when a mouse button is clicked twice
quickly.</p>
@@ -16,11 +16,7 @@ description: >
<pre><code class="language-js">function doubleClicked() {
// Code to run.
- }
-
- </code></pre>
-
- <p>The mouse system variables, such as <a
+ }</code></pre><p>The mouse system variables, such as <a
href="/reference/p5/mouseX/">mouseX</a> and
<a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
@@ -36,11 +32,7 @@ description: >
if (mouseY > 50) {
// Code to run if the mouse is near the bottom.
}
- }
-
- </code></pre>
-
- <p>The parameter, <code>event</code>, is optional.
+ }</code></pre><p>The parameter, <code>event</code>, is optional.
<code>doubleClicked()</code> is always passed a
<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
@@ -51,12 +43,8 @@ description: >
<pre><code class="language-js">function doubleClicked(event) {
// Code to run that uses the event.
console.log(event);
- }
-
- </code></pre>
-
- <p>On touchscreen devices, code placed in <code>doubleClicked()</code> will
- run after two
+ }</code></pre><p>On touchscreen devices, code placed in
+ <code>doubleClicked()</code> will run after two
touches that occur within a short time.</p>
@@ -67,12 +55,11 @@ description: >
pressing a mouse button. To prevent any default behavior for this event,
add <code>return false;</code> to the end of the function.</p>
-line: 1585
+line: 1775
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let value = 0;
@@ -141,12 +128,12 @@ example:
</code>
</div>
class: p5
-params:
- - name: event
- description: |
- <p>optional <code>MouseEvent</code> argument.</p>
- type: MouseEvent
- optional: true
+overloads:
+ - params:
+ - name: event
+ description: optional <code>MouseEvent</code> argument.
+ optional: 1
+ type: MouseEvent
chainable: false
---
diff --git a/src/content/reference/en/p5/draw.mdx b/src/content/reference/en/p5/draw.mdx
index 088c9df981..b9d1cb7a4e 100644
--- a/src/content/reference/en/p5/draw.mdx
+++ b/src/content/reference/en/p5/draw.mdx
@@ -15,11 +15,8 @@ description: >
<pre><code class="language-js">function draw() {
// Code to run repeatedly.
- }
-
- </code></pre>
-
- <p>This is often called the "draw loop" because p5.js calls the code in
+ }</code></pre><p>This is often called the "draw loop" because p5.js calls the
+ code in
<code>draw()</code> in a loop behind the scenes. By default,
<code>draw()</code> tries to run
@@ -46,12 +43,11 @@ description: >
be resumed by
calling the <a href="/reference/p5/loop/">loop()</a> function.</p>
-line: 176
+line: 671
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -119,6 +115,8 @@ example:
</code>
</div>
class: p5
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5/drawingContext.mdx b/src/content/reference/en/p5/drawingContext.mdx
index 6438861809..2b4043bb10 100644
--- a/src/content/reference/en/p5/drawingContext.mdx
+++ b/src/content/reference/en/p5/drawingContext.mdx
@@ -19,18 +19,17 @@ description: >
href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/">CanvasRenderingContext2D</a>
object.</p>
-line: 1198
+line: 628
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
createCanvas(100, 100);
- background(180);
+ background(200);
// Style the circle using shadows.
drawingContext.shadowOffsetX = 5;
diff --git a/src/content/reference/en/p5/ellipse.mdx b/src/content/reference/en/p5/ellipse.mdx
index c3a4484c03..be17de2f62 100644
--- a/src/content/reference/en/p5/ellipse.mdx
+++ b/src/content/reference/en/p5/ellipse.mdx
@@ -2,7 +2,7 @@
title: ellipse
module: Shape
submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
+file: src/shape/2d_primitives.js
description: >
<p>Draws an ellipse (oval).</p>
@@ -30,12 +30,11 @@ description: >
vertices are used to draw the ellipse in WebGL mode. The default value is
25.</p>
-line: 372
+line: 479
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -50,7 +49,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -65,7 +63,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -80,7 +77,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -95,7 +91,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -112,48 +107,37 @@ example:
</div>
class: p5
overloads:
- - line: 372
- params:
+ - params:
- name: x
- description: |
- <p>x-coordinate of the center of the ellipse.</p>
+ description: x-coordinate of the center of the ellipse.
type: Number
- name: 'y'
- description: |
- <p>y-coordinate of the center of the ellipse.</p>
+ description: y-coordinate of the center of the ellipse.
type: Number
- name: w
- description: |
- <p>width of the ellipse.</p>
+ description: width of the ellipse.
type: Number
- name: h
- description: |
- <p>height of the ellipse.</p>
+ description: height of the ellipse.
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 473
- params:
+ - params:
- name: x
- description: ''
type: Number
- name: 'y'
- description: ''
type: Number
- name: w
- description: ''
type: Number
- name: h
- description: ''
type: Number
- 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 ellipse. Default value is 25. Won't
- draw a stroke for a detail of more than 50.</p>
+ description: |-
+ optional parameter for WebGL mode only. This is to
+ specify the number of vertices that makes up the
+ perimeter of the ellipse. Default value is 25. Won't
+ draw a stroke for a detail of more than 50.
+ optional: 1
type: Integer
- optional: true
chainable: true
---
diff --git a/src/content/reference/en/p5/ellipseMode.mdx b/src/content/reference/en/p5/ellipseMode.mdx
index 2b08a1fdb7..322be9ea8d 100644
--- a/src/content/reference/en/p5/ellipseMode.mdx
+++ b/src/content/reference/en/p5/ellipseMode.mdx
@@ -2,7 +2,7 @@
title: ellipseMode
module: Shape
submodule: Attributes
-file: src/core/shape/attributes.js
+file: src/shape/attributes.js
description: >
<p>Changes where ellipses, circles, and arcs are drawn.</p>
@@ -48,12 +48,11 @@ description: >
and <code>CORNERS</code> are defined this
way. JavaScript is a case-sensitive language.</p>
-line: 12
+line: 87
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -98,11 +97,11 @@ example:
</code>
</div>
class: p5
-params:
- - name: mode
- description: |
- <p>either CENTER, RADIUS, CORNER, or CORNERS</p>
- type: Constant
+overloads:
+ - params:
+ - name: mode
+ description: 'either CENTER, RADIUS, CORNER, or CORNERS'
+ type: CENTER|RADIUS|CORNER|CORNERS
chainable: true
---
diff --git a/src/content/reference/en/p5/ellipsoid.mdx b/src/content/reference/en/p5/ellipsoid.mdx
index 1d59230c71..7452a93406 100644
--- a/src/content/reference/en/p5/ellipsoid.mdx
+++ b/src/content/reference/en/p5/ellipsoid.mdx
@@ -64,12 +64,11 @@ description: >
triangles to form their surfaces. By default, <code>detailY</code> is 16.</p>
<p>Note: <code>ellipsoid()</code> can only be used in WebGL mode.</p>
-line: 1965
+line: 1456
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -195,34 +194,32 @@ example:
</code>
</div>
class: p5
-params:
- - name: radiusX
- description: |
- <p>radius of the ellipsoid along the x-axis. Defaults to 50.</p>
- type: Number
- optional: true
- - name: radiusY
- description: >
- <p>radius of the ellipsoid along the y-axis. Defaults to
- <code>radiusX</code>.</p>
- type: Number
- optional: true
- - name: radiusZ
- description: >
- <p>radius of the ellipsoid along the z-axis. Defaults to
- <code>radiusY</code>.</p>
- type: Number
- optional: true
- - name: detailX
- description: |
- <p>number of triangle subdivisions along the x-axis. Defaults to 24.</p>
- type: Integer
- optional: true
- - name: detailY
- description: |
- <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
- type: Integer
- optional: true
+overloads:
+ - params:
+ - name: radiusX
+ description: radius of the ellipsoid along the x-axis. Defaults to 50.
+ optional: 1
+ type: Number
+ - name: radiusY
+ description: >-
+ radius of the ellipsoid along the y-axis. Defaults to
+ <code>radiusX</code>.
+ optional: 1
+ type: Number
+ - name: radiusZ
+ description: >-
+ radius of the ellipsoid along the z-axis. Defaults to
+ <code>radiusY</code>.
+ optional: 1
+ type: Number
+ - name: detailX
+ description: number of triangle subdivisions along the x-axis. Defaults to 24.
+ optional: 1
+ type: Integer
+ - name: detailY
+ description: number of triangle subdivisions along the y-axis. Defaults to 16.
+ optional: 1
+ type: Integer
chainable: true
---
diff --git a/src/content/reference/en/p5/emissiveMaterial.mdx b/src/content/reference/en/p5/emissiveMaterial.mdx
index ed60736948..0c907914bb 100644
--- a/src/content/reference/en/p5/emissiveMaterial.mdx
+++ b/src/content/reference/en/p5/emissiveMaterial.mdx
@@ -56,12 +56,11 @@ description: >
the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
<p>Note: <code>emissiveMaterial()</code> can only be used in WebGL mode.</p>
-line: 2647
+line: 3209
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -91,45 +90,38 @@ example:
</div>
class: p5
overloads:
- - line: 2647
- params:
+ - params:
- name: v1
- description: |
- <p>red or hue value in the current
- <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ red or hue value in the current
+ <a href="#/p5/colorMode">colorMode()</a>.
type: Number
- name: v2
- description: |
- <p>green or saturation value in the
- current <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ green or saturation value in the
+ current <a href="#/p5/colorMode">colorMode()</a>.
type: Number
- name: v3
- description: |
- <p>blue, brightness, or lightness value in the
- current <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ blue, brightness, or lightness value in the
+ current <a href="#/p5/colorMode">colorMode()</a>.
type: Number
- name: alpha
- description: |
- <p>alpha value in the current
- <a href="#/p5/colorMode">colorMode()</a>.</p>
+ description: |-
+ alpha value in the current
+ <a href="#/p5/colorMode">colorMode()</a>.
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 2717
- params:
+ - params:
- name: gray
- description: |
- <p>grayscale value between 0 (black) and 255 (white).</p>
+ description: grayscale value between 0 (black) and 255 (white).
type: Number
- chainable: 1
- - line: 2723
- params:
+ - params:
- name: color
- description: |
- <p>color as a <a href="#/p5.Color">p5.Color</a> object,
- an array of color values, or a CSS string.</p>
+ description: |-
+ color as a <a href="#/p5.Color">p5.Color</a> object,
+ an array of color values, or a CSS string.
type: 'p5.Color|Number[]|String'
- chainable: 1
chainable: true
---
diff --git a/src/content/reference/en/p5/endClip.mdx b/src/content/reference/en/p5/endClip.mdx
index 0e5d7b732d..17f927cdfd 100644
--- a/src/content/reference/en/p5/endClip.mdx
+++ b/src/content/reference/en/p5/endClip.mdx
@@ -3,15 +3,14 @@ title: endClip
module: Color
submodule: Setting
file: src/color/setting.js
-description: |
- <p>Ends defining a mask that was started with
- <a href="/reference/p5/beginClip/">beginClip()</a>.</p>
-line: 190
+description: |-
+ Ends defining a mask that was started with
+ <a href="/reference/p5/beginClip/">beginClip()</a>.
+line: 218
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -33,6 +32,8 @@ example:
</code>
</div>
class: p5
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5/endContour.mdx b/src/content/reference/en/p5/endContour.mdx
index cc90bfb85d..1cd7669a24 100644
--- a/src/content/reference/en/p5/endContour.mdx
+++ b/src/content/reference/en/p5/endContour.mdx
@@ -1,8 +1,8 @@
---
title: endContour
module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
+submodule: Custom Shapes
+file: src/shape/custom_shapes.js
description: >
<p>Stops creating a hole within a flat shape.</p>
@@ -23,6 +23,13 @@ description: >
<a href="/reference/p5/endShape/">endShape()</a>.</p>
+ <p>By default,
+
+ the controur has an <code>OPEN</code> end, and to close it,
+
+ call <code>endContour(CLOSE)</code>. The CLOSE contour mode closes splines
+ smoothly.</p>
+
<p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
<a href="/reference/p5/rotate/">rotate()</a>, and <a
@@ -46,12 +53,11 @@ description: >
clockwise order. Then, draw vertices for the negative space in
counter-clockwise order.</p>
-line: 1224
+line: 2593
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -74,7 +80,7 @@ example:
vertex(30, 70);
vertex(70, 70);
vertex(70, 30);
- endContour();
+ endContour(CLOSE);
// Stop drawing the shape.
endShape(CLOSE);
@@ -115,7 +121,7 @@ example:
vertex(-20, 20);
vertex(20, 20);
vertex(20, -20);
- endContour();
+ endContour(CLOSE);
// Stop drawing the shape.
endShape(CLOSE);
@@ -123,7 +129,13 @@ example:
</code>
</div>
class: p5
-chainable: true
+overloads:
+ - params:
+ - name: mode
+ description: 'By default, the value is OPEN'
+ optional: 1
+ type: OPEN|CLOSE
+chainable: false
---
diff --git a/src/content/reference/en/p5/endGeometry.mdx b/src/content/reference/en/p5/endGeometry.mdx
deleted file mode 100644
index ce060d9e23..0000000000
--- a/src/content/reference/en/p5/endGeometry.mdx
+++ /dev/null
@@ -1,282 +0,0 @@
----
-title: endGeometry
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
- <p>Stops adding shapes to a new
-
- <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and returns the
- object.</p>
-
- <p>The <code>beginGeometry()</code> and <a
- href="/reference/p5/endGeometry/">endGeometry()</a>
-
- functions help with creating complex 3D shapes from simpler ones such as
-
- <a href="/reference/p5/sphere/">sphere()</a>. <code>beginGeometry()</code>
- begins adding shapes
-
- to a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and
-
- <a href="/reference/p5/endGeometry/">endGeometry()</a> stops adding them.</p>
-
- <p><code>beginGeometry()</code> and <a
- href="/reference/p5/endGeometry/">endGeometry()</a> can help
-
- to make sketches more performant. For example, if a complex 3D shape
-
- doesn’t change while a sketch runs, then it can be created with
-
- <code>beginGeometry()</code> and <a
- href="/reference/p5/endGeometry/">endGeometry()</a>.
-
- Creating a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and
- then
-
- drawing it will run faster than repeatedly drawing the individual pieces.</p>
-
- <p>See <a href="/reference/p5/buildGeometry/">buildGeometry()</a> for another
- way to
-
- build 3D shapes.</p>
-
- <p>Note: <code>endGeometry()</code> can only be used in WebGL mode.</p>
-line: 266
-isConstructor: false
-itemtype: method
-example:
- - |-
-
- <div>
- <code>
- // Click and drag the mouse to view the scene from different angles.
-
- let shape;
-
- function setup() {
- createCanvas(100, 100, WEBGL);
-
- // Start building the p5.Geometry object.
- beginGeometry();
-
- // Add a cone.
- cone();
-
- // Stop building the p5.Geometry object.
- shape = endGeometry();
-
- describe('A white cone drawn on a gray background.');
- }
-
- function draw() {
- background(50);
-
- // Enable orbiting with the mouse.
- orbitControl();
-
- // Turn on the lights.
- lights();
-
- // Style the p5.Geometry object.
- noStroke();
-
- // Draw the p5.Geometry object.
- model(shape);
- }
- </code>
- </div>
-
- <div>
- <code>
- // Click and drag the mouse to view the scene from different angles.
-
- let shape;
-
- function setup() {
- createCanvas(100, 100, WEBGL);
-
- // Create the p5.Geometry object.
- createArrow();
-
- describe('A white arrow drawn on a gray background.');
- }
-
- function draw() {
- background(50);
-
- // Enable orbiting with the mouse.
- orbitControl();
-
- // Turn on the lights.
- lights();
-
- // Style the p5.Geometry object.
- noStroke();
-
- // Draw the p5.Geometry object.
- model(shape);
- }
-
- function createArrow() {
- // Start building the p5.Geometry object.
- beginGeometry();
-
- // Add shapes.
- push();
- rotateX(PI);
- cone(10);
- translate(0, -10, 0);
- cylinder(3, 20);
- pop();
-
- // Stop building the p5.Geometry object.
- shape = endGeometry();
- }
- </code>
- </div>
-
- <div>
- <code>
- // Click and drag the mouse to view the scene from different angles.
-
- let blueArrow;
- let redArrow;
-
- function setup() {
- createCanvas(100, 100, WEBGL);
-
- // Create the arrows.
- redArrow = createArrow('red');
- blueArrow = createArrow('blue');
-
- describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');
- }
-
- function draw() {
- background(200);
-
- // Enable orbiting with the mouse.
- orbitControl();
-
- // Turn on the lights.
- lights();
-
- // Style the arrows.
- noStroke();
-
- // Draw the red arrow.
- model(redArrow);
-
- // Translate and rotate the coordinate system.
- translate(30, 0, 0);
- rotateZ(frameCount * 0.01);
-
- // Draw the blue arrow.
- model(blueArrow);
- }
-
- function createArrow(fillColor) {
- // Start building the p5.Geometry object.
- beginGeometry();
-
- fill(fillColor);
-
- // Add shapes to the p5.Geometry object.
- push();
- rotateX(PI);
- cone(10);
- translate(0, -10, 0);
- cylinder(3, 20);
- pop();
-
- // Stop building the p5.Geometry object.
- let shape = endGeometry();
-
- return shape;
- }
- </code>
- </div>
-
- <div>
- <code>
- // Click and drag the mouse to view the scene from different angles.
-
- let button;
- let particles;
-
- function setup() {
- createCanvas(100, 100, WEBGL);
-
- // Create a button to reset the particle system.
- button = createButton('Reset');
-
- // Call resetModel() when the user presses the button.
- button.mousePressed(resetModel);
-
- // Add the original set of particles.
- resetModel();
- }
-
- function draw() {
- background(50);
-
- // Enable orbiting with the mouse.
- orbitControl();
-
- // Turn on the lights.
- lights();
-
- // Style the particles.
- noStroke();
-
- // Draw the particles.
- model(particles);
- }
-
- function resetModel() {
- // If the p5.Geometry object has already been created,
- // free those resources.
- if (particles) {
- freeGeometry(particles);
- }
-
- // Create a new p5.Geometry object with random spheres.
- particles = createParticles();
- }
-
- function createParticles() {
- // Start building the p5.Geometry object.
- beginGeometry();
-
- // Add shapes.
- for (let i = 0; i < 60; i += 1) {
- // Calculate random coordinates.
- let x = randomGaussian(0, 20);
- let y = randomGaussian(0, 20);
- let z = randomGaussian(0, 20);
-
- push();
- // Translate to the particle's coordinates.
- translate(x, y, z);
- // Draw the particle.
- sphere(5);
- pop();
- }
-
- // Stop building the p5.Geometry object.
- let shape = endGeometry();
-
- return shape;
- }
- </code>
- </div>
-class: p5
-return:
- description: new 3D shape.
- type: p5.Geometry
-chainable: false
----
-
-
-# endGeometry
diff --git a/src/content/reference/en/p5/endShape.mdx b/src/content/reference/en/p5/endShape.mdx
index b36801d297..d4cec4bb89 100644
--- a/src/content/reference/en/p5/endShape.mdx
+++ b/src/content/reference/en/p5/endShape.mdx
@@ -1,10 +1,10 @@
---
title: endShape
module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
+submodule: Custom Shapes
+file: src/shape/vertex.js
description: >
- <p>Begins adding vertices to a custom shape.</p>
+ <p>Concludes the vertices of a custom shape.</p>
<p>The <a href="/reference/p5/beginShape/">beginShape()</a> and
<code>endShape()</code> functions
@@ -23,7 +23,10 @@ description: >
passed, as
in <code>endShape(CLOSE)</code>, then the first and last vertices will be
- connected.</p>
+ connected.
+
+ When CLOSE mode is used for splines (with <code>splineVeertex()</code>), the
+ shape is ended smoothly.</p>
<p>The second parameter, <code>count</code>, is also optional. In WebGL mode,
it’s more
@@ -49,11 +52,9 @@ description: >
built by calling <a href="/reference/p5/vertex/">vertex()</a>,
- <a href="/reference/p5/bezierVertex/">bezierVertex()</a>,
-
- <a href="/reference/p5/quadraticVertex/">quadraticVertex()</a>, and/or
+ <a href="/reference/p5/bezierVertex/">bezierVertex()</a> and/or
- <a href="/reference/p5/curveVertex/">curveVertex()</a>. Calling
+ <a href="/reference/p5/splineVertex/">splineVertex()</a>. Calling
<code>endShape()</code> will stop adding vertices to the
@@ -77,12 +78,11 @@ description: >
<a href="/reference/p5/beginShape/">beginShape()</a> and
<code>endShape()</code>.</p>
-line: 1344
+line: 876
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -114,6 +114,28 @@ example:
</code>
</div>
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100);
+ background(200);
+
+ beginShape();
+
+ splineVertex(32, 91);
+ splineVertex(21, 17);
+ splineVertex(68, 19);
+ splineVertex(82, 91);
+
+ endShape(CLOSE);
+
+ describe(
+ 'A curvy four-sided slightly lopsided blob.'
+ );
+ }
+ </div>
+ </code>
+
<div>
<code>
// Note: A "uniform" is a global variable within a shader program.
@@ -203,18 +225,16 @@ example:
</code>
</div>
class: p5
-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
+overloads:
+ - params:
+ - name: mode
+ description: use CLOSE to close the shape
+ optional: 1
+ type: CLOSE
+ - name: count
+ description: number of times you want to draw/instance the shape (for WebGL mode).
+ optional: 1
+ type: Integer
chainable: true
---
diff --git a/src/content/reference/en/p5/erase.mdx b/src/content/reference/en/p5/erase.mdx
index 53f8d63985..3a8b1c5853 100644
--- a/src/content/reference/en/p5/erase.mdx
+++ b/src/content/reference/en/p5/erase.mdx
@@ -50,12 +50,11 @@ description: >
<a href="/reference/p5/image/">image()</a> and
<a href="/reference/p5/background/">background()</a> functions.</p>
-line: 1591
+line: 1884
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -77,7 +76,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -100,19 +98,20 @@ example:
</code>
</div>
class: p5
-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
+overloads:
+ - params:
+ - name: strengthFill
+ description: |-
+ a number (0-255) for the strength of erasing under a shape's interior.
+ Defaults to 255, which is full strength.
+ optional: 1
+ type: Number
+ - name: strengthStroke
+ description: |-
+ a number (0-255) for the strength of erasing under a shape's edge.
+ Defaults to 255, which is full strength.
+ optional: 1
+ type: Number
chainable: true
---
diff --git a/src/content/reference/en/p5/exitPointerLock.mdx b/src/content/reference/en/p5/exitPointerLock.mdx
index c6dbce7b5e..0030af983d 100644
--- a/src/content/reference/en/p5/exitPointerLock.mdx
+++ b/src/content/reference/en/p5/exitPointerLock.mdx
@@ -1,8 +1,8 @@
---
title: exitPointerLock
module: Events
-submodule: Mouse
-file: src/events/mouse.js
+submodule: Pointer
+file: src/events/pointer.js
description: >
<p>Exits a pointer lock started with
@@ -26,12 +26,11 @@ description: >
an event function such as <a
href="/reference/p5/doubleClicked/">doubleClicked()</a>.</p>
-line: 1932
+line: 2057
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let isLocked = false;
@@ -72,6 +71,8 @@ example:
</code>
</div>
class: p5
+overloads:
+ - params: []
chainable: false
---
diff --git a/src/content/reference/en/p5/exp.mdx b/src/content/reference/en/p5/exp.mdx
index 796a639071..86144632e4 100644
--- a/src/content/reference/en/p5/exp.mdx
+++ b/src/content/reference/en/p5/exp.mdx
@@ -3,15 +3,14 @@ title: exp
module: Math
submodule: Calculation
file: src/math/calculation.js
-description: |
- <p>Calculates the value of Euler's number e (2.71828...) raised to the power
- of a number.</p>
-line: 230
+description: |-
+ Calculates the value of Euler's number e (2.71828...) raised to the power
+ of a number.
+line: 293
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -65,14 +64,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: 'n'
- description: |
- <p>exponent to raise.</p>
- type: Number
return:
description: e^n
type: Number
+overloads:
+ - params:
+ - name: 'n'
+ description: exponent to raise.
+ type: Number
+ return:
+ description: e^n
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/fill.mdx b/src/content/reference/en/p5/fill.mdx
index a06bd2f294..3aeffa01d6 100644
--- a/src/content/reference/en/p5/fill.mdx
+++ b/src/content/reference/en/p5/fill.mdx
@@ -34,12 +34,11 @@ description: >
RGB,
with each value in the range from 0 to 255.</p>
-line: 982
+line: 1429
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -221,63 +220,45 @@ example:
</div>
class: p5
overloads:
- - line: 982
- params:
+ - params:
- name: v1
- description: >
- <p>red value if color mode is RGB or hue value if color mode is
- HSB.</p>
+ description: red value if color mode is RGB or hue value if color mode is HSB.
type: Number
- name: v2
- description: >
- <p>green value if color mode is RGB or saturation value if color mode
- is HSB.</p>
+ description: >-
+ green value if color mode is RGB or saturation value if color mode is
+ HSB.
type: Number
- name: v3
- description: >
- <p>blue value if color mode is RGB or brightness value if color mode
- is HSB.</p>
+ description: >-
+ blue value if color mode is RGB or brightness value if color mode is
+ HSB.
type: Number
- name: alpha
- description: >
- <p>alpha value, controls transparency (0 - transparent, 255 -
- opaque).</p>
+ description: 'alpha value, controls transparency (0 - transparent, 255 - opaque).'
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 1187
- params:
+ - params:
- name: value
- description: |
- <p>a color string.</p>
+ description: a color string.
type: String
- chainable: 1
- - line: 1193
- params:
+ - params:
- name: gray
- description: |
- <p>a grayscale value.</p>
+ description: a grayscale value.
type: Number
- name: alpha
- description: ''
+ optional: 1
type: Number
- optional: true
- chainable: 1
- - line: 1200
- params:
+ - params:
- name: values
- description: |
- <p>an array containing the red, green, blue &
- and alpha components of the color.</p>
+ description: |-
+ an array containing the red, green, blue &
+ and alpha components of the color.
type: 'Number[]'
- chainable: 1
- - line: 1207
- params:
+ - params:
- name: color
- description: |
- <p>the fill color.</p>
+ description: the fill color.
type: p5.Color
- chainable: 1
chainable: true
---
diff --git a/src/content/reference/en/p5/filter.mdx b/src/content/reference/en/p5/filter.mdx
index 9a58dabb73..fe3d7e1786 100644
--- a/src/content/reference/en/p5/filter.mdx
+++ b/src/content/reference/en/p5/filter.mdx
@@ -70,22 +70,19 @@ description: >
<a href="/reference/p5/createFilterShader/">createFilterShader()</a> for more
information.</p>
-line: 442
+line: 695
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -103,12 +100,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -126,12 +121,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -149,12 +142,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -172,12 +163,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -195,12 +184,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -218,12 +205,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -241,12 +226,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -264,12 +247,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -285,40 +266,37 @@ example:
</div>
class: p5
overloads:
- - line: 442
- params:
+ - params:
- name: filterType
- description: |
- <p>either THRESHOLD, GRAY, OPAQUE, INVERT,
- POSTERIZE, BLUR, ERODE, DILATE or BLUR.</p>
- type: Constant
+ description: |-
+ either THRESHOLD, GRAY, OPAQUE, INVERT,
+ POSTERIZE, BLUR, ERODE, DILATE or BLUR.
+ type: THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|BLUR|ERODE|DILATE|BLUR
- name: filterParam
- description: |
- <p>parameter unique to each filter.</p>
+ description: parameter unique to each filter.
+ optional: 1
type: Number
- optional: true
- name: useWebGL
- description: |
- <p>flag to control whether to use fast
- WebGL filters (GPU) or original image
- filters (CPU); defaults to <code>true</code>.</p>
+ description: |-
+ flag to control whether to use fast
+ WebGL filters (GPU) or original image
+ filters (CPU); defaults to <code>true</code>.
+ optional: 1
type: Boolean
- optional: true
- - line: 715
- params:
+ - params:
- name: filterType
- description: ''
- type: Constant
+ type: THRESHOLD|GRAY|OPAQUE|INVERT|POSTERIZE|BLUR|ERODE|DILATE|BLUR
+ - name: filterParam
+ optional: 1
+ type: Number
- name: useWebGL
- description: ''
+ optional: 1
type: Boolean
- optional: true
- - line: 720
- params:
+ - params:
- name: shaderFilter
- description: |
- <p>shader that's been loaded, with the
- frag shader using a <code>tex0</code> uniform.</p>
+ description: |-
+ shader that's been loaded, with the
+ frag shader using a <code>tex0</code> uniform.
type: p5.Shader
chainable: false
---
diff --git a/src/content/reference/en/p5/float.mdx b/src/content/reference/en/p5/float.mdx
index 053a3475ea..6b234f1844 100644
--- a/src/content/reference/en/p5/float.mdx
+++ b/src/content/reference/en/p5/float.mdx
@@ -27,12 +27,11 @@ description: >
<code>float('giraffe')</code>,
then the value <code>NaN</code> (not a number) will be returned.</p>
-line: 10
+line: 84
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -88,20 +87,16 @@ return:
description: converted number.
type: Number
overloads:
- - line: 10
- params:
+ - params:
- name: str
- description: |
- <p>string to convert.</p>
+ description: string to convert.
type: String
return:
description: converted number.
type: Number
- - line: 80
- params:
+ - params:
- name: ns
- description: |
- <p>array of strings to convert.</p>
+ description: array of strings to convert.
type: 'String[]'
return:
description: converted numbers.
diff --git a/src/content/reference/en/p5/floor.mdx b/src/content/reference/en/p5/floor.mdx
index f1a03a22de..c8554217a8 100644
--- a/src/content/reference/en/p5/floor.mdx
+++ b/src/content/reference/en/p5/floor.mdx
@@ -3,15 +3,14 @@ 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 a number.</p>
-line: 294
+description: |-
+ Calculates the closest integer value that is less than or equal to the
+ value of a number.
+line: 331
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -39,14 +38,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: 'n'
- description: |
- <p>number to round down.</p>
- type: Number
return:
description: rounded down number.
type: Integer
+overloads:
+ - params:
+ - name: 'n'
+ description: number to round down.
+ type: Number
+ return:
+ description: rounded down number.
+ type: Integer
chainable: false
---
diff --git a/src/content/reference/en/p5/focused.mdx b/src/content/reference/en/p5/focused.mdx
index eb35842004..5b9f9d97a6 100644
--- a/src/content/reference/en/p5/focused.mdx
+++ b/src/content/reference/en/p5/focused.mdx
@@ -10,12 +10,11 @@ description: >
not.</p>
<p>Note: The browser window can only receive input if it's focused.</p>
-line: 174
+line: 208
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Open this example in two separate browser
diff --git a/src/content/reference/en/p5/fontAscent.mdx b/src/content/reference/en/p5/fontAscent.mdx
new file mode 100644
index 0000000000..22c6c463ba
--- /dev/null
+++ b/src/content/reference/en/p5/fontAscent.mdx
@@ -0,0 +1,70 @@
+---
+title: fontAscent
+module: Typography
+submodule: ''
+file: src/type/textCore.js
+description: >
+ <p>Returns the loose ascent of the text based on the font's intrinsic
+ metrics.</p>
+
+ <p>The <code>fontAscent()</code> function calculates the ascent of the text
+ using the font's
+
+ intrinsic metrics (e.g., <code>fontBoundingBoxAscent</code>). This value
+ represents the space
+
+ above the baseline that the font inherently occupies, and is useful for layout
+ purposes when
+
+ an approximate vertical measurement is required.</p>
+line: 1401
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(300, 300);
+ background(220);
+
+ textSize(48);
+ textAlign(LEFT, BASELINE);
+ textFont('Georgia');
+
+ let s = "Hello, p5.js!";
+ let x = 50, y = 150;
+
+ fill(0);
+ text(s, x, y);
+
+ // Get the font descent of the current font
+ let fasc = fontAscent();
+
+ // Draw a red line at the baseline and a blue line at the ascent position
+ stroke('red');
+ line(x, y, x + 200, y); // Baseline
+ stroke('blue');
+ line(x, y - fasc, x + 200, y - fasc); // Font ascent position
+
+ noStroke();
+ fill(0);
+ textSize(16);
+ text("fontAscent: " + fasc.toFixed(2) + " pixels", x, y + fdesc + 20);
+ }
+ </code>
+ </div>
+class: p5
+return:
+ description: The loose ascent value in pixels.
+ type: Number
+overloads:
+ - params: []
+ return:
+ description: The loose ascent value in pixels.
+ type: Number
+chainable: false
+---
+
+
+# fontAscent
diff --git a/src/content/reference/en/p5/fontBounds.mdx b/src/content/reference/en/p5/fontBounds.mdx
new file mode 100644
index 0000000000..1f2f7fe261
--- /dev/null
+++ b/src/content/reference/en/p5/fontBounds.mdx
@@ -0,0 +1,100 @@
+---
+title: fontBounds
+module: Typography
+submodule: ''
+file: src/type/textCore.js
+description: >
+ <p>Computes a generic (non-tight) bounding box for a block of text.</p>
+
+ <p>The <code>fontBounds()</code> function calculates the bounding box for the
+ text based on the
+
+ font's intrinsic metrics (such as <code>fontBoundingBoxAscent</code> and
+
+ <code>fontBoundingBoxDescent</code>). Unlike <code>textBounds()</code>, which
+ measures the exact
+
+ pixel boundaries of the rendered text, <code>fontBounds()</code> provides a
+ looser measurement
+
+ derived from the font’s default spacing. This measurement is useful for layout
+ purposes where
+
+ a consistent approximation of the text's dimensions is desired.</p>
+line: 1401
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(300, 200);
+ background(240);
+
+ textSize(32);
+ textAlign(LEFT, TOP);
+ textFont('Georgia');
+
+ let txt = "Hello, World!";
+ // Compute the bounding box based on the font's intrinsic metrics
+ let bounds = fontBounds(txt, 50, 50);
+
+ fill(0);
+ text(txt, 50, 50);
+
+ noFill();
+ stroke('green');
+ rect(bounds.x, bounds.y, bounds.w, bounds.h);
+
+ noStroke();
+ fill(50);
+ textSize(15);
+ text("Font Bounds: x=" + bounds.x.toFixed(1) + ", y=" + bounds.y.toFixed(1) +
+ ", w=" + bounds.w.toFixed(1) + ", h=" + bounds.h.toFixed(1), 8, 100);
+ }
+ </code>
+ </div>
+class: p5
+return:
+ description: >-
+ An object with properties <code>x</code>, <code>y</code>, <code>w</code>,
+ and <code>h</code> representing the loose
+
+ bounding box of the text based on the font's intrinsic metrics.
+ type: Object
+overloads:
+ - params:
+ - name: str
+ description: The text string to measure.
+ type: String
+ - name: x
+ description: The x-coordinate where the text is drawn.
+ type: Number
+ - name: 'y'
+ description: The y-coordinate where the text is drawn.
+ type: Number
+ - name: width
+ description: |-
+ (Optional) The maximum width available for the text block.
+ When specified, the text may be wrapped to fit within this width.
+ optional: 1
+ type: Number
+ - name: height
+ description: |-
+ (Optional) The maximum height available for the text block.
+ Any lines exceeding this height will be truncated.
+ optional: 1
+ type: Number
+ return:
+ description: >-
+ An object with properties <code>x</code>, <code>y</code>,
+ <code>w</code>, and <code>h</code> representing the loose
+
+ bounding box of the text based on the font's intrinsic metrics.
+ type: Object
+chainable: false
+---
+
+
+# fontBounds
diff --git a/src/content/reference/en/p5/fontDescent.mdx b/src/content/reference/en/p5/fontDescent.mdx
new file mode 100644
index 0000000000..dace838cbd
--- /dev/null
+++ b/src/content/reference/en/p5/fontDescent.mdx
@@ -0,0 +1,70 @@
+---
+title: fontDescent
+module: Typography
+submodule: ''
+file: src/type/textCore.js
+description: >
+ <p>Returns the loose descent of the text based on the font's intrinsic
+ metrics.</p>
+
+ <p>The <code>fontDescent()</code> function calculates the descent of the text
+ using the font's
+
+ intrinsic metrics (e.g., <code>fontBoundingBoxDescent</code>). This value
+ represents the space
+
+ below the baseline that the font inherently occupies, and is useful for layout
+ purposes when
+
+ an approximate vertical measurement is required.</p>
+line: 1401
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(300, 300);
+ background(220);
+
+ textSize(48);
+ textAlign(LEFT, BASELINE);
+ textFont('Georgia');
+
+ let s = "Hello, p5.js!";
+ let x = 50, y = 150;
+
+ fill(0);
+ text(s, x, y);
+
+ // Get the font descent of the current font
+ let fdesc = fontDescent();
+
+ // Draw a red line at the baseline and a blue line at the descent position
+ stroke('red');
+ line(x, y, x + 200, y); // Baseline
+ stroke('blue');
+ line(x, y + fdesc, x + 200, y + fdesc); // Font descent position
+
+ noStroke();
+ fill(0);
+ textSize(16);
+ text("fontDescent: " + fdesc.toFixed(2) + " pixels", x, y + fdesc + 20);
+ }
+ </code>
+ </div>
+class: p5
+return:
+ description: The loose descent value in pixels.
+ type: Number
+overloads:
+ - params: []
+ return:
+ description: The loose descent value in pixels.
+ type: Number
+chainable: false
+---
+
+
+# fontDescent
diff --git a/src/content/reference/en/p5/fontWidth.mdx b/src/content/reference/en/p5/fontWidth.mdx
new file mode 100644
index 0000000000..55a66b8798
--- /dev/null
+++ b/src/content/reference/en/p5/fontWidth.mdx
@@ -0,0 +1,72 @@
+---
+title: fontWidth
+module: Typography
+submodule: ''
+file: src/type/textCore.js
+description: >
+ <p>Returns the loose width of a text string based on the current font.</p>
+
+ <p>The <code>fontWidth()</code> function measures the width of the provided
+ text string using
+
+ the font's default measurement (i.e., the width property from the text metrics
+ returned by
+
+ the browser). Unlike <code>textWidth()</code>, which calculates the tight
+ pixel boundaries
+
+ of the text glyphs, <code>fontWidth()</code> uses the font's intrinsic
+ spacing, which may include
+
+ additional space for character spacing and kerning. This makes it useful for
+ scenarios where
+
+ an approximate width is sufficient for layout and positioning.</p>
+line: 1401
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(300, 200);
+ background(240);
+
+ textSize(32);
+ textAlign(LEFT, TOP);
+ textFont('Georgia');
+
+ let s = "Hello, World!";
+ let fw = fontWidth(s);
+
+ fill(0);
+ text(s, 50, 50);
+
+ stroke('blue');
+ line(50, 90, 50 + fw, 90);
+
+ noStroke();
+ fill(50);
+ textSize(16);
+ text("Font width: " + fw.toFixed(2) + " pixels", 50, 100);
+ }
+ </code>
+ </div>
+class: p5
+return:
+ description: The loose width of the text in pixels.
+ type: Number
+overloads:
+ - params:
+ - name: theText
+ description: The text string to measure.
+ type: String
+ return:
+ description: The loose width of the text in pixels.
+ type: Number
+chainable: false
+---
+
+
+# fontWidth
diff --git a/src/content/reference/en/p5/for.mdx b/src/content/reference/en/p5/for.mdx
index 65ced3c14c..57a9330f70 100644
--- a/src/content/reference/en/p5/for.mdx
+++ b/src/content/reference/en/p5/for.mdx
@@ -15,34 +15,21 @@ description: >
<pre><code class="language-js">for (let x = 10; x < 100; x += 20) {
line(x, 25, x, 75);
- }
-
- </code></pre>
-
- <p>The loop's header begins with the keyword <code>for</code>. Loops generally
- count up
+ }</code></pre><p>The loop's header begins with the keyword <code>for</code>.
+ Loops generally count up
or count down as they repeat, or iterate. The statements in parentheses
<code>let x = 10; x < 100; x += 20</code> tell the loop how it should
repeat:</p>
- <ul>
-
- <li><code>let x = 10</code> tells the loop to start counting at
+ <ul><li><code>let x = 10</code> tells the loop to start counting at
<code>10</code> and keep track of iterations using the variable
- <code>x</code>.</li>
-
- <li><code>x < 100</code> tells the loop to count up to, but not including,
- <code>100</code>.</li>
-
- <li><code>x += 20</code> tells the loop to count up by <code>20</code> at the
- end of each iteration.</li>
-
- </ul>
-
- <p>The code between the curly braces <code>{}</code> is the loop's body.
- Statements in the
+ <code>x</code>.</li><li><code>x < 100</code> tells the loop to count up to,
+ but not including, <code>100</code>.</li><li><code>x += 20</code> tells the
+ loop to count up by <code>20</code> at the end of each
+ iteration.</li></ul><p>The code between the curly braces <code>{}</code> is
+ the loop's body. Statements in the
loop body are repeated during each iteration of the loop.</p>
@@ -56,12 +43,8 @@ description: >
<pre><code class="language-js">for (let x = 10; x < 100; x = 20) {
line(x, 25, x, 75);
- }
-
- </code></pre>
-
- <p>The statement <code>x = 20</code> keeps the variable <code>x</code> stuck
- at <code>20</code>, which is
+ }</code></pre><p>The statement <code>x = 20</code> keeps the variable
+ <code>x</code> stuck at <code>20</code>, which is
always less than <code>100</code>.</p>
@@ -69,12 +52,8 @@ description: >
<pre><code class="language-js">for (let d = 100; d > 0; d -= 10) {
circle(50, 50, d);
- }
-
- </code></pre>
-
- <p><code>for</code> loops can also contain other loops. The following nested
- loop draws a
+ }</code></pre><p><code>for</code> loops can also contain other loops. The
+ following nested loop draws a
grid of points:</p>
@@ -87,12 +66,8 @@ description: >
point(x, y);
}
- }
-
- </code></pre>
-
- <p><code>for</code> loops are also helpful for iterating through the elements
- of an
+ }</code></pre><p><code>for</code> loops are also helpful for iterating through
+ the elements of an
array. For example, it's common to iterate through an array that contains
@@ -109,12 +84,8 @@ description: >
// Draw a circle.
circle(xCoordinates[i], 50, 20);
- }
-
- </code></pre>
-
- <p>If the array's values aren't modified, the <code>for...of</code> statement
- can
+ }</code></pre><p>If the array's values aren't modified, the
+ <code>for...of</code> statement can
simplify the code. They're similar to <code>for</code> loops in Python and
<code>for-each</code>
@@ -128,23 +99,16 @@ description: >
for (let i = 0; i < xCoordinates.length; i += 1) {
circle(xCoordinates[i], 50, 20);
- }
-
- </code></pre>
-
- <pre><code class="language-js">// Draw circles with a for...of statement.
+ }</code></pre><pre><code class="language-js">// Draw circles with a for...of
+ statement.
let xCoordinates = [20, 40, 60];
for (let x of xCoordinates) {
circle(x, 50, 20);
- }
-
- </code></pre>
-
- <p>In the code snippets above, the variables <code>i</code> and <code>x</code>
- have different roles.</p>
+ }</code></pre><p>In the code snippets above, the variables <code>i</code> and
+ <code>x</code> have different roles.</p>
<p>In the first snippet, <code>i</code> counts from <code>0</code> up to
<code>2</code>, which is one less than
@@ -165,12 +129,11 @@ description: >
updates its value to <code>40</code> and then <code>60</code> during the next
iterations.</p>
-line: 1648
+line: 1
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
diff --git a/src/content/reference/en/p5/fract.mdx b/src/content/reference/en/p5/fract.mdx
index 61da23fcc5..cf1e2a9a3c 100644
--- a/src/content/reference/en/p5/fract.mdx
+++ b/src/content/reference/en/p5/fract.mdx
@@ -7,12 +7,11 @@ description: |
<p>Calculates the fractional part of a number.</p>
<p>A number's fractional part includes its decimal values. For example,
<code>fract(12.34)</code> returns 0.34.</p>
-line: 1048
+line: 1096
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -37,14 +36,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: 'n'
- description: |
- <p>number whose fractional part will be found.</p>
- type: Number
return:
description: fractional part of n.
type: Number
+overloads:
+ - params:
+ - name: 'n'
+ description: number whose fractional part will be found.
+ type: Number
+ return:
+ description: fractional part of n.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/frameCount.mdx b/src/content/reference/en/p5/frameCount.mdx
index 3ec8ab1bdd..93939bc1a8 100644
--- a/src/content/reference/en/p5/frameCount.mdx
+++ b/src/content/reference/en/p5/frameCount.mdx
@@ -15,12 +15,11 @@ description: >
increments by 1 each time the code in <a href="/reference/p5/draw/">draw()</a>
finishes executing.</p>
-line: 69
+line: 123
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
diff --git a/src/content/reference/en/p5/frameRate.mdx b/src/content/reference/en/p5/frameRate.mdx
index 63cef18ac0..edd7e39c51 100644
--- a/src/content/reference/en/p5/frameRate.mdx
+++ b/src/content/reference/en/p5/frameRate.mdx
@@ -21,12 +21,11 @@ description: >
frame rate.
The value returned is an approximation.</p>
-line: 330
+line: 409
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -84,16 +83,15 @@ example:
</code>
</div>
class: p5
+return:
+ description: current frame rate.
+ type: Number
overloads:
- - line: 330
- params:
+ - params:
- name: fps
- description: |
- <p>number of frames to draw per second.</p>
+ description: number of frames to draw per second.
type: Number
- chainable: 1
- - line: 404
- params: []
+ - params: []
return:
description: current frame rate.
type: Number
diff --git a/src/content/reference/en/p5/freeGeometry.mdx b/src/content/reference/en/p5/freeGeometry.mdx
index a106d12357..feace5845c 100644
--- a/src/content/reference/en/p5/freeGeometry.mdx
+++ b/src/content/reference/en/p5/freeGeometry.mdx
@@ -45,12 +45,11 @@ description: >
the first time it’s redrawn.</p>
<p>Note: <code>freeGeometry()</code> can only be used in WebGL mode.</p>
-line: 748
+line: 451
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -137,11 +136,11 @@ example:
</code>
</div>
class: p5
-params:
- - name: geometry
- description: |
- <p>3D shape whose resources should be freed.</p>
- type: p5.Geometry
+overloads:
+ - params:
+ - name: geometry
+ description: 3D shape whose resources should be freed.
+ type: p5.Geometry
chainable: false
---
diff --git a/src/content/reference/en/p5/freqToMidi.mdx b/src/content/reference/en/p5/freqToMidi.mdx
deleted file mode 100644
index f4a0186c17..0000000000
--- a/src/content/reference/en/p5/freqToMidi.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-class: p5
-params:
- - name: frequency
- description: |
- <p>A freqeuncy, for example, the "A"
- above Middle C is 440Hz</p>
- type: Number
-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
index fb8968787d..7cf6bd8307 100644
--- a/src/content/reference/en/p5/frustum.mdx
+++ b/src/content/reference/en/p5/frustum.mdx
@@ -59,12 +59,11 @@ description: >
and the origin.</p>
<p>Note: <code>frustum()</code> can only be used in WebGL mode.</p>
-line: 522
+line: 3687
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -128,43 +127,44 @@ example:
</code>
</div>
class: p5
-params:
- - name: left
- description: >
- <p>x-coordinate of the frustum’s left plane. Defaults to <code>-width /
- 20</code>.</p>
- type: Number
- optional: true
- - name: right
- description: >
- <p>x-coordinate of the frustum’s right plane. Defaults to <code>width /
- 20</code>.</p>
- type: Number
- optional: true
- - name: bottom
- description: >
- <p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
- 20</code>.</p>
- type: Number
- optional: true
- - name: top
- description: >
- <p>y-coordinate of the frustum’s top plane. Defaults to <code>-height /
- 20</code>.</p>
- type: Number
- optional: true
- - name: near
- description: >
- <p>z-coordinate of the frustum’s near plane. Defaults to <code>0.1 *
- 800</code>.</p>
- type: Number
- optional: true
- - name: far
- description: >
- <p>z-coordinate of the frustum’s far plane. Defaults to <code>10 *
- 800</code>.</p>
- type: Number
- optional: true
+overloads:
+ - params:
+ - name: left
+ description: >-
+ x-coordinate of the frustum’s left plane. Defaults to <code>-width /
+ 20</code>.
+ optional: 1
+ type: Number
+ - name: right
+ description: >-
+ x-coordinate of the frustum’s right plane. Defaults to <code>width /
+ 20</code>.
+ optional: 1
+ type: Number
+ - name: bottom
+ description: >-
+ y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
+ 20</code>.
+ optional: 1
+ type: Number
+ - name: top
+ description: >-
+ y-coordinate of the frustum’s top plane. Defaults to <code>-height /
+ 20</code>.
+ optional: 1
+ type: Number
+ - name: near
+ description: >-
+ z-coordinate of the frustum’s near plane. Defaults to <code>0.1 *
+ 800</code>.
+ optional: 1
+ type: Number
+ - name: far
+ description: >-
+ z-coordinate of the frustum’s far plane. Defaults to <code>10 *
+ 800</code>.
+ optional: 1
+ type: Number
chainable: true
---
diff --git a/src/content/reference/en/p5/fullscreen.mdx b/src/content/reference/en/p5/fullscreen.mdx
index fd29211a86..e0ff5716c7 100644
--- a/src/content/reference/en/p5/fullscreen.mdx
+++ b/src/content/reference/en/p5/fullscreen.mdx
@@ -19,12 +19,11 @@ description: >
called with
user input such as a mouse press.</p>
-line: 950
+line: 990
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -44,15 +43,18 @@ example:
</code>
</div>
class: p5
-params:
- - name: val
- description: |
- <p>whether the sketch should be in fullscreen mode.</p>
- type: Boolean
- optional: true
return:
description: current fullscreen state.
type: Boolean
+overloads:
+ - params:
+ - name: val
+ description: whether the sketch should be in fullscreen mode.
+ optional: 1
+ type: Boolean
+ return:
+ description: current fullscreen state.
+ type: Boolean
chainable: false
---
diff --git a/src/content/reference/en/p5/function.mdx b/src/content/reference/en/p5/function.mdx
index 76f6a9d676..b4d4825447 100644
--- a/src/content/reference/en/p5/function.mdx
+++ b/src/content/reference/en/p5/function.mdx
@@ -3,12 +3,12 @@ title: function
module: Foundation
submodule: Foundation
file: src/core/reference.js
-description: "<p>A named group of statements.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions/\" target=\"_blank\">Functions</a>\nhelp with organizing and reusing code. For example, functions make it easy\nto express the idea \"Draw a flower.\":</p>\n<pre><code class=\"language-js\">function drawFlower() {\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Draw a flower emoji.\n text('\U0001F338', 50, 50);\n}\n</code></pre>\n<p>The function header begins with the keyword <code>function</code>. The function's\nname, <code>drawFlower</code>, is followed by parentheses <code>()</code> and curly braces <code>{}</code>.\nThe code between the curly braces is called the function's body. The\nfunction's body runs when the function is called like so:</p>\n<pre><code class=\"language-js\">drawFlower();\n</code></pre>\n<p>Functions can accept inputs by adding parameters to their headers.\nParameters are placeholders for values that will be provided when the\nfunction is called. For example, the <code>drawFlower()</code> function could include\na parameter for the flower's size:</p>\n<pre><code class=\"language-js\">function drawFlower(size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n text('\U0001F338', 50, 50);\n}\n</code></pre>\n<p>Parameters are part of the function's declaration. Arguments are provided\nby the code that calls a function. When a function is called, arguments are\nassigned to parameters:</p>\n<pre><code class=\"language-js\">// The argument 20 is assigned to the parameter size.\ndrawFlower(20);\n</code></pre>\n<p>Functions can have multiple parameters separated by commas. Parameters\ncan have any type. For example, the <code>drawFlower()</code> function could accept\n<code>Number</code> parameters for the flower's x- and y-coordinates along with its\nsize:</p>\n<pre><code class=\"language-js\">function drawFlower(x, y, size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n // Use the x and y parameters.\n text('\U0001F338', x, y);\n}\n</code></pre>\n<p>Functions can also produce outputs by adding a <code>return</code> statement:</p>\n<pre><code class=\"language-js\">function double(x) {\n let answer = 2 * x;\n return answer;\n}\n</code></pre>\n<p>The expression following <code>return</code> can produce an output that's used\nelsewhere. For example, the output of the <code>double()</code> function can be\nassigned to a variable:</p>\n<pre><code class=\"language-js\">let six = double(3);\ntext(`3 x 2 = ${six}`, 50, 50);\n</code></pre>\n"
-line: 317
+description: "<p>A named group of statements.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions/\" target=\"_blank\">Functions</a>\nhelp with organizing and reusing code. For example, functions make it easy\nto express the idea \"Draw a flower.\":</p>\n<pre><code class=\"language-js\">function drawFlower() {\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Draw a flower emoji.\n text('\U0001F338', 50, 50);\n}</code></pre><p>The function header begins with the keyword <code>function</code>. The function's\nname, <code>drawFlower</code>, is followed by parentheses <code>()</code> and curly braces <code>{}</code>.\nThe code between the curly braces is called the function's body. The\nfunction's body runs when the function is called like so:</p>\n<pre><code class=\"language-js\">drawFlower();</code></pre><p>Functions can accept inputs by adding parameters to their headers.\nParameters are placeholders for values that will be provided when the\nfunction is called. For example, the <code>drawFlower()</code> function could include\na parameter for the flower's size:</p>\n<pre><code class=\"language-js\">function drawFlower(size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n text('\U0001F338', 50, 50);\n}</code></pre><p>Parameters are part of the function's declaration. Arguments are provided\nby the code that calls a function. When a function is called, arguments are\nassigned to parameters:</p>\n<pre><code class=\"language-js\">// The argument 20 is assigned to the parameter size.\ndrawFlower(20);</code></pre><p>Functions can have multiple parameters separated by commas. Parameters\ncan have any type. For example, the <code>drawFlower()</code> function could accept\n<code>Number</code> parameters for the flower's x- and y-coordinates along with its\nsize:</p>\n<pre><code class=\"language-js\">function drawFlower(x, y, size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n // Use the x and y parameters.\n text('\U0001F338', x, y);\n}</code></pre><p>Functions can also produce outputs by adding a <code>return</code> statement:</p>\n<pre><code class=\"language-js\">function double(x) {\n let answer = 2 * x;\n return answer;\n}</code></pre><p>The expression following <code>return</code> can produce an output that's used\nelsewhere. For example, the output of the <code>double()</code> function can be\nassigned to a variable:</p>\n<pre><code class=\"language-js\">let six = double(3);\ntext(`3 x 2 = ${six}`, 50, 50);</code></pre>"
+line: 1
isConstructor: false
itemtype: property
example:
- - "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Call the drawFlower() function.\n drawFlower();\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower() {\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Draw a flower emoji.\n text('\U0001F338', 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Call the drawFlower() function and pass values for\n // its position and size.\n drawFlower(50, 50, 20);\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower(x, y, size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n // Use the x and y parameters.\n text('\U0001F338', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The message \"Hello, \U0001F30D!\" written on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a greeting.\n let greeting = createGreeting('\U0001F30D');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the greeting.\n text(greeting, 50, 50);\n}\n\n// Return a string with a personalized greeting.\nfunction createGreeting(name) {\n let message = `Hello, ${name}!`;\n return message;\n}\n</code>\n</div>"
+ - "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Call the drawFlower() function.\n drawFlower();\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower() {\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Draw a flower emoji.\n text('\U0001F338', 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Call the drawFlower() function and pass values for\n // its position and size.\n drawFlower(50, 50, 20);\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower(x, y, size) {\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Use the size parameter.\n textSize(size);\n\n // Draw a flower emoji.\n // Use the x and y parameters.\n text('\U0001F338', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The message \"Hello, \U0001F30D!\" written on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a greeting.\n let greeting = createGreeting('\U0001F30D');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the greeting.\n text(greeting, 50, 50);\n}\n\n// Return a string with a personalized greeting.\nfunction createGreeting(name) {\n let message = `Hello, ${name}!`;\n return message;\n}\n</code>\n</div>"
class: p5
---
diff --git a/src/content/reference/en/p5/get.mdx b/src/content/reference/en/p5/get.mdx
index acd34d03aa..4971d68b70 100644
--- a/src/content/reference/en/p5/get.mdx
+++ b/src/content/reference/en/p5/get.mdx
@@ -39,22 +39,19 @@ description: >
with
<a href="/reference/p5/p5.Image">p5.Image</a> objects.</p>
-line: 820
+line: 884
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -75,12 +72,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -105,12 +100,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -131,42 +124,33 @@ return:
description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
type: p5.Image
overloads:
- - line: 820
- params:
+ - params:
- name: x
- description: |
- <p>x-coordinate of the pixel.</p>
+ description: x-coordinate of the pixel.
type: Number
- name: 'y'
- description: |
- <p>y-coordinate of the pixel.</p>
+ description: y-coordinate of the pixel.
type: Number
- name: w
- description: |
- <p>width of the subsection to be returned.</p>
+ description: width of the subsection to be returned.
type: Number
- name: h
- description: |
- <p>height of the subsection to be returned.</p>
+ description: height of the subsection to be returned.
type: Number
return:
description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
type: p5.Image
- - line: 931
- params: []
+ - params: []
return:
description: whole canvas as a <a href="#/p5.Image">p5.Image</a>.
type: p5.Image
- - line: 935
- params:
+ - params:
- name: x
- description: ''
type: Number
- name: 'y'
- description: ''
type: Number
return:
- description: 'color of the pixel at (x, y) in array format `[R, G, B, A]`.'
+ description: 'color of the pixel at (x, y) in array format <code>[R, G, B, A]</code>.'
type: 'Number[]'
chainable: false
---
diff --git a/src/content/reference/en/p5/getAudioContext.mdx b/src/content/reference/en/p5/getAudioContext.mdx
deleted file mode 100644
index 51e56ffb2c..0000000000
--- a/src/content/reference/en/p5/getAudioContext.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-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
-isConstructor: false
-itemtype: method
-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>
-class: p5
-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
index aecd5fee77..c91571760a 100644
--- a/src/content/reference/en/p5/getItem.mdx
+++ b/src/content/reference/en/p5/getItem.mdx
@@ -39,12 +39,11 @@ description: >
<p>Note: Sensitive data such as passwords or personal information shouldn't be
stored in <code>localStorage</code>.</p>
-line: 164
+line: 280
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -133,14 +132,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: key
- description: |
- <p>name of the value.</p>
- type: String
return:
description: stored item.
type: String|Number|Boolean|Object|Array
+overloads:
+ - params:
+ - name: key
+ description: name of the value.
+ type: String
+ return:
+ description: stored item.
+ type: String|Number|Boolean|Object|Array
chainable: false
---
diff --git a/src/content/reference/en/p5/getOutputVolume.mdx b/src/content/reference/en/p5/getOutputVolume.mdx
deleted file mode 100644
index 4b74a2d1f7..0000000000
--- a/src/content/reference/en/p5/getOutputVolume.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-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
-isConstructor: false
-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
index 9333dec8b0..3da561110f 100644
--- a/src/content/reference/en/p5/getTargetFrameRate.mdx
+++ b/src/content/reference/en/p5/getTargetFrameRate.mdx
@@ -7,12 +7,11 @@ description: |
<p>Returns the target frame rate.</p>
<p>The value is either the system frame rate or the last value passed to
<a href="/reference/p5/frameRate/">frameRate()</a>.</p>
-line: 447
+line: 479
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -38,6 +37,11 @@ class: p5
return:
description: _targetFrameRate
type: Number
+overloads:
+ - params: []
+ return:
+ description: _targetFrameRate
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/getURL.mdx b/src/content/reference/en/p5/getURL.mdx
index 10186e38f2..deb19e232e 100644
--- a/src/content/reference/en/p5/getURL.mdx
+++ b/src/content/reference/en/p5/getURL.mdx
@@ -3,20 +3,19 @@ title: getURL
module: Environment
submodule: Environment
file: src/core/environment.js
-description: >
- <p>Returns the sketch's current
+description: >-
+ 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 <code>String</code>.</p>
-line: 1149
+ as a <code>String</code>.
+line: 1178
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -36,6 +35,11 @@ class: p5
return:
description: url
type: String
+overloads:
+ - params: []
+ return:
+ description: url
+ type: String
chainable: false
---
diff --git a/src/content/reference/en/p5/getURLParams.mdx b/src/content/reference/en/p5/getURLParams.mdx
index c7661b7f34..d70256922c 100644
--- a/src/content/reference/en/p5/getURLParams.mdx
+++ b/src/content/reference/en/p5/getURLParams.mdx
@@ -18,13 +18,12 @@ description: >
<code>https://p5js.org?year=2014&month=May&day=15</code> returns
<code>{ year: 2014, month: 'May', day: 15 }</code>.</p>
-line: 1208
+line: 1249
isConstructor: false
itemtype: method
alt: This example does not render anything.
example:
- |-
-
<div class='norender notest'>
<code>
// Imagine this sketch is hosted at the following URL:
@@ -49,6 +48,11 @@ class: p5
return:
description: URL params
type: Object
+overloads:
+ - params: []
+ return:
+ description: URL params
+ type: Object
chainable: false
---
diff --git a/src/content/reference/en/p5/getURLPath.mdx b/src/content/reference/en/p5/getURLPath.mdx
index bf8b52ccae..f89815c9ca 100644
--- a/src/content/reference/en/p5/getURLPath.mdx
+++ b/src/content/reference/en/p5/getURLPath.mdx
@@ -23,12 +23,11 @@ description: >
returns
<code>['sketchbook', 'monday']</code>.</p>
-line: 1175
+line: 1210
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -48,6 +47,11 @@ class: p5
return:
description: path components.
type: 'String[]'
+overloads:
+ - params: []
+ return:
+ description: path components.
+ type: 'String[]'
chainable: false
---
diff --git a/src/content/reference/en/p5/green.mdx b/src/content/reference/en/p5/green.mdx
index 5aee8b7de1..f68904b1f5 100644
--- a/src/content/reference/en/p5/green.mdx
+++ b/src/content/reference/en/p5/green.mdx
@@ -8,7 +8,7 @@ description: >
<p><code>green()</code> extracts the green value from a
- <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+ <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color
components, or
a CSS color string.</p>
@@ -16,16 +16,15 @@ description: >
<p>By default, <code>green()</code> returns a color's green value in the range
0
- to 255. If the <a href="/reference/colorMode/">colorMode()</a> is set to RGB,
- it
+ to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+ RGB, it
returns the green value in the given range.</p>
-line: 692
+line: 684
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -53,7 +52,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -81,7 +79,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -109,7 +106,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -140,15 +136,19 @@ example:
</code>
</div>
class: p5
-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'
return:
description: the green value.
type: Number
+overloads:
+ - params:
+ - name: color
+ description: |-
+ <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
+ color components, or CSS color string.
+ type: 'p5.Color|Number[]|String'
+ return:
+ description: the green value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/gridOutput.mdx b/src/content/reference/en/p5/gridOutput.mdx
index ad28c60a0f..0c10545ac3 100644
--- a/src/content/reference/en/p5/gridOutput.mdx
+++ b/src/content/reference/en/p5/gridOutput.mdx
@@ -57,17 +57,15 @@ description: >
<p>Read
- <a
- href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
- accessible canvas descriptions</a>
+ <a href="/learn/accessible-labels.html">Writing accessible canvas
+ descriptions</a>
to learn more about making sketches accessible.</p>
-line: 144
+line: 258
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -148,12 +146,12 @@ example:
</code>
</div>
class: p5
-params:
- - name: display
- description: |
- <p>either FALLBACK or LABEL.</p>
- type: Constant
- optional: true
+overloads:
+ - params:
+ - name: display
+ description: either FALLBACK or LABEL.
+ optional: 1
+ type: FALLBACK|LABEL
chainable: false
---
diff --git a/src/content/reference/en/p5/height.mdx b/src/content/reference/en/p5/height.mdx
index ef09c30ec9..9d2f49e06b 100644
--- a/src/content/reference/en/p5/height.mdx
+++ b/src/content/reference/en/p5/height.mdx
@@ -17,12 +17,11 @@ description: >
sets its value to
0.</p>
-line: 881
+line: 949
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
function setup() {
diff --git a/src/content/reference/en/p5/hex.mdx b/src/content/reference/en/p5/hex.mdx
index 97d3fd9145..8920c8879d 100644
--- a/src/content/reference/en/p5/hex.mdx
+++ b/src/content/reference/en/p5/hex.mdx
@@ -33,12 +33,11 @@ description: >
example, calling <code>hex(20, 2)</code> returns the string
<code>'14'</code>.</p>
-line: 818
+line: 931
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -129,30 +128,24 @@ return:
description: converted hexadecimal value.
type: String
overloads:
- - line: 818
- params:
+ - params:
- name: 'n'
- description: |
- <p>value to convert.</p>
+ description: value to convert.
type: Number
- name: digits
- description: |
- <p>number of digits to include.</p>
+ description: number of digits to include.
+ optional: 1
type: Number
- optional: true
return:
description: converted hexadecimal value.
type: String
- - line: 926
- params:
+ - params:
- name: ns
- description: |
- <p>values to convert.</p>
+ description: values to convert.
type: 'Number[]'
- name: digits
- description: ''
+ optional: 1
type: Number
- optional: true
return:
description: converted hexadecimal values.
type: 'String[]'
diff --git a/src/content/reference/en/p5/hour.mdx b/src/content/reference/en/p5/hour.mdx
index e7139a59dd..df6bb6e707 100644
--- a/src/content/reference/en/p5/hour.mdx
+++ b/src/content/reference/en/p5/hour.mdx
@@ -3,14 +3,12 @@ title: hour
module: IO
submodule: Time & Date
file: src/utilities/time_date.js
-description: |
- <p>Returns the current hour as a number from 0–23.</p>
-line: 44
+description: Returns the current hour as a number from 0–23.
+line: 73
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -37,6 +35,11 @@ class: p5
return:
description: current hour between 0 and 23.
type: Integer
+overloads:
+ - params: []
+ return:
+ description: current hour between 0 and 23.
+ type: Integer
chainable: false
---
diff --git a/src/content/reference/en/p5/httpDo.mdx b/src/content/reference/en/p5/httpDo.mdx
index f9eff51f73..34bd33de49 100644
--- a/src/content/reference/en/p5/httpDo.mdx
+++ b/src/content/reference/en/p5/httpDo.mdx
@@ -6,22 +6,22 @@ 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>
+ it will default to <code>'text'</code>.</p>
- For more advanced use, you may also pass in the path as the first argument
+ <p>This function is meant for more advanced usage of HTTP requests in p5.js.
+ It is
- and a object as the second argument, the signature follows the one specified
+ best used when a <code>Request</code>
- in the Fetch API specification.
+ object is passed to the <code>path</code> parameter.</p>
- This method is suitable for fetching files up to size of 64MB when "GET" is
- used.</br></br></p>
-line: 1208
+ <p>This method is suitable for fetching files up to size of 64MB when "GET" is
+ used.</p>
+line: 1135
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Examples use USGS Earthquake API:
@@ -31,7 +31,7 @@ example:
let earthquakes;
let eqFeatureIndex = 0;
- function preload() {
+ function setup() {
let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
httpDo(
url,
@@ -71,72 +71,57 @@ class: p5
return:
description: |-
A promise that resolves with the data when the operation
- completes successfully or rejects with the error after
- one occurs.
+ completes successfully or rejects with the error after
+ one occurs.
type: Promise
overloads:
- - line: 1208
- params:
+ - params:
- name: path
- description: |
- <p>name of the file or url to load</p>
- type: String
+ description: name of the file or url to load
+ type: String|Request
- name: method
- description: |
- <p>either "GET", "POST", or "PUT",
- defaults to "GET"</p>
+ description: |-
+ either "GET", "POST", "PUT", "DELETE",
+ or other HTTP request methods
+ optional: 1
type: String
- optional: true
- name: datatype
- description: |
- <p>"json", "jsonp", "xml", or "text"</p>
+ description: '"json", "jsonp", "xml", or "text"'
+ optional: 1
type: String
- optional: true
- name: data
- description: |
- <p>param data passed sent with request</p>
+ description: param data passed sent with request
+ optional: 1
type: Object
- optional: true
- name: callback
- description: |
- <p>function to be executed after
- <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
- as first argument</p>
+ description: |-
+ function to be executed after
+ <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
+ as first argument
+ optional: 1
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>
+ description: |-
+ function to be executed if
+ there is an error, response is passed
+ in as first argument
+ optional: 1
type: Function
- optional: true
return:
description: |-
A promise that resolves with the data when the operation
- completes successfully or rejects with the error after
- one occurs.
+ completes successfully or rejects with the error after
+ one occurs.
type: Promise
- - line: 1279
- params:
+ - params:
- name: path
- description: ''
- type: String
- - name: options
- description: >
- <p>Request object options as documented in the
- "fetch" API
- <a
- href="https://developer.mozilla.org/en/docs/Web/API/Fetch_API">reference</a></p>
- type: Object
+ type: String|Request
- name: callback
- description: ''
+ optional: 1
type: Function
- optional: true
- name: errorCallback
- description: ''
+ optional: 1
type: Function
- optional: true
return:
description: ''
type: Promise
diff --git a/src/content/reference/en/p5/httpGet.mdx b/src/content/reference/en/p5/httpGet.mdx
index 6bdfcc1f9e..cae165e00d 100644
--- a/src/content/reference/en/p5/httpGet.mdx
+++ b/src/content/reference/en/p5/httpGet.mdx
@@ -3,37 +3,27 @@ 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
-
+description: |-
+ Method for executing an HTTP GET request. If data type is not specified,
+ it will default to <code>'text'</code>. 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: 1043
+ which can be used to initialize typed arrays (such as Uint8Array).
+line: 904
isConstructor: false
itemtype: method
example:
- |-
-
<div class='norender'><code>
// Examples use USGS Earthquake API:
// https://earthquake.usgs.gov/fdsnws/event/1/#methods
let earthquakes;
- function preload() {
+ async function setup() {
// Get the most recent earthquake in the database
let url =
- 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
+ '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;
- });
+ earthquakes = await httpGet(url, 'json');
}
function draw() {
@@ -55,78 +45,48 @@ class: p5
return:
description: |-
A promise that resolves with the data when the operation
- completes successfully or rejects with the error after
- one occurs.
+ completes successfully or rejects with the error after
+ one occurs.
type: Promise
overloads:
- - line: 1043
- params:
+ - params:
- name: path
- description: |
- <p>name of the file or url to load</p>
- type: String
+ description: name of the file or url to load
+ type: String|Request
- name: datatype
- description: |
- <p>"json", "jsonp", "binary", "arrayBuffer",
- "xml", or "text"</p>
+ description: |-
+ "json", "jsonp", "binary", "arrayBuffer",
+ "xml", or "text"
+ optional: 1
type: String
- optional: true
- - name: data
- description: |
- <p>param data passed sent with request</p>
- type: Object|Boolean
- optional: true
- name: callback
- description: |
- <p>function to be executed after
- <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
- as first argument</p>
+ description: |-
+ function to be executed after
+ <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
+ as first argument
+ optional: 1
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>
+ description: |-
+ function to be executed if
+ there is an error, response is passed
+ in as first argument
+ optional: 1
type: Function
- optional: true
return:
description: |-
A promise that resolves with the data when the operation
- completes successfully or rejects with the error after
- one occurs.
- type: Promise
- - line: 1097
- params:
- - name: path
- description: ''
- type: String
- - name: data
- description: ''
- type: Object|Boolean
- - name: callback
- description: ''
- type: Function
- optional: true
- - name: errorCallback
- description: ''
- type: Function
- optional: true
- return:
- description: ''
+ completes successfully or rejects with the error after
+ one occurs.
type: Promise
- - line: 1105
- params:
+ - params:
- name: path
- description: ''
- type: String
+ type: String|Request
- name: callback
- description: ''
type: Function
- name: errorCallback
- description: ''
+ optional: 1
type: Function
- optional: true
return:
description: ''
type: Promise
diff --git a/src/content/reference/en/p5/httpPost.mdx b/src/content/reference/en/p5/httpPost.mdx
index 723f789f21..bc7de4f0b6 100644
--- a/src/content/reference/en/p5/httpPost.mdx
+++ b/src/content/reference/en/p5/httpPost.mdx
@@ -3,19 +3,15 @@ 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: 1119
+description: |-
+ Method for executing an HTTP POST request. If data type is not specified,
+ it will default to <code>'text'</code>. This is equivalent to
+ calling <code>httpDo(path, 'POST')</code>.
+line: 1001
isConstructor: false
itemtype: method
example:
- >-
-
<div>
<code>
@@ -80,78 +76,67 @@ class: p5
return:
description: |-
A promise that resolves with the data when the operation
- completes successfully or rejects with the error after
- one occurs.
+ completes successfully or rejects with the error after
+ one occurs.
type: Promise
overloads:
- - line: 1119
- params:
+ - params:
- name: path
- description: |
- <p>name of the file or url to load</p>
- type: String
- - name: datatype
- description: |
- <p>"json", "jsonp", "xml", or "text".
- If omitted, <a href="#/p5/httpPost">httpPost()</a> will guess.</p>
- type: String
- optional: true
+ description: name of the file or url to load
+ type: String|Request
- name: data
- description: |
- <p>param data passed sent with request</p>
+ description: param data passed sent with request
+ optional: 1
type: Object|Boolean
- optional: true
+ - name: datatype
+ description: |-
+ "json", "jsonp", "xml", or "text".
+ If omitted, <a href="#/p5/httpPost">httpPost()</a> will guess.
+ optional: 1
+ type: String
- name: callback
- description: |
- <p>function to be executed after
- <a href="#/p5/httpPost">httpPost()</a> completes, data is passed in
- as first argument</p>
+ description: |-
+ function to be executed after
+ <a href="#/p5/httpPost">httpPost()</a> completes, data is passed in
+ as first argument
+ optional: 1
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>
+ description: |-
+ function to be executed if
+ there is an error, response is passed
+ in as first argument
+ optional: 1
type: Function
- optional: true
return:
description: |-
A promise that resolves with the data when the operation
- completes successfully or rejects with the error after
- one occurs.
+ completes successfully or rejects with the error after
+ one occurs.
type: Promise
- - line: 1186
- params:
+ - params:
- name: path
- description: ''
- type: String
+ type: String|Request
- name: data
- description: ''
type: Object|Boolean
- name: callback
- description: ''
+ optional: 1
type: Function
- optional: true
- name: errorCallback
- description: ''
+ optional: 1
type: Function
- optional: true
return:
description: ''
type: Promise
- - line: 1194
- params:
+ - params:
- name: path
- description: ''
- type: String
+ type: String|Request
- name: callback
- description: ''
+ optional: 1
type: Function
- name: errorCallback
- description: ''
+ optional: 1
type: Function
- optional: true
return:
description: ''
type: Promise
diff --git a/src/content/reference/en/p5/hue.mdx b/src/content/reference/en/p5/hue.mdx
index af5861e635..9dd7f1e3e7 100644
--- a/src/content/reference/en/p5/hue.mdx
+++ b/src/content/reference/en/p5/hue.mdx
@@ -8,7 +8,7 @@ description: >
<p><code>hue()</code> extracts the hue value from a
- <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+ <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color
components, or
a CSS color string.</p>
@@ -18,16 +18,15 @@ description: >
returns a color's HSL hue in the range 0 to 360. If the
- <a href="/reference/colorMode/">colorMode()</a> is set to HSB or HSL, it
+ <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it
returns the hue
value in the given mode.</p>
-line: 828
+line: 1045
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -60,7 +59,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -93,7 +91,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -126,15 +123,19 @@ example:
</code>
</div>
class: p5
-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'
return:
description: the hue value.
type: Number
+overloads:
+ - params:
+ - name: color
+ description: |-
+ <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
+ color components, or CSS color string.
+ type: 'p5.Color|Number[]|String'
+ return:
+ description: the hue value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/if.mdx b/src/content/reference/en/p5/if.mdx
index b2767a585a..93acf0802a 100644
--- a/src/content/reference/en/p5/if.mdx
+++ b/src/content/reference/en/p5/if.mdx
@@ -16,12 +16,8 @@ description: >
<pre><code class="language-js">if (mouseIsPressed === true) {
circle(mouseX, mouseY, 20);
- }
-
- </code></pre>
-
- <p>The statement header begins with the keyword <code>if</code>. The
- expression in
+ }</code></pre><p>The statement header begins with the keyword <code>if</code>.
+ The expression in
parentheses <code>mouseIsPressed === true</code> is a <code>Boolean</code>
expression that's
@@ -42,12 +38,8 @@ description: >
<pre><code class="language-js">if (mouseIsPressed) {
circle(mouseX, mouseY, 20);
- }
-
- </code></pre>
-
- <p>An <code>if</code>-<code>else</code> statement adds a block of code that
- runs if the <code>Boolean</code>
+ }</code></pre><p>An <code>if</code>-<code>else</code> statement adds a block
+ of code that runs if the <code>Boolean</code>
expression is <code>false</code>. For example, here's an
<code>if</code>-<code>else</code> statement that
@@ -62,11 +54,8 @@ description: >
} else {
// When false.
text('Click me!', 50, 50);
- }
-
- </code></pre>
-
- <p>There are two possible paths, or branches, in this code snippet. The
+ }</code></pre><p>There are two possible paths, or branches, in this code
+ snippet. The
program must follow one branch or the other.</p>
@@ -91,11 +80,7 @@ description: >
background(200);
} else {
background(0);
- }
-
- </code></pre>
-
- <p><code>if</code> statements can add as many
+ }</code></pre><p><code>if</code> statements can add as many
<code>else</code>-<code>if</code> statements as needed. However,
there can only be one <code>else</code> statement and it must be last.</p>
@@ -110,12 +95,8 @@ description: >
<pre><code class="language-js">if (keyIsPressed === true && key === 'p') {
text('You pressed the "p" key!', 50, 50);
- }
-
- </code></pre>
-
- <p>If the user is pressing a key AND that key is <code>'p'</code>, then a
- message will
+ }</code></pre><p>If the user is pressing a key AND that key is
+ <code>'p'</code>, then a message will
display.</p>
@@ -127,11 +108,8 @@ description: >
<pre><code class="language-js">if (keyIsPressed === true || mouseIsPressed ===
true) {
text('You did something!', 50, 50);
- }
-
- </code></pre>
-
- <p>If the user presses a key, or presses a mouse button, or both, then a
+ }</code></pre><p>If the user presses a key, or presses a mouse button, or
+ both, then a
message will display.</p>
@@ -149,20 +127,15 @@ description: >
if (key === 'r') {
fill('red');
}
- }
-
- </code></pre>
-
- <p>See <a href="/reference/p5/Boolean/">Boolean</a> and <a
+ }</code></pre><p>See <a href="/reference/p5/Boolean/">Boolean</a> and <a
href="/reference/p5/Number/">Number</a>
to learn more about these data types and the operations they support.</p>
-line: 110
+line: 1
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Click the mouse to show the circle.
diff --git a/src/content/reference/en/p5/image.mdx b/src/content/reference/en/p5/image.mdx
index 193bc3d4c2..43a9a7e0a6 100644
--- a/src/content/reference/en/p5/image.mdx
+++ b/src/content/reference/en/p5/image.mdx
@@ -11,31 +11,36 @@ description: >
any of the following objects:</p>
- <ul>
+ <ul><li><a href="/reference/p5/p5.Image">p5.Image</a></li><li><a
+ href="/reference/p5/p5.Element">p5.Element</a></li><li><a
+ href="/reference/p5/p5.Texture">p5.Texture</a></li><li><a
+ href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a></li><li><a
+ href="/reference/p5/p5.FramebufferTexture">p5.FramebufferTexture</a></li></ul><p>The
+ second and third parameters, <code>dx</code> and <code>dy</code>, set the
+ coordinates of the
- <li><a href="/reference/p5/p5.Image">p5.Image</a></li>
-
- <li><a href="/reference/p5/p5.Element">p5.Element</a></li>
+ destination image's top left corner. See
- <li><a href="/reference/p5/p5.Texture">p5.Texture</a></li>
+ <a href="/reference/p5/imageMode/">imageMode()</a> for other ways to position
+ images.</p>
- <li><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a></li>
+ <pre><code class="language-js example">let img;
- <li><a
- href="/reference/p5/p5.FramebufferTexture">p5.FramebufferTexture</a></li>
- </ul>
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/laDefense.jpg');
- <p>The second and third parameters, <code>dx</code> and <code>dy</code>, set
- the coordinates of the
+ createCanvas(100, 100);
- destination image's top left corner. See
+ background(50);
- <a href="/reference/p5/imageMode/">imageMode()</a> for other ways to position
- images.</p>
+ // Draw the image.
+ image(img, 0, 0);
- <p>Here's a diagram that explains how optional parameters work in
- <code>image()</code>:</p>
+ describe('An image of the underside of a white umbrella with a gridded ceiling above.');
+ }</code></pre><p>Here's a diagram that explains how optional parameters work
+ in <code>image()</code>:</p>
<p><img src="/assets/drawImage.png"/></p>
@@ -92,44 +97,19 @@ description: >
default, both <code>xAlign</code> and <code>yAlign</code>
are set to <code>CENTER</code>.</p>
-line: 888
+line: 1034
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/laDefense.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/laDefense.jpg');
- function setup() {
- createCanvas(100, 100);
-
- background(50);
-
- // Draw the image.
- 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;
-
- // Load the image.
- function preload() {
- img = loadImage('/assets/laDefense.jpg');
- }
-
- function setup() {
createCanvas(100, 100);
background(50);
@@ -146,12 +126,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/laDefense.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/laDefense.jpg');
- function setup() {
createCanvas(100, 100);
background(50);
@@ -168,12 +146,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/laDefense.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/laDefense.jpg');
- function setup() {
createCanvas(100, 100);
background(50);
@@ -190,12 +166,9 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/moonwalk.jpg');
- }
-
- function setup() {
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/moonwalk.jpg');
createCanvas(100, 100);
background(50);
@@ -212,13 +185,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- // Image is 50 x 50 pixels.
- img = loadImage('/assets/laDefense50.png');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/laDefense50.png');
- function setup() {
createCanvas(100, 100);
background(50);
@@ -232,91 +202,78 @@ example:
</div>
class: p5
overloads:
- - line: 888
- params:
+ - params:
- name: img
- description: |
- <p>image to display.</p>
+ description: image to display.
type: p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
- name: x
- description: |
- <p>x-coordinate of the top-left corner of the image.</p>
+ description: x-coordinate of the top-left corner of the image.
type: Number
- name: 'y'
- description: |
- <p>y-coordinate of the top-left corner of the image.</p>
+ description: y-coordinate of the top-left corner of the image.
type: Number
- name: width
- description: |
- <p>width to draw the image.</p>
+ description: width to draw the image.
+ optional: 1
type: Number
- optional: true
- name: height
- description: |
- <p>height to draw the image.</p>
+ description: height to draw the image.
+ optional: 1
type: Number
- optional: true
- - line: 1074
- params:
+ - params:
- name: img
- description: ''
type: p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
- name: dx
- description: |
- <p>the x-coordinate of the destination
- rectangle in which to draw the source image</p>
+ description: |-
+ the x-coordinate of the destination
+ rectangle in which to draw the source image
type: Number
- name: dy
- description: |
- <p>the y-coordinate of the destination
- rectangle in which to draw the source image</p>
+ description: |-
+ the y-coordinate of the destination
+ rectangle in which to draw the source image
type: Number
- name: dWidth
- description: |
- <p>the width of the destination rectangle</p>
+ description: the width of the destination rectangle
type: Number
- name: dHeight
- description: |
- <p>the height of the destination rectangle</p>
+ description: the height of the destination rectangle
type: Number
- name: sx
- description: |
- <p>the x-coordinate of the subsection of the source
- image to draw into the destination rectangle</p>
+ description: |-
+ the x-coordinate of the subsection of the source
+ image to draw into the destination rectangle
type: Number
- name: sy
- description: |
- <p>the y-coordinate of the subsection of the source
- image to draw into the destination rectangle</p>
+ description: |-
+ the y-coordinate of the subsection of the source
+ image to draw into the destination rectangle
type: Number
- name: sWidth
- description: |
- <p>the width of the subsection of the
- source image to draw into the destination
- rectangle</p>
+ description: |-
+ the width of the subsection of the
+ source image to draw into the destination
+ rectangle
+ optional: 1
type: Number
- optional: true
- name: sHeight
- description: |
- <p>the height of the subsection of the
- source image to draw into the destination rectangle</p>
+ description: |-
+ the height of the subsection of the
+ source image to draw into the destination rectangle
+ optional: 1
type: Number
- optional: true
- name: fit
- description: |
- <p>either CONTAIN or COVER</p>
- type: Constant
- optional: true
+ description: either CONTAIN or COVER
+ optional: 1
+ type: CONTAIN|COVER
- name: xAlign
- description: |
- <p>either LEFT, RIGHT or CENTER default is CENTER</p>
- type: Constant
- optional: true
+ description: 'either LEFT, RIGHT or CENTER default is CENTER'
+ optional: 1
+ type: LEFT|RIGHT|CENTER
- name: yAlign
- description: |
- <p>either TOP, BOTTOM or CENTER default is CENTER</p>
- type: Constant
- optional: true
+ description: 'either TOP, BOTTOM or CENTER default is CENTER'
+ optional: 1
+ type: TOP|BOTTOM|CENTER
chainable: false
---
diff --git a/src/content/reference/en/p5/imageLight.mdx b/src/content/reference/en/p5/imageLight.mdx
index d13c6bdab7..74338c12d0 100644
--- a/src/content/reference/en/p5/imageLight.mdx
+++ b/src/content/reference/en/p5/imageLight.mdx
@@ -24,24 +24,21 @@ description: >
href="/reference/p5/p5.Image">p5.Image</a> object to
use as the light source.</p>
-line: 956
+line: 940
isConstructor: false
itemtype: method
example:
- |-
-
<div class="notest">
<code>
// Click and drag the mouse to view the scene from different angles.
let img;
- // Load an image and create a p5.Image object.
- function preload() {
- img = loadImage('/assets/outdoor_spheremap.jpg');
- }
+ async function setup() {
+ // Load an image and create a p5.Image object.
+ img = await loadImage('/assets/outdoor_spheremap.jpg');
- function setup() {
createCanvas(100, 100, WEBGL);
describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');
@@ -71,11 +68,11 @@ example:
</code>
</div>
class: p5
-params:
- - name: img
- description: |
- <p>image to use as the light source.</p>
- type: p5.image
+overloads:
+ - params:
+ - name: img
+ description: image to use as the light source.
+ type: p5.image
chainable: false
---
diff --git a/src/content/reference/en/p5/imageMode.mdx b/src/content/reference/en/p5/imageMode.mdx
index f8242c93de..ad68826be4 100644
--- a/src/content/reference/en/p5/imageMode.mdx
+++ b/src/content/reference/en/p5/imageMode.mdx
@@ -32,23 +32,19 @@ description: >
image's
center. The next parameters are its width and height.</p>
-line: 1395
+line: 1415
isConstructor: false
itemtype: method
example:
- |-
-
-
<div>
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -68,12 +64,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -93,12 +87,10 @@ example:
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/bricks.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/bricks.jpg');
- function setup() {
createCanvas(100, 100);
background(200);
@@ -114,11 +106,11 @@ example:
</code>
</div>
class: p5
-params:
- - name: mode
- description: |
- <p>either CORNER, CORNERS, or CENTER.</p>
- type: Constant
+overloads:
+ - params:
+ - name: mode
+ description: 'either CORNER, CORNERS, or CENTER.'
+ type: CORNER|CORNERS|CENTER
chainable: false
---
diff --git a/src/content/reference/en/p5/imageShader.mdx b/src/content/reference/en/p5/imageShader.mdx
new file mode 100644
index 0000000000..3bcca93d70
--- /dev/null
+++ b/src/content/reference/en/p5/imageShader.mdx
@@ -0,0 +1,165 @@
+---
+title: imageShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >-
+ <p>Sets the <a href="/reference/p5/p5.Shader">p5.Shader</a> object to apply
+ for images.</p>
+
+ <p>This method allows the user to apply a custom shader to images, enabling
+
+ advanced visual effects such as pixel manipulation, color adjustments,
+
+ or dynamic behavior. The shader will be applied to the image drawn using
+
+ the <a href="/reference/p5/image/">image()</a> function.</p>
+
+ <p>The shader will be used exclusively for:</p>
+
+ <ul><li><code>image()</code> calls, applying only when drawing 2D
+ images.</li><li>This shader will NOT apply to images used in <a
+ href="/reference/p5/texture/">texture()</a> or other 3D contexts.
+
+ Any attempts to use the imageShader in these cases will be ignored.</li></ul>
+line: 1226
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div modernizr='webgl'>
+ <code>
+ let img;
+ let imgShader;
+
+ async function setup() {
+ img = await loadImage('/assets/outdoor_image.jpg');
+
+ createCanvas(200, 200, WEBGL);
+ noStroke();
+
+ imgShader = createShader(`
+ precision mediump float;
+ attribute vec3 aPosition;
+ attribute vec2 aTexCoord;
+ varying vec2 vTexCoord;
+ uniform mat4 uModelViewMatrix;
+ uniform mat4 uProjectionMatrix;
+
+ void main() {
+ vTexCoord = aTexCoord;
+ gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+ }
+ `, `
+ precision mediump float;
+ varying vec2 vTexCoord;
+ uniform sampler2D uTexture;
+ uniform vec2 uMousePos;
+
+ void main() {
+ vec4 texColor = texture2D(uTexture, vTexCoord);
+ // Adjust the color based on mouse position
+ float r = uMousePos.x * texColor.r;
+ float g = uMousePos.y * texColor.g;
+ gl_FragColor = vec4(r, g, texColor.b, texColor.a);
+ }
+ `);
+
+ describe(
+ 'An image on a gray background where the colors change based on the mouse position.'
+ );
+ }
+
+ function draw() {
+ background(220);
+
+ imageShader(imgShader);
+
+ // Map the mouse position to a range between 0 and 1
+ let mousePosX = map(mouseX, 0, width, 0, 1);
+ let mousePosY = map(mouseY, 0, height, 0, 1);
+
+ // Pass the mouse position to the shader as a uniform
+ imgShader.setUniform('uMousePos', [mousePosX, mousePosY]);
+
+ // Bind the image texture to the shader
+ imgShader.setUniform('uTexture', img);
+
+ image(img, -width / 2, -height / 2, width, height);
+ }
+
+ </code>
+ </div>
+ - |-
+ <div modernizr='webgl'>
+ <code>
+ let img;
+ let imgShader;
+
+ async function setup() {
+ img = await loadImage('/assets/outdoor_image.jpg');
+
+ createCanvas(200, 200, WEBGL);
+ noStroke();
+
+ imgShader = createShader(`
+ precision mediump float;
+ attribute vec3 aPosition;
+ attribute vec2 aTexCoord;
+ varying vec2 vTexCoord;
+ uniform mat4 uModelViewMatrix;
+ uniform mat4 uProjectionMatrix;
+
+ void main() {
+ vTexCoord = aTexCoord;
+ gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+ }
+ `, `
+ precision mediump float;
+ varying vec2 vTexCoord;
+ uniform sampler2D uTexture;
+ uniform vec2 uMousePos;
+
+ void main() {
+ // Distance from the current pixel to the mouse
+ float distFromMouse = distance(vTexCoord, uMousePos);
+
+ // Adjust pixelation based on distance (closer = more detail, farther = blockier)
+ float pixelSize = mix(0.002, 0.05, distFromMouse);
+ vec2 pixelatedCoord = vec2(floor(vTexCoord.x / pixelSize) * pixelSize,
+ floor(vTexCoord.y / pixelSize) * pixelSize);
+
+ vec4 texColor = texture2D(uTexture, pixelatedCoord);
+ gl_FragColor = texColor;
+ }
+ `);
+
+ describe('A static image with a grid-like, pixelated effect created by the shader. Each cell in the grid alternates visibility, producing a dithered visual effect.');
+ }
+
+ function draw() {
+ background(220);
+ imageShader(imgShader);
+
+ let mousePosX = map(mouseX, 0, width, 0, 1);
+ let mousePosY = map(mouseY, 0, height, 0, 1);
+
+ imgShader.setUniform('uMousePos', [mousePosX, mousePosY]);
+ imgShader.setUniform('uTexture', img);
+ image(img, -width / 2, -height / 2, width, height);
+ }
+ </code>
+ </div>
+class: p5
+overloads:
+ - params:
+ - name: s
+ description: |-
+ <a href="#/p5.Shader">p5.Shader</a> object
+ to apply for images.
+ type: p5.Shader
+chainable: true
+---
+
+
+# imageShader
diff --git a/src/content/reference/en/p5/int.mdx b/src/content/reference/en/p5/int.mdx
index 91fe84fd3d..2bedd8e77e 100644
--- a/src/content/reference/en/p5/int.mdx
+++ b/src/content/reference/en/p5/int.mdx
@@ -33,12 +33,11 @@ description: >
<code>int('giraffe')</code>,
then the value <code>NaN</code> (not a number) will be returned.</p>
-line: 92
+line: 215
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -141,20 +140,16 @@ return:
description: converted number.
type: Number
overloads:
- - line: 92
- params:
+ - params:
- name: 'n'
- description: |
- <p>value to convert.</p>
+ description: value to convert.
type: String|Boolean|Number
return:
description: converted number.
type: Number
- - line: 211
- params:
+ - params:
- name: ns
- description: |
- <p>values to convert.</p>
+ description: values to convert.
type: Array
return:
description: converted numbers.
diff --git a/src/content/reference/en/p5/isLooping.mdx b/src/content/reference/en/p5/isLooping.mdx
index 04111096f4..6e26d78b27 100644
--- a/src/content/reference/en/p5/isLooping.mdx
+++ b/src/content/reference/en/p5/isLooping.mdx
@@ -20,12 +20,11 @@ description: >
is
looping, as in <code>isLooping() === true</code>.</p>
-line: 224
+line: 265
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -54,7 +53,12 @@ example:
class: p5
return:
description: ''
- type: Boolean
+ type: boolean
+overloads:
+ - params: []
+ return:
+ description: ''
+ type: boolean
chainable: false
---
diff --git a/src/content/reference/en/p5/join.mdx b/src/content/reference/en/p5/join.mdx
deleted file mode 100644
index de68343db9..0000000000
--- a/src/content/reference/en/p5/join.mdx
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: join
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
- <p>Combines an array of strings into one string.</p>
-
- <p>The first parameter, <code>list</code>, is the array of strings to
- join.</p>
-
- <p>The second parameter, <code>separator</code>, is the character(s) that
- should be used
-
- to separate the combined strings. For example, calling
-
- <code>join(myWords, ' : ')</code> would return a string of words each
- separated by a
-
- colon and spaces.</p>
-line: 15
-isConstructor: false
-itemtype: method
-example:
- - |-
-
- <div>
- <code>
- function setup() {
- createCanvas(100, 100);
-
- background(200);
-
- // Create an array of strings.
- let myWords = ['one', 'two', 'three'];
-
- // Create a combined string
- let combined = join(myWords, ' : ');
-
- // Style the text.
- textAlign(CENTER, CENTER);
-
- // Display the combined string.
- text(combined, 50, 50);
-
- describe('The text "one : two : three" written in black on a gray canvas.');
- }
- </code>
- </div>
-class: p5
-params:
- - name: list
- description: |
- <p>array of strings to combine.</p>
- type: Array
- - name: separator
- description: |
- <p>character(s) to place between strings when they're combined.</p>
- type: String
-return:
- description: combined string.
- type: String
-chainable: false
----
-
-
-# join
diff --git a/src/content/reference/en/p5/key.mdx b/src/content/reference/en/p5/key.mdx
index 505310313d..2ea0c807b8 100644
--- a/src/content/reference/en/p5/key.mdx
+++ b/src/content/reference/en/p5/key.mdx
@@ -25,12 +25,11 @@ description: >
should
be used to check for multiple different key presses at the same time.</p>
-line: 102
+line: 196
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Click on the canvas to begin detecting key presses.
diff --git a/src/content/reference/en/p5/keyCode.mdx b/src/content/reference/en/p5/keyCode.mdx
index 4505ec335f..7127be95e7 100644
--- a/src/content/reference/en/p5/keyCode.mdx
+++ b/src/content/reference/en/p5/keyCode.mdx
@@ -5,54 +5,38 @@ submodule: Keyboard
file: src/events/keyboard.js
description: >
<p>A <code>Number</code> system variable that contains the code of the last
- key typed.</p>
+ key pressed.</p>
- <p>All keys have a <code>keyCode</code>. For example, the <code>a</code> key
- has the <code>keyCode</code> 65.
+ <p>Every key has a numeric key code. For example, the letter <code>a</code>
+ key has the key code 65.
- The <code>keyCode</code> variable is helpful for checking whether a special
- key has
+ Use this key code to determine which key was pressed by comparing it to the
+ numeric value
- been typed. For example, the following conditional checks whether the enter
+ of the desired key.</p>
- key has been typed:</p>
+ <p>For example, to detect when the Enter key is pressed:</p>
- <pre><code class="language-js">if (keyCode === 13) {
- // Code to run if the enter key was pressed.
- }
+ <pre><code class="language-js">if (keyCode === 13) { // Enter key
+ // Code to run if the Enter key was pressed.
+ }</code></pre><p>Alternatively, you can use the <a
+ href="/reference/p5/key/">key</a> function to directly compare the key
+ value:</p>
- </code></pre>
+ <pre><code class="language-js">if (key === 'Enter') { // Enter key
+ // Code to run if the Enter key was pressed.
+ }</code></pre><p>Use the following numeric codes for the arrow keys:</p>
- <p>The same code can be written more clearly using the system variable
- <code>ENTER</code>
+ <p>Up Arrow: 38Down Arrow: 40Left Arrow: 37Right Arrow: 39</p>
- which has a value of 13:</p>
-
- <pre><code class="language-js">if (keyCode === ENTER) {
- // Code to run if the enter key was pressed.
- }
-
- </code></pre>
-
- <p>The system variables <code>BACKSPACE</code>, <code>DELETE</code>,
- <code>ENTER</code>, <code>RETURN</code>, <code>TAB</code>,
-
- <code>ESCAPE</code>, <code>SHIFT</code>, <code>CONTROL</code>,
- <code>OPTION</code>, <code>ALT</code>, <code>UP_ARROW</code>,
- <code>DOWN_ARROW</code>,
-
- <code>LEFT_ARROW</code>, and <code>RIGHT_ARROW</code> are all helpful
- shorthands the key codes of
-
- special keys. Key codes can be found on websites such as
+ <p>More key codes can be found at websites such as
<a href="http://keycode.info/">keycode.info</a>.</p>
-line: 184
+line: 300
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Click on the canvas to begin detecting key presses.
@@ -98,13 +82,13 @@ example:
function draw() {
// Update x and y if an arrow key is pressed.
if (keyIsPressed === true) {
- if (keyCode === UP_ARROW) {
+ if (keyCode === 38) { // Up arrow key
y -= 1;
- } else if (keyCode === DOWN_ARROW) {
+ } else if (keyCode === 40) { // Down arrow key
y += 1;
- } else if (keyCode === LEFT_ARROW) {
+ } else if (keyCode === 37) { // Left arrow key
x -= 1;
- } else if (keyCode === RIGHT_ARROW) {
+ } else if (keyCode === 39) { // Right arrow key
x += 1;
}
}
diff --git a/src/content/reference/en/p5/keyIsDown.mdx b/src/content/reference/en/p5/keyIsDown.mdx
index 0f98f1696e..c07b04331b 100644
--- a/src/content/reference/en/p5/keyIsDown.mdx
+++ b/src/content/reference/en/p5/keyIsDown.mdx
@@ -18,11 +18,7 @@ description: >
<pre><code class="language-js">if (keyIsDown(LEFT_ARROW) &&
keyIsDown(UP_ARROW)) {
// Move diagonally.
- }
-
- </code></pre>
-
- <p><code>keyIsDown()</code> can check for key presses using
+ }</code></pre><p><code>keyIsDown()</code> can check for key presses using
<a href="/reference/p5/keyCode/">keyCode</a> values, as in
<code>keyIsDown(37)</code> or
@@ -30,12 +26,11 @@ description: >
<code>keyIsDown(LEFT_ARROW)</code>. Key codes can be found on websites such as
<a href="https://keycode.info" target="_blank">keycode.info</a>.</p>
-line: 809
+line: 932
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click on the canvas to begin detecting key presses.
@@ -99,19 +94,19 @@ example:
function draw() {
// Update x and y if an arrow key is pressed.
- if (keyIsDown(37) === true) {
+ if (keyIsDown('ArrowLeft') === true) {
x -= 1;
}
- if (keyIsDown(39) === true) {
+ if (keyIsDown('ArrowRight') === true) {
x += 1;
}
- if (keyIsDown(38) === true) {
+ if (keyIsDown('ArrowUp') === true) {
y -= 1;
}
- if (keyIsDown(40) === true) {
+ if (keyIsDown('ArrowDown') === true) {
y += 1;
}
@@ -124,14 +119,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: code
- description: |
- <p>key to check.</p>
- type: Number
return:
description: whether the key is down or not.
type: Boolean
+overloads:
+ - params:
+ - name: code
+ description: key to check.
+ type: Number|String
+ return:
+ description: whether the key is down or not.
+ type: Boolean
chainable: false
---
diff --git a/src/content/reference/en/p5/keyIsPressed.mdx b/src/content/reference/en/p5/keyIsPressed.mdx
index accc45a4cb..68f158aa98 100644
--- a/src/content/reference/en/p5/keyIsPressed.mdx
+++ b/src/content/reference/en/p5/keyIsPressed.mdx
@@ -3,17 +3,16 @@ title: keyIsPressed
module: Events
submodule: Keyboard
file: src/events/keyboard.js
-description: >
- <p>A <code>Boolean</code> system variable that's <code>true</code> if any key
- is currently pressed
+description: >-
+ A <code>Boolean</code> system variable that's <code>true</code> if any key is
+ currently pressed
- and <code>false</code> if not.</p>
-line: 10
+ and <code>false</code> if not.
+line: 113
isConstructor: false
itemtype: property
example:
- |-
-
<div>
<code>
// Click on the canvas to begin detecting key presses.
diff --git a/src/content/reference/en/p5/keyPressed.mdx b/src/content/reference/en/p5/keyPressed.mdx
index 3f70d8f1fd..f7670a5f44 100644
--- a/src/content/reference/en/p5/keyPressed.mdx
+++ b/src/content/reference/en/p5/keyPressed.mdx
@@ -13,11 +13,7 @@ description: >
<pre><code class="language-js">function keyPressed() {
// Code to run.
- }
-
- </code></pre>
-
- <p>The <a href="/reference/p5/key/">key</a> and <a
+ }</code></pre><p>The <a href="/reference/p5/key/">key</a> and <a
href="/reference/p5/keyCode/">keyCode</a>
variables will be updated with the most recently typed value when
@@ -29,15 +25,11 @@ description: >
// Code to run.
}
- if (keyCode === ENTER) {
+ if (keyCode === 13) { // Enter key
// Code to run.
}
- }
-
- </code></pre>
-
- <p>The parameter, <code>event</code>, is optional. <code>keyPressed()</code>
- is always passed a
+ }</code></pre><p>The parameter, <code>event</code>, is optional.
+ <code>keyPressed()</code> is always passed a
<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
target="_blank">KeyboardEvent</a>
@@ -47,11 +39,8 @@ description: >
<pre><code class="language-js">function keyPressed(event) {
// Code to run that uses the event.
console.log(event);
- }
-
- </code></pre>
-
- <p>Browsers may have default behaviors attached to various key events. For
+ }</code></pre><p>Browsers may have default behaviors attached to various key
+ events. For
example, some browsers may jump to the bottom of a web page when the
@@ -59,12 +48,11 @@ description: >
event, add
<code>return false;</code> to the end of the function.</p>
-line: 284
+line: 461
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click on the canvas to begin detecting key presses.
@@ -165,9 +153,9 @@ example:
// Toggle the background color when the user presses an arrow key.
function keyPressed() {
- if (keyCode === LEFT_ARROW) {
+ if (keyCode === 37) { // Left arrow key
value = 255;
- } else if (keyCode === RIGHT_ARROW) {
+ } else if (keyCode === 39) { // Right arrow key
value = 0;
}
// Uncomment to prevent any default behavior.
@@ -176,12 +164,12 @@ example:
</code>
</div>
class: p5
-params:
- - name: event
- description: |
- <p>optional <code>KeyboardEvent</code> callback argument.</p>
- type: KeyboardEvent
- optional: true
+overloads:
+ - params:
+ - name: event
+ description: optional <code>KeyboardEvent</code> callback argument.
+ optional: 1
+ type: KeyboardEvent
chainable: false
---
diff --git a/src/content/reference/en/p5/keyReleased.mdx b/src/content/reference/en/p5/keyReleased.mdx
index e293d6cad4..6e32465404 100644
--- a/src/content/reference/en/p5/keyReleased.mdx
+++ b/src/content/reference/en/p5/keyReleased.mdx
@@ -13,11 +13,7 @@ description: >
<pre><code class="language-js">function keyReleased() {
// Code to run.
- }
-
- </code></pre>
-
- <p>The <a href="/reference/p5/key/">key</a> and <a
+ }</code></pre><p>The <a href="/reference/p5/key/">key</a> and <a
href="/reference/p5/keyCode/">keyCode</a>
variables will be updated with the most recently released value when
@@ -29,15 +25,11 @@ description: >
// Code to run.
}
- if (keyCode === ENTER) {
+ if (keyCode === 13) { // Enter key
// Code to run.
}
- }
-
- </code></pre>
-
- <p>The parameter, <code>event</code>, is optional. <code>keyReleased()</code>
- is always passed a
+ }</code></pre><p>The parameter, <code>event</code>, is optional.
+ <code>keyReleased()</code> is always passed a
<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
target="_blank">KeyboardEvent</a>
@@ -47,22 +39,18 @@ description: >
<pre><code class="language-js">function keyReleased(event) {
// Code to run that uses the event.
console.log(event);
- }
-
- </code></pre>
-
- <p>Browsers may have default behaviors attached to various key events. To
+ }</code></pre><p>Browsers may have default behaviors attached to various key
+ events. To
prevent any default behavior for this event, add <code>return false;</code> to
the end
of the function.</p>
-line: 472
+line: 638
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click on the canvas to begin detecting key presses.
@@ -161,9 +149,9 @@ example:
// Toggle the background color when the user releases an arrow key.
function keyReleased() {
- if (keyCode === LEFT_ARROW) {
+ if (keyCode === 37) { // Left arrow key
value = 255;
- } else if (keyCode === RIGHT_ARROW) {
+ } else if (keyCode === 39) { // Right arrow key
value = 0;
}
// Uncomment to prevent any default behavior.
@@ -172,12 +160,12 @@ example:
</code>
</div>
class: p5
-params:
- - name: event
- description: |
- <p>optional <code>KeyboardEvent</code> callback argument.</p>
- type: KeyboardEvent
- optional: true
+overloads:
+ - params:
+ - name: event
+ description: optional <code>KeyboardEvent</code> callback argument.
+ optional: 1
+ type: KeyboardEvent
chainable: false
---
diff --git a/src/content/reference/en/p5/keyTyped.mdx b/src/content/reference/en/p5/keyTyped.mdx
index 8ff0573ff8..a1e7a0b559 100644
--- a/src/content/reference/en/p5/keyTyped.mdx
+++ b/src/content/reference/en/p5/keyTyped.mdx
@@ -19,11 +19,7 @@ description: >
<pre><code class="language-js">function keyTyped() {
// Code to run.
- }
-
- </code></pre>
-
- <p>The <a href="/reference/p5/key/">key</a> and <a
+ }</code></pre><p>The <a href="/reference/p5/key/">key</a> and <a
href="/reference/p5/keyCode/">keyCode</a>
variables will be updated with the most recently released value when
@@ -37,15 +33,11 @@ description: >
}
// Check for "c" using keyCode.
- if (keyCode === 67) {
+ if (keyCode === 67) { // 67 is the ASCII code for 'c'
// Code to run.
}
- }
-
- </code></pre>
-
- <p>The parameter, <code>event</code>, is optional. <code>keyTyped()</code> is
- always passed a
+ }</code></pre><p>The parameter, <code>event</code>, is optional.
+ <code>keyTyped()</code> is always passed a
<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
target="_blank">KeyboardEvent</a>
@@ -55,12 +47,8 @@ description: >
<pre><code class="language-js">function keyReleased(event) {
// Code to run that uses the event.
console.log(event);
- }
-
- </code></pre>
-
- <p>Note: Use the <a href="/reference/p5/keyPressed/">keyPressed()</a> function
- and
+ }</code></pre><p>Note: Use the <a
+ href="/reference/p5/keyPressed/">keyPressed()</a> function and
<a href="/reference/p5/keyCode/">keyCode</a> system variable to respond to
modifier
@@ -73,12 +61,11 @@ description: >
the end
of the function.</p>
-line: 653
+line: 794
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click on the canvas to begin detecting key presses.
@@ -154,12 +141,12 @@ example:
</code>
</div>
class: p5
-params:
- - name: event
- description: |
- <p>optional <code>KeyboardEvent</code> callback argument.</p>
- type: KeyboardEvent
- optional: true
+overloads:
+ - params:
+ - name: event
+ description: optional <code>KeyboardEvent</code> callback argument.
+ optional: 1
+ type: KeyboardEvent
chainable: false
---
diff --git a/src/content/reference/en/p5/lerp.mdx b/src/content/reference/en/p5/lerp.mdx
index 81e57410e1..7662be446a 100644
--- a/src/content/reference/en/p5/lerp.mdx
+++ b/src/content/reference/en/p5/lerp.mdx
@@ -24,12 +24,11 @@ description: >
number outside of the original interval. For example, calling
<code>lerp(0, 10, 1.5)</code> will return 15.</p>
-line: 332
+line: 419
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -96,22 +95,23 @@ example:
</code>
</div>
class: p5
-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
return:
description: lerped value.
type: Number
+overloads:
+ - params:
+ - name: start
+ description: first value.
+ type: Number
+ - name: stop
+ description: second value.
+ type: Number
+ - name: amt
+ description: number.
+ type: Number
+ return:
+ description: lerped value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/lerpColor.mdx b/src/content/reference/en/p5/lerpColor.mdx
index 65ff7cb9cc..379d7e48a5 100644
--- a/src/content/reference/en/p5/lerpColor.mdx
+++ b/src/content/reference/en/p5/lerpColor.mdx
@@ -15,20 +15,19 @@ description: >
to 0. Numbers greater than 1 are set to 1. This differs from the behavior of
- <a href="/reference/p5/lerp/">lerp</a>. It's necessary because numbers outside
- of the
+ <a href="/reference/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="/reference/p5/colorMode/">colorMode()</a>.</p>
-line: 949
+ <a href="/reference/colorMode/">colorMode()</a>.</p>
+line: 1576
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -68,24 +67,23 @@ example:
</code>
</div>
class: p5
-params:
- - name: c1
- description: >
- <p>interpolate from this color (any value created by the color()
- function).</p>
- type: p5.Color
- - name: c2
- description: >
- <p>interpolate to this color (any value created by the color()
- function).</p>
- type: p5.Color
- - name: amt
- description: |
- <p>number between 0 and 1.</p>
- type: Number
return:
description: interpolated color.
type: p5.Color
+overloads:
+ - params:
+ - name: c1
+ description: interpolate from this color.
+ type: p5.Color
+ - name: c2
+ description: interpolate to this color.
+ type: p5.Color
+ - name: amt
+ description: number between 0 and 1.
+ type: Number
+ return:
+ description: interpolated color.
+ type: p5.Color
chainable: false
---
diff --git a/src/content/reference/en/p5/let.mdx b/src/content/reference/en/p5/let.mdx
index 6c6736f5f3..ca0a7fc877 100644
--- a/src/content/reference/en/p5/let.mdx
+++ b/src/content/reference/en/p5/let.mdx
@@ -3,7 +3,7 @@ title: let
module: Foundation
submodule: Foundation
file: src/core/reference.js
-description: >
+description: >-
<p>Declares a new variable.</p>
<p>A variable is a container for a value. For example, a variable might
@@ -21,11 +21,8 @@ description: >
// Reassign x to 50.
- x = 50;
-
- </code></pre>
-
- <p>Variables have block scope. When a variable is declared between curly
+ x = 50;</code></pre><p>Variables have block scope. When a variable is declared
+ between curly
braces <code>{}</code>, it only exists within the block defined by those
braces. For
@@ -47,12 +44,8 @@ description: >
// x was declared in setup(), so it can't be referenced here.
circle(x, 50, 20);
- }
-
- </code></pre>
-
- <p>Variables declared outside of all curly braces <code>{}</code> are in the
- global
+ }</code></pre><p>Variables declared outside of all curly braces
+ <code>{}</code> are in the global
scope. A variable that's in the global scope can be used and changed
@@ -73,14 +66,12 @@ description: >
x += 10;
circle(x, 50, 20);
- }
-
- </code></pre>
-line: 7
+ }</code></pre>
+line: 1
isConstructor: false
itemtype: property
example:
- - "\n<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(220);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Create the message variable.\n let message = 'Hello, \U0001F30D!';\n\n // Display the message.\n text(message, 50, 50);\n\n describe('The text \"Hello, \U0001F30D!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle moves from left to right against a gray background.');\n}\n\nfunction draw() {\n background(220);\n\n // Change the value of x.\n x += 1;\n\n circle(x, 50, 20);\n}\n</code>\n</div>"
+ - "<div>\n<code>\nfunction setup() {\n createCanvas(100, 100);\n\n background(220);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Create the message variable.\n let message = 'Hello, \U0001F30D!';\n\n // Display the message.\n text(message, 50, 50);\n\n describe('The text \"Hello, \U0001F30D!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle moves from left to right against a gray background.');\n}\n\nfunction draw() {\n background(220);\n\n // Change the value of x.\n x += 1;\n\n circle(x, 50, 20);\n}\n</code>\n</div>"
class: p5
---
diff --git a/src/content/reference/en/p5/lightFalloff.mdx b/src/content/reference/en/p5/lightFalloff.mdx
index f91d96da6d..fbf86623ce 100644
--- a/src/content/reference/en/p5/lightFalloff.mdx
+++ b/src/content/reference/en/p5/lightFalloff.mdx
@@ -30,12 +30,11 @@ description: >
<code>quadratic</code> should always be set to values
greater than 0.</p>
-line: 1161
+line: 1145
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -77,19 +76,17 @@ example:
</code>
</div>
class: p5
-params:
- - name: constant
- description: |
- <p>constant value for calculating falloff.</p>
- type: Number
- - name: linear
- description: |
- <p>linear value for calculating falloff.</p>
- type: Number
- - name: quadratic
- description: |
- <p>quadratic value for calculating falloff.</p>
- type: Number
+overloads:
+ - params:
+ - name: constant
+ description: constant value for calculating falloff.
+ type: Number
+ - name: linear
+ description: linear value for calculating falloff.
+ type: Number
+ - name: quadratic
+ description: quadratic value for calculating falloff.
+ type: Number
chainable: true
---
diff --git a/src/content/reference/en/p5/lightness.mdx b/src/content/reference/en/p5/lightness.mdx
index de4dbf41bc..2bfa466a85 100644
--- a/src/content/reference/en/p5/lightness.mdx
+++ b/src/content/reference/en/p5/lightness.mdx
@@ -8,7 +8,7 @@ description: >
<p><code>lightness()</code> extracts the HSL lightness value from a
- <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+ <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color
components, or
a CSS color string.</p>
@@ -16,16 +16,15 @@ description: >
<p>By default, <code>lightness()</code> returns a color's HSL lightness in the
range 0
- to 100. If the <a href="/reference/colorMode/">colorMode()</a> is set to HSL,
- it
+ to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+ HSL, it
returns the lightness value in the given range.</p>
-line: 1134
+line: 1512
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -56,7 +55,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -87,7 +85,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -118,7 +115,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -149,15 +145,19 @@ example:
</code>
</div>
class: p5
-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'
return:
description: the lightness value.
type: Number
+overloads:
+ - params:
+ - name: color
+ description: |-
+ <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
+ color components, or CSS color string.
+ type: 'p5.Color|Number[]|String'
+ return:
+ description: the lightness value.
+ type: Number
chainable: false
---
diff --git a/src/content/reference/en/p5/lights.mdx b/src/content/reference/en/p5/lights.mdx
index be7cd5138a..803e1cb657 100644
--- a/src/content/reference/en/p5/lights.mdx
+++ b/src/content/reference/en/p5/lights.mdx
@@ -11,12 +11,11 @@ description: |
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: 1077
+line: 1073
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -78,6 +77,8 @@ example:
</code>
</div>
class: p5
+overloads:
+ - params: []
chainable: true
---
diff --git a/src/content/reference/en/p5/line.mdx b/src/content/reference/en/p5/line.mdx
index e88a292297..733ff7b686 100644
--- a/src/content/reference/en/p5/line.mdx
+++ b/src/content/reference/en/p5/line.mdx
@@ -2,7 +2,7 @@
title: line
module: Shape
submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
+file: src/shape/2d_primitives.js
description: >
<p>Draws a straight line between two points.</p>
@@ -27,12 +27,11 @@ description: >
3D space. Doing so requires adding the <code>WEBGL</code> argument to
<a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
-line: 565
+line: 702
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
function setup() {
@@ -49,7 +48,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -95,7 +93,6 @@ example:
</code>
</div>
- |-
-
<div>
<code>
function setup() {
@@ -142,48 +139,34 @@ example:
</div>
class: p5
overloads:
- - line: 565
- params:
+ - params:
- name: x1
- description: |
- <p>the x-coordinate of the first point.</p>
+ description: the x-coordinate of the first point.
type: Number
- name: y1
- description: |
- <p>the y-coordinate of the first point.</p>
+ description: the y-coordinate of the first point.
type: Number
- name: x2
- description: |
- <p>the x-coordinate of the second point.</p>
+ description: the x-coordinate of the second point.
type: Number
- name: y2
- description: |
- <p>the y-coordinate of the second point.</p>
+ description: the y-coordinate of the second point.
type: Number
- chainable: 1
- - line: 697
- params:
+ - params:
- name: x1
- description: ''
type: Number
- name: y1
- description: ''
type: Number
- name: z1
- description: |
- <p>the z-coordinate of the first point.</p>
+ description: the z-coordinate of the first point.
type: Number
- name: x2
- description: ''
type: Number
- name: y2
- description: ''
type: Number
- name: z2
- description: |
- <p>the z-coordinate of the second point.</p>
+ description: the z-coordinate of the second point.
type: Number
- chainable: 1
chainable: true
---
diff --git a/src/content/reference/en/p5/linePerspective.mdx b/src/content/reference/en/p5/linePerspective.mdx
index bd63eedbba..09332a3263 100644
--- a/src/content/reference/en/p5/linePerspective.mdx
+++ b/src/content/reference/en/p5/linePerspective.mdx
@@ -14,29 +14,22 @@ description: >
being used:</p>
- <ul>
-
- <li><code>perspective()</code> and <code>frustum()</code> simulate a realistic
- perspective. In
+ <ul><li><code>perspective()</code> and <code>frustum()</code> simulate a
+ realistic perspective. In
these modes, stroke weight is affected by the line’s distance from the
camera. Doing so results in a more natural appearance.
<code>perspective()</code> is
- the default mode for 3D sketches.</li>
-
- <li><code>ortho()</code> doesn’t simulate a realistic perspective. In this
- mode, stroke
+ the default mode for 3D sketches.</li><li><code>ortho()</code> doesn’t
+ simulate a realistic perspective. In this mode, stroke
weights are consistent regardless of the line’s distance from the camera.
- Doing so results in a more predictable and consistent appearance.</li>
-
- </ul>
-
- <p><code>linePerspective()</code> can override the default line drawing
- mode.</p>
+ Doing so results in a more predictable and consistent
+ appearance.</li></ul><p><code>linePerspective()</code> can override the
+ default line drawing mode.</p>
<p>The parameter, <code>enable</code>, is optional. It’s a
<code>Boolean</code> value that sets the
@@ -59,12 +52,11 @@ description: >
it's enabled and <code>false</code> if not.</p>
<p>Note: <code>linePerspective()</code> can only be used in WebGL mode.</p>
-line: 280
+line: 3463
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Double-click the canvas to toggle the line perspective.
@@ -142,18 +134,18 @@ example:
</code>
</div>
class: p5
+return:
+ description: whether line perspective is enabled.
+ type: boolean
overloads:
- - line: 280
- params:
+ - params:
- name: enable
- description: |
- <p>whether to enable line perspective.</p>
+ description: whether to enable line perspective.
type: Boolean
- - line: 392
- params: []
+ - params: []
return:
description: whether line perspective is enabled.
- type: Boolean
+ type: boolean
chainable: false
---
diff --git a/src/content/reference/en/p5/loadBlob.mdx b/src/content/reference/en/p5/loadBlob.mdx
new file mode 100644
index 0000000000..ba1a0790d8
--- /dev/null
+++ b/src/content/reference/en/p5/loadBlob.mdx
@@ -0,0 +1,75 @@
+---
+title: loadBlob
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >-
+ Loads a file at the given path as a Blob, then returns the resulting data or
+
+ passes it to a success callback function, if provided. On load, this function
+
+ returns a <code>Promise</code> that resolves to a Blob containing the file
+ data.
+line: 834
+isConstructor: false
+itemtype: method
+example:
+ - |-
+ <div>
+ <code>
+ let myBlob;
+
+ async function setup() {
+ createCanvas(200, 200);
+ background(220);
+ try {
+ // 1. Load an image file as a Blob.
+ myBlob = await loadBlob('/assets/flower-1.png');
+
+ // 2. Convert the Blob into an object URL.
+ const objectUrl = URL.createObjectURL(myBlob);
+
+ // 3. Load that object URL into a p5.Image.
+ loadImage(objectUrl, (img) => {
+ // 4. Display the loaded image.
+ image(img, 0, 0, width, height);
+ });
+ } catch (err) {
+ console.error('Error loading blob:', err);
+ }
+ }
+ </code>
+ </div>
+class: p5
+return:
+ description: A promise that resolves with the loaded Blob.
+ type: Promise<Blob>
+overloads:
+ - params:
+ - name: path
+ description: |-
+ The path or Request object pointing to the file
+ you want to load.
+ type: String|Request
+ - name: successCallback
+ description: |-
+ Optional. A function to be called if the
+ file successfully loads, receiving the
+ resulting Blob as its only argument.
+ optional: 1
+ type: Function
+ - name: errorCallback
+ description: |-
+ Optional. A function to be called if an
+ error occurs during loading; receives the
+ error object as its only argument.
+ optional: 1
+ type: Function
+ return:
+ description: A promise that resolves with the loaded Blob.
+ type: Promise<Blob>
+chainable: false
+---
+
+
+# loadBlob
diff --git a/src/content/reference/en/p5/loadBytes.mdx b/src/content/reference/en/p5/loadBytes.mdx
index a7e9fe79ab..860dc5ea76 100644
--- a/src/content/reference/en/p5/loadBytes.mdx
+++ b/src/content/reference/en/p5/loadBytes.mdx
@@ -3,49 +3,75 @@ 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: 986
+description: This method is suitable for fetching files up to size of 64MB.
+line: 775
isConstructor: false
itemtype: method
example:
- - |-
+ - >-
+ <div>
+
+ <code>
- <div class='norender'><code>
let data;
- function preload() {
- data = loadBytes('/assets/mammals.xml');
+
+ async function setup() {
+
+ createCanvas(100, 100); // Create a canvas
+
+ data = await loadBytes('/assets/mammals.xml'); // Load the bytes from the
+ XML file
+
+
+ background(255); // Set a white background
+
+ fill(0); // Set text color to black
+
+
+ // Display the first 5 byte values on the canvas in hexadecimal format
+
+ for (let i = 0; i < 5; i++) {
+
+ let byteHex = data[i].toString(16);
+
+ text(byteHex, 10, 18 * (i + 1)); // Adjust spacing as needed
+
}
- function setup() {
- for (let i = 0; i < 5; i++) {
- console.log(data.bytes[i].toString(16));
- }
- describe('no image displayed');
+
+ describe('no image displayed, displays first 5 bytes of mammals.xml in
+ hexadecimal format');
+
}
- </code></div>
+
+ </code>
+
+ </div>
class: p5
-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
return:
- description: an object whose 'bytes' property will be the loaded buffer
- type: Object
+ description: a Uint8Array containing the loaded buffer
+ type: Promise<Uint8Array>
+overloads:
+ - params:
+ - name: file
+ description: name of the file or URL to load
+ type: String|Request
+ - name: callback
+ description: |-
+ function to be executed after <a href="#/p5/loadBytes">loadBytes()</a>
+ completes
+ optional: 1
+ type: Function
+ - name: errorCallback
+ description: |-
+ function to be executed if there
+ is an error
+ optional: 1
+ type: Function
+ return:
+ description: a Uint8Array containing the loaded buffer
+ type: Promise<Uint8Array>
chainable: false
---
diff --git a/src/content/reference/en/p5/loadFilterShader.mdx b/src/content/reference/en/p5/loadFilterShader.mdx
new file mode 100644
index 0000000000..ac463f1e90
--- /dev/null
+++ b/src/content/reference/en/p5/loadFilterShader.mdx
@@ -0,0 +1,62 @@
+---
+title: loadFilterShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: Creates and loads a filter shader from an external file.
+line: 553
+isConstructor: false
+itemtype: method
+alt: A rectangle with a shader applied to it.
+example:
+ - |-
+ <div modernizr='webgl'>
+ <code>
+ let myShader;
+
+ async function setup() {
+ myShader = await loadFilterShader('/assets/basic.frag');
+ createCanvas(100, 100, WEBGL);
+ noStroke();
+ }
+
+ function draw() {
+ // shader() sets the active shader with our shader
+ shader(myShader);
+
+ // rect gives us some geometry on the screen
+ rect(-50, -50, width, height);
+ }
+ </code>
+ </div>
+class: p5
+return:
+ description: a promise that resolves with a shader object
+ type: Promise<p5.Shader>
+overloads:
+ - params:
+ - name: fragFilename
+ description: path to the fragment shader file
+ type: String
+ - name: successCallback
+ description: |-
+ callback to be called once the shader is
+ loaded. Will be passed the
+ <a href="#/p5.Shader">p5.Shader</a> object.
+ optional: 1
+ type: Function
+ - name: failureCallback
+ description: |-
+ callback to be called if there is an error
+ loading the shader. Will be passed the
+ error event.
+ optional: 1
+ type: Function
+ return:
+ description: a promise that resolves with a shader object
+ type: Promise<p5.Shader>
+chainable: false
+---
+
+
+# loadFilterShader
diff --git a/src/content/reference/en/p5/loadFont.mdx b/src/content/reference/en/p5/loadFont.mdx
index 70bb37ce71..f973f1e0aa 100644
--- a/src/content/reference/en/p5/loadFont.mdx
+++ b/src/content/reference/en/p5/loadFont.mdx
@@ -1,8 +1,8 @@
---
title: loadFont
module: Typography
-submodule: Loading & Displaying
-file: src/typography/loading_displaying.js
+submodule: ''
+file: src/type/p5.Font.js
description: >
<p>Loads a font and creates a <a href="/reference/p5/p5.Font">p5.Font</a>
object.
@@ -31,6 +31,16 @@ description: >
security.</p>
+ <p>In 2D mode, <code>path</code> can take on a few other forms. It could be a
+ path to a CSS file,
+
+ such as one from <a href="https://fonts.google.com/">Google Fonts.</a> It
+ could also
+
+ be a string with a <a
+ href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/">CSS
+ <code>@font-face</code> declaration.</a></p>
+
<p>The second parameter, <code>successCallback</code>, is optional. If a
function is
@@ -51,30 +61,22 @@ description: >
object if needed.</p>
- <p>Fonts can take time to load. Calling <code>loadFont()</code> in
-
- <a href="/reference/p5/preload/">preload()</a> ensures fonts load before
- they're
+ <p>Fonts can take time to load. <code>await</code> the result of
+ <code>loadFont()</code> in
- used in <a href="/reference/p5/setup/">setup()</a> or
-
- <a href="/reference/p5/draw/">draw()</a>.</p>
-line: 16
+ <a href="/reference/p5/setup/">setup()</a> before using the result.</p>
+line: 1317
isConstructor: false
itemtype: method
example:
- |-
-
-
<div>
<code>
let font;
- function preload() {
- font = loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ createCanvas(100, 100);
+ font = await loadFont('/assets/inconsolata.otf');
fill('deeppink');
textFont(font);
textSize(36);
@@ -84,10 +86,11 @@ example:
}
</code>
</div>
-
+ - |-
<div>
<code>
function setup() {
+ createCanvas(100, 100);
loadFont('/assets/inconsolata.otf', font => {
fill('deeppink');
textFont(font);
@@ -99,10 +102,11 @@ example:
}
</code>
</div>
-
+ - |-
<div>
<code>
function setup() {
+ createCanvas(100, 100);
loadFont('/assets/inconsolata.otf', success, failure);
}
@@ -120,14 +124,12 @@ example:
}
</code>
</div>
-
+ - |-
<div>
<code>
- function preload() {
- loadFont('/assets/inconsolata.otf');
- }
-
- function setup() {
+ async function setup() {
+ createCanvas(100, 100);
+ await loadFont('/assets/inconsolata.otf');
let p = createP('p5*js');
p.style('color', 'deeppink');
p.style('font-family', 'Inconsolata');
@@ -137,30 +139,98 @@ example:
describe('The text "p5*js" written in pink on a white background.');
}
</code>
+ </div>
+ - >-
+ <div class="norender">
+
+ <code>
+
+ // Some other forms of loading fonts:
+
+ loadFont("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
+
+ loadFont(`@font-face { font-family: "Bricolage Grotesque", serif;
+ font-optical-sizing: auto; font-weight: 400; font-style: normal;
+ font-variation-settings: "wdth" 100; }`);
+
+ </code>
+
</div>
class: p5
-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
return:
description: <a href="#/p5.Font">p5.Font</a> object.
- type: p5.Font
+ type: Promise<p5.Font>
+overloads:
+ - params:
+ - name: path
+ description: >-
+ path of the font or CSS file to be loaded, or a CSS
+ <code>@font-face</code> string.
+ type: String
+ - name: name
+ description: >-
+ An alias that can be used for this font in <code>textFont()</code>.
+ Defaults to the name in the font's metadata.
+ optional: 1
+ type: String
+ - name: options
+ description: >-
+ An optional object with extra CSS font face descriptors, or p5.js font
+ settings.
+ optional: 1
+ type: Object
+ - name: options.sets
+ description: >-
+ (Experimental) An optional string of list of strings with Unicode
+ character set names that should be included. When a CSS file is used
+ as the font, it may contain multiple font files. The font best
+ matching the requested character sets will be picked.
+ optional: 1
+ type: 'String|String[]'
+ - name: successCallback
+ description: |-
+ function called with the
+ <a href="#/p5.Font">p5.Font</a> object after it
+ loads.
+ optional: 1
+ type: Function
+ - name: failureCallback
+ description: >-
+ 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.
+ optional: 1
+ type: Function
+ return:
+ description: <a href="#/p5.Font">p5.Font</a> object.
+ type: Promise<p5.Font>
+ - params:
+ - name: path
+ description: path of the font to be loaded.
+ type: String
+ - name: successCallback
+ description: |-
+ function called with the
+ <a href="#/p5.Font">p5.Font</a> object after it
+ loads.
+ optional: 1
+ type: Function
+ - name: failureCallback
+ description: >-
+ 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.
+ optional: 1
+ type: Function
+ return:
+ description: The font.
+ type: Promise<p5.Font>
chainable: false
---
diff --git a/src/content/reference/en/p5/loadImage.mdx b/src/content/reference/en/p5/loadImage.mdx
index 0c55e7590b..14656a23d7 100644
--- a/src/content/reference/en/p5/loadImage.mdx
+++ b/src/content/reference/en/p5/loadImage.mdx
@@ -21,43 +21,47 @@ description: >
security. Raw image data can also be passed as a base64 encoded image in
- the form <code>'data:image/png;base64,arandomsequenceofcharacters'</code>.</p>
+ the form <code>'data:image/png;base64,arandomsequenceofcharacters'</code>. The
+ <code>path</code>
+
+ parameter can also be defined as a <code>Request</code>
+
+ object for more advanced usage.</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="/reference/p5/p5.Image">p5.Image</a> object.</p>
+ the new <a href="/reference/p5/p5.Image">p5.Image</a> object. The return value
+ of the
+
+ function will be used as the final return value of
+ <code>loadImage()</code>.</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>
+ the event error. The return value of the function will be used as the final
- <p>Images can take time to load. Calling <code>loadImage()</code> in
+ return value of <code>loadImage()</code>.</p>
- <a href="/reference/p5/preload/">preload()</a> ensures images load before
- they're
+ <p>This function returns a <code>Promise</code> and should be used in an
+ <code>async</code> setup with
- used in <a href="/reference/p5/setup/">setup()</a> or <a
- href="/reference/p5/draw/">draw()</a>.</p>
-line: 18
+ <code>await</code>. See the examples for the usage syntax.</p>
+line: 105
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let img;
// Load the image and create a p5.Image object.
- function preload() {
- img = loadImage('/assets/laDefense.jpg');
- }
-
- function setup() {
+ async function setup() {
+ img = await loadImage('/assets/laDefense.jpg');
createCanvas(100, 100);
// Draw the image.
@@ -70,9 +74,9 @@ example:
<div>
<code>
- function setup() {
+ async function setup() {
// Call handleImage() once the image loads.
- loadImage('/assets/laDefense.jpg', handleImage);
+ await loadImage('/assets/laDefense.jpg', handleImage);
describe('Image of the underside of a white umbrella and a gridded ceiling.');
}
@@ -86,10 +90,10 @@ example:
<div>
<code>
- function setup() {
+ async function setup() {
// Call handleImage() once the image loads or
// call handleError() if an error occurs.
- loadImage('/assets/laDefense.jpg', handleImage, handleError);
+ await loadImage('/assets/laDefense.jpg', handleImage, handleError);
}
// Display the image.
@@ -106,27 +110,30 @@ example:
</code>
</div>
class: p5
-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
return:
description: the <a href="#/p5.Image">p5.Image</a> object.
- type: p5.Image
+ type: Promise<p5.Image>
+overloads:
+ - params:
+ - name: path
+ description: path of the image to be loaded or base64 encoded image.
+ type: String|Request
+ - name: successCallback
+ description: |-
+ function called with
+ <a href="#/p5.Image">p5.Image</a> once it
+ loads.
+ optional: 1
+ type: function(p5.Image)
+ - name: failureCallback
+ description: |-
+ function called with event
+ error if the image fails to load.
+ optional: 1
+ type: function(Event)
+ return:
+ description: the <a href="#/p5.Image">p5.Image</a> object.
+ type: Promise<p5.Image>
chainable: false
---
diff --git a/src/content/reference/en/p5/loadJSON.mdx b/src/content/reference/en/p5/loadJSON.mdx
index aa2851befb..54888132f8 100644
--- a/src/content/reference/en/p5/loadJSON.mdx
+++ b/src/content/reference/en/p5/loadJSON.mdx
@@ -19,15 +19,19 @@ description: >
Booleans, arrays, <code>null</code>, or other objects.</p>
- <p>The first parameter, <code>path</code>, is always a string with the path to
- the file.
+ <p>The first parameter, <code>path</code>, is a string with the path to the
+ file.
Paths to local files should be relative, as in
<code>loadJSON('/assets/data.json')</code>. URLs such as
<code>'https://example.com/data.json'</code> may be blocked due to browser
- security.</p>
+ security.
+
+ The <code>path</code> parameter can also be defined as a <code>Request</code>
+
+ object for more advanced usage.</p>
<p>The second parameter, <code>successCallback</code>, is optional. If a
function is
@@ -38,7 +42,12 @@ description: >
object
created from the JSON data will be passed to <code>handleData()</code> as its
- only argument.</p>
+ only argument.
+
+ The return value of the <code>handleData()</code> function will be used as the
+ final return
+
+ value of <code>loadJSON('/assets/data.json', handleData)</code>.</p>
<p>The third parameter, <code>failureCallback</code>, is also optional. If a
function is
@@ -52,32 +61,27 @@ description: >
loading. The <code>Error</code> object will be passed to
<code>handleFailure()</code> as its only
- argument.</p>
+ argument. The return value of the <code>handleFailure()</code> function will
+ be used as the
- <p>Note: Data can take time to load. Calling <code>loadJSON()</code> within
+ final return value of <code>loadJSON('/assets/data.json', handleData,
+ handleFailure)</code>.</p>
- <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
- used in
+ <p>This function returns a <code>Promise</code> and should be used in an
+ <code>async</code> setup with
- <a href="/reference/p5/setup/">setup()</a> or <a
- href="/reference/p5/draw/">draw()</a>.</p>
-line: 17
+ <code>await</code>. See the examples for the usage syntax.</p>
+line: 293
isConstructor: false
itemtype: method
example:
- |-
-
-
<div>
<code>
let myData;
- // Load the JSON and create an object.
- function preload() {
- myData = loadJSON('/assets/data.json');
- }
-
- function setup() {
+ async function setup() {
+ myData = await loadJSON('/assets/data.json');
createCanvas(100, 100);
background(200);
@@ -98,12 +102,8 @@ example:
<code>
let myData;
- // Load the JSON and create an object.
- function preload() {
- myData = loadJSON('/assets/data.json');
- }
-
- function setup() {
+ async function setup() {
+ myData = await loadJSON('/assets/data.json');
createCanvas(100, 100);
background(200);
@@ -131,12 +131,8 @@ example:
<code>
let myData;
- // Load the GeoJSON and create an object.
- function preload() {
- myData = loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
- }
-
- function setup() {
+ async function setup() {
+ myData = await loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
createCanvas(100, 100);
background(200);
@@ -165,14 +161,12 @@ example:
let bigQuake;
// Load the GeoJSON and preprocess it.
- function preload() {
- loadJSON(
+ async function setup() {
+ await loadJSON(
'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
handleData
);
- }
- function setup() {
createCanvas(100, 100);
background(200);
@@ -211,15 +205,13 @@ example:
let bigQuake;
// Load the GeoJSON and preprocess it.
- function preload() {
- loadJSON(
+ async function setup() {
+ await loadJSON(
'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
handleData,
handleError
);
- }
- function setup() {
createCanvas(100, 100);
background(200);
@@ -258,26 +250,27 @@ example:
</code>
</div>
class: p5
-params:
- - name: path
- description: |
- <p>path of the JSON file to be loaded.</p>
- type: String
- - name: successCallback
- description: >
- <p>function to call once the data is loaded. Will be passed the
- object.</p>
- type: Function
- optional: true
- - name: errorCallback
- description: >
- <p>function to call if the data fails to load. Will be passed an
- <code>Error</code> event object.</p>
- type: Function
- optional: true
return:
description: object containing the loaded data.
- type: Object
+ type: Promise<Object>
+overloads:
+ - params:
+ - name: path
+ description: path of the JSON file to be loaded.
+ type: String|Request
+ - name: successCallback
+ description: function to call once the data is loaded. Will be passed the object.
+ optional: 1
+ type: Function
+ - name: errorCallback
+ description: >-
+ function to call if the data fails to load. Will be passed an
+ <code>Error</code> event object.
+ optional: 1
+ type: Function
+ return:
+ description: object containing the loaded data.
+ type: Promise<Object>
chainable: false
---
diff --git a/src/content/reference/en/p5/loadModel.mdx b/src/content/reference/en/p5/loadModel.mdx
index 9c34c265db..9f8f57fa32 100644
--- a/src/content/reference/en/p5/loadModel.mdx
+++ b/src/content/reference/en/p5/loadModel.mdx
@@ -21,18 +21,22 @@ description: >
process the model.</p>
- <p>The first parameter, <code>path</code>, is always a <code>String</code>
- with the path to the
+ <p>The first parameter, <code>path</code>, is a <code>String</code> with the
+ path to the file. Paths
- file. Paths to local files should be relative, as in
+ to local files should be relative, as in
+ <code>loadModel('/assets/model.obj')</code>.
- <code>loadModel('/assets/model.obj')</code>. URLs such as
+ URLs such as <code>'https://example.com/model.obj'</code> may be blocked due
+ to browser
- <code>'https://example.com/model.obj'</code> may be blocked due to browser
- security.</p>
+ security. The <code>path</code> parameter can also be defined as a
+ <code>Request</code>
- <p>Note: When loading a <code>.obj</code> file that references materials
- stored in
+ object for more advanced usage.
+
+ Note: When loading a <code>.obj</code> file that references materials stored
+ in
<code>.mtl</code> files, p5.js will attempt to load and apply those materials.
@@ -121,27 +125,19 @@ description: >
// Pass the options object to loadModel().
- loadModel('/assets/model.obj', options);
-
- </code></pre>
-
- <p>Models can take time to load. Calling <code>loadModel()</code> in
+ loadModel('/assets/model.obj', options);</code></pre><p>This function returns
+ a <code>Promise</code> and should be used in an <code>async</code> setup with
- <a href="/reference/p5/preload/">preload()</a> ensures models load before
- they're
-
- used in <a href="/reference/p5/setup/">setup()</a> or <a
- href="/reference/p5/draw/">draw()</a>.</p>
+ <code>await</code>. See the examples for the usage syntax.</p>
<p>Note: There’s no support for colored STL files. STL files with color will
be rendered without color.</p>
-line: 13
+line: 341
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
// Click and drag the mouse to view the scene from different angles.
@@ -149,11 +145,9 @@ example:
let shape;
// Load the file and create a p5.Geometry object.
- function preload() {
- shape = loadModel('/assets/teapot.obj');
- }
+ async function setup() {
+ shape = await loadModel('/assets/teapot.obj');
- function setup() {
createCanvas(100, 100, WEBGL);
describe('A white teapot drawn against a gray background.');
@@ -179,11 +173,9 @@ example:
// Load the file and create a p5.Geometry object.
// Normalize the geometry's size to fit the canvas.
- function preload() {
- shape = loadModel('/assets/teapot.obj', true);
- }
+ async function setup() {
+ shape = await loadModel('/assets/teapot.obj', true);
- function setup() {
createCanvas(100, 100, WEBGL);
describe('A white teapot drawn against a gray background.');
@@ -208,11 +200,9 @@ example:
let shape;
// Load the file and create a p5.Geometry object.
- function preload() {
- loadModel('/assets/teapot.obj', true, handleModel);
- }
+ async function setup() {
+ await loadModel('/assets/teapot.obj', true, handleModel);
- function setup() {
createCanvas(100, 100, WEBGL);
describe('A white teapot drawn against a gray background.');
@@ -244,11 +234,9 @@ example:
let shape;
// Load the file and create a p5.Geometry object.
- function preload() {
- loadModel('/assets/wrong.obj', true, handleModel, handleError);
- }
+ async function setup() {
+ await loadModel('/assets/teapot.obj', true, handleModel, handleError);
- function setup() {
createCanvas(100, 100, WEBGL);
describe('A white teapot drawn against a gray background.');
@@ -285,11 +273,9 @@ example:
let shape;
// Load the file and create a p5.Geometry object.
- function preload() {
- loadModel('/assets/teapot.obj', true, handleModel, handleError, '.obj');
- }
+ async function setup() {
+ await loadModel('/assets/teapot.obj', '.obj', true, handleModel, handleError);
- function setup() {
createCanvas(100, 100, WEBGL);
describe('A white teapot drawn against a gray background.');
@@ -325,18 +311,16 @@ example:
let shape;
let options = {
+ fileType: '.obj',
normalize: true,
successCallback: handleModel,
- failureCallback: handleError,
- fileType: '.obj'
+ failureCallback: handleError
};
// Load the file and create a p5.Geometry object.
- function preload() {
- loadModel('/assets/teapot.obj', options);
- }
+ async function setup() {
+ await loadModel('/assets/teapot.obj', options);
- function setup() {
createCanvas(100, 100, WEBGL);
describe('A white teapot drawn against a gray background.');
@@ -368,97 +352,85 @@ example:
class: p5
return:
description: the <a href="#/p5.Geometry">p5.Geometry</a> object
- type: p5.Geometry
+ type: Promise<p5.Geometry>
overloads:
- - line: 13
- params:
+ - params:
- name: path
- description: |
- <p>path of the model to be loaded.</p>
+ description: path of the model to be loaded.
+ type: String|Request
+ - name: fileType
+ description: >-
+ model’s file extension. Either <code>'.obj'</code> or
+ <code>'.stl'</code>.
+ optional: 1
type: String
- name: normalize
- description: |
- <p>if <code>true</code>, scale the model to fit the canvas.</p>
+ description: 'if <code>true</code>, scale the model to fit the canvas.'
type: Boolean
- name: successCallback
- description: |
- <p>function to call once the model is loaded. Will be passed
- the <a href="#/p5.Geometry">p5.Geometry</a> object.</p>
+ description: |-
+ function to call once the model is loaded. Will be passed
+ the <a href="#/p5.Geometry">p5.Geometry</a> object.
+ optional: 1
type: function(p5.Geometry)
- optional: true
- name: failureCallback
- description: >
- <p>function to call if the model fails to load. Will be passed an
- <code>Error</code> event object.</p>
- type: Function(Event)
- optional: true
- - name: fileType
- description: >
- <p>model’s file extension. Either <code>'.obj'</code> or
- <code>'.stl'</code>.</p>
- type: String
- optional: true
+ description: >-
+ function to call if the model fails to load. Will be passed an
+ <code>Error</code> event object.
+ optional: 1
+ type: function(Event)
return:
description: the <a href="#/p5.Geometry">p5.Geometry</a> object
- type: p5.Geometry
- - line: 324
- params:
+ type: Promise<p5.Geometry>
+ - params:
- name: path
- description: ''
+ type: String|Request
+ - name: fileType
+ optional: 1
type: String
- name: successCallback
- description: ''
+ optional: 1
type: function(p5.Geometry)
- optional: true
- name: failureCallback
- description: ''
- type: Function(Event)
- optional: true
- - name: fileType
- description: ''
- type: String
- optional: true
+ optional: 1
+ type: function(Event)
return:
description: new <a href="#/p5.Geometry">p5.Geometry</a> object.
- type: p5.Geometry
- - line: 332
- params:
+ type: Promise<p5.Geometry>
+ - params:
- name: path
- description: ''
- type: String
+ type: String|Request
- name: options
- description: |
- <p>loading options.</p>
+ description: loading options.
+ optional: 1
type: Object
- optional: true
- props:
- - name: successCallback
- description: ''
- type: function(p5.Geometry)
- optional: true
- - name: failureCallback
- description: ''
- type: Function(Event)
- optional: true
- - name: fileType
- description: ''
- type: String
- optional: true
- - name: normalize
- description: ''
- type: Boolean
- optional: true
- - name: flipU
- description: ''
- type: Boolean
- optional: true
- - name: flipV
- description: ''
- type: Boolean
- optional: true
+ - name: options.fileType
+ description: ''
+ optional: 1
+ type: String
+ - name: options.successCallback
+ description: ''
+ optional: 1
+ type: function(p5.Geometry)
+ - name: options.failureCallback
+ description: ''
+ optional: 1
+ type: function(Event)
+ - name: options.normalize
+ description: ''
+ optional: 1
+ type: Boolean
+ - name: options.flipU
+ description: ''
+ optional: 1
+ type: Boolean
+ - name: options.flipV
+ description: ''
+ optional: 1
+ type: Boolean
return:
description: new <a href="#/p5.Geometry">p5.Geometry</a> object.
- type: p5.Geometry
+ type: Promise<p5.Geometry>
chainable: false
---
diff --git a/src/content/reference/en/p5/loadPixels.mdx b/src/content/reference/en/p5/loadPixels.mdx
index 896e9e0b05..578e5fa166 100644
--- a/src/content/reference/en/p5/loadPixels.mdx
+++ b/src/content/reference/en/p5/loadPixels.mdx
@@ -1,29 +1,26 @@
---
title: loadPixels
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
+module: Rendering
+submodule: ''
+file: src/webgl/p5.Framebuffer.js
description: |
<p>Loads the current value of each pixel on the canvas into the
<a href="/reference/p5/pixels/">pixels</a> array.</p>
<p><code>loadPixels()</code> must be called before reading from or writing to
<a href="/reference/p5/pixels/">pixels</a>.</p>
-line: 946
+line: 1321
isConstructor: false
itemtype: method
example:
- |-
-
<div>
<code>
let img;
- // Load the image.
- function preload() {
- img = loadImage('/assets/rockies.jpg');
- }
+ async function setup() {
+ // Load the image.
+ img = await loadImage('/assets/rockies.jpg');
- function setup() {
createCanvas(100, 100);
// Display the image.
@@ -50,7 +47,46 @@ example:
}
</code>
</div>
+ - |-
+ <div>
+ <code>
+ function setup() {
+ createCanvas(100, 100, WEBGL);
+
+ background(200);
+
+ // Create a p5.Framebuffer object.
+ let myBuffer = createFramebuffer();
+
+ // Load the pixels array.
+ myBuffer.loadPixels();
+
+ // Get the number of pixels in the
+ // top half of the framebuffer.
+ let numPixels = myBuffer.pixels.length / 2;
+
+ // Set the framebuffer's top half to pink.
+ for (let i = 0; i < numPixels; i += 4) {
+ myBuffer.pixels[i] = 255;
+ myBuffer.pixels[i + 1] = 102;
+ myBuffer.pixels[i + 2] = 204;
+ myBuffer.pixels[i + 3] = 255;
+ }
+
+ // Update the pixels array.
+ myBuffer.updatePixels();
+
+ // Draw the p5.Framebuffer object to the canvas.
+ image(myBuffer, -50, -50);
+
+ describe('A pink rectangle above a gray rectangle.');
+ }
+ </code>
+ </div>